dlt-for-react 2.1.10 → 2.2.0

package/README.md

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

package/assets/css/HqTimeRange/index.less

@@ -0,0 +1,7 @@
+.HqTimeRange {
+  :global {
+    .between {
+      margin: 0 8px;
+    }
+  }
+}

package/lib/components/HqCheckButton/index.js

@@ -1,71 +1,71 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = undefined;
 
-var _dropdown = require("antd/lib/dropdown");
+var _dropdown = require('antd/lib/dropdown');
 
 var _dropdown2 = _interopRequireDefault(_dropdown);
 
-var _icon = require("antd/lib/icon");
+var _icon = require('antd/lib/icon');
 
 var _icon2 = _interopRequireDefault(_icon);
 
-var _menu = require("antd/lib/menu");
+var _menu = require('antd/lib/menu');
 
 var _menu2 = _interopRequireDefault(_menu);
 
-var _button = require("antd/lib/button");
+var _button = require('antd/lib/button');
 
 var _button2 = _interopRequireDefault(_button);
 
-var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
 
 var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
 
-var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
 
-var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
 
 var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 
-var _createClass2 = require("babel-runtime/helpers/createClass");
+var _createClass2 = require('babel-runtime/helpers/createClass');
 
 var _createClass3 = _interopRequireDefault(_createClass2);
 
-var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
 
 var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
 
-var _inherits2 = require("babel-runtime/helpers/inherits");
+var _inherits2 = require('babel-runtime/helpers/inherits');
 
 var _inherits3 = _interopRequireDefault(_inherits2);
 
-require("antd/lib/dropdown/style");
+require('antd/lib/dropdown/style');
 
-require("antd/lib/icon/style");
+require('antd/lib/icon/style');
 
-require("antd/lib/menu/style");
+require('antd/lib/menu/style');
 
-require("antd/lib/button/style");
+require('antd/lib/button/style');
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require("prop-types");
+var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _classnames = require("classnames");
+var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-require("../../../assets/HqCheckButton/index.less");
+require('../../../assets/css/HqCheckButton/index.less');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -163,11 +163,11 @@ var HqCheckButton = function (_React$Component) {
           _button2.default,
           {
             key: item.value,
-            type: value.indexOf(item.value) >= 0 ? "primary" : "",
+            type: value.indexOf(item.value) >= 0 ? 'primary' : '',
             onClick: function onClick() {
               return _this.onChange(item.value);
             },
-            className: (0, _classnames2.default)({ "check-Button-disabled": disabled })
+            className: (0, _classnames2.default)({ 'check-Button-disabled': disabled })
           },
           item.label
         ));
@@ -202,12 +202,12 @@ var HqCheckButton = function (_React$Component) {
           visible: _this.state.visible
         },
         _react2.default.createElement(
-          "a",
-          { className: "ant-dropdown-link", onClick: function onClick(e) {
+          'a',
+          { className: 'ant-dropdown-link', onClick: function onClick(e) {
               return e.preventDefault();
             } },
-          "\u66F4\u591A ",
-          _react2.default.createElement(_icon2.default, { type: "down" })
+          '\u66F4\u591A ',
+          _react2.default.createElement(_icon2.default, { type: 'down' })
         )
       );
       return DropHtml;
@@ -221,21 +221,21 @@ var HqCheckButton = function (_React$Component) {
   }
 
   (0, _createClass3.default)(HqCheckButton, [{
-    key: "componentWillMount",
+    key: 'componentWillMount',
     value: function componentWillMount() {
       this.setState({
         options: this.props.options
       });
     }
   }, {
-    key: "componentWillReceiveProps",
+    key: 'componentWillReceiveProps',
     value: function componentWillReceiveProps(nextProps) {
-      if ("options" in nextProps && nextProps.options != this.props.options) {
+      if ('options' in nextProps && nextProps.options != this.props.options) {
         this.setState({
           options: nextProps.options
         });
       }
-      if ("value" in nextProps && nextProps.value != this.props.value) {
+      if ('value' in nextProps && nextProps.value != this.props.value) {
         this.setState({
           value: nextProps.value
         });
@@ -245,7 +245,7 @@ var HqCheckButton = function (_React$Component) {
     // 改变
 
   }, {
-    key: "render",
+    key: 'render',
     value: function render() {
       var className = this.props.className;
       var options = this.state.options;
@@ -259,8 +259,8 @@ var HqCheckButton = function (_React$Component) {
       // );
 
       return _react2.default.createElement(
-        "div",
-        { className: (0, _classnames2.default)("check-Button", className) },
+        'div',
+        { className: (0, _classnames2.default)('check-Button', className) },
         this.BuildCheckButton(options)
       );
     }

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('../../../assets/css/HqTimeRange/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.2.0",
   "description": "dlt for react",
   "main": "lib/index.js",
   "scripts": {