dlt-for-react 2.1.10 → 2.1.11

package/README.md

@@ -14,6 +14,10 @@ npm publish
 
 ##### 版本修改记录
 
+#### V2.1.11—2024 年 6 月 27 日
+
+1. 新增HqTimeRange时间区间选择器组件
+
 #### V2.1.9—2024 年 6 月 26 日
 
 1. KyTable组件高级搜索新增单个日期的开始|结束搜索条件

package/lib/components/HqTimeRange/index.js

@@ -0,0 +1,193 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _timePicker = require('antd/lib/time-picker');
+
+var _timePicker2 = _interopRequireDefault(_timePicker);
+
+var _from = require('babel-runtime/core-js/array/from');
+
+var _from2 = _interopRequireDefault(_from);
+
+var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
+
+var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
+
+require('antd/lib/time-picker/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _index = require('./index.less');
+
+var _index2 = _interopRequireDefault(_index);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var HqTimeRange = function HqTimeRange(props) {
+  var onChange = props.onChange,
+      startTime = props.startTime,
+      endTime = props.endTime;
+
+  var endTimePickerRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(startTime || null),
+      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
+      startValue = _useState2[0],
+      setStartTime = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(endTime || null),
+      _useState4 = (0, _slicedToArray3.default)(_useState3, 2),
+      endValue = _useState4[0],
+      setEndTime = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray3.default)(_useState5, 2),
+      endOpen = _useState6[0],
+      setEndOpen = _useState6[1];
+
+  var handleStartChange = function handleStartChange(time) {
+    if (endValue && time && endValue.isBefore(time)) {
+      // 结束时间小于开始时间
+      onChange(endValue, endValue);
+      setStartTime(endValue);
+      return;
+    }
+    onChange(time, endValue);
+    setStartTime(time);
+  };
+
+  var handleEndChange = function handleEndChange(time) {
+    if (startValue && time && !startValue.isBefore(time)) {
+      // 结束时间小于开始时间
+      onChange(startValue, startValue);
+      setEndTime(startValue);
+      return;
+    }
+    onChange(startValue, time);
+    setEndTime(time);
+  };
+
+  var handleStartOpenChange = function handleStartOpenChange(open) {
+    if (!open && props.relevancy) {
+      setEndOpen(true);
+    }
+  };
+
+  var handleEndOpenChange = function handleEndOpenChange(open) {
+    setEndOpen(open);
+  };
+
+  var disStartHour = function disStartHour() {
+    var hours = [];
+    if (endValue) {
+      var hour = endValue.hours();
+      hours = (0, _from2.default)({ length: 24 }, function (_, index) {
+        return index;
+      });
+      hours = hours.filter(function (item) {
+        return item > hour;
+      }); // 禁用大于结束时间的时
+    }
+    return hours;
+  };
+  var disStartMinute = function disStartMinute(hour) {
+    var minutes = [];
+    if (hour && endValue) {
+      var endHour = endValue.hours();
+      var endMinute = endValue.minutes();
+      if (hour === endHour) {
+        minutes = (0, _from2.default)({ length: 60 }, function (_, index) {
+          return index;
+        });
+        minutes = minutes.filter(function (item) {
+          return item > endMinute;
+        }); // 禁用大于结束时间的分
+      }
+    }
+    return minutes;
+  };
+
+  var disEndHour = function disEndHour() {
+    var hours = [];
+    if (startValue) {
+      var hour = startValue.hours();
+      hours = (0, _from2.default)({ length: 24 }, function (_, index) {
+        return index;
+      });
+      hours = hours.filter(function (item) {
+        return item < hour;
+      }); // 禁用小于开始时间的时
+    }
+    return hours;
+  };
+  var disEndMinute = function disEndMinute(hour) {
+    var minutes = [];
+    if (hour && startValue) {
+      var endHour = startValue.hours();
+      var endMinute = startValue.minutes();
+      if (hour === endHour) {
+        minutes = (0, _from2.default)({ length: 60 }, function (_, index) {
+          return index;
+        });
+        minutes = minutes.filter(function (item) {
+          return item < endMinute;
+        }); // 禁用大于结束时间的分
+      }
+    }
+    return minutes;
+  };
+
+  return _react2.default.createElement(
+    'div',
+    { className: (0, _classnames2.default)(_index2.default.HqTimeRange, [props.className]) },
+    _react2.default.createElement(_timePicker2.default, {
+      showTime: true,
+      format: 'HH:mm',
+      value: startValue,
+      minuteStep: props.minuteStep,
+      placeholder: props.startPlaceholder,
+      disabledHours: disStartHour,
+      disabledMinutes: disStartMinute,
+      onChange: handleStartChange,
+      onOpenChange: handleStartOpenChange
+    }),
+    _react2.default.createElement(
+      'span',
+      { className: 'between' },
+      props.between
+    ),
+    _react2.default.createElement(_timePicker2.default, {
+      ref: endTimePickerRef,
+      showTime: true,
+      format: 'HH:mm',
+      value: endValue,
+      open: endOpen,
+      minuteStep: props.minuteStep,
+      placeholder: props.endPlaceholder,
+      disabledHours: disEndHour,
+      disabledMinutes: disEndMinute,
+      onChange: handleEndChange,
+      onOpenChange: handleEndOpenChange
+    })
+  );
+};
+
+HqTimeRange.defaultProps = {
+  onChange: function onChange() {},
+  startPlaceholder: '选择开始时间',
+  endPlaceholder: '选择结束时间',
+  between: '至',
+  minuteStep: 15,
+  relevancy: false
+};
+
+exports.default = HqTimeRange;

package/lib/index.js

@@ -400,6 +400,15 @@ Object.defineProperty(exports, 'HqSelector', {
   }
 });
 
+var _HqTimeRange = require('./components/HqTimeRange');
+
+Object.defineProperty(exports, 'HqTimeRange', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HqTimeRange).default;
+  }
+});
+
 var _equalsObj = require('./utils/equalsObj.js');
 
 Object.defineProperty(exports, 'equalsObj', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dlt-for-react",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "description": "dlt for react",
   "main": "lib/index.js",
   "scripts": {