All files / src/components/Dialog Dialog.react.js

61.54% Statements 8/13
25% Branches 1/4
50% Functions 3/6
61.54% Lines 8/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93                                                                                  1x                     2x 2x       2x 2x                           4x   4x                                 1x  
// @flow
 
import React, { Component } from 'react';
 
import MuiDialog from 'material-ui/Dialog';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
 
type Props = {
  /** Dialog ID */
  id: string,
  /** Actions component or list of components for the Dialog */
  actions?: Node | Array<Node>,
  /** Children to render inside of the Dialog */
  children?: Node,
  /** CSS class name of the root element */
  className?: string,
  /** Is the Dialog a modal (must click on an action to close)?
   *
   * NOTE: If the Dialog is created with modal=False, the callback that controls opening and closing
   * the Dialog should include the component's open value as a state, and check whether it is either
   * already open or closed before attempting to open or close it. See comments for the open prop.
   */
  modal?: boolean,
  /** Is the dialog open?
   *
   * IMPORTANT: When using this component in Dash, a listener must be set up (either as state or
   * an input) for this component's props.open value in order to achieve the desired behavior.
   * If such a listener is not in place, the non-modal version of this dialog will contaminate
   * other callbacks in the browser
   */
  open?: boolean,
  /** Dash callback to update props on the server */
  setProps?: (props: { modal?: boolean, open?: boolean }) => void,
};
 
type State = {
  open: boolean,
};
 
const defaultProps = {
  actions: null,
  children: null,
  className: '',
  open: false,
  modal: false,
  setProps: () => {},
};
 
export default class Dialog extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {open: props.open};
  }
 
  componentWillReceiveProps(nextProps: Props): void {
    Eif (nextProps.open !== this.state.open)
      this.setState({open: nextProps.open});
  }
 
  changeDialogOpenStatus = (open: boolean): void => {
    const { setProps } = this.props;
 
    if (typeof setProps === 'function') {
      setProps({open});
    }
 
    this.setState({open});
  };
 
  render() {
    const { id, className, modal, actions } = this.props;
 
    return (
      <div id={id} className="sd-dialog">
        <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
          <MuiDialog
            actions={actions}
            className={className}
            modal={modal}
            open={this.state.open}
            onRequestClose={() => { this.changeDialogOpenStatus(false); }}
          >
            {this.props.children}
          </MuiDialog>
        </MuiThemeProvider>
      </div>);
  }
}
 
Dialog.defaultProps = defaultProps;