@lyra/form-builder/lib/inputs/DateInputs/BaseDateTimeInput.js

Lyra form builder

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _reactDatepicker = require('react-datepicker');

var _reactDatepicker2 = _interopRequireDefault(_reactDatepicker);

require('react-datepicker/dist/react-datepicker-cssmodules.css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _default = require('part:@lyra/components/formfields/default');

var _default2 = _interopRequireDefault(_default);

var _default3 = require('part:@lyra/components/textinputs/default');

var _default4 = _interopRequireDefault(_default3);

var _BaseDateTimeInput = require('./styles/BaseDateTimeInput.css');

var _BaseDateTimeInput2 = _interopRequireDefault(_BaseDateTimeInput);

var _default5 = require('part:@lyra/components/dialogs/default');

var _default6 = _interopRequireDefault(_default5);

var _default7 = require('part:@lyra/components/buttons/default');

var _default8 = _interopRequireDefault(_default7);

var _calendarIcon = require('part:@lyra/base/calendar-icon');

var _calendarIcon2 = _interopRequireDefault(_calendarIcon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/*:: import type Moment from 'moment'*/ // eslint-disable-line import/no-unassigned-import

/*:: import type {Marker} from '../../typedefs'*/
/*:: type Action = {
  name: string
}*/
/*:: type Props = {
  value: ?Moment,
  markers: Array<Marker>,
  dateOnly?: boolean,
  dateFormat: string,
  timeFormat?: string,
  timeStep?: number,
  todayLabel: string,
  title: ?string,
  description: ?string,
  placeholder: ?string,
  readOnly: ?boolean,
  onChange: (?Moment) => void,
  level: number
}*/


const getFormat = (dateFormat, timeFormat) => dateFormat + (timeFormat ? ` ${timeFormat}` : '');

/*:: type State = {
  inputValue: ?string,
  isDialogOpen: boolean
}*/
class BaseDateTimeInput extends _react2.default.Component /*:: <Props, State>*/ {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      inputValue: null,
      isDialogOpen: false
    }, this.handleInputChange = (event /*: SyntheticEvent<HTMLInputElement>*/) => {
      const inputValue = event.currentTarget.value;
      var _props = this.props;
      const onChange = _props.onChange,
            dateFormat = _props.dateFormat,
            timeFormat = _props.timeFormat;

      const parsed = (0, _moment2.default)(inputValue, getFormat(dateFormat, timeFormat), true);
      if (parsed.isValid()) {
        this.setState({ inputValue: null });
        onChange(parsed);
      } else {
        this.setState({ inputValue: inputValue });
      }
    }, this.handleDialogChange = (nextMoment /*: Moment*/) => {
      const onChange = this.props.onChange;

      onChange(nextMoment);
      this.setState({ inputValue: null });
    }, this.handleBlur = () => {
      this.setState({ inputValue: null });
    }, this.setDatePicker = (datePicker /*: ?DatePicker*/) => {
      this._datepicker = datePicker;
    }, this.handleKeyDown = (event /*: SyntheticKeyboardEvent<*>*/) => {
      if (event.key === 'Enter') {
        this.open();
      }
    }, this.open = () => {
      this.setState({
        isDialogOpen: true
      });
    }, this.close = () => {
      this.setState({
        isDialogOpen: false
      });
    }, this.handleDialogOpen = this.open, this.handleDialogClose = this.close, this.handleDialogAction = (action /*: Action*/) => {
      if (action.name === 'close') {
        this.close();
      }

      if (action.name === 'now') {
        this.handleDialogChange((0, _moment2.default)());
      }
    }, _temp;
  }

  focus() {
    if (this._datepicker) {
      this._datepicker.input.focus();
    }
  }

  render() {
    var _props2 = this.props;
    const value = _props2.value,
          markers = _props2.markers,
          dateOnly = _props2.dateOnly,
          dateFormat = _props2.dateFormat,
          timeFormat = _props2.timeFormat,
          title = _props2.title,
          description = _props2.description,
          todayLabel = _props2.todayLabel,
          readOnly = _props2.readOnly,
          timeStep = _props2.timeStep,
          level = _props2.level;
    var _state = this.state;
    const inputValue = _state.inputValue,
          isDialogOpen = _state.isDialogOpen;


    const format = getFormat(dateFormat, timeFormat);
    const placeholder = this.props.placeholder || `e.g. ${(0, _moment2.default)().format(format)}`;

    const validation = markers.filter(marker => marker.type === 'validation');
    const errors = validation.filter(marker => marker.level === 'error');

    return _react2.default.createElement(
      _default2.default,
      {
        markers: markers,
        label: title,
        level: level,
        description: description
      },
      readOnly && _react2.default.createElement(_default4.default, {
        customValidity: errors.length > 0 ? errors[0].item.message : '',
        readOnly: true,
        value: value ? value.format(format) : ''
      }),
      !readOnly && _react2.default.createElement(
        'div',
        {
          className: errors.length > 0 ? _BaseDateTimeInput2.default.inputWrapperWithError : _BaseDateTimeInput2.default.inputWrapper
        },
        _react2.default.createElement(_reactDatepicker2.default, {
          onKeyDown: this.handleKeyDown,
          disabledKeyboardNavigation: true,
          selected: value || undefined,
          placeholderText: placeholder,
          calendarClassName: _BaseDateTimeInput2.default.datePicker,
          popperClassName: _BaseDateTimeInput2.default.hiddenPopper,
          className: _BaseDateTimeInput2.default.input,
          onChange: this.handleDialogChange,
          onChangeRaw: this.handleInputChange,
          value: inputValue ? inputValue : value && value.format(format),
          dateFormat: dateFormat,
          timeFormat: timeFormat,
          timeIntervals: timeStep,
          ref: this.setDatePicker
        }),
        _react2.default.createElement(
          _default8.default,
          {
            color: 'primary',
            className: _BaseDateTimeInput2.default.selectButton,
            onClick: this.handleDialogOpen,
            icon: _calendarIcon2.default,
            kind: 'simple'
          },
          'Select'
        )
      ),
      isDialogOpen && _react2.default.createElement(
        _default6.default,
        {
          isOpen: isDialogOpen,
          onClose: this.handleDialogClose,
          onAction: this.handleDialogAction,
          actions: [{ name: 'close', title: 'Close' }, {
            name: 'now',
            kind: 'simple',
            color: 'primary',
            title: todayLabel,
            secondary: true
          }],
          showCloseButton: false
        },
        _react2.default.createElement(
          'div',
          {
            className: dateOnly ? _BaseDateTimeInput2.default.dialogDatePicker : _BaseDateTimeInput2.default.dialogDatePickerWithTime
          },
          _react2.default.createElement(_reactDatepicker2.default, {
            inline: true,
            showMonthDropdown: true,
            showYearDropdown: true,
            selected: value || undefined,
            calendarClassName: _BaseDateTimeInput2.default.datePicker,
            popperClassName: _BaseDateTimeInput2.default.popper,
            className: _BaseDateTimeInput2.default.input,
            onChange: this.handleDialogChange,
            value: inputValue ? inputValue : value && value.format(format),
            showTimeSelect: !dateOnly,
            dateFormat: dateFormat,
            timeFormat: timeFormat,
            timeIntervals: timeStep,
            dropdownMode: 'select'
          })
        )
      )
    );
  }
}
exports.default = BaseDateTimeInput;