@prefect9/ui/components/DatePickerRangeModal/index.js

UI React components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/es.string.trim.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _isType = require("@prefect9/is-type");
var _Modal = require("../Modal");
var _Modal2 = _interopRequireDefault(require("./Modal"));
var _datetime = _interopRequireDefault(require("@prefect9/datetime"));
var _styles = _interopRequireDefault(require("../../styles.css"));
var _icons = _interopRequireDefault(require("../../icons"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function DatePickerRangeModal(_ref) {
  let {
    from,
    to,
    onChange,
    label,
    disabled
  } = _ref;
  const modal = (0, _Modal.useModal)();
  const [dateFrom, setDateFrom] = (0, _react.useState)(new _datetime.default());
  const [dateTo, setDateTo] = (0, _react.useState)(new _datetime.default());
  (0, _react.useEffect)(() => {
    if (_datetime.default.isDateStr(from) && _datetime.default.isDateStr(to)) {
      const d1 = new _datetime.default(from);
      const d2 = new _datetime.default(to);
      if (d1.smallThen(d2)) {
        setDateFrom(d1);
        setDateTo(d2);
      } else {
        setDateFrom(d2);
        setDateTo(d1);
      }
    } else {
      setDateTo(new _datetime.default());
      const newDateFrom = new _datetime.default();
      newDateFrom.modify('-6 days');
      setDateFrom(newDateFrom);
    }
  }, [from, to]);
  const clickHandler = (0, _react.useCallback)(e => {
    e.preventDefault();
    if (disabled) return;
    modal.show( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal2.default, {
      from: dateFrom,
      to: dateTo
    })).then(data => {
      if (data === 'close') return;else if ((0, _isType.isObj)(data)) {
        const {
          from,
          to
        } = data;
        if ((0, _isType.isFunc)(onChange)) onChange({
          from: from.toDateStr(),
          to: to.toDateStr()
        });
      }
    });
  }, [disabled, dateFrom, dateTo]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "prefect9-field ".concat(disabled ? 'disabled' : ''),
    children: [(0, _isType.isStr)(label) && label.trim().length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "field-label",
      onClick: clickHandler,
      children: label
    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "prefect9-modal-calendar",
      onClick: clickHandler,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "prefect9-modal-calendar__text",
        children: [dateFrom.toDateInterfaceStr(), " \u2014 ", dateTo.toDateInterfaceStr()]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "prefect9-modal-calendar__ico",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.default.Calendar, {})
      })]
    })]
  });
}
var _default = exports.default = DatePickerRangeModal;