web-modal-system v0.0.3

Modal System with effector

Использование:

1. Добавляем портал с модалками в апп:

import 'web-modal-system/dist/style.css' //стили для задника и контейнера с модалками
import { ModalSystem } from 'web-modal-system';

const App: React.FC = () => {
    ...
    return (
<>
<ModalSystem>
... app content ...
</>
    )
}

2. Верстаем сами модалки

import { ModalTemplate } from 'ui-kit'
import {
  closeAllModals
} from 'web-modal-system';

export const YourModal: React.FC<YourModalProps> = ({prop, anotherProp}) => {
    return (
        <ModalTemplate  title={anotherProp} onClose={closeAllModals}>
        ...
        </ModalTemplate>
    )
}

3. Создаем енам со списком ключей для модалок

export enum ModalKey {
  // Trade
  ClosePosition = 'ClosePosition',
  MarketWarning = 'MarketWarning',
  PositionsMobile = 'PositionsMobile',
  // Support
  SupportMobile = 'SupportMobile',
  YourModal = 'YourModal',
  ...
}

4. В модели прописываем управление открытием/закрытием модалок

import {
  forceCloseAllModals,
  openModal,
  setNoClose,
  closeModal, closeAllModals,
  forceCloseAllModals
} from 'web-modal-system';
import { ModalKey } from 'shared/config/modalsEnums';
import { YourModalComponent } from '../ui/YourModal';

sample({
  clock: someEvent,
  fn: (clk) => {
    return {
      component: () =>
        YourModalComponent({
          prop: clk,
          anotherProp: 'someString',
        }),
      key: ModalKey.YourModal,
    };
  },
  target: openModal,
});


const $isLoading = someFx.pending

sample({
  source: $isLoading,
  target: setNoClose, //запретить закрытие модалки, пока идет лоадинг
});

sample({
  source: someFx.doneData,
  target: closeAllModals, //закрыть все модалки
});

sample({
  source: yourFx.doneData,
  fn: () => ModalKey.YourModal,
  target: closeModal, //закрыть конкретную модалку по ключу
});

sample({
  source: disconnect,
  target: forceCloseAllModals, //закрыть все модалки, вне зависимости от запрета на закрытие
});