Modal

import { Modal } from '@megafon/ui-core';

Примеры и код
Свойства и методы

Код DemoModalWrapperexport const DemoModalWrapper: React.FC<IDemoModalWrapperProps> = props => {
    const [isOpened, setIsOpened] = React.useState<boolean>(false);
    const [isShowBackButton, setIsShowBackButton] = React.useState<boolean>(false);

    const handleOpen = (): void => {
        setIsOpened(true);
    };

    const handleCLose = (): void => {
        setIsOpened(false);
    };

    const handleChangeShowBackButton =
        (value: boolean): (() => void) =>
        (): void => {
            setIsShowBackButton(value);
        };

    const renderStaticFooter: JSX.Element = (
        <div style={{ paddingTop: '24px', textAlign: 'center' }}>
            <Button onClick={handleCLose}>Закрыть</Button>
        </div>
    );

    const renderStickyFooter: JSX.Element = (
        <div style={{ padding: '32px 0', textAlign: 'center' }}>
            <Button onClick={handleCLose}>Закрыть</Button>
        </div>
    );

    const renderActiveButtonFooter: JSX.Element = (
        <div
            style={{
                display: 'flex',
                justifyContent: 'center',
                padding: '32px 0',
                textAlign: 'center'
            }}
        >
            {!isShowBackButton && (
                <div style={{ marginRight: '16px' }}>
                    <Button onClick={handleChangeShowBackButton(true)}>
                        Далее
                    </Button>
                </div>
            )}
            <Button type="outline" onClick={handleCLose}>
                Закрыть
            </Button>
        </div>
    );

    return (
        <div>
            {children({
                isOpened,
                isShowBackButton,
                staticFooter: renderStaticFooter,
                stickyFooter: renderStickyFooter,
                activeButtonFooter: renderActiveButtonFooter,
                onClose: handleCLose,
                onOpen: handleOpen,
                onChangeShowBackButton: handleChangeShowBackButton,
            })}
        </div>
    );
};

Базовое использование

Без заголовка

<DemoModalWrapper>
  {({ isOpened, onClose, onOpen }) =>
      <>
          <span>
              <Button onClick={onOpen}>Open</Button>
          </span>
          <Modal isOpened={isOpened} onClose={onClose}>
              <DemoModalContentMedium />
          </Modal>
      </>
  }
</DemoModalWrapper>

С заголовком

<DemoModalWrapper>
  {({ isOpened, onClose, onOpen }) =>
      <>
          <span>
              <Button onClick={onOpen}>Open</Button>
          </span>
          <Modal headerProps={{ headerTitle: 'Услуги связи' }} isOpened={isOpened} onClose={onClose}>
              <DemoModalContentMedium />
          </Modal>
      </>
  }
</DemoModalWrapper>

С длинным контентом

<DemoModalWrapper>
  {({ isOpened, onClose, onOpen }) =>
      <>
          <span>
              <Button onClick={onOpen}>Open</Button>
          </span>
          <Modal headerProps={{ headerTitle: 'Услуги связи' }} isOpened={isOpened} onClose={onClose}>
              <DemoModalContentLong />
          </Modal>
      </>
  }
</DemoModalWrapper>

Настройки шапки

С кнопкой назад и дополнительным контентом

<DemoModalWrapper>
  {({ isOpened, onClose, onOpen }) =>
      <>
          <span>
              <Button onClick={onOpen}>Open</Button>
          </span>
          <Modal
              headerProps={{
                  headerTitle: 'Услуги связи',
                  showBackButton: true,
                  headerAdditionalContent: 'Дополнительный контент в шапке попапа',
              }}
              isOpened={isOpened}
              onClose={onClose}
          >
              <DemoModalContentMedium />
          </Modal>
      </>
  }
</DemoModalWrapper>

С незафиксированной шапкой

<DemoModalWrapper>
  {({ isOpened, onClose, onOpen }) =>
      <>
          <span>
              <Button onClick={onOpen}>Open</Button>
          </span>
          <Modal
              headerProps={{ headerTitle: 'Услуги связи', isStickyHeader: false }}
              isOpened={isOpened}
              onClose={onClose}
          >
              <DemoModalContentLong />
          </Modal>
      </>
  }
</DemoModalWrapper>

Настройки футера

Отображение футера

<DemoModalWrapper>
  {({ isOpened, staticFooter, onClose, onOpen }) =>
      <>
          <span>
              <Button onClick={onOpen}>Open</Button>
          </span>
          <Modal
              headerProps={{ headerTitle: 'Услуги связи' }}
              footerProps={{ footer: staticFooter }}
              isOpened={isOpened}
              onClose={onClose}
          >
              <DemoModalContentMedium />
          </Modal>
      </>
  }
</DemoModalWrapper>

Зафиксированный футер с тенью

<DemoModalWrapper>
  {({ isOpened, stickyFooter, onClose, onOpen }) =>
      <>
          <span>
              <Button onClick={onOpen}>Open</Button>
          </span>
          <Modal
              headerProps={{ headerTitle: 'Услуги связи' }}
              footerProps={{
                  footer: stickyFooter,
                  isStickyFooter: true,
                  hasFooterShadow: true,
              }}
              isOpened={isOpened}
              onClose={onClose}
          >
              <DemoModalContentLong />
          </Modal>
      </>
  }
</DemoModalWrapper>

Другие настройки

Динамическое изменение высоты попапа при изменении контента внутри

<DemoModalWrapper>
  {({ isOpened, isShowBackButton, activeButtonFooter, onClose, onOpen, onChangeShowBackButton }) =>
      <>
          <span>
              <Button onClick={onOpen}>Open</Button>
          </span>
          <Modal
              headerProps={{
                  headerTitle: 'Услуги связи',
                  showBackButton: isShowBackButton,
                  onBackButtonClick: onChangeShowBackButton(false),
              }}
              footerProps={{
                  footer: activeButtonFooter,
                  isStickyFooter: true,
              }}
              isOpened={isOpened}
              onClose={onClose}
          >
              {isShowBackButton ? <DemoModalContentLong /> : <DemoModalContentMedium />}
          </Modal>
      </>
  }
</DemoModalWrapper>

Вид шторки на мобилках

<DemoModalWrapper>
  {({ isOpened, staticFooter, onClose, onOpen }) =>
      <>
          <span>
              <Button onClick={onOpen}>Open</Button>
          </span>
          <Modal
              headerProps={{ headerTitle: 'Услуги связи' }}
              footerProps={{ footer: staticFooter }}
              mobileView={MODAL_MOBILE_VIEWS_ENUM.BOTTOM}
              isOpened={isOpened}
              onClose={onClose}
          >
              <DemoModalContentShort />
          </Modal>
      </>
  }
</DemoModalWrapper>

Без кастомного скролла с кнопками вне основной шапки и подложкой

<DemoModalWrapper>
  {({ isOpened, onClose, onOpen }) =>
      <>
          <span>
              <Button onClick={onOpen}>Open</Button>
          </span>
          <Modal
              headerProps={{ isOutSideHeaderButtons: true, hasHeaderButtonsShadow: true }}
              isEnabledNativeScroll
              isOpened={isOpened}
              onClose={onClose}
          >
              <p style={{ padding: '60px 40px 40px' }}>
                  <DemoModalContentLong />
              </p>
          </Modal>
      </>
  }
</DemoModalWrapper>