Modal

1export enum ModalChangeTypes {
2  idle = 'IDLE',
3  clickOutside = 'CLICK_OUTSIDE',
4  keyDownEsc = 'KEYDOWN_ESC',
5  showModal = 'SHOW_MODAL',
6}
7
8export interface IModalState {
9  type?: ModalChangeTypes;
10  showModal?: boolean;
11}
12
13export interface IModalProps {
14  stateReducer?: (state: IModalState, changes: IModalState) => IModalState;
15  children?: React.ReactNode;
16  isOpen: boolean;
17  placement?: 'top' | 'center' | 'bottom';
18  className?: string;
19  overlayCss?: SerializedStyles; //from Emotion (css-in-js)
20  onClose?: () => void;
21  onOverlayClick?: () => void;
22}

1import React, { useState } from 'react';
2import { css } from '@emotion/react';
3import { Button, Modal } from 'neutrino-ui';
4
5const modalReducer = (state: IModalState, changes: IModalState): IModalState => {
6  switch (changes.type) {
7    case ModalChangeTypes.clickOutside:
8    case ModalChangeTypes.keyDownEsc:
9      return {
10        ...state,
11        showModal: true
12      }
13    default:
14      return changes;
15  }
16}
17
18export function Page() {
19  const [isOpen, setModalState] = useState(false);
20  return (
21    <Button css={{ width: '200px' }} onClick={() => setModalState((s) => !s)}>
22        Open modal
23      </Button>
24      <Modal
25        stateReducer={modalReducer}
26        isOpen={isOpen}
27        placement="bottom"
28        overlayCss={css({ backgroundColor: 'rgba(49,61,79, 0.5)' })}
29        onOverlayClick={() => setModalState(false)}
30        onClose={() => setModalState(false)} //if you need close modal on escape key press
31      >
32        <div css={{ width: '500px', height: '300px', borderRadius: 24, backgroundColor: '#fff', margin: 'auto auto 0' }}>
33          Modal content!
34          <button onClick={() => setModalState(false)}>close</button>
35        </div>
36      </Modal>
37  )
38}