qt-public-ui/es/DynamicTimePicker/index.js

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["style", "defaultValue", "styleType", "defaultDateType", "defaultDateConfig", "value", "disabledDate", "onChange", "dateConfig", "disabledShortcuts", "relatedDateMaxConfig", "shortcutsList", "rangeMax", "dateTypeList"];
import React, { useState, useEffect, useContext } from 'react';
import { DatePicker, InputNumber } from 'antd';
import classnames from 'classnames';
import { cloneDeep } from 'lodash';
import { useDropdownClickAway } from 'qt-public-hooks';
import { IconSlim as Icon, Input, Tab, Select } from '..';
import { DYNAMIC_SHORTCUTS, DATE_FORMAT, DEFAULT_STATIC_DATE, DEFAULT_DYNAMIC_DATE, DEFAULT_CUSTOM, CUSTOM_DAY } from './constant';
import { getShortcutText, getNewsDateRange, timeUnitMapping, getRelatedDateValue, getDateFromProps, getStaticDate, getCutomDay, getCustomTips, getDefaultTabs } from './utils';
import CycleUnit from './unit';
import globalContext from '../UmProvider/globalContext';
import { i18n as defaultI18n, getPopupContainer, getTextWidthAndHeight } from '../utils';
import './style';
var RangePicker = DatePicker.RangePicker;
var Option = Select.Option;
var DynamicTimePicker = function DynamicTimePicker(props) {
  var style = props.style,
    _props$defaultValue = props.defaultValue,
    defaultValue = _props$defaultValue === void 0 ? 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 ? DYNAMIC_SHORTCUTS : _props$shortcutsList,
    rangeMax = props.rangeMax,
    _props$dateTypeList = props.dateTypeList,
    dateTypeList = _props$dateTypeList === void 0 ? ['dynamic', 'static'] : _props$dateTypeList,
    divProps = _objectWithoutPropertiesLoose(props, _excluded);
  var isControlled = ('dateConfig' in props);
  var gContext = useContext(globalContext);
  var i18n = (gContext === null || gContext === void 0 ? void 0 : gContext.i18n) || defaultI18n;
  var finalDateConfig = dateConfig || {};
  var _useState = useState(getDateFromProps(finalDateConfig, defaultDateType)),
    dateValue = _useState[0],
    setDateValue = _useState[1]; // 最终选择的日期
  var _useState2 = useState((finalDateConfig === null || finalDateConfig === void 0 ? void 0 : finalDateConfig.dateType) || defaultDateType),
    dateType = _useState2[0],
    setDateType = _useState2[1]; // 时间类型：相对时段/固定时段
  var _useState3 = useState((finalDateConfig === null || finalDateConfig === void 0 ? void 0 : finalDateConfig.relatedDate) || DEFAULT_DYNAMIC_DATE),
    relatedDate = _useState3[0],
    setRelatedDate = _useState3[1]; // 最终相对时段
  var _useState4 = useState(getCutomDay(finalDateConfig === null || finalDateConfig === void 0 ? void 0 : finalDateConfig.relatedDate) || DEFAULT_CUSTOM),
    customDay = _useState4[0],
    setCustomDay = _useState4[1]; // 自定义时段
  var _useState5 = useState((finalDateConfig === null || finalDateConfig === void 0 ? void 0 : finalDateConfig.relatedDate) && (finalDateConfig === null || finalDateConfig === void 0 ? void 0 : finalDateConfig.relatedDate).indexOf('custom_recent_') !== -1),
    customDayShow = _useState5[0],
    setCustomDayShow = _useState5[1]; // 显示自定义输入
  var _useState6 = useState(''),
    staticFirstDate = _useState6[0],
    setStaticFirstDate = _useState6[1];
  var _useState7 = useState(getCustomTips(dateType, relatedDate, i18n) || ''),
    customTips = _useState7[0],
    setCustomTips = _useState7[1]; // 相对时段回选，显示选择项
  var _useState8 = useState(''),
    hoverDate = _useState8[0],
    setHoverDate = _useState8[1]; // 相对时段hover，显示选择时间段
  var _useState9 = useState(isControlled && value ? value : defaultValue),
    tempDateValue = _useState9[0],
    setTempDateValue = _useState9[1];
  var _useState10 = useState(false),
    dropdownVisible = _useState10[0],
    setDropdownVisible = _useState10[1];
  var _useState11 = useState((finalDateConfig === null || finalDateConfig === void 0 ? void 0 : finalDateConfig.relatedDate) || DEFAULT_DYNAMIC_DATE),
    tempRelateDate = _useState11[0],
    setTempRelateDate = _useState11[1];
  var inputNumberRef = React.createRef();
  var dropdownCls = useDropdownClickAway(function () {
    setDropdownVisible(false);
  });
  useEffect(function () {
    if (isControlled) {
      updateDateConfig();
    }
  }, [dateConfig]);
  var updateDateConfig = function updateDateConfig() {
    getDateFromProps(dateConfig, defaultDateType);
    if (dateConfig.dateType === 'static') {
      setRelatedDate(DEFAULT_DYNAMIC_DATE);
      setTempRelateDate(DEFAULT_DYNAMIC_DATE);
      setDateValue(getStaticDate(dateConfig));
      setCustomDay(DEFAULT_CUSTOM);
      setDateType('static');
    } else {
      var _dateConfig$relatedDa = dateConfig.relatedDate,
        newRelatedDate = _dateConfig$relatedDa === void 0 ? DEFAULT_DYNAMIC_DATE : _dateConfig$relatedDa;
      setDateValue(getRelatedDateValue(newRelatedDate));
      setCustomDay(getCutomDay(newRelatedDate) || 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');
    }
  };
  useEffect(function () {
    setTempDateValue(dateValue);
    setCustomTips(getCustomTips(dateType, relatedDate, i18n));
  }, [dateValue]);
  useEffect(function () {
    if (dropdownVisible) {
      setTempDateValue(dateValue);
      setStaticFirstDate('');
      if (isControlled) {
        updateDateConfig();
      } else {
        setTempRelateDate(relatedDate);
        setCustomDayShow(relatedDate.indexOf('custom_recent_') !== -1);
        setCustomDay(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_" + 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(DEFAULT_STATIC_DATE);
    setHoverDate('');
    setCustomDay(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(DEFAULT_DYNAMIC_DATE);
      setStaticFirstDate('');
    }
    setCustomDayShow(false);
  };

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

  // 用户自定义输入
  var onCustomdayChange = function onCustomdayChange(index, val) {
    var newCustomDay = cloneDeep(customDay);
    newCustomDay[index] = val;
    var day = newCustomDay[0],
      unit = newCustomDay[1];
    setCustomDay(newCustomDay);
    // setRelatedDate('');
    if (day && unit && isValidate(day, unit)) {
      var dateRange = 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 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 === CUSTOM_DAY) {
      setHoverDate([]);
    } else {
      setHoverDate(getRelatedDateValue(item));
    }
  };
  var onShortcutMouseLeave = function onShortcutMouseLeave() {
    setHoverDate('');
  };
  var getShortcutShowDate = function getShortcutShowDate() {
    var showDate = hoverDate || tempDateValue || [];
    return showDate.map(function (date) {
      return date ? date.format(DATE_FORMAT) : '';
    }).join(' ~ ');
  };
  var checkIsActive = function checkIsActive(item) {
    if (customDayShow) {
      return item === 'custom_day';
    } else {
      return tempRelateDate === item || !tempRelateDate && item === 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.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: "umui-dynamicTimePicker-calendar-tips"
    }, /*#__PURE__*/React.createElement(Tab, {
      tabs: getDefaultTabs(i18n, dateTypeList),
      value: dateType,
      onChange: function onChange(key) {
        return setTimeout(function () {
          return onDateTypeChange(key);
        }, 0);
      }
    }), /*#__PURE__*/React.createElement("div", {
      className: "calendar-checked-text"
    }, getShortcutShowDate()), /*#__PURE__*/React.createElement("div", {
      className: "calendar-shortcuts"
    }, shortcutsList.concat(CUSTOM_DAY).map(function (item) {
      var isDisable = disabledShortcuts.indexOf(item) !== -1;
      return /*#__PURE__*/React.createElement("div", {
        className: classnames('shortcuts-item')
      }, /*#__PURE__*/React.createElement("div", {
        className: classnames('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();
        }
      }, getShortcutText(item, i18n)));
    }), customDayShow && /*#__PURE__*/React.createElement("div", {
      style: {
        width: '500px',
        height: '40px'
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: classnames('calendar-custom-container', {
        err: hasError && customDayShow && customDay[0]
      })
    }, /*#__PURE__*/React.createElement("span", null, i18n.get('过去')), /*#__PURE__*/React.createElement(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.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.createElement(Option, {
      key: "day",
      value: "day"
    }, i18n.get('天')), /*#__PURE__*/React.createElement(Option, {
      key: "week",
      value: "week"
    }, i18n.get('周')), /*#__PURE__*/React.createElement(Option, {
      key: "month",
      value: "month"
    }, i18n.get('月'))), /*#__PURE__*/React.createElement("span", {
      className: "err-tip"
    }, i18n.get('请输入1-{maxDay}的整数', {
      maxDay: maxDay
    })))))), /*#__PURE__*/React.createElement("div", {
      className: "umui-dynamicTimePicker-calendar-footer"
    }, /*#__PURE__*/React.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(DATE_FORMAT) : '';
  }).join(' ~ ');
  return /*#__PURE__*/React.createElement("div", _extends({
    style: {
      display: 'inline-block'
    }
  }, divProps), /*#__PURE__*/React.createElement("div", {
    className: "umui-dynamicTimePicker",
    style: style
  }, /*#__PURE__*/React.createElement("div", {
    className: "umui-dynamicTimePicker-input-wrap"
  }, /*#__PURE__*/React.createElement(Input, {
    styleType: styleType === 'borderless' ? 'underline' : 'default',
    value: inputValue,
    suffix: /*#__PURE__*/React.createElement(Icon, {
      type: "umicon-calendar",
      onClick: onDateInputClick
    }),
    placeholder: i18n.get('开始日期') + "~" + i18n.get('结束日期'),
    className: classnames('umicon-calendar-input-prefix', {
      'dynamic-none-calendar-input-prefix': !customTips
    }),
    onClick: onDateInputClick,
    style: {
      textAlign: styleType === 'borderless' ? 'left' : 'center',
      width: getTextWidthAndHeight(inputValue).width + 78 // getInputWidth(inputValue)
    },
    readOnly: true
  }), /*#__PURE__*/React.createElement(RangePicker, {
    allowClear: false,
    value: tempDateValue,
    open: dropdownVisible,
    renderExtraFooter: getTabPannel,
    onCalendarChange: onCalendarChange,
    onChange: onRangeChange,
    disabledDate: mixedDisabledDate,
    className: "umui-dynamicTimePicker-hidden",
    getPopupContainer: getPopupContainer,
    dropdownClassName: classnames('umui-dynamicTimePicker-calendar umui-dynamicTimePicker-calendar-determine', dropdownCls, {
      'umui-dynamicTimePicker-calender-hidden': dateType === 'dynamic'
    })
  }))));
};
DynamicTimePicker.displayName = 'DynamicTimePicker';
DynamicTimePicker.getRelatedDateValue = getRelatedDateValue;
DynamicTimePicker.timeUnitMapping = timeUnitMapping;
DynamicTimePicker.CycleUnit = CycleUnit;
export default DynamicTimePicker;