@arudovwen/react-form-builder/lib/form-elements/date-picker.js

A complete form builder for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _dateFns = require("date-fns");
var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
var _componentHeader = _interopRequireDefault(require("./component-header"));
var _componentLabel = _interopRequireDefault(require("./component-label"));
class DatePicker extends _react.default.Component {
  constructor(props) {
    super(props);
    // formatMask = '';
    (0, _defineProperty2.default)(this, "handleChange", dt => {
      let placeholder;
      const {
        formatMask
      } = this.state;
      if (dt && dt.target) {
        placeholder = dt && dt.target && dt.target.value === '' ? formatMask.toLowerCase() : '';
        const formattedDate = dt.target.value ? (0, _dateFns.format)((0, _dateFns.parseISO)(dt.target.value), formatMask) : '';
        this.setState({
          value: formattedDate,
          internalValue: formattedDate,
          placeholder
        });
      } else {
        this.setState({
          value: dt ? (0, _dateFns.format)(dt, formatMask) : '',
          internalValue: dt,
          placeholder
        });
      }
    });
    this.inputField = /*#__PURE__*/_react.default.createRef();
    const {
      formatMask: _formatMask
    } = DatePicker.updateFormat(props, null);
    this.state = DatePicker.updateDateTime(props, {
      formatMask: _formatMask
    }, _formatMask);
  }
  static updateFormat(props, oldFormatMask) {
    const {
      showTimeSelect,
      showTimeSelectOnly,
      showTimeInput
    } = props.data;
    const dateFormat = showTimeSelect && showTimeSelectOnly ? '' : props.data.dateFormat;
    const timeFormat = showTimeSelect || showTimeInput ? props.data.timeFormat : '';
    const formatMask = `${dateFormat} ${timeFormat}`?.trim();
    const updated = formatMask !== oldFormatMask;
    return {
      updated,
      formatMask
    };
  }
  static updateDateTime(props, state, formatMask) {
    let value;
    let internalValue;
    const {
      defaultToday
    } = props.data;
    if (defaultToday && (!props.defaultValue || props.defaultValue === '')) {
      value = (0, _dateFns.format)(new Date(), formatMask);
      internalValue = new Date();
    } else {
      value = props.defaultValue;
      if (!value) {
        internalValue = undefined;
      } else {
        // Try ISO parse first
        let parsed = (0, _dateFns.parseISO)(value);
        if (!(0, _dateFns.isValid)(parsed)) {
          // Fallback to format mask parsing
          parsed = (0, _dateFns.parse)(value, formatMask, new Date());
        }
        internalValue = (0, _dateFns.isValid)(parsed) ? parsed : new Date(value);
      }
    }
    return {
      value,
      internalValue,
      placeholder: formatMask.toLowerCase(),
      defaultToday,
      formatMask
    };
  }

  // componentWillReceiveProps(props) {
  //   const formatUpdated = this.updateFormat(props);
  //   if ((props.data.defaultToday !== !this.state.defaultToday) || formatUpdated) {
  //     const state = this.updateDateTime(props, this.formatMask);
  //     this.setState(state);
  //   }
  // }

  static getDerivedStateFromProps(props, state) {
    const {
      updated,
      formatMask
    } = DatePicker.updateFormat(props, state.formatMask);
    if (props.data.defaultToday !== state.defaultToday || updated) {
      const newState = DatePicker.updateDateTime(props, state, formatMask);
      return newState;
    }
    return null;
  }
  render() {
    const {
      showTimeSelect,
      showTimeSelectOnly,
      showTimeInput,
      minDate,
      maxDate,
      hidePastDate,
      hideFutureDate
    } = this.props.data;
    const currentDate = new Date();
    const props = {};
    props.type = 'date';
    props.className = 'form-control';
    props.name = this.props.data?.field_name;
    const readOnly = this.props.data?.readOnly || this.props?.read_only || this.props?.data?.isReadOnly;
    // const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    const placeholderText = this.state.formatMask.toLowerCase();
    if (this.props.mutable) {
      props.defaultValue = this.props.defaultValue;
      props.ref = this.inputField;
    }
    let baseClasses = 'SortableItem rfb-item';
    if (this.props.data.pageBreakBefore) {
      baseClasses += ' alwaysbreak';
    }
    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      style: {
        ...this.props.style
      }
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, {
      name: props.name,
      ref: props.ref,
      onChange: this.handleChange,
      selected: this.state.internalValue,
      todayButton: 'Today',
      className: "form-control",
      isClearable: !readOnly,
      showTimeSelect: showTimeSelect,
      showTimeSelectOnly: showTimeSelectOnly,
      showTimeInput: showTimeInput,
      dateFormat: this.state.formatMask,
      portalId: "root-portal",
      autoComplete: "off",
      minDate: hidePastDate ? currentDate : minDate,
      maxDate: hideFutureDate ? currentDate : maxDate,
      placeholderText: placeholderText,
      readOnly: readOnly
    }))));
  }
}
var _default = exports.default = DatePicker;