LSK ux subrepo: modal

Глобальные модалки

Как выглядит

Посмотрите демо: https://lskjs.github.io/ux/?path=/story/modal-global

Как использовать

Как можно раньше в рендере инициализируем провайдер.

import React from 'react';
import { ModalProvider }  from '@lskjs/modal/Global';

const Example = () => (
  <ModalProvider>
    ...
  </ModalProvider>
);

В нужном вам месте создайте модалку.

В виде хуков:

import React, { useContext, useEffect } from 'react';
import { ModalContext } from '@lskjs/modal/Global';

const Example = () => {
  const modal = useContext(ModalContext);
  
  let modalRef;
  useEffect(() => {
    modalRef = modal.create('id-modal', { size: 'small' }, (
      <div>Контент</div>
    ));
  }, []);
  return (
    <button
      onClick={() => modalRef.current.open()}
    >
      Открыть модалку
    </button>
  );
};

В виде Consumer:

import React from 'react';
import { ModalConsumer } from '@lskjs/modal/Global';

const Example = () => (
  <div>
    <ModalConsumer>
      {(modal) => {
        let modalRef;
        setTimeout(() => {
          modalRef = modal.create('id-modal', { size: 'small' }, (
            <div>Контент</div>
          ));
        }, 0);
        return (
          <button
            onClick={() => modalRef.current.open()}
          >
            Открыть модалку
          </button>
        );
      }}
    </ModalConsumer>
  </div>
);

Также контент можно передавать в виде callback'а:

modal.create('id', props, ({
  id,
  ref,
  Modal,
  methods,
  ...props // Все пропсы переданные при создании модалки 2 аргументом
}) => (
  <>
    <Modal.Title>Заголовок</Modal.Title>
    <Modal.Content>Контент</Modal.Content>
  </>
))

Методы контекста

| Метод | Аргументы | Описание | |--------|---------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------| | create | id: string - ID модалкиprops: Object - Props для модалкиcontent: ReactNode | Function - Тело модалки | Создание модалки.Возвращает ModalRef. | | update | id: string - ID модалкиprops: Object - Props для модалкиcontent: ReactNode | Function - Тело модалки | Обновление модалки.Возвращает ModalRef. | | list | | Список существующих модалок.Возвращает объект с { id: ModalCtx } | | get | id: string - ID модалки | Получение существующей модалки.Возвращает объект ModalCtx | | open | id: string - ID модалки | Открытие существующей модалки.Вовзращает id | | close | id: string - ID модалки | Закрытие существующей модалки.Возвращает id. Не удаляет инстанс модалки. | | remove | id: string - ID модалки | Удаление модалки. Возвращает id.Открыть модалку с этим id больше не выйдет. |