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

react components based on react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _antd = require("antd");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _moment = _interopRequireDefault(require("moment"));
var _excluded = ["value", "onChange", "locale", "disabled", "allowClear", "format"];
/**
 * TimePicker 时间范围选择组件
 */
var TimeRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var TimeRangePickerRef = _react.default.useRef();
  TimeRangePickerRef = ref;
  var value = props.value,
    _onChange = props.onChange,
    locale = props.locale,
    disabled = props.disabled,
    allowClear = props.allowClear,
    format = props.format,
    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  var _value = (0, _slicedToArray2.default)(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.default.createElement(_antd.Row, {
    ref: TimeRangePickerRef,
    gutter: 8
  }, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
    locale: locale
  }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
    span: 12
  }, /*#__PURE__*/_react.default.createElement(_antd.TimePicker, (0, _extends2.default)({
    allowClear: allowClear,
    disabled: disabled,
    disabledHours: genDisabledHours(0),
    disabledMinutes: genDisabledMinutes(0),
    disabledSeconds: genDisabledSeconds(0),
    onChange: function onChange(time, timeString) {
      _onChange([(0, _moment.default)(timeString, format || 'HH:mm:ss'), endTime]);
    },
    placeholder: "\u8BF7\u9009\u62E9\u5F00\u59CB\u65F6\u95F4",
    style: {
      width: '100%'
    },
    value: startTime,
    format: format
  }, restProps))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
    span: 12
  }, /*#__PURE__*/_react.default.createElement(_antd.TimePicker, (0, _extends2.default)({
    allowClear: allowClear,
    disabled: disabled,
    disabledHours: genDisabledHours(1),
    disabledMinutes: genDisabledMinutes(1),
    disabledSeconds: genDisabledSeconds(1),
    onChange: function onChange(time, timeString) {
      _onChange([startTime, (0, _moment.default)(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.default.any,
  onChange: _propTypes.default.func,
  disabled: _propTypes.default.bool,
  allowClear: _propTypes.default.bool,
  locale: _propTypes.default.any,
  format: _propTypes.default.string
};
var _default = exports.default = TimeRangePicker;