knk/es/components/basic/form_item/time_range_picker.js

react components based on react

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["value", "onChange", "locale", "disabled", "allowClear", "format"];
/**
 * TimePicker 时间范围选择组件
 */
import React from 'react';
import { TimePicker, Row, Col } from 'antd';
import { ConfigProvider } from 'antd';
import PropTypes from 'prop-types';
import moment from 'moment';
var TimeRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var TimeRangePickerRef = React.useRef();
  TimeRangePickerRef = ref;
  var value = props.value,
    _onChange = props.onChange,
    locale = props.locale,
    disabled = props.disabled,
    allowClear = props.allowClear,
    format = props.format,
    restProps = _objectWithoutProperties(props, _excluded);
  var _value = _slicedToArray(value, 2),
    startTime = _value[0],
    endTime = _value[1];

  /**
  * 生成 disabledHours 函数的函数
  * @param {Number} isEnd 0,生成 disabledStartHours; 1，生成 disabledEndHours
  */
  var genDisabledHours = function genDisabledHours(isEnd) {
    return function () {
      var result = [];
      if (isEnd) {
        // 结束时间必须大于开始时间
        for (var i = 0; i <= 24; i++) {
          if (startTime && i < startTime.hours()) {
            result.push(i);
          }
        }
        return result;
      }
      // 结束时间必须大于开始时间
      for (var _i = 0; _i <= 24; _i++) {
        if (endTime && _i > endTime.hours()) {
          result.push(_i);
        }
      }
      return result;
    };
  };

  /**
  * 生成 disabledMinutes 函数的函数
  * @param {Number} isEnd 0,生成 disabledStartMinutes; 1，生成 disabledEndMinutes
  */
  var genDisabledMinutes = function genDisabledMinutes(isEnd) {
    return function (selectedHour) {
      var result = [];
      if (isEnd) {
        // 结束时间必须大于开始时间
        for (var i = 0; i < 59; i++) {
          if (startTime && selectedHour === startTime.hours()) {
            if (i < startTime.minutes()) {
              result.push(i);
            }
          }
        }
        return result;
      }
      for (var _i2 = 0; _i2 < 59; _i2++) {
        if (endTime && selectedHour === endTime.hours()) {
          if (_i2 > endTime.minutes()) {
            result.push(_i2);
          }
        }
      }
      return result;
    };
  };

  /**
  * 生成 disabledSeconds 函数的函数
  * @param {Number} isEnd 0,生成 disabledStartSeconds; 1，生成 disabledEndSeconds
  */
  var genDisabledSeconds = function genDisabledSeconds(isEnd) {
    return function (selectedHour, selectedMinute) {
      var result = [];
      if (isEnd) {
        // 结束时间必须大于开始时间
        for (var i = 0; i < 59; i++) {
          if (startTime && startTime.minutes() === selectedMinute) {
            if (i <= startTime.seconds()) {
              result.push(i);
            }
          }
        }
        return result;
      }
      for (var _i3 = 0; _i3 < 59; _i3++) {
        if (endTime && endTime.minutes() === selectedMinute) {
          if (_i3 >= endTime.seconds()) {
            result.push(_i3);
          }
        }
      }
      return result;
    };
  };
  return /*#__PURE__*/React.createElement(Row, {
    ref: TimeRangePickerRef,
    gutter: 8
  }, /*#__PURE__*/React.createElement(ConfigProvider, {
    locale: locale
  }, /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, /*#__PURE__*/React.createElement(TimePicker, _extends({
    allowClear: allowClear,
    disabled: disabled,
    disabledHours: genDisabledHours(0),
    disabledMinutes: genDisabledMinutes(0),
    disabledSeconds: genDisabledSeconds(0),
    onChange: function onChange(time, timeString) {
      _onChange([moment(timeString, format || 'HH:mm:ss'), endTime]);
    },
    placeholder: "\u8BF7\u9009\u62E9\u5F00\u59CB\u65F6\u95F4",
    style: {
      width: '100%'
    },
    value: startTime,
    format: format
  }, restProps))), /*#__PURE__*/React.createElement(Col, {
    span: 12
  }, /*#__PURE__*/React.createElement(TimePicker, _extends({
    allowClear: allowClear,
    disabled: disabled,
    disabledHours: genDisabledHours(1),
    disabledMinutes: genDisabledMinutes(1),
    disabledSeconds: genDisabledSeconds(1),
    onChange: function onChange(time, timeString) {
      _onChange([startTime, moment(timeString, format || 'HH:mm:ss')]);
    },
    placeholder: "\u8BF7\u9009\u62E9\u622A\u6B62\u65F6\u95F4",
    style: {
      width: '100%'
    },
    value: endTime,
    format: format
  }, restProps)))));
});
TimeRangePicker.propTypes = {
  value: PropTypes.any,
  onChange: PropTypes.func,
  disabled: PropTypes.bool,
  allowClear: PropTypes.bool,
  locale: PropTypes.any,
  format: PropTypes.string
};
export default TimeRangePicker;