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

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["onUnitChange", "pickerValue", "use", "onChange"];
import React, { useState, useEffect } from 'react';
import { Radio } from 'antd';
import { useUpdateEffect } from 'qt-public-hooks';
import moment from 'moment';
var radios = [{
  value: 'hour',
  label: '小时'
}, {
  value: 'day',
  label: '天'
}, {
  value: 'week',
  label: '周'
}, {
  value: 'month',
  label: '月'
}];
var CycleUnit = function CycleUnit(props) {
  var onUnitChange = props.onUnitChange,
    pickerValue = props.pickerValue,
    use = props.use,
    onChange = props.onChange,
    radioProps = _objectWithoutPropertiesLoose(props, _excluded);
  var _useState = useState(),
    value = _useState[0],
    setValue = _useState[1];
  var _useState2 = useState([]),
    disabled = _useState2[0],
    setDisabled = _useState2[1];
  useUpdateEffect(function () {
    onUnitChange && value && onUnitChange(value, disabled);
  }, [value]);
  var onRadioChange = function onRadioChange(e) {
    setValue(e.target.value);
  };
  useEffect(function () {
    var start = pickerValue[0],
      end = pickerValue[1];
    var diff = moment.isMoment(end) ? end.diff(start, 'day') : 1;
    var forbids;
    var validValue;
    if (diff === 0) {
      forbids = ['day', 'week', 'month'];
    } else if (diff >= 1 && diff < 7) {
      forbids = ['hour', 'week', 'month'];
    } else if (diff >= 7 && diff < 31) {
      forbids = ['hour', 'month'];
    } else {
      forbids = ['hour'];
    }
    if (diff === 0) {
      validValue = forbids.includes(value) ? 'hour' : value || 'hour';
    } else {
      validValue = forbids.includes(value) ? 'day' : value || 'day';
    }
    setValue(validValue);
    setDisabled(forbids);
  }, [pickerValue]);
  return /*#__PURE__*/React.createElement(Radio.Group, _extends({
    value: value,
    onChange: onRadioChange
  }, radioProps), radios.filter(function (r) {
    return Array.isArray(use) ? use.includes(r.value) : true;
  }).map(function (r) {
    return /*#__PURE__*/React.createElement(Radio.Button, {
      key: r.value,
      value: r.value,
      disabled: disabled.includes(r.value)
    }, r.label);
  }));
};
CycleUnit.displayName = 'CycleUnit';
export default CycleUnit;