qt-public-ui/lib/CyclePicker/cyclepicker.js

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _classnames = _interopRequireDefault(require("classnames"));
var _moment = _interopRequireDefault(require("moment"));
var _ = require("..");
var _constant = _interopRequireDefault(require("./constant"));
var _qtPublicHooks = require("qt-public-hooks");
var _utils = require("./utils");
require("./style");
var _excluded = ["useShortcuts", "usePannels", "formatTextFn", "formatTabTextFn", "style", "defaultValue", "styleType", "value", "disabledDate", "onChange", "rangeMax", "shortcutsOnly", "radioMax"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var getRadioOptions = _constant["default"].getRadioOptions,
  getTabOptions = _constant["default"].getTabOptions;
var RangePicker = _antd.DatePicker.RangePicker;
var CyclePicker = function CyclePicker(props) {
  var useShortcuts = props.useShortcuts,
    usePannels = props.usePannels,
    formatTextFn = props.formatTextFn,
    formatTabTextFn = props.formatTabTextFn,
    style = props.style,
    defaultValue = props.defaultValue,
    _props$styleType = props.styleType,
    styleType = _props$styleType === void 0 ? 'default' : _props$styleType,
    value = props.value,
    disabledDate = props.disabledDate,
    onChange = props.onChange,
    _props$rangeMax = props.rangeMax,
    rangeMax = _props$rangeMax === void 0 ? 0 : _props$rangeMax,
    shortcutsOnly = props.shortcutsOnly,
    radioMax = props.radioMax,
    divProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var isControlled = ('value' in props);
  var _usePannels = (0, _utils.getValidUsePannels)(usePannels);
  var tabOptions = getTabOptions(_usePannels);
  var _useState = (0, _react.useState)((0, _utils.date2DateType)(isControlled ? value : defaultValue, useShortcuts, _usePannels)),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    dateType = _useState2[0],
    setDateType = _useState2[1];
  var _useState3 = (0, _react.useState)((0, _utils.dateType2Date)(isControlled ? value : defaultValue)),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    dateValue = _useState4[0],
    setDateValue = _useState4[1];
  // 使用场景：点击RangePicker并切换tab后未选择时间
  var _useState5 = (0, _react.useState)(null),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    relatedDate = _useState6[0],
    setRelatedDate = _useState6[1]; // 相关时间，用于自定义时间的判断
  var _useState7 = (0, _react.useState)(dateType),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    preDateType = _useState8[0],
    setPreDateType = _useState8[1]; // 记录上一次的datetype用重制
  var _useState9 = (0, _react.useState)(false),
    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
    resetType = _useState10[0],
    setResetType = _useState10[1]; // 是否重置datetype
  var dropdownCls = (0, _qtPublicHooks.useDropdownClickAway)(function () {
    setResetType(true);
  });
  var _useState11 = (0, _react.useState)(dateType),
    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
    onChangeDateType = _useState12[0],
    setOnChangeDateType = _useState12[1];
  var ref = (0, _react.useRef)();
  var _useState13 = (0, _react.useState)(0),
    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
    refreshKey = _useState14[0],
    setRefreshKey = _useState14[1]; // 跟新key，用于关闭Calendar

  /* 受控组件 */
  (0, _react.useEffect)(function () {
    if (isControlled) {
      var dtValue = (0, _utils.date2DateType)(value, useShortcuts, _usePannels);
      if (onChangeDateType === 'unit_custom') {
        setDateType(dtValue);
      } else {
        setDateType(onChangeDateType);
      }
      setPreDateType(dtValue);
      setDateValue((0, _utils.dateType2Date)(value));
    }
  }, [value]);
  (0, _react.useEffect)(function () {
    setRelatedDate(null);
    setResetType(false);
    if (ref.current && typeof ref.current.blur === 'function') {
      ref.current.blur(); // 让自定义选完时blur
    }
  }, [dateValue]);
  var onRadioChange = function onRadioChange(e) {
    var rValue = e.target.value;
    !isControlled && setDateType(rValue);
    !isControlled && setDateValue((0, _utils.getValueByStatus)(rValue));
    setOnChangeDateType(rValue);
    onChange && onChange((0, _utils.dateType2Date)(rValue), rValue);
  };
  var onTabClick = function onTabClick(e) {
    var tValue = e.target && e.target.getAttribute('data-value');
    tValue && tValue !== dateType && setDateType(tValue);
  };
  var onCalendarChange = function onCalendarChange(rangeValue, b, info) {
    var _rangeValue = rangeValue;
    setOnChangeDateType('unit_custom');
    var index = info.range === 'start' ? 0 : 1;
    if ((0, _utils.getTempDateType)(dateType, tabOptions) !== 'unit_custom') {
      // 非自定义 只需点一下
      var range = (0, _utils.getRangeByDate)(_rangeValue[index], dateType, index);
      var dtValue = (0, _utils.date2DateType)(range, useShortcuts, _usePannels);
      setRelatedDate(null);
      setRefreshKey(function (pre) {
        return pre + 1;
      });
      !isControlled && setResetType(false);
      !isControlled && setDateValue(range);
      !isControlled && setDateType(dtValue);
      onChange && onChange(range, dtValue);
    } else if (relatedDate === null) {
      // 自定义选中范围的其中一个值，但此时先不改变datevalue
      setRelatedDate(_rangeValue[index]);
    } else {
      // 自定义的第二次点击，此时改变datevalue
      var _dtValue = (0, _utils.date2DateType)(_rangeValue, useShortcuts, _usePannels);
      !isControlled && setResetType(false);
      !isControlled && setDateValue(_rangeValue);
      !isControlled && setDateType(_dtValue);
      onChange && onChange(_rangeValue, _dtValue);
      setResetType(false);
    }
  };
  var mixedDisabledDate = function mixedDisabledDate(date) {
    if (!date) return false;
    var userDisabled = !!disabledDate && disabledDate(date);
    if (rangeMax > 1 && relatedDate) {
      var end = (0, _moment["default"])(relatedDate).add(rangeMax, 'days');
      var start = (0, _moment["default"])(relatedDate).subtract(rangeMax, 'days');
      return date.isBefore(start) || date.isAfter(end) || userDisabled;
    }
    return userDisabled;
  };
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    style: {
      display: 'inline-block'
    }
  }, divProps), /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-cyclePicker",
    style: style
  }, /*#__PURE__*/_react["default"].createElement(_.Radio.Group, {
    onChange: onRadioChange,
    max: radioMax,
    value: dateType,
    style: {
      marginRight: 8
    },
    styleType: styleType
  }, getRadioOptions(useShortcuts).map(function (opt) {
    var dateRange = (0, _utils.dateType2Date)(opt.value);
    var disabled = dateRange[1].isBefore(dateRange[0]); // 若是本周/本月第一天则disable
    return /*#__PURE__*/_react["default"].createElement(_.Radio.Button, {
      disabled: disabled,
      value: opt.value,
      key: opt.value
    }, formatTextFn ? formatTextFn(opt) || opt.name : opt.name);
  })), !shortcutsOnly && /*#__PURE__*/_react["default"].createElement(RangePicker, {
    allowClear: false,
    value: dateValue,
    separator: "\u4E00",
    suffixIcon: /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
      type: "umicon-calendar",
      className: "umui-icon-calendar"
    }),
    key: refreshKey,
    panelRender: function panelRender(panelNode) {
      var _tabOptions$find;
      var tempDateType = (0, _utils.getTempDateType)(dateType, tabOptions);
      var currTips = ((_tabOptions$find = tabOptions.find(function (tab) {
        return tab.value === tempDateType;
      })) === null || _tabOptions$find === void 0 ? void 0 : _tabOptions$find.tips) || '请选择日期';
      return /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          display: 'flex'
        }
      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("ul", {
        className: "umui-cyclePicker-calendar-tabs",
        onClick: onTabClick
      }, tabOptions.map(function (opt) {
        return /*#__PURE__*/_react["default"].createElement("li", {
          key: opt.value,
          className: (0, _classnames["default"])('umui-cyclePicker-calendar-tab', {
            'tab-active': opt.value === tempDateType
          }),
          "data-value": opt.value
        }, formatTabTextFn ? formatTabTextFn(opt) || opt.name : opt.name);
      }))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
        className: "umui-cyclePicker-calendar-tips"
      }, currTips), panelNode));
    },
    ref: ref,
    onCalendarChange: onCalendarChange,
    disabledDate: mixedDisabledDate,
    onOpenChange: function onOpenChange(state) {
      if (!state) {
        // 关闭时
        setRelatedDate(null);
        if (resetType) {
          setDateType(preDateType);
        }
      } else {
        setPreDateType(dateType);
      }
      setResetType(false);
    },
    dropdownClassName: (0, _classnames["default"])('umui-cyclePicker-calendar', dropdownCls, {
      'umui-cyclePicker-custom-only': _usePannels && _usePannels.length === 0
    })
  })));
};
var _default = exports["default"] = CyclePicker;