fix: hover value logic when change panel type

react-component · Dec 21, 2020 · 0e4f47f · 0e4f47f
1 parent e654896
commit 0e4f47f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/examples/basic.tsx b/examples/basic.tsx
@@ -13,6 +13,11 @@ export default () => {
   const [value, setValue] = React.useState<Moment | null>(defaultValue);
   const weekRef = React.useRef<Picker<Moment>>(null);
 
+  const disabledDate = (current) => {
+    // Can not select days before today and today
+    return current && current <= moment().endOf('day');
+  }
+
   const onSelect = (newValue: Moment) => {
     console.log('Select:', newValue);
   };
@@ -36,7 +41,7 @@ export default () => {
       <div style={{ display: 'flex', flexWrap: 'wrap' }}>
         <div style={{ margin: '0 8px' }}>
           <h3>Basic</h3>
-          <Picker<Moment> {...sharedProps} locale={zhCN} />
+          <Picker<Moment> {...sharedProps} picker="date" value={undefined} disabledDate={disabledDate} locale={zhCN} />
           <Picker<Moment> {...sharedProps} locale={enUS} />
         </div>
         <div style={{ margin: '0 8px' }}>
@@ -103,7 +108,7 @@ export default () => {
         </div>
         <div style={{ margin: '0 8px' }}>
           <h3>Week</h3>
-          <Picker<Moment> generateConfig={momentGenerateConfig} locale={enUS} picker="week" />
+          <Picker<Moment> disabledDate={disabledDate} generateConfig={momentGenerateConfig} locale={enUS} picker="week" />
         </div>
         <div style={{ margin: '0 8px' }}>
           <h3>Quarter</h3>

diff --git a/src/Picker.tsx b/src/Picker.tsx
@@ -357,6 +357,12 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     };
   }
 
+  const [hoverValue, onEnter, onLeave] = useHoverValue(text, {
+    formatList,
+    generateConfig,
+    locale,
+  });
+
   // ============================= Panel =============================
   const panelProps = {
     // Remove `picker` & `format` here since TimePicker is little different with other panel
@@ -383,6 +389,11 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
         setSelectedValue(date);
       }}
       direction={direction}
+      onPanelChange={(viewDate, mode) => {
+        const { onPanelChange } = panelProps
+        onLeave(true);
+        onPanelChange?.(viewDate, mode);
+      }}
     />
   );
 
@@ -445,12 +456,6 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   };
   const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
 
-  const [hoverValue, onEnter, onLeave] = useHoverValue(text, {
-    formatList,
-    generateConfig,
-    locale,
-  });
-
   return (
     <PanelContext.Provider
       value={{