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

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["useShortcuts", "usePannels", "formatTextFn", "formatTabTextFn", "style", "defaultValue", "styleType", "value", "disabledDate", "onChange", "rangeMax", "shortcutsOnly", "radioMax"];
import React, { useState, useEffect, useRef } from 'react';
import { DatePicker } from 'antd';
import classnames from 'classnames';
import moment from 'moment';
import { Radio, IconSlim as Icon } from '..';
import constants from './constant';
import { useDropdownClickAway } from 'qt-public-hooks';
import { getRangeByDate, dateType2Date, date2DateType, getValueByStatus, getTempDateType, getValidUsePannels } from './utils';
import './style';
var getRadioOptions = constants.getRadioOptions,
  getTabOptions = constants.getTabOptions;
var RangePicker = 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 = _objectWithoutPropertiesLoose(props, _excluded);
  var isControlled = ('value' in props);
  var _usePannels = getValidUsePannels(usePannels);
  var tabOptions = getTabOptions(_usePannels);
  var _useState = useState(date2DateType(isControlled ? value : defaultValue, useShortcuts, _usePannels)),
    dateType = _useState[0],
    setDateType = _useState[1];
  var _useState2 = useState(dateType2Date(isControlled ? value : defaultValue)),
    dateValue = _useState2[0],
    setDateValue = _useState2[1];
  // 使用场景：点击RangePicker并切换tab后未选择时间
  var _useState3 = useState(null),
    relatedDate = _useState3[0],
    setRelatedDate = _useState3[1]; // 相关时间，用于自定义时间的判断
  var _useState4 = useState(dateType),
    preDateType = _useState4[0],
    setPreDateType = _useState4[1]; // 记录上一次的datetype用重制
  var _useState5 = useState(false),
    resetType = _useState5[0],
    setResetType = _useState5[1]; // 是否重置datetype
  var dropdownCls = useDropdownClickAway(function () {
    setResetType(true);
  });
  var _useState6 = useState(dateType),
    onChangeDateType = _useState6[0],
    setOnChangeDateType = _useState6[1];
  var ref = useRef();
  var _useState7 = useState(0),
    refreshKey = _useState7[0],
    setRefreshKey = _useState7[1]; // 跟新key，用于关闭Calendar

  /* 受控组件 */
  useEffect(function () {
    if (isControlled) {
      var dtValue = date2DateType(value, useShortcuts, _usePannels);
      if (onChangeDateType === 'unit_custom') {
        setDateType(dtValue);
      } else {
        setDateType(onChangeDateType);
      }
      setPreDateType(dtValue);
      setDateValue(dateType2Date(value));
    }
  }, [value]);
  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(getValueByStatus(rValue));
    setOnChangeDateType(rValue);
    onChange && onChange(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 (getTempDateType(dateType, tabOptions) !== 'unit_custom') {
      // 非自定义 只需点一下
      var range = getRangeByDate(_rangeValue[index], dateType, index);
      var dtValue = 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 = 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 = moment(relatedDate).add(rangeMax, 'days');
      var start = moment(relatedDate).subtract(rangeMax, 'days');
      return date.isBefore(start) || date.isAfter(end) || userDisabled;
    }
    return userDisabled;
  };
  return /*#__PURE__*/React.createElement("div", _extends({
    style: {
      display: 'inline-block'
    }
  }, divProps), /*#__PURE__*/React.createElement("div", {
    className: "umui-cyclePicker",
    style: style
  }, /*#__PURE__*/React.createElement(Radio.Group, {
    onChange: onRadioChange,
    max: radioMax,
    value: dateType,
    style: {
      marginRight: 8
    },
    styleType: styleType
  }, getRadioOptions(useShortcuts).map(function (opt) {
    var dateRange = dateType2Date(opt.value);
    var disabled = dateRange[1].isBefore(dateRange[0]); // 若是本周/本月第一天则disable
    return /*#__PURE__*/React.createElement(Radio.Button, {
      disabled: disabled,
      value: opt.value,
      key: opt.value
    }, formatTextFn ? formatTextFn(opt) || opt.name : opt.name);
  })), !shortcutsOnly && /*#__PURE__*/React.createElement(RangePicker, {
    allowClear: false,
    value: dateValue,
    separator: "\u4E00",
    suffixIcon: /*#__PURE__*/React.createElement(Icon, {
      type: "umicon-calendar",
      className: "umui-icon-calendar"
    }),
    key: refreshKey,
    panelRender: function panelRender(panelNode) {
      var _tabOptions$find;
      var tempDateType = 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.createElement("div", {
        style: {
          display: 'flex'
        }
      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("ul", {
        className: "umui-cyclePicker-calendar-tabs",
        onClick: onTabClick
      }, tabOptions.map(function (opt) {
        return /*#__PURE__*/React.createElement("li", {
          key: opt.value,
          className: classnames('umui-cyclePicker-calendar-tab', {
            'tab-active': opt.value === tempDateType
          }),
          "data-value": opt.value
        }, formatTabTextFn ? formatTabTextFn(opt) || opt.name : opt.name);
      }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.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: classnames('umui-cyclePicker-calendar', dropdownCls, {
      'umui-cyclePicker-custom-only': _usePannels && _usePannels.length === 0
    })
  })));
};
export default CyclePicker;