@massds/mayflower-react/dist/InputDate/index.mjs

React versions of Mayflower design system UI components

function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
/**
 * InputDate module.
 * @module @massds/mayflower-react/InputDate
 * @requires module:pikaday/scss/pikaday
 * @requires module:@massds/mayflower-assets/scss/00-base/pikaday
 * @requires module:@massds/mayflower-assets/scss/01-atoms/input-date
 */
import React from "react";
import PropTypes from "prop-types";
import Pikaday from "pikaday";
let InputDate = /*#__PURE__*/function (_React$Component) {
  function InputDate(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _this.picker = null;
    _this.startPikaday = _this.startPikaday.bind(_this);
    _this.handleChange = _this.handleChange.bind(_this);
    return _this;
  }
  _inheritsLoose(InputDate, _React$Component);
  var _proto = InputDate.prototype;
  _proto.componentDidMount = function componentDidMount() {
    this.startPikaday();
    this.picker.setDate(this.props.defaultDate, true);
  }

  // eslint-disable-next-line camelcase
  ;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    this.picker.setDate(nextProps.defaultDate, true);
  };
  _proto.handleChange = function handleChange(date) {
    if (typeof this.props.onChangeCallback === 'function') {
      this.props.onChangeCallback({
        date: date
      });
    }
  };
  _proto.startPikaday = function startPikaday() {
    const restrict = this.props.restrict;
    const pickerOptions = {
      field: this.dateInput,
      format: this.props.format,
      formatStrict: true,
      onSelect: this.handleChange,
      setDefaultDate: false
    };
    if (this.props.defaultDate !== null) {
      pickerOptions.defaultDate = this.props.defaultDate;
      pickerOptions.setDefaultDate = true;
    }
    this.picker = new Pikaday(pickerOptions);
    this.dateInput.setAttribute('type', 'text');
    if (restrict === 'max') {
      this.picker.setMaxDate(new Date());
    } else if (restrict === 'min') {
      this.picker.setMinDate(new Date());
    }
  };
  _proto.render = function render() {
    const classNames = this.props.required ? 'ma__input-date js-input-date js-is-required' : 'ma__input-date js-input-date ';
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
      htmlFor: this.props.id
    }, this.props.labelText), /*#__PURE__*/React.createElement("input", {
      className: classNames,
      name: this.props.name,
      id: this.props.id,
      type: "date",
      placeholder: this.props.placeholder,
      "data-type": "date",
      "data-restrict": this.props.restrict,
      ref: input => {
        this.dateInput = input;
      },
      required: this.props.required,
      format: this.props.format
    }));
  };
  return InputDate;
}(React.Component);
InputDate.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The label text above the input field */
  labelText: PropTypes.string.isRequired,
  /** Whether an input date is required or not */
  required: PropTypes.bool,
  /** The id on the input date element */
  id: PropTypes.string.isRequired,
  /** The name of the input date element */
  name: PropTypes.string.isRequired,
  /** The placeholder text in the input box, prompting users for a value */
  placeholder: PropTypes.string,
  /** Controls whether the user can pick any date (''), today and prior ('max') or today and future ('min') */
  restrict: PropTypes.oneOf(['', 'max', 'min']),
  /** Controls the date format of input date . The current option are: 'M/DD/YYYY’, 'MM/DD/YYYY’', 'MMM D YYYY', or 'dddd, MMMM Do YYYY' */
  format: PropTypes.oneOf(['M/DD/YYYY', 'MM/DD/YYYY', 'MM-DD-YYYY', 'YYYYMMDD']),
  /** Custom onChange function that receives the selected date input */
  onChangeCallback: PropTypes.func,
  /** The date to set by default */
  defaultDate: PropTypes.instanceOf(Date)
} : {};

// Only set defaults for the configuration variables which need to be opted in to activate.
InputDate.defaultProps = {
  required: false,
  restrict: '',
  defaultDate: null,
  format: 'M/DD/YYYY'
};
export default InputDate;