feat: Relayout of Picker (#500)

* chore: init

* refactor: Use presets hooks

* feat: preset style

* chore: rm console

* test: clean up

* test: update cov

* chore: CI update

* chore: LGTM

* test: fix part test

* test: update snapshot

* test: rewrite part of test

* test: more test case

Author: zombieJ

.fatherrc.js

@@ -1,9 +1,5 @@
-export default {
-  cjs: 'babel',
-  esm: { type: 'babel', importLibToEs: true },
-  preCommit: {
-    eslint: true,
-    prettier: true,
-  },
-  runtimeHelpers: true,
-};
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  plugins: ['@rc-component/father-plugin'],
+});

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: '12'
+          node-version: '16'
 
       - name: cache package-lock.json
         uses: actions/cache@v2

assets/index.less

@@ -150,6 +150,14 @@
     }
   }
 
+  // Preset
+  &-presets {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    background: #CCCCFF;
+  }
+
   &-footer,
   &-picker-footer {
     background: green;
@@ -451,4 +459,10 @@
     vertical-align: top;
     transition: margin 0.3s;
   }
+
+  &-panel-layout {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
 }

docs/examples/basic.tsx

@@ -28,6 +28,12 @@ export default () => {
     value,
     onSelect,
     onChange,
+    presets: [
+      {
+        label: 'Hello World!',
+        value: moment(),
+      },
+    ],
   };
 
   const keyDown = (e, preventDefault) => {
@@ -65,7 +71,7 @@ export default () => {
               defaultValue: moment('11:28:39', 'HH:mm:ss'),
             }}
             showToday
-            disabledTime={date => {
+            disabledTime={(date) => {
               if (date && date.isSame(defaultValue, 'date')) {
                 return {
                   disabledHours: () => [1, 3, 5, 7, 9, 11],

package.json

@@ -33,7 +33,7 @@
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
-    "test": "father test",
+    "test": "rc-test",
     "coverage": "father test --coverage",
     "now-build": "npm run build"
   },
@@ -51,6 +51,7 @@
     "node": ">=8.x"
   },
   "devDependencies": {
+    "@rc-component/father-plugin": "^1.0.0",
     "@testing-library/react": "^12",
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.3",
@@ -70,23 +71,17 @@
     "eslint-plugin-jest": "^26.8.2",
     "eslint-plugin-react-hooks": "^4.0.2",
     "eslint-plugin-unicorn": "^40.0.0",
-    "father": "^2.13.4",
+    "father": "^4.0.0",
     "glob": "^7.2.0",
     "less": "^3.10.3",
     "mockdate": "^3.0.2",
     "np": "^7.1.0",
     "prettier": "^2.0.5",
+    "rc-test": "^7.0.9",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0",
     "typescript": "^4.0.3"
   },
-  "cnpm": {
-    "mode": "npm"
-  },
-  "tnpm": {
-    "mode": "npm"
-  },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"

src/PanelContext.tsx

@@ -10,7 +10,6 @@ export type PanelContextProps = {
   operationRef?: React.MutableRefObject<ContextOperationRefProps | null>;
   /** Only work with time panel */
   hideHeader?: boolean;
-  panelRef?: React.Ref<HTMLDivElement>;
   hidePrevBtn?: boolean;
   hideNextBtn?: boolean;
   onDateMouseEnter?: (date: any) => void;

src/Picker.tsx

@@ -27,13 +27,15 @@ import { formatValue, isEqual, parseValue } from './utils/dateUtil';
 import getDataOrAriaProps, { toArray } from './utils/miscUtil';
 import type { ContextOperationRefProps } from './PanelContext';
 import PanelContext from './PanelContext';
-import type { CustomFormat, PickerMode } from './interface';
+import type { CustomFormat, PickerMode, PresetDate } from './interface';
 import { getDefaultFormat, getInputSize, elementsContains } from './utils/uiUtil';
 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';
+import usePresets from './hooks/usePresets';
+import PresetPanel from './PresetPanel';
 
 export type PickerRefConfig = {
   focus: () => void;
@@ -56,6 +58,8 @@ export type PickerSharedProps<DateType> = {
   inputReadOnly?: boolean;
   id?: string;
 
+  presets?: PresetDate<DateType>[];
+
   // Value
   format?: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
 
@@ -151,6 +155,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     use12Hours,
     value,
     defaultValue,
+    presets,
     open,
     defaultOpen,
     defaultOpenValue,
@@ -183,6 +188,8 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
 
   const needConfirmButton: boolean = (picker === 'date' && !!showTime) || picker === 'time';
 
+  const presetList = usePresets(presets);
+
   // ============================ Warning ============================
   if (process.env.NODE_ENV !== 'production') {
     legacyPropsWarning(props);
@@ -393,26 +400,36 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   };
 
   let panelNode: React.ReactNode = (
-    <PickerPanel<DateType>
-      {...panelProps}
-      generateConfig={generateConfig}
-      className={classNames({
-        [`${prefixCls}-panel-focused`]: !typing,
-      })}
-      value={selectedValue}
-      locale={locale}
-      tabIndex={-1}
-      onSelect={(date) => {
-        onSelect?.(date);
-        setSelectedValue(date);
-      }}
-      direction={direction}
-      onPanelChange={(viewDate, mode) => {
-        const { onPanelChange } = props;
-        onLeave(true);
-        onPanelChange?.(viewDate, mode);
-      }}
-    />
+    <div className={`${prefixCls}-panel-layout`}>
+      <PresetPanel
+        prefixCls={prefixCls}
+        presets={presetList}
+        onClick={(nextValue) => {
+          triggerChange(nextValue);
+          triggerOpen(false);
+        }}
+      />
+      <PickerPanel<DateType>
+        {...panelProps}
+        generateConfig={generateConfig}
+        className={classNames({
+          [`${prefixCls}-panel-focused`]: !typing,
+        })}
+        value={selectedValue}
+        locale={locale}
+        tabIndex={-1}
+        onSelect={(date) => {
+          onSelect?.(date);
+          setSelectedValue(date);
+        }}
+        direction={direction}
+        onPanelChange={(viewDate, mode) => {
+          const { onPanelChange } = props;
+          onLeave(true);
+          onPanelChange?.(viewDate, mode);
+        }}
+      />
+    </div>
   );
 
   if (panelRender) {
@@ -422,6 +439,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   const panel = (
     <div
       className={`${prefixCls}-panel-container`}
+      ref={panelDivRef}
       onMouseDown={(e) => {
         e.preventDefault();
       }}
@@ -505,7 +523,6 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
       value={{
         operationRef,
         hideHeader: picker === 'time',
-        panelRef: panelDivRef,
         onSelect: onContextSelect,
         open: mergedOpen,
         defaultOpenValue,

src/PickerPanel.tsx

@@ -173,13 +173,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
   // ============================ State =============================
 
   const panelContext = React.useContext(PanelContext);
-  const {
-    operationRef,
-    panelRef: panelDivRef,
-    onSelect: onContextSelect,
-    hideRanges,
-    defaultOpenValue,
-  } = panelContext;
+  const { operationRef, onSelect: onContextSelect, hideRanges, defaultOpenValue } = panelContext;
 
   const { inRange, panelPosition, rangedValue, hoverRangedValue } = React.useContext(RangeContext);
   const panelRef = React.useRef<PanelRefProps>({});
@@ -553,7 +547,6 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
         onKeyDown={onInternalKeyDown}
         onBlur={onInternalBlur}
         onMouseDown={onMouseDown}
-        ref={panelDivRef}
       >
         {panelNode}
         {extraFooter || rangesNode || todayNode ? (

src/PresetPanel.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { PresetDate } from './interface';
+
+export interface PresetPanelProps<T> {
+  prefixCls: string;
+  presets: PresetDate<T>[];
+  onClick: (value: T) => void;
+  onHover?: (value: T) => void;
+}
+
+export default function PresetPanel<T>(props: PresetPanelProps<T>) {
+  const { prefixCls, presets, onClick, onHover } = props;
+
+  if (!presets.length) {
+    return null;
+  }
+
+  return (
+    <ul className={`${prefixCls}-presets`}>
+      {presets.map(({ label, value }, index) => (
+        <li
+          key={index}
+          onClick={() => {
+            onClick(value);
+          }}
+          onMouseEnter={() => {
+            onHover?.(value);
+          }}
+          onMouseLeave={() => {
+            onHover?.(null);
+          }}
+        >
+          {label}
+        </li>
+      ))}
+    </ul>
+  );
+}