qt-public-ui/es/CyclePicker/cyclepickerv3.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", "isShowDetermine"];
import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import moment from 'moment';
import { isFunction } from 'lodash';
import { Icon, Input, Radio, DatePickerAntd3 as DatePicker } from '..';
import constants from './constant';
import { useDropdownClickAway } from 'qt-public-hooks';
import { getRangeByDate, dateType2Date, date2DateType, getValueByStatus, getTempDateType, getValidUsePannels } from './utils';
import './style.v3.less';
var getRadioOptions = constants.getRadioOptions,
  getTabOptions = constants.getTabOptions;
var RangePicker = DatePicker.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 = _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];
  var _useState3 = useState(null),
    relatedDate = _useState3[0],
    setRelatedDate = _useState3[1];
  var _useState4 = useState(dateType),
    preDateType = _useState4[0],
    setPreDateType = _useState4[1];
  var _useState5 = useState(false),
    resetType = _useState5[0],
    setResetType = _useState5[1];
  var _useState6 = useState(false),
    dropdownVisible = _useState6[0],
    setDropdownVisible = _useState6[1];
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  var _useState7 = useState(dateType2Date(isControlled ? value : defaultValue)),
    showDetermineDateValue = _useState7[0],
    setShowDetermineDateValue = _useState7[1];
  var _useState8 = useState(false),
    isDisabled = _useState8[0],
    setIsDisabled = _useState8[1];
  var dropdownCls = useDropdownClickAway(function () {
    setResetType(true);
    setDropdownVisible(false);
    setIsDisabled(true);
  });
  var _useState9 = useState(dateType),
    onChangeDateType = _useState9[0],
    setOnChangeDateType = _useState9[1];

  /* 受控组件 */
  useEffect(function () {
    if (isControlled && !isShowDetermine) {
      var dtValue = date2DateType(value, useShortcuts, _usePannels);
      if (onChangeDateType === 'unit_custom') {
        setDateType(dtValue);
      } else {
        setDateType(onChangeDateType);
      }
      setPreDateType(dtValue);
      setDateValue(dateType2Date(value));
    }
  }, [value]);
  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(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);
    if (isShowDetermine && tValue !== 'unit_custom') {
      !isControlled && setDateType(tValue);
      setDateValue(dateType2Date(tValue));
      setOnChangeDateType(tValue);
      setDropdownVisible(false);
      onChange && onChange(dateType2Date(tValue), tValue);
    }
  };
  var onCalendarChange = function onCalendarChange(rangeValue) {
    var _rangeValue = rangeValue;
    !isShowDetermine && setOnChangeDateType('unit_custom');
    isFunction(props.onCalendarChange) && props.onCalendarChange(rangeValue, dateType);
    if (dateType !== 'unit_custom') {
      var range = getRangeByDate(_rangeValue[0], dateType);
      var dtValue = 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 = 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(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.createElement(React.Fragment, null, !isShowDetermine && /*#__PURE__*/React.createElement("div", {
      className: "umui-v3-cyclePicker-calendar-tips"
    }, currTips), /*#__PURE__*/React.createElement("ul", {
      className: "umui-v3-cyclePicker-calendar-tabs",
      onClick: onTabClick
    }, tabOptions.map(function (opt) {
      return /*#__PURE__*/React.createElement("li", {
        key: opt.value,
        className: classnames('umui-v3-cyclePicker-calendar-tab', {
          'tab-active': opt.value === dateType
        }),
        "data-value": opt.value
      }, formatTabTextFn ? formatTabTextFn(opt) || opt.name : opt.name);
    })), isShowDetermine && /*#__PURE__*/React.createElement("div", {
      className: "umui-v3-cyclePicker-calendar-footer"
    }, /*#__PURE__*/React.createElement("div", {
      className: "umui-v3-cyclePicker-calendar-footer-determine",
      onClick: onClickDetermine,
      style: {
        backgroundColor: isDisabled ? '#3B82FE' : '#d9d9d9'
      }
    }, "\u786E\u5B9A"), /*#__PURE__*/React.createElement("div", {
      className: "umui-v3-cyclePicker-calendar-footer-tip"
    }, /*#__PURE__*/React.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 = 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-v3-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("div", {
    className: "umui-v3-cyclePicker-input-wrap"
  }, /*#__PURE__*/React.createElement(Input, {
    styleType: styleType === 'borderless' ? 'underline' : 'default',
    value: dateValue.map(function (date) {
      return date ? date.format(DATE_FORMAT) : '';
    }).join(' ~ '),
    suffix: /*#__PURE__*/React.createElement(Icon, {
      type: "umicon-calendar",
      onClick: onDateInputClick
    }),
    prefix: isShowDetermine ? /*#__PURE__*/React.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: classnames({
      'umicon-calendar-input-prefix': isShowDetermine
    }),
    onClick: onDateInputClick,
    style: {
      width: styleType === 'borderless' ? 168 : 194,
      textAlign: styleType === 'borderless' ? 'left' : 'center'
    },
    readOnly: true
  }), /*#__PURE__*/React.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: classnames('umui-v3-cyclePicker-calendar', dropdownCls, {
      'umui-v3-cyclePicker-custom-only': _usePannels && _usePannels.length === 0,
      'umui-v3-cyclePicker-calendar-determine': isShowDetermine
    })
  }))));
};
export default CyclePickerV3;