@titaui/pc 1.11.44 → 1.12.0-beta.0

package/lib/components/task-tree/task-item-node/constant.js

@@ -3,56 +3,39 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPriorityTextMapping = exports.TASK_NDOE_TYPE = exports.EStatusStatus2ClassType = exports.EStatusClass2StatusTypeText = exports.EStatusClass2StatusType = void 0;
+exports.TASK_NDOE_TYPE = exports.EStatusStatus2ClassType = exports.EStatusClass2StatusTypeText = exports.EStatusClass2StatusType = void 0;
 
 var _getLocale = require("../../../utils/getLocale");
 
 var EStatusClass2StatusType = {
-  "tu-icon-finished": 2,
-  "tu-icon-running": 1,
-  "tu-icon-canceled": 4,
-  "tu-icon-deferred": 3,
-  "tu-icon-paused": 6,
-  "tu-icon-notstart": 0,
-  "tu-icon-jiantou-right": 5
+  'tu-icon-finished': 2,
+  'tu-icon-running': 1,
+  'tu-icon-canceled': 4,
+  'tu-icon-deferred': 3,
+  'tu-icon-paused': 6,
+  'tu-icon-notstart': 0,
+  'tu-icon-jiantou-right': 5
 };
 exports.EStatusClass2StatusType = EStatusClass2StatusType;
 var EStatusStatus2ClassType = {
-  2: "tu-icon-finished",
-  1: "tu-icon-running",
-  4: "tu-icon-canceled",
-  3: "tu-icon-deferred",
-  6: "tu-icon-paused",
-  0: "tu-icon-notstart",
-  5: "tu-icon-weijieshou-right"
+  2: 'tu-icon-finished',
+  1: 'tu-icon-running',
+  4: 'tu-icon-canceled',
+  3: 'tu-icon-deferred',
+  6: 'tu-icon-paused',
+  0: 'tu-icon-notstart',
+  5: 'tu-icon-weijieshou-right'
 };
 exports.EStatusStatus2ClassType = EStatusStatus2ClassType;
-
-var EStatusClass2StatusTypeText = function EStatusClass2StatusTypeText() {
-  return {
-    "tu-icon-finished": (0, _getLocale.getLocale)("OKR_MyO_E_From_Completed"),
-    "tu-icon-running": (0, _getLocale.getLocale)("Per_MyRe_text_Inprogress"),
-    "tu-icon-canceled": (0, _getLocale.getLocale)("OKR_MyO_E_From_Cancelled"),
-    "tu-icon-deferred": (0, _getLocale.getLocale)("OKR_MyO_E_From_Delayed"),
-    "tu-icon-paused": (0, _getLocale.getLocale)("OKR_MyO_E_From_Suspended"),
-    "tu-icon-notstart": (0, _getLocale.getLocale)("OKR_MyO_E_From_NotStarted"),
-    "tu-icon-weijieshou-right": (0, _getLocale.getLocale)("OKR_MyO_E_From_Notaccepted")
-  };
+var EStatusClass2StatusTypeText = {
+  'tu-icon-finished': (0, _getLocale.getLocale)('OKR_MyO_E_From_Completed'),
+  'tu-icon-running': (0, _getLocale.getLocale)('Per_MyRe_text_Inprogress'),
+  'tu-icon-canceled': (0, _getLocale.getLocale)('OKR_MyO_E_From_Cancelled'),
+  'tu-icon-deferred': (0, _getLocale.getLocale)('OKR_MyO_E_From_Delayed'),
+  'tu-icon-paused': (0, _getLocale.getLocale)('OKR_MyO_E_From_Suspended'),
+  'tu-icon-notstart': (0, _getLocale.getLocale)('OKR_MyO_E_From_NotStarted')
 };
-
 exports.EStatusClass2StatusTypeText = EStatusClass2StatusTypeText;
-
-var getPriorityTextMapping = function getPriorityTextMapping() {
-  return {
-    1: "".concat((0, _getLocale.getLocale)("OKR_MyO_E_Priority"), "\uFF1A").concat((0, _getLocale.getLocale)("OKR_MyO_E_Butt_Highest")),
-    2: "".concat((0, _getLocale.getLocale)("OKR_MyO_E_Priority"), "\uFF1A").concat((0, _getLocale.getLocale)("OKR_MyO_E_Butt_High")),
-    3: "".concat((0, _getLocale.getLocale)("OKR_MyO_E_Priority"), "\uFF1A").concat((0, _getLocale.getLocale)("OKR_MyO_E_Butt_Middle")),
-    4: "".concat((0, _getLocale.getLocale)("OKR_MyO_E_Priority"), "\uFF1A").concat((0, _getLocale.getLocale)("OKR_MyO_E_Butt_Low")),
-    5: "".concat((0, _getLocale.getLocale)("OKR_MyO_E_Priority"), "\uFF1A").concat((0, _getLocale.getLocale)("OKR_MyO_E_Butt_Verylow"))
-  };
-};
-
-exports.getPriorityTextMapping = getPriorityTextMapping;
 var TASK_NDOE_TYPE;
 exports.TASK_NDOE_TYPE = TASK_NDOE_TYPE;
 

package/lib/components/task-tree/task-item-node/e-status-dropdown.js

@@ -5,20 +5,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = _default;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _titaUi = require("tita-ui");
-
 var _dropSelector = _interopRequireWildcard(require("../../drop-selector"));
 
 var _getLocale = require("../../../utils/getLocale");
 
-var _constant = require("./constant");
-
 require("./index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -39,8 +35,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var EStatusDropdown = function EStatusDropdown(props) {
-  // eslint-disable-next-line react/prop-types
+function _default(props) {
   var onChange = props.onChange,
       checked = props.checked,
       hasAuth = props.hasAuth;
@@ -52,47 +47,25 @@ var EStatusDropdown = function EStatusDropdown(props) {
 
   var onMenuClickHandler = function onMenuClickHandler(name) {
     setStatus(name);
-
-    if (onChange) {
-      onChange(name);
-    }
+    onChange && onChange(name);
   };
 
   (0, _react.useEffect)(function () {
     setStatus(checked);
   }, [checked]);
-
-  if (!hasAuth) {
-    return /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
-      content: (0, _constant.EStatusClass2StatusTypeText)()[status]
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      style: {
-        color: '#89919F',
-        fontSize: 16,
-        marginRight: 4,
-        verticalAlign: 'baseline'
-      },
-      className: (0, _classnames["default"])(status)
-    }));
-  }
-
   return /*#__PURE__*/_react["default"].createElement(_dropSelector["default"], {
     onChange: onMenuClickHandler,
     checked: status,
     canEdit: hasAuth,
-    trigger: /*#__PURE__*/_react["default"].createElement("div", {
+    trigger: /*#__PURE__*/_react["default"].createElement("span", {
       style: {
         color: '#89919F',
         fontSize: 16,
         marginRight: 4,
-        verticalAlign: 'baseline',
-        display: 'flex'
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
-      content: (0, _constant.EStatusClass2StatusTypeText)()[status]
-    }, /*#__PURE__*/_react["default"].createElement("span", {
+        verticalAlign: 'baseline'
+      },
       className: (0, _classnames["default"])(status)
-    })))
+    })
   }, /*#__PURE__*/_react["default"].createElement(_dropSelector.IconItem, {
     name: "tu-icon-finished",
     icon: "tu-icon-finished",
@@ -118,7 +91,4 @@ var EStatusDropdown = function EStatusDropdown(props) {
     icon: "tu-icon-notstart",
     exIconClass: "e-node-status-icon"
   }, (0, _getLocale.getLocale)('OKR_MyO_E_From_NotStarted')));
-};
-
-var _default = EStatusDropdown;
-exports["default"] = _default;
+}

package/lib/components/task-tree/task-item-node/e-task.js

@@ -138,7 +138,7 @@ function ETaskNode(props) {
       setDataInfo = _useState14[1];
 
   var _useState15 = (0, _react.useState)(function () {
-    return (0, _bsGlobal.getBSGlobal)('TaskAdvancedSetting').TaskFunctionSetting.TaskPriority;
+    return (0, _bsGlobal.getBSGlobal)("TaskAdvancedSetting").TaskFunctionSetting.TaskPriority;
   }),
       _useState16 = _slicedToArray(_useState15, 1),
       isShowPriority = _useState16[0];
@@ -152,8 +152,8 @@ function ETaskNode(props) {
   var hasEditAuth = new _auth.EAuth({
     principalUser: data.principalUser,
     user: data.user
-  }).hasAuth() && // || extraEditAuth
-  data.status !== 5;
+  }).hasAuth() // || extraEditAuth
+  && data.status !== 5;
   var isParticipant = ((_okrInfo$authority = okrInfo.authority) === null || _okrInfo$authority === void 0 ? void 0 : _okrInfo$authority.roleRelation) && okrInfo.authority.roleRelation.roleType === 2;
   var hasRelativeAuth = new _auth.KRAuth({
     user: krUser,
@@ -174,7 +174,7 @@ function ETaskNode(props) {
       if (data.Code === 1) {
         setUser(user.data);
 
-        _toast["default"].Success((0, _getLocale.getLocale)('Mod_Successfuloperat'), {
+        _toast["default"].Success((0, _getLocale.getLocale)("Mod_Successfuloperat"), {
           canClose: false
         });
       } else {
@@ -183,7 +183,7 @@ function ETaskNode(props) {
         });
       }
     })["catch"](function () {
-      _toast["default"].Error('网络异常', {
+      _toast["default"].Error("网络异常", {
         canClose: false
       });
     });
@@ -195,7 +195,7 @@ function ETaskNode(props) {
       status: _constant.EStatusClass2StatusType[statusType]
     }).then(function (resp) {
       if (resp.Code === 1) {
-        _toast["default"].Success((0, _getLocale.getLocale)('Mod_Successfuloperat'), {
+        _toast["default"].Success((0, _getLocale.getLocale)("Mod_Successfuloperat"), {
           canClose: false
         });
 
@@ -210,7 +210,7 @@ function ETaskNode(props) {
         });
       }
     })["catch"](function () {
-      _toast["default"].Error('网络异常', {
+      _toast["default"].Error("网络异常", {
         canClose: false
       });
     });
@@ -224,7 +224,7 @@ function ETaskNode(props) {
       taskId: data.taskId
     }).then(function (resp) {
       if (resp.Code === 1) {
-        _toast["default"].Success((0, _getLocale.getLocale)('Mod_Successfuloperat'), {
+        _toast["default"].Success((0, _getLocale.getLocale)("Mod_Successfuloperat"), {
           canClose: false
         });
       } else {
@@ -233,7 +233,7 @@ function ETaskNode(props) {
         });
       }
     })["catch"](function () {
-      _toast["default"].Error('网络异常', {
+      _toast["default"].Error("网络异常", {
         canClose: false
       });
     })["finally"](setUnConnectVisible(false));
@@ -279,7 +279,7 @@ function ETaskNode(props) {
                     status: resp.Data.status
                   }));
 
-                  _toast["default"].Success((0, _getLocale.getLocale)('Mod_Successfuloperat'), {
+                  _toast["default"].Success((0, _getLocale.getLocale)("Mod_Successfuloperat"), {
                     canClose: false
                   });
                 } else {
@@ -288,7 +288,7 @@ function ETaskNode(props) {
                   });
                 }
               })["catch"](function () {
-                _toast["default"].Error('网络异常', {
+                _toast["default"].Error("网络异常", {
                   canClose: false
                 });
               });
@@ -322,7 +322,7 @@ function ETaskNode(props) {
   };
 
   var handleShowTaskDetail = function handleShowTaskDetail() {
-    if ((0, _platform.isPlatform)('dd')) {
+    if ((0, _platform.isPlatform)("dd")) {
       _drawerManager["default"].close();
     }
 
@@ -333,7 +333,7 @@ function ETaskNode(props) {
       (_window$Talent2 = window.Talent) === null || _window$Talent2 === void 0 ? void 0 : _window$Talent2.app.vent.on("global-pull-screen:closed:".concat(data.taskId), function () {// refreshEList && refreshEList();
       }); // 任务：打开推屏
 
-      window.Talent.app.vent.trigger('global-pull-screen', data.taskId, 'task');
+      window.Talent.app.vent.trigger("global-pull-screen", data.taskId, "task");
     } else {
       window.open("//".concat(window.location.host).concat(window.location.pathname, "#more/taskinfo?id=").concat(data.taskId));
     }
@@ -347,7 +347,7 @@ function ETaskNode(props) {
   }, /*#__PURE__*/_react["default"].createElement(_eStatusDropdown["default"], {
     onChange: onEStatusChangeHandler,
     checked: _constant.EStatusStatus2ClassType[dataInfo.status],
-    hasAuth: hasEditAuth && data.editStatusable
+    hasAuth: hasEditAuth
   })), isShowPriority && /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])("".concat(_precls["default"], "__e-task-node-priority"))
   }, /*#__PURE__*/_react["default"].createElement(_ePriority["default"], {
@@ -356,7 +356,7 @@ function ETaskNode(props) {
     hasAuth: hasEditAuth,
     status: data.status
   })), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames["default"])("".concat(_precls["default"], "__e-task-node-title"), _defineProperty({}, "".concat(_precls["default"], "__e-project-node-gray"), isCancel || isGray)),
+    className: (0, _classnames["default"])("".concat(_precls["default"], "__e-task-node-title ").concat(isCancel ? "".concat(_precls["default"], "__e-project-node-gray") : "")),
     onClick: handleShowTaskDetail
   }, /*#__PURE__*/_react["default"].createElement(TooltipText, {
     text: (0, _helpers.escapeHtml)(title),
@@ -376,7 +376,7 @@ function ETaskNode(props) {
     avatar: user === null || user === void 0 ? void 0 : user.avatar,
     extraCls: (isCancel || isGray) && "".concat(_precls["default"], "__e-project-node-gray")
   })), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames["default"])("".concat(_precls["default"], "__e-task-node-actions-date"), _defineProperty({}, "".concat(_precls["default"], "__e-task-node-actions-date--canedit"), dataInfo.status !== 2 && hasEditAuth)),
+    className: (0, _classnames["default"])("".concat(_precls["default"], "__e-task-node-actions-date")),
     onClick: updateDateHandler
   }, /*#__PURE__*/_react["default"].createElement(_statusTime["default"], {
     deadLine: dataInfo.deadLine,
@@ -391,11 +391,11 @@ function ETaskNode(props) {
     percent: progress,
     linear: true,
     linearId: data.taskId,
-    linearStartColor: (0, _getProcessColor["default"])(dataInfo.riskLevel, 'linearStartColor', dataInfo.status),
-    linearEndColor: (0, _getProcessColor["default"])(dataInfo.riskLevel, 'linearEndColor', dataInfo.status),
-    backgroundColor: (0, _getProcessColor["default"])(dataInfo.riskLevel, 'backgroundColor', dataInfo.status)
+    linearStartColor: (0, _getProcessColor["default"])(dataInfo.riskLevel, "linearStartColor", dataInfo.status),
+    linearEndColor: (0, _getProcessColor["default"])(dataInfo.riskLevel, "linearEndColor", dataInfo.status),
+    backgroundColor: (0, _getProcessColor["default"])(dataInfo.riskLevel, "backgroundColor", dataInfo.status)
   })), okrInfo.status === 1 && hasRelation && (hasRelativeAuth || isParticipant) ? /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
-    overlay: (0, _getLocale.getLocale)('OKR_MyO_Text_Cancel'),
+    overlay: (0, _getLocale.getLocale)("OKR_MyO_Text_Cancel"),
     placement: "top"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])("".concat(_precls["default"], "__e-task-node-actions-connect")),
@@ -409,17 +409,17 @@ function ETaskNode(props) {
     type: "warning"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     type: "title"
-  }, (0, _getLocale.getLocale)('OKR_MyO_Text_Cancelass')), /*#__PURE__*/_react["default"].createElement("span", {
+  }, (0, _getLocale.getLocale)("OKR_MyO_Text_Cancelass")), /*#__PURE__*/_react["default"].createElement("span", {
     type: "content"
-  }, (0, _getLocale.getLocale)('OKR_MyO_Text_TtasknotO')), /*#__PURE__*/_react["default"].createElement(_dialogConfirm.CancelButton, {
+  }, (0, _getLocale.getLocale)("OKR_MyO_Text_TtasknotO")), /*#__PURE__*/_react["default"].createElement(_dialogConfirm.CancelButton, {
     type: "button",
     onClick: function onClick() {
       return setUnConnectVisible(false);
     }
-  }, (0, _getLocale.getLocale)('Mod_Cancel')), /*#__PURE__*/_react["default"].createElement(_dialogConfirm.SureButton, {
+  }, (0, _getLocale.getLocale)("Mod_Cancel")), /*#__PURE__*/_react["default"].createElement(_dialogConfirm.SureButton, {
     type: "button",
     onClick: onSureUnConnectHandler
-  }, (0, _getLocale.getLocale)('OKR_MyO_Butt_Determine'))));
+  }, (0, _getLocale.getLocale)("OKR_MyO_Butt_Determine"))));
 }
 
 var _default = ETaskNode;

package/lib/components/task-tree/task-item-node/index.css

@@ -72,8 +72,8 @@
 
 .titaui-task-tree__e-task-node-actions-user {
   display: inline-block;
-  width: 92px;
-  margin-left: 24px;
+  width: 64px;
+  margin-left: 16px;
 }
 
 .titaui-task-tree__e-task-node-actions-date {
@@ -83,32 +83,27 @@
   line-height: 18px;
   display: inline-flex;
   align-items: center;
+  justify-content: flex-end;
   box-sizing: border-box;
-  width: 82px;
-  height: 32px;
+  width: 78px;
+  height: 26px;
   padding: 4px;
   text-align: left;
-  line-height: 32px;
-  margin-left: 28px;
+  line-height: 26px;
 }
 
 .titaui-task-tree__e-task-node-actions-date > span {
   vertical-align: text-bottom;
 }
 
-.titaui-task-tree__e-task-node-actions-date--canedit:hover {
-  border-radius: 8px;
-  border: 1px solid #dfe3ea;
-  padding: 3px;
-}
-
 .titaui-task-tree__e-task-node-actions-progress {
   position: relative;
   top: 3px;
   color: #89919f;
   cursor: auto;
-  width: 68px;
-  margin-left: 20px;
+  width: 64px;
+  margin-left: 16px;
+  margin-right: 4px;
 }
 
 .titaui-task-tree__e-task-node-actions-progress .tooltip-text-wrapper {
@@ -228,8 +223,8 @@
 
 .titaui-task-tree__e-project-node-actions-user {
   display: inline-block;
-  width: 92px;
-  margin-left: 24px;
+  width: 64px;
+  margin-left: 16px;
 }
 
 .titaui-task-tree__e-project-node-actions-date {
@@ -239,32 +234,27 @@
   line-height: 18px;
   display: inline-flex;
   align-items: center;
+  justify-content: flex-end;
   box-sizing: border-box;
-  width: 82px;
-  height: 32px;
+  width: 78px;
+  height: 26px;
   padding: 4px;
   text-align: left;
-  line-height: 32px;
-  margin-left: 28px;
+  line-height: 26px;
 }
 
 .titaui-task-tree__e-project-node-actions-date > span {
   vertical-align: text-bottom;
 }
 
-.titaui-task-tree__e-project-node-actions-date--canedit:hover {
-  border-radius: 8px;
-  border: 1px solid #dfe3ea;
-  padding: 3px;
-}
-
 .titaui-task-tree__e-project-node-actions-progress {
   position: relative;
   top: 3px;
   color: #89919f;
   cursor: auto;
-  width: 68px;
-  margin-left: 20px;
+  width: 64px;
+  margin-left: 16px;
+  margin-right: 4px;
 }
 
 .titaui-task-tree__e-project-node-actions-progress .tooltip-text-wrapper {

package/lib/components/task-tree/task-tree.css

@@ -12,5 +12,5 @@
 }
 
 .titaui-task-tree .rc-tree-treenode-switcher-close:hover {
-  background: #f0f4fa;
+  background: #f7f8fa;
 }

package/lib/components/time-picker/time-picker.js

@@ -79,42 +79,49 @@ var TimePicker = function TimePicker(props) {
   var mInputRef = (0, _react.useRef)();
   var minuteRef = (0, _react.useRef)((0, _moment["default"])(value || '00:00', timeFormat).format('mm'));
   var triggerRef = (0, _react.useRef)();
+  var timerRef = (0, _react.useRef)();
   var hours = (0, _utils.getHours)(hourStep);
   var minutes = (0, _utils.getMinutes)(minuteStep);
 
   var onTimeChange = function onTimeChange() {
-    return onChange === null || onChange === void 0 ? void 0 : onChange("".concat(hourRef.current, ":").concat(minuteRef.current));
+    onChange === null || onChange === void 0 ? void 0 : onChange("".concat(hourRef.current, ":").concat(minuteRef.current));
+  }; // const onInputClick = (type) => {
+  //   clearTimeout(timerRef.current)
+  //   timerRef.current = setTimeout(() => {
+  //     if (type === 'hour') {
+  //       hInputRef.current?.focus()
+  //     } else {
+  //       mInputRef.current?.focus()
+  //     }
+  //     setTimeSettingType(() => type)
+  //   }, 0)
+  // }
+
+
+  var showSelectorPop = function showSelectorPop() {
+    return setVisible(true);
   };
 
-  var onInputClickHandler = function onInputClickHandler(type) {
-    return setTimeSettingType(function () {
+  var onFocusHandler = function onFocusHandler(type) {
+    setTimeSettingType(function () {
       return type;
     });
   };
 
-  var onKeyDownHandler = function onKeyDownHandler(e) {
-    var keyCode = e.keyCode;
-
-    if ([_utils.KEYCODE.directionLeft, _utils.KEYCODE.directionRight].includes(keyCode)) {
-      setTimeSettingType(_utils.TargetMapByKeyCode[keyCode]);
-    }
-
-    if ([_utils.KEYCODE.directionUp, _utils.KEYCODE.directionDown].includes(keyCode)) {
-      switch (timeSetingtType) {
-        case 'hour':
-          hourRef.current = setTimeOnKeyboardDirectionChange(keyCode, 'hour', hourRef.current);
-          break;
-
-        case 'minute':
-          minuteRef.current = setTimeOnKeyboardDirectionChange(keyCode, 'minute', minuteRef.current);
-          break;
-
-        default:
-          break;
-      }
-
-      onTimeChange();
-    }
+  var onHourInputBlur = function onHourInputBlur() {
+    // setHour((prevHour) => {
+    // const prevHour = hourRef.current;
+    // let nextHour = (Array(2).join("0") + prevHour).slice(-2);
+    // if (Number(prevHour) > Number(hours[hours.length - 1])) {
+    //   nextHour = `0${prevHour.slice(0, 1)}`;
+    // }
+    // hourRef.current = nextHour;
+    // });
+    // if (timeSetType === "hour" && hInputRef.current) {
+    //   hInputRef.current.focus();
+    // }
+    // onTimeChange();
+    setTimeSettingType('');
   };
 
   var onHourInputChange = function onHourInputChange(e) {
@@ -132,6 +139,32 @@ var TimePicker = function TimePicker(props) {
     }
   };
 
+  var onMinuteInputBlur = function onMinuteInputBlur() {
+    // setMinute((prevMinute) => {
+    // let nextMinute = minuteRef.current;
+    // minutes.forEach((m, i) => {
+    //   const mNum = Number(m);
+    //   const nextMinuteNum = Number(nextMinute);
+    //   if (mNum === nextMinuteNum) {
+    //     nextMinute = m;
+    //   } else if (
+    //     mNum < nextMinuteNum
+    //     && Number(minutes[i + 1]) > nextMinuteNum
+    //   ) {
+    //     nextMinute = m;
+    //   } else if (nextMinuteNum > Number(minutes[minutes.length - 1])) {
+    //     nextMinute = "00";
+    //   }
+    // });
+    // minuteRef.current = nextMinute;
+    // });
+    // if (timeSetType === "minute" && mInputRef.current) {
+    //   mInputRef.current.focus();
+    // }
+    // onTimeChange();
+    setTimeSettingType('');
+  };
+
   var onMinuteInputChange = function onMinuteInputChange(e) {
     var v = e.target.value;
 
@@ -192,10 +225,39 @@ var TimePicker = function TimePicker(props) {
     return currTime;
   };
 
-  var showSelectorPop = function showSelectorPop() {
-    return setVisible(true);
+  var handleKeyDown = function handleKeyDown(e) {
+    var keyCode = e.keyCode;
+
+    if ([_utils.KEYCODE.directionLeft, _utils.KEYCODE.directionRight].includes(keyCode)) {
+      setTimeSettingType(_utils.TargetMapByKeyCode[keyCode]);
+    }
+
+    if ([_utils.KEYCODE.directionUp, _utils.KEYCODE.directionDown].includes(keyCode)) {
+      switch (timeSetingtType) {
+        case 'hour':
+          hourRef.current = setTimeOnKeyboardDirectionChange(keyCode, 'hour', hourRef.current);
+          break;
+
+        case 'minute':
+          minuteRef.current = setTimeOnKeyboardDirectionChange(keyCode, 'minute', minuteRef.current);
+          break;
+
+        default:
+          break;
+      }
+
+      onTimeChange();
+    }
   };
 
+  (0, _react.useEffect)(function () {
+    document.removeEventListener('keydown', handleKeyDown);
+    enableKeyBoard && timeSetingtType && document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      clearTimeout(timerRef.current);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [timeSetingtType]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _utils.TimePickerClass
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -206,30 +268,36 @@ var TimePicker = function TimePicker(props) {
     onClick: function onClick() {
       return !enableKeyBoard && showSelectorPop();
     }
-  }, /*#__PURE__*/_react["default"].createElement(_timerPickerInput["default"], _extends({
+  }, /*#__PURE__*/_react["default"].createElement(_timerPickerInput["default"], {
     className: (0, _classnames["default"])("".concat(_utils.TimePickerClass, "-input"), {
       active: enableKeyBoard && timeSetingtType === 'hour'
     }),
     disabled: disabled,
     maxLength: 2,
+    onBlur: onHourInputBlur,
     onChange: onHourInputChange,
     onClick: function onClick() {
-      return onInputClickHandler('hour');
+      return !enableKeyBoard && showSelectorPop();
+    },
+    onFocus: function onFocus() {
+      return onFocusHandler('hour');
     },
-    onKeyDown: onKeyDownHandler,
     ref: hInputRef,
     value: hourRef.current
-  }, restProps)), /*#__PURE__*/_react["default"].createElement("span", null, ":"), /*#__PURE__*/_react["default"].createElement(_timerPickerInput["default"], {
+  }), /*#__PURE__*/_react["default"].createElement("span", null, ":"), /*#__PURE__*/_react["default"].createElement(_timerPickerInput["default"], {
     className: (0, _classnames["default"])("".concat(_utils.TimePickerClass, "-input"), {
       active: enableKeyBoard && timeSetingtType === 'minute'
     }),
     disabled: disabled,
     maxLength: 2,
+    onBlur: onMinuteInputBlur,
     onChange: onMinuteInputChange,
     onClick: function onClick() {
-      return onInputClickHandler('minute');
+      return !enableKeyBoard && showSelectorPop();
+    },
+    onFocus: function onFocus() {
+      return onFocusHandler('minute');
     },
-    onKeyDown: onKeyDownHandler,
     ref: mInputRef,
     value: minuteRef.current
   })), !disabled && /*#__PURE__*/_react["default"].createElement(_timePickerSelector["default"], _extends({

package/lib/components/time-picker/timer-picker-input.js

@@ -57,6 +57,11 @@ var TimePickerInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
 
+  var onFocusHandler = function onFocusHandler(e) {
+    setSelectionRange(0);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  };
+
   var onChangeHandler = function onChangeHandler(e) {
     return onChange === null || onChange === void 0 ? void 0 : onChange(e);
   };
@@ -81,6 +86,7 @@ var TimePickerInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     maxLength: maxLength,
     onClick: onClickHandler,
     onChange: onChangeHandler,
+    onFocus: onFocusHandler,
     ref: inputRef,
     type: type,
     value: value