web-toolkit/lib/components/DatePicker.js

A GTK inspired toolkit designed to build awesome web apps

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));

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

var _reactDom = require("react-dom");

var _dateFns = require("date-fns");

var _useControlled3 = _interopRequireDefault(require("../utils/useControlled"));

var _Calendar = _interopRequireDefault(require("./Calendar"));

var _Input = _interopRequireDefault(require("./Input"));

var _Popover = _interopRequireDefault(require("./Popover"));

var defaultProps = {
  format: 'd MMM yyyy'
};

function DatePicker(_ref) {
  var formatString = _ref.format,
      valueProp = _ref.value,
      defaultValue = _ref.defaultValue,
      onChange = _ref.onChange,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["format", "value", "defaultValue", "onChange"]);
  var calendarRef = (0, _react.useRef)();

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      open = _useState2[0],
      setOpen = _useState2[1];

  var _useControlled = (0, _useControlled3.default)(valueProp, defaultValue, onChange),
      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
      value = _useControlled2[0],
      setValue = _useControlled2[1];

  var _useState3 = (0, _react.useState)(value ? (0, _dateFns.format)(value, formatString) : ''),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      inputValue = _useState4[0],
      setInputValue = _useState4[1];

  var onInputChange = function onInputChange(newValue) {
    setInputValue(newValue);
  };

  var onCalendarChange = function onCalendarChange(date) {
    setValue(date);
    setInputValue((0, _dateFns.format)(date, formatString));
    setOpen(false);
  };

  var onBlur = function onBlur(ev) {
    // Skip click inside calendar
    var calendar = (0, _reactDom.findDOMNode)(calendarRef.current);
    if (calendar.contains(ev.relatedTarget)) return;
    var newValue = inputValue === '' ? null : (0, _dateFns.parse)(inputValue, formatString, new Date());
    var isNewValue = (newValue === null || !Number.isNaN(+newValue)) && !(0, _dateFns.isEqual)(value, newValue);

    if (isNewValue) {
      setValue(newValue);
      setInputValue(newValue ? (0, _dateFns.format)(newValue, formatString) : '');
    } else {
      setInputValue((0, _dateFns.format)(value, formatString));
    }

    setOpen(false);
  };

  var popover = /*#__PURE__*/_react.default.createElement(_Calendar.default, {
    onChange: onCalendarChange,
    ref: calendarRef
  });

  return /*#__PURE__*/_react.default.createElement(_Popover.default, {
    open: open,
    content: popover,
    className: "DatePicker__popover"
  }, /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({
    className: "DatePicker__input",
    iconAfter: "x-office-calendar",
    placeholder: "Pick a date",
    value: inputValue,
    onChange: onInputChange,
    onFocus: function onFocus() {
      return setOpen(true);
    },
    onBlur: onBlur
  }, rest)));
}

DatePicker.defaultProps = defaultProps;
var _default = DatePicker;
exports.default = _default;
//# sourceMappingURL=DatePicker.js.map