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

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _pikaday = _interopRequireDefault(require("pikaday"));

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

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var InputDate = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(InputDate, _React$Component);

  function InputDate(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.picker = null;
    _this.startPikaday = _this.startPikaday.bind(_assertThisInitialized(_this));
    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
    return _this;
  }

  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() {
    var restrict = this.props.restrict;
    var 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["default"](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() {
    var _this2 = this;

    var classNames = this.props.required ? 'ma__input-date js-input-date js-is-required' : 'ma__input-date js-input-date ';
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("label", {
      htmlFor: this.props.id
    }, this.props.labelText), /*#__PURE__*/_react["default"].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: function ref(input) {
        _this2.dateInput = input;
      },
      required: this.props.required,
      format: this.props.format
    }));
  };

  return InputDate;
}(_react["default"].Component);

InputDate.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The label text above the input field */
  labelText: _propTypes["default"].string.isRequired,

  /** Whether an input date is required or not */
  required: _propTypes["default"].bool,

  /** The id on the input date element */
  id: _propTypes["default"].string.isRequired,

  /** The name of the input date element */
  name: _propTypes["default"].string.isRequired,

  /** The placeholder text in the input box, prompting users for a value */
  placeholder: _propTypes["default"].string,

  /** Controls whether the user can pick any date (''), today and prior ('max') or today and future ('min') */
  restrict: _propTypes["default"].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["default"].oneOf(['M/DD/YYYY', 'MM/DD/YYYY', 'MM-DD-YYYY', 'YYYYMMDD']),

  /** Custom onChange function that receives the selected date input */
  onChangeCallback: _propTypes["default"].func,

  /** The date to set by default */
  defaultDate: _propTypes["default"].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'
};
var _default = InputDate;
exports["default"] = _default;
module.exports = exports.default;