1

** Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of SwitchButton**

export

import React from 'react';
import { SwitchUnstyled } from '@mui/material';
import { SwitchRoot } from './SwitchButton.styled';

type Props = {
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  checked: boolean;
};

export const SwitchButton: React.FC<Props> = ({ onChange, checked }) => {
  return <SwitchUnstyled checked={checked} onChange={onChange} component={SwitchRoot} />;
};

import

import React, { useCallback } from 'react';
import {
  backTextCSS,
  stepShiftTextCSS,
  stepTitleCSS,
  Styled,
  switchButtonBoxCSS,
  switchButtonLongTextCSS,
  switchButtonTextCSS,
} from './WorkingDayHeader.styled';
import { Grid, Typography } from '@mui/material';
import SvgBackIcon from '../../../../../../common/IconComponents/SvgBackIcon';
import { Controller, useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { yup } from '../../../../../../app/core';

import { SwitchButton } from '../../../../../../common/newUi/SwitchButton';
import { useSpotConfigurationCtx } from '../../../../containers/SpotConfigurationCtx';
import { HeaderBreadcrumbs } from '../../../../../../app/newContainers';
import { heightInheritCSS, mb, mt } from '../../../../../../common/common.styled';
import { TitleStep } from '../../../TitleStep/TitleStep';
import { SwitchSelectors } from '../../../../../../common/newUi/SwitchSelectors';

type StandardShiftData = {
  standardShift: boolean;
};
const defaultValues = {
  standardShift: false,
};
const schema = yup.object().shape({
  standardShift: yup.boolean().required(' '),
});

const options = [
  {
    label: 'Будни',
    value: 'allDay',
    selectedBackgroundColor: '#8891A7',
    selectedFontColor: '#ffffff',
  },
  {
    label: 'Выходные',
    value: 'weekdays',
    selectedBackgroundColor: '#8891A7',
    selectedFontColor: '#ffffff',
  },
];

type Props = {
  setAreWorkingDays: (arg: boolean) => void;
};

export const WorkingDayHeader: React.FC<Props> = ({ setAreWorkingDays }) => {
  const { wizardContext, onGoNext } = useSpotConfigurationCtx();

  const {
    handleSubmit,
    control,
    reset,
    watch,
    formState: { errors },
  } = useForm<StandardShiftData>({ defaultValues, resolver: yupResolver(schema) });
  const moneyDayOn = 7400;
  const moneyDayOff = 0;

  const handleGoBack = useCallback(() => {
    onGoNext({ ...wizardContext, stepName: 'WORKING_HOURS' });
  }, [onGoNext, wizardContext]);

  const handleSwitchChange = useCallback(() => {
    setAreWorkingDays((prevValue) => !prevValue);
  }, [setAreWorkingDays]);

  return (
    <Styled.Root>
      <Grid container css={heightInheritCSS} justifyContent="space-between">
        <Grid item xs={12}>
          <HeaderBreadcrumbs />
        </Grid>
        <Grid item xs={12} css={[mb(40), mt(40)]}>
          <Styled.Header>
            <TitleStep title={'Рабочий день'} numberStep={2} numberProgress={50}>
              <Grid css={stepTitleCSS} container onClick={handleGoBack} alignItems="center">
                <Grid item xs={3} css={mt(4)}>
                  <SvgBackIcon />
                </Grid>
                <Grid item xs={9}>
                  <Typography css={backTextCSS}> Назад</Typography>
                </Grid>
              </Grid>
            </TitleStep>
            {/* <Typography css={stepShiftTextCSS}>Укажи смены работы персонала или создай новую</Typography> */}
            <Grid container spacing={2} css={mt(20)} justifyContent="space-between">
              <Grid item xs={5}>
                <Controller
                  name="standardShift"
                  control={control}
                  render={({ field: { value, onChange } }) => (
                    <Grid css={switchButtonBoxCSS} container>
                      <Grid item xs={1}>
                        <SwitchButton onChange={onChange} checked={value} />
                      </Grid>
                      <Grid item xs={11}>
                        {value ? (
                          <Typography
                            css={switchButtonTextCSS}
                          >{`Стандартный набор смен включен: ${moneyDayOn} рублей / день`}</Typography>
                        ) : (
                          <Typography
                            css={switchButtonLongTextCSS}
                          >{`Стандартный набор смен выключен. Текущие смены: ${moneyDayOff}  рублей / день `}</Typography>
                        )}
                      </Grid>
                    </Grid>
                  )}
                />
              </Grid>
              <Grid item xs={5}>
                <Grid container justifyContent="flex-end">
                  <Grid item>
                    <Styled.ButtonSwitch>
                      <SwitchSelectors
                        onChange={handleSwitchChange}
                        options={options}
                        background={'#fff'}
                        fontColor={'#8891A7'}
                      />
                    </Styled.ButtonSwitch>
                  </Grid>
                </Grid>
              </Grid>
            </Grid>
          </Styled.Header>
        </Grid>
      </Grid>
    </Styled.Root>
  );
};
6
  • Проблема с switchButton -ом но не понятно что не так сделано 25 фев 2022 в 12:06
  • либо неверно импортируется import { SwitchUnstyled } from '@mui/material';, либо import { SwitchRoot } from './SwitchButton.styled'; один из двух - undefined
    – Grundy
    25 фев 2022 в 12:26
  • Но по факту все правильно 25 фев 2022 в 12:30
  • если бы было правильно - не было бы undefined. Ты должен найти какой именно компоненты ты неправильно импортируешь и импортировать его правильно
    – Grundy
    25 фев 2022 в 12:33
  • SwitchUnstyled автоматический имортируется и там 100% все правильно 25 фев 2022 в 12:39

1 ответ 1

0

У вас неверный импорт компонента @mui Вот что описывается в документации.

import SwitchUnstyled from "@mui/base/SwitchUnstyled";

Сама документация https://mui.com/api/switch-unstyled/

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.