refactor: New Picker interactive

assets/index.less

@@ -4,6 +4,10 @@
 
 @input-placeholder-color: hsv(0, 0, 75%);
 
+@time-panel-padding-total: 180px;
+// @time-panel-padding-top: 90px;
+@time-panel-padding-top: 0;
+
 .placeholder(@color: @input-placeholder-color) {
   // Firefox
   &::-moz-placeholder {
@@ -20,6 +24,7 @@
 }
 
 .@{prefix-cls} {
+  position: relative;
   display: inline-flex;
 
   &-rtl {
@@ -29,6 +34,9 @@
   &-focused {
     border: 1px solid blue;
   }
+  &-invalid {
+    box-shadow: 0 0 2px red;
+  }
   &-panel {
     display: inline-block;
     vertical-align: top;
@@ -115,6 +123,11 @@
     &-in-range > &-inner {
       background: fade(blue, 5%);
     }
+
+    &-hover > &-inner {
+      background: orange;
+    }
+
     &-range-hover-start,
     &-range-hover-end,
     &-range-hover {
@@ -249,15 +262,39 @@
     width: auto;
 
     .@{prefix-cls}-content {
+      position: relative;
       display: flex;
       max-height: 200px;
+
+      // &::after {
+      //   position: absolute;
+      //   top: @time-panel-padding-top;
+      //   right: -5px;
+      //   left: -5px;
+      //   height: 20px;
+      //   background: rgba(255, 0, 0, 0.05);
+      //   content: '';
+      //   pointer-events: none;
+      // }
+    }
+
+    &-column-holder {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    }
+
+    &-column-title {
+      font-size: 14px;
+      line-height: 20px;
     }
 
     &-column {
-      flex: none;
+      flex: auto;
       width: 50px;
       margin: 0;
-      padding: 0 0 180px 0;
+      // padding: 0 0 180px 0;
+      padding: @time-panel-padding-top 0 (@time-panel-padding-total - @time-panel-padding-top);
       overflow-x: hidden;
       overflow-y: hidden;
       font-size: 12px;
@@ -274,6 +311,7 @@
       }
 
       > li {
+        width: 50px;
         margin: 0;
         padding: 0;
         cursor: pointer;
@@ -282,17 +320,21 @@
           &-disabled {
             opacity: 0.5;
           }
+
+          &-selected {
+            background: rgba(0, 0, 255, 0.5);
+          }
         }
 
         .@{prefix-cls}-time-panel-cell-inner {
           display: block;
           width: 100%;
           height: 20px;
           margin: 0;
-          padding: 0 0 0 12px;
+          // padding: 0 0 0 12px;
           color: #333;
           line-height: 20px;
-          text-align: left;
+          text-align: center;
 
           .@{prefix-cls}-panel-rtl & {
             padding: 0 12px 0 0;
@@ -339,6 +381,12 @@
       text-align: right;
     }
 
+    &-active {
+      > input {
+        background: rgba(0, 0, 255, 0.05);
+      }
+    }
+
     > input {
       width: 100%;
       .placeholder();
@@ -371,6 +419,7 @@
   &-dropdown {
     position: absolute;
     box-shadow: 0 0 1px red;
+    pointer-events: none;
 
     &-range {
       padding: 10px 0;
@@ -393,7 +442,7 @@
     &-placement-bottomLeft,
     &-placement-bottomright {
       .@{prefix-cls}-range-arrow {
-        top: @arrow-size / 2 + 1px;
+        top: (@arrow-size / 2 + 1px);
         transform: rotate(-45deg);
       }
     }
@@ -433,7 +482,7 @@
       &::before {
         width: @arrow-size;
         height: @arrow-size;
-        border: @arrow-size / 2 solid blue;
+        border: (@arrow-size / 2) solid blue;
         border-color: blue blue transparent transparent;
       }
       &::after {
@@ -476,11 +525,41 @@
     display: inline-block;
     vertical-align: top;
     transition: margin 0.3s;
+    pointer-events: all;
   }
 
   &-panel-layout {
     display: flex;
     flex-wrap: nowrap;
     align-items: stretch;
   }
+
+  // ========================================================
+  // =                       Overflow                       =
+  // ========================================================
+  &-selector {
+    width: 100%;
+  }
+
+  &-selection-overflow {
+    display: flex;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid green;
+
+    &-item {
+      flex: none;
+      max-width: 100%;
+    }
+  }
+
+  &-selection-item {
+    border: 1px solid blue;
+  }
+
+  &-multiple-input {
+    width: 10px;
+    opacity: 0.1;
+  }
 }

docs/demo/debug.md

@@ -0,0 +1,8 @@
+---
+title: debug
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/debug.tsx"></code>

docs/examples/basic.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
 import type { Moment } from 'moment';
 import moment from 'moment';
-import Picker from '../../src/Picker';
+import React from 'react';
+import '../../assets/index.less';
+import { Picker, type PickerRef } from '../../src';
 import momentGenerateConfig from '../../src/generate/moment';
-import zhCN from '../../src/locale/zh_CN';
 import enUS from '../../src/locale/en_US';
-import '../../assets/index.less';
+import zhCN from '../../src/locale/zh_CN';
 
 // const defaultValue = moment('2019-09-03 05:02:03');
 const defaultValue = moment('2019-11-28 01:02:03');
 
 export default () => {
   const [value, setValue] = React.useState<Moment | null>(defaultValue);
-  const weekRef = React.useRef<Picker<Moment>>(null);
+  const weekRef = React.useRef<PickerRef>(null);
 
   const onSelect = (newValue: Moment) => {
     console.log('Select:', newValue);
@@ -36,7 +36,7 @@ export default () => {
       {
         label: 'Now',
         value: () => moment(),
-      }
+      },
     ],
   };
 

docs/examples/calendar.tsx

@@ -1,10 +1,9 @@
+import type { Moment } from 'moment';
 import React from 'react';
-import { Moment } from 'moment';
-import Picker from '../../src/Picker';
-import PickerPanel from '../../src/PickerPanel';
+import '../../assets/index.less';
+import { Picker, PickerPanel } from '../../src';
 import momentGenerateConfig from '../../src/generate/moment';
 import zhCN from '../../src/locale/zh_CN';
-import '../../assets/index.less';
 import './calendar.less';
 
 function dateRender(date: Moment, today: Moment) {

docs/examples/cellRender.tsx

@@ -2,10 +2,9 @@ import type { Moment } from 'moment';
 import moment from 'moment';
 import React from 'react';
 import '../../assets/index.less';
+import { Picker, RangePicker } from '../../src';
 import momentGenerateConfig from '../../src/generate/moment';
 import zhCN from '../../src/locale/zh_CN';
-import Picker from '../../src/Picker';
-import RangePicker from '../../src/RangePicker';
 
 const defaultValue = moment('2019-11-28 01:02:03');
 
@@ -23,7 +22,6 @@ export default () => {
     defaultEndValue,
   ]);
 
-
   const onSelect = (newValue: Moment) => {
     console.log('Select:', newValue);
   };
@@ -46,7 +44,10 @@ export default () => {
     ],
   };
 
-  const onRangeChange = (newValue: [Moment | null, Moment | null] | null, formatStrings?: string[]) => {
+  const onRangeChange = (
+    newValue: [Moment | null, Moment | null] | null,
+    formatStrings?: string[],
+  ) => {
     console.log('Change:', newValue, formatStrings);
     setRangeValue(newValue);
   };
@@ -66,7 +67,7 @@ export default () => {
           <Picker<Moment>
             {...sharedProps}
             locale={zhCN}
-            cellRender={(current, info) =>
+            cellRender={(current: Moment, info) =>
               React.cloneElement(
                 info.originNode,
                 {
@@ -79,7 +80,7 @@ export default () => {
           <Picker<Moment>
             {...sharedProps}
             locale={zhCN}
-            cellRender={(current, info) =>
+            cellRender={(current: Moment, info) =>
               React.cloneElement(
                 info.originNode,
                 {
@@ -93,7 +94,7 @@ export default () => {
             {...sharedProps}
             locale={zhCN}
             picker="week"
-            cellRender={(current, info) =>
+            cellRender={(current: Moment, info) =>
               React.cloneElement(
                 info.originNode,
                 {
@@ -107,7 +108,7 @@ export default () => {
             {...sharedProps}
             locale={zhCN}
             picker="year"
-            cellRender={(current, info) =>
+            cellRender={(current: Moment, info) =>
               React.cloneElement(
                 info.originNode,
                 {
@@ -121,7 +122,7 @@ export default () => {
             {...sharedProps}
             locale={zhCN}
             picker="month"
-            cellRender={(current, info) =>
+            cellRender={(current: Moment, info) =>
               React.cloneElement(
                 info.originNode,
                 {
@@ -135,7 +136,7 @@ export default () => {
             {...sharedProps}
             locale={zhCN}
             picker="quarter"
-            cellRender={(current, info) =>
+            cellRender={(current: Moment, info) =>
               React.cloneElement(
                 info.originNode,
                 {
@@ -162,17 +163,23 @@ export default () => {
         </div>
         <div style={{ margin: '0 8px' }}>
           <h3>Range</h3>
-          <h4>RangeValue: {rangeValue ? `${formatDate(rangeValue[0])} ~ ${formatDate(rangeValue[1])}` : 'null'}</h4>
+          <h4>
+            RangeValue:{' '}
+            {rangeValue ? `${formatDate(rangeValue[0])} ~ ${formatDate(rangeValue[1])}` : 'null'}
+          </h4>
           <RangePicker<Moment>
             {...rangeSharedProps}
             locale={zhCN}
             allowClear
             showTime
             style={{ width: 580 }}
-            cellRender={(current, info) => {
+            cellRender={(current: Moment, info) => {
               return (
-                <div title={info.type} style={{ background: info.type === 'time' ? 'green' : 'yellow' }}>
-                  {info.type === "time" ? current : current.get('date')}
+                <div
+                  title={info.type}
+                  style={{ background: info.type === 'time' ? 'green' : 'yellow' }}
+                >
+                  {info.type === 'time' ? current : current.get('date')}
                 </div>
               );
             }}