@hi-ui/hiui 2.15.9 → 2.15.11

package/es/date-picker/Time.js

@@ -1,329 +1,439 @@
 "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 _react = _interopRequireWildcard(require("react"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _util = require("./util");
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _icon = _interopRequireDefault(require("../icon"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _dateUtil = require("./dateUtil");
 
-var _react = _interopRequireWildcard(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _util = require("./util");
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-var _TimeList = _interopRequireDefault(require("./TimeList"));
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _dateUtil = require("./dateUtil");
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 
-var Time = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(Time, _Component);
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var TimePanel = /*#__PURE__*/function (_Component) {
+  _inherits(TimePanel, _Component);
 
-  var _super = _createSuper(Time);
+  var _super = _createSuper(TimePanel);
 
-  function Time(props) {
+  function TimePanel(props) {
     var _this;
 
-    (0, _classCallCheck2["default"])(this, Time);
+    _classCallCheck(this, TimePanel);
+
     _this = _super.call(this, props);
     _this.state = {
-      date: (0, _dateUtil.getValidDate)(props.date),
-      endDate: '',
+      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(_assertThisInitialized(_this), 'hours');
+    _this.minutesScrollEvent = _this.scrollEvent.bind(_assertThisInitialized(_this), 'minutes');
+    _this.secondsScrollEvent = _this.scrollEvent.bind(_assertThisInitialized(_this), 'seconds');
+    _this.pageUpRef = /*#__PURE__*/_react["default"].createRef();
+    _this.pageDownRef = /*#__PURE__*/_react["default"].createRef();
+    _this.topValue_1 = 0;
+    _this.topValue_2 = 0;
+    _this.timer = null;
     return _this;
   }
 
-  (0, _createClass2["default"])(Time, [{
-    key: "callback",
-    value: function callback(date) {
+  _createClass(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: "isScrollStop",
+    value: function isScrollStop(val, el) {
+      this.topValue_2 = el.scrollTop;
+
+      if (this.topValue_1 === this.topValue_2) {
+        el.scrollTop = val * 32;
+      }
+    }
+  }, {
+    key: "scrollEvent",
+    value: function scrollEvent(type, e) {
+      clearTimeout(this.timer);
+      var st = e.target.scrollTop;
+      this.topValue_1 = st;
+      var val = Math.round(st / 32);
+
+      if (type === 'hours' && val > 23 || (type === 'minutes' || type === 'seconds') && val > 59) {
+        return false;
+      }
+
+      this.timer = setTimeout(this.isScrollStop.bind(this, val, e.target), 200);
+      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: (0, _dateUtil.getValidDate)(props.date)
+          date: props.date
         });
       }
     }
   }, {
-    key: "whenDisableChange",
-    value: function whenDisableChange(list, val, arrowVal) {
-      var _value = val + arrowVal;
+    key: "completeScrollTop",
+    value: function completeScrollTop() {
+      var _this2 = this;
 
-      while (list.includes(_value)) {
-        _value += arrowVal;
-      }
+      var date = this.state.date;
 
-      return _value;
+      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: "selectedEvent",
-    value: function selectedEvent(type, value, arrow) {
-      var date = this.state.date;
-      var cDate = new Date(date.getTime());
+    key: "clickEvent",
+    value: function clickEvent(flag, e) {
+      var _this3 = this;
 
-      var disabledList = this._getDsiabledList()[type];
-
-      if (disabledList.includes(value) && arrow) {
-        value = this.whenDisableChange(disabledList, value, arrow);
-      }
+      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 (type === 'hours') {
-        cDate.setHours(value);
-      } else if (type === 'minutes') {
-        cDate.setMinutes(value);
-      } else if (type === 'seconds') {
-        cDate.setSeconds(value);
+      if (flag === 'hours') {
+        date.setHours(c);
+      } else if (flag === 'minutes') {
+        date.setMinutes(c);
+      } else {
+        date.setSeconds(c);
       }
 
-      if (cDate.getTime() !== date.getTime()) {
-        this.callback(cDate);
-      }
+      this.setState({
+        date: date
+      }, function () {
+        _this3.completeScrollTop();
+      });
+      this.props.onPick(date, true);
     }
   }, {
-    key: "isShowHMS",
-    value: function isShowHMS() {
-      var format = this.props.format;
-      return {
-        hours: format.indexOf('H') > -1 || format.indexOf('h') > -1,
-        minutes: format.indexOf('m') > -1,
-        seconds: format.indexOf('s') > -1
-      };
-    } // 设置Date的选中状态
-
-  }, {
-    key: "setDisableTime",
-    value: function setDisableTime(type, i, disabledTime) {
-      var _this$props = this.props,
-          timeRangePanelType = _this$props.timeRangePanelType,
-          startDate = _this$props.startDate,
-          date = _this$props.date;
-      var isDisabled = disabledTime.includes(i);
-
-      if (this.props.isCheckTime) {
-        if (timeRangePanelType === 'right') {
-          var _deconstructDate = (0, _util.deconstructDate)(startDate),
-              hours = _deconstructDate.hours,
-              minutes = _deconstructDate.minutes,
-              seconds = _deconstructDate.seconds;
-
-          var _ref = date ? (0, _util.deconstructDate)(date) : (0, _util.deconstructDate)(new Date()),
-              endHours = _ref.hours,
-              endMinutes = _ref.minutes;
-
-          isDisabled = type === 'hours' && hours > i;
-
-          if (type === 'minutes') {
-            if (endHours === hours) {
-              isDisabled = minutes > i;
-            }
-
-            if (endHours < hours) {
-              isDisabled = true;
-            }
-          }
-
-          if (type === 'seconds') {
-            if (endHours === hours) {
-              isDisabled = endMinutes === minutes && seconds > i;
-
-              if (endMinutes < minutes) {
-                isDisabled = true;
-              }
-            }
-
-            if (endHours < hours) {
-              isDisabled = true;
-            }
-          }
-        }
-      }
-
-      return isDisabled;
+    key: "_renderPrefix",
+    value: function _renderPrefix(val) {
+      return val === 1 ? /*#__PURE__*/_react["default"].createElement("li", null) : [/*#__PURE__*/_react["default"].createElement("li", {
+        key: "p0"
+      }), /*#__PURE__*/_react["default"].createElement("li", {
+        key: "p1"
+      })];
     }
   }, {
-    key: "getStep",
-    value: function getStep(type) {
-      var _this$props2 = this.props,
-          hourStep = _this$props2.hourStep,
-          minuteStep = _this$props2.minuteStep,
-          secondStep = _this$props2.secondStep;
-      var step = 1;
-      var directionStep = 1;
-
-      switch (type) {
-        case 'hours':
-          step = hourStep || directionStep;
-          break;
-
-        case 'minutes':
-          step = minuteStep || directionStep;
-          break;
-
-        case 'seconds':
-          step = secondStep || directionStep;
-          break;
-
-        default:
-          step = 1;
-          break;
+    key: "_renderSuffix",
+    value: function _renderSuffix(val, limit) {
+      if (limit - val === 1) {
+        return [/*#__PURE__*/_react["default"].createElement("li", {
+          key: "p0"
+        }), /*#__PURE__*/_react["default"].createElement("li", {
+          key: "p1"
+        })];
+      } else if (limit - val === 2) {
+        return /*#__PURE__*/_react["default"].createElement("li", null);
       }
-
-      return step;
     }
   }, {
-    key: "generateDatas",
-    value: function generateDatas(type) {
-      var count;
-      var datas = [];
-      var currentDate = (0, _util.deconstructDate)(this.state.date);
-      var step = this.getStep(type);
-
-      var disabledList = this._getDsiabledList();
-
-      var disabledTime = disabledList[type];
+    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') {
-        count = 24;
-      } else if (type === 'minutes') {
-        count = 60;
-      } else {
-        count = 60;
+        cHours = cHours === 0 ? 0 : cHours - 1;
+        this.hoursList.scrollTop = cHours * 32;
       }
 
-      for (var i = 0; i < count; i += 1) {
-        if (i % step === 0 || i === 0) {
-          datas.push({
-            value: i,
-            text: i < 10 ? '0' + i : i.toString(),
-            disabled: this.setDisableTime(type, i, disabledTime),
-            current: i === currentDate[type]
-          });
-        }
+      if (type === 'minutes') {
+        cMinutes = cMinutes === 0 ? 0 : cMinutes - 1;
+        this.minutesList.scrollTop = cMinutes * 32;
       }
 
-      return datas;
-    }
-  }, {
-    key: "_getDsiabledList",
-    value: function _getDsiabledList() {
-      var _this$props3 = this.props,
-          disabledHours = _this$props3.disabledHours,
-          disabledMinutes = _this$props3.disabledMinutes,
-          disabledSeconds = _this$props3.disabledSeconds;
-      var currentDate = (0, _util.deconstructDate)(this.state.date);
-      return {
-        hours: Object.prototype.toString.call(disabledHours) === '[object Array]' ? disabledHours : disabledHours() || [],
-        minutes: Object.prototype.toString.call(disabledMinutes) === '[object Array]' ? disabledMinutes : disabledMinutes(currentDate['hours']) || [],
-        seconds: Object.prototype.toString.call(disabledSeconds) === '[object Array]' ? disabledSeconds : disabledSeconds(currentDate['hours'], currentDate['minutes']) || []
-      };
+      if (type === 'seconds') {
+        cSeconds = cSeconds === 0 ? 0 : cSeconds - 1;
+        this.secondsList.scrollTop = cSeconds * 32;
+      }
+
+      date.setHours(cHours, cMinutes, cSeconds);
+      this.setState({
+        date: date
+      });
     }
   }, {
-    key: "renderTimeList",
-    value: function renderTimeList(type) {
-      var _this$props4 = this.props,
-          hourStep = _this$props4.hourStep,
-          minuteStep = _this$props4.minuteStep,
-          secondStep = _this$props4.secondStep;
-      var dDate = (0, _util.deconstructDate)(this.state.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();
 
-      var disabledList = this._getDsiabledList();
+      if (type === 'hours') {
+        cHours = cHours === 23 ? 23 : cHours + 1;
+        this.hoursList.scrollTop = cHours * 32;
+      }
 
-      var isShow = this.isShowHMS()[type];
+      if (type === 'minutes') {
+        cMinutes = cMinutes === 59 ? 59 : cMinutes + 1;
+        this.minutesList.scrollTop = cMinutes * 32;
+      }
 
-      if (!isShow) {
-        return null;
+      if (type === 'seconds') {
+        cSeconds = cSeconds === 59 ? 59 : cSeconds + 1;
+        this.secondsList.scrollTop = cSeconds * 32;
       }
 
-      return /*#__PURE__*/_react["default"].createElement(_TimeList["default"], {
-        type: type,
-        value: dDate[type],
-        onlyTime: this.props.onlyTime,
-        datas: this.generateDatas(type),
-        disabledList: disabledList[type],
-        timeRangePanelType: this.props.timeRangePanelType,
-        hourStep: hourStep,
-        minuteStep: minuteStep,
-        secondStep: secondStep,
-        onSelect: this.selectedEvent.bind(this)
+      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 /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "hi-timepicker__page-turn",
+        onClick: function onClick() {
+          return _this5.scrollPageUp(type);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: "up"
+      })), /*#__PURE__*/_react["default"].createElement("span", {
+        className: "hi-timepicker__page-turn",
+        onClick: function onClick() {
+          return _this5.scrollPageDown(type);
+        }
+      }, /*#__PURE__*/_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$isShowHMS = this.isShowHMS(),
-          showHour = _this$isShowHMS.hours,
-          showMinute = _this$isShowHMS.minutes,
-          showSecond = _this$isShowHMS.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 /*#__PURE__*/_react["default"].createElement("li", {
+          className: "hi-timepicker__item hi-timepikcer__item--empty",
+          key: 'pre' + index
+        });
+      });
+      this.liSuffix = this.liSuffix.map(function (item, index) {
+        return /*#__PURE__*/_react["default"].createElement("li", {
+          className: "hi-timepicker__item hi-timepikcer__item--empty",
+          key: 'suf' + index
+        });
+      });
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "hi-timepicker__body"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "hi-timepicker__timeheader"
-      }, showHour && /*#__PURE__*/_react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("span", {
         className: "hi-timepicker__mark"
-      }, lHours), showMinute && /*#__PURE__*/_react["default"].createElement("span", {
+      }, lHours), /*#__PURE__*/_react["default"].createElement("span", {
         className: "hi-timepicker__mark"
-      }, lMinutes), showSecond && /*#__PURE__*/_react["default"].createElement("span", {
+      }, lMinutes), /*#__PURE__*/_react["default"].createElement("span", {
         className: "hi-timepicker__mark"
       }, lSeconds)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "hi-timepicker__timebody"
-      }, this.renderTimeList('hours'), this.renderTimeList('minutes'), this.renderTimeList('seconds'), /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_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
+          });
+        }
+      }, /*#__PURE__*/_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 /*#__PURE__*/_react["default"].createElement("li", {
+          key: n,
+          className: _class
+        }, m);
+      }), this.liSuffix), hoursArrow && this.renderArrow('hours')), /*#__PURE__*/_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
+          });
+        }
+      }, /*#__PURE__*/_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 /*#__PURE__*/_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')), /*#__PURE__*/_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
+          });
+        }
+      }, /*#__PURE__*/_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 /*#__PURE__*/_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')), /*#__PURE__*/_react["default"].createElement("div", {
         className: "hi-timepicker__current-line",
         style: {
-          top: 108
+          top: this.props.onlyTime ? 108 : 140
         }
       })));
     }
   }]);
-  return Time;
+
+  return TimePanel;
 }(_react.Component);
 
-Time.defaultProps = {
-  hourStep: 1,
-  minuteStep: 1,
-  secondStep: 1,
-  format: 'HH:mm:ss',
-  disabledHours: function disabledHours() {
-    return [];
-  },
-  disabledMinutes: function disabledMinutes() {
-    return [];
-  },
-  disabledSeconds: function disabledSeconds() {
-    return [];
-  }
-};
-var _default = Time;
-exports["default"] = _default;
+exports["default"] = TimePanel;