feat: Support disabledTime on TimePicker (#332)

* feat: disabledTime can handle time picker

* test: add disabledTime test

* chore: warning for legacy

Author: zombieJ

README.md

@@ -103,7 +103,7 @@ render(<Picker />, mountNode);
 | renderExtraFooter | (mode) => React.Node |  | extra footer |
 | onSelect | Function(date: moment) |  | a callback function, can be executed when the selected time |
 | onPanelChange | Function(value: moment, mode) |  | callback when picker panel mode is changed |
-| onMouseDown | (event:React.MouseEvent\<HTMLInputElement>) => void |  | callback when executed onMouseDown evnent |
+| onMouseDown | (event:React.MouseEvent\<HTMLInputElement>) => void |  | callback when executed onMouseDown event |
 | direction | String: ltr or rtl |  | Layout direction of picker component, it supports RTL direction too. |
 
 ### RangePicker

assets/index.less

@@ -30,10 +30,10 @@
     border: 1px solid blue;
   }
   &-panel {
-    border: 1px solid #666;
-    background: @background-color;
     display: inline-block;
     vertical-align: top;
+    background: @background-color;
+    border: 1px solid #666;
 
     &-focused {
       border-color: blue;
@@ -73,8 +73,8 @@
       text-align: center;
 
       > button {
-        border: 0;
         padding: 0;
+        border: 0;
       }
     }
   }
@@ -88,19 +88,19 @@
     }
 
     &-inner {
-      font-size: 12px;
-      width: 100%;
-      height: 20px;
-      line-height: 20px;
       display: inline-block;
       box-sizing: border-box;
-      border: 0;
-      padding: 0;
+      width: 100%;
+      height: 20px;
       margin: 0;
+      padding: 0;
+      font-size: 12px;
+      line-height: 20px;
       background: transparent;
-      cursor: pointer;
-      outline: none;
+      border: 0;
       border: none;
+      outline: none;
+      cursor: pointer;
       transition: background 0.3s, border 0.3s;
 
       &:hover {
@@ -120,15 +120,15 @@
     &-range-hover {
       position: relative;
       &::after {
-        content: '';
         position: absolute;
         top: 3px;
+        right: 0;
         bottom: 0;
         left: 0;
-        right: 0;
         border: 1px solid green;
-        border-left: 0;
         border-right: 0;
+        border-left: 0;
+        content: '';
         pointer-events: none;
       }
     }
@@ -200,9 +200,9 @@
     }
 
     .@{prefix-cls}-cell-week {
-      font-size: 12px;
       color: #999;
       font-weight: bold;
+      font-size: 12px;
     }
 
     .@{prefix-cls}-cell:hover > .@{prefix-cls}-cell-inner,
@@ -229,15 +229,15 @@
 
     &-column {
       flex: none;
-      text-align: left;
-      list-style: none;
+      width: 50px;
       margin: 0;
       padding: 0 0 180px 0;
-      overflow-y: hidden;
       overflow-x: hidden;
-      width: 50px;
-      transition: background 0.3s;
+      overflow-y: hidden;
       font-size: 12px;
+      text-align: left;
+      list-style: none;
+      transition: background 0.3s;
 
       &-active {
         background: rgba(0, 0, 255, 0.1);
@@ -248,18 +248,24 @@
       }
 
       > li {
-        padding: 0;
         margin: 0;
+        padding: 0;
         cursor: pointer;
 
+        &.@{prefix-cls}-time-panel-cell {
+          &-disabled {
+            opacity: 0.5;
+          }
+        }
+
         .@{prefix-cls}-time-panel-cell-inner {
-          color: #333;
-          padding: 0 0 0 12px;
-          margin: 0;
-          height: 20px;
-          line-height: 20px;
           display: block;
           width: 100%;
+          height: 20px;
+          margin: 0;
+          padding: 0 0 0 12px;
+          color: #333;
+          line-height: 20px;
           text-align: left;
 
           .@{prefix-cls}-panel-rtl & {
@@ -321,8 +327,8 @@
 
   &-clear {
     position: absolute;
-    right: 4px;
     top: 0;
+    right: 4px;
     cursor: pointer;
 
     .@{prefix-cls}-rtl & {
@@ -368,28 +374,28 @@
 
     .@{prefix-cls}-range-arrow {
       position: absolute;
+      left: @arrow-size;
+      z-index: 1;
       width: @arrow-size;
       height: @arrow-size;
-      z-index: 1;
-      left: @arrow-size;
       margin-left: 10px;
       transition: all 0.3s;
 
       .@{prefix-cls}-dropdown-rtl& {
         right: @arrow-size;
         left: auto;
-        margin-left: 0;
         margin-right: 10px;
+        margin-left: 0;
       }
 
       &::before,
       &::after {
-        content: '';
         position: absolute;
-        box-sizing: border-box;
         top: 50%;
         left: 50%;
+        box-sizing: border-box;
         transform: translate(-50%, -50%);
+        content: '';
 
         .@{prefix-cls}-dropdown-rtl& {
           right: 50%;
@@ -408,8 +414,7 @@
         width: @arrow-size - 2px;
         height: @arrow-size - 2px;
         border: (@arrow-size - 2px) / 2 solid blue;
-        border-color: @background-color @background-color transparent
-          transparent;
+        border-color: @background-color @background-color transparent transparent;
       }
     }
   }
@@ -418,20 +423,20 @@
   // =                     Range Picker                     =
   // ========================================================
   &-range {
-    display: inline-flex;
     position: relative;
+    display: inline-flex;
 
     &-wrapper {
       display: flex;
     }
 
     .@{prefix-cls}-active-bar {
-      background: green;
       bottom: 0;
       height: 3px;
-      pointer-events: none;
-      transition: all 0.3s;
+      background: green;
       opacity: 0;
+      transition: all 0.3s;
+      pointer-events: none;
     }
 
     &.@{prefix-cls}-focused {

docs/demo/time.md

@@ -0,0 +1,2 @@
+## time
+<code src="../examples/time.tsx">

docs/examples/time.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import moment from 'moment';
+import Picker, { RangePicker } from '../../src';
+import momentGenerateConfig from '../../src/generate/moment';
+import zhCN from '../../src/locale/zh_CN';
+import '../../assets/index.less';
+
+const defaultValue = moment('2019-11-28 01:02:03');
+
+export default () => {
+  return (
+    <div>
+      <h3>DatePicker</h3>
+      <Picker
+        defaultValue={defaultValue}
+        picker="date"
+        showTime
+        disabledTime={() => ({
+          disabledHours: () => [1, 2, 3, 4, 5, 6],
+        })}
+        locale={zhCN}
+        generateConfig={momentGenerateConfig}
+      />
+
+      <h3>TimePicker</h3>
+      <Picker
+        defaultValue={defaultValue}
+        picker="time"
+        locale={zhCN}
+        disabledTime={(now) => ({
+          disabledHours: () => [now.hours()],
+        })}
+        generateConfig={momentGenerateConfig}
+      />
+
+      <h3>RangePicker</h3>
+      <RangePicker
+        defaultValue={[defaultValue, defaultValue]}
+        picker="time"
+        locale={zhCN}
+        generateConfig={momentGenerateConfig}
+        disabledTime={(now, type) => ({
+          disabledHours: () => (type === 'start' ? [now.hours()] : [now.hours() - 5]),
+        })}
+      />
+    </div>
+  );
+};

src/Picker.tsx

@@ -33,6 +33,7 @@ import usePickerInput from './hooks/usePickerInput';
 import useTextValueMapping from './hooks/useTextValueMapping';
 import useValueTexts from './hooks/useValueTexts';
 import useHoverValue from './hooks/useHoverValue';
+import { legacyPropsWarning } from './utils/warnUtil';
 
 export type PickerRefConfig = {
   focus: () => void;
@@ -180,6 +181,11 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
 
   const needConfirmButton: boolean = (picker === 'date' && !!showTime) || picker === 'time';
 
+  // ============================ Warning ============================
+  if (process.env.NODE_ENV !== 'production') {
+    legacyPropsWarning(props);
+  }
+
   // ============================= State =============================
   const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours));
 

src/RangePicker.tsx

@@ -33,6 +33,7 @@ import getRanges from './utils/getRanges';
 import useRangeViewDates from './hooks/useRangeViewDates';
 import type { DateRender } from './panels/DatePanel/DateBody';
 import useHoverValue from './hooks/useHoverValue';
+import { legacyPropsWarning } from './utils/warnUtil';
 
 function reorderValues<DateType>(
   values: RangeValue<DateType>,
@@ -233,6 +234,11 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   const startInputRef = useRef<HTMLInputElement>(null);
   const endInputRef = useRef<HTMLInputElement>(null);
 
+  // ============================ Warning ============================
+  if (process.env.NODE_ENV !== 'production') {
+    legacyPropsWarning(props);
+  }
+
   // ============================= Misc ==============================
   const formatList = toArray(getDefaultFormat<DateType>(format, picker, showTime, use12Hours));