@hi-ui/hiui 2.15.11 → 2.15.12

package/es/date-picker/datepicker-legacy/Time.js

@@ -0,0 +1,405 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _util = require("./util");
+
+var _icon = _interopRequireDefault(require("../../icon"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _dateUtil = require("./dateUtil");
+
+var TimePanel =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(TimePanel, _Component);
+
+  function TimePanel(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, TimePanel);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TimePanel).call(this, props));
+    _this.state = {
+      date: new Date(props.date),
+      prefix: {
+        hours: 0,
+        minutes: 0,
+        seconds: 0
+      },
+      hoursArrow: false,
+      minutesArrow: false,
+      secondsArrow: false
+    };
+    _this.hoursList = null;
+    _this.minutesList = null;
+    _this.secondsList = null;
+    _this.liPrefix = props.onlyTime ? [1, 2, 3] : [1, 2, 3, 4];
+    _this.liSuffix = props.onlyTime ? [1, 2, 3] : [1, 2, 3, 4];
+    _this.hoursScrollEvent = _this.scrollEvent.bind((0, _assertThisInitialized2["default"])(_this), 'hours');
+    _this.minutesScrollEvent = _this.scrollEvent.bind((0, _assertThisInitialized2["default"])(_this), 'minutes');
+    _this.secondsScrollEvent = _this.scrollEvent.bind((0, _assertThisInitialized2["default"])(_this), 'seconds');
+    _this.pageUpRef = _react["default"].createRef();
+    _this.pageDownRef = _react["default"].createRef();
+    return _this;
+  }
+
+  (0, _createClass2["default"])(TimePanel, [{
+    key: "range",
+    value: function range(num) {
+      var arr = [];
+
+      for (var i = 0; i < num; i++) {
+        arr.push(i < 10 ? '0' + i : i.toString());
+      }
+
+      return arr;
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.completeScrollTop();
+    }
+  }, {
+    key: "addListener",
+    value: function addListener() {
+      this.hoursList && this.hoursList.addEventListener('scroll', this.hoursScrollEvent);
+      this.minutesList && this.minutesList.addEventListener('scroll', this.minutesScrollEvent);
+      this.secondsList && this.secondsList.addEventListener('scroll', this.secondsScrollEvent);
+    }
+  }, {
+    key: "scrollEvent",
+    value: function scrollEvent(type, e) {
+      var st = e.target.scrollTop;
+      var val = Math.round(st / 32);
+      var date = this.state.date;
+
+      if (type === 'hours') {
+        date.setHours(val);
+      } else if (type === 'minutes') {
+        date.setMinutes(val);
+      } else {
+        date.setSeconds(val);
+      }
+
+      this.setState({
+        date: date
+      });
+      this.props.onPick(date, true);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.hoursList.removeEventListener('scroll', this.hoursScrollEvent);
+      this.minutesList.removeEventListener('scroll', this.minutesScrollEvent);
+      this.secondsList.removeEventListener('scroll', this.secondsScrollEvent);
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(props) {
+      if (!(0, _dateUtil.isSameDay)(props.date, this.state.date)) {
+        this.setState({
+          date: props.date
+        });
+      }
+    }
+  }, {
+    key: "completeScrollTop",
+    value: function completeScrollTop() {
+      var _this2 = this;
+
+      var date = this.state.date;
+
+      var _deconstructDate = (0, _util.deconstructDate)(date),
+          hours = _deconstructDate.hours,
+          minutes = _deconstructDate.minutes,
+          seconds = _deconstructDate.seconds;
+
+      var dVal = 32;
+      setTimeout(function () {
+        _this2.hoursList.scrollTop = hours * dVal;
+        _this2.minutesList.scrollTop = minutes * dVal;
+        _this2.secondsList.scrollTop = seconds * dVal;
+      }, 0);
+      setTimeout(function () {
+        _this2.addListener();
+      }, 200);
+    }
+  }, {
+    key: "clickEvent",
+    value: function clickEvent(flag, e) {
+      var _this3 = this;
+
+      var li = e.target;
+      if (!li.innerText) return;
+      var date = this.state.date;
+      if (li.nodeName !== 'LI') return false;
+      var c = parseInt(li.innerText);
+
+      if (flag === 'hours') {
+        date.setHours(c);
+      } else if (flag === 'minutes') {
+        date.setMinutes(c);
+      } else {
+        date.setSeconds(c);
+      }
+
+      this.setState({
+        date: date
+      }, function () {
+        _this3.completeScrollTop();
+      });
+      this.props.onPick(date, true);
+    }
+  }, {
+    key: "_renderPrefix",
+    value: function _renderPrefix(val) {
+      return val === 1 ? _react["default"].createElement("li", null) : [_react["default"].createElement("li", {
+        key: "p0"
+      }), _react["default"].createElement("li", {
+        key: "p1"
+      })];
+    }
+  }, {
+    key: "_renderSuffix",
+    value: function _renderSuffix(val, limit) {
+      if (limit - val === 1) {
+        return [_react["default"].createElement("li", {
+          key: "p0"
+        }), _react["default"].createElement("li", {
+          key: "p1"
+        })];
+      } else if (limit - val === 2) {
+        return _react["default"].createElement("li", null);
+      }
+    }
+  }, {
+    key: "scrollPageUp",
+    value: function scrollPageUp(type) {
+      var date = this.state.date;
+      var cHours = date.getHours();
+      var cMinutes = date.getMinutes();
+      var cSeconds = date.getSeconds();
+
+      if (type === 'hours') {
+        cHours = cHours === 0 ? 0 : cHours - 1;
+        this.hoursList.scrollTop = cHours * 32;
+      }
+
+      if (type === 'minutes') {
+        cMinutes = cMinutes === 0 ? 0 : cMinutes - 1;
+        this.minutesList.scrollTop = cMinutes * 32;
+      }
+
+      if (type === 'seconds') {
+        cSeconds = cSeconds === 0 ? 0 : cSeconds - 1;
+        this.secondsList.scrollTop = cSeconds * 32;
+      }
+
+      date.setHours(cHours, cMinutes, cSeconds);
+      this.setState({
+        date: date
+      });
+    }
+  }, {
+    key: "scrollPageDown",
+    value: function scrollPageDown(type) {
+      var _this4 = this;
+
+      var date = this.state.date;
+      var cHours = date.getHours();
+      var cMinutes = date.getMinutes();
+      var cSeconds = date.getSeconds();
+
+      if (type === 'hours') {
+        cHours = cHours === 23 ? 23 : cHours + 1;
+        this.hoursList.scrollTop = cHours * 32;
+      }
+
+      if (type === 'minutes') {
+        cMinutes = cMinutes === 59 ? 59 : cMinutes + 1;
+        this.minutesList.scrollTop = cMinutes * 32;
+      }
+
+      if (type === 'seconds') {
+        cSeconds = cSeconds === 59 ? 59 : cSeconds + 1;
+        this.secondsList.scrollTop = cSeconds * 32;
+      }
+
+      date.setHours(cHours, cMinutes, cSeconds);
+      this.setState({
+        date: date
+      }, function () {
+        _this4.props.onPick(date, true);
+      });
+    }
+  }, {
+    key: "renderArrow",
+    value: function renderArrow(type) {
+      var _this5 = this;
+
+      return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("span", {
+        className: "hi-timepicker__page-turn",
+        onClick: function onClick() {
+          return _this5.scrollPageUp(type);
+        }
+      }, _react["default"].createElement(_icon["default"], {
+        name: "up"
+      })), _react["default"].createElement("span", {
+        className: "hi-timepicker__page-turn",
+        onClick: function onClick() {
+          return _this5.scrollPageDown(type);
+        }
+      }, _react["default"].createElement(_icon["default"], {
+        name: "down"
+      })));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this6 = this;
+
+      var localeDatas = this.props.localeDatas;
+      var _localeDatas$datePick = localeDatas.datePicker,
+          lHours = _localeDatas$datePick.hours,
+          lMinutes = _localeDatas$datePick.minutes,
+          lSeconds = _localeDatas$datePick.seconds;
+      var _this$state = this.state,
+          date = _this$state.date,
+          hoursArrow = _this$state.hoursArrow,
+          minutesArrow = _this$state.minutesArrow,
+          secondsArrow = _this$state.secondsArrow;
+
+      var _deconstructDate2 = (0, _util.deconstructDate)(date),
+          hours = _deconstructDate2.hours,
+          minutes = _deconstructDate2.minutes,
+          seconds = _deconstructDate2.seconds;
+
+      this.liPrefix = this.liPrefix.map(function (item, index) {
+        return _react["default"].createElement("li", {
+          className: "hi-timepicker__item hi-timepikcer__item--empty",
+          key: 'pre' + index
+        });
+      });
+      this.liSuffix = this.liSuffix.map(function (item, index) {
+        return _react["default"].createElement("li", {
+          className: "hi-timepicker__item hi-timepikcer__item--empty",
+          key: 'suf' + index
+        });
+      });
+      return _react["default"].createElement("div", {
+        className: "hi-timepicker__body"
+      }, _react["default"].createElement("div", {
+        className: "hi-timepicker__timeheader"
+      }, _react["default"].createElement("span", {
+        className: "hi-timepicker__mark"
+      }, lHours), _react["default"].createElement("span", {
+        className: "hi-timepicker__mark"
+      }, lMinutes), _react["default"].createElement("span", {
+        className: "hi-timepicker__mark"
+      }, lSeconds)), _react["default"].createElement("div", {
+        className: "hi-timepicker__timebody"
+      }, _react["default"].createElement("div", {
+        className: "hi-timepicker__list-container",
+        onMouseEnter: function onMouseEnter() {
+          return _this6.setState({
+            hoursArrow: true
+          });
+        },
+        onMouseLeave: function onMouseLeave() {
+          return _this6.setState({
+            hoursArrow: false
+          });
+        }
+      }, _react["default"].createElement("ul", {
+        ref: function ref(el) {
+          _this6.hoursList = el;
+        },
+        className: "hi-timepicker__list",
+        onClick: this.clickEvent.bind(this, 'hours')
+      }, this.liPrefix, this.range(24).map(function (m, n) {
+        var _class = (0, _classnames["default"])('hi-timepicker__item', n === hours && 'hi-timepicker__item--current');
+
+        return _react["default"].createElement("li", {
+          key: n,
+          className: _class
+        }, m);
+      }), this.liSuffix), hoursArrow && this.renderArrow('hours')), _react["default"].createElement("div", {
+        className: "hi-timepicker__list-container",
+        onMouseEnter: function onMouseEnter() {
+          return _this6.setState({
+            minutesArrow: true
+          });
+        },
+        onMouseLeave: function onMouseLeave() {
+          return _this6.setState({
+            minutesArrow: false
+          });
+        }
+      }, _react["default"].createElement("ul", {
+        className: "hi-timepicker__list",
+        ref: function ref(el) {
+          _this6.minutesList = el;
+        },
+        onClick: this.clickEvent.bind(this, 'minutes')
+      }, this.liPrefix, this.range(60).map(function (m, n) {
+        return _react["default"].createElement("li", {
+          key: n,
+          className: n === minutes ? 'hi-timepicker__item hi-timepicker__item--current' : 'hi-timepicker__item'
+        }, m);
+      }), this.liSuffix), minutesArrow && this.renderArrow('minutes')), _react["default"].createElement("div", {
+        className: "hi-timepicker__list-container",
+        onMouseEnter: function onMouseEnter() {
+          return _this6.setState({
+            secondsArrow: true
+          });
+        },
+        onMouseLeave: function onMouseLeave() {
+          return _this6.setState({
+            secondsArrow: false
+          });
+        }
+      }, _react["default"].createElement("ul", {
+        ref: function ref(el) {
+          _this6.secondsList = el;
+        },
+        className: "hi-timepicker__list",
+        onClick: this.clickEvent.bind(this, 'seconds')
+      }, this.liPrefix, this.range(60).map(function (m, n) {
+        return _react["default"].createElement("li", {
+          key: n,
+          className: n === seconds ? 'hi-timepicker__item hi-timepicker__item--current' : 'hi-timepicker__item'
+        }, m);
+      }), this.liSuffix), secondsArrow && this.renderArrow('seconds')), _react["default"].createElement("div", {
+        className: "hi-timepicker__current-line",
+        style: {
+          top: this.props.onlyTime ? 108 : 140
+        }
+      })));
+    }
+  }]);
+  return TimePanel;
+}(_react.Component);
+
+exports["default"] = TimePanel;

package/es/date-picker/datepicker-legacy/TimePanel.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Time = _interopRequireDefault(require("./Time"));
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var TimePanel =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(TimePanel, _Component);
+
+  function TimePanel(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, TimePanel);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TimePanel).call(this, props));
+    _this.state = {
+      style: props.style
+    };
+
+    if (_this.props.type !== 'time') {
+      _this.state.style = {
+        position: 'relative'
+      };
+    }
+
+    return _this;
+  }
+
+  (0, _createClass2["default"])(TimePanel, [{
+    key: "onTimePick",
+    value: function onTimePick(date, bol) {
+      var showTime = this.props.showTime;
+
+      if (showTime) {
+        this.props.onPick(date, true);
+      } else {
+        this.props.onPick(date, bol);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          localeDatas = _this$props.localeDatas,
+          date = _this$props.date,
+          type = _this$props.type;
+      return _react["default"].createElement("div", {
+        className: "hi-timepicker-legacy",
+        style: this.state.style
+      }, _react["default"].createElement(_Time["default"], {
+        localeDatas: localeDatas,
+        date: date,
+        onPick: this.onTimePick.bind(this),
+        onlyTime: type === 'time'
+      }));
+    }
+  }]);
+  return TimePanel;
+}(_react.Component);
+
+var _default = (0, _context["default"])(TimePanel);
+
+exports["default"] = _default;

package/es/date-picker/datepicker-legacy/TimePeriodPanel.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var _dateUtil = require("./dateUtil");
+
+var TimePeriodPanel =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(TimePeriodPanel, _Component);
+
+  function TimePeriodPanel(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, TimePeriodPanel);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TimePeriodPanel).call(this, props));
+    _this.listEl = _react["default"].createRef();
+    return _this;
+  }
+
+  (0, _createClass2["default"])(TimePeriodPanel, [{
+    key: "calcInterval",
+    value: function calcInterval() {
+      var timeInterval = this.props.timeInterval;
+      var segment = 24 * 60 / timeInterval;
+      var pre = 0;
+      var next = 0;
+      var arr = [];
+
+      var func = function func(val) {
+        return val < 10 ? '0' + val : val;
+      };
+
+      for (var i = 0; i < segment; i++) {
+        next += timeInterval;
+        var time = func(parseInt(pre / 60)) + ':' + func(pre % 60) + ' ~ ' + func(parseInt(next / 60)) + ':' + func(next % 60);
+        arr.push(time);
+        pre = next;
+      }
+
+      return arr;
+    }
+  }, {
+    key: "getActiveIndex",
+    value: function getActiveIndex() {
+      var _this$props = this.props,
+          date = _this$props.date,
+          timeInterval = _this$props.timeInterval;
+      return timeInterval >= 60 ? (0, _dateUtil.getHours)(date) * 60 / timeInterval : ((0, _dateUtil.getMinutes)(date) + (0, _dateUtil.getHours)(date) * 60) / timeInterval;
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      setTimeout(function () {
+        _this2.listEl.current.scrollTop = _this2.getActiveIndex() * 37;
+      }, 0);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var list = this.calcInterval();
+      var _this$props2 = this.props,
+          onTimePeriodPick = _this$props2.onTimePeriodPick,
+          localeDatas = _this$props2.localeDatas;
+      var activeIndex = this.getActiveIndex();
+      return _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__time-period"
+      }, _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__period-header"
+      }, localeDatas.datePicker.timePeriod), _react["default"].createElement("div", {
+        className: "hi-datepicker-legacy__period-body"
+      }, _react["default"].createElement("ul", {
+        className: "hi-datepicker-legacy__period-list",
+        ref: this.listEl
+      }, list.map(function (item, index) {
+        var cls = (0, _classnames["default"])('hi-datepicker-legacy__period-item', activeIndex === index && 'hi-datepicker-legacy__period-item--active');
+        return _react["default"].createElement("li", {
+          className: cls,
+          key: index,
+          onClick: function onClick(e) {
+            var ts = item.split(' ~ ');
+            onTimePeriodPick(ts[0], ts[1]);
+          }
+        }, item);
+      }))));
+    }
+  }]);
+  return TimePeriodPanel;
+}(_react.Component);
+
+var _default = (0, _context["default"])(TimePeriodPanel);
+
+exports["default"] = _default;

package/es/date-picker/datepicker-legacy/TimePicker.js

@@ -0,0 +1,78 @@
+"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Type = _interopRequireDefault(require("./Type"));
+
+var _BasePicker2 = _interopRequireDefault(require("./BasePicker"));
+
+var _TimePanel = _interopRequireDefault(require("./TimePanel"));
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var _TimeRangePanel = _interopRequireDefault(require("./TimeRangePanel"));
+
+var TimePicker =
+/*#__PURE__*/
+function (_BasePicker) {
+  (0, _inherits2["default"])(TimePicker, _BasePicker);
+
+  function TimePicker() {
+    (0, _classCallCheck2["default"])(this, TimePicker);
+    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TimePicker).apply(this, arguments));
+  }
+
+  (0, _createClass2["default"])(TimePicker, [{
+    key: "initPanel",
+    value: function initPanel(state, props) {
+      return props.type === 'time' ? _react["default"].createElement(_TimePanel["default"], (0, _extends2["default"])({}, props, {
+        onPick: this.onPick.bind(this),
+        style: state.style,
+        date: state.date
+      })) : _react["default"].createElement(_TimeRangePanel["default"], (0, _extends2["default"])({}, props, {
+        onPick: this.onPick.bind(this),
+        style: state.style,
+        date: state.date
+      }));
+    }
+  }]);
+  return TimePicker;
+}(_BasePicker2["default"]);
+
+TimePicker.propTypes = {
+  type: _propTypes["default"].oneOf(Object.values(_Type["default"])),
+  date: _propTypes["default"].instanceOf(Date),
+  size: _propTypes["default"].string,
+  onChange: _propTypes["default"].func,
+  format: _propTypes["default"].string
+};
+TimePicker.defaultProps = {
+  type: 'time',
+  format: 'HH:mm:ss',
+  disabled: false
+};
+
+var _default = (0, _context["default"])(TimePicker);
+
+exports["default"] = _default;