qt-public-ui/lib/DynamicTimePicker/index.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 _lodash = require("lodash");
var _qtPublicHooks = require("qt-public-hooks");
var _ = require("..");
var _constant = require("./constant");
var _utils = require("./utils");
var _unit = _interopRequireDefault(require("./unit"));
var _globalContext = _interopRequireDefault(require("../UmProvider/globalContext"));
var _utils2 = require("../utils");
require("./style");
var _excluded = ["style", "defaultValue", "styleType", "defaultDateType", "defaultDateConfig", "value", "disabledDate", "onChange", "dateConfig", "disabledShortcuts", "relatedDateMaxConfig", "shortcutsList", "rangeMax", "dateTypeList"];
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 RangePicker = _antd.DatePicker.RangePicker;
var Option = _.Select.Option;
var DynamicTimePicker = function DynamicTimePicker(props) {
  var style = props.style,
    _props$defaultValue = props.defaultValue,
    defaultValue = _props$defaultValue === void 0 ? _constant.DEFAULT_STATIC_DATE : _props$defaultValue,
    _props$styleType = props.styleType,
    styleType = _props$styleType === void 0 ? 'default' : _props$styleType,
    _props$defaultDateTyp = props.defaultDateType,
    defaultDateType = _props$defaultDateTyp === void 0 ? 'dynamic' : _props$defaultDateTyp,
    defaultDateConfig = props.defaultDateConfig,
    value = props.value,
    disabledDate = props.disabledDate,
    onChange = props.onChange,
    dateConfig = props.dateConfig,
    _props$disabledShortc = props.disabledShortcuts,
    disabledShortcuts = _props$disabledShortc === void 0 ? [] : _props$disabledShortc,
    _props$relatedDateMax = props.relatedDateMaxConfig,
    relatedDateMaxConfig = _props$relatedDateMax === void 0 ? {} : _props$relatedDateMax,
    _props$shortcutsList = props.shortcutsList,
    shortcutsList = _props$shortcutsList === void 0 ? _constant.DYNAMIC_SHORTCUTS : _props$shortcutsList,
    rangeMax = props.rangeMax,
    _props$dateTypeList = props.dateTypeList,
    dateTypeList = _props$dateTypeList === void 0 ? ['dynamic', 'static'] : _props$dateTypeList,
    divProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var isControlled = ('dateConfig' in props);
  var gContext = (0, _react.useContext)(_globalContext["default"]);
  var i18n = (gContext === null || gContext === void 0 ? void 0 : gContext.i18n) || _utils2.i18n;
  var finalDateConfig = dateConfig || {};
  var _useState = (0, _react.useState)((0, _utils.getDateFromProps)(finalDateConfig, defaultDateType)),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    dateValue = _useState2[0],
    setDateValue = _useState2[1]; // 最终选择的日期
  var _useState3 = (0, _react.useState)((finalDateConfig === null || finalDateConfig === void 0 ? void 0 : finalDateConfig.dateType) || defaultDateType),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    dateType = _useState4[0],
    setDateType = _useState4[1]; // 时间类型：相对时段/固定时段
  var _useState5 = (0, _react.useState)((finalDateConfig === null || finalDateConfig === void 0 ? void 0 : finalDateConfig.relatedDate) || _constant.DEFAULT_DYNAMIC_DATE),
    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
    relatedDate = _useState6[0],
    setRelatedDate = _useState6[1]; // 最终相对时段
  var _useState7 = (0, _react.useState)((0, _utils.getCutomDay)(finalDateConfig === null || finalDateConfig === void 0 ? void 0 : finalDateConfig.relatedDate) || _constant.DEFAULT_CUSTOM),
    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
    customDay = _useState8[0],
    setCustomDay = _useState8[1]; // 自定义时段
  var _useState9 = (0, _react.useState)((finalDateConfig === null || finalDateConfig === void 0 ? void 0 : finalDateConfig.relatedDate) && (finalDateConfig === null || finalDateConfig === void 0 ? void 0 : finalDateConfig.relatedDate).indexOf('custom_recent_') !== -1),
    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
    customDayShow = _useState10[0],
    setCustomDayShow = _useState10[1]; // 显示自定义输入
  var _useState11 = (0, _react.useState)(''),
    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
    staticFirstDate = _useState12[0],
    setStaticFirstDate = _useState12[1];
  var _useState13 = (0, _react.useState)((0, _utils.getCustomTips)(dateType, relatedDate, i18n) || ''),
    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
    customTips = _useState14[0],
    setCustomTips = _useState14[1]; // 相对时段回选，显示选择项
  var _useState15 = (0, _react.useState)(''),
    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
    hoverDate = _useState16[0],
    setHoverDate = _useState16[1]; // 相对时段hover，显示选择时间段
  var _useState17 = (0, _react.useState)(isControlled && value ? value : defaultValue),
    _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
    tempDateValue = _useState18[0],
    setTempDateValue = _useState18[1];
  var _useState19 = (0, _react.useState)(false),
    _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
    dropdownVisible = _useState20[0],
    setDropdownVisible = _useState20[1];
  var _useState21 = (0, _react.useState)((finalDateConfig === null || finalDateConfig === void 0 ? void 0 : finalDateConfig.relatedDate) || _constant.DEFAULT_DYNAMIC_DATE),
    _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
    tempRelateDate = _useState22[0],
    setTempRelateDate = _useState22[1];
  var inputNumberRef = _react["default"].createRef();
  var dropdownCls = (0, _qtPublicHooks.useDropdownClickAway)(function () {
    setDropdownVisible(false);
  });
  (0, _react.useEffect)(function () {
    if (isControlled) {
      updateDateConfig();
    }
  }, [dateConfig]);
  var updateDateConfig = function updateDateConfig() {
    (0, _utils.getDateFromProps)(dateConfig, defaultDateType);
    if (dateConfig.dateType === 'static') {
      setRelatedDate(_constant.DEFAULT_DYNAMIC_DATE);
      setTempRelateDate(_constant.DEFAULT_DYNAMIC_DATE);
      setDateValue((0, _utils.getStaticDate)(dateConfig));
      setCustomDay(_constant.DEFAULT_CUSTOM);
      setDateType('static');
    } else {
      var _dateConfig$relatedDa = dateConfig.relatedDate,
        newRelatedDate = _dateConfig$relatedDa === void 0 ? _constant.DEFAULT_DYNAMIC_DATE : _dateConfig$relatedDa;
      setDateValue((0, _utils.getRelatedDateValue)(newRelatedDate));
      setCustomDay((0, _utils.getCutomDay)(newRelatedDate) || _constant.DEFAULT_CUSTOM);
      setRelatedDate(newRelatedDate);
      setTempRelateDate(newRelatedDate);
      setCustomDayShow((dateConfig === null || dateConfig === void 0 ? void 0 : dateConfig.relatedDate) && (dateConfig === null || dateConfig === void 0 ? void 0 : dateConfig.relatedDate).indexOf('custom_recent_') !== -1);
      setDateType('dynamic');
    }
  };
  (0, _react.useEffect)(function () {
    setTempDateValue(dateValue);
    setCustomTips((0, _utils.getCustomTips)(dateType, relatedDate, i18n));
  }, [dateValue]);
  (0, _react.useEffect)(function () {
    if (dropdownVisible) {
      setTempDateValue(dateValue);
      setStaticFirstDate('');
      if (isControlled) {
        updateDateConfig();
      } else {
        setTempRelateDate(relatedDate);
        setCustomDayShow(relatedDate.indexOf('custom_recent_') !== -1);
        setCustomDay((0, _utils.getCutomDay)(relatedDate));
      }
    }
  }, [dropdownVisible]);
  var onCalendarChange = function onCalendarChange(dates) {
    setStaticFirstDate(dates);
  };
  var onRangeChange = function onRangeChange(rangeValue) {
    setTempDateValue(rangeValue);
    setTempRelateDate('');
  };

  //
  var onDateInputClick = function onDateInputClick(e) {
    e.stopPropagation();
    if (!dropdownVisible) {
      setDropdownVisible(true);
      setStaticFirstDate('');
    }
  };

  // 确定按钮点击
  var onClickDetermine = function onClickDetermine(e) {
    e.stopPropagation();
    var finalRelatedDate = relatedDate;
    if (dateType === 'static') finalRelatedDate = '';
    if (dateType === 'dynamic' && customDayShow) {
      finalRelatedDate = "custom_recent_".concat(customDay.join('_'));
    }
    setTempRelateDate(finalRelatedDate);
    setRelatedDate(finalRelatedDate);
    setDateValue(tempDateValue);
    onChange && onChange(tempDateValue, {
      dateType: dateType,
      relatedDate: finalRelatedDate
    });
    setDropdownVisible(false);
  };

  // 日期类型切换
  var onDateTypeChange = function onDateTypeChange(newDateType) {
    setDateType(newDateType);
    setTempDateValue(_constant.DEFAULT_STATIC_DATE);
    setHoverDate('');
    setCustomDay(_constant.DEFAULT_CUSTOM);
    if (newDateType === 'static') {
      setTempRelateDate('');
    } else {
      if (staticFirstDate && staticFirstDate.length === 1) {
        var currentSelectDay = document.getElementsByClassName('ant-calendar-selected-day')[0];
        currentSelectDay && currentSelectDay.click();
      }
      setTempRelateDate(_constant.DEFAULT_DYNAMIC_DATE);
      setStaticFirstDate('');
    }
    setCustomDayShow(false);
  };

  // 快捷日期选择
  var onClickShortcut = function onClickShortcut(newRelatedDate) {
    if (newRelatedDate === _constant.CUSTOM_DAY) {
      setCustomDayShow(true);
      setCustomDay(_constant.DEFAULT_CUSTOM);
      setHoverDate([]);
      // setRelatedDate('');
      setTempDateValue('');
      return;
    }
    var _newRelatedDate$split = newRelatedDate.split('recent_')[1].split('_'),
      _newRelatedDate$split2 = (0, _slicedToArray2["default"])(_newRelatedDate$split, 2),
      offset = _newRelatedDate$split2[0],
      unit = _newRelatedDate$split2[1];
    var dateRange = (0, _utils.getNewsDateRange)(Number(offset), unit);
    setDateValue(dateRange);
    setTempDateValue(dateRange);
    setRelatedDate(newRelatedDate);
    setTempRelateDate(newRelatedDate);
    setCustomDay(_constant.DEFAULT_CUSTOM);
    onChange && onChange(dateRange, {
      dateType: dateType,
      relatedDate: newRelatedDate
    });
    setDropdownVisible(false);
  };

  // 用户自定义输入
  var onCustomdayChange = function onCustomdayChange(index, val) {
    var newCustomDay = (0, _lodash.cloneDeep)(customDay);
    newCustomDay[index] = val;
    var _newCustomDay = (0, _slicedToArray2["default"])(newCustomDay, 2),
      day = _newCustomDay[0],
      unit = _newCustomDay[1];
    setCustomDay(newCustomDay);
    // setRelatedDate('');
    if (day && unit && isValidate(day, unit)) {
      var dateRange = (0, _utils.getNewsDateRange)(day, unit);
      setTempDateValue(dateRange);
    } else {
      setTempDateValue('');
      setHoverDate('');
    }
  };

  // 用户自定义输入是否正确
  var isValidate = function isValidate(day, unit) {
    var maxDay = relatedDateMaxConfig[unit] || 1000;
    if (!day || day > maxDay || day < 1 || day % 1 !== 0) {
      return false;
    }
    return true;
  };

  // 确定按钮
  var isDisabledBtn = function isDisabledBtn() {
    var _customDay = (0, _slicedToArray2["default"])(customDay, 2),
      day = _customDay[0],
      unit = _customDay[1];
    var validInput = customDayShow && !isValidate(day, unit);
    if (dateType === 'dynamic' && validInput) {
      return true;
    }
    if (dateType === 'static' && (tempDateValue === null || tempDateValue === void 0 ? void 0 : tempDateValue.length) !== 2) {
      return true;
    }
  };
  var onShortcutMouseMove = function onShortcutMouseMove(item) {
    if (item === _constant.CUSTOM_DAY) {
      setHoverDate([]);
    } else {
      setHoverDate((0, _utils.getRelatedDateValue)(item));
    }
  };
  var onShortcutMouseLeave = function onShortcutMouseLeave() {
    setHoverDate('');
  };
  var getShortcutShowDate = function getShortcutShowDate() {
    var showDate = hoverDate || tempDateValue || [];
    return showDate.map(function (date) {
      return date ? date.format(_constant.DATE_FORMAT) : '';
    }).join(' ~ ');
  };
  var checkIsActive = function checkIsActive(item) {
    if (customDayShow) {
      return item === 'custom_day';
    } else {
      return tempRelateDate === item || !tempRelateDate && item === _constant.DEFAULT_DYNAMIC_DATE;
    }
  };
  var onClockInputNumber = function onClockInputNumber() {
    (inputNumberRef === null || inputNumberRef === void 0 ? void 0 : inputNumberRef.current) && inputNumberRef.current.focus();
  };
  var getTabPannel = function getTabPannel() {
    var maxDay = relatedDateMaxConfig[customDay[1]] || 1000;
    var hasError = isDisabledBtn();
    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-dynamicTimePicker-calendar-tips"
    }, /*#__PURE__*/_react["default"].createElement(_.Tab, {
      tabs: (0, _utils.getDefaultTabs)(i18n, dateTypeList),
      value: dateType,
      onChange: function onChange(key) {
        return setTimeout(function () {
          return onDateTypeChange(key);
        }, 0);
      }
    }), /*#__PURE__*/_react["default"].createElement("div", {
      className: "calendar-checked-text"
    }, getShortcutShowDate()), /*#__PURE__*/_react["default"].createElement("div", {
      className: "calendar-shortcuts"
    }, shortcutsList.concat(_constant.CUSTOM_DAY).map(function (item) {
      var isDisable = disabledShortcuts.indexOf(item) !== -1;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _classnames["default"])('shortcuts-item')
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _classnames["default"])('shortcuts-item-text', {
          active: checkIsActive(item),
          disabled: isDisable
        }),
        onClick: function onClick() {
          return !isDisable && onClickShortcut(item);
        },
        onMouseMove: function onMouseMove() {
          return !isDisable && onShortcutMouseMove(item);
        },
        onMouseLeave: function onMouseLeave() {
          return !isDisable && onShortcutMouseLeave();
        }
      }, (0, _utils.getShortcutText)(item, i18n)));
    }), customDayShow && /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        width: '500px',
        height: '40px'
      }
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: (0, _classnames["default"])('calendar-custom-container', {
        err: hasError && customDayShow && customDay[0]
      })
    }, /*#__PURE__*/_react["default"].createElement("span", null, i18n.get('过去')), /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
      placeholder: "N",
      value: customDay[0],
      onChange: function onChange(num) {
        return onCustomdayChange(0, num);
      },
      style: {
        width: 64,
        marginRight: '4px'
      },
      onClick: onClockInputNumber,
      autoFocus: true,
      ref: inputNumberRef
    }), /*#__PURE__*/_react["default"].createElement(_.Select, {
      style: {
        width: 64
      },
      value: customDay[1] || 'day',
      onChange: function onChange(val) {
        return onCustomdayChange(1, val);
      },
      getPopupContainer: function getPopupContainer() {
        return document.getElementsByClassName('calendar-custom-container')[0];
      }
    }, /*#__PURE__*/_react["default"].createElement(Option, {
      key: "day",
      value: "day"
    }, i18n.get('天')), /*#__PURE__*/_react["default"].createElement(Option, {
      key: "week",
      value: "week"
    }, i18n.get('周')), /*#__PURE__*/_react["default"].createElement(Option, {
      key: "month",
      value: "month"
    }, i18n.get('月'))), /*#__PURE__*/_react["default"].createElement("span", {
      className: "err-tip"
    }, i18n.get('请输入1-{maxDay}的整数', {
      maxDay: maxDay
    })))))), /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-dynamicTimePicker-calendar-footer"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "umui-dynamicTimePicker-calendar-footer-determine",
      onClick: hasError ? function () {} : onClickDetermine,
      style: {
        backgroundColor: hasError ? '#d9d9d9' : '#3B82FE'
      }
    }, i18n.get('确定'))));
  };
  var mixedDisabledDate = function mixedDisabledDate(date) {
    if (!date) return false;
    var userDisabled = !!disabledDate && disabledDate(date);
    var numberRangeMax = Number(rangeMax);
    if (rangeMax && numberRangeMax > 1 && staticFirstDate && staticFirstDate.length) {
      var _staticFirstDate$, _staticFirstDate$2;
      // 有一个会是null
      var _staticFirstDate = staticFirstDate === null || staticFirstDate === void 0 ? void 0 : staticFirstDate.filter(function (item) {
        return !!item;
      });
      var end = (_staticFirstDate$ = _staticFirstDate[0]) === null || _staticFirstDate$ === void 0 ? void 0 : _staticFirstDate$.clone().add(numberRangeMax, 'days');
      var start = (_staticFirstDate$2 = _staticFirstDate[0]) === null || _staticFirstDate$2 === void 0 ? void 0 : _staticFirstDate$2.clone().subtract(numberRangeMax, 'days');
      return date.isAfter(end) || date.isBefore(start) || userDisabled;
    }
    return userDisabled;
  };

  // const getInputWidth = (str = '') => {
  //   const doubleByteStrTotal = (str.match(/[^\x00-\xff]/g) || []).length;
  //   return doubleByteStrTotal * 12 + (str.length - doubleByteStrTotal) * 6 + 60;
  // };

  var inputValue = customTips + dateValue.map(function (date) {
    return date ? date.format(_constant.DATE_FORMAT) : '';
  }).join(' ~ ');
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    style: {
      display: 'inline-block'
    }
  }, divProps), /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-dynamicTimePicker",
    style: style
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-dynamicTimePicker-input-wrap"
  }, /*#__PURE__*/_react["default"].createElement(_.Input, {
    styleType: styleType === 'borderless' ? 'underline' : 'default',
    value: inputValue,
    suffix: /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
      type: "umicon-calendar",
      onClick: onDateInputClick
    }),
    placeholder: "".concat(i18n.get('开始日期'), "~").concat(i18n.get('结束日期')),
    className: (0, _classnames["default"])('umicon-calendar-input-prefix', {
      'dynamic-none-calendar-input-prefix': !customTips
    }),
    onClick: onDateInputClick,
    style: {
      textAlign: styleType === 'borderless' ? 'left' : 'center',
      width: (0, _utils2.getTextWidthAndHeight)(inputValue).width + 78 // getInputWidth(inputValue)
    },
    readOnly: true
  }), /*#__PURE__*/_react["default"].createElement(RangePicker, {
    allowClear: false,
    value: tempDateValue,
    open: dropdownVisible,
    renderExtraFooter: getTabPannel,
    onCalendarChange: onCalendarChange,
    onChange: onRangeChange,
    disabledDate: mixedDisabledDate,
    className: "umui-dynamicTimePicker-hidden",
    getPopupContainer: _utils2.getPopupContainer,
    dropdownClassName: (0, _classnames["default"])('umui-dynamicTimePicker-calendar umui-dynamicTimePicker-calendar-determine', dropdownCls, {
      'umui-dynamicTimePicker-calender-hidden': dateType === 'dynamic'
    })
  }))));
};
DynamicTimePicker.displayName = 'DynamicTimePicker';
DynamicTimePicker.getRelatedDateValue = _utils.getRelatedDateValue;
DynamicTimePicker.timeUnitMapping = _utils.timeUnitMapping;
DynamicTimePicker.CycleUnit = _unit["default"];
var _default = exports["default"] = DynamicTimePicker;