fix init logic

react-component · Nov 22, 2019 · 71416df · 71416df · vercel · Nov 22, 2019
1 parent 46fadef
commit 71416df
Show file tree

Hide file tree

Showing 14 changed files with 169 additions and 61 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -10,5 +10,6 @@ module.exports = {
     'react/sort-comp': 0,
     '@typescript-eslint/no-explicit-any': 0,
     'default-case': 0,
+    'jsx-a11y/no-autofocus': 0,
   },
 };
diff --git a/examples/basic.tsx b/examples/basic.tsx
@@ -173,6 +173,10 @@ export default () => {
           <h3>Basic</h3>
           <Picker<Moment> {...sharedProps} locale={zhCN} />
         </div>
+        <div style={{ margin: '0 8px' }}>
+          <h3>Datetime</h3>
+          <Picker<Moment> {...sharedProps} locale={zhCN} showTime />
+        </div>
       </div>
     </div>
   );

diff --git a/src/PanelContext.tsx b/src/PanelContext.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export type ContextOperationRefProps = {
-  onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => boolean;
 };
 
 export interface PanelContextProps {

diff --git a/src/Picker.tsx b/src/Picker.tsx
@@ -8,11 +8,14 @@ import { Locale } from './interface';
 import { isEqual } from './utils/dateUtil';
 import { toArray } from './utils/miscUtil';
 import PanelContext, { ContextOperationRefProps } from './PanelContext';
+import { SharedTimeProps } from './panels/TimePanel';
 
 export interface PickerProps<DateType> {
   prefixCls?: string;
   generateConfig: GenerateConfig<DateType>;
   locale: Locale;
+  autoFocus?: boolean;
+  showTime?: boolean | SharedTimeProps;
   value?: DateType;
   open?: boolean;
   format?: string | string[];
@@ -25,7 +28,9 @@ function Picker<DateType>(props: PickerProps<DateType>) {
     prefixCls = 'rc-picker',
     generateConfig,
     locale,
-    format = 'YYYY-MM-DD',
+    autoFocus,
+    showTime,
+    format = showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD',
     value,
     open,
     onChange,
@@ -121,6 +126,19 @@ function Picker<DateType>(props: PickerProps<DateType>) {
     }
   };
 
+  const forwardKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+    if (
+      !typing &&
+      mergedOpen &&
+      operationRef.current &&
+      operationRef.current.onKeyDown
+    ) {
+      // Let popup panel handle keyboard
+      return operationRef.current.onKeyDown(e);
+    }
+    return false;
+  };
+
   const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = e => {
     switch (e.which) {
       case KeyCode.ENTER: {
@@ -129,37 +147,38 @@ function Picker<DateType>(props: PickerProps<DateType>) {
         } else {
           triggerChange(selectedValue);
           triggerOpen(false);
+          setTyping(true);
         }
-        break;
+        return;
       }
 
       case KeyCode.TAB: {
-        if (typing && mergedOpen) {
+        if (typing && mergedOpen && !e.shiftKey) {
           setTyping(false);
           e.preventDefault();
-        } else if (!typing && mergedOpen && e.shiftKey) {
-          setTyping(true);
-          e.preventDefault();
+        } else if (!typing && mergedOpen) {
+          if (!forwardKeyDown(e) && e.shiftKey) {
+            setTyping(true);
+            e.preventDefault();
+          }
         }
-        break;
+        return;
       }
 
       case KeyCode.ESC: {
         triggerChange(mergedValue);
         setSelectedValue(mergedValue);
         triggerOpen(false);
+        setTyping(true);
         return;
       }
     }
 
-    // Let popup panel handle keyboard
-    if (
-      !typing &&
-      mergedOpen &&
-      operationRef.current &&
-      operationRef.current.onKeyDown
-    ) {
-      operationRef.current.onKeyDown(e);
+    if (!mergedOpen && ![KeyCode.SHIFT].includes(e.which)) {
+      triggerOpen(true);
+    } else {
+      // Let popup panel handle keyboard
+      forwardKeyDown(e);
     }
   };
 
@@ -190,6 +209,7 @@ function Picker<DateType>(props: PickerProps<DateType>) {
   // ============================= Panel =============================
   const panel = (
     <PickerPanel<DateType>
+      {...props}
       generateConfig={generateConfig}
       className={classNames({
         [`${prefixCls}-panel-focused`]: !typing,
@@ -224,6 +244,7 @@ function Picker<DateType>(props: PickerProps<DateType>) {
             value={textValue}
             onChange={onInputChange}
             onKeyDown={onInputKeyDown}
+            autoFocus={autoFocus}
           />
         </PickerTrigger>
       </div>

diff --git a/src/PickerPanel.tsx b/src/PickerPanel.tsx
@@ -52,6 +52,9 @@ function Picker<DateType>(props: PickerProps<DateType>) {
   const { operationRef } = React.useContext(PanelContext);
   const panelRef = React.useRef<PanelRefProps>({});
 
+  // Handle init logic
+  const initRef = React.useRef(true);
+
   // View date control
   const [viewDate, setViewDate] = React.useState(
     defaultPickerValue || value || generateConfig.getNow(),
@@ -89,14 +92,8 @@ function Picker<DateType>(props: PickerProps<DateType>) {
     }
   };
 
-  React.useEffect(() => {
-    if (value) {
-      setViewDate(value);
-    }
-  }, [value]);
-
   // ========================= Interactive ==========================
-  const onInternalKeyDown: React.KeyboardEventHandler<HTMLElement> = e => {
+  const onInternalKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
     if (panelRef.current && panelRef.current.onKeyDown) {
       if (
         [
@@ -111,8 +108,9 @@ function Picker<DateType>(props: PickerProps<DateType>) {
       ) {
         e.preventDefault();
       }
-      panelRef.current.onKeyDown(e);
+      return panelRef.current.onKeyDown(e);
     }
+    return false;
   };
 
   const onInternalBlur: React.FocusEventHandler<HTMLElement> = e => {
@@ -127,6 +125,17 @@ function Picker<DateType>(props: PickerProps<DateType>) {
     };
   }
 
+  // ============================ Effect ============================
+  React.useEffect(() => {
+    if (value && !initRef.current) {
+      setViewDate(value);
+    }
+  }, [value]);
+
+  React.useEffect(() => {
+    initRef.current = false;
+  }, []);
+
   // ============================ Panels ============================
   let panelNode: React.ReactNode;
 
@@ -146,7 +155,6 @@ function Picker<DateType>(props: PickerProps<DateType>) {
         <DecadePanel<DateType>
           {...pickerProps}
           onSelect={date => {
-            onInternalPanelChange('year', date);
             setViewDate(date);
           }}
         />

diff --git a/src/interface.ts b/src/interface.ts
@@ -49,7 +49,7 @@ export type PanelMode =
   | 'decade';
 
 export interface PanelRefProps {
-  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => boolean;
   onBlur?: React.FocusEventHandler<HTMLElement>;
 }
 

diff --git a/src/panels/DatePanel/index.tsx b/src/panels/DatePanel/index.tsx
@@ -28,7 +28,7 @@ function DatePanel<DateType>(props: DatePanelProps<DateType>) {
 
   // ======================= Keyboard =======================
   operationRef.current = {
-    onKeyDown: event => {
+    onKeyDown: event =>
       createKeyDownHandler(event, {
         onLeftRight: diff => {
           onSelect(generateConfig.addDate(value, diff));
@@ -42,8 +42,7 @@ function DatePanel<DateType>(props: DatePanelProps<DateType>) {
         onPageUpDown: diff => {
           onSelect(generateConfig.addMonth(value, diff));
         },
-      });
-    },
+      }),
   };
 
   // ==================== View Operation ====================

diff --git a/src/panels/DatetimePanel/index.tsx b/src/panels/DatetimePanel/index.tsx
@@ -38,20 +38,29 @@ function DatetimePanel<DateType>(props: DatetimePanelProps<DateType>) {
         if (nextActivePanel) {
           event.preventDefault();
         }
-      } else if (activePanel) {
+
+        return true;
+      }
+      if (activePanel) {
         const ref =
           activePanel === 'date' ? dateOperationRef : timeOperationRef;
 
         if (ref.current && ref.current.onKeyDown) {
           ref.current.onKeyDown(event);
         }
-      } else if (
+
+        return true;
+      }
+      if (
         [KeyCode.LEFT, KeyCode.RIGHT, KeyCode.UP, KeyCode.DOWN].includes(
           event.which,
         )
       ) {
         setActivePanel('date');
+        return true;
       }
+
+      return false;
     },
     onBlur: e => {
       if (timeOperationRef.current.onBlur) {

diff --git a/src/panels/DecadePanel/DecadeBody.tsx b/src/panels/DecadePanel/DecadeBody.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { GenerateConfig } from '../../utils/generateUtil';
-import { DECADE_DISTANCE_COUNT } from '.';
+import { DECADE_DISTANCE_COUNT, DECADE_UNIT_DIFF } from '.';
 
 const DECADE_COL_COUNT = 3;
 const DECADE_ROW_COUNT = 4;
@@ -23,7 +23,8 @@ function YearBody<DateType>({
   const rows: React.ReactNode[] = [];
 
   const yearNumber = generateConfig.getYear(viewDate);
-  const decadeYearNumber = Math.floor(yearNumber / 10) * 10;
+  const decadeYearNumber =
+    Math.floor(yearNumber / DECADE_UNIT_DIFF) * DECADE_UNIT_DIFF;
 
   const startDecadeYear =
     Math.floor(yearNumber / DECADE_DISTANCE_COUNT) * DECADE_DISTANCE_COUNT;
@@ -32,14 +33,16 @@ function YearBody<DateType>({
   const baseDecadeYear =
     startDecadeYear -
     Math.ceil(
-      (DECADE_COL_COUNT * DECADE_ROW_COUNT * 10 - DECADE_DISTANCE_COUNT) / 2,
+      (DECADE_COL_COUNT * DECADE_ROW_COUNT * DECADE_UNIT_DIFF -
+        DECADE_DISTANCE_COUNT) /
+        2,
     );
 
   for (let i = 0; i < DECADE_ROW_COUNT; i += 1) {
     const row: React.ReactNode[] = [];
 
     for (let j = 0; j < DECADE_COL_COUNT; j += 1) {
-      const diffDecade = (i * DECADE_COL_COUNT + j) * 10;
+      const diffDecade = (i * DECADE_COL_COUNT + j) * DECADE_UNIT_DIFF;
       const startDecadeNumber = baseDecadeYear + diffDecade;
       const endDecadeNumber = baseDecadeYear + diffDecade + 9;
 

diff --git a/src/panels/DecadePanel/index.tsx b/src/panels/DecadePanel/index.tsx
@@ -2,25 +2,58 @@ import * as React from 'react';
 import DecadeHeader from './DecadeHeader';
 import DecadeBody from './DecadeBody';
 import { PanelSharedProps } from '../../interface';
+import { createKeyDownHandler } from '../../utils/uiUtil';
 
-export type DecadePanelProps<DateType> = Omit<
-  PanelSharedProps<DateType>,
-  'onPanelChange'
->;
+export type DecadePanelProps<DateType> = PanelSharedProps<DateType>;
 
-export const DECADE_DISTANCE_COUNT = 100;
+export const DECADE_UNIT_DIFF = 10;
+export const DECADE_DISTANCE_COUNT = DECADE_UNIT_DIFF * 10;
 
 function DecadePanel<DateType>(props: DecadePanelProps<DateType>) {
-  const { prefixCls, onViewDateChange, generateConfig, viewDate } = props;
+  const {
+    prefixCls,
+    onViewDateChange,
+    generateConfig,
+    viewDate,
+    operationRef,
+    onSelect,
+    onPanelChange,
+  } = props;
 
   const panelPrefixCls = `${prefixCls}-year-panel`;
 
+  // ======================= Keyboard =======================
+  operationRef.current = {
+    onKeyDown: event =>
+      createKeyDownHandler(event, {
+        onLeftRight: diff => {
+          console.log('>>>>', diff);
+          onSelect(generateConfig.addYear(viewDate, diff * DECADE_UNIT_DIFF));
+        },
+        // onCtrlLeftRight: diff => {
+        //   onSelect(generateConfig.addYear(value, diff * YEAR_DECADE_COUNT));
+        // },
+        // onUpDown: diff => {
+        //   onSelect(generateConfig.addYear(value, diff * YEAR_COL_COUNT));
+        // },
+        // onEnter: () => {
+        //   onSelect(viewDate);
+        // },
+      }),
+  };
+
+  // ==================== View Operation ====================
   const onDecadesChange = (diff: number) => {
     onViewDateChange(
       generateConfig.addYear(viewDate, diff * DECADE_DISTANCE_COUNT),
     );
   };
 
+  const onInternalSelect = (date: DateType) => {
+    onSelect(date);
+    onPanelChange('year', date);
+  };
+
   return (
     <div className={panelPrefixCls}>
       <DecadeHeader
@@ -33,7 +66,11 @@ function DecadePanel<DateType>(props: DecadePanelProps<DateType>) {
           onDecadesChange(1);
         }}
       />
-      <DecadeBody {...props} prefixCls={panelPrefixCls} />
+      <DecadeBody
+        {...props}
+        prefixCls={panelPrefixCls}
+        onSelect={onInternalSelect}
+      />
     </div>
   );
 }

diff --git a/src/panels/MonthPanel/index.tsx b/src/panels/MonthPanel/index.tsx
@@ -22,7 +22,7 @@ function MonthPanel<DateType>(props: MonthPanelProps<DateType>) {
 
   // ======================= Keyboard =======================
   operationRef.current = {
-    onKeyDown: event => {
+    onKeyDown: event =>
       createKeyDownHandler(event, {
         onLeftRight: diff => {
           onSelect(generateConfig.addMonth(value, diff));
@@ -36,8 +36,7 @@ function MonthPanel<DateType>(props: MonthPanelProps<DateType>) {
         onEnter: () => {
           onPanelChange('date', value);
         },
-      });
-    },
+      }),
   };
 
   // ==================== View Operation ====================