All files / ts/components/modals modal-renderer.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
20x
20x
20x
 
 
 
 
 
 
 
 
 
 
 
 
 
20x
20x
 
1x
 
 
1x
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
20x
 
20x
 
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
import * as CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
export interface ModalRendererProps extends HTMLProps<HTMLElement> {
  /**
   * Array of modals to be rendered.
   */
  modals: React.ReactNode[];
}
 
/**
 * Required to render modals.
 * Should be rendered in the root of your app.
 * See the [Modal](#modal) section for a full example.
 */
export class ModalRenderer extends PureComponent<ModalRendererProps, {}> {
  public render () {
    const {
      modals,
    } = this.props;
 
    return (
      <CSSTransitionGroup
        transitionName="modal-transition"
        transitionEnterTimeout={300}
        transitionLeaveTimeout={200}
      >
        {
          modals && modals.map((modal, index) => (
            <div key={index} className="modal-container">
              {modal}
            </div>
          ))
        }
      </CSSTransitionGroup>
    );
  }
}
 
export default ModalRenderer;