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

Lyra form builder

'use strict';

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

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

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'*/
/*:: import type {Marker} from '../../typedefs'*/
/*:: type ParsedOptions = {
  dateFormat: string,
  calendarTodayLabel: string
}*/


// This is the format dates are stored on
/*:: type SchemaOptions = {
  dateFormat?: string,
  calendarTodayLabel?: string
}*/
const VALUE_FORMAT = 'YYYY-MM-DD';

// default to how they are stored
const DEFAULT_DATE_FORMAT = VALUE_FORMAT;

/*:: 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,
    calendarTodayLabel: options.calendarTodayLabel || 'Today'
  };
}

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.format(VALUE_FORMAT)) : (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, {
      dateOnly: true,
      ref: this.setBaseInput,
      value: momentValue,
      readOnly: readOnly,
      level: level,
      title: title,
      description: description,
      placeholder: type.placeholder,
      markers: markers,
      dateFormat: options.dateFormat,
      todayLabel: options.calendarTodayLabel,
      onChange: this.handleChange
    });
  }
}
exports.default = DateInput;