react-styled-date-time-picker/build/index.jsx.flow

```javascript import React, { Component } from 'react'; import DateTimePicker from 'react-styled-date-time-picker'; import { DateTime } from 'luxon';

// @flow
/* eslint-disable import/no-unresolved, import/extensions, import/no-extraneous-dependencies */
import { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import { type DateTime } from 'luxon';
/** eslint-enable */

import Modal from './Modal';
import DateTimePicker from './DateTimePicker';

type Props = {|
  id?: ?string,
  /* Date picker open/close state */
  +open: boolean,
  /* Label at the top of date picker window */
  label?: string,
  +dateFrom: DateTime,
  +dateTo: DateTime,
  /* UI language */
  language?: Language,
  /* Called when user changes on the day of time */
  onChange?: (firstDate: DateTime, secondDate: DateTime) => void,
  /* Called when user click OK */
  +onSelect: (firstDate: DateTime, secondDate: DateTime) => void,
  /* Called when user closes the picker */
  onClose: () => void,
  labelStyle?: $Shape<CSSStyleDeclaration>,
  /* Close if user clicked outside of the date picker window */
  closeOnOutsideClick?: boolean,
|};

type DefaultProps = {|
  +closeOnOutsideClick: boolean,
  +label: string,
  +labelStyle: $Shape<CSSStyleDeclaration>,
  +language: string,
|};

class Picker extends PureComponent<Props> {
  static defaultProps: DefaultProps = {
    language: 'en',
    label: '',
    labelStyle: {},
    closeOnOutsideClick: true,
  }

  root: ?HTMLDivElement;

  componentDidMount() {
    const { id } = this.props;
    const div = document.createElement('div');
    div.id = id || 'react-stiled-date-time-picker';
    if (document.body) {
      document.body.appendChild(div);
    }
    this.root = div;
  }

  render(): null | React$Portal {
    const {
      open, onClose, closeOnOutsideClick, id, ...other
    } = this.props;

    if (!open || !this.root) {
      return null;
    }

    return ReactDOM.createPortal(
      (
        <Modal closeOnOutsideClick={closeOnOutsideClick} onClose={onClose}>
          <DateTimePicker {...other} onClose={onClose} />
        </Modal>
      ),
      this.root,
    );
  }
}

export default Picker;