qt-public-ui/lib/CyclePicker/cyclepickerv3.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 _classnames = _interopRequireDefault(require("classnames"));
var _moment = _interopRequireDefault(require("moment"));
var _lodash = require("lodash");
var _ = require("..");
var _constant = _interopRequireDefault(require("./constant"));
var _qtPublicHooks = require("qt-public-hooks");
var _utils = require("./utils");
require("./style.v3.less");
var _excluded = ["useShortcuts", "usePannels", "formatTextFn", "formatTabTextFn", "style", "defaultValue", "styleType", "value", "disabledDate", "onChange", "rangeMax", "shortcutsOnly", "radioMax", "isShowDetermine"];
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 = _.DatePickerAntd3.RangePicker;
var DATE_FORMAT = 'YYYY-MM-DD';
var CyclePickerV3 = function CyclePickerV3(props) {
  var _tabOptions$find2;
  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,
    isShowDetermine = props.isShowDetermine,
    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];
  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];
  var _useState9 = (0, _react.useState)(false),
    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
    resetType = _useState10[0],
    setResetType = _useState10[1];
  var _useState11 = (0, _react.useState)(false),
    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
    dropdownVisible = _useState12[0],
    setDropdownVisible = _useState12[1];
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  var _useState13 = (0, _react.useState)((0, _utils.dateType2Date)(isControlled ? value : defaultValue)),
    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
    showDetermineDateValue = _useState14[0],
    setShowDetermineDateValue = _useState14[1];
  var _useState15 = (0, _react.useState)(false),
    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
    isDisabled = _useState16[0],
    setIsDisabled = _useState16[1];
  var dropdownCls = (0, _qtPublicHooks.useDropdownClickAway)(function () {
    setResetType(true);
    setDropdownVisible(false);
    setIsDisabled(true);
  });
  var _useState17 = (0, _react.useState)(dateType),
    _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
    onChangeDateType = _useState18[0],
    setOnChangeDateType = _useState18[1];

  /* 受控组件 */
  (0, _react.useEffect)(function () {
    if (isControlled && !isShowDetermine) {
      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 () {
    if (!dropdownVisible && resetType) {
      setDateType(preDateType);
      setResetType(false);
      // setDateValue(showDetermineDateValue);  // fix onblur issue
    }
  }, [dropdownVisible]);
  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);
    if (isShowDetermine && tValue !== 'unit_custom') {
      !isControlled && setDateType(tValue);
      setDateValue((0, _utils.dateType2Date)(tValue));
      setOnChangeDateType(tValue);
      setDropdownVisible(false);
      onChange && onChange((0, _utils.dateType2Date)(tValue), tValue);
    }
  };
  var onCalendarChange = function onCalendarChange(rangeValue) {
    var _rangeValue = rangeValue;
    !isShowDetermine && setOnChangeDateType('unit_custom');
    (0, _lodash.isFunction)(props.onCalendarChange) && props.onCalendarChange(rangeValue, dateType);
    if (dateType !== 'unit_custom') {
      var range = (0, _utils.getRangeByDate)(_rangeValue[0], dateType);
      var dtValue = (0, _utils.date2DateType)(range, useShortcuts, _usePannels);
      setRelatedDate(null);
      !isControlled && setResetType(false);
      !isShowDetermine && setDropdownVisible(false);
      (!isControlled || isShowDetermine) && setDateValue(range);
      !isControlled && !isShowDetermine && setDateType(dtValue);
      isShowDetermine && setDateType('unit_custom');
      isShowDetermine && setIsDisabled(false);
      !isShowDetermine && onChange && onChange(range, dtValue);
    } else if (_rangeValue.length === 1) {
      setRelatedDate(_rangeValue[0]);
      isShowDetermine && setDateType('unit_custom');
      isShowDetermine && setIsDisabled(false);
    } else {
      isShowDetermine && setDateType('unit_custom');
      setRelatedDate(null);
      isShowDetermine && setIsDisabled(false);
    }
  };
  var onRangeChange = function onRangeChange(rangeValue) {
    var _rangeValue = rangeValue;
    var dtValue = (0, _utils.date2DateType)(_rangeValue, useShortcuts, _usePannels);
    !isShowDetermine && setDropdownVisible(false);
    (!isControlled || isShowDetermine) && setDateValue(_rangeValue);
    !isControlled && setResetType(false);
    !isControlled && setDateType(dtValue);
    isShowDetermine && setIsDisabled(true);
    !isShowDetermine && onChange && onChange(_rangeValue, dtValue);
  };
  var onDateInputClick = function onDateInputClick(e) {
    e.stopPropagation();
    if (!dropdownVisible) {
      setResetType(false);
      setDropdownVisible(true);
      setPreDateType(dateType);
    }
    setDateType((0, _utils.getTempDateType)(dateType, tabOptions));
  };
  var onClickDetermine = function onClickDetermine() {
    var date = dateValue;
    onChange && onChange(dateValue, dateType);
    setShowDetermineDateValue(date);
    setDropdownVisible(false);
  };
  var getTabPannel = function getTabPannel() {
    var _tabOptions$find;
    var currTips = ((_tabOptions$find = tabOptions.find(function (tab) {
      return tab.value === dateType;
    })) === null || _tabOptions$find === void 0 ? void 0 : _tabOptions$find.tips) || '请选择日期';
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !isShowDetermine && /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-v3-cyclePicker-calendar-tips"
    }, currTips), /*#__PURE__*/_react["default"].createElement("ul", {
      className: "umui-v3-cyclePicker-calendar-tabs",
      onClick: onTabClick
    }, tabOptions.map(function (opt) {
      return /*#__PURE__*/_react["default"].createElement("li", {
        key: opt.value,
        className: (0, _classnames["default"])('umui-v3-cyclePicker-calendar-tab', {
          'tab-active': opt.value === dateType
        }),
        "data-value": opt.value
      }, formatTabTextFn ? formatTabTextFn(opt) || opt.name : opt.name);
    })), isShowDetermine && /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-v3-cyclePicker-calendar-footer"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-v3-cyclePicker-calendar-footer-determine",
      onClick: onClickDetermine,
      style: {
        backgroundColor: isDisabled ? '#3B82FE' : '#d9d9d9'
      }
    }, "\u786E\u5B9A"), /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-v3-cyclePicker-calendar-footer-tip"
    }, /*#__PURE__*/_react["default"].createElement(_.Icon, {
      type: "umicon-hint",
      className: "icon"
    }), "\u9009\u62E9\u4E00\u4E2A\u65F6\u95F4\u5468\u671F")));
  };
  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-v3-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("div", {
    className: "umui-v3-cyclePicker-input-wrap"
  }, /*#__PURE__*/_react["default"].createElement(_.Input, {
    styleType: styleType === 'borderless' ? 'underline' : 'default',
    value: dateValue.map(function (date) {
      return date ? date.format(DATE_FORMAT) : '';
    }).join(' ~ '),
    suffix: /*#__PURE__*/_react["default"].createElement(_.Icon, {
      type: "umicon-calendar",
      onClick: onDateInputClick
    }),
    prefix: isShowDetermine ? /*#__PURE__*/_react["default"].createElement("span", {
      className: "umicon-calendar-prefix",
      onClick: onDateInputClick
    }, (_tabOptions$find2 = tabOptions.find(function (item) {
      return item.value === dateType;
    })) === null || _tabOptions$find2 === void 0 ? void 0 : _tabOptions$find2.name) : null,
    placeholder: "\u5F00\u59CB\u65E5\u671F ~ \u7ED3\u675F\u65E5\u671F",
    className: (0, _classnames["default"])({
      'umicon-calendar-input-prefix': isShowDetermine
    }),
    onClick: onDateInputClick,
    style: {
      width: styleType === 'borderless' ? 168 : 194,
      textAlign: styleType === 'borderless' ? 'left' : 'center'
    },
    readOnly: true
  }), /*#__PURE__*/_react["default"].createElement(RangePicker, {
    allowClear: false,
    value: dateValue,
    open: dropdownVisible,
    renderExtraFooter: getTabPannel,
    onCalendarChange: onCalendarChange,
    onChange: onRangeChange,
    disabledDate: mixedDisabledDate,
    className: "umui-v3-cyclePicker-hidden",
    style: {
      width: styleType === 'borderless' ? 168 : 194
    },
    dropdownClassName: (0, _classnames["default"])('umui-v3-cyclePicker-calendar', dropdownCls, {
      'umui-v3-cyclePicker-custom-only': _usePannels && _usePannels.length === 0,
      'umui-v3-cyclePicker-calendar-determine': isShowDetermine
    })
  }))));
};
var _default = exports["default"] = CyclePickerV3;