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

Lyra form builder

'use strict';

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

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _PatchEvent = require('../../PatchEvent');

var _PatchEvent2 = _interopRequireDefault(_PatchEvent);

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

var _BaseDateTimeInput2 = _interopRequireDefault(_BaseDateTimeInput);

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 ParsedOptions = {
  dateFormat: string,
  timeFormat: string,
  timeStep: number,
  calendarTodayLabel: string
}*/
/*:: type SchemaOptions = {
  dateFormat?: string,
  timeFormat?: string,
  timeStep?: number,
  calendarTodayLabel?: string
}*/


const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
const DEFAULT_TIME_FORMAT = 'HH:mm';

/*:: type Props = {
  value: string,
  markers: Array<Marker>,
  type: {
    name: string,
    title: string,
    description: string,
    options?: SchemaOptions,
    placeholder?: string
  },
  readOnly: ?boolean,
  onChange: PatchEvent => void,
  level: number
}*/


function parseOptions(options /*: SchemaOptions*/ = {}) /*: ParsedOptions*/ {
  return {
    dateFormat: options.dateFormat || DEFAULT_DATE_FORMAT,
    timeFormat: options.timeFormat || DEFAULT_TIME_FORMAT,
    timeStep: 'timeStep' in options && Number(options.timeStep) || 15,
    calendarTodayLabel: options.calendarTodayLabel || 'Now'
  };
}

class DateInput extends _react2.default.Component /*:: <Props>*/ {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.baseDateTimeInputRef = null, this.handleChange = (nextMoment /*: Moment*/) => {
      const patch = nextMoment ? (0, _PatchEvent.set)(nextMoment.toDate().toJSON()) : (0, _PatchEvent.unset)();
      this.props.onChange(_PatchEvent2.default.from([patch]));
    }, this.setBaseInput = (baseInput /*: ?BaseDateTimeInput*/) => {
      this.baseDateTimeInputRef = baseInput;
    }, _temp;
  }

  focus() {
    if (this.baseDateTimeInputRef) {
      this.baseDateTimeInputRef.focus();
    }
  }

  render() {
    var _props = this.props;
    const value = _props.value,
          markers = _props.markers,
          type = _props.type,
          readOnly = _props.readOnly,
          level = _props.level;
    const title = type.title,
          description = type.description;

    const momentValue /*: ?Moment*/ = value ? (0, _moment2.default)(value) : null;

    const options = parseOptions(type.options);

    return _react2.default.createElement(_BaseDateTimeInput2.default, {
      ref: this.setBaseInput,
      value: momentValue,
      readOnly: readOnly,
      level: level,
      title: title,
      description: description,
      placeholder: type.placeholder,
      markers: markers,
      dateFormat: options.dateFormat,
      timeFormat: options.timeFormat,
      timeStep: options.timeStep,
      todayLabel: options.calendarTodayLabel,
      onChange: this.handleChange
    });
  }
}
exports.default = DateInput;