From 8a91c6dc742a6ffc81c040de6df0a5efa19ef287 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 19 Oct 2023 17:22:18 +0800 Subject: [PATCH 001/380] chore: init --- docs/demo/debug.md | 8 +++ docs/examples/debug.tsx | 26 +++++++ src/PickerInput/RangePicker.tsx | 16 +++++ src/PickerInput/Selector/Icon.tsx | 15 ++++ src/PickerInput/Selector/Input.tsx | 26 +++++++ src/PickerInput/Selector/RangeSelector.tsx | 30 ++++++++ src/PickerInput/Selector/SingleSelector.tsx | 49 +++++++++++++ src/PickerInput/SinglePicker.tsx | 77 +++++++++++++++++++++ src/PickerInput/context.tsx | 3 + src/PickerInput/interface.tsx | 45 ++++++++++++ tsconfig.json | 20 ++++-- 11 files changed, 310 insertions(+), 5 deletions(-) create mode 100644 docs/demo/debug.md create mode 100644 docs/examples/debug.tsx create mode 100644 src/PickerInput/RangePicker.tsx create mode 100644 src/PickerInput/Selector/Icon.tsx create mode 100644 src/PickerInput/Selector/Input.tsx create mode 100644 src/PickerInput/Selector/RangeSelector.tsx create mode 100644 src/PickerInput/Selector/SingleSelector.tsx create mode 100644 src/PickerInput/SinglePicker.tsx create mode 100644 src/PickerInput/context.tsx create mode 100644 src/PickerInput/interface.tsx diff --git a/docs/demo/debug.md b/docs/demo/debug.md new file mode 100644 index 000000000..4be44f204 --- /dev/null +++ b/docs/demo/debug.md @@ -0,0 +1,8 @@ +--- +title: debug +nav: + title: Demo + path: /demo +--- + + diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx new file mode 100644 index 000000000..b0123254f --- /dev/null +++ b/docs/examples/debug.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import '../../assets/index.less'; +import type { PickerRef } from '../../src/PickerInput/interface'; +import RangePicker from '../../src/PickerInput/RangePicker'; +import SinglePicker from '../../src/PickerInput/SinglePicker'; + +export default () => { + const singleRef = React.useRef(null); + + return ( +
+ +
+ +
+ + +
+ ); +}; diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx new file mode 100644 index 000000000..c7ed33615 --- /dev/null +++ b/src/PickerInput/RangePicker.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { PrefixClsContext } from './context'; +import type { SharedPickerProps } from './interface'; +import RangeSelector from './Selector/RangeSelector'; + +export type RangePickerProps = SharedPickerProps; + +export default function Picker(props: RangePickerProps) { + const { prefixCls = 'rc-picker', className, style, suffixIcon } = props; + + return ( + + + + ); +} diff --git a/src/PickerInput/Selector/Icon.tsx b/src/PickerInput/Selector/Icon.tsx new file mode 100644 index 000000000..0bb082d22 --- /dev/null +++ b/src/PickerInput/Selector/Icon.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { PrefixClsContext } from '../context'; + +export interface IconProps { + icon?: React.ReactNode; + type: 'suffix' | 'clear'; +} + +export default function Icon(props: IconProps) { + const { icon, type } = props; + + const prefixCls = React.useContext(PrefixClsContext); + + return icon ? {icon} : null; +} diff --git a/src/PickerInput/Selector/Input.tsx b/src/PickerInput/Selector/Input.tsx new file mode 100644 index 000000000..c39746f18 --- /dev/null +++ b/src/PickerInput/Selector/Input.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { PrefixClsContext } from '../context'; +import Icon from './Icon'; + +export interface InputProps extends React.HTMLAttributes { + suffixIcon?: React.ReactNode; +} + +const Input = React.forwardRef((props, ref) => { + const { suffixIcon, ...restProps } = props; + + const prefixCls = React.useContext(PrefixClsContext); + + return ( +
+ + +
+ ); +}); + +if (process.env.NODE_ENV !== 'production') { + Input.displayName = 'Input'; +} + +export default Input; diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx new file mode 100644 index 000000000..83d505b3c --- /dev/null +++ b/src/PickerInput/Selector/RangeSelector.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import { PrefixClsContext } from '../context'; +import type { SelectorProps, SelectorRef } from '../interface'; +import Icon from './Icon'; +import Input from './Input'; + +export interface RangeSelectorProps extends SelectorProps { + separator?: React.ReactNode; +} + +const RangeSelector = React.forwardRef((props, ref) => { + const { suffixIcon, separator = '~' } = props; + + const prefixCls = React.useContext(PrefixClsContext); + + return ( +
+ +
{separator}
+ + +
+ ); +}); + +if (process.env.NODE_ENV !== 'production') { + RangeSelector.displayName = 'RangeSelector'; +} + +export default RangeSelector; diff --git a/src/PickerInput/Selector/SingleSelector.tsx b/src/PickerInput/Selector/SingleSelector.tsx new file mode 100644 index 000000000..ab491bd45 --- /dev/null +++ b/src/PickerInput/Selector/SingleSelector.tsx @@ -0,0 +1,49 @@ +import classNames from 'classnames'; +import * as React from 'react'; +import { PrefixClsContext } from '../context'; +import type { SelectorProps, SelectorRef } from '../interface'; +import Input from './Input'; + +const SingleSelector = React.forwardRef((props, ref) => { + const { + suffixIcon, + + // Style + className, + style, + + // Focus + focused, + onFocus, + onBlur, + } = props; + + const prefixCls = React.useContext(PrefixClsContext); + + // ============================= Refs ============================= + const rootRef = React.useRef(); + const inputRef = React.useRef(); + + React.useImperativeHandle(ref, () => ({ + nativeElement: rootRef.current, + focus: () => inputRef.current?.focus(), + blur: () => inputRef.current?.blur(), + })); + + // ============================ Render ============================ + return ( +
+ +
+ ); +}); + +if (process.env.NODE_ENV !== 'production') { + SingleSelector.displayName = 'SingleSelector'; +} + +export default SingleSelector; diff --git a/src/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx new file mode 100644 index 000000000..687c385a8 --- /dev/null +++ b/src/PickerInput/SinglePicker.tsx @@ -0,0 +1,77 @@ +import { useMergedState } from 'rc-util'; +import * as React from 'react'; +import { PrefixClsContext } from './context'; +import type { PickerRef, SelectorRef, SharedPickerProps } from './interface'; +import SingleSelector from './Selector/SingleSelector'; + +export type SinglePickerProps = SharedPickerProps; + +const SinglePicker = React.forwardRef((props, ref) => { + const { + prefixCls = 'rc-picker', + + // Selector + className, + style, + suffixIcon, + + // Focus + onFocus, + onBlur, + + // Open + defaultOpen, + open, + onOpenChange, + } = props; + + // ============================ Active ============================ + const [focused, setFocused] = React.useState(false); + + const onInternalFocus: React.FocusEventHandler = (event) => { + onFocus?.(event); + setFocused(true); + }; + + const onInternalBlur: React.FocusEventHandler = (event) => { + onBlur?.(event); + setFocused(false); + }; + + // ============================= Open ============================= + const [mergedOpen, setMergeOpen] = useMergedState(defaultOpen, { + value: open, + onChange: onOpenChange, + }); + + // ============================= Refs ============================= + const selectorRef = React.useRef(); + + React.useImperativeHandle(ref, () => ({ + nativeElement: selectorRef.current?.nativeElement, + focus: selectorRef.current?.focus, + blur: selectorRef.current?.blur, + })); + + // ============================ Render ============================ + return ( + + + + ); +}); + +if (process.env.NODE_ENV !== 'production') { + SinglePicker.displayName = 'SinglePicker'; +} + +export default SinglePicker; diff --git a/src/PickerInput/context.tsx b/src/PickerInput/context.tsx new file mode 100644 index 000000000..05ce6ab75 --- /dev/null +++ b/src/PickerInput/context.tsx @@ -0,0 +1,3 @@ +import * as React from 'react'; + +export const PrefixClsContext = React.createContext('rc-picker'); diff --git a/src/PickerInput/interface.tsx b/src/PickerInput/interface.tsx new file mode 100644 index 000000000..505dae850 --- /dev/null +++ b/src/PickerInput/interface.tsx @@ -0,0 +1,45 @@ +// ========================= Picker ========================= +export interface SharedPickerProps { + prefixCls?: string; + className?: string; + style?: React.CSSProperties; + + // Icons + suffixIcon?: React.ReactNode; + allowClear?: + | boolean + | { + clearIcon?: React.ReactNode; + }; + + // Active + onFocus?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; + + // Open + defaultOpen?: boolean; + open?: boolean; + onOpenChange?: (open: boolean) => void; +} + +export interface PickerRef { + nativeElement: HTMLDivElement; + focus: VoidFunction; + blur: VoidFunction; +} + +// ======================== Selector ======================== +export interface SelectorProps { + suffixIcon?: React.ReactNode; + className?: string; + style?: React.CSSProperties; + focused: boolean; + onFocus: React.FocusEventHandler; + onBlur: React.FocusEventHandler; +} + +export interface SelectorRef { + nativeElement: HTMLDivElement; + focus: VoidFunction; + blur: VoidFunction; +} diff --git a/tsconfig.json b/tsconfig.json index 573fdcc8f..1448ec38c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,10 +8,20 @@ "skipLibCheck": true, "esModuleInterop": true, "paths": { - "@/*": ["src/*"], - "@@/*": [".dumi/tmp/*"], - "rc-picker": ["src/index.tsx"] + "@/*": [ + "src/*" + ], + "@@/*": [ + ".dumi/tmp/*" + ], + "rc-picker": [ + "src/index.tsx" + ] } }, - "include": [".dumi/**/*", ".dumirc.ts", "**/*.ts", "**/*.tsx"] -} + "include": [ + ".dumirc.ts", + "**/*.ts", + "**/*.tsx" + ] +} \ No newline at end of file From d6cff6060fd0126d2759295330f33c75288fd250 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 20 Oct 2023 15:00:03 +0800 Subject: [PATCH 002/380] chore: more --- docs/examples/debug.tsx | 6 +- .../PickerInput/RangePicker.tsx | 0 .../PickerInput/Selector/Icon.tsx | 0 .../PickerInput/Selector/Input.tsx | 0 .../PickerInput/Selector/RangeSelector.tsx | 0 .../PickerInput/Selector/SingleSelector.tsx | 0 .../PickerInput/SinglePicker.tsx | 48 +++++--- src/{ => NewPicker}/PickerInput/context.tsx | 0 src/{ => NewPicker}/PickerInput/interface.tsx | 0 src/NewPicker/PickerTrigger/index.tsx | 104 ++++++++++++++++++ src/NewPicker/index.tsx | 0 11 files changed, 139 insertions(+), 19 deletions(-) rename src/{ => NewPicker}/PickerInput/RangePicker.tsx (100%) rename src/{ => NewPicker}/PickerInput/Selector/Icon.tsx (100%) rename src/{ => NewPicker}/PickerInput/Selector/Input.tsx (100%) rename src/{ => NewPicker}/PickerInput/Selector/RangeSelector.tsx (100%) rename src/{ => NewPicker}/PickerInput/Selector/SingleSelector.tsx (100%) rename src/{ => NewPicker}/PickerInput/SinglePicker.tsx (66%) rename src/{ => NewPicker}/PickerInput/context.tsx (100%) rename src/{ => NewPicker}/PickerInput/interface.tsx (100%) create mode 100644 src/NewPicker/PickerTrigger/index.tsx create mode 100644 src/NewPicker/index.tsx diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index b0123254f..1b08d6f36 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import '../../assets/index.less'; -import type { PickerRef } from '../../src/PickerInput/interface'; -import RangePicker from '../../src/PickerInput/RangePicker'; -import SinglePicker from '../../src/PickerInput/SinglePicker'; +import type { PickerRef } from '../../src/NewPicker/PickerInput/interface'; +import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; +import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; export default () => { const singleRef = React.useRef(null); diff --git a/src/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx similarity index 100% rename from src/PickerInput/RangePicker.tsx rename to src/NewPicker/PickerInput/RangePicker.tsx diff --git a/src/PickerInput/Selector/Icon.tsx b/src/NewPicker/PickerInput/Selector/Icon.tsx similarity index 100% rename from src/PickerInput/Selector/Icon.tsx rename to src/NewPicker/PickerInput/Selector/Icon.tsx diff --git a/src/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx similarity index 100% rename from src/PickerInput/Selector/Input.tsx rename to src/NewPicker/PickerInput/Selector/Input.tsx diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx similarity index 100% rename from src/PickerInput/Selector/RangeSelector.tsx rename to src/NewPicker/PickerInput/Selector/RangeSelector.tsx diff --git a/src/PickerInput/Selector/SingleSelector.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector.tsx similarity index 100% rename from src/PickerInput/Selector/SingleSelector.tsx rename to src/NewPicker/PickerInput/Selector/SingleSelector.tsx diff --git a/src/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx similarity index 66% rename from src/PickerInput/SinglePicker.tsx rename to src/NewPicker/PickerInput/SinglePicker.tsx index 687c385a8..685286c95 100644 --- a/src/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -1,5 +1,6 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; +import PickerTrigger from '../PickerTrigger'; import { PrefixClsContext } from './context'; import type { PickerRef, SelectorRef, SharedPickerProps } from './interface'; import SingleSelector from './Selector/SingleSelector'; @@ -25,25 +26,27 @@ const SinglePicker = React.forwardRef((props, ref) onOpenChange, } = props; + // ============================= Open ============================= + const [mergedOpen, setMergeOpen] = useMergedState(defaultOpen || false, { + value: open, + onChange: onOpenChange, + }); + // ============================ Active ============================ const [focused, setFocused] = React.useState(false); const onInternalFocus: React.FocusEventHandler = (event) => { onFocus?.(event); setFocused(true); + setMergeOpen(true); }; const onInternalBlur: React.FocusEventHandler = (event) => { onBlur?.(event); setFocused(false); + setMergeOpen(false); }; - // ============================= Open ============================= - const [mergedOpen, setMergeOpen] = useMergedState(defaultOpen, { - value: open, - onChange: onOpenChange, - }); - // ============================= Refs ============================= const selectorRef = React.useRef(); @@ -56,16 +59,29 @@ const SinglePicker = React.forwardRef((props, ref) // ============================ Render ============================ return ( - + + + ); }); diff --git a/src/PickerInput/context.tsx b/src/NewPicker/PickerInput/context.tsx similarity index 100% rename from src/PickerInput/context.tsx rename to src/NewPicker/PickerInput/context.tsx diff --git a/src/PickerInput/interface.tsx b/src/NewPicker/PickerInput/interface.tsx similarity index 100% rename from src/PickerInput/interface.tsx rename to src/NewPicker/PickerInput/interface.tsx diff --git a/src/NewPicker/PickerTrigger/index.tsx b/src/NewPicker/PickerTrigger/index.tsx new file mode 100644 index 000000000..37d328333 --- /dev/null +++ b/src/NewPicker/PickerTrigger/index.tsx @@ -0,0 +1,104 @@ +import * as React from 'react'; +import classNames from 'classnames'; +import Trigger from '@rc-component/trigger'; +import type { AlignType } from '@rc-component/trigger/lib/interface'; + +const BUILT_IN_PLACEMENTS = { + bottomLeft: { + points: ['tl', 'bl'], + offset: [0, 4], + overflow: { + adjustX: 1, + adjustY: 1, + }, + }, + bottomRight: { + points: ['tr', 'br'], + offset: [0, 4], + overflow: { + adjustX: 1, + adjustY: 1, + }, + }, + topLeft: { + points: ['bl', 'tl'], + offset: [0, -4], + overflow: { + adjustX: 0, + adjustY: 1, + }, + }, + topRight: { + points: ['br', 'tr'], + offset: [0, -4], + overflow: { + adjustX: 0, + adjustY: 1, + }, + }, +}; + +type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; + +export type PickerTriggerProps = { + prefixCls: string; + visible: boolean; + popupElement: React.ReactElement; + popupStyle?: React.CSSProperties; + children: React.ReactElement; + dropdownClassName?: string; + transitionName?: string; + getPopupContainer?: (node: HTMLElement) => HTMLElement; + dropdownAlign?: AlignType; + range?: boolean; + popupPlacement?: Placement; + direction?: 'ltr' | 'rtl'; +}; + +function PickerTrigger({ + prefixCls, + popupElement, + popupStyle, + visible, + dropdownClassName, + dropdownAlign, + transitionName, + getPopupContainer, + children, + range, + popupPlacement, + direction, +}: PickerTriggerProps) { + const dropdownPrefixCls = `${prefixCls}-dropdown`; + + const getPopupPlacement = () => { + if (popupPlacement !== undefined) { + return popupPlacement; + } + return direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; + }; + + return ( + + {children} + + ); +} + +export default PickerTrigger; diff --git a/src/NewPicker/index.tsx b/src/NewPicker/index.tsx new file mode 100644 index 000000000..e69de29bb From 2cc9472b92a2864b4fddf7c7556fae656df600f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 20 Oct 2023 15:22:58 +0800 Subject: [PATCH 003/380] chore: base of it --- docs/examples/debug.tsx | 2 +- src/NewPicker/PickerInput/RangePicker.tsx | 2 +- .../PickerInput/Selector/RangeSelector.tsx | 2 +- .../PickerInput/Selector/SingleSelector.tsx | 2 +- src/NewPicker/PickerInput/SinglePicker.tsx | 34 ++++++++++++++----- src/NewPicker/PickerTrigger/index.tsx | 20 +++++------ src/NewPicker/{PickerInput => }/interface.tsx | 16 +++++++++ 7 files changed, 55 insertions(+), 23 deletions(-) rename src/NewPicker/{PickerInput => }/interface.tsx (72%) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 1b08d6f36..eea939848 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import '../../assets/index.less'; -import type { PickerRef } from '../../src/NewPicker/PickerInput/interface'; +import type { PickerRef } from '../../src/NewPicker/interface'; import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index c7ed33615..7ddd396e6 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { PrefixClsContext } from './context'; -import type { SharedPickerProps } from './interface'; +import type { SharedPickerProps } from '../interface'; import RangeSelector from './Selector/RangeSelector'; export type RangePickerProps = SharedPickerProps; diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 83d505b3c..c7143abeb 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { PrefixClsContext } from '../context'; -import type { SelectorProps, SelectorRef } from '../interface'; +import type { SelectorProps, SelectorRef } from '../../interface'; import Icon from './Icon'; import Input from './Input'; diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector.tsx index ab491bd45..ea96ec730 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; import { PrefixClsContext } from '../context'; -import type { SelectorProps, SelectorRef } from '../interface'; +import type { SelectorProps, SelectorRef } from '../../interface'; import Input from './Input'; const SingleSelector = React.forwardRef((props, ref) => { diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 685286c95..bd93b61bb 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -1,8 +1,8 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; +import type { PickerRef, SelectorRef, SharedPickerProps } from '../interface'; import PickerTrigger from '../PickerTrigger'; import { PrefixClsContext } from './context'; -import type { PickerRef, SelectorRef, SharedPickerProps } from './interface'; import SingleSelector from './Selector/SingleSelector'; export type SinglePickerProps = SharedPickerProps; @@ -11,9 +11,16 @@ const SinglePicker = React.forwardRef((props, ref) const { prefixCls = 'rc-picker', + // MISC + direction, + // Selector className, style, + classNames = {}, + styles = {}, + + // Icons suffixIcon, // Focus @@ -24,14 +31,23 @@ const SinglePicker = React.forwardRef((props, ref) defaultOpen, open, onOpenChange, + popupAlign, + getPopupContainer, + + // Motion + transitionName, } = props; + + // ============================= Open ============================= const [mergedOpen, setMergeOpen] = useMergedState(defaultOpen || false, { value: open, onChange: onOpenChange, }); + const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; + // ============================ Active ============================ const [focused, setFocused] = React.useState(false); @@ -62,14 +78,14 @@ const SinglePicker = React.forwardRef((props, ref) 2333} + popupStyle={styles.popup} + popupClassName={classNames.popup} + popupAlign={popupAlign} + getPopupContainer={getPopupContainer} + transitionName={transitionName} + popupPlacement={popupPlacement} + direction={direction} > HTMLElement; - dropdownAlign?: AlignType; + popupAlign?: AlignType; range?: boolean; popupPlacement?: Placement; direction?: 'ltr' | 'rtl'; }; function PickerTrigger({ - prefixCls, popupElement, popupStyle, visible, - dropdownClassName, - dropdownAlign, + popupClassName, + popupAlign, transitionName, getPopupContainer, children, @@ -69,6 +68,7 @@ function PickerTrigger({ popupPlacement, direction, }: PickerTriggerProps) { + const prefixCls = React.useContext(PrefixClsContext); const dropdownPrefixCls = `${prefixCls}-dropdown`; const getPopupPlacement = () => { @@ -87,9 +87,9 @@ function PickerTrigger({ prefixCls={dropdownPrefixCls} popupTransitionName={transitionName} popup={popupElement} - popupAlign={dropdownAlign} + popupAlign={popupAlign} popupVisible={visible} - popupClassName={classNames(dropdownClassName, { + popupClassName={classNames(popupClassName, { [`${dropdownPrefixCls}-range`]: range, [`${dropdownPrefixCls}-rtl`]: direction === 'rtl', })} diff --git a/src/NewPicker/PickerInput/interface.tsx b/src/NewPicker/interface.tsx similarity index 72% rename from src/NewPicker/PickerInput/interface.tsx rename to src/NewPicker/interface.tsx index 505dae850..40b21d006 100644 --- a/src/NewPicker/PickerInput/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -1,9 +1,20 @@ +import type { AlignType } from '@rc-component/trigger'; + // ========================= Picker ========================= +export type SemanticStructure = 'popup'; + export interface SharedPickerProps { + // MISC + direction?: 'ltr' | 'rtl'; + + // Styles prefixCls?: string; className?: string; style?: React.CSSProperties; + styles?: Partial>; + classNames?: Partial>; + // Icons suffixIcon?: React.ReactNode; allowClear?: @@ -20,6 +31,11 @@ export interface SharedPickerProps { defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; + popupAlign?: AlignType; + getPopupContainer?: (node: HTMLElement) => HTMLElement; + + // Motion + transitionName?: string; } export interface PickerRef { From 1c7542b82f409ed941c4a424a9940e4a5a3ffa1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 23 Oct 2023 11:07:30 +0800 Subject: [PATCH 004/380] chore: base connect --- docs/examples/debug.tsx | 6 + src/NewPicker/PickerInput/SinglePicker.tsx | 9 +- src/NewPicker/PickerPanel/DatePanel/index.tsx | 45 ++++++ src/NewPicker/PickerPanel/PanelBody.tsx | 128 ++++++++++++++++++ src/NewPicker/PickerPanel/context.ts | 21 +++ src/NewPicker/PickerPanel/index.tsx | 68 ++++++++++ src/NewPicker/interface.tsx | 68 ++++++++++ 7 files changed, 341 insertions(+), 4 deletions(-) create mode 100644 src/NewPicker/PickerPanel/DatePanel/index.tsx create mode 100644 src/NewPicker/PickerPanel/PanelBody.tsx create mode 100644 src/NewPicker/PickerPanel/context.ts create mode 100644 src/NewPicker/PickerPanel/index.tsx diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index eea939848..0b84c5d54 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -3,6 +3,10 @@ import '../../assets/index.less'; import type { PickerRef } from '../../src/NewPicker/interface'; import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; +import PickerPanel from '../../src/NewPicker/PickerPanel'; + +import momentGenerateConfig from '../../src/generate/moment'; +import enUS from '../../src/locale/en_US'; export default () => { const singleRef = React.useRef(null); @@ -21,6 +25,8 @@ export default () => { > Focus + + ); }; diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index bd93b61bb..e192e4af6 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -1,6 +1,7 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; import type { PickerRef, SelectorRef, SharedPickerProps } from '../interface'; +import PickerPanel from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; import { PrefixClsContext } from './context'; import SingleSelector from './Selector/SingleSelector'; @@ -38,8 +39,6 @@ const SinglePicker = React.forwardRef((props, ref) transitionName, } = props; - - // ============================= Open ============================= const [mergedOpen, setMergeOpen] = useMergedState(defaultOpen || false, { value: open, @@ -72,13 +71,15 @@ const SinglePicker = React.forwardRef((props, ref) blur: selectorRef.current?.blur, })); + // ============================ Panels ============================ + const panel = ; + // ============================ Render ============================ return ( 2333} + popupElement={panel} popupStyle={styles.popup} popupClassName={classNames.popup} popupAlign={popupAlign} diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx new file mode 100644 index 000000000..98fdde5c3 --- /dev/null +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import { getWeekStartDate } from '../../../utils/dateUtil'; +import { PanelContext, PanelInfoContext, type PanelInfoProps } from '../context'; +import PanelBody from '../PanelBody'; + +export default function DatePanel() { + const { pickerValue, locale, generateConfig } = React.useContext(PanelContext); + + // ======================= Base Date ======================== + const baseDate = getWeekStartDate(locale.locale, generateConfig, pickerValue); + + // ========================= Cells ========================== + const getCellDate = (date: DateType, offset: number) => { + return generateConfig.addDate(date, offset); + }; + + const getCellText = (date: DateType) => { + return generateConfig.getDate(date); + }; + + const getCellClassName = () => ({}); + + // ======================== Context ========================= + const infoContext = React.useMemo( + () => ({ + type: 'date', + }), + [], + ); + + // ========================= Render ========================= + return ( + + + + ); +} diff --git a/src/NewPicker/PickerPanel/PanelBody.tsx b/src/NewPicker/PickerPanel/PanelBody.tsx new file mode 100644 index 000000000..4dc5b8883 --- /dev/null +++ b/src/NewPicker/PickerPanel/PanelBody.tsx @@ -0,0 +1,128 @@ +import classNames from 'classnames'; +import * as React from 'react'; +import { PrefixClsContext } from '../PickerInput/context'; +import { PanelContext, PanelInfoContext, type PanelContextProps } from './context'; + +export interface PanelBodyProps { + rowNum: number; + colNum: number; + baseDate: DateType; + + titleCell?: (date: DateType) => string; + + // Render + getCellDate: (date: DateType, offset: number) => DateType; + getCellText: (date: DateType) => React.ReactNode; + getCellClassName: (date: DateType) => Record; + + // Used for week panel + prefixColumn?: (date: DateType) => React.ReactNode; + rowClassName?: (date: DateType) => string; +} + +export default function PanelBody(props: PanelBodyProps) { + const { + rowNum, + colNum, + baseDate, + getCellDate, + prefixColumn, + rowClassName, + titleCell, + getCellText, + getCellClassName, + } = props; + + const prefixCls = React.useContext(PrefixClsContext); + const { disabledDate, generateConfig, cellRender }: PanelContextProps = + React.useContext(PanelContext); + const { type } = React.useContext(PanelInfoContext); + + const cellPrefixCls = `${prefixCls}-cell`; + + const today = generateConfig.getNow(); + + // =============================== Body =============================== + const rows: React.ReactNode[] = []; + + for (let row = 0; row < rowNum; row += 1) { + const rowNode: React.ReactNode[] = []; + let rowStartDate: DateType; + + for (let col = 0; col < colNum; col += 1) { + const offset = row * colNum + col; + const currentDate = getCellDate(baseDate, offset); + + const disabled = disabledDate?.(currentDate, { + type, + }); + + if (col === 0) { + rowStartDate = currentDate; + + if (prefixColumn) { + rowNode.push(prefixColumn(rowStartDate)); + } + } + + const inner =
{getCellText(currentDate)}
; + + rowNode.push( + { + // if (!disabled) { + // onSelect(currentDate); + // } + // }} + // onMouseEnter={() => { + // if (!disabled && onDateMouseEnter) { + // onDateMouseEnter(currentDate); + // } + // }} + // onMouseLeave={() => { + // if (!disabled && onDateMouseLeave) { + // onDateMouseLeave(currentDate); + // } + // }} + > + {cellRender + ? cellRender(currentDate, { + originNode: inner, + today, + // range?: 'start' | 'end'; + type, + // locale?: Locale; + // subType?: 'hour' | 'minute' | 'second' | 'meridiem'; + }) + : inner} + , + ); + } + + rows.push( + + {rowNode} + , + ); + } + + // ============================== Render ============================== + return ( +
+ + {/* {headerCells && ( + + {headerCells} + + )} */} + {rows} +
+
+ ); +} diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts new file mode 100644 index 000000000..756dbc112 --- /dev/null +++ b/src/NewPicker/PickerPanel/context.ts @@ -0,0 +1,21 @@ +import React from 'react'; +import type { GenerateConfig } from '../../generate'; +import type { CellRender, DisabledDate, Locale, PanelMode } from '../interface'; + +export interface PanelContextProps { + locale: Locale; + disabledDate?: DisabledDate; + generateConfig: GenerateConfig; + pickerValue: DateType; + cellRender?: CellRender; +} + +/** Used for root PickerPanel */ +export const PanelContext = React.createContext(null!); + +export interface PanelInfoProps { + type: PanelMode; +} + +/** Used for each single Panel. e.g. DatePanel */ +export const PanelInfoContext = React.createContext(null!); diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx new file mode 100644 index 000000000..2ccd61e46 --- /dev/null +++ b/src/NewPicker/PickerPanel/index.tsx @@ -0,0 +1,68 @@ +import { useMergedState } from 'rc-util'; +import * as React from 'react'; +import type { GenerateConfig } from '../../generate'; +import type { CellRender, DisabledDate, Locale } from '../interface'; +import { PrefixClsContext } from '../PickerInput/context'; +import { PanelContext, type PanelContextProps } from './context'; +import DatePanel from './DatePanel'; + +export interface PickerPanelProps { + locale: Locale; + disabledDate?: DisabledDate; + generateConfig: GenerateConfig; + + // Panel control + defaultPickerValue?: DateType | null; + pickerValue?: DateType | null; + onPickerValueChange?: (date: DateType) => void; + + // Cell + cellRender?: CellRender; +} + +export default function PickerPanel(props: PickerPanelProps) { + const { + locale, + disabledDate, + generateConfig, + + // Picker control + defaultPickerValue, + pickerValue, + onPickerValueChange, + + // Cell + cellRender, + } = props; + + const prefixCls = React.useContext(PrefixClsContext); + + // ====================== PickerValue ======================= + // PickerValue is used to control the current displaying panel + const [mergedPickerValue, setPickerValue] = useMergedState( + defaultPickerValue || generateConfig.getNow(), + { + value: pickerValue, + onChange: onPickerValueChange, + }, + ); + + // ======================== Context ========================= + const panelContext = React.useMemo( + () => ({ + locale, + disabledDate, + generateConfig, + pickerValue: mergedPickerValue, + cellRender, + }), + [locale, disabledDate, generateConfig, mergedPickerValue, cellRender], + ); + + // ========================= Render ========================= + return ( + + + + ); +} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 40b21d006..cc76a0630 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -1,5 +1,73 @@ import type { AlignType } from '@rc-component/trigger'; +export type Locale = { + locale: string; + + // ===================== Date Panel ===================== + /** Display month before year in date panel header */ + monthBeforeYear?: boolean; + yearFormat: string; + monthFormat?: string; + quarterFormat?: string; + + today: string; + now: string; + backToToday: string; + ok: string; + timeSelect: string; + dateSelect: string; + weekSelect?: string; + clear: string; + month: string; + year: string; + previousMonth: string; + nextMonth: string; + monthSelect: string; + yearSelect: string; + decadeSelect: string; + + dayFormat: string; + dateFormat: string; + dateTimeFormat: string; + previousYear: string; + nextYear: string; + previousDecade: string; + nextDecade: string; + previousCentury: string; + nextCentury: string; + + shortWeekDays?: string[]; + shortMonths?: string[]; +}; + +export type PanelMode = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year' | 'decade'; + +export type DisabledDate = ( + date: DateType, + info: { + type: PanelMode; + }, +) => boolean; + +export type CellRenderInfo = { + // The cell wrapper element + originNode: React.ReactElement; + today: DateType; + // mask current cell as start or end when range picker + range?: 'start' | 'end'; + type: PanelMode; + locale?: Locale; + subType?: 'hour' | 'minute' | 'second' | 'meridiem'; +}; + +export type CellRender = ( + current: CurrentType, + info: CellRenderInfo, +) => React.ReactNode; + +// ======================= Components ======================= +export type Components = Partial>; + // ========================= Picker ========================= export type SemanticStructure = 'popup'; From 2cea6e94d21bb76126dd2e3c9b08f4e241cac11a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 23 Oct 2023 13:53:39 +0800 Subject: [PATCH 005/380] chore: cls match --- docs/examples/debug.tsx | 14 +++++++++-- src/NewPicker/PickerPanel/DatePanel/index.tsx | 12 +++++++--- src/NewPicker/PickerPanel/PanelBody.tsx | 8 +++---- src/NewPicker/PickerPanel/context.ts | 2 ++ src/NewPicker/PickerPanel/index.tsx | 24 +++++++++++++++++-- 5 files changed, 48 insertions(+), 12 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 0b84c5d54..0546e5622 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -5,8 +5,13 @@ import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; import PickerPanel from '../../src/NewPicker/PickerPanel'; +import moment from 'moment'; +import 'moment/locale/zh-cn'; import momentGenerateConfig from '../../src/generate/moment'; -import enUS from '../../src/locale/en_US'; +import zhCN from '../../src/locale/zh_CN'; + +moment.locale('zh-cn'); +window.moment = moment; export default () => { const singleRef = React.useRef(null); @@ -26,7 +31,12 @@ export default () => { Focus - + date.date() === 11} + /> ); }; diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index 98fdde5c3..ac27505d2 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; -import { getWeekStartDate } from '../../../utils/dateUtil'; +import { getWeekStartDate, isSameDate, isSameMonth } from '../../../utils/dateUtil'; +import { PrefixClsContext } from '../../PickerInput/context'; import { PanelContext, PanelInfoContext, type PanelInfoProps } from '../context'; import PanelBody from '../PanelBody'; export default function DatePanel() { - const { pickerValue, locale, generateConfig } = React.useContext(PanelContext); + const prefixCls = React.useContext(PrefixClsContext); + const { value, pickerValue, locale, generateConfig, now } = React.useContext(PanelContext); // ======================= Base Date ======================== const baseDate = getWeekStartDate(locale.locale, generateConfig, pickerValue); @@ -18,7 +20,11 @@ export default function DatePanel() { return generateConfig.getDate(date); }; - const getCellClassName = () => ({}); + const getCellClassName = (date: DateType) => ({ + [`${prefixCls}-cell-in-view`]: isSameMonth(generateConfig, date, pickerValue), + [`${prefixCls}-cell-today`]: isSameDate(generateConfig, date, now), + [`${prefixCls}-cell-selected`]: isSameDate(generateConfig, date, value), + }); // ======================== Context ========================= const infoContext = React.useMemo( diff --git a/src/NewPicker/PickerPanel/PanelBody.tsx b/src/NewPicker/PickerPanel/PanelBody.tsx index 4dc5b8883..0c4e411fd 100644 --- a/src/NewPicker/PickerPanel/PanelBody.tsx +++ b/src/NewPicker/PickerPanel/PanelBody.tsx @@ -13,7 +13,7 @@ export interface PanelBodyProps { // Render getCellDate: (date: DateType, offset: number) => DateType; getCellText: (date: DateType) => React.ReactNode; - getCellClassName: (date: DateType) => Record; + getCellClassName: (date: DateType) => Record; // Used for week panel prefixColumn?: (date: DateType) => React.ReactNode; @@ -34,14 +34,12 @@ export default function PanelBody(props: PanelBodyProps = + const { disabledDate, generateConfig, cellRender, now }: PanelContextProps = React.useContext(PanelContext); const { type } = React.useContext(PanelInfoContext); const cellPrefixCls = `${prefixCls}-cell`; - const today = generateConfig.getNow(); - // =============================== Body =============================== const rows: React.ReactNode[] = []; @@ -94,7 +92,7 @@ export default function PanelBody(props: PanelBodyProps { locale: Locale; disabledDate?: DisabledDate; generateConfig: GenerateConfig; + value?: DateType; pickerValue: DateType; cellRender?: CellRender; + now: DateType; } /** Used for root PickerPanel */ diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 2ccd61e46..b1a152936 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -11,6 +11,10 @@ export interface PickerPanelProps { disabledDate?: DisabledDate; generateConfig: GenerateConfig; + // Value + defaultValue?: DateType | null; + value?: DateType | null; + // Panel control defaultPickerValue?: DateType | null; pickerValue?: DateType | null; @@ -18,6 +22,8 @@ export interface PickerPanelProps { // Cell cellRender?: CellRender; + + // Components } export default function PickerPanel(props: PickerPanelProps) { @@ -26,6 +32,10 @@ export default function PickerPanel(props: PickerPanelProps(props: PickerPanelProps(defaultValue, { + value, + }); + // ====================== PickerValue ======================= // PickerValue is used to control the current displaying panel const [mergedPickerValue, setPickerValue] = useMergedState( - defaultPickerValue || generateConfig.getNow(), + defaultPickerValue || mergedValue || now, { value: pickerValue, onChange: onPickerValueChange, @@ -53,10 +71,12 @@ export default function PickerPanel(props: PickerPanelProps Date: Mon, 23 Oct 2023 14:12:57 +0800 Subject: [PATCH 006/380] chore: move to --- src/NewPicker/PickerPanel/DatePanel/index.tsx | 14 ++++---- src/NewPicker/PickerPanel/PanelBody.tsx | 5 ++- src/NewPicker/PickerPanel/context.ts | 9 ++--- src/NewPicker/PickerPanel/index.tsx | 34 +++++++++++++++---- src/NewPicker/interface.tsx | 11 +++++- 5 files changed, 51 insertions(+), 22 deletions(-) diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index ac27505d2..ec86949ab 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -1,14 +1,15 @@ import * as React from 'react'; import { getWeekStartDate, isSameDate, isSameMonth } from '../../../utils/dateUtil'; -import { PrefixClsContext } from '../../PickerInput/context'; +import type { SharedPanelProps } from '../../interface'; import { PanelContext, PanelInfoContext, type PanelInfoProps } from '../context'; import PanelBody from '../PanelBody'; -export default function DatePanel() { - const prefixCls = React.useContext(PrefixClsContext); - const { value, pickerValue, locale, generateConfig, now } = React.useContext(PanelContext); +export default function DatePanel(props: SharedPanelProps) { + const { prefixCls, locale, generateConfig } = props; + const { value, pickerValue } = React.useContext(PanelContext); - // ======================= Base Date ======================== + // ========================== Base ========================== + const now = generateConfig.getNow(); const baseDate = getWeekStartDate(locale.locale, generateConfig, pickerValue); // ========================= Cells ========================== @@ -30,8 +31,9 @@ export default function DatePanel() { const infoContext = React.useMemo( () => ({ type: 'date', + now, }), - [], + [now], ); // ========================= Render ========================= diff --git a/src/NewPicker/PickerPanel/PanelBody.tsx b/src/NewPicker/PickerPanel/PanelBody.tsx index 0c4e411fd..669f86639 100644 --- a/src/NewPicker/PickerPanel/PanelBody.tsx +++ b/src/NewPicker/PickerPanel/PanelBody.tsx @@ -34,9 +34,8 @@ export default function PanelBody(props: PanelBodyProps = - React.useContext(PanelContext); - const { type } = React.useContext(PanelInfoContext); + const { disabledDate, cellRender }: PanelContextProps = React.useContext(PanelContext); + const { type, now } = React.useContext(PanelInfoContext); const cellPrefixCls = `${prefixCls}-cell`; diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index 66a81120b..90eb2dacd 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -1,22 +1,19 @@ import React from 'react'; -import type { GenerateConfig } from '../../generate'; -import type { CellRender, DisabledDate, Locale, PanelMode } from '../interface'; +import type { CellRender, DisabledDate, PanelMode } from '../interface'; export interface PanelContextProps { - locale: Locale; disabledDate?: DisabledDate; - generateConfig: GenerateConfig; value?: DateType; pickerValue: DateType; cellRender?: CellRender; - now: DateType; } /** Used for root PickerPanel */ export const PanelContext = React.createContext(null!); -export interface PanelInfoProps { +export interface PanelInfoProps { type: PanelMode; + now: DateType; } /** Used for each single Panel. e.g. DatePanel */ diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index b1a152936..b3f60de6c 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -1,11 +1,15 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; import type { GenerateConfig } from '../../generate'; -import type { CellRender, DisabledDate, Locale } from '../interface'; +import type { CellRender, Components, DisabledDate, Locale, PanelMode } from '../interface'; import { PrefixClsContext } from '../PickerInput/context'; import { PanelContext, type PanelContextProps } from './context'; import DatePanel from './DatePanel'; +const DefaultComponents: Components = { + date: DatePanel, +}; + export interface PickerPanelProps { locale: Locale; disabledDate?: DisabledDate; @@ -20,10 +24,15 @@ export interface PickerPanelProps { pickerValue?: DateType | null; onPickerValueChange?: (date: DateType) => void; + // Mode + mode?: PanelMode; + picker?: PanelMode; + // Cell cellRender?: CellRender; // Components + components?: Components; } export default function PickerPanel(props: PickerPanelProps) { @@ -41,8 +50,15 @@ export default function PickerPanel(props: PickerPanelProps(props: PickerPanelProps(picker, { + value: mode, + postState: (val) => val || 'date', + }); + // ======================== Context ========================= const panelContext = React.useMemo( () => ({ - locale, disabledDate, - generateConfig, value: mergedValue, pickerValue: mergedPickerValue, cellRender, - now, }), - [locale, disabledDate, generateConfig, mergedValue, mergedPickerValue, cellRender, now], + [disabledDate, mergedValue, mergedPickerValue, cellRender], ); + // ======================= Components ======================= + const PanelComponent = components[mergedMode] || DefaultComponents[mergedMode]; + // ========================= Render ========================= return ( - + ); } diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index cc76a0630..ad122295f 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -1,4 +1,5 @@ import type { AlignType } from '@rc-component/trigger'; +import type { GenerateConfig } from '../generate'; export type Locale = { locale: string; @@ -66,7 +67,15 @@ export type CellRender = ( ) => React.ReactNode; // ======================= Components ======================= -export type Components = Partial>; +export interface SharedPanelProps { + prefixCls: string; + locale: Locale; + generateConfig: GenerateConfig; +} + +export type Components = Partial< + Record>> +>; // ========================= Picker ========================= export type SemanticStructure = 'popup'; From 0351b47e0bafac76e5e15afc7a9c9bc55295cdb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 23 Oct 2023 14:31:36 +0800 Subject: [PATCH 007/380] chore: update logic --- src/NewPicker/PickerPanel/DatePanel/index.tsx | 23 ++++++-------- src/NewPicker/PickerPanel/PanelBody.tsx | 3 +- src/NewPicker/PickerPanel/context.ts | 30 ++++++++++++------- src/NewPicker/PickerPanel/index.tsx | 24 ++++++--------- src/NewPicker/interface.tsx | 11 +++++++ 5 files changed, 49 insertions(+), 42 deletions(-) diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index ec86949ab..1b6d4c92d 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -1,15 +1,14 @@ import * as React from 'react'; import { getWeekStartDate, isSameDate, isSameMonth } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../interface'; -import { PanelContext, PanelInfoContext, type PanelInfoProps } from '../context'; +import { PanelInfoContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; export default function DatePanel(props: SharedPanelProps) { - const { prefixCls, locale, generateConfig } = props; - const { value, pickerValue } = React.useContext(PanelContext); + const { prefixCls, locale, generateConfig, pickerValue, value } = props; // ========================== Base ========================== - const now = generateConfig.getNow(); + const [info, now] = useInfo(props); const baseDate = getWeekStartDate(locale.locale, generateConfig, pickerValue); // ========================= Cells ========================== @@ -27,18 +26,14 @@ export default function DatePanel(props: SharedPanelProps( - () => ({ - type: 'date', - now, - }), - [now], - ); - // ========================= Render ========================= return ( - + (props: PanelBodyProps = React.useContext(PanelContext); - const { type, now } = React.useContext(PanelInfoContext); + const { type, now, disabledDate, cellRender } = React.useContext(PanelInfoContext); const cellPrefixCls = `${prefixCls}-cell`; diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index 90eb2dacd..2613f33de 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -1,20 +1,28 @@ import React from 'react'; -import type { CellRender, DisabledDate, PanelMode } from '../interface'; - -export interface PanelContextProps { - disabledDate?: DisabledDate; - value?: DateType; - pickerValue: DateType; - cellRender?: CellRender; -} - -/** Used for root PickerPanel */ -export const PanelContext = React.createContext(null!); +import type { CellRender, DisabledDate, PanelMode, SharedPanelProps } from '../interface'; export interface PanelInfoProps { type: PanelMode; + + // Shared now: DateType; + disabledDate?: DisabledDate; + cellRender?: CellRender; } /** Used for each single Panel. e.g. DatePanel */ export const PanelInfoContext = React.createContext(null!); + +/** + * Get shared props for the SharedPanelProps interface. + */ +export function useInfo( + props: SharedPanelProps, +): [sharedProps: Omit, 'type'>, now: DateType] { + const { generateConfig, disabledDate, cellRender } = props; + + const now = generateConfig.getNow(); + const info = { disabledDate, cellRender, now }; + + return [info, now]; +} diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index b3f60de6c..04d336301 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -3,7 +3,6 @@ import * as React from 'react'; import type { GenerateConfig } from '../../generate'; import type { CellRender, Components, DisabledDate, Locale, PanelMode } from '../interface'; import { PrefixClsContext } from '../PickerInput/context'; -import { PanelContext, type PanelContextProps } from './context'; import DatePanel from './DatePanel'; const DefaultComponents: Components = { @@ -87,24 +86,19 @@ export default function PickerPanel(props: PickerPanelProps val || 'date', }); - // ======================== Context ========================= - const panelContext = React.useMemo( - () => ({ - disabledDate, - value: mergedValue, - pickerValue: mergedPickerValue, - cellRender, - }), - [disabledDate, mergedValue, mergedPickerValue, cellRender], - ); - // ======================= Components ======================= const PanelComponent = components[mergedMode] || DefaultComponents[mergedMode]; // ========================= Render ========================= return ( - - - + ); } diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index ad122295f..c6256b7c6 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -68,9 +68,20 @@ export type CellRender = ( // ======================= Components ======================= export interface SharedPanelProps { + // Style prefixCls: string; + + // Date Library locale: Locale; generateConfig: GenerateConfig; + + // Value + pickerValue: DateType; + value?: DateType; + + // Render + disabledDate?: DisabledDate; + cellRender?: CellRender; } export type Components = Partial< From 9cf7342b5d1bb1bafbcd0aeee98c08e8c154e5c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 23 Oct 2023 14:50:40 +0800 Subject: [PATCH 008/380] chore: onChange --- docs/examples/debug.tsx | 2 +- src/NewPicker/PickerPanel/DatePanel/index.tsx | 6 +++--- src/NewPicker/PickerPanel/PanelBody.tsx | 14 +++++++------- src/NewPicker/PickerPanel/context.ts | 11 ++++++----- src/NewPicker/PickerPanel/index.tsx | 10 ++++++++++ src/NewPicker/interface.tsx | 1 + 6 files changed, 28 insertions(+), 16 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 0546e5622..c70d64fa3 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -32,7 +32,7 @@ export default () => { date.date() === 11} diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index 1b6d4c92d..a32f901fc 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { getWeekStartDate, isSameDate, isSameMonth } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../interface'; -import { PanelInfoContext, useInfo } from '../context'; +import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; export default function DatePanel(props: SharedPanelProps) { @@ -28,7 +28,7 @@ export default function DatePanel(props: SharedPanelProps(props: SharedPanelProps - + ); } diff --git a/src/NewPicker/PickerPanel/PanelBody.tsx b/src/NewPicker/PickerPanel/PanelBody.tsx index 82c9bef57..3830cbb11 100644 --- a/src/NewPicker/PickerPanel/PanelBody.tsx +++ b/src/NewPicker/PickerPanel/PanelBody.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; import { PrefixClsContext } from '../PickerInput/context'; -import { PanelContext, PanelInfoContext, type PanelContextProps } from './context'; +import { PanelContext } from './context'; export interface PanelBodyProps { rowNum: number; @@ -34,7 +34,7 @@ export default function PanelBody(props: PanelBodyProps(props: PanelBodyProps { - // if (!disabled) { - // onSelect(currentDate); - // } - // }} + onClick={() => { + if (!disabled) { + onChange(currentDate); + } + }} // onMouseEnter={() => { // if (!disabled && onDateMouseEnter) { // onDateMouseEnter(currentDate); diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index 2613f33de..e89a3bffe 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -1,28 +1,29 @@ import React from 'react'; import type { CellRender, DisabledDate, PanelMode, SharedPanelProps } from '../interface'; -export interface PanelInfoProps { +export interface PanelProps { type: PanelMode; // Shared now: DateType; disabledDate?: DisabledDate; cellRender?: CellRender; + onChange: (date: DateType) => void; } /** Used for each single Panel. e.g. DatePanel */ -export const PanelInfoContext = React.createContext(null!); +export const PanelContext = React.createContext(null!); /** * Get shared props for the SharedPanelProps interface. */ export function useInfo( props: SharedPanelProps, -): [sharedProps: Omit, 'type'>, now: DateType] { - const { generateConfig, disabledDate, cellRender } = props; +): [sharedProps: Omit, 'type'>, now: DateType] { + const { generateConfig, disabledDate, cellRender, onChange } = props; const now = generateConfig.getNow(); - const info = { disabledDate, cellRender, now }; + const info = { disabledDate, cellRender, onChange, now }; return [info, now]; } diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 04d336301..06aaf0c0e 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -17,6 +17,7 @@ export interface PickerPanelProps { // Value defaultValue?: DateType | null; value?: DateType | null; + onChange?: (date: DateType) => void; // Panel control defaultPickerValue?: DateType | null; @@ -43,6 +44,7 @@ export default function PickerPanel(props: PickerPanelProps(props: PickerPanelProps { + setMergedValue(newVal); + onChange?.(newVal); + }; + // ====================== PickerValue ======================= // PickerValue is used to control the current displaying panel const [mergedPickerValue, setPickerValue] = useMergedState( @@ -95,8 +102,11 @@ export default function PickerPanel(props: PickerPanelProps diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index c6256b7c6..c6e72191e 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -78,6 +78,7 @@ export interface SharedPanelProps { // Value pickerValue: DateType; value?: DateType; + onChange: (date: DateType) => void; // Render disabledDate?: DisabledDate; From 64a20b2e62d3541f631b837cc34fb4c565bffac6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 23 Oct 2023 16:42:15 +0800 Subject: [PATCH 009/380] chore: header --- docs/examples/debug.tsx | 7 +- src/NewPicker/PickerInput/context.tsx | 2 +- src/NewPicker/PickerPanel/DatePanel/index.tsx | 73 +++++++++++- src/NewPicker/PickerPanel/PanelBody.tsx | 9 +- src/NewPicker/PickerPanel/PanelHeader.tsx | 109 ++++++++++++++++++ src/NewPicker/PickerPanel/context.ts | 18 ++- src/NewPicker/PickerPanel/index.tsx | 16 ++- src/NewPicker/interface.tsx | 6 + 8 files changed, 226 insertions(+), 14 deletions(-) create mode 100644 src/NewPicker/PickerPanel/PanelHeader.tsx diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index c70d64fa3..10ab0dde0 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -5,7 +5,7 @@ import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; import PickerPanel from '../../src/NewPicker/PickerPanel'; -import moment from 'moment'; +import moment, { Moment } from 'moment'; import 'moment/locale/zh-cn'; import momentGenerateConfig from '../../src/generate/moment'; import zhCN from '../../src/locale/zh_CN'; @@ -36,6 +36,11 @@ export default () => { locale={zhCN} generateConfig={momentGenerateConfig} disabledDate={(date) => date.date() === 11} + cellRender={(date: Moment, info) => { + if (info.type === 'date') { + return date.format('Do'); + } + }} /> ); diff --git a/src/NewPicker/PickerInput/context.tsx b/src/NewPicker/PickerInput/context.tsx index 05ce6ab75..701626118 100644 --- a/src/NewPicker/PickerInput/context.tsx +++ b/src/NewPicker/PickerInput/context.tsx @@ -1,3 +1,3 @@ import * as React from 'react'; -export const PrefixClsContext = React.createContext('rc-picker'); +export const PrefixClsContext = React.createContext(''); diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index a32f901fc..2f6e0b8c3 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -1,15 +1,25 @@ import * as React from 'react'; -import { getWeekStartDate, isSameDate, isSameMonth } from '../../../utils/dateUtil'; +import { formatValue, getWeekStartDate, isSameDate, isSameMonth } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../interface'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; +import PanelHeader from '../PanelHeader'; export default function DatePanel(props: SharedPanelProps) { - const { prefixCls, locale, generateConfig, pickerValue, value } = props; + const { + prefixCls, + locale, + generateConfig, + pickerValue, + value, + onPickerValueChange, + onModeChange, + } = props; // ========================== Base ========================== const [info, now] = useInfo(props); const baseDate = getWeekStartDate(locale.locale, generateConfig, pickerValue); + const month = generateConfig.getMonth(pickerValue); // ========================= Cells ========================== const getCellDate = (date: DateType, offset: number) => { @@ -26,6 +36,52 @@ export default function DatePanel(props: SharedPanelProps { + onModeChange('year'); + }} + tabIndex={-1} + className={`${prefixCls}-year-btn`} + > + {formatValue(pickerValue, { + locale, + format: locale.yearFormat, + generateConfig, + })} + + ); + const monthNode: React.ReactNode = ( + + ); + + const monthYearNodes = locale.monthBeforeYear ? [monthNode, yearNode] : [yearNode, monthNode]; + // ========================= Render ========================= return ( (props: SharedPanelProps + {/* Header */} + { + onPickerValueChange(generateConfig.addMonth(pickerValue, offset)); + }} + onSuperOffset={(offset) => { + onPickerValueChange(generateConfig.addYear(pickerValue, offset)); + }} + > + {monthYearNodes} + + + {/* Body */} { @@ -33,8 +32,8 @@ export default function PanelBody(props: PanelBodyProps(props: PanelBodyProps {cellRender ? cellRender(currentDate, { + prefixCls, originNode: inner, today: now, // range?: 'start' | 'end'; type, - // locale?: Locale; - // subType?: 'hour' | 'minute' | 'second' | 'meridiem'; + locale, }) : inner} , diff --git a/src/NewPicker/PickerPanel/PanelHeader.tsx b/src/NewPicker/PickerPanel/PanelHeader.tsx new file mode 100644 index 000000000..46e47a75b --- /dev/null +++ b/src/NewPicker/PickerPanel/PanelHeader.tsx @@ -0,0 +1,109 @@ +import * as React from 'react'; +import { PanelContext } from './context'; + +const HIDDEN_STYLE: React.CSSProperties = { + visibility: 'hidden', +}; + +export interface HeaderProps { + // Icons + prevIcon?: React.ReactNode; + nextIcon?: React.ReactNode; + superPrevIcon?: React.ReactNode; + superNextIcon?: React.ReactNode; + // /** Last one step */ + // onPrev?: () => void; + // /** Next one step */ + // onNext?: () => void; + // /** Last multiple steps */ + // onSuperPrev?: () => void; + // /** Next multiple steps */ + // onSuperNext?: () => void; + + onOffset?: (offset: number) => void; + onSuperOffset?: (offset: number) => void; + + children?: React.ReactNode; +} + +function PanelHeader(props: HeaderProps) { + const { + onOffset, + onSuperOffset, + + // Icons + prevIcon = '\u2039', + nextIcon = '\u203A', + superPrevIcon = '\u00AB', + superNextIcon = '\u00BB', + + children, + } = props; + + const { prefixCls } = React.useContext(PanelContext); + + const headerPrefixCls = `${prefixCls}-header`; + + // const { + // prefixCls, + + // onSuperPrev, + // onSuperNext, + // onPrev, + // onNext, + // children, + // } = props; + // const { hideNextBtn, hidePrevBtn } = React.useContext(PanelContext); + + return ( +
+ {onSuperOffset && ( + + )} + {onOffset && ( + + )} +
{children}
+ {onOffset && ( + + )} + {onSuperOffset && ( + + )} +
+ ); +} + +export default PanelHeader; diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index e89a3bffe..d1430889e 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -1,14 +1,17 @@ import React from 'react'; -import type { CellRender, DisabledDate, PanelMode, SharedPanelProps } from '../interface'; +import type { CellRender, DisabledDate, Locale, PanelMode, SharedPanelProps } from '../interface'; export interface PanelProps { type: PanelMode; // Shared + prefixCls: string; now: DateType; disabledDate?: DisabledDate; + titleRender?: CellRender; cellRender?: CellRender; onChange: (date: DateType) => void; + locale: Locale; } /** Used for each single Panel. e.g. DatePanel */ @@ -20,10 +23,19 @@ export const PanelContext = React.createContext(null!); export function useInfo( props: SharedPanelProps, ): [sharedProps: Omit, 'type'>, now: DateType] { - const { generateConfig, disabledDate, cellRender, onChange } = props; + const { prefixCls, generateConfig, locale, disabledDate, cellRender, titleRender, onChange } = + props; const now = generateConfig.getNow(); - const info = { disabledDate, cellRender, onChange, now }; + const info = { + now, + prefixCls, + disabledDate, + cellRender, + titleRender, + onChange, + locale, + }; return [info, now]; } diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 06aaf0c0e..21033a9e3 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -14,6 +14,9 @@ export interface PickerPanelProps { disabledDate?: DisabledDate; generateConfig: GenerateConfig; + // Style + prefixCls?: string; + // Value defaultValue?: DateType | null; value?: DateType | null; @@ -26,6 +29,7 @@ export interface PickerPanelProps { // Mode mode?: PanelMode; + onModeChange?: (mode: PanelMode) => void; picker?: PanelMode; // Cell @@ -41,6 +45,9 @@ export default function PickerPanel(props: PickerPanelProps(props: PickerPanelProps(props: PickerPanelProps(props: PickerPanelProps(picker, { value: mode, postState: (val) => val || 'date', + onChange: onModeChange, }); // ======================= Components ======================= @@ -99,11 +108,14 @@ export default function PickerPanel(props: PickerPanelProps = ( ) => boolean; export type CellRenderInfo = { + prefixCls: string; // The cell wrapper element originNode: React.ReactElement; today: DateType; @@ -77,11 +78,16 @@ export interface SharedPanelProps { // Value pickerValue: DateType; + onPickerValueChange: (date: DateType) => void; value?: DateType; onChange: (date: DateType) => void; + // Mode + onModeChange: (mode: PanelMode) => void; + // Render disabledDate?: DisabledDate; + titleRender?: CellRender; cellRender?: CellRender; } From 65e6bcf05e9a07ff36f4b74bf8752e8319e4376c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 23 Oct 2023 17:02:21 +0800 Subject: [PATCH 010/380] chore: fix format --- docs/examples/debug.tsx | 12 ++++++------ src/NewPicker/PickerPanel/DatePanel/index.tsx | 6 +++++- src/NewPicker/PickerPanel/PanelBody.tsx | 1 - src/NewPicker/PickerPanel/context.ts | 5 +---- src/NewPicker/PickerPanel/index.tsx | 2 +- src/NewPicker/interface.tsx | 1 - src/locale/ja_JP.ts | 2 +- src/locale/zh_CN.ts | 2 +- src/locale/zh_TW.ts | 2 +- 9 files changed, 16 insertions(+), 17 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 10ab0dde0..4a1fe0ee0 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -5,7 +5,7 @@ import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; import PickerPanel from '../../src/NewPicker/PickerPanel'; -import moment, { Moment } from 'moment'; +import moment from 'moment'; import 'moment/locale/zh-cn'; import momentGenerateConfig from '../../src/generate/moment'; import zhCN from '../../src/locale/zh_CN'; @@ -36,11 +36,11 @@ export default () => { locale={zhCN} generateConfig={momentGenerateConfig} disabledDate={(date) => date.date() === 11} - cellRender={(date: Moment, info) => { - if (info.type === 'date') { - return date.format('Do'); - } - }} + // cellRender={(date: Moment, info) => { + // if (info.type === 'date') { + // return date.format('Do'); + // } + // }} /> ); diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index 2f6e0b8c3..4e847a854 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -27,7 +27,11 @@ export default function DatePanel(props: SharedPanelProps { - return generateConfig.getDate(date); + return formatValue(date, { + locale, + format: locale.dayFormat, + generateConfig, + }); }; const getCellClassName = (date: DateType) => ({ diff --git a/src/NewPicker/PickerPanel/PanelBody.tsx b/src/NewPicker/PickerPanel/PanelBody.tsx index fc2dcf230..c0eb98ed4 100644 --- a/src/NewPicker/PickerPanel/PanelBody.tsx +++ b/src/NewPicker/PickerPanel/PanelBody.tsx @@ -91,7 +91,6 @@ export default function PanelBody(props: PanelBodyProps { prefixCls: string; now: DateType; disabledDate?: DisabledDate; - titleRender?: CellRender; cellRender?: CellRender; onChange: (date: DateType) => void; locale: Locale; @@ -23,8 +22,7 @@ export const PanelContext = React.createContext(null!); export function useInfo( props: SharedPanelProps, ): [sharedProps: Omit, 'type'>, now: DateType] { - const { prefixCls, generateConfig, locale, disabledDate, cellRender, titleRender, onChange } = - props; + const { prefixCls, generateConfig, locale, disabledDate, cellRender, onChange } = props; const now = generateConfig.getNow(); const info = { @@ -32,7 +30,6 @@ export function useInfo( prefixCls, disabledDate, cellRender, - titleRender, onChange, locale, }; diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 21033a9e3..449011166 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -103,7 +103,7 @@ export default function PickerPanel(props: PickerPanelProps { // Render disabledDate?: DisabledDate; - titleRender?: CellRender; cellRender?: CellRender; } diff --git a/src/locale/ja_JP.ts b/src/locale/ja_JP.ts index f4d3985f9..adae50555 100644 --- a/src/locale/ja_JP.ts +++ b/src/locale/ja_JP.ts @@ -18,7 +18,7 @@ const locale: Locale = { yearSelect: 'ๅนดใ‚’้ธๆŠž', decadeSelect: 'ๅนดไปฃใ‚’้ธๆŠž', yearFormat: 'YYYYๅนด', - dayFormat: 'Dๆ—ฅ', + dayFormat: 'D', dateFormat: 'YYYYๅนดMๆœˆDๆ—ฅ', dateTimeFormat: 'YYYYๅนดMๆœˆDๆ—ฅ HHๆ™‚mmๅˆ†ss็ง’', previousYear: 'ๅ‰ๅนด (Controlใ‚’ๆŠผใ—ใชใŒใ‚‰ๅทฆใ‚ญใƒผ)', diff --git a/src/locale/zh_CN.ts b/src/locale/zh_CN.ts index 0b0495bae..f5e60fe22 100644 --- a/src/locale/zh_CN.ts +++ b/src/locale/zh_CN.ts @@ -18,7 +18,7 @@ const locale: Locale = { yearSelect: '้€‰ๆ‹ฉๅนดไปฝ', decadeSelect: '้€‰ๆ‹ฉๅนดไปฃ', yearFormat: 'YYYYๅนด', - dayFormat: 'Dๆ—ฅ', + dayFormat: 'D', dateFormat: 'YYYYๅนดMๆœˆDๆ—ฅ', dateTimeFormat: 'YYYYๅนดMๆœˆDๆ—ฅ HHๆ—ถmmๅˆ†ss็ง’', previousYear: 'ไธŠไธ€ๅนด (Control้”ฎๅŠ ๅทฆๆ–นๅ‘้”ฎ)', diff --git a/src/locale/zh_TW.ts b/src/locale/zh_TW.ts index 47bd3b03a..8ba60d8e9 100644 --- a/src/locale/zh_TW.ts +++ b/src/locale/zh_TW.ts @@ -19,7 +19,7 @@ const locale: Locale = { yearSelect: '้ธๆ“‡ๅนดไปฝ', decadeSelect: '้ธๆ“‡ๅนดไปฃ', yearFormat: 'YYYYๅนด', - dayFormat: 'Dๆ—ฅ', + dayFormat: 'D', dateFormat: 'YYYYๅนดMๆœˆDๆ—ฅ', dateTimeFormat: 'YYYYๅนดMๆœˆDๆ—ฅ HHๆ™‚mmๅˆ†ss็ง’', previousYear: 'ไธŠไธ€ๅนด (Control้ตๅŠ ๅทฆๆ–นๅ‘้ต)', From 0de164fc6210b74ac7c35ab711abb68f767e357f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 23 Oct 2023 17:15:00 +0800 Subject: [PATCH 011/380] chore: inner header --- src/NewPicker/PickerPanel/DatePanel/index.tsx | 31 +++++++++++++++++-- src/NewPicker/PickerPanel/PanelBody.tsx | 8 +++-- 2 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index 4e847a854..15faab5ea 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -1,5 +1,11 @@ import * as React from 'react'; -import { formatValue, getWeekStartDate, isSameDate, isSameMonth } from '../../../utils/dateUtil'; +import { + formatValue, + getWeekStartDate, + isSameDate, + isSameMonth, + WEEK_DAY_COUNT, +} from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../interface'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; @@ -18,10 +24,27 @@ export default function DatePanel(props: SharedPanelProps>> Header Cells + const headerCells: React.ReactNode[] = []; + const weekDaysLocale: string[] = + locale.shortWeekDays || + (generateConfig.locale.getShortWeekDays + ? generateConfig.locale.getShortWeekDays(locale.locale) + : []); + + // if (prefixColumn) { + // headerCells.push(); + // } + for (let i = 0; i < WEEK_DAY_COUNT; i += 1) { + headerCells.push({weekDaysLocale[(i + weekFirstDay) % WEEK_DAY_COUNT]}); + } + + // >>> Body Cells const getCellDate = (date: DateType, offset: number) => { return generateConfig.addDate(date, offset); }; @@ -108,10 +131,12 @@ export default function DatePanel(props: SharedPanelProps { getCellText: (date: DateType) => React.ReactNode; getCellClassName: (date: DateType) => Record; + // Used for date panel + headerCells?: React.ReactNode[]; + // Used for week panel prefixColumn?: (date: DateType) => React.ReactNode; rowClassName?: (date: DateType) => string; @@ -30,6 +33,7 @@ export default function PanelBody(props: PanelBodyProps(props: PanelBodyProps - {/* {headerCells && ( + {headerCells && ( {headerCells} - )} */} + )} {rows}
From 20366ded7ae8e4d3ecf14b6cfe0b50e47156d7b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 23 Oct 2023 19:48:34 +0800 Subject: [PATCH 012/380] chore: update --- docs/examples/debug.tsx | 37 ++++++--- src/NewPicker/PickerPanel/DatePanel/index.tsx | 72 +++++++++++------- src/NewPicker/PickerPanel/PanelBody.tsx | 22 +++--- src/NewPicker/PickerPanel/WeekPanel/index.tsx | 76 +++++++++++++++++++ src/NewPicker/PickerPanel/context.ts | 4 +- src/NewPicker/PickerPanel/index.tsx | 38 ++++++---- src/NewPicker/interface.tsx | 1 + src/utils/dateUtil.ts | 9 ++- 8 files changed, 191 insertions(+), 68 deletions(-) create mode 100644 src/NewPicker/PickerPanel/WeekPanel/index.tsx diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 4a1fe0ee0..12f4c0343 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -13,6 +13,15 @@ import zhCN from '../../src/locale/zh_CN'; moment.locale('zh-cn'); window.moment = moment; +function CellPicker(props: any) { + return ( +
+
{props.picker || 'date'}
+ +
+ ); +} + export default () => { const singleRef = React.useRef(null); @@ -31,17 +40,23 @@ export default () => { Focus - date.date() === 11} - // cellRender={(date: Moment, info) => { - // if (info.type === 'date') { - // return date.format('Do'); - // } - // }} - /> +
+ date.date() === 11} + // cellRender={(date: Moment, info) => { + // if (info.type === 'date') { + // return date.format('Do'); + // } + // }} + /> + + date.week() === 3} + /> +
); }; diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index 15faab5ea..085adffad 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import * as React from 'react'; import { formatValue, @@ -6,22 +7,32 @@ import { isSameMonth, WEEK_DAY_COUNT, } from '../../../utils/dateUtil'; -import type { SharedPanelProps } from '../../interface'; +import type { PanelMode, SharedPanelProps } from '../../interface'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; -export default function DatePanel(props: SharedPanelProps) { +export interface DatePanelProps extends SharedPanelProps { + panelName?: PanelMode; + prefixColumn?: (date: DateType) => React.ReactNode; + rowClassName?: (date: DateType) => string; +} + +export default function DatePanel(props: DatePanelProps) { const { prefixCls, + panelName = 'date', locale, generateConfig, pickerValue, value, onPickerValueChange, onModeChange, + prefixColumn, } = props; + const panelPrefixCls = `${prefixCls}-${panelName}-panel`; + // ========================== Base ========================== const [info, now] = useInfo(props); const weekFirstDay = generateConfig.locale.getWeekFirstDay(locale.locale); @@ -37,9 +48,9 @@ export default function DatePanel(props: SharedPanelProps); - // } + if (prefixColumn) { + headerCells.push(); + } for (let i = 0; i < WEEK_DAY_COUNT; i += 1) { headerCells.push({weekDaysLocale[(i + weekFirstDay) % WEEK_DAY_COUNT]}); } @@ -117,30 +128,37 @@ export default function DatePanel(props: SharedPanelProps - {/* Header */} - { - onPickerValueChange(generateConfig.addMonth(pickerValue, offset)); - }} - onSuperOffset={(offset) => { - onPickerValueChange(generateConfig.addYear(pickerValue, offset)); - }} +
- {monthYearNodes} - + {/* Header */} + { + onPickerValueChange(generateConfig.addMonth(pickerValue, offset)); + }} + onSuperOffset={(offset) => { + onPickerValueChange(generateConfig.addYear(pickerValue, offset)); + }} + > + {monthYearNodes} + - {/* Body */} - + {/* Body */} + +
); } diff --git a/src/NewPicker/PickerPanel/PanelBody.tsx b/src/NewPicker/PickerPanel/PanelBody.tsx index 36f1d5472..408ed7758 100644 --- a/src/NewPicker/PickerPanel/PanelBody.tsx +++ b/src/NewPicker/PickerPanel/PanelBody.tsx @@ -36,7 +36,7 @@ export default function PanelBody(props: PanelBodyProps(props: PanelBodyProps { - // if (!disabled && onDateMouseEnter) { - // onDateMouseEnter(currentDate); - // } - // }} - // onMouseLeave={() => { - // if (!disabled && onDateMouseLeave) { - // onDateMouseLeave(currentDate); - // } - // }} + onMouseEnter={() => { + if (!disabled) { + onHover(currentDate); + } + }} + onMouseLeave={() => { + if (!disabled) { + onHover(null); + } + }} > {cellRender ? cellRender(currentDate, { diff --git a/src/NewPicker/PickerPanel/WeekPanel/index.tsx b/src/NewPicker/PickerPanel/WeekPanel/index.tsx new file mode 100644 index 000000000..7225c1dd2 --- /dev/null +++ b/src/NewPicker/PickerPanel/WeekPanel/index.tsx @@ -0,0 +1,76 @@ +import classNames from 'classnames'; +import * as React from 'react'; +import { isSameWeek } from '../../../utils/dateUtil'; +import type { SharedPanelProps } from '../../interface'; +import DatePanel from '../DatePanel'; + +export default function WeekPanel(props: SharedPanelProps) { + const { disabledDate, prefixCls, onChange, onHover, generateConfig, locale, value } = props; + + const cellPrefixCls = `${prefixCls}-cell`; + + // =========================== PrefixColumn =========================== + const prefixColumn = (date: DateType) => { + // >>> Additional check for disabled + const disabled = disabledDate?.(date, { type: 'week' }); + + return ( + { + if (!disabled) { + onChange(date); + } + }} + onMouseEnter={() => { + if (!disabled) { + onHover(date); + } + }} + onMouseLeave={() => { + if (!disabled) { + onHover(null); + } + }} + > +
+ {generateConfig.locale.getWeek(locale.locale, date)} +
+ + ); + }; + + // =============================== Row ================================ + const rowPrefixCls = `${prefixCls}-week-panel-row`; + + const rowClassName = (date: DateType) => { + // const isRangeStart = isSameWeek(generateConfig, locale.locale, rangeStart, date); + // const isRangeEnd = isSameWeek(generateConfig, locale.locale, rangeEnd, date); + + return classNames(rowPrefixCls, { + [`${rowPrefixCls}-selected`]: isSameWeek(generateConfig, locale.locale, value, date), + // [`${rowPrefixCls}-selected`]: + // !rangedValue && isSameWeek(generateConfig, locale.locale, value, date), + + // Patch for hover range + // [`${rowPrefixCls}-range-start`]: isRangeStart, + // [`${rowPrefixCls}-range-end`]: isRangeEnd, + // [`${rowPrefixCls}-range-hover`]: + // !isRangeStart && !isRangeEnd && isInRange(generateConfig, rangeStart, rangeEnd, date), + }); + }; + + // ============================== Render ============================== + return ( + + ); +} diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index d06d33ec8..758601c04 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -11,6 +11,7 @@ export interface PanelProps { cellRender?: CellRender; onChange: (date: DateType) => void; locale: Locale; + onHover: (date: DateType | null) => void; } /** Used for each single Panel. e.g. DatePanel */ @@ -22,7 +23,7 @@ export const PanelContext = React.createContext(null!); export function useInfo( props: SharedPanelProps, ): [sharedProps: Omit, 'type'>, now: DateType] { - const { prefixCls, generateConfig, locale, disabledDate, cellRender, onChange } = props; + const { prefixCls, generateConfig, locale, disabledDate, cellRender, onChange, onHover } = props; const now = generateConfig.getNow(); const info = { @@ -31,6 +32,7 @@ export function useInfo( disabledDate, cellRender, onChange, + onHover, locale, }; diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 449011166..28abd6065 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -4,9 +4,11 @@ import type { GenerateConfig } from '../../generate'; import type { CellRender, Components, DisabledDate, Locale, PanelMode } from '../interface'; import { PrefixClsContext } from '../PickerInput/context'; import DatePanel from './DatePanel'; +import WeekPanel from './WeekPanel'; const DefaultComponents: Components = { date: DatePanel, + week: WeekPanel, }; export interface PickerPanelProps { @@ -95,6 +97,9 @@ export default function PickerPanel(props: PickerPanelProps(null); + // ========================== Mode ========================== const [mergedMode, setMergedMode] = useMergedState(picker, { value: mode, @@ -107,20 +112,23 @@ export default function PickerPanel(props: PickerPanelProps +
+ +
); } diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index b2616017c..8119d4cb9 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -88,6 +88,7 @@ export interface SharedPanelProps { // Render disabledDate?: DisabledDate; cellRender?: CellRender; + onHover: (value: DateType | null) => void; } export type Components = Partial< diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts index d78e57c50..a6e19bcc6 100644 --- a/src/utils/dateUtil.ts +++ b/src/utils/dateUtil.ts @@ -1,5 +1,5 @@ -import type { PanelMode, NullableDateType, PickerMode, Locale, CustomFormat } from '../interface'; import type { GenerateConfig } from '../generate'; +import type { CustomFormat, Locale, NullableDateType, PanelMode, PickerMode } from '../interface'; import { DECADE_UNIT_DIFF } from '../panels/DecadePanel/constant'; export const WEEK_DAY_COUNT = 7; @@ -124,9 +124,12 @@ export function isSameWeek( return equal; } + const weekStartDate1 = getWeekStartDate(locale, generateConfig, date1); + const weekStartDate2 = getWeekStartDate(locale, generateConfig, date2); + return ( - isSameYear(generateConfig, date1!, date2!) && - generateConfig.locale.getWeek(locale, date1!) === generateConfig.locale.getWeek(locale, date2!) + isSameYear(generateConfig, weekStartDate1, weekStartDate2) && + generateConfig.locale.getWeek(locale, date1) === generateConfig.locale.getWeek(locale, date2) ); } From da42f8b6ace5613f9999c4d1f56de7150c5ac1f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 23 Oct 2023 19:59:43 +0800 Subject: [PATCH 013/380] chore: month picker --- docs/examples/debug.tsx | 6 + .../PickerPanel/MonthPanel/index.tsx | 114 ++++++++++++++++++ src/NewPicker/PickerPanel/index.tsx | 2 + 3 files changed, 122 insertions(+) create mode 100644 src/NewPicker/PickerPanel/MonthPanel/index.tsx diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 12f4c0343..d539141b0 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -56,6 +56,12 @@ export default () => { defaultValue={moment('2000-01-01')} disabledDate={(date) => date.week() === 3} /> + + date.week() === 3} + /> ); diff --git a/src/NewPicker/PickerPanel/MonthPanel/index.tsx b/src/NewPicker/PickerPanel/MonthPanel/index.tsx new file mode 100644 index 000000000..fbd0be4db --- /dev/null +++ b/src/NewPicker/PickerPanel/MonthPanel/index.tsx @@ -0,0 +1,114 @@ +import classNames from 'classnames'; +import * as React from 'react'; +import { formatValue, isSameMonth } from '../../../utils/dateUtil'; +import type { SharedPanelProps } from '../../interface'; +import { PanelContext, useInfo } from '../context'; +import PanelBody from '../PanelBody'; +import PanelHeader from '../PanelHeader'; + +export default function MonthPanel(props: SharedPanelProps) { + const { + prefixCls, + locale, + generateConfig, + pickerValue, + value, + onPickerValueChange, + onModeChange, + } = props; + + const panelPrefixCls = `${prefixCls}-month-panel`; + + // ========================== Base ========================== + const [info, now] = useInfo(props); + const baseDate = generateConfig.setMonth(pickerValue, 0); + + // ========================= Month ========================== + const monthsLocale: string[] = + locale.shortMonths || + (generateConfig.locale.getShortMonths + ? generateConfig.locale.getShortMonths(locale.locale) + : []); + + // ========================= Cells ========================== + const getCellDate = (date: DateType, offset: number) => { + return generateConfig.addMonth(date, offset); + }; + + const getCellText = (date: DateType) => { + const month = generateConfig.getMonth(date); + + return locale.monthFormat + ? formatValue(date, { + locale, + format: locale.monthFormat, + generateConfig, + }) + : monthsLocale[month]; + }; + + const getCellClassName = (date: DateType) => ({ + [`${prefixCls}-cell-in-view`]: true, + [`${prefixCls}-cell-today`]: isSameMonth(generateConfig, date, now), + [`${prefixCls}-cell-selected`]: isSameMonth(generateConfig, date, value), + }); + + // ========================= Header ========================= + const yearNode: React.ReactNode = ( + + ); + + // ========================= Render ========================= + return ( + +
+ {/* Header */} + { + onPickerValueChange(generateConfig.addYear(pickerValue, offset)); + }} + onSuperOffset={(offset) => { + onPickerValueChange(generateConfig.addYear(pickerValue, offset * 10)); + }} + > + {yearNode} + + + {/* Body */} + +
+ + ); +} diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 28abd6065..362972998 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -4,11 +4,13 @@ import type { GenerateConfig } from '../../generate'; import type { CellRender, Components, DisabledDate, Locale, PanelMode } from '../interface'; import { PrefixClsContext } from '../PickerInput/context'; import DatePanel from './DatePanel'; +import MonthPanel from './MonthPanel'; import WeekPanel from './WeekPanel'; const DefaultComponents: Components = { date: DatePanel, week: WeekPanel, + month: MonthPanel, }; export interface PickerPanelProps { From 4f0cfd12b4a25dd3133a8fbfdce9610ed60bd4df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 24 Oct 2023 10:29:30 +0800 Subject: [PATCH 014/380] chore: year picker --- docs/examples/debug.tsx | 12 ++ .../PickerPanel/DecadePanel/index.tsx | 110 +++++++++++++++++ .../PickerPanel/MonthPanel/index.tsx | 3 - src/NewPicker/PickerPanel/YearPanel/index.tsx | 115 ++++++++++++++++++ src/NewPicker/PickerPanel/index.tsx | 4 + src/NewPicker/interface.tsx | 19 ++- src/interface.ts | 41 +------ 7 files changed, 259 insertions(+), 45 deletions(-) create mode 100644 src/NewPicker/PickerPanel/DecadePanel/index.tsx create mode 100644 src/NewPicker/PickerPanel/YearPanel/index.tsx diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index d539141b0..a50eb8b43 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -62,6 +62,18 @@ export default () => { defaultValue={moment('2000-01-01')} disabledDate={(date) => date.week() === 3} /> + + date.week() === 3} + /> + + date.week() === 3} + /> ); diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx new file mode 100644 index 000000000..fb0f46357 --- /dev/null +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -0,0 +1,110 @@ +import classNames from 'classnames'; +import * as React from 'react'; +import { formatValue, isSameDecade } from '../../../utils/dateUtil'; +import type { SharedPanelProps } from '../../interface'; +import { PanelContext, useInfo } from '../context'; +import PanelBody from '../PanelBody'; +import PanelHeader from '../PanelHeader'; + +export default function DecadePanel(props: SharedPanelProps) { + const { + prefixCls, + locale, + generateConfig, + pickerValue, + value, + onPickerValueChange, + onModeChange, + } = props; + + const panelPrefixCls = `${prefixCls}-decade-panel`; + + // ========================== Base ========================== + const [info, now] = useInfo(props); + const startYear = Math.floor(generateConfig.getYear(pickerValue) / 100) * 100; + const endYear = startYear + 99; + + const baseDate = generateConfig.setYear(pickerValue, startYear - 10); + + const startYearDate = generateConfig.setYear(baseDate, startYear); + const endYearDate = generateConfig.setYear(startYearDate, endYear); + + // ========================= Cells ========================== + const getCellDate = (date: DateType, offset: number) => { + return generateConfig.addYear(date, offset * 10); + }; + + const getCellText = (date: DateType) => { + const yearCellFormat = locale.yearCellFormat || 'YYYY'; + + const startYearStr = formatValue(date, { + locale, + format: yearCellFormat, + generateConfig, + }); + const endYearStr = formatValue(generateConfig.addYear(date, 9), { + locale, + format: yearCellFormat, + generateConfig, + }); + + return `${startYearStr} - ${endYearStr}`; + }; + + const getCellClassName = (date: DateType) => { + const dateYear = generateConfig.getYear(date); + return { + [`${prefixCls}-cell-in-view`]: startYear <= dateYear && dateYear <= endYear, + [`${prefixCls}-cell-today`]: isSameDecade(generateConfig, date, now), + [`${prefixCls}-cell-selected`]: isSameDecade(generateConfig, date, value), + }; + }; + + // ========================= Header ========================= + const yearNode = `${formatValue(startYearDate, { + locale, + format: locale.yearFormat, + generateConfig, + })}-${formatValue(endYearDate, { + locale, + format: locale.yearFormat, + generateConfig, + })}`; + + // ========================= Render ========================= + return ( + +
+ {/* Header */} + { + onPickerValueChange(generateConfig.addYear(pickerValue, offset * 100)); + }} + > + {yearNode} + + + {/* Body */} + +
+ + ); +} diff --git a/src/NewPicker/PickerPanel/MonthPanel/index.tsx b/src/NewPicker/PickerPanel/MonthPanel/index.tsx index fbd0be4db..6a653b0cb 100644 --- a/src/NewPicker/PickerPanel/MonthPanel/index.tsx +++ b/src/NewPicker/PickerPanel/MonthPanel/index.tsx @@ -90,9 +90,6 @@ export default function MonthPanel(props: SharedPanelProps { onPickerValueChange(generateConfig.addYear(pickerValue, offset)); }} - onSuperOffset={(offset) => { - onPickerValueChange(generateConfig.addYear(pickerValue, offset * 10)); - }} > {yearNode} diff --git a/src/NewPicker/PickerPanel/YearPanel/index.tsx b/src/NewPicker/PickerPanel/YearPanel/index.tsx new file mode 100644 index 000000000..cdb38ae20 --- /dev/null +++ b/src/NewPicker/PickerPanel/YearPanel/index.tsx @@ -0,0 +1,115 @@ +import classNames from 'classnames'; +import * as React from 'react'; +import { formatValue, isSameYear } from '../../../utils/dateUtil'; +import type { SharedPanelProps } from '../../interface'; +import { PanelContext, useInfo } from '../context'; +import PanelBody from '../PanelBody'; +import PanelHeader from '../PanelHeader'; + +export default function YearPanel(props: SharedPanelProps) { + const { + prefixCls, + locale, + generateConfig, + pickerValue, + value, + onPickerValueChange, + onModeChange, + } = props; + + const panelPrefixCls = `${prefixCls}-year-panel`; + + // ========================== Base ========================== + const [info, now] = useInfo(props); + const startYear = Math.floor(generateConfig.getYear(pickerValue) / 10) * 10; + const endYear = startYear + 9; + + const baseDate = generateConfig.setYear(pickerValue, startYear - 1); + + const startYearDate = generateConfig.setYear(baseDate, startYear); + const endYearDate = generateConfig.setYear(startYearDate, endYear); + + // ========================= Cells ========================== + const getCellDate = (date: DateType, offset: number) => { + return generateConfig.addYear(date, offset); + }; + + const getCellText = (date: DateType) => { + return formatValue(date, { + locale, + format: locale.yearCellFormat || 'YYYY', + generateConfig, + }); + }; + + const getCellClassName = (date: DateType) => { + const dateYear = generateConfig.getYear(date); + return { + [`${prefixCls}-cell-in-view`]: startYear <= dateYear && dateYear <= endYear, + [`${prefixCls}-cell-today`]: isSameYear(generateConfig, date, now), + [`${prefixCls}-cell-selected`]: isSameYear(generateConfig, date, value), + }; + }; + + // ========================= Header ========================= + const yearNode: React.ReactNode = ( + + ); + + // ========================= Render ========================= + return ( + +
+ {/* Header */} + { + onPickerValueChange(generateConfig.addYear(pickerValue, offset * 10)); + }} + > + {yearNode} + + + {/* Body */} + +
+ + ); +} diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 362972998..1e339160b 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -4,13 +4,17 @@ import type { GenerateConfig } from '../../generate'; import type { CellRender, Components, DisabledDate, Locale, PanelMode } from '../interface'; import { PrefixClsContext } from '../PickerInput/context'; import DatePanel from './DatePanel'; +import DecadePanel from './DecadePanel'; import MonthPanel from './MonthPanel'; import WeekPanel from './WeekPanel'; +import YearPanel from './YearPanel'; const DefaultComponents: Components = { date: DatePanel, week: WeekPanel, month: MonthPanel, + year: YearPanel, + decade: DecadePanel, }; export interface PickerPanelProps { diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 8119d4cb9..0bc1c0e88 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -5,12 +5,28 @@ export type Locale = { locale: string; // ===================== Date Panel ===================== + // Header Format /** Display month before year in date panel header */ monthBeforeYear?: boolean; + /** year format in header panel */ yearFormat: string; + /** month format in header panel */ monthFormat?: string; + /** quarter format in header panel */ quarterFormat?: string; + // Cell format + /** year format in body panel */ + yearCellFormat?: string; + /** day format in body panel */ + dayFormat: string; + + // Input format + /** Full date format like YYYY-MM-DD in input */ + dateFormat: string; + /** Full date format with time like YYYY-MM-DD HH:mm:ss in input */ + dateTimeFormat: string; + today: string; now: string; backToToday: string; @@ -27,9 +43,6 @@ export type Locale = { yearSelect: string; decadeSelect: string; - dayFormat: string; - dateFormat: string; - dateTimeFormat: string; previousYear: string; nextYear: string; previousDecade: string; diff --git a/src/interface.ts b/src/interface.ts index aa64e308b..3dc6a8ae2 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1,45 +1,8 @@ import type React from 'react'; import type { GenerateConfig } from './generate'; +import type { Locale } from './NewPicker/interface'; -export type Locale = { - locale: string; - - // ===================== Date Panel ===================== - /** Display month before year in date panel header */ - monthBeforeYear?: boolean; - yearFormat: string; - monthFormat?: string; - quarterFormat?: string; - - today: string; - now: string; - backToToday: string; - ok: string; - timeSelect: string; - dateSelect: string; - weekSelect?: string; - clear: string; - month: string; - year: string; - previousMonth: string; - nextMonth: string; - monthSelect: string; - yearSelect: string; - decadeSelect: string; - - dayFormat: string; - dateFormat: string; - dateTimeFormat: string; - previousYear: string; - nextYear: string; - previousDecade: string; - nextDecade: string; - previousCentury: string; - nextCentury: string; - - shortWeekDays?: string[]; - shortMonths?: string[]; -}; +export type { Locale }; export type PanelMode = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year' | 'decade'; From f92dddc97ee0cb5252eb6980c6e5f71a23908e2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 24 Oct 2023 11:19:47 +0800 Subject: [PATCH 015/380] chore: mode change --- .../PickerPanel/DecadePanel/index.tsx | 10 +----- src/NewPicker/PickerPanel/index.tsx | 32 +++++++++++++++---- src/NewPicker/interface.tsx | 10 +++++- 3 files changed, 35 insertions(+), 17 deletions(-) diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx index fb0f46357..ba4255969 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -7,15 +7,7 @@ import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; export default function DecadePanel(props: SharedPanelProps) { - const { - prefixCls, - locale, - generateConfig, - pickerValue, - value, - onPickerValueChange, - onModeChange, - } = props; + const { prefixCls, locale, generateConfig, pickerValue, value, onPickerValueChange } = props; const panelPrefixCls = `${prefixCls}-decade-panel`; diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 1e339160b..3fc966ae3 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -83,6 +83,13 @@ export default function PickerPanel(props: PickerPanelProps(picker, { + value: mode, + postState: (val) => val || 'date', + onChange: onModeChange, + }); + // ========================= Value ========================== const [mergedValue, setMergedValue] = useMergedState(defaultValue, { value, @@ -91,6 +98,24 @@ export default function PickerPanel(props: PickerPanelProps { setMergedValue(newVal); onChange?.(newVal); + + // Update mode if needed + if (mergedMode !== picker) { + const queue: PanelMode[] = ['decade', 'year', 'month']; + const index = queue.indexOf(mergedMode); + const nextMode = queue[index + 1]; + if (index >= 0 && nextMode) { + setMergedMode(nextMode); + } else if (mergedMode === 'month') { + if (picker === 'datetime') { + setMergedMode('datetime'); + } else if (picker === 'date') { + setMergedMode('date'); + } else if (picker === 'week') { + setMergedMode('week'); + } + } + } }; // ====================== PickerValue ======================= @@ -106,13 +131,6 @@ export default function PickerPanel(props: PickerPanelProps(null); - // ========================== Mode ========================== - const [mergedMode, setMergedMode] = useMergedState(picker, { - value: mode, - postState: (val) => val || 'date', - onChange: onModeChange, - }); - // ======================= Components ======================= const PanelComponent = components[mergedMode] || DefaultComponents[mergedMode] || DatePanel; diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 0bc1c0e88..a7dbb905f 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -54,7 +54,15 @@ export type Locale = { shortMonths?: string[]; }; -export type PanelMode = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year' | 'decade'; +export type PanelMode = + | 'time' + | 'date' + | 'datetime' + | 'week' + | 'month' + | 'quarter' + | 'year' + | 'decade'; export type DisabledDate = ( date: DateType, From c03d2cfeb8138902bbdd52ff6f98cc82747d7f99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 24 Oct 2023 16:42:48 +0800 Subject: [PATCH 016/380] chore: columns --- docs/examples/debug.tsx | 11 +- .../TimePanel/TimePanelBody/TimeColumn.tsx | 62 ++++++ .../TimePanel/TimePanelBody/index.tsx | 182 ++++++++++++++++++ src/NewPicker/PickerPanel/TimePanel/index.tsx | 47 +++++ src/NewPicker/PickerPanel/context.ts | 19 +- src/NewPicker/PickerPanel/index.tsx | 5 + src/NewPicker/interface.tsx | 52 ++++- 7 files changed, 374 insertions(+), 4 deletions(-) create mode 100644 src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx create mode 100644 src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx create mode 100644 src/NewPicker/PickerPanel/TimePanel/index.tsx diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index a50eb8b43..8e8a36f3c 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -3,7 +3,7 @@ import '../../assets/index.less'; import type { PickerRef } from '../../src/NewPicker/interface'; import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; -import PickerPanel from '../../src/NewPicker/PickerPanel'; +import PickerPanel, { type PickerPanelProps } from '../../src/NewPicker/PickerPanel'; import moment from 'moment'; import 'moment/locale/zh-cn'; @@ -13,7 +13,7 @@ import zhCN from '../../src/locale/zh_CN'; moment.locale('zh-cn'); window.moment = moment; -function CellPicker(props: any) { +function CellPicker(props: Partial) { return (
{props.picker || 'date'}
@@ -74,6 +74,13 @@ export default () => { defaultValue={moment('2023-04-05')} disabledDate={(date) => date.week() === 3} /> + + date.week() === 3} + use12Hours + />
); diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx new file mode 100644 index 000000000..ca241a04f --- /dev/null +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -0,0 +1,62 @@ +import classNames from 'classnames'; +import * as React from 'react'; +import { PanelContext } from '../../context'; + +export type Unit = { + label: React.ReactText; + value: number | string; + disabled?: boolean; +}; + +export interface TimeUnitColumnProps { + units: Unit[]; + value: number | string; + type: 'hour' | 'minute' | 'second' | 'meridiem'; + onChange: (value: number | string) => void; +} + +export default function TimeColumn(props: TimeUnitColumnProps) { + const { units, value, type, onChange } = props; + + const { prefixCls, cellRender, now, locale } = React.useContext(PanelContext); + + const panelPrefixCls = `${prefixCls}-time-panel`; + const cellPrefixCls = `${prefixCls}-time-panel-cell`; + + // ant-picker-time-panel-cell ant-picker-time-panel-cell-selected + // ant-picker-time-panel-cell-inner + + return ( +
    + {units.map(({ label, value: unitValue, disabled }) => { + const inner =
    {label}
    ; + + return ( +
  • { + if (!disabled) { + onChange(unitValue); + } + }} + > + {cellRender + ? cellRender(value, { + prefixCls, + originNode: inner, + today: now, + type: 'time', + subType: type, + locale, + }) + : inner} +
    • + ); + })} +
+ ); +} diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx new file mode 100644 index 000000000..62c1b14e2 --- /dev/null +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -0,0 +1,182 @@ +import * as React from 'react'; +import { leftPad } from '../../../../utils/miscUtil'; +import type { SharedPanelProps } from '../../../interface'; +import { PanelContext } from '../../context'; +import TimeColumn, { type Unit } from './TimeColumn'; + +function emptyDisabled(): T[] { + return []; +} + +function isAM(hour: number) { + return hour < 12; +} + +function checkShow(format: string, keywords: string[], propShow?: boolean) { + return propShow ?? keywords.some((keyword) => format.includes(keyword)); +} + +function generateUnits( + start: number, + end: number, + step = 1, + hideDisabledOptions = false, + disabledUnits: number[] = [], +) { + const units: Unit[] = []; + const integerStep = step >= 1 ? step | 0 : 1; + for (let i = start; i <= end; i += integerStep) { + const disabled = disabledUnits.includes(i); + + if (!disabled || !hideDisabledOptions) { + units.push({ + label: leftPad(i, 2), + value: i, + disabled, + }); + } + } + return units; +} + +export type TimePanelBodyProps = SharedPanelProps; + +export default function TimePanelBody(props: TimePanelBodyProps) { + const { + format, + + // Show + showHour, + showMinute, + showSecond, + use12Hours, + + // Steps + hourStep, + minuteStep, + secondStep, + + // Disabled + hideDisabledOptions, + disabledTime, + disabledHours, + disabledMinutes, + disabledSeconds, + } = props; + + const { prefixCls, value, pickerValue, generateConfig, onChange } = + React.useContext(PanelContext); + + // ========================= Value ========================== + const mergedValue = value || pickerValue; + + const hour = generateConfig.getHour(mergedValue); + const minute = generateConfig.getMinute(mergedValue); + const second = generateConfig.getSecond(mergedValue); + const meridiem = isAM(hour) ? 'am' : 'pm'; + + // ========================== Show ========================== + const mergedShowHour = checkShow(format, ['H', 'LT', 'LLL'], showHour); + const mergedShowMinute = checkShow(format, ['m', 'LT', 'LLL'], showMinute); + const mergedShowSecond = checkShow(format, ['s', 'LTS'], showSecond); + const mergedShowMeridiem = checkShow(format, ['a', 'A', 'LT', 'LLL'], use12Hours); + + // ======================== Disabled ======================== + const [mergedDisabledHours, mergedDisabledMinutes, mergedDisabledSeconds] = React.useMemo(() => { + const disabledConfig = disabledTime?.(mergedValue) || {}; + + return [ + disabledConfig.disabledHours || disabledHours || emptyDisabled, + disabledConfig.disabledMinutes || disabledMinutes || emptyDisabled, + disabledConfig.disabledSeconds || disabledSeconds || emptyDisabled, + ]; + }, [mergedValue, disabledTime, disabledHours, disabledMinutes, disabledSeconds]); + + // ========================= Column ========================= + const rowHourUnits = React.useMemo( + () => generateUnits(0, 23, hourStep, hideDisabledOptions, mergedDisabledHours()), + [hideDisabledOptions, hourStep, mergedDisabledHours], + ); + + const hourUnits = React.useMemo(() => { + if (!mergedShowMeridiem) { + return rowHourUnits; + } + + return isAM(hour) + ? rowHourUnits.filter((h) => isAM(h.value as number)) + : rowHourUnits.filter((h) => !isAM(h.value as number)); + }, [hour, rowHourUnits, mergedShowMeridiem]); + + const minuteUnits = React.useMemo( + () => generateUnits(0, 59, minuteStep, hideDisabledOptions, mergedDisabledMinutes(hour)), + [hideDisabledOptions, minuteStep, mergedDisabledMinutes, hour], + ); + + const secondUnits = React.useMemo( + () => + generateUnits(0, 59, secondStep, hideDisabledOptions, mergedDisabledSeconds(hour, minute)), + [hideDisabledOptions, secondStep, mergedDisabledSeconds, hour, minute], + ); + + const meridiemUnits = React.useMemo(() => { + const hasAM = rowHourUnits.some((h) => isAM(h.value as number)); + const hasPM = rowHourUnits.some((h) => !isAM(h.value as number)); + + return [ + hasAM && { + label: 'AM', + value: 'am', + }, + hasPM && { + label: 'PM', + value: 'pm', + }, + ].filter((u) => u); + }, [rowHourUnits]); + + // ========================= Change ========================= + const onHourChange = (val: number) => { + onChange(generateConfig.setHour(mergedValue, val)); + }; + + const onMinuteChange = (val: number) => { + onChange(generateConfig.setMinute(mergedValue, val)); + }; + + const onSecondChange = (val: number) => { + onChange(generateConfig.setSecond(mergedValue, val)); + }; + + const onMeridiemChange = (val: string) => { + if (val === 'am' && !isAM(hour)) { + onChange(generateConfig.setHour(mergedValue, hour - 12)); + } else if (val === 'pm' && isAM(hour)) { + onChange(generateConfig.setHour(mergedValue, hour + 12)); + } + }; + + // ========================= Render ========================= + + return ( +
+ {mergedShowHour && ( + + )} + {mergedShowMinute && ( + + )} + {mergedShowSecond && ( + + )} + {mergedShowMeridiem && ( + + )} +
+ ); +} diff --git a/src/NewPicker/PickerPanel/TimePanel/index.tsx b/src/NewPicker/PickerPanel/TimePanel/index.tsx new file mode 100644 index 000000000..471458f93 --- /dev/null +++ b/src/NewPicker/PickerPanel/TimePanel/index.tsx @@ -0,0 +1,47 @@ +import classNames from 'classnames'; +import * as React from 'react'; +import { formatValue } from '../../../utils/dateUtil'; +import type { SharedPanelProps } from '../../interface'; +import { PanelContext, useInfo } from '../context'; +import PanelHeader from '../PanelHeader'; +import TimePanelBody from './TimePanelBody'; + +export default function TimePanel(props: SharedPanelProps) { + const { + prefixCls, + value, + locale, + generateConfig, + + // Format + format = 'HH:mm:ss', + } = props; + + const panelPrefixCls = `${prefixCls}-time-panel`; + + // ========================== Base ========================== + const [info, now] = useInfo(props); + + // ========================= Render ========================= + return ( + +
+ + {value + ? formatValue(value, { + locale, + format, + generateConfig, + }) + : '\u00A0'} + + +
+ + ); +} diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index 758601c04..4112cc102 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -1,4 +1,5 @@ import React from 'react'; +import type { GenerateConfig } from '../../generate'; import type { CellRender, DisabledDate, Locale, PanelMode, SharedPanelProps } from '../interface'; export interface PanelProps { @@ -12,6 +13,9 @@ export interface PanelProps { onChange: (date: DateType) => void; locale: Locale; onHover: (date: DateType | null) => void; + value?: DateType; + pickerValue?: DateType; + generateConfig: GenerateConfig; } /** Used for each single Panel. e.g. DatePanel */ @@ -23,17 +27,30 @@ export const PanelContext = React.createContext(null!); export function useInfo( props: SharedPanelProps, ): [sharedProps: Omit, 'type'>, now: DateType] { - const { prefixCls, generateConfig, locale, disabledDate, cellRender, onChange, onHover } = props; + const { + prefixCls, + generateConfig, + locale, + disabledDate, + cellRender, + onChange, + onHover, + value, + pickerValue, + } = props; const now = generateConfig.getNow(); const info = { now, + value, + pickerValue, prefixCls, disabledDate, cellRender, onChange, onHover, locale, + generateConfig, }; return [info, now]; diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 3fc966ae3..fbc31a08f 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -6,6 +6,7 @@ import { PrefixClsContext } from '../PickerInput/context'; import DatePanel from './DatePanel'; import DecadePanel from './DecadePanel'; import MonthPanel from './MonthPanel'; +import TimePanel from './TimePanel'; import WeekPanel from './WeekPanel'; import YearPanel from './YearPanel'; @@ -15,6 +16,7 @@ const DefaultComponents: Components = { month: MonthPanel, year: YearPanel, decade: DecadePanel, + time: TimePanel, }; export interface PickerPanelProps { @@ -138,6 +140,9 @@ export default function PickerPanel(props: PickerPanelProps = ( info: CellRenderInfo, ) => React.ReactNode; +// ========================== Time ========================== +export interface DisabledTimes { + disabledHours?: () => number[]; + disabledMinutes?: (hour: number) => number[]; + disabledSeconds?: (hour: number, minute: number) => number[]; +} + +export interface SharedTimeProps { + /** Only work in picker is `time` */ + format?: string; + /** Only work in picker is `time` */ + showNow?: boolean; + /** Only work in picker is `time` */ + showHour?: boolean; + /** Only work in picker is `time` */ + showMinute?: boolean; + /** Only work in picker is `time` */ + showSecond?: boolean; + /** Only work in picker is `time` */ + use12Hours?: boolean; + /** Only work in picker is `time` */ + hourStep?: IntRange<1, 23>; + /** Only work in picker is `time` */ + minuteStep?: IntRange<1, 59>; + /** Only work in picker is `time` */ + secondStep?: IntRange<1, 59>; + /** Only work in picker is `time` */ + hideDisabledOptions?: boolean; + + /** @deprecated Please use `disabledTime` instead. */ + disabledHours?: DisabledTimes['disabledHours']; + /** @deprecated Please use `disabledTime` instead. */ + disabledMinutes?: DisabledTimes['disabledMinutes']; + /** @deprecated Please use `disabledTime` instead. */ + disabledSeconds?: DisabledTimes['disabledSeconds']; + + /** Only work in picker is `time` */ + disabledTime?: (date: DateType) => DisabledTimes; +} + // ======================= Components ======================= -export interface SharedPanelProps { +export interface SharedPanelProps extends SharedTimeProps { // Style prefixCls: string; @@ -175,3 +217,11 @@ export interface SelectorRef { focus: VoidFunction; blur: VoidFunction; } + +// ========================== MISC ========================== +// https://stackoverflow.com/a/39495173; need TypeScript >= 4.5 +type Enumerate = Acc['length'] extends N + ? Acc[number] + : Enumerate; + +export type IntRange = Exclude, Enumerate>; From 1f14cb34f7eaceee5c71f433876204e30881a8c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 24 Oct 2023 16:51:47 +0800 Subject: [PATCH 017/380] chore: format --- .../TimePanel/TimePanelBody/index.tsx | 34 +++++++++++-------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index 62c1b14e2..3772a2134 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -93,10 +93,16 @@ export default function TimePanelBody(props: TimePanelBodyProps< }, [mergedValue, disabledTime, disabledHours, disabledMinutes, disabledSeconds]); // ========================= Column ========================= - const rowHourUnits = React.useMemo( - () => generateUnits(0, 23, hourStep, hideDisabledOptions, mergedDisabledHours()), - [hideDisabledOptions, hourStep, mergedDisabledHours], - ); + const rowHourUnits = React.useMemo(() => { + const hours = generateUnits(0, 23, hourStep, hideDisabledOptions, mergedDisabledHours()); + + return mergedShowMeridiem + ? hours.map((unit) => ({ + ...unit, + label: leftPad((unit.value as number) % 12 || 12, 2), + })) + : hours; + }, [hideDisabledOptions, hourStep, mergedDisabledHours, mergedShowMeridiem]); const hourUnits = React.useMemo(() => { if (!mergedShowMeridiem) { @@ -119,21 +125,21 @@ export default function TimePanelBody(props: TimePanelBodyProps< [hideDisabledOptions, secondStep, mergedDisabledSeconds, hour, minute], ); - const meridiemUnits = React.useMemo(() => { - const hasAM = rowHourUnits.some((h) => isAM(h.value as number)); - const hasPM = rowHourUnits.some((h) => !isAM(h.value as number)); - - return [ - hasAM && { + const meridiemUnits = React.useMemo( + () => [ + { label: 'AM', value: 'am', + disabled: rowHourUnits.every((h) => !isAM(h.value as number)), }, - hasPM && { + { label: 'PM', value: 'pm', + disabled: rowHourUnits.every((h) => isAM(h.value as number)), }, - ].filter((u) => u); - }, [rowHourUnits]); + ], + [rowHourUnits], + ); // ========================= Change ========================= const onHourChange = (val: number) => { @@ -172,7 +178,7 @@ export default function TimePanelBody(props: TimePanelBodyProps< {mergedShowMeridiem && ( From 1c283e3900e80169a6187f6c56b2327a4a3ec721 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 25 Oct 2023 11:08:56 +0800 Subject: [PATCH 018/380] feat: changeOnScroll --- assets/index.less | 23 ++++- docs/examples/debug.tsx | 13 ++- .../TimePanel/TimePanelBody/TimeColumn.tsx | 92 ++++++++++++++++++- .../TimePanel/TimePanelBody/index.tsx | 33 +++++-- src/NewPicker/PickerPanel/TimePanel/index.tsx | 6 +- src/NewPicker/PickerPanel/index.tsx | 17 +++- src/NewPicker/interface.tsx | 8 +- 7 files changed, 173 insertions(+), 19 deletions(-) diff --git a/assets/index.less b/assets/index.less index 887022c87..46e2124fb 100644 --- a/assets/index.less +++ b/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 { @@ -249,15 +253,28 @@ 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 { flex: none; 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; @@ -282,6 +299,10 @@ &-disabled { opacity: 0.5; } + + &-selected { + background: rgba(0, 0, 255, 0.5); + } } .@{prefix-cls}-time-panel-cell-inner { diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 8e8a36f3c..ab6580f8a 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -77,9 +77,18 @@ export default () => { date.week() === 3} - use12Hours + time={{ + use12Hours: true, + changeOnScroll: true, + disabledHours: () => [0, 1, 2, 3, 4, 5], + }} + // cellRender={(val: number, info) => { + // if (info.type === 'time') { + // return `${val}!!!`; + // } + // }} /> diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx index ca241a04f..5ca967fc3 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -1,22 +1,27 @@ import classNames from 'classnames'; +import { useEvent } from 'rc-util'; +import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import * as React from 'react'; import { PanelContext } from '../../context'; +const SCROLL_DELAY = 500; + export type Unit = { label: React.ReactText; value: number | string; disabled?: boolean; }; -export interface TimeUnitColumnProps { +export interface TimeUnitColumnProps { units: Unit[]; value: number | string; type: 'hour' | 'minute' | 'second' | 'meridiem'; onChange: (value: number | string) => void; + changeOnScroll?: boolean; } -export default function TimeColumn(props: TimeUnitColumnProps) { - const { units, value, type, onChange } = props; +export default function TimeColumn(props: TimeUnitColumnProps) { + const { units, value, type, onChange, changeOnScroll } = props; const { prefixCls, cellRender, now, locale } = React.useContext(PanelContext); @@ -26,8 +31,84 @@ export default function TimeColumn(props: TimeUnitColumnProps(null); + + // ========================= Scroll ========================= + const timeoutRef = React.useRef(); + + const cleanScroll = () => { + clearTimeout(timeoutRef.current!); + }; + + // Scroll to value position + const scrollToValue = useEvent((val: number | string) => { + const ul = ulRef.current!; + const targetLi = ul.querySelector(`[data-value="${val}"]`); + + if (targetLi) { + const firstLiTop = ul.querySelector(`li`).offsetTop; + const targetLiTop = targetLi.offsetTop; + + const nextTop = targetLiTop - firstLiTop; + + if (ul.scrollTo) { + ul.scrollTo({ + top: nextTop, + behavior: 'smooth', + }); + } else { + // IE not support `scrollTo` + ul.scrollTop = nextTop; + } + + // Do not trigger realign by this effect scroll + setTimeout(cleanScroll, 100); + } + }); + + // Effect sync value scroll + useLayoutEffect(() => { + scrollToValue(value); + }, [value, units, scrollToValue]); + + // Scroll event if sync onScroll + const onInternalScroll: React.UIEventHandler = (event) => { + const target = event.target as HTMLUListElement; + + if (changeOnScroll) { + cleanScroll(); + + timeoutRef.current = setTimeout(() => { + const ul = ulRef.current!; + + const firstLiTop = ul.querySelector(`li`).offsetTop; + const liList = Array.from(ul.querySelectorAll(`li`)); + const liTopList = liList.map((li) => li.offsetTop - firstLiTop); + + const liDistList = liTopList.map((top, index) => { + if (units[index].disabled) { + return Number.MAX_SAFE_INTEGER; + } + return Math.abs(top - target.scrollTop); + }); + + // Find min distance index + const minDist = Math.min(...liDistList); + const minDistIndex = liDistList.findIndex((dist) => dist === minDist); + + const targetUnit = units[minDistIndex]; + if (targetUnit && !targetUnit.disabled) { + onChange(targetUnit.value); + scrollToValue(targetUnit.value); + } + }, SCROLL_DELAY); + } + }; + + // ========================= Render ========================= return ( -
    +
      {units.map(({ label, value: unitValue, disabled }) => { const inner =
      {label}
      ; @@ -43,9 +124,10 @@ export default function TimeColumn(props: TimeUnitColumnProps {cellRender - ? cellRender(value, { + ? cellRender(unitValue, { prefixCls, originNode: inner, today: now, diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index 3772a2134..58256e4ea 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { leftPad } from '../../../../utils/miscUtil'; -import type { SharedPanelProps } from '../../../interface'; +import type { SharedPanelProps, SharedTimeProps } from '../../../interface'; import { PanelContext } from '../../context'; import TimeColumn, { type Unit } from './TimeColumn'; @@ -41,7 +41,7 @@ function generateUnits( export type TimePanelBodyProps = SharedPanelProps; -export default function TimePanelBody(props: TimePanelBodyProps) { +export default function TimePanelBody(props: SharedTimeProps) { const { format, @@ -62,6 +62,9 @@ export default function TimePanelBody(props: TimePanelBodyProps< disabledHours, disabledMinutes, disabledSeconds, + + // MISC + changeOnScroll, } = props; const { prefixCls, value, pickerValue, generateConfig, onChange } = @@ -163,17 +166,34 @@ export default function TimePanelBody(props: TimePanelBodyProps< }; // ========================= Render ========================= - return (
      {mergedShowHour && ( - + )} {mergedShowMinute && ( - + )} {mergedShowSecond && ( - + )} {mergedShowMeridiem && ( (props: TimePanelBodyProps< value={meridiem} type="meridiem" onChange={onMeridiemChange} + changeOnScroll={changeOnScroll} /> )}
      diff --git a/src/NewPicker/PickerPanel/TimePanel/index.tsx b/src/NewPicker/PickerPanel/TimePanel/index.tsx index 471458f93..949504832 100644 --- a/src/NewPicker/PickerPanel/TimePanel/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/index.tsx @@ -14,9 +14,11 @@ export default function TimePanel(props: SharedPanelProps(props: SharedPanelProps - + ); diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index fbc31a08f..7bb03a199 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -1,7 +1,14 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; import type { GenerateConfig } from '../../generate'; -import type { CellRender, Components, DisabledDate, Locale, PanelMode } from '../interface'; +import type { + CellRender, + Components, + DisabledDate, + Locale, + PanelMode, + SharedTimeProps, +} from '../interface'; import { PrefixClsContext } from '../PickerInput/context'; import DatePanel from './DatePanel'; import DecadePanel from './DecadePanel'; @@ -42,6 +49,9 @@ export interface PickerPanelProps { onModeChange?: (mode: PanelMode) => void; picker?: PanelMode; + // Time + time?: SharedTimeProps; + // Cell cellRender?: CellRender; @@ -73,6 +83,9 @@ export default function PickerPanel(props: PickerPanelProps(props: PickerPanelProps { /** Only work in picker is `time` */ disabledTime?: (date: DateType) => DisabledTimes; + + /** Only work in picker is `time` */ + changeOnScroll?: boolean; } // ======================= Components ======================= -export interface SharedPanelProps extends SharedTimeProps { +export interface SharedPanelProps { // Style prefixCls: string; @@ -152,6 +155,9 @@ export interface SharedPanelProps extends SharedTimeProps; cellRender?: CellRender; onHover: (value: DateType | null) => void; + + // Time + time?: SharedTimeProps; } export type Components = Partial< From 36727a8cbe923f03633bcb06b52d84cf4e40341b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 25 Oct 2023 14:27:02 +0800 Subject: [PATCH 019/380] chore: auto align to validate --- docs/examples/debug.tsx | 5 +- src/NewPicker/FormatInput.tsx | 11 ++++ .../TimePanel/TimePanelBody/TimeColumn.tsx | 22 ++++--- .../TimePanel/TimePanelBody/index.tsx | 57 +++++++++++++++---- .../TimePanel/TimePanelBody/util.ts | 36 ++++++++++++ 5 files changed, 106 insertions(+), 25 deletions(-) create mode 100644 src/NewPicker/FormatInput.tsx create mode 100644 src/NewPicker/PickerPanel/TimePanel/TimePanelBody/util.ts diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index ab6580f8a..3e9fe0555 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -77,12 +77,15 @@ export default () => { date.week() === 3} time={{ + format: 'HH:mm:ss.SSS', use12Hours: true, changeOnScroll: true, disabledHours: () => [0, 1, 2, 3, 4, 5], + disabledMinutes: (hour) => (hour === 6 ? [0, 1, 2, 4, 5, 6] : []), + disabledSeconds: (_, minute) => (minute === 3 ? [6, 7, 8, 9] : []), }} // cellRender={(val: number, info) => { // if (info.type === 'time') { diff --git a/src/NewPicker/FormatInput.tsx b/src/NewPicker/FormatInput.tsx new file mode 100644 index 000000000..c00ae36da --- /dev/null +++ b/src/NewPicker/FormatInput.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; + +export interface FormatInputProps { + format: string; + value?: string; + onChange?: (value: string) => void; +} + +export default function FormatInput() { + return ; +} diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx index 5ca967fc3..a37aecfd6 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -6,9 +6,9 @@ import { PanelContext } from '../../context'; const SCROLL_DELAY = 500; -export type Unit = { +export type Unit = { label: React.ReactText; - value: number | string; + value: ValueType; disabled?: boolean; }; @@ -52,15 +52,8 @@ export default function TimeColumn(props: TimeUnitColumnProps) { const nextTop = targetLiTop - firstLiTop; - if (ul.scrollTo) { - ul.scrollTo({ - top: nextTop, - behavior: 'smooth', - }); - } else { - // IE not support `scrollTo` - ul.scrollTop = nextTop; - } + // IE not support `scrollTo` + ul.scrollTop = nextTop; // Do not trigger realign by this effect scroll setTimeout(cleanScroll, 100); @@ -108,7 +101,12 @@ export default function TimeColumn(props: TimeUnitColumnProps) { // ========================= Render ========================= return ( -
        +
          {units.map(({ label, value: unitValue, disabled }) => { const inner =
          {label}
          ; diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index 58256e4ea..e7237de78 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -3,6 +3,7 @@ import { leftPad } from '../../../../utils/miscUtil'; import type { SharedPanelProps, SharedTimeProps } from '../../../interface'; import { PanelContext } from '../../context'; import TimeColumn, { type Unit } from './TimeColumn'; +import { findValidateTime } from './util'; function emptyDisabled(): T[] { return []; @@ -23,7 +24,7 @@ function generateUnits( hideDisabledOptions = false, disabledUnits: number[] = [], ) { - const units: Unit[] = []; + const units: Unit[] = []; const integerStep = step >= 1 ? step | 0 : 1; for (let i = start; i <= end; i += integerStep) { const disabled = disabledUnits.includes(i); @@ -117,15 +118,29 @@ export default function TimePanelBody(props: SharedTimeProps !isAM(h.value as number)); }, [hour, rowHourUnits, mergedShowMeridiem]); - const minuteUnits = React.useMemo( - () => generateUnits(0, 59, minuteStep, hideDisabledOptions, mergedDisabledMinutes(hour)), - [hideDisabledOptions, minuteStep, mergedDisabledMinutes, hour], + const getMinuteUnits = React.useCallback( + (nextHour: number) => + generateUnits(0, 59, minuteStep, hideDisabledOptions, mergedDisabledMinutes(nextHour)), + [hideDisabledOptions, mergedDisabledMinutes, minuteStep], ); + const getSecondUnits = React.useCallback( + (nextHour: number, nextMinute: number) => + generateUnits( + 0, + 59, + secondStep, + hideDisabledOptions, + mergedDisabledSeconds(nextHour, nextMinute), + ), + [hideDisabledOptions, mergedDisabledSeconds, secondStep], + ); + + const minuteUnits = React.useMemo(() => getMinuteUnits(hour), [getMinuteUnits, hour]); + const secondUnits = React.useMemo( - () => - generateUnits(0, 59, secondStep, hideDisabledOptions, mergedDisabledSeconds(hour, minute)), - [hideDisabledOptions, secondStep, mergedDisabledSeconds, hour, minute], + () => getSecondUnits(hour, minute), + [getSecondUnits, hour, minute], ); const meridiemUnits = React.useMemo( @@ -145,23 +160,41 @@ export default function TimePanelBody(props: SharedTimeProps { + const validateDate = findValidateTime( + nextDate, + () => rowHourUnits, + getMinuteUnits, + getSecondUnits, + generateConfig, + ); + + console.log('~~~>', validateDate.format('HH:mm:ss')); + + onChange(validateDate); + }; + + // ========================= Column ========================= const onHourChange = (val: number) => { - onChange(generateConfig.setHour(mergedValue, val)); + triggerChange(generateConfig.setHour(mergedValue, val)); }; const onMinuteChange = (val: number) => { - onChange(generateConfig.setMinute(mergedValue, val)); + triggerChange(generateConfig.setMinute(mergedValue, val)); }; const onSecondChange = (val: number) => { - onChange(generateConfig.setSecond(mergedValue, val)); + triggerChange(generateConfig.setSecond(mergedValue, val)); }; const onMeridiemChange = (val: string) => { if (val === 'am' && !isAM(hour)) { - onChange(generateConfig.setHour(mergedValue, hour - 12)); + triggerChange(generateConfig.setHour(mergedValue, hour - 12)); } else if (val === 'pm' && isAM(hour)) { - onChange(generateConfig.setHour(mergedValue, hour + 12)); + triggerChange(generateConfig.setHour(mergedValue, hour + 12)); } }; diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/util.ts b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/util.ts new file mode 100644 index 000000000..23326c827 --- /dev/null +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/util.ts @@ -0,0 +1,36 @@ +import type { GenerateConfig } from '../../../../generate'; +import type { Unit } from './TimeColumn'; + +export function findValidateTime( + date: DateType, + getHourUnits: () => Unit[], + getMinuteUnits: (hour: number) => Unit[], + getSecondUnits: (hour: number, minute: number) => Unit[], + generateConfig: GenerateConfig, +) { + let nextDate = date; + + function alignValidate(getUnitValue: string, setUnitValue: string, units: Unit[]) { + let nextValue = generateConfig[getUnitValue](nextDate); + const nextUnit = units.find((unit) => unit.value === nextValue); + + if (!nextUnit || nextUnit.disabled) { + const validateUnit = units.find((unit) => !unit.disabled); + nextValue = validateUnit!.value; + nextDate = generateConfig[setUnitValue](nextDate, nextValue); + } + + return nextValue; + } + + // Find validate hour + const nextHour = alignValidate('getHour', 'setHour', getHourUnits()); + + // Find validate minute + const nextMinute = alignValidate('getMinute', 'setMinute', getMinuteUnits(nextHour)); + + // Find validate second + alignValidate('getSecond', 'setSecond', getSecondUnits(nextHour, nextMinute)); + + return nextDate; +} From d2bbdaa628b27203073456d565db47b9c778ba26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 25 Oct 2023 14:31:49 +0800 Subject: [PATCH 020/380] chore: auto align --- .../PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx | 3 --- src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx | 2 -- 2 files changed, 5 deletions(-) diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx index a37aecfd6..84621fcb4 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -28,9 +28,6 @@ export default function TimeColumn(props: TimeUnitColumnProps) { const panelPrefixCls = `${prefixCls}-time-panel`; const cellPrefixCls = `${prefixCls}-time-panel-cell`; - // ant-picker-time-panel-cell ant-picker-time-panel-cell-selected - // ant-picker-time-panel-cell-inner - // ========================== Refs ========================== const ulRef = React.useRef(null); diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index e7237de78..fd361abed 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -172,8 +172,6 @@ export default function TimePanelBody(props: SharedTimeProps', validateDate.format('HH:mm:ss')); - onChange(validateDate); }; From 13d976972acde5a227559eb757f691be4bd6157e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 25 Oct 2023 15:49:35 +0800 Subject: [PATCH 021/380] chore: more cls --- assets/index.less | 38 ++++++--- docs/examples/debug.tsx | 4 +- src/NewPicker/FormatInput.tsx | 6 +- .../TimePanel/TimePanelBody/TimeColumn.tsx | 85 +++++++++++-------- .../TimePanel/TimePanelBody/index.tsx | 45 ++++++++-- src/NewPicker/PickerPanel/TimePanel/index.tsx | 15 ++-- src/NewPicker/interface.tsx | 10 +++ src/locale/zh_CN.ts | 14 ++- 8 files changed, 148 insertions(+), 69 deletions(-) diff --git a/assets/index.less b/assets/index.less index 46e2124fb..86e86a581 100644 --- a/assets/index.less +++ b/assets/index.less @@ -257,20 +257,31 @@ 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; - } + // &::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; @@ -291,6 +302,7 @@ } > li { + width: 50px; margin: 0; padding: 0; cursor: pointer; @@ -310,10 +322,10 @@ 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; diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 3e9fe0555..b43fcb058 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -80,12 +80,14 @@ export default () => { defaultValue={moment('1990-10-23 13:05:08.233')} disabledDate={(date) => date.week() === 3} time={{ - format: 'HH:mm:ss.SSS', + // format: 'HH:mm:ss.SSS', + format: 'LTS', use12Hours: true, changeOnScroll: true, disabledHours: () => [0, 1, 2, 3, 4, 5], disabledMinutes: (hour) => (hour === 6 ? [0, 1, 2, 4, 5, 6] : []), disabledSeconds: (_, minute) => (minute === 3 ? [6, 7, 8, 9] : []), + showTitle: true, }} // cellRender={(val: number, info) => { // if (info.type === 'time') { diff --git a/src/NewPicker/FormatInput.tsx b/src/NewPicker/FormatInput.tsx index c00ae36da..933a0ca39 100644 --- a/src/NewPicker/FormatInput.tsx +++ b/src/NewPicker/FormatInput.tsx @@ -2,10 +2,12 @@ import * as React from 'react'; export interface FormatInputProps { format: string; - value?: string; + value: string; onChange?: (value: string) => void; } -export default function FormatInput() { +export default function FormatInput(props: FormatInputProps) { + const { value } = props; + return ; } diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx index 84621fcb4..93aec1942 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -18,10 +18,12 @@ export interface TimeUnitColumnProps { type: 'hour' | 'minute' | 'second' | 'meridiem'; onChange: (value: number | string) => void; changeOnScroll?: boolean; + showTitle?: boolean; + title?: React.ReactNode; } export default function TimeColumn(props: TimeUnitColumnProps) { - const { units, value, type, onChange, changeOnScroll } = props; + const { showTitle, title, units, value, type, onChange, changeOnScroll } = props; const { prefixCls, cellRender, now, locale } = React.useContext(PanelContext); @@ -97,43 +99,54 @@ export default function TimeColumn(props: TimeUnitColumnProps) { }; // ========================= Render ========================= + const columnPrefixCls = `${panelPrefixCls}-column`; + const columnHolderPrefixCls = `${columnPrefixCls}-holder`; + return ( -
            - {units.map(({ label, value: unitValue, disabled }) => { - const inner =
            {label}
            ; - - return ( -
          • { - if (!disabled) { - onChange(unitValue); - } - }} - data-value={unitValue} - > - {cellRender - ? cellRender(unitValue, { - prefixCls, - originNode: inner, - today: now, - type: 'time', - subType: type, - locale, - }) - : inner} -
            • - ); - })} -
          + {showTitle && ( +
          + {title !== undefined ? title || '\u00A0' : type} +
          + )} + +
            + {units.map(({ label, value: unitValue, disabled }) => { + const inner =
            {label}
            ; + + return ( +
          • { + if (!disabled) { + onChange(unitValue); + } + }} + data-value={unitValue} + > + {cellRender + ? cellRender(unitValue, { + prefixCls, + originNode: inner, + today: now, + type: 'time', + subType: type, + locale, + }) + : inner} +
            • + ); + })} +
          + ); } diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index fd361abed..e10dc5f22 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { formatValue } from '../../../../utils/dateUtil'; import { leftPad } from '../../../../utils/miscUtil'; import type { SharedPanelProps, SharedTimeProps } from '../../../interface'; import { PanelContext } from '../../context'; @@ -51,6 +52,7 @@ export default function TimePanelBody(props: SharedTimeProps(props: SharedTimeProps(props: SharedTimeProps [ + const meridiemUnits = React.useMemo(() => { + if (!mergedShowMeridiem) { + return []; + } + + const base = generateConfig.getNow(); + const amDate = generateConfig.setHour(base, 6); + const pmDate = generateConfig.setHour(base, 18); + + return [ { - label: 'AM', + label: locale.meridiemFormat + ? formatValue(amDate, { + generateConfig, + locale, + format: locale.meridiemFormat, + }) + : 'AM', value: 'am', disabled: rowHourUnits.every((h) => !isAM(h.value as number)), }, { - label: 'PM', + label: locale.meridiemFormat + ? formatValue(pmDate, { + generateConfig, + locale, + format: locale.meridiemFormat, + }) + : 'PM', value: 'pm', disabled: rowHourUnits.every((h) => isAM(h.value as number)), }, - ], - [rowHourUnits], - ); + ]; + }, [rowHourUnits, mergedShowMeridiem, generateConfig, locale]); // ========================= Change ========================= /** @@ -201,6 +222,8 @@ export default function TimePanelBody(props: SharedTimeProps {mergedShowHour && ( (props: SharedTimeProps(props: SharedTimeProps(props: SharedTimeProps(props: SharedPanelProps(props: SharedPanelProps
          - {value - ? formatValue(value, { - locale, - format, - generateConfig, - }) - : '\u00A0'} + {value ? : '\u00A0'}
          diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index c52984803..e070de9fe 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -23,6 +23,14 @@ export type Locale = { /** meridiem format in body panel */ meridiemFormat?: string; + // Column desc + hour?: string; + minute?: string; + second?: string; + meridiem?: string; + + // >>>>> Not used yet + // Input format /** Full date format like YYYY-MM-DD in input */ dateFormat: string; @@ -101,6 +109,8 @@ export interface SharedTimeProps { /** Only work in picker is `time` */ format?: string; /** Only work in picker is `time` */ + showTitle?: boolean; + /** Only work in picker is `time` */ showNow?: boolean; /** Only work in picker is `time` */ showHour?: boolean; diff --git a/src/locale/zh_CN.ts b/src/locale/zh_CN.ts index f5e60fe22..996e8a07c 100644 --- a/src/locale/zh_CN.ts +++ b/src/locale/zh_CN.ts @@ -2,6 +2,17 @@ import type { Locale } from '../interface'; const locale: Locale = { locale: 'zh_CN', + + yearFormat: 'YYYYๅนด', + + dayFormat: 'D', + meridiemFormat: 'A', + + hour: 'ๆ—ถ', + minute: 'ๅˆ†', + second: '็ง’', + meridiem: '', + today: 'ไปŠๅคฉ', now: 'ๆญคๅˆป', backToToday: '่ฟ”ๅ›žไปŠๅคฉ', @@ -17,8 +28,7 @@ const locale: Locale = { monthSelect: '้€‰ๆ‹ฉๆœˆไปฝ', yearSelect: '้€‰ๆ‹ฉๅนดไปฝ', decadeSelect: '้€‰ๆ‹ฉๅนดไปฃ', - yearFormat: 'YYYYๅนด', - dayFormat: 'D', + dateFormat: 'YYYYๅนดMๆœˆDๆ—ฅ', dateTimeFormat: 'YYYYๅนดMๆœˆDๆ—ฅ HHๆ—ถmmๅˆ†ss็ง’', previousYear: 'ไธŠไธ€ๅนด (Control้”ฎๅŠ ๅทฆๆ–นๅ‘้”ฎ)', From e8ace6c389c6a592505c85a2e1a0e48c15119cea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 25 Oct 2023 16:26:55 +0800 Subject: [PATCH 022/380] chore: support millisec --- docs/examples/debug.tsx | 10 +++- src/NewPicker/FormatInput.tsx | 2 +- .../TimePanel/TimePanelBody/TimeColumn.tsx | 2 +- .../TimePanel/TimePanelBody/index.tsx | 48 +++++++++++++++- src/NewPicker/PickerPanel/TimePanel/index.tsx | 5 +- src/NewPicker/interface.tsx | 9 +++ src/generate/dateFns.ts | 57 ++++++++++--------- src/generate/dayjs.ts | 2 + src/generate/index.ts | 2 + src/generate/luxon.ts | 30 +++++----- src/generate/moment.ts | 31 +++++----- src/locale/zh_CN.ts | 1 + src/utils/miscUtil.ts | 2 +- 13 files changed, 135 insertions(+), 66 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index b43fcb058..1372b97ea 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -77,17 +77,21 @@ export default () => { date.week() === 3} time={{ - // format: 'HH:mm:ss.SSS', - format: 'LTS', + format: 'HH:mm:ss.SSS', + // format: 'LTS', use12Hours: true, changeOnScroll: true, disabledHours: () => [0, 1, 2, 3, 4, 5], disabledMinutes: (hour) => (hour === 6 ? [0, 1, 2, 4, 5, 6] : []), disabledSeconds: (_, minute) => (minute === 3 ? [6, 7, 8, 9] : []), + disabledTime: () => ({ + disabledMilliSeconds: () => [0, 100], + }), showTitle: true, + millisecondStep: 20, }} // cellRender={(val: number, info) => { // if (info.type === 'time') { diff --git a/src/NewPicker/FormatInput.tsx b/src/NewPicker/FormatInput.tsx index 933a0ca39..7d55e2840 100644 --- a/src/NewPicker/FormatInput.tsx +++ b/src/NewPicker/FormatInput.tsx @@ -7,7 +7,7 @@ export interface FormatInputProps { } export default function FormatInput(props: FormatInputProps) { - const { value } = props; + const { value, format } = props; return ; } diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx index 93aec1942..2a351c866 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -15,7 +15,7 @@ export type Unit = { export interface TimeUnitColumnProps { units: Unit[]; value: number | string; - type: 'hour' | 'minute' | 'second' | 'meridiem'; + type: 'hour' | 'minute' | 'second' | 'millisecond' | 'meridiem'; onChange: (value: number | string) => void; changeOnScroll?: boolean; showTitle?: boolean; diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index e10dc5f22..751928c83 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -24,6 +24,7 @@ function generateUnits( step = 1, hideDisabledOptions = false, disabledUnits: number[] = [], + pad = 2, ) { const units: Unit[] = []; const integerStep = step >= 1 ? step | 0 : 1; @@ -32,7 +33,7 @@ function generateUnits( if (!disabled || !hideDisabledOptions) { units.push({ - label: leftPad(i, 2), + label: leftPad(i, pad), value: i, disabled, }); @@ -51,6 +52,7 @@ export default function TimePanelBody(props: SharedTimeProps(props: SharedTimeProps(props: SharedTimeProps { + const [ + mergedDisabledHours, + mergedDisabledMinutes, + mergedDisabledSeconds, + mergedDisabledMilliseconds, + ] = React.useMemo(() => { const disabledConfig = disabledTime?.(mergedValue) || {}; return [ disabledConfig.disabledHours || disabledHours || emptyDisabled, disabledConfig.disabledMinutes || disabledMinutes || emptyDisabled, disabledConfig.disabledSeconds || disabledSeconds || emptyDisabled, + disabledConfig.disabledMilliSeconds || emptyDisabled, ]; }, [mergedValue, disabledTime, disabledHours, disabledMinutes, disabledSeconds]); @@ -138,6 +149,19 @@ export default function TimePanelBody(props: SharedTimeProps + generateUnits( + 0, + 999, + millisecondStep, + hideDisabledOptions, + mergedDisabledMilliseconds(nextHour, nextMinute, nextSecond), + 3, + ), + [hideDisabledOptions, mergedDisabledMilliseconds, millisecondStep], + ); + const minuteUnits = React.useMemo(() => getMinuteUnits(hour), [getMinuteUnits, hour]); const secondUnits = React.useMemo( @@ -145,6 +169,11 @@ export default function TimePanelBody(props: SharedTimeProps getMillisecondUnits(hour, minute, second), + [getMillisecondUnits, hour, minute, second], + ); + const meridiemUnits = React.useMemo(() => { if (!mergedShowMeridiem) { return []; @@ -209,6 +238,10 @@ export default function TimePanelBody(props: SharedTimeProps { + triggerChange(generateConfig.setMillisecond(mergedValue, val)); + }; + const onMeridiemChange = (val: string) => { if (val === 'am' && !isAM(hour)) { triggerChange(generateConfig.setHour(mergedValue, hour - 12)); @@ -253,6 +286,17 @@ export default function TimePanelBody(props: SharedTimeProps )} + {mergedShowMillisecond && ( + + )} {mergedShowMeridiem && ( (props: SharedPanelProps
          - - {value ? : '\u00A0'} - + {value ? formatTimeStr : '\u00A0'}
          diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index e070de9fe..6f0758c39 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -27,6 +27,7 @@ export type Locale = { hour?: string; minute?: string; second?: string; + millisecond?: string; meridiem?: string; // >>>>> Not used yet @@ -103,6 +104,7 @@ export interface DisabledTimes { disabledHours?: () => number[]; disabledMinutes?: (hour: number) => number[]; disabledSeconds?: (hour: number, minute: number) => number[]; + disabledMilliSeconds?: (hour: number, minute: number, second: number) => number[]; } export interface SharedTimeProps { @@ -119,6 +121,8 @@ export interface SharedTimeProps { /** Only work in picker is `time` */ showSecond?: boolean; /** Only work in picker is `time` */ + showMillisecond?: boolean; + /** Only work in picker is `time` */ use12Hours?: boolean; /** Only work in picker is `time` */ hourStep?: IntRange<1, 23>; @@ -126,6 +130,11 @@ export interface SharedTimeProps { minuteStep?: IntRange<1, 59>; /** Only work in picker is `time` */ secondStep?: IntRange<1, 59>; + /** + * Only work in picker is `time`. + * Note that too small step will cause performance issue. + */ + millisecondStep?: IntRange<1, 999>; /** Only work in picker is `time` */ hideDisabledOptions?: boolean; diff --git a/src/generate/dateFns.ts b/src/generate/dateFns.ts index 196f8d7ec..4178b2521 100644 --- a/src/generate/dateFns.ts +++ b/src/generate/dateFns.ts @@ -1,27 +1,28 @@ import { - getDay, - getYear, - getMonth, - getDate, + addDays, + addMonths, + addYears, endOfMonth, + format as formatDate, + getDate, + getDay, getHours, getMinutes, + getMonth, getSeconds, - addYears, - addMonths, - addDays, - setYear, - setMonth, + getWeek, + getYear, + isAfter, + isValid, + parse as parseDate, setDate, setHours, + setMilliseconds, setMinutes, + setMonth, setSeconds, - isAfter, - isValid, - getWeek, + setYear, startOfWeek, - format as formatDate, - parse as parseDate, } from 'date-fns'; import * as Locale from 'date-fns/locale'; import type { GenerateConfig } from '.'; @@ -42,15 +43,16 @@ const localeParse = (format: string) => { const generateConfig: GenerateConfig = { // get getNow: () => new Date(), - getFixedDate: string => new Date(string), - getEndDate: date => endOfMonth(date), - getWeekDay: date => getDay(date), - getYear: date => getYear(date), - getMonth: date => getMonth(date), - getDate: date => getDate(date), - getHour: date => getHours(date), - getMinute: date => getMinutes(date), - getSecond: date => getSeconds(date), + getFixedDate: (string) => new Date(string), + getEndDate: (date) => endOfMonth(date), + getWeekDay: (date) => getDay(date), + getYear: (date) => getYear(date), + getMonth: (date) => getMonth(date), + getDate: (date) => getDate(date), + getHour: (date) => getHours(date), + getMinute: (date) => getMinutes(date), + getSecond: (date) => getSeconds(date), + getMillisecond: (date) => date.getMilliseconds(), // set addYear: (date, diff) => addYears(date, diff), @@ -62,13 +64,14 @@ const generateConfig: GenerateConfig = { setHour: (date, hour) => setHours(date, hour), setMinute: (date, minute) => setMinutes(date, minute), setSecond: (date, second) => setSeconds(date, second), + setMillisecond: (date, millisecond) => setMilliseconds(date, millisecond), // Compare isAfter: (date1, date2) => isAfter(date1, date2), - isValidate: date => isValid(date), + isValidate: (date) => isValid(date), locale: { - getWeekFirstDay: locale => { + getWeekFirstDay: (locale) => { const clone = Locale[dealLocal(locale)]; return clone.options.weekStartsOn; }, @@ -78,11 +81,11 @@ const generateConfig: GenerateConfig = { getWeek: (locale, date) => { return getWeek(date, { locale: Locale[dealLocal(locale)] }); }, - getShortWeekDays: locale => { + getShortWeekDays: (locale) => { const clone = Locale[dealLocal(locale)]; return Array.from({ length: 7 }).map((_, i) => clone.localize.day(i, { width: 'short' })); }, - getShortMonths: locale => { + getShortMonths: (locale) => { const clone = Locale[dealLocal(locale)]; return Array.from({ length: 12 }).map((_, i) => clone.localize.month(i, { width: 'abbreviated' }), diff --git a/src/generate/dayjs.ts b/src/generate/dayjs.ts index d17aa3a42..aae56610b 100644 --- a/src/generate/dayjs.ts +++ b/src/generate/dayjs.ts @@ -120,6 +120,7 @@ const generateConfig: GenerateConfig = { getHour: (date) => date.hour(), getMinute: (date) => date.minute(), getSecond: (date) => date.second(), + getMillisecond: (date) => date.millisecond(), // set addYear: (date, diff) => date.add(diff, 'year'), @@ -131,6 +132,7 @@ const generateConfig: GenerateConfig = { setHour: (date, hour) => date.hour(hour), setMinute: (date, minute) => date.minute(minute), setSecond: (date, second) => date.second(second), + setMillisecond: (date, milliseconds) => date.millisecond(milliseconds), // Compare isAfter: (date1, date2) => date1.isAfter(date2), diff --git a/src/generate/index.ts b/src/generate/index.ts index b0cd56d5e..88b6318f1 100644 --- a/src/generate/index.ts +++ b/src/generate/index.ts @@ -1,6 +1,7 @@ export type GenerateConfig = { // Get getWeekDay: (value: DateType) => number; + getMillisecond: (value: DateType) => number; getSecond: (value: DateType) => number; getMinute: (value: DateType) => number; getHour: (value: DateType) => number; @@ -21,6 +22,7 @@ export type GenerateConfig = { setHour: (value: DateType, hour: number) => DateType; setMinute: (value: DateType, minute: number) => DateType; setSecond: (value: DateType, second: number) => DateType; + setMillisecond: (value: DateType, millisecond: number) => DateType; // Compare isAfter: (date1: DateType, date2: DateType) => boolean; diff --git a/src/generate/luxon.ts b/src/generate/luxon.ts index 8017fa099..cd1def454 100644 --- a/src/generate/luxon.ts +++ b/src/generate/luxon.ts @@ -57,15 +57,16 @@ const normalizeLocale = (locale: string): string => locale.replace(/_/g, '-'); const generateConfig: GenerateConfig = { // get getNow: () => DateTime.local(), - getFixedDate: string => DateTime.fromFormat(string, 'yyyy-MM-dd'), - getEndDate: date => date.endOf('month'), - getWeekDay: date => date.weekday, - getYear: date => date.year, - getMonth: date => date.month - 1, // getMonth should return 0-11, luxon month returns 1-12 - getDate: date => date.day, - getHour: date => date.hour, - getMinute: date => date.minute, - getSecond: date => date.second, + getFixedDate: (string) => DateTime.fromFormat(string, 'yyyy-MM-dd'), + getEndDate: (date) => date.endOf('month'), + getWeekDay: (date) => date.weekday, + getYear: (date) => date.year, + getMonth: (date) => date.month - 1, // getMonth should return 0-11, luxon month returns 1-12 + getDate: (date) => date.day, + getHour: (date) => date.hour, + getMinute: (date) => date.minute, + getSecond: (date) => date.second, + getMillisecond: (date) => date.millisecond, // set addYear: (date, diff) => date.plus({ year: diff }), @@ -77,22 +78,23 @@ const generateConfig: GenerateConfig = { setHour: (date, hour) => date.set({ hour }), setMinute: (date, minute) => date.set({ minute }), setSecond: (date, second) => date.set({ second }), + setMillisecond: (date, milliseconds) => date.set({ millisecond: milliseconds }), // Compare isAfter: (date1, date2) => date1 > date2, - isValidate: date => date.isValid, + isValidate: (date) => date.isValid, locale: { getWeekFirstDate: (locale, date) => date.setLocale(normalizeLocale(locale)).startOf('week'), - getWeekFirstDay: locale => + getWeekFirstDay: (locale) => DateTime.local().setLocale(normalizeLocale(locale)).startOf('week').weekday, getWeek: (locale, date) => date.setLocale(normalizeLocale(locale)).weekNumber, - getShortWeekDays: locale => { + getShortWeekDays: (locale) => { const weekdays = Info.weekdays(weekDayFormatMap[locale] || 'short', { locale: normalizeLocale(locale), }); - const shifted = weekdays.map(weekday => weekday.slice(0, weekDayLengthMap[locale])); + const shifted = weekdays.map((weekday) => weekday.slice(0, weekDayLengthMap[locale])); // getShortWeekDays should return weekday labels starting from Sunday. // luxon returns them starting from Monday, so we have to shift the results. @@ -100,7 +102,7 @@ const generateConfig: GenerateConfig = { return shifted; }, - getShortMonths: locale => Info.months('short', { locale: normalizeLocale(locale) }), + getShortMonths: (locale) => Info.months('short', { locale: normalizeLocale(locale) }), format: (locale, date, format) => { if (!date || !date.isValid) { return null; diff --git a/src/generate/moment.ts b/src/generate/moment.ts index 62a0538fc..3fd5445bb 100644 --- a/src/generate/moment.ts +++ b/src/generate/moment.ts @@ -6,21 +6,22 @@ import type { GenerateConfig } from '.'; const generateConfig: GenerateConfig = { // get getNow: () => moment(), - getFixedDate: string => moment(string, 'YYYY-MM-DD'), - getEndDate: date => { + getFixedDate: (string) => moment(string, 'YYYY-MM-DD'), + getEndDate: (date) => { const clone = date.clone(); return clone.endOf('month'); }, - getWeekDay: date => { + getWeekDay: (date) => { const clone = date.clone().locale('en_US'); return clone.weekday() + clone.localeData().firstDayOfWeek(); }, - getYear: date => date.year(), - getMonth: date => date.month(), - getDate: date => date.date(), - getHour: date => date.hour(), - getMinute: date => date.minute(), - getSecond: date => date.second(), + getYear: (date) => date.year(), + getMonth: (date) => date.month(), + getDate: (date) => date.date(), + getHour: (date) => date.hour(), + getMinute: (date) => date.minute(), + getSecond: (date) => date.second(), + getMillisecond: (date) => date.millisecond(), // set addYear: (date, diff) => { @@ -59,13 +60,17 @@ const generateConfig: GenerateConfig = { const clone = date.clone(); return clone.second(second); }, + setMillisecond: (date, millisecond) => { + const clone = date.clone(); + return clone.millisecond(millisecond); + }, // Compare isAfter: (date1, date2) => date1.isAfter(date2), - isValidate: date => date.isValid(), + isValidate: (date) => date.isValid(), locale: { - getWeekFirstDay: locale => { + getWeekFirstDay: (locale) => { const date = moment().locale(locale); return date.localeData().firstDayOfWeek(); }, @@ -79,11 +84,11 @@ const generateConfig: GenerateConfig = { const result = clone.locale(locale); return result.week(); }, - getShortWeekDays: locale => { + getShortWeekDays: (locale) => { const date = moment().locale(locale); return date.localeData().weekdaysMin(); }, - getShortMonths: locale => { + getShortMonths: (locale) => { const date = moment().locale(locale); return date.localeData().monthsShort(); }, diff --git a/src/locale/zh_CN.ts b/src/locale/zh_CN.ts index 996e8a07c..5e160940d 100644 --- a/src/locale/zh_CN.ts +++ b/src/locale/zh_CN.ts @@ -11,6 +11,7 @@ const locale: Locale = { hour: 'ๆ—ถ', minute: 'ๅˆ†', second: '็ง’', + millisecond: 'ๆฏซ็ง’', meridiem: '', today: 'ไปŠๅคฉ', diff --git a/src/utils/miscUtil.ts b/src/utils/miscUtil.ts index 68db23632..16d525cd7 100644 --- a/src/utils/miscUtil.ts +++ b/src/utils/miscUtil.ts @@ -5,7 +5,7 @@ export function leftPad( ) { let current = String(str); while (current.length < length) { - current = `${fill}${str}`; + current = `${fill}${current}`; } return current; } From cb3ade035bb229bc6b5baf05910e8af8ce5edabd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 25 Oct 2023 16:45:15 +0800 Subject: [PATCH 023/380] chore: fix picker value logic --- src/NewPicker/PickerPanel/index.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 7bb03a199..c81b446e8 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -108,11 +108,21 @@ export default function PickerPanel(props: PickerPanelProps(defaultValue, { value, + onChange, }); + // PickerValue is used to control the current displaying panel + const [mergedPickerValue, setPickerValue] = useMergedState( + defaultPickerValue || mergedValue || now, + { + value: pickerValue, + onChange: onPickerValueChange, + }, + ); + const onInternalChange = (newVal: DateType) => { setMergedValue(newVal); - onChange?.(newVal); + setPickerValue(newVal); // Update mode if needed if (mergedMode !== picker) { @@ -133,16 +143,6 @@ export default function PickerPanel(props: PickerPanelProps(null); From ccf8b055a5a033a46f2753e48a004aae73a68413 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 25 Oct 2023 17:02:24 +0800 Subject: [PATCH 024/380] chore: datetime --- docs/examples/debug.tsx | 16 +++++++--- .../PickerPanel/DateTimePanel/index.tsx | 20 +++++++++++++ .../TimePanel/TimePanelBody/index.tsx | 29 +++++++++---------- src/NewPicker/PickerPanel/TimePanel/index.tsx | 13 +++++---- src/NewPicker/PickerPanel/index.tsx | 15 +++++----- src/NewPicker/interface.tsx | 14 ++------- 6 files changed, 64 insertions(+), 43 deletions(-) create mode 100644 src/NewPicker/PickerPanel/DateTimePanel/index.tsx diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 1372b97ea..9eae99df9 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -5,7 +5,7 @@ import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; import PickerPanel, { type PickerPanelProps } from '../../src/NewPicker/PickerPanel'; -import moment from 'moment'; +import moment, { Moment } from 'moment'; import 'moment/locale/zh-cn'; import momentGenerateConfig from '../../src/generate/moment'; import zhCN from '../../src/locale/zh_CN'; @@ -25,6 +25,8 @@ function CellPicker(props: Partial) { export default () => { const singleRef = React.useRef(null); + const [value, setValue] = React.useState(null); + return (
          @@ -41,7 +43,9 @@ export default () => {
          - + + {/* date.date() === 11} // cellRender={(date: Moment, info) => { @@ -49,6 +53,8 @@ export default () => { // return date.format('Do'); // } // }} + value={value} + onChange={setValue} /> { picker="month" defaultValue={moment('2000-01-01')} disabledDate={(date) => date.week() === 3} + value={value} + onChange={setValue} /> { picker="time" defaultValue={moment('1990-10-23 13:05:08.200')} disabledDate={(date) => date.week() === 3} - time={{ + showTime={{ format: 'HH:mm:ss.SSS', // format: 'LTS', use12Hours: true, @@ -98,7 +106,7 @@ export default () => { // return `${val}!!!`; // } // }} - /> + /> */}
          ); diff --git a/src/NewPicker/PickerPanel/DateTimePanel/index.tsx b/src/NewPicker/PickerPanel/DateTimePanel/index.tsx new file mode 100644 index 000000000..fa02d4254 --- /dev/null +++ b/src/NewPicker/PickerPanel/DateTimePanel/index.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import type { SharedPanelProps } from '../../interface'; +import DatePanel from '../DatePanel'; +import TimePanel from '../TimePanel'; + +export default function DateTimePanel(props: SharedPanelProps) { + const { prefixCls } = props; + + const panelPrefixCls = `${prefixCls}-datetime-panel`; + + console.log('??>', props); + + // ============================== Render ============================== + return ( +
          + + +
          + ); +} diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index 751928c83..fef518dc7 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -73,16 +73,13 @@ export default function TimePanelBody(props: SharedTimeProps(props: SharedTimeProps { - const disabledConfig = disabledTime?.(mergedValue) || {}; + const disabledConfig = disabledTime?.(value) || {}; return [ disabledConfig.disabledHours || disabledHours || emptyDisabled, @@ -107,7 +104,7 @@ export default function TimePanelBody(props: SharedTimeProps { @@ -227,26 +224,26 @@ export default function TimePanelBody(props: SharedTimeProps { - triggerChange(generateConfig.setHour(mergedValue, val)); + triggerChange(generateConfig.setHour(value, val)); }; const onMinuteChange = (val: number) => { - triggerChange(generateConfig.setMinute(mergedValue, val)); + triggerChange(generateConfig.setMinute(value, val)); }; const onSecondChange = (val: number) => { - triggerChange(generateConfig.setSecond(mergedValue, val)); + triggerChange(generateConfig.setSecond(value, val)); }; const onMillisecondChange = (val: number) => { - triggerChange(generateConfig.setMillisecond(mergedValue, val)); + triggerChange(generateConfig.setMillisecond(value, val)); }; const onMeridiemChange = (val: string) => { if (val === 'am' && !isAM(hour)) { - triggerChange(generateConfig.setHour(mergedValue, hour - 12)); + triggerChange(generateConfig.setHour(value, hour - 12)); } else if (val === 'pm' && isAM(hour)) { - triggerChange(generateConfig.setHour(mergedValue, hour + 12)); + triggerChange(generateConfig.setHour(value, hour + 12)); } }; diff --git a/src/NewPicker/PickerPanel/TimePanel/index.tsx b/src/NewPicker/PickerPanel/TimePanel/index.tsx index 38a701e5e..d171009a4 100644 --- a/src/NewPicker/PickerPanel/TimePanel/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/index.tsx @@ -14,18 +14,20 @@ export default function TimePanel(props: SharedPanelProps(props: SharedPanelProps
          - {value ? formatTimeStr : '\u00A0'} - + {mergedValue ? formatTimeStr : '\u00A0'} +
          ); diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index c81b446e8..300888dc5 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -11,6 +11,7 @@ import type { } from '../interface'; import { PrefixClsContext } from '../PickerInput/context'; import DatePanel from './DatePanel'; +import DateTimePanel from './DateTimePanel'; import DecadePanel from './DecadePanel'; import MonthPanel from './MonthPanel'; import TimePanel from './TimePanel'; @@ -19,6 +20,7 @@ import YearPanel from './YearPanel'; const DefaultComponents: Components = { date: DatePanel, + datetime: DateTimePanel, week: WeekPanel, month: MonthPanel, year: YearPanel, @@ -50,7 +52,7 @@ export interface PickerPanelProps { picker?: PanelMode; // Time - time?: SharedTimeProps; + showTime?: SharedTimeProps; // Cell cellRender?: CellRender; @@ -84,7 +86,7 @@ export default function PickerPanel(props: PickerPanelProps(props: PickerPanelProps= 0 && nextMode) { setMergedMode(nextMode); } else if (mergedMode === 'month') { - if (picker === 'datetime') { - setMergedMode('datetime'); - } else if (picker === 'date') { + if (picker === 'date') { setMergedMode('date'); } else if (picker === 'week') { setMergedMode('week'); @@ -147,14 +147,15 @@ export default function PickerPanel(props: PickerPanelProps(null); // ======================= Components ======================= - const PanelComponent = components[mergedMode] || DefaultComponents[mergedMode] || DatePanel; + const componentName = mergedMode === 'date' && showTime ? 'datetime' : mergedMode; + const PanelComponent = components[componentName] || DefaultComponents[componentName] || DatePanel; // ========================= Render ========================= return (
          = ( date: DateType, @@ -176,11 +168,11 @@ export interface SharedPanelProps { onHover: (value: DateType | null) => void; // Time - time?: SharedTimeProps; + showTime?: SharedTimeProps; } export type Components = Partial< - Record>> + Record>> >; // ========================= Picker ========================= From 3c96f62d1106c96ddb3e033b076b12ae49838eec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 25 Oct 2023 17:04:52 +0800 Subject: [PATCH 025/380] chore: all panels --- src/NewPicker/PickerPanel/DateTimePanel/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/NewPicker/PickerPanel/DateTimePanel/index.tsx b/src/NewPicker/PickerPanel/DateTimePanel/index.tsx index fa02d4254..8236e322a 100644 --- a/src/NewPicker/PickerPanel/DateTimePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DateTimePanel/index.tsx @@ -4,17 +4,15 @@ import DatePanel from '../DatePanel'; import TimePanel from '../TimePanel'; export default function DateTimePanel(props: SharedPanelProps) { - const { prefixCls } = props; + const { prefixCls, value, pickerValue } = props; const panelPrefixCls = `${prefixCls}-datetime-panel`; - console.log('??>', props); - // ============================== Render ============================== return (
          - +
          ); } From 6a9054f4373d0064482675c7a7f91ca367d7a526 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 26 Oct 2023 14:01:28 +0800 Subject: [PATCH 026/380] chore: all the match --- assets/index.less | 6 + docs/examples/debug.tsx | 35 +++++- src/NewPicker/FormatInput.tsx | 13 --- src/NewPicker/PickerInput/RangePicker.tsx | 85 +++++++++++++- src/NewPicker/PickerInput/Selector/Input.tsx | 109 +++++++++++++++++- .../PickerInput/Selector/RangeSelector.tsx | 64 +++++++++- src/NewPicker/PickerInput/Selector/util.ts | 67 +++++++++++ .../PickerInput/hooks/useFieldFormat.ts | 44 +++++++ src/NewPicker/interface.tsx | 50 +++++++- 9 files changed, 437 insertions(+), 36 deletions(-) delete mode 100644 src/NewPicker/FormatInput.tsx create mode 100644 src/NewPicker/PickerInput/Selector/util.ts create mode 100644 src/NewPicker/PickerInput/hooks/useFieldFormat.ts diff --git a/assets/index.less b/assets/index.less index 86e86a581..63db2aeef 100644 --- a/assets/index.less +++ b/assets/index.less @@ -372,6 +372,12 @@ text-align: right; } + &-active { + > input { + background: rgba(0, 0, 255, 0.05); + } + } + > input { width: 100%; .placeholder(); diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 9eae99df9..277ecfdcf 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import '../../assets/index.less'; import type { PickerRef } from '../../src/NewPicker/interface'; import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; -import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; import PickerPanel, { type PickerPanelProps } from '../../src/NewPicker/PickerPanel'; import moment, { Moment } from 'moment'; @@ -13,15 +12,22 @@ import zhCN from '../../src/locale/zh_CN'; moment.locale('zh-cn'); window.moment = moment; +const sharedLocale = { + locale: zhCN, + generateConfig: momentGenerateConfig, +}; + function CellPicker(props: Partial) { return (
          {props.picker || 'date'}
          - +
          ); } +const MyTime = () =>
          2333
          ; + export default () => { const singleRef = React.useRef(null); @@ -29,9 +35,16 @@ export default () => { return (
          - + {/* */}
          - +
          - + {/* */} + {/* */} {/* void; -} - -export default function FormatInput(props: FormatInputProps) { - const { value, format } = props; - - return ; -} diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 7ddd396e6..b8d9a2caf 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -1,16 +1,95 @@ +import { useMergedState } from 'rc-util'; import * as React from 'react'; -import { PrefixClsContext } from './context'; import type { SharedPickerProps } from '../interface'; +import PickerPanel from '../PickerPanel'; +import PickerTrigger from '../PickerTrigger'; +import { PrefixClsContext } from './context'; +import { useFieldFormat } from './hooks/useFieldFormat'; import RangeSelector from './Selector/RangeSelector'; export type RangePickerProps = SharedPickerProps; export default function Picker(props: RangePickerProps) { - const { prefixCls = 'rc-picker', className, style, suffixIcon } = props; + const { + // Style + prefixCls = 'rc-picker', + className, + style, + styles = {}, + classNames = {}, + + // Open + defaultOpen, + open, + onOpenChange, + popupAlign, + getPopupContainer, + + // Picker + locale, + generateConfig, + picker = 'date', + showTime, + + // Format + format, + + // Motion + transitionName, + + suffixIcon, + direction, + } = props; + + // ========================= Open ========================= + const [mergedOpen, setMergeOpen] = useMergedState(defaultOpen || false, { + value: open, + onChange: onOpenChange, + }); + + const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; + + // ========================= Mode ========================= + const [formatList, maskFormat] = useFieldFormat( + picker === 'date' && showTime ? 'datetime' : picker, + locale, + format, + ); + + // ======================== Active ======================== + const [focusIndex, setFocusIndex] = React.useState(null); + + // ======================== Panels ======================== + const panel = ; + // ======================== Render ======================== return ( - + + { + setFocusIndex(index); + }} + onBlur={() => { + setFocusIndex(null); + }} + /> + ); } diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index c39746f18..24ae37f22 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -1,19 +1,120 @@ +import classNames from 'classnames'; +import { useComposeRef } from 'rc-util'; +import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import * as React from 'react'; import { PrefixClsContext } from '../context'; import Icon from './Icon'; +import { getCellRange, getMask, matchFormat } from './util'; -export interface InputProps extends React.HTMLAttributes { +// Format logic +// +// First time on focus: +// 1. check if the text is valid, if not fill with format +// 2. set highlight cell to the first cell +// Cells +// 1. Selection the index cell, set inner `cacheValue` to '' +// 2. Key input filter non-number char, patch after the `cacheValue` +// 1. Replace the `cacheValue` with input align the cell length +// 2. Re-selection the mask cell +// 3. If `cacheValue` match the limit length or cell format (like 1 ~ 12 month), go to next cell + +export interface InputProps extends React.InputHTMLAttributes { + format?: string; + validateFormat: (value: string, format: string) => boolean; + active?: boolean; suffixIcon?: React.ReactNode; + value?: string; } const Input = React.forwardRef((props, ref) => { - const { suffixIcon, ...restProps } = props; + const { active, suffixIcon, format, validateFormat, onFocus, onBlur, value, ...restProps } = + props; const prefixCls = React.useContext(PrefixClsContext); + const inputPrefixCls = `${prefixCls}-input`; + + // ======================== Value ========================= + const [focused, setFocused] = React.useState(false); + const [focusValue, setFocusValue] = React.useState(value || ''); + const [focusCellIndex, setFocusCellIndex] = React.useState(null); + + // ========================= Refs ========================= + const inputRef = React.useRef(); + + const mergedRef = useComposeRef(ref, inputRef); + + // ====================== Focus Blur ====================== + const onInternalFocus: React.FocusEventHandler = (event) => { + onFocus(event); + + // if (!focusValue) { + // setFocusValue(format); + // } + + setFocused(true); + setFocusCellIndex(0); + }; + + const onInternalBlur: React.FocusEventHandler = (event) => { + onBlur(event); + + // setFocusValue(value || ''); + + setFocused(false); + setFocusCellIndex(null); + }; + + const onInternalChange: React.ChangeEventHandler = (event) => { + setFocusValue(event.target.value); + }; + + const inputProps: React.InputHTMLAttributes = format + ? { + value: focusValue, + onFocus: onInternalFocus, + onBlur: onInternalBlur, + onChange: onInternalChange, + } + : {}; + + // ======================== Format ======================== + + useLayoutEffect(() => { + if (!focused || focusCellIndex === null || !format) { + return; + } + + const maskFormat = getMask(format); + console.log('>', maskFormat); + + // Reset with format if not match + if (!matchFormat(maskFormat, focusValue)) { + // flushSync(() => { + setFocusValue(format); + // }); + return; + } + + // Match the selection range + const [selectionStart, selectionEnd] = getCellRange(maskFormat, focusCellIndex); + console.log('MMM!', selectionStart, selectionEnd); + + // alignFormat(format, focusValue); + + // const formatCells = format.split(/[^A-Za-z]+/); + + // // Realign selection by the format cells + // console.log(inputRef.current.selectionStart, focusValue); + }, [format, focused, focusValue, focusCellIndex]); + // ======================== Render ======================== return ( -
          - +
          +
          ); diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index c7143abeb..a6b0965d4 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -1,6 +1,7 @@ +import classNames from 'classnames'; import * as React from 'react'; -import { PrefixClsContext } from '../context'; import type { SelectorProps, SelectorRef } from '../../interface'; +import { PrefixClsContext } from '../context'; import Icon from './Icon'; import Input from './Input'; @@ -9,15 +10,68 @@ export interface RangeSelectorProps extends SelectorProps { } const RangeSelector = React.forwardRef((props, ref) => { - const { suffixIcon, separator = '~' } = props; + const { + suffixIcon, + separator = '~', + focusIndex, + onFocus, + onBlur, + format, + locale, + generateConfig, + } = props; + // ======================== Prefix ======================== const prefixCls = React.useContext(PrefixClsContext); + // ========================= Refs ========================= + const rootRef = React.useRef(); + const inputRef = React.useRef(); + + React.useImperativeHandle(ref, () => ({ + nativeElement: rootRef.current, + focus: () => inputRef.current?.focus(), + blur: () => inputRef.current?.blur(), + })); + + // ======================== Render ======================== + const sharedInputProps = { + format, + validateFormat: (str: string, formatStr: string) => { + const parsed = generateConfig.locale.parse(locale.locale, str, [formatStr]); + return parsed && generateConfig.isValidate(parsed); + }, + }; + return ( -
          - +
          + { + onFocus(event, 0); + }} + onBlur={(event) => { + onBlur(event, 0); + }} + />
          {separator}
          - + { + onFocus(event, 1); + }} + onBlur={(event) => { + onBlur(event, 1); + }} + />
          ); diff --git a/src/NewPicker/PickerInput/Selector/util.ts b/src/NewPicker/PickerInput/Selector/util.ts new file mode 100644 index 000000000..d6b65f49e --- /dev/null +++ b/src/NewPicker/PickerInput/Selector/util.ts @@ -0,0 +1,67 @@ +const FORMAT_KEYS = ['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss', 'SSS']; + +const REPLACE_KEY = '้กง'; + +// Format logic +// +// First time on focus: +// 1. check if the text is valid, if not fill with format +// 2. set highlight cell to the first cell +// Cells +// 1. Selection the index cell, set inner `cacheValue` to '' +// 2. Key input filter non-number char, patch after the `cacheValue` +// 1. Replace the `cacheValue` with input align the cell length +// 2. Re-selection the mask cell +// 3. If `cacheValue` match the limit length or cell format (like 1 ~ 12 month), go to next cell + +export function getMask(format: string) { + const replaceKeys = FORMAT_KEYS.map((key) => `(${key})`).join('|'); + const replaceReg = new RegExp(replaceKeys, 'g'); + + const replacedFormat = format.replace( + replaceReg, + // Use Chinese character to avoid user use it in format + (key: string) => REPLACE_KEY.repeat(key.length), + ); + + return replacedFormat; +} + +export function matchFormat(maskFormat: string, text: string = '') { + for (let i = 0; i < maskFormat.length; i += 1) { + const maskChar = maskFormat[i]; + + if (maskChar !== REPLACE_KEY && maskChar !== text[i]) { + return false; + } + } + + return true; +} + +export function getCellRange(maskFormat: string, cellIndex: number) { + let startIndex = 0; + let endIndex = 0; + + let matchKey = false; + let matchIndex = -1; + + for (let i = 0; i < maskFormat.length; i += 1) { + const maskChar = maskFormat[i]; + + if (maskChar === REPLACE_KEY && !matchKey) { + matchKey = true; + matchIndex += 1; + startIndex = i; + } else if (maskChar !== REPLACE_KEY && matchKey) { + matchKey = false; + endIndex = i; + + if (cellIndex === matchIndex) { + break; + } + } + } + + return [startIndex, endIndex]; +} diff --git a/src/NewPicker/PickerInput/hooks/useFieldFormat.ts b/src/NewPicker/PickerInput/hooks/useFieldFormat.ts new file mode 100644 index 000000000..d88461380 --- /dev/null +++ b/src/NewPicker/PickerInput/hooks/useFieldFormat.ts @@ -0,0 +1,44 @@ +import * as React from 'react'; +import type { InternalMode, Locale, SharedPickerProps } from '../../interface'; + +function getRowFormat(picker: InternalMode, locale: Locale, format?: SharedPickerProps['format']) { + if (format) { + return format; + } + + switch (picker) { + case 'year': + return locale.yearFormat || 'YYYY'; + case 'month': + return locale.monthFormat || 'YYYY-MM'; + case 'datetime': + return locale.dateTimeFormat || 'YYYY-MM-DD HH:mm:ss'; + default: + return locale.dateFormat || 'YYYY-MM-DD'; + + // TODO: fill rest format + } +} + +export function useFieldFormat( + picker: InternalMode, + locale: Locale, + format?: SharedPickerProps['format'], +): [formatList: string[], maskFormat?: string] { + return React.useMemo(() => { + const rawFormat = getRowFormat(picker, locale, format); + + const formatList = Array.isArray(rawFormat) ? rawFormat : [rawFormat]; + + const firstFormat = formatList[0]; + const maskFormat = + typeof firstFormat === 'object' && firstFormat.align ? firstFormat.format : null; + + return [ + // Format list + formatList.map((config) => (typeof config === 'string' ? config : config.format)), + // Mask Format + maskFormat, + ]; + }, [picker, locale, format]); +} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 903d1fb97..5f8ac5e26 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -30,11 +30,24 @@ export type Locale = { millisecond?: string; meridiem?: string; + // Input format + /** Input field formatter like YYYY-MM-DD HH:mm:ss */ + fieldDateTimeFormat: string; + /** Input field formatter like YYYY-MM-DD */ + fieldDateFormat: string; + /** Input field formatter like YYYY-MM */ + fieldMonthFormat: string; + /** Input field formatter like YYYY */ + fieldYearFormat: string; + /** Input field formatter like HH:mm:ss */ + fieldTimeFormat: string; + // >>>>> Not used yet // Input format /** Full date format like YYYY-MM-DD in input */ dateFormat: string; + /** Full date format with time like YYYY-MM-DD HH:mm:ss in input */ dateTimeFormat: string; @@ -67,6 +80,8 @@ export type Locale = { export type PanelMode = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year' | 'decade'; +export type InternalMode = PanelMode | 'datetime'; + export type DisabledDate = ( date: DateType, info: { @@ -172,13 +187,13 @@ export interface SharedPanelProps { } export type Components = Partial< - Record>> + Record>> >; // ========================= Picker ========================= export type SemanticStructure = 'popup'; -export interface SharedPickerProps { +export interface SharedPickerProps { // MISC direction?: 'ltr' | 'rtl'; @@ -190,6 +205,26 @@ export interface SharedPickerProps { styles?: Partial>; classNames?: Partial>; + // Config + locale: Locale; + generateConfig: GenerateConfig; + + // Picker + picker?: PanelMode; + showTime?: SharedTimeProps; + /** + * Config the input field parse and format. + * When set `format.align`, it will force user input align with your input, + * it's only support basic format mask: YYYY, MM, DD, HH, mm, ss, SSS. + */ + format?: + | string + | string[] + | { + format: string; + align?: boolean; + }; + // Icons suffixIcon?: React.ReactNode; allowClear?: @@ -220,13 +255,16 @@ export interface PickerRef { } // ======================== Selector ======================== -export interface SelectorProps { +export interface SelectorProps { + format: string; suffixIcon?: React.ReactNode; className?: string; style?: React.CSSProperties; - focused: boolean; - onFocus: React.FocusEventHandler; - onBlur: React.FocusEventHandler; + focusIndex: number | null; + onFocus: (event: React.FocusEvent, index?: number) => void; + onBlur: (event: React.FocusEvent, index?: number) => void; + locale: Locale; + generateConfig: GenerateConfig; } export interface SelectorRef { From 8be4feeb9aa6ef56dc439fcf76e472ccdf2a07be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 26 Oct 2023 14:52:09 +0800 Subject: [PATCH 027/380] chore: support input --- src/NewPicker/PickerInput/Selector/Input.tsx | 90 +++++++++++++++----- 1 file changed, 67 insertions(+), 23 deletions(-) diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 24ae37f22..f7de24d6f 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -1,7 +1,9 @@ import classNames from 'classnames'; import { useComposeRef } from 'rc-util'; -import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; +// import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; +import raf from 'rc-util/lib/raf'; import * as React from 'react'; +import { leftPad } from '../../../utils/miscUtil'; import { PrefixClsContext } from '../context'; import Icon from './Icon'; import { getCellRange, getMask, matchFormat } from './util'; @@ -27,8 +29,15 @@ export interface InputProps extends React.InputHTMLAttributes } const Input = React.forwardRef((props, ref) => { - const { active, suffixIcon, format, validateFormat, onFocus, onBlur, value, ...restProps } = - props; + const { + active, + suffixIcon, + format, + validateFormat, + // Pass to input + ...restProps + } = props; + const { value, onFocus, onBlur, onKeyDown } = props; const prefixCls = React.useContext(PrefixClsContext); const inputPrefixCls = `${prefixCls}-input`; @@ -36,6 +45,7 @@ const Input = React.forwardRef((props, ref) => { // ======================== Value ========================= const [focused, setFocused] = React.useState(false); const [focusValue, setFocusValue] = React.useState(value || ''); + const [focusCellText, setFocusCellText] = React.useState(''); const [focusCellIndex, setFocusCellIndex] = React.useState(null); // ========================= Refs ========================= @@ -43,16 +53,20 @@ const Input = React.forwardRef((props, ref) => { const mergedRef = useComposeRef(ref, inputRef); + // ======================== Format ======================== + const maskFormat = React.useMemo(() => getMask(format || ''), [format]); + const [selectionStart, selectionEnd] = React.useMemo( + () => getCellRange(maskFormat, focusCellIndex), + [maskFormat, focusCellIndex], + ); + // ====================== Focus Blur ====================== const onInternalFocus: React.FocusEventHandler = (event) => { onFocus(event); - // if (!focusValue) { - // setFocusValue(format); - // } - setFocused(true); setFocusCellIndex(0); + setFocusCellText(''); }; const onInternalBlur: React.FocusEventHandler = (event) => { @@ -61,11 +75,33 @@ const Input = React.forwardRef((props, ref) => { // setFocusValue(value || ''); setFocused(false); - setFocusCellIndex(null); }; const onInternalChange: React.ChangeEventHandler = (event) => { - setFocusValue(event.target.value); + // console.log('>>>', event); + // setFocusValue(event.target.value); + }; + + const onInternalKeyDown: React.KeyboardEventHandler = (event) => { + const { key } = event; + + if (!isNaN(Number(key))) { + const nextCellText = focusCellText + key; + setFocusCellText(nextCellText); + + // Replace selection range with `nextCellText` + const nextFocusValue = + // before + focusValue.slice(0, selectionStart) + + // replace + leftPad(nextCellText, 4) + + // after + focusValue.slice(selectionEnd); + setFocusValue(nextFocusValue); + console.log('setted!!!', nextFocusValue); + } + + onKeyDown?.(event); }; const inputProps: React.InputHTMLAttributes = format @@ -74,18 +110,20 @@ const Input = React.forwardRef((props, ref) => { onFocus: onInternalFocus, onBlur: onInternalBlur, onChange: onInternalChange, + onKeyDown: onInternalKeyDown, } : {}; // ======================== Format ======================== + const rafRef = React.useRef(); - useLayoutEffect(() => { - if (!focused || focusCellIndex === null || !format) { + // useLayoutEffect(() => { + React.useEffect(() => { + if (!focused || !format) { return; } - const maskFormat = getMask(format); - console.log('>', maskFormat); + console.log('Effect Mask >', maskFormat); // Reset with format if not match if (!matchFormat(maskFormat, focusValue)) { @@ -96,16 +134,22 @@ const Input = React.forwardRef((props, ref) => { } // Match the selection range - const [selectionStart, selectionEnd] = getCellRange(maskFormat, focusCellIndex); - console.log('MMM!', selectionStart, selectionEnd); - - // alignFormat(format, focusValue); - - // const formatCells = format.split(/[^A-Za-z]+/); - - // // Realign selection by the format cells - // console.log(inputRef.current.selectionStart, focusValue); - }, [format, focused, focusValue, focusCellIndex]); + rafRef.current = raf(() => { + inputRef.current.setSelectionRange(selectionStart, selectionEnd); + }); + // console.log( + // 'MMM!', + // selectionStart, + // selectionEnd, + // inputRef.current.value, + // inputRef.current.selectionStart, + // inputRef.current.selectionEnd, + // ); + + return () => { + raf.cancel(rafRef.current); + }; + }, [maskFormat, format, focused, focusValue, focusCellIndex, selectionStart, selectionEnd]); // ======================== Render ======================== return ( From 56fb8c46276bfb0e9f745bb299e4dfb1fa34008f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 26 Oct 2023 17:58:35 +0800 Subject: [PATCH 028/380] chore: input mask --- src/NewPicker/PickerInput/Selector/Input.tsx | 137 +++++++++++++++---- src/NewPicker/PickerInput/Selector/util.ts | 32 +++-- 2 files changed, 132 insertions(+), 37 deletions(-) diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index f7de24d6f..ab66308d4 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -1,12 +1,12 @@ import classNames from 'classnames'; import { useComposeRef } from 'rc-util'; -// import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; +import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import raf from 'rc-util/lib/raf'; import * as React from 'react'; import { leftPad } from '../../../utils/miscUtil'; import { PrefixClsContext } from '../context'; import Icon from './Icon'; -import { getCellRange, getMask, matchFormat } from './util'; +import { getCellRange, getMask, getMaskRange, matchFormat } from './util'; // Format logic // @@ -47,6 +47,7 @@ const Input = React.forwardRef((props, ref) => { const [focusValue, setFocusValue] = React.useState(value || ''); const [focusCellText, setFocusCellText] = React.useState(''); const [focusCellIndex, setFocusCellIndex] = React.useState(null); + const [forceSelectionSyncMark, forceSelectionSync] = React.useState(null); // ========================= Refs ========================= const inputRef = React.useRef(); @@ -54,7 +55,8 @@ const Input = React.forwardRef((props, ref) => { const mergedRef = useComposeRef(ref, inputRef); // ======================== Format ======================== - const maskFormat = React.useMemo(() => getMask(format || ''), [format]); + const [maskFormat, maskCellCount] = React.useMemo(() => getMask(format || ''), [format]); + const [selectionStart, selectionEnd] = React.useMemo( () => getCellRange(maskFormat, focusCellIndex), [maskFormat, focusCellIndex], @@ -84,23 +86,113 @@ const Input = React.forwardRef((props, ref) => { const onInternalKeyDown: React.KeyboardEventHandler = (event) => { const { key } = event; + console.log('key', key); + + // Save the cache with cell text + let nextCellText: string = null; + + // Fill in the input + let nextFillText: string = null; + + const maskCellLen = selectionEnd - selectionStart; + const cellFormat = format.slice(selectionStart, selectionEnd); + + // Cell Index + const offsetCellIndex = (offset: number) => { + setFocusCellIndex((idx) => { + let nextIndex = idx + offset; + nextIndex = Math.max(nextIndex, 0); + nextIndex = Math.min(nextIndex, maskCellCount - 1); + return nextIndex; + }); + }; + + // Range + const offsetCellValue = (offset: number) => { + const [rangeStart, rangeEnd, rangeDefault] = getMaskRange(cellFormat); + + const currentText = focusValue.slice(selectionStart, selectionEnd); + const currentTextNum = Number(currentText); + + if (isNaN(currentTextNum)) { + return rangeDefault ? rangeDefault : String(offset > 0 ? rangeStart : rangeEnd); + } + + const num = currentTextNum + offset; + const range = rangeEnd - rangeStart + 1; + console.log('>>>>>', num); + return String(rangeStart + ((range + num - rangeStart) % range)); + }; + + switch (key) { + // =============== Remove =============== + case 'Backspace': + case 'Delete': + nextCellText = ''; + nextFillText = cellFormat; + break; - if (!isNaN(Number(key))) { - const nextCellText = focusCellText + key; + // =============== Arrows =============== + // Left key + case 'ArrowLeft': + nextCellText = ''; + offsetCellIndex(-1); + break; + + // Right key + case 'ArrowRight': + nextCellText = ''; + offsetCellIndex(1); + break; + + // Up key + case 'ArrowUp': + nextCellText = ''; + nextFillText = offsetCellValue(1); + break; + + // Down key + case 'ArrowDown': + nextCellText = ''; + nextFillText = offsetCellValue(-1); + break; + + // =============== Number =============== + default: + if (!isNaN(Number(key))) { + nextCellText = focusCellText + key; + nextFillText = nextCellText; + } + break; + } + + // Update cell text + if (nextCellText !== null) { setFocusCellText(nextCellText); + if (nextCellText.length >= maskCellLen) { + // Go to next cell + offsetCellIndex(1); + setFocusCellText(''); + } + } + + // Update the input text + if (nextFillText !== null) { // Replace selection range with `nextCellText` const nextFocusValue = // before focusValue.slice(0, selectionStart) + // replace - leftPad(nextCellText, 4) + + leftPad(nextFillText, maskCellLen) + // after focusValue.slice(selectionEnd); - setFocusValue(nextFocusValue); - console.log('setted!!!', nextFocusValue); + setFocusValue(nextFocusValue.slice(0, maskFormat.length)); } + // Always trigger selection sync after key down + forceSelectionSync({}); + onKeyDown?.(event); }; @@ -117,39 +209,38 @@ const Input = React.forwardRef((props, ref) => { // ======================== Format ======================== const rafRef = React.useRef(); - // useLayoutEffect(() => { - React.useEffect(() => { + useLayoutEffect(() => { if (!focused || !format) { return; } - console.log('Effect Mask >', maskFormat); - // Reset with format if not match if (!matchFormat(maskFormat, focusValue)) { - // flushSync(() => { setFocusValue(format); - // }); return; } // Match the selection range + inputRef.current.setSelectionRange(selectionStart, selectionEnd); + + // Chrome has the bug anchor position looks not correct but actually correct rafRef.current = raf(() => { inputRef.current.setSelectionRange(selectionStart, selectionEnd); }); - // console.log( - // 'MMM!', - // selectionStart, - // selectionEnd, - // inputRef.current.value, - // inputRef.current.selectionStart, - // inputRef.current.selectionEnd, - // ); return () => { raf.cancel(rafRef.current); }; - }, [maskFormat, format, focused, focusValue, focusCellIndex, selectionStart, selectionEnd]); + }, [ + maskFormat, + format, + focused, + focusValue, + focusCellIndex, + selectionStart, + selectionEnd, + forceSelectionSyncMark, + ]); // ======================== Render ======================== return ( diff --git a/src/NewPicker/PickerInput/Selector/util.ts b/src/NewPicker/PickerInput/Selector/util.ts index d6b65f49e..a231e72c0 100644 --- a/src/NewPicker/PickerInput/Selector/util.ts +++ b/src/NewPicker/PickerInput/Selector/util.ts @@ -1,20 +1,22 @@ -const FORMAT_KEYS = ['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss', 'SSS']; +const FORMAT_KEYS = ['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss', 'SSS'] as const; const REPLACE_KEY = '้กง'; -// Format logic -// -// First time on focus: -// 1. check if the text is valid, if not fill with format -// 2. set highlight cell to the first cell -// Cells -// 1. Selection the index cell, set inner `cacheValue` to '' -// 2. Key input filter non-number char, patch after the `cacheValue` -// 1. Replace the `cacheValue` with input align the cell length -// 2. Re-selection the mask cell -// 3. If `cacheValue` match the limit length or cell format (like 1 ~ 12 month), go to next cell +export function getMaskRange(key: string): [startVal: number, endVal: number, defaultVal?: number] { + const PresetRange: Record<(typeof FORMAT_KEYS)[number], [number, number, number?]> = { + YYYY: [0, 9999, new Date().getFullYear()], + MM: [1, 12], + DD: [1, 31], + HH: [0, 23], + mm: [0, 59], + ss: [0, 59], + SSS: [0, 999], + }; -export function getMask(format: string) { + return PresetRange[key]; +} + +export function getMask(format: string): [maskFormat: string, cellCount: number] { const replaceKeys = FORMAT_KEYS.map((key) => `(${key})`).join('|'); const replaceReg = new RegExp(replaceKeys, 'g'); @@ -24,7 +26,7 @@ export function getMask(format: string) { (key: string) => REPLACE_KEY.repeat(key.length), ); - return replacedFormat; + return [replacedFormat, format.match(replaceReg)?.length || 0]; } export function matchFormat(maskFormat: string, text: string = '') { @@ -60,6 +62,8 @@ export function getCellRange(maskFormat: string, cellIndex: number) { if (cellIndex === matchIndex) { break; } + } else if (i === maskFormat.length - 1) { + endIndex = i + 1; } } From 80d0d1df1a0c9bd8b2ba06bac922a31993d62539 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 27 Oct 2023 10:24:07 +0800 Subject: [PATCH 029/380] chore: tmp of it --- src/NewPicker/PickerInput/Selector/Input.tsx | 27 ++++++++++++-------- src/NewPicker/PickerInput/Selector/util.ts | 15 +++++++++++ src/NewPicker/interface.tsx | 3 +++ 3 files changed, 35 insertions(+), 10 deletions(-) diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index ab66308d4..5f388526b 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -6,7 +6,7 @@ import * as React from 'react'; import { leftPad } from '../../../utils/miscUtil'; import { PrefixClsContext } from '../context'; import Icon from './Icon'; -import { getCellRange, getMask, getMaskRange, matchFormat } from './util'; +import { getCellIndex, getCellRange, getMask, getMaskRange, matchFormat } from './util'; // Format logic // @@ -37,7 +37,7 @@ const Input = React.forwardRef((props, ref) => { // Pass to input ...restProps } = props; - const { value, onFocus, onBlur, onKeyDown } = props; + const { value, onFocus, onBlur, onKeyDown, onMouseUp } = props; const prefixCls = React.useContext(PrefixClsContext); const inputPrefixCls = `${prefixCls}-input`; @@ -64,19 +64,18 @@ const Input = React.forwardRef((props, ref) => { // ====================== Focus Blur ====================== const onInternalFocus: React.FocusEventHandler = (event) => { - onFocus(event); - setFocused(true); setFocusCellIndex(0); setFocusCellText(''); + + onFocus(event); }; const onInternalBlur: React.FocusEventHandler = (event) => { - onBlur(event); - - // setFocusValue(value || ''); - + setFocusValue(value || ''); setFocused(false); + + onBlur(event); }; const onInternalChange: React.ChangeEventHandler = (event) => { @@ -84,6 +83,14 @@ const Input = React.forwardRef((props, ref) => { // setFocusValue(event.target.value); }; + const onInternalMouseUp: React.MouseEventHandler = (event) => { + const { selectionStart: start } = event.target as HTMLInputElement; + + console.log('???', start, getCellIndex(maskFormat, start)); + + onMouseUp?.(event); + }; + const onInternalKeyDown: React.KeyboardEventHandler = (event) => { const { key } = event; console.log('key', key); @@ -115,12 +122,11 @@ const Input = React.forwardRef((props, ref) => { const currentTextNum = Number(currentText); if (isNaN(currentTextNum)) { - return rangeDefault ? rangeDefault : String(offset > 0 ? rangeStart : rangeEnd); + return String(rangeDefault ? rangeDefault : offset > 0 ? rangeStart : rangeEnd); } const num = currentTextNum + offset; const range = rangeEnd - rangeStart + 1; - console.log('>>>>>', num); return String(rangeStart + ((range + num - rangeStart) % range)); }; @@ -203,6 +209,7 @@ const Input = React.forwardRef((props, ref) => { onBlur: onInternalBlur, onChange: onInternalChange, onKeyDown: onInternalKeyDown, + onMouseUp: onInternalMouseUp, } : {}; diff --git a/src/NewPicker/PickerInput/Selector/util.ts b/src/NewPicker/PickerInput/Selector/util.ts index a231e72c0..dcc582220 100644 --- a/src/NewPicker/PickerInput/Selector/util.ts +++ b/src/NewPicker/PickerInput/Selector/util.ts @@ -69,3 +69,18 @@ export function getCellRange(maskFormat: string, cellIndex: number) { return [startIndex, endIndex]; } + +export function getCellIndex(maskFormat: string, selectionStart: number) { + let str = maskFormat.slice(0, selectionStart + 1); + // const cellReg = new RegExp(`(${REPLACE_KEY}+)|([^${REPLACE_KEY}]+)`, 'g'); + // const match = maskFormat.match(cellReg) || []; + + // let strIndex = 0; + + // for (let i = 0; i < match.length; i += 1) { + // const cell = match[i]; + + // if () {} + // } + return str; +} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 5f8ac5e26..1e8d73953 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -224,6 +224,8 @@ export interface SharedPickerProps { format: string; align?: boolean; }; + /** When user input invalidate date, keep it in the input field */ + preserveInvalidOnBlur?: boolean; // Icons suffixIcon?: React.ReactNode; @@ -256,6 +258,7 @@ export interface PickerRef { // ======================== Selector ======================== export interface SelectorProps { + preserveInvalidOnBlur?: boolean; format: string; suffixIcon?: React.ReactNode; className?: string; From 1ada3c60bfffe0558facef64c4504f3066dc8f7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 27 Oct 2023 14:15:03 +0800 Subject: [PATCH 030/380] chore: selector control --- docs/examples/debug.tsx | 3 +- src/NewPicker/PickerInput/RangePicker.tsx | 23 ++-- src/NewPicker/PickerInput/Selector/Input.tsx | 103 +++++++++++++----- .../PickerInput/Selector/MaskFormat.ts | 101 +++++++++++++++++ .../PickerInput/Selector/RangeSelector.tsx | 74 ++++++++----- src/NewPicker/PickerInput/Selector/util.ts | 75 +------------ src/NewPicker/interface.tsx | 7 ++ 7 files changed, 250 insertions(+), 136 deletions(-) create mode 100644 src/NewPicker/PickerInput/Selector/MaskFormat.ts diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 277ecfdcf..1d6dab086 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -41,7 +41,8 @@ export default () => { {...sharedLocale} suffixIcon="๐Ÿงถ" format={{ - format: 'YYYY-MM-DD', + // format: 'YYYY-MM-DD', + format: 'YYYYMMDD', align: true, }} /> diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index b8d9a2caf..9ae1dd35a 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -1,6 +1,6 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; -import type { SharedPickerProps } from '../interface'; +import type { OnOpenChange, SharedPickerProps } from '../interface'; import PickerPanel from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; import { PrefixClsContext } from './context'; @@ -41,13 +41,20 @@ export default function Picker(props: RangePickerProps) { direction, } = props; + // ======================== Active ======================== + const [activeIndex, setActiveIndex] = React.useState(null); + // ========================= Open ========================= + const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; + const [mergedOpen, setMergeOpen] = useMergedState(defaultOpen || false, { value: open, onChange: onOpenChange, }); - const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; + const onSelectorOpenChange: OnOpenChange = (nextOpen, index) => { + setMergeOpen(nextOpen); + }; // ========================= Mode ========================= const [formatList, maskFormat] = useFieldFormat( @@ -56,9 +63,6 @@ export default function Picker(props: RangePickerProps) { format, ); - // ======================== Active ======================== - const [focusIndex, setFocusIndex] = React.useState(null); - // ======================== Panels ======================== const panel = ; @@ -80,14 +84,17 @@ export default function Picker(props: RangePickerProps) { locale={locale} generateConfig={generateConfig} format={maskFormat} - focusIndex={focusIndex} + focusIndex={activeIndex} suffixIcon={suffixIcon} onFocus={(_, index) => { - setFocusIndex(index); + setActiveIndex(index); }} onBlur={() => { - setFocusIndex(null); + setActiveIndex(null); }} + // Open + open={mergedOpen ? activeIndex : null} + onOpenChange={onSelectorOpenChange} /> diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 5f388526b..ecb980bc9 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -1,12 +1,13 @@ import classNames from 'classnames'; -import { useComposeRef } from 'rc-util'; +import { useComposeRef, useEvent } from 'rc-util'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import raf from 'rc-util/lib/raf'; import * as React from 'react'; import { leftPad } from '../../../utils/miscUtil'; import { PrefixClsContext } from '../context'; import Icon from './Icon'; -import { getCellIndex, getCellRange, getMask, getMaskRange, matchFormat } from './util'; +import MaskFormat from './MaskFormat'; +import { getMaskRange } from './util'; // Format logic // @@ -20,12 +21,18 @@ import { getCellIndex, getCellRange, getMask, getMaskRange, matchFormat } from ' // 2. Re-selection the mask cell // 3. If `cacheValue` match the limit length or cell format (like 1 ~ 12 month), go to next cell -export interface InputProps extends React.InputHTMLAttributes { +export interface InputProps extends Omit, 'onChange'> { format?: string; validateFormat: (value: string, format: string) => boolean; active?: boolean; suffixIcon?: React.ReactNode; value?: string; + onChange?: (value: string) => void; + /** + * Trigger when input need additional help. + * Like open the popup for interactive. + */ + onHelp: () => void; } const Input = React.forwardRef((props, ref) => { @@ -34,6 +41,9 @@ const Input = React.forwardRef((props, ref) => { suffixIcon, format, validateFormat, + onChange, + onInput, + onHelp, // Pass to input ...restProps } = props; @@ -55,13 +65,48 @@ const Input = React.forwardRef((props, ref) => { const mergedRef = useComposeRef(ref, inputRef); // ======================== Format ======================== - const [maskFormat, maskCellCount] = React.useMemo(() => getMask(format || ''), [format]); + const maskFormat = React.useMemo(() => new MaskFormat(format || ''), [format]); const [selectionStart, selectionEnd] = React.useMemo( - () => getCellRange(maskFormat, focusCellIndex), + () => maskFormat.getSelection(focusCellIndex), [maskFormat, focusCellIndex], ); + // ======================== Modify ======================== + // When input modify content, trigger `onText` if is not the format + const onModify = (text: string) => { + if (text !== format) { + onHelp(); + } + }; + + // ======================== Change ======================== + const triggerInputChange = useEvent((text: string) => { + if (validateFormat(text, format)) { + onChange?.(text); + } + setFocusValue(text); + onModify(text); + }); + + const onInternalChange: React.ChangeEventHandler = (event) => { + // Hack `onChange` with format to do nothing + if (!format) { + const text = event.target.value; + onChange?.(text); + onModify(text); + } + }; + + const onInternalPaste: React.ClipboardEventHandler = (event) => { + // Get paste text + const pasteText = event.clipboardData.getData('text'); + + if (validateFormat(pasteText, format)) { + triggerInputChange(pasteText); + } + }; + // ====================== Focus Blur ====================== const onInternalFocus: React.FocusEventHandler = (event) => { setFocused(true); @@ -72,25 +117,26 @@ const Input = React.forwardRef((props, ref) => { }; const onInternalBlur: React.FocusEventHandler = (event) => { - setFocusValue(value || ''); + triggerInputChange(value || ''); setFocused(false); onBlur(event); }; - const onInternalChange: React.ChangeEventHandler = (event) => { - // console.log('>>>', event); - // setFocusValue(event.target.value); - }; - + // ======================== Mouse ========================= const onInternalMouseUp: React.MouseEventHandler = (event) => { const { selectionStart: start } = event.target as HTMLInputElement; - console.log('???', start, getCellIndex(maskFormat, start)); + const closeMaskIndex = maskFormat.getMaskCellIndex(start); + setFocusCellIndex(closeMaskIndex); + + // Force update the selection + forceSelectionSync({}); onMouseUp?.(event); }; + // ======================= Keyboard ======================= const onInternalKeyDown: React.KeyboardEventHandler = (event) => { const { key } = event; console.log('key', key); @@ -109,7 +155,7 @@ const Input = React.forwardRef((props, ref) => { setFocusCellIndex((idx) => { let nextIndex = idx + offset; nextIndex = Math.max(nextIndex, 0); - nextIndex = Math.min(nextIndex, maskCellCount - 1); + nextIndex = Math.min(nextIndex, maskFormat.size() - 1); return nextIndex; }); }; @@ -193,7 +239,7 @@ const Input = React.forwardRef((props, ref) => { leftPad(nextFillText, maskCellLen) + // after focusValue.slice(selectionEnd); - setFocusValue(nextFocusValue.slice(0, maskFormat.length)); + triggerInputChange(nextFocusValue.slice(0, format.length)); } // Always trigger selection sync after key down @@ -202,17 +248,6 @@ const Input = React.forwardRef((props, ref) => { onKeyDown?.(event); }; - const inputProps: React.InputHTMLAttributes = format - ? { - value: focusValue, - onFocus: onInternalFocus, - onBlur: onInternalBlur, - onChange: onInternalChange, - onKeyDown: onInternalKeyDown, - onMouseUp: onInternalMouseUp, - } - : {}; - // ======================== Format ======================== const rafRef = React.useRef(); @@ -222,8 +257,8 @@ const Input = React.forwardRef((props, ref) => { } // Reset with format if not match - if (!matchFormat(maskFormat, focusValue)) { - setFocusValue(format); + if (!maskFormat.match(focusValue)) { + triggerInputChange(format); return; } @@ -247,9 +282,23 @@ const Input = React.forwardRef((props, ref) => { selectionStart, selectionEnd, forceSelectionSyncMark, + triggerInputChange, ]); // ======================== Render ======================== + // Input props for format + const inputProps: React.InputHTMLAttributes = format + ? { + value: focusValue, + onFocus: onInternalFocus, + onBlur: onInternalBlur, + onChange: onInternalChange, + onKeyDown: onInternalKeyDown, + onMouseUp: onInternalMouseUp, + onPaste: onInternalPaste, + } + : {}; + return (
          `(${key})`).join('|'); + const replaceReg = new RegExp(replaceKeys, 'g'); + + this.maskFormat = format.replace( + replaceReg, + // Use Chinese character to avoid user use it in format + (key: string) => REPLACE_KEY.repeat(key.length), + ); + + // Generate cells + const cellReg = new RegExp(`(${FORMAT_KEYS.join('|')})`); + const strCells = (format.split(cellReg) || []).filter((str) => str); + + let offset = 0; + this.cells = strCells.map((text) => { + const mask = FORMAT_KEYS.includes(text); + + const start = offset; + const end = offset + text.length; + offset = end; + + return { + text, + mask, + start, + end, + }; + }); + + // Mask cells + this.maskCells = this.cells.filter((cell) => cell.mask); + } + + getSelection(maskCellIndex: number): [start: number, end: number] { + const { start, end } = this.maskCells[maskCellIndex] || {}; + return [start || 0, end || 0]; + } + + /** Check given text match format */ + match(text: string) { + for (let i = 0; i < this.maskFormat.length; i += 1) { + const maskChar = this.maskFormat[i]; + const textChar = text[i]; + + if (!textChar || (maskChar !== REPLACE_KEY && maskChar !== textChar)) { + return false; + } + } + + return true; + } + + /** Get mask cell count */ + size() { + return this.maskCells.length; + } + + getMaskCellIndex(anchorIndex: number) { + let closetDist = Number.MAX_SAFE_INTEGER; + let closetIndex = 0; + + for (let i = 0; i < this.maskCells.length; i += 1) { + const { start, end } = this.maskCells[i]; + if (anchorIndex >= start && anchorIndex <= end) { + return i; + } + + const dist = Math.min(Math.abs(anchorIndex - start), Math.abs(anchorIndex - end)); + if (dist < closetDist) { + closetDist = dist; + closetIndex = i; + } + } + + return closetIndex; + } +} diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index a6b0965d4..b54b16446 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import type { SelectorProps, SelectorRef } from '../../interface'; import { PrefixClsContext } from '../context'; import Icon from './Icon'; -import Input from './Input'; +import Input, { InputProps } from './Input'; export interface RangeSelectorProps extends SelectorProps { separator?: React.ReactNode; @@ -19,6 +19,10 @@ const RangeSelector = React.forwardRef((props, format, locale, generateConfig, + + // Open + open, + onOpenChange, } = props; // ======================== Prefix ======================== @@ -26,22 +30,57 @@ const RangeSelector = React.forwardRef((props, // ========================= Refs ========================= const rootRef = React.useRef(); - const inputRef = React.useRef(); + const inputStartRef = React.useRef(); + const inputEndRef = React.useRef(); React.useImperativeHandle(ref, () => ({ nativeElement: rootRef.current, - focus: () => inputRef.current?.focus(), - blur: () => inputRef.current?.blur(), + focus: () => inputStartRef.current?.focus(), + blur: () => inputStartRef.current?.blur(), })); + // ========================= Open ========================= + const triggerOpen = (nextOpen: boolean, index: number) => { + if (open === index) { + onOpenChange(nextOpen, index); + } + }; + // ======================== Render ======================== - const sharedInputProps = { + const sharedInputProps = {}; + + const getInputProps = (index: number): InputProps => ({ + // Shared format, validateFormat: (str: string, formatStr: string) => { const parsed = generateConfig.locale.parse(locale.locale, str, [formatStr]); return parsed && generateConfig.isValidate(parsed); }, - }; + + // By index + active: focusIndex === index, + onFocus: (event) => { + onFocus(event, index); + }, + onBlur: (event) => { + onBlur(event, index); + triggerOpen(false, index); + }, + onChange: (value) => { + console.log(index, 'Change >', value); + }, + onHelp: () => { + onOpenChange(true, index); + }, + onKeyDown: (event) => { + switch (event.key) { + case 'Escape': + triggerOpen(false, index); + break; + } + // onKeyDown(event, 0); + }, + }); return (
          ((props, })} ref={rootRef} > - { - onFocus(event, 0); - }} - onBlur={(event) => { - onBlur(event, 0); - }} - /> +
          {separator}
          - { - onFocus(event, 1); - }} - onBlur={(event) => { - onBlur(event, 1); - }} - /> +
          ); diff --git a/src/NewPicker/PickerInput/Selector/util.ts b/src/NewPicker/PickerInput/Selector/util.ts index dcc582220..661b2d01f 100644 --- a/src/NewPicker/PickerInput/Selector/util.ts +++ b/src/NewPicker/PickerInput/Selector/util.ts @@ -1,9 +1,7 @@ -const FORMAT_KEYS = ['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss', 'SSS'] as const; - -const REPLACE_KEY = '้กง'; +import type { FormatKey } from './MaskFormat'; export function getMaskRange(key: string): [startVal: number, endVal: number, defaultVal?: number] { - const PresetRange: Record<(typeof FORMAT_KEYS)[number], [number, number, number?]> = { + const PresetRange: Record = { YYYY: [0, 9999, new Date().getFullYear()], MM: [1, 12], DD: [1, 31], @@ -15,72 +13,3 @@ export function getMaskRange(key: string): [startVal: number, endVal: number, de return PresetRange[key]; } - -export function getMask(format: string): [maskFormat: string, cellCount: number] { - const replaceKeys = FORMAT_KEYS.map((key) => `(${key})`).join('|'); - const replaceReg = new RegExp(replaceKeys, 'g'); - - const replacedFormat = format.replace( - replaceReg, - // Use Chinese character to avoid user use it in format - (key: string) => REPLACE_KEY.repeat(key.length), - ); - - return [replacedFormat, format.match(replaceReg)?.length || 0]; -} - -export function matchFormat(maskFormat: string, text: string = '') { - for (let i = 0; i < maskFormat.length; i += 1) { - const maskChar = maskFormat[i]; - - if (maskChar !== REPLACE_KEY && maskChar !== text[i]) { - return false; - } - } - - return true; -} - -export function getCellRange(maskFormat: string, cellIndex: number) { - let startIndex = 0; - let endIndex = 0; - - let matchKey = false; - let matchIndex = -1; - - for (let i = 0; i < maskFormat.length; i += 1) { - const maskChar = maskFormat[i]; - - if (maskChar === REPLACE_KEY && !matchKey) { - matchKey = true; - matchIndex += 1; - startIndex = i; - } else if (maskChar !== REPLACE_KEY && matchKey) { - matchKey = false; - endIndex = i; - - if (cellIndex === matchIndex) { - break; - } - } else if (i === maskFormat.length - 1) { - endIndex = i + 1; - } - } - - return [startIndex, endIndex]; -} - -export function getCellIndex(maskFormat: string, selectionStart: number) { - let str = maskFormat.slice(0, selectionStart + 1); - // const cellReg = new RegExp(`(${REPLACE_KEY}+)|([^${REPLACE_KEY}]+)`, 'g'); - // const match = maskFormat.match(cellReg) || []; - - // let strIndex = 0; - - // for (let i = 0; i < match.length; i += 1) { - // const cell = match[i]; - - // if () {} - // } - return str; -} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 1e8d73953..188617183 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -257,6 +257,7 @@ export interface PickerRef { } // ======================== Selector ======================== +export type OnOpenChange = (open: boolean, index?: number) => void; export interface SelectorProps { preserveInvalidOnBlur?: boolean; format: string; @@ -268,6 +269,12 @@ export interface SelectorProps { onBlur: (event: React.FocusEvent, index?: number) => void; locale: Locale; generateConfig: GenerateConfig; + + // Open + /** Open index */ + open: number; + /** Trigger when need open by selector */ + onOpenChange: OnOpenChange; } export interface SelectorRef { From 8e056f3be6361ea4c67943f0881c78f530d9c31f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 27 Oct 2023 15:28:50 +0800 Subject: [PATCH 031/380] chore: input match --- docs/examples/debug.tsx | 7 +- src/NewPicker/PickerInput/RangePicker.tsx | 88 +++++++++++++++++-- .../PickerInput/Selector/RangeSelector.tsx | 55 +++++++++--- .../PickerInput/hooks/useFieldFormat.ts | 3 +- src/NewPicker/interface.tsx | 10 ++- src/NewPicker/util.ts | 7 ++ 6 files changed, 145 insertions(+), 25 deletions(-) create mode 100644 src/NewPicker/util.ts diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 1d6dab086..925653bdc 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -41,10 +41,13 @@ export default () => { {...sharedLocale} suffixIcon="๐Ÿงถ" format={{ - // format: 'YYYY-MM-DD', - format: 'YYYYMMDD', + format: 'YYYY-MM-DD', + // format: 'YYYYMMDD', align: true, }} + onChange={(val) => { + console.log('๐Ÿงถ Demo Change:', val); + }} />
          diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 9ae1dd35a..d0cc369e2 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -7,9 +7,29 @@ import { PrefixClsContext } from './context'; import { useFieldFormat } from './hooks/useFieldFormat'; import RangeSelector from './Selector/RangeSelector'; -export type RangePickerProps = SharedPickerProps; +function separateConfig(config: T | [T, T] | null | undefined, defaultConfig: T): [T, T] { + const singleConfig = config ?? defaultConfig; -export default function Picker(props: RangePickerProps) { + if (Array.isArray(singleConfig)) { + return singleConfig; + } + + return [singleConfig, singleConfig]; +} + +export type RangeValueType = [start?: DateType, end?: DateType]; + +export interface RangePickerProps extends SharedPickerProps { + // Value + value?: RangeValueType; + defaultValue?: RangeValueType; + onChange?: (dates: RangeValueType, dateStrings: [string, string]) => void; + + disabled?: boolean | [boolean, boolean]; + allowEmpty?: [boolean, boolean]; +} + +export default function Picker(props: RangePickerProps) { const { // Style prefixCls = 'rc-picker', @@ -18,6 +38,14 @@ export default function Picker(props: RangePickerProps) { styles = {}, classNames = {}, + // Value + value, + defaultValue, + onChange, + + disabled, + allowEmpty, + // Open defaultOpen, open, @@ -41,6 +69,13 @@ export default function Picker(props: RangePickerProps) { direction, } = props; + // ======================== Format ======================== + const [formatList, maskFormat] = useFieldFormat( + picker === 'date' && showTime ? 'datetime' : picker, + locale, + format, + ); + // ======================== Active ======================== const [activeIndex, setActiveIndex] = React.useState(null); @@ -56,12 +91,43 @@ export default function Picker(props: RangePickerProps) { setMergeOpen(nextOpen); }; - // ========================= Mode ========================= - const [formatList, maskFormat] = useFieldFormat( - picker === 'date' && showTime ? 'datetime' : picker, - locale, - format, - ); + // =================== Disabled & Empty =================== + const mergedDisabled = separateConfig(disabled, false); + const mergedAllowEmpty = separateConfig(allowEmpty, true); + + // ======================== Value ========================= + const [mergedValue, setMergedValue] = useMergedState(defaultValue, { + value, + postState: (valList): RangeValueType => valList || [], + onChange: (nextValue) => { + if (onChange) { + const startEmpty = !nextValue[0]; + const endEmpty = !nextValue[1]; + + if ( + // Validate start + (!startEmpty || mergedAllowEmpty[0]) && + // Validate end + (!endEmpty || mergedAllowEmpty[1]) + ) { + const nextValueTexts = nextValue.map((date) => + date ? generateConfig.locale.format(locale.locale, date, formatList[0]) : '', + ); + + onChange(nextValue, nextValueTexts as [string, string]); + } + } + }, + }); + + const onInternalChange = (date: DateType, index: number) => { + setMergedValue((prev) => { + const clone: RangeValueType = [...(prev || [])]; + clone[index] = date; + + return clone; + }); + }; // ======================== Panels ======================== const panel = ; @@ -83,7 +149,6 @@ export default function Picker(props: RangePickerProps) { { @@ -92,6 +157,11 @@ export default function Picker(props: RangePickerProps) { onBlur={() => { setActiveIndex(null); }} + // Change + value={mergedValue} + format={formatList} + maskFormat={maskFormat} + onChange={onInternalChange} // Open open={mergedOpen ? activeIndex : null} onOpenChange={onSelectorOpenChange} diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index b54b16446..59a40186d 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import type { SelectorProps, SelectorRef } from '../../interface'; import { PrefixClsContext } from '../context'; import Icon from './Icon'; -import Input, { InputProps } from './Input'; +import Input, { type InputProps } from './Input'; export interface RangeSelectorProps extends SelectorProps { separator?: React.ReactNode; @@ -16,10 +16,15 @@ const RangeSelector = React.forwardRef((props, focusIndex, onFocus, onBlur, - format, locale, generateConfig, + // Change + value, + format, + maskFormat, + onChange, + // Open open, onOpenChange, @@ -46,18 +51,35 @@ const RangeSelector = React.forwardRef((props, } }; - // ======================== Render ======================== - const sharedInputProps = {}; + // ======================== Parser ======================== + const parseDate = (str: string, formatStr: string) => { + const parsed = generateConfig.locale.parse(locale.locale, str, [formatStr]); + return parsed && generateConfig.isValidate(parsed) ? parsed : null; + }; + + // ========================= Text ========================= + const firstFormat = format[0]; + + const getText = React.useCallback( + (date: any) => (date ? generateConfig.locale.format(locale.locale, date, firstFormat) : ''), + [locale, generateConfig, firstFormat], + ); + const valueTexts = React.useMemo(() => [getText(value[0]), getText(value[1])], [value, getText]); + + // ======================== Render ======================== + // >>> Input Props const getInputProps = (index: number): InputProps => ({ - // Shared - format, + // ============== Shared ============== + format: maskFormat, validateFormat: (str: string, formatStr: string) => { - const parsed = generateConfig.locale.parse(locale.locale, str, [formatStr]); - return parsed && generateConfig.isValidate(parsed); + const parsed = parseDate(str, formatStr); + return !!parsed; }, - // By index + // ============= By Index ============= + value: valueTexts[index], + active: focusIndex === index, onFocus: (event) => { onFocus(event, index); @@ -66,8 +88,17 @@ const RangeSelector = React.forwardRef((props, onBlur(event, index); triggerOpen(false, index); }, - onChange: (value) => { - console.log(index, 'Change >', value); + + // Get validate text value + onChange: (text) => { + for (let i = 0; i < format.length; i += 1) { + const parsed = parseDate(text, format[i]); + + if (parsed) { + onChange(parsed, index); + break; + } + } }, onHelp: () => { onOpenChange(true, index); @@ -78,10 +109,10 @@ const RangeSelector = React.forwardRef((props, triggerOpen(false, index); break; } - // onKeyDown(event, 0); }, }); + // >>> Render return (
          { const rawFormat = getRowFormat(picker, locale, format); - const formatList = Array.isArray(rawFormat) ? rawFormat : [rawFormat]; + const formatList = toArray(rawFormat); const firstFormat = formatList[0]; const maskFormat = diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 188617183..5bf447ec2 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -260,7 +260,6 @@ export interface PickerRef { export type OnOpenChange = (open: boolean, index?: number) => void; export interface SelectorProps { preserveInvalidOnBlur?: boolean; - format: string; suffixIcon?: React.ReactNode; className?: string; style?: React.CSSProperties; @@ -270,6 +269,15 @@ export interface SelectorProps { locale: Locale; generateConfig: GenerateConfig; + // Change + format: string[]; + /** + * Convert with user typing for the format template. + * This will force align the input with template mask. + */ + maskFormat?: string; + onChange: (date: DateType, index?: number) => void; + // Open /** Open index */ open: number; diff --git a/src/NewPicker/util.ts b/src/NewPicker/util.ts new file mode 100644 index 000000000..60e72ebc1 --- /dev/null +++ b/src/NewPicker/util.ts @@ -0,0 +1,7 @@ +export function toArray(val: T | T[]): T[] { + if (val === null || val === undefined) { + return []; + } + + return Array.isArray(val) ? val : [val]; +} From e872f9add679b8cd15641381ded23dc44dfa201e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 27 Oct 2023 15:35:48 +0800 Subject: [PATCH 032/380] chore: input it --- docs/examples/debug.tsx | 10 +++--- src/NewPicker/PickerInput/Selector/Input.tsx | 34 +++++++++++++------- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 925653bdc..e2e543722 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -40,11 +40,11 @@ export default () => { { console.log('๐Ÿงถ Demo Change:', val); }} diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index ecb980bc9..a7e8b204d 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -54,11 +54,16 @@ const Input = React.forwardRef((props, ref) => { // ======================== Value ========================= const [focused, setFocused] = React.useState(false); - const [focusValue, setFocusValue] = React.useState(value || ''); + const [inputValue, setInputValue] = React.useState(value || ''); const [focusCellText, setFocusCellText] = React.useState(''); const [focusCellIndex, setFocusCellIndex] = React.useState(null); const [forceSelectionSyncMark, forceSelectionSync] = React.useState(null); + // Sync value if needed + React.useEffect(() => { + setInputValue(value || ''); + }, [value]); + // ========================= Refs ========================= const inputRef = React.useRef(); @@ -85,7 +90,7 @@ const Input = React.forwardRef((props, ref) => { if (validateFormat(text, format)) { onChange?.(text); } - setFocusValue(text); + setInputValue(text); onModify(text); }); @@ -93,8 +98,10 @@ const Input = React.forwardRef((props, ref) => { // Hack `onChange` with format to do nothing if (!format) { const text = event.target.value; - onChange?.(text); + onModify(text); + setInputValue(text); + onChange?.(text); } }; @@ -164,7 +171,7 @@ const Input = React.forwardRef((props, ref) => { const offsetCellValue = (offset: number) => { const [rangeStart, rangeEnd, rangeDefault] = getMaskRange(cellFormat); - const currentText = focusValue.slice(selectionStart, selectionEnd); + const currentText = inputValue.slice(selectionStart, selectionEnd); const currentTextNum = Number(currentText); if (isNaN(currentTextNum)) { @@ -234,11 +241,11 @@ const Input = React.forwardRef((props, ref) => { // Replace selection range with `nextCellText` const nextFocusValue = // before - focusValue.slice(0, selectionStart) + + inputValue.slice(0, selectionStart) + // replace leftPad(nextFillText, maskCellLen) + // after - focusValue.slice(selectionEnd); + inputValue.slice(selectionEnd); triggerInputChange(nextFocusValue.slice(0, format.length)); } @@ -257,7 +264,7 @@ const Input = React.forwardRef((props, ref) => { } // Reset with format if not match - if (!maskFormat.match(focusValue)) { + if (!maskFormat.match(inputValue)) { triggerInputChange(format); return; } @@ -277,7 +284,7 @@ const Input = React.forwardRef((props, ref) => { maskFormat, format, focused, - focusValue, + inputValue, focusCellIndex, selectionStart, selectionEnd, @@ -289,10 +296,8 @@ const Input = React.forwardRef((props, ref) => { // Input props for format const inputProps: React.InputHTMLAttributes = format ? { - value: focusValue, onFocus: onInternalFocus, onBlur: onInternalBlur, - onChange: onInternalChange, onKeyDown: onInternalKeyDown, onMouseUp: onInternalMouseUp, onPaste: onInternalPaste, @@ -305,7 +310,14 @@ const Input = React.forwardRef((props, ref) => { [`${inputPrefixCls}-active`]: active, })} > - + ); From fec5e9b0cc118c7571a621f36ba31bd514cebaec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 30 Oct 2023 10:20:15 +0800 Subject: [PATCH 033/380] chore: input validate trigger open --- docs/examples/debug.tsx | 14 ++++---- src/NewPicker/PickerInput/RangePicker.tsx | 32 +++++++++++++------ src/NewPicker/PickerInput/Selector/Input.tsx | 24 +++++++++++--- .../PickerInput/Selector/RangeSelector.tsx | 6 +++- src/NewPicker/interface.tsx | 3 +- src/utils/dateUtil.ts | 18 +++++++++++ 6 files changed, 75 insertions(+), 22 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index e2e543722..e08ad0fbc 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -40,14 +40,16 @@ export default () => { { - console.log('๐Ÿงถ Demo Change:', val); + align: true, }} + onChange={(val, text) => { + console.log('๐Ÿงถ Demo Change:', val, text); + }} + // preserveInvalidOnBlur + allowEmpty={[true, false]} />
          diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index d0cc369e2..5ad908bb9 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -1,5 +1,6 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; +import { isSameTimestamp } from '../../utils/dateUtil'; import type { OnOpenChange, SharedPickerProps } from '../interface'; import PickerPanel from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; @@ -25,6 +26,8 @@ export interface RangePickerProps extends SharedPickerProps defaultValue?: RangeValueType; onChange?: (dates: RangeValueType, dateStrings: [string, string]) => void; + order?: boolean; + disabled?: boolean | [boolean, boolean]; allowEmpty?: [boolean, boolean]; } @@ -43,6 +46,8 @@ export default function Picker(props: RangePickerProps defaultValue, onChange, + order = true, + disabled, allowEmpty, @@ -88,6 +93,7 @@ export default function Picker(props: RangePickerProps }); const onSelectorOpenChange: OnOpenChange = (nextOpen, index) => { + console.log('Open!!!', nextOpen, index, activeIndex); setMergeOpen(nextOpen); }; @@ -98,7 +104,7 @@ export default function Picker(props: RangePickerProps // ======================== Value ========================= const [mergedValue, setMergedValue] = useMergedState(defaultValue, { value, - postState: (valList): RangeValueType => valList || [], + postState: (valList): RangeValueType => valList || [null, null], onChange: (nextValue) => { if (onChange) { const startEmpty = !nextValue[0]; @@ -121,12 +127,18 @@ export default function Picker(props: RangePickerProps }); const onInternalChange = (date: DateType, index: number) => { - setMergedValue((prev) => { - const clone: RangeValueType = [...(prev || [])]; - clone[index] = date; + // Trigger change only when date changed + const [prevStart, prevEnd] = mergedValue; + + const clone: RangeValueType = [prevStart, prevEnd]; + clone[index] = date; - return clone; - }); + const isSameStart = isSameTimestamp(generateConfig, prevStart, clone[0]); + const isSameEnd = isSameTimestamp(generateConfig, prevEnd, clone[1]); + + if (!isSameStart || !isSameEnd) { + setMergedValue(clone); + } }; // ======================== Panels ======================== @@ -147,10 +159,12 @@ export default function Picker(props: RangePickerProps direction={direction} > { setActiveIndex(index); }} diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index a7e8b204d..dd1a9b4f4 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -33,6 +33,7 @@ export interface InputProps extends Omit void; + preserveInvalidOnBlur?: boolean; } const Input = React.forwardRef((props, ref) => { @@ -44,6 +45,7 @@ const Input = React.forwardRef((props, ref) => { onChange, onInput, onHelp, + preserveInvalidOnBlur, // Pass to input ...restProps } = props; @@ -54,14 +56,16 @@ const Input = React.forwardRef((props, ref) => { // ======================== Value ========================= const [focused, setFocused] = React.useState(false); - const [inputValue, setInputValue] = React.useState(value || ''); + const [internalInputValue, setInputValue] = React.useState(value); const [focusCellText, setFocusCellText] = React.useState(''); const [focusCellIndex, setFocusCellIndex] = React.useState(null); const [forceSelectionSyncMark, forceSelectionSync] = React.useState(null); + const inputValue = internalInputValue || ''; + // Sync value if needed React.useEffect(() => { - setInputValue(value || ''); + setInputValue(value); }, [value]); // ========================= Refs ========================= @@ -80,7 +84,7 @@ const Input = React.forwardRef((props, ref) => { // ======================== Modify ======================== // When input modify content, trigger `onText` if is not the format const onModify = (text: string) => { - if (text !== format) { + if (text && text !== format && text !== value) { onHelp(); } }; @@ -123,11 +127,19 @@ const Input = React.forwardRef((props, ref) => { onFocus(event); }; + const onSharedBlur: React.FocusEventHandler = (event) => { + if (!preserveInvalidOnBlur) { + setInputValue(value); + } + + onBlur(event); + }; + const onInternalBlur: React.FocusEventHandler = (event) => { - triggerInputChange(value || ''); + triggerInputChange(value); setFocused(false); - onBlur(event); + onSharedBlur(event); }; // ======================== Mouse ========================= @@ -313,6 +325,8 @@ const Input = React.forwardRef((props, ref) => { extends SelectorProps { separator?: React.ReactNode; + + value?: [DateType?, DateType?]; } const RangeSelector = React.forwardRef((props, ref) => { @@ -24,6 +26,7 @@ const RangeSelector = React.forwardRef((props, format, maskFormat, onChange, + preserveInvalidOnBlur, // Open open, @@ -76,6 +79,7 @@ const RangeSelector = React.forwardRef((props, const parsed = parseDate(str, formatStr); return !!parsed; }, + preserveInvalidOnBlur, // ============= By Index ============= value: valueTexts[index], diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 5bf447ec2..3d4f99625 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -259,7 +259,6 @@ export interface PickerRef { // ======================== Selector ======================== export type OnOpenChange = (open: boolean, index?: number) => void; export interface SelectorProps { - preserveInvalidOnBlur?: boolean; suffixIcon?: React.ReactNode; className?: string; style?: React.CSSProperties; @@ -277,6 +276,8 @@ export interface SelectorProps { */ maskFormat?: string; onChange: (date: DateType, index?: number) => void; + /** When user input invalidate date, keep it in the input field */ + preserveInvalidOnBlur?: boolean; // Open /** Open index */ diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts index a6e19bcc6..13b6a5c7a 100644 --- a/src/utils/dateUtil.ts +++ b/src/utils/dateUtil.ts @@ -113,6 +113,24 @@ export function isSameTime( ); } +/** + * Check if the Date is all the same of timestamp + */ +export function isSameTimestamp( + generateConfig: GenerateConfig, + time1: NullableDateType, + time2: NullableDateType, +) { + return ( + // Same object + time1 === time2 || + // Date + (isSameDate(generateConfig, time1, time2) && + isSameTime(generateConfig, time1, time2) && + generateConfig.getMillisecond(time1) === generateConfig.getMillisecond(time2)) + ); +} + export function isSameWeek( generateConfig: GenerateConfig, locale: string, From d40227777fda78e0452ad6175748af09970d0e5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 30 Oct 2023 11:41:57 +0800 Subject: [PATCH 034/380] chore: active logic --- docs/examples/debug.tsx | 5 +- src/NewPicker/PickerInput/RangePicker.tsx | 13 ++-- .../PickerInput/Selector/RangeSelector.tsx | 12 ++-- src/NewPicker/PickerInput/hooks/useOpen.ts | 63 +++++++++++++++++++ src/NewPicker/interface.tsx | 10 ++- 5 files changed, 88 insertions(+), 15 deletions(-) create mode 100644 src/NewPicker/PickerInput/hooks/useOpen.ts diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index e08ad0fbc..b61d77ac1 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -42,7 +42,7 @@ export default () => { suffixIcon="๐Ÿงถ" format={{ format: 'YYYY-MM-DD', - // // format: 'YYYYMMDD', + // // format: 'YYYYMMDD', align: true, }} onChange={(val, text) => { @@ -50,6 +50,9 @@ export default () => { }} // preserveInvalidOnBlur allowEmpty={[true, false]} + onOpenChange={(nextOpen) => { + console.log('Next Open:', nextOpen); + }} />
          diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 5ad908bb9..90131b2d1 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -1,11 +1,12 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; import { isSameTimestamp } from '../../utils/dateUtil'; -import type { OnOpenChange, SharedPickerProps } from '../interface'; +import type { OnOpenChange, OpenConfig, SharedPickerProps } from '../interface'; import PickerPanel from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; import { PrefixClsContext } from './context'; import { useFieldFormat } from './hooks/useFieldFormat'; +import useOpen from './hooks/useOpen'; import RangeSelector from './Selector/RangeSelector'; function separateConfig(config: T | [T, T] | null | undefined, defaultConfig: T): [T, T] { @@ -87,14 +88,10 @@ export default function Picker(props: RangePickerProps // ========================= Open ========================= const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - const [mergedOpen, setMergeOpen] = useMergedState(defaultOpen || false, { - value: open, - onChange: onOpenChange, - }); + const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, onOpenChange); - const onSelectorOpenChange: OnOpenChange = (nextOpen, index) => { - console.log('Open!!!', nextOpen, index, activeIndex); - setMergeOpen(nextOpen); + const onSelectorOpenChange: OnOpenChange = (nextOpen, index, config?: OpenConfig) => { + setMergeOpen(nextOpen, config); }; // =================== Disabled & Empty =================== diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 5340e0203..2d9b0dee3 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import * as React from 'react'; -import type { SelectorProps, SelectorRef } from '../../interface'; +import type { OpenConfig, SelectorProps, SelectorRef } from '../../interface'; import { PrefixClsContext } from '../context'; import Icon from './Icon'; import Input, { type InputProps } from './Input'; @@ -48,10 +48,8 @@ const RangeSelector = React.forwardRef((props, })); // ========================= Open ========================= - const triggerOpen = (nextOpen: boolean, index: number) => { - if (open === index) { - onOpenChange(nextOpen, index); - } + const triggerOpen = (nextOpen: boolean, index: number, config?: OpenConfig) => { + onOpenChange(nextOpen, index, config); }; // ======================== Parser ======================== @@ -87,6 +85,10 @@ const RangeSelector = React.forwardRef((props, active: focusIndex === index, onFocus: (event) => { onFocus(event, index); + + triggerOpen(true, index, { + inherit: true, + }); }, onBlur: (event) => { onBlur(event, index); diff --git a/src/NewPicker/PickerInput/hooks/useOpen.ts b/src/NewPicker/PickerInput/hooks/useOpen.ts new file mode 100644 index 000000000..b5e7ac457 --- /dev/null +++ b/src/NewPicker/PickerInput/hooks/useOpen.ts @@ -0,0 +1,63 @@ +import { useEvent, useMergedState } from 'rc-util'; +import raf from 'rc-util/lib/raf'; +import * as React from 'react'; +import type { OpenConfig } from '../../interface'; + +/** + * Control the open state. + * Will not close if activeElement is on the popup. + */ +export default function useOpen( + open?: boolean, + defaultOpen?: boolean, + onOpenChange?: (open: boolean) => void, +): [open: boolean, setOpen: (open: boolean, config?: OpenConfig) => void] { + const [mergedOpen, setMergeOpen] = useMergedState(defaultOpen || false, { + value: open, + // onChange: onOpenChange, + }); + + // Delay for handle the open state, in case fast shift from `open` -> `close` -> `open` + const mountedRef = React.useRef(false); + const [effectOpen, setEffectOpen] = React.useState(mergedOpen); + + React.useEffect(() => { + const syncOpen = () => { + setEffectOpen(mergedOpen); + + if (mountedRef.current && onOpenChange && mergedOpen !== effectOpen) { + onOpenChange(mergedOpen); + } + }; + + if (mergedOpen) { + syncOpen(); + } else { + const id = raf(syncOpen); + return () => { + raf.cancel(id); + }; + } + }, [mergedOpen]); + + React.useEffect(() => { + mountedRef.current = true; + return () => { + mountedRef.current = false; + }; + }, []); + + // Open function + const setOpen = useEvent((nextOpen: boolean, option: OpenConfig = {}) => { + if ( + // Always keep sync + !option.inherit || + // Set only when current is the same + nextOpen === effectOpen + ) { + setMergeOpen(nextOpen); + } + }); + + return [effectOpen, setOpen]; +} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 3d4f99625..866e2cc42 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -257,7 +257,15 @@ export interface PickerRef { } // ======================== Selector ======================== -export type OnOpenChange = (open: boolean, index?: number) => void; +export interface OpenConfig { + /** + * Keep open if prev state is open but set close within the same frame. + * This is used for RangePicker input switch to another one. + */ + inherit?: boolean; +} + +export type OnOpenChange = (open: boolean, index?: number, config?: OpenConfig) => void; export interface SelectorProps { suffixIcon?: React.ReactNode; className?: string; From 0b1fb0c410a3711a9c4ab6de3b40a8ef3755a575 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 30 Oct 2023 14:01:25 +0800 Subject: [PATCH 035/380] chore: enter to submit --- docs/examples/debug.tsx | 7 +-- src/NewPicker/PickerInput/RangePicker.tsx | 50 ++++++++++++++----- src/NewPicker/PickerInput/Selector/Input.tsx | 14 ++++-- .../PickerInput/Selector/RangeSelector.tsx | 3 ++ src/NewPicker/interface.tsx | 2 + 5 files changed, 57 insertions(+), 19 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index b61d77ac1..373aa4d52 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -50,9 +50,10 @@ export default () => { }} // preserveInvalidOnBlur allowEmpty={[true, false]} - onOpenChange={(nextOpen) => { - console.log('Next Open:', nextOpen); - }} + // onOpenChange={(nextOpen) => { + // console.log('Next Open:', nextOpen); + // }} + order />
          diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 90131b2d1..1d8676505 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -1,7 +1,7 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; import { isSameTimestamp } from '../../utils/dateUtil'; -import type { OnOpenChange, OpenConfig, SharedPickerProps } from '../interface'; +import type { OnOpenChange, OpenConfig, SelectorProps, SharedPickerProps } from '../interface'; import PickerPanel from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; import { PrefixClsContext } from './context'; @@ -123,13 +123,16 @@ export default function Picker(props: RangePickerProps }, }); - const onInternalChange = (date: DateType, index: number) => { - // Trigger change only when date changed - const [prevStart, prevEnd] = mergedValue; + // ======================== Change ======================== + const triggerChange = ([start, end]: RangeValueType, source?: 'submit') => { + const clone: RangeValueType = [start, end]; - const clone: RangeValueType = [prevStart, prevEnd]; - clone[index] = date; + // Only when exist value to sort + if (order && source === 'submit' && clone[0] && clone[1]) { + clone.sort((a, b) => (generateConfig.isAfter(a, b) ? 1 : -1)); + } + const [prevStart, prevEnd] = mergedValue; const isSameStart = isSameTimestamp(generateConfig, prevStart, clone[0]); const isSameEnd = isSameTimestamp(generateConfig, prevEnd, clone[1]); @@ -138,6 +141,30 @@ export default function Picker(props: RangePickerProps } }; + const onSelectorChange = (date: DateType, index: number) => { + // Trigger change only when date changed + const [prevStart, prevEnd] = mergedValue; + + const clone: RangeValueType = [prevStart, prevEnd]; + clone[index] = date; + + triggerChange(clone); + }; + + // ====================== Focus Blur ====================== + const onSubmit: SelectorProps['onSubmit'] = () => { + triggerChange(mergedValue, 'submit'); + }; + + const onFocus: SelectorProps['onFocus'] = (_, index) => { + setActiveIndex(index); + }; + + const onBlur: SelectorProps['onBlur'] = () => { + setActiveIndex(null); + onSubmit(); + }; + // ======================== Panels ======================== const panel = ; @@ -162,17 +189,14 @@ export default function Picker(props: RangePickerProps suffixIcon={suffixIcon} // Active focusIndex={activeIndex} - onFocus={(_, index) => { - setActiveIndex(index); - }} - onBlur={() => { - setActiveIndex(null); - }} + onFocus={onFocus} + onBlur={onBlur} + onSubmit={onSubmit} // Change value={mergedValue} format={formatList} maskFormat={maskFormat} - onChange={onInternalChange} + onChange={onSelectorChange} // Open open={mergedOpen ? activeIndex : null} onOpenChange={onSelectorOpenChange} diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index dd1a9b4f4..fe4ad5a08 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -27,7 +27,8 @@ export interface InputProps extends Omit void; + onChange: (value: string) => void; + onEnter: VoidFunction; /** * Trigger when input need additional help. * Like open the popup for interactive. @@ -45,6 +46,7 @@ const Input = React.forwardRef((props, ref) => { onChange, onInput, onHelp, + onEnter, preserveInvalidOnBlur, // Pass to input ...restProps @@ -92,12 +94,13 @@ const Input = React.forwardRef((props, ref) => { // ======================== Change ======================== const triggerInputChange = useEvent((text: string) => { if (validateFormat(text, format)) { - onChange?.(text); + onChange(text); } setInputValue(text); onModify(text); }); + // Directly trigger `onChange` if `format` is empty const onInternalChange: React.ChangeEventHandler = (event) => { // Hack `onChange` with format to do nothing if (!format) { @@ -105,7 +108,7 @@ const Input = React.forwardRef((props, ref) => { onModify(text); setInputValue(text); - onChange?.(text); + onChange(text); } }; @@ -228,6 +231,11 @@ const Input = React.forwardRef((props, ref) => { nextFillText = offsetCellValue(-1); break; + // =============== Enter ================ + case 'Enter': + onEnter(); + break; + // =============== Number =============== default: if (!isNaN(Number(key))) { diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 2d9b0dee3..c7bf3c130 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -26,6 +26,7 @@ const RangeSelector = React.forwardRef((props, format, maskFormat, onChange, + onSubmit, preserveInvalidOnBlur, // Open @@ -95,6 +96,8 @@ const RangeSelector = React.forwardRef((props, triggerOpen(false, index); }, + onEnter: onSubmit, + // Get validate text value onChange: (text) => { for (let i = 0; i < format.length; i += 1) { diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 866e2cc42..d12a5275b 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -273,6 +273,8 @@ export interface SelectorProps { focusIndex: number | null; onFocus: (event: React.FocusEvent, index?: number) => void; onBlur: (event: React.FocusEvent, index?: number) => void; + /** Trigger by `enter` key */ + onSubmit: VoidFunction; locale: Locale; generateConfig: GenerateConfig; From 63b154ca2b34baea5981d2e773d11c8982fd0fdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 30 Oct 2023 16:52:24 +0800 Subject: [PATCH 036/380] chore: focus logic --- docs/examples/debug.tsx | 7 +- src/NewPicker/PickerInput/RangePicker.tsx | 108 +++++++++++++----- src/NewPicker/PickerInput/Selector/Input.tsx | 39 ++++--- .../PickerInput/Selector/RangeSelector.tsx | 40 ++++++- src/NewPicker/interface.tsx | 4 +- 5 files changed, 146 insertions(+), 52 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 373aa4d52..8d7c45924 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -4,7 +4,7 @@ import type { PickerRef } from '../../src/NewPicker/interface'; import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import PickerPanel, { type PickerPanelProps } from '../../src/NewPicker/PickerPanel'; -import moment, { Moment } from 'moment'; +import moment, { type Moment } from 'moment'; import 'moment/locale/zh-cn'; import momentGenerateConfig from '../../src/generate/moment'; import zhCN from '../../src/locale/zh_CN'; @@ -46,7 +46,10 @@ export default () => { align: true, }} onChange={(val, text) => { - console.log('๐Ÿงถ Demo Change:', val, text); + console.log('๐Ÿ”ฅ Change:', val, text); + }} + onCalendarChange={(val, text, info) => { + console.log('๐ŸŽ‰ Calendar Change:', val, text, info); }} // preserveInvalidOnBlur allowEmpty={[true, false]} diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 1d8676505..5e272b8db 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -1,7 +1,13 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; import { isSameTimestamp } from '../../utils/dateUtil'; -import type { OnOpenChange, OpenConfig, SelectorProps, SharedPickerProps } from '../interface'; +import type { + OnOpenChange, + OpenConfig, + SelectorProps, + SelectorRef, + SharedPickerProps, +} from '../interface'; import PickerPanel from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; import { PrefixClsContext } from './context'; @@ -26,6 +32,13 @@ export interface RangePickerProps extends SharedPickerProps value?: RangeValueType; defaultValue?: RangeValueType; onChange?: (dates: RangeValueType, dateStrings: [string, string]) => void; + onCalendarChange?: ( + dates: RangeValueType, + dateStrings: [string, string], + info: { + range: 'start' | 'end'; + }, + ) => void; order?: boolean; @@ -46,6 +59,7 @@ export default function Picker(props: RangePickerProps value, defaultValue, onChange, + onCalendarChange, order = true, @@ -75,6 +89,8 @@ export default function Picker(props: RangePickerProps direction, } = props; + const selectorRef = React.useRef(); + // ======================== Format ======================== const [formatList, maskFormat] = useFieldFormat( picker === 'date' && showTime ? 'datetime' : picker, @@ -82,9 +98,6 @@ export default function Picker(props: RangePickerProps format, ); - // ======================== Active ======================== - const [activeIndex, setActiveIndex] = React.useState(null); - // ========================= Open ========================= const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; @@ -94,6 +107,32 @@ export default function Picker(props: RangePickerProps setMergeOpen(nextOpen, config); }; + // ======================== Active ======================== + // When user first focus one input, any submit will trigger focus another one. + // When second time focus one input, submit will not trigger focus again. + // When click outside to close the panel, trigger event if it can trigger onChange. + const [activeIndex, setActiveIndex] = React.useState(null); + + const [activeList, setActiveList] = React.useState(null); + + React.useEffect(() => { + if (!mergedOpen) { + setActiveList(null); + } else if (activeIndex !== null) { + setActiveList((ori) => { + const list = [...(ori || [])]; + return list[list.length - 1] === activeIndex ? ori : [...list, activeIndex]; + }); + } + }, [activeIndex, mergedOpen]); + + // Trigger if need adjust active + const syncActive = () => { + if (activeList?.length === 1) { + selectorRef.current.focus(activeList[0] === 0 ? 1 : 0); + } + }; + // =================== Disabled & Empty =================== const mergedDisabled = separateConfig(disabled, false); const mergedAllowEmpty = separateConfig(allowEmpty, true); @@ -102,25 +141,6 @@ export default function Picker(props: RangePickerProps const [mergedValue, setMergedValue] = useMergedState(defaultValue, { value, postState: (valList): RangeValueType => valList || [null, null], - onChange: (nextValue) => { - if (onChange) { - const startEmpty = !nextValue[0]; - const endEmpty = !nextValue[1]; - - if ( - // Validate start - (!startEmpty || mergedAllowEmpty[0]) && - // Validate end - (!endEmpty || mergedAllowEmpty[1]) - ) { - const nextValueTexts = nextValue.map((date) => - date ? generateConfig.locale.format(locale.locale, date, formatList[0]) : '', - ); - - onChange(nextValue, nextValueTexts as [string, string]); - } - } - }, }); // ======================== Change ======================== @@ -138,6 +158,33 @@ export default function Picker(props: RangePickerProps if (!isSameStart || !isSameEnd) { setMergedValue(clone); + + // >>>>> Batch of change logic + const nextValueTexts = clone.map((date) => + date ? generateConfig.locale.format(locale.locale, date, formatList[0]) : '', + ) as [string, string]; + + // Trigger calendar change event + if (onCalendarChange) { + onCalendarChange(clone, nextValueTexts, { + range: isSameStart ? 'end' : 'start', + }); + } + + // Trigger Change event + if (onChange && source === 'submit') { + const startEmpty = !clone[0]; + const endEmpty = !clone[1]; + + if ( + // Validate start + (!startEmpty || mergedAllowEmpty[0]) && + // Validate end + (!endEmpty || mergedAllowEmpty[1]) + ) { + onChange(clone, nextValueTexts); + } + } } }; @@ -152,17 +199,18 @@ export default function Picker(props: RangePickerProps }; // ====================== Focus Blur ====================== - const onSubmit: SelectorProps['onSubmit'] = () => { - triggerChange(mergedValue, 'submit'); - }; - const onFocus: SelectorProps['onFocus'] = (_, index) => { setActiveIndex(index); }; const onBlur: SelectorProps['onBlur'] = () => { setActiveIndex(null); - onSubmit(); + triggerChange(mergedValue, 'submit'); + }; + + const onSubmit: SelectorProps['onSubmit'] = () => { + triggerChange(mergedValue, 'submit'); + syncActive(); }; // ======================== Panels ======================== @@ -185,10 +233,12 @@ export default function Picker(props: RangePickerProps ((props, ref) => { } }; + // ======================== Mouse ========================= + // When `mouseDown` get focus, it's better to not to change the selection + // Since the up position maybe not is the first cell + const mouseDownRef = React.useRef(false); + + const onInternalMouseDown: React.MouseEventHandler = () => { + mouseDownRef.current = true; + }; + + const onInternalMouseUp: React.MouseEventHandler = (event) => { + const { selectionStart: start } = event.target as HTMLInputElement; + + const closeMaskIndex = maskFormat.getMaskCellIndex(start); + setFocusCellIndex(closeMaskIndex); + + // Force update the selection + forceSelectionSync({}); + + onMouseUp?.(event); + + mouseDownRef.current = false; + }; + // ====================== Focus Blur ====================== const onInternalFocus: React.FocusEventHandler = (event) => { setFocused(true); @@ -145,19 +168,6 @@ const Input = React.forwardRef((props, ref) => { onSharedBlur(event); }; - // ======================== Mouse ========================= - const onInternalMouseUp: React.MouseEventHandler = (event) => { - const { selectionStart: start } = event.target as HTMLInputElement; - - const closeMaskIndex = maskFormat.getMaskCellIndex(start); - setFocusCellIndex(closeMaskIndex); - - // Force update the selection - forceSelectionSync({}); - - onMouseUp?.(event); - }; - // ======================= Keyboard ======================= const onInternalKeyDown: React.KeyboardEventHandler = (event) => { const { key } = event; @@ -279,7 +289,7 @@ const Input = React.forwardRef((props, ref) => { const rafRef = React.useRef(); useLayoutEffect(() => { - if (!focused || !format) { + if (!focused || !format || mouseDownRef.current) { return; } @@ -319,6 +329,7 @@ const Input = React.forwardRef((props, ref) => { onFocus: onInternalFocus, onBlur: onInternalBlur, onKeyDown: onInternalKeyDown, + onMouseDown: onInternalMouseDown, onMouseUp: onInternalMouseUp, onPaste: onInternalPaste, } diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index c7bf3c130..7433a6571 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -15,7 +15,7 @@ const RangeSelector = React.forwardRef((props, const { suffixIcon, separator = '~', - focusIndex, + activeIndex, onFocus, onBlur, locale, @@ -42,12 +42,42 @@ const RangeSelector = React.forwardRef((props, const inputStartRef = React.useRef(); const inputEndRef = React.useRef(); + const getInput = (index: number) => [inputStartRef, inputEndRef][index].current; + React.useImperativeHandle(ref, () => ({ nativeElement: rootRef.current, - focus: () => inputStartRef.current?.focus(), - blur: () => inputStartRef.current?.blur(), + focus: (index = 0) => getInput(index)?.focus(), + blur: () => { + getInput(0)?.blur(); + getInput(1)?.blur(); + }, })); + // // ======================== Active ======================== + // const [activeIndexList, setActiveIndexList] = React.useState(EMPTY_LIST); + + // React.useEffect(() => { + // if (!open) { + // setActiveIndexList(EMPTY_LIST); + // } else if (activeIndex !== null) { + // setActiveIndexList((list) => + // list[list.length - 1] === activeIndex ? list : [...list, activeIndex], + // ); + // } + // }, [open, activeIndex]); + + // // ======================== Enter ========================= + // // Auto focus to another one if needed + // const onInternalEnter = () => { + // onSubmit(); + + // if (activeIndexList.length === 1) { + // // Focus next input + // const inputEle = [inputStartRef, inputEndRef][activeIndexList[0] === 0 ? 1 : 0].current; + // inputEle.focus(); + // } + // }; + // ========================= Open ========================= const triggerOpen = (nextOpen: boolean, index: number, config?: OpenConfig) => { onOpenChange(nextOpen, index, config); @@ -83,7 +113,7 @@ const RangeSelector = React.forwardRef((props, // ============= By Index ============= value: valueTexts[index], - active: focusIndex === index, + active: activeIndex === index, onFocus: (event) => { onFocus(event, index); @@ -125,7 +155,7 @@ const RangeSelector = React.forwardRef((props, return (
          diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index d12a5275b..e9a7d3316 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -270,7 +270,7 @@ export interface SelectorProps { suffixIcon?: React.ReactNode; className?: string; style?: React.CSSProperties; - focusIndex: number | null; + activeIndex: number | null; onFocus: (event: React.FocusEvent, index?: number) => void; onBlur: (event: React.FocusEvent, index?: number) => void; /** Trigger by `enter` key */ @@ -298,7 +298,7 @@ export interface SelectorProps { export interface SelectorRef { nativeElement: HTMLDivElement; - focus: VoidFunction; + focus: (index?: number) => void; blur: VoidFunction; } From aef99c0dbd4b6489c742b69e7b2e3efa6f729e54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 30 Oct 2023 17:39:15 +0800 Subject: [PATCH 037/380] chore: keep open --- src/NewPicker/PickerInput/RangePicker.tsx | 36 +++++++++++++--- .../PickerInput/Selector/RangeSelector.tsx | 33 +++----------- src/NewPicker/PickerPanel/index.tsx | 43 ++++++++++++++++++- src/NewPicker/interface.tsx | 3 ++ 4 files changed, 82 insertions(+), 33 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 5e272b8db..a95a5bef5 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -8,7 +8,7 @@ import type { SelectorRef, SharedPickerProps, } from '../interface'; -import PickerPanel from '../PickerPanel'; +import PickerPanel, { type PickerPanelRef } from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; import { PrefixClsContext } from './context'; import { useFieldFormat } from './hooks/useFieldFormat'; @@ -90,6 +90,7 @@ export default function Picker(props: RangePickerProps } = props; const selectorRef = React.useRef(); + const panelRef = React.useRef(); // ======================== Format ======================== const [formatList, maskFormat] = useFieldFormat( @@ -112,6 +113,9 @@ export default function Picker(props: RangePickerProps // When second time focus one input, submit will not trigger focus again. // When click outside to close the panel, trigger event if it can trigger onChange. const [activeIndex, setActiveIndex] = React.useState(null); + const [focused, setFocused] = React.useState(false); + + const focusedIndex = focused ? activeIndex : null; const [activeList, setActiveList] = React.useState(null); @@ -201,10 +205,11 @@ export default function Picker(props: RangePickerProps // ====================== Focus Blur ====================== const onFocus: SelectorProps['onFocus'] = (_, index) => { setActiveIndex(index); + setFocused(true); }; const onBlur: SelectorProps['onBlur'] = () => { - setActiveIndex(null); + setFocused(false); triggerChange(mergedValue, 'submit'); }; @@ -213,8 +218,27 @@ export default function Picker(props: RangePickerProps syncActive(); }; + // ======================== Click ========================= + const onSelectorClick: React.MouseEventHandler = () => { + // if (focusedIndex === null) { + selectorRef.current.focus(0); + setMergeOpen(true); + // } + }; + // ======================== Panels ======================== - const panel = ; + const onPanelFocus: React.FocusEventHandler = () => { + setFocused(true); + setMergeOpen(true); + }; + + const onPanelBlur: React.FocusEventHandler = () => { + setFocused(false); + }; + + const panel = ( + {...props} ref={panelRef} onFocus={onPanelFocus} onBlur={onPanelBlur} /> + ); // ======================== Render ======================== return ( @@ -238,7 +262,7 @@ export default function Picker(props: RangePickerProps // Icon suffixIcon={suffixIcon} // Active - activeIndex={activeIndex} + activeIndex={focusedIndex} onFocus={onFocus} onBlur={onBlur} onSubmit={onSubmit} @@ -248,8 +272,10 @@ export default function Picker(props: RangePickerProps maskFormat={maskFormat} onChange={onSelectorChange} // Open - open={mergedOpen ? activeIndex : null} + open={mergedOpen ? focusedIndex : null} onOpenChange={onSelectorOpenChange} + // Click + onClick={onSelectorClick} /> diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 7433a6571..1848f47d4 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -21,6 +21,9 @@ const RangeSelector = React.forwardRef((props, locale, generateConfig, + // Click + onClick, + // Change value, format, @@ -53,31 +56,6 @@ const RangeSelector = React.forwardRef((props, }, })); - // // ======================== Active ======================== - // const [activeIndexList, setActiveIndexList] = React.useState(EMPTY_LIST); - - // React.useEffect(() => { - // if (!open) { - // setActiveIndexList(EMPTY_LIST); - // } else if (activeIndex !== null) { - // setActiveIndexList((list) => - // list[list.length - 1] === activeIndex ? list : [...list, activeIndex], - // ); - // } - // }, [open, activeIndex]); - - // // ======================== Enter ========================= - // // Auto focus to another one if needed - // const onInternalEnter = () => { - // onSubmit(); - - // if (activeIndexList.length === 1) { - // // Focus next input - // const inputEle = [inputStartRef, inputEndRef][activeIndexList[0] === 0 ? 1 : 0].current; - // inputEle.focus(); - // } - // }; - // ========================= Open ========================= const triggerOpen = (nextOpen: boolean, index: number, config?: OpenConfig) => { onOpenChange(nextOpen, index, config); @@ -122,6 +100,8 @@ const RangeSelector = React.forwardRef((props, }); }, onBlur: (event) => { + // Blur do not trigger close + // Since it may focus to the popup panel onBlur(event, index); triggerOpen(false, index); }, @@ -140,7 +120,7 @@ const RangeSelector = React.forwardRef((props, } }, onHelp: () => { - onOpenChange(true, index); + triggerOpen(true, index); }, onKeyDown: (event) => { switch (event.key) { @@ -158,6 +138,7 @@ const RangeSelector = React.forwardRef((props, [`${prefixCls}-focused`]: activeIndex !== null, })} ref={rootRef} + onClick={onClick} >
          {separator}
          diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 300888dc5..fa2d14eca 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -28,6 +28,10 @@ const DefaultComponents: Components = { time: TimePanel, }; +export interface PickerPanelRef { + nativeElement: HTMLDivElement; +} + export interface PickerPanelProps { locale: Locale; disabledDate?: DisabledDate; @@ -59,9 +63,16 @@ export interface PickerPanelProps { // Components components?: Components; + + // Focus + onFocus?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; } -export default function PickerPanel(props: PickerPanelProps) { +function PickerPanel( + props: PickerPanelProps, + ref: React.Ref, +) { const { locale, disabledDate, @@ -93,10 +104,21 @@ export default function PickerPanel(props: PickerPanelProps(); + + React.useImperativeHandle(ref, () => ({ + nativeElement: rootRef.current, + })); + // ========================== Now =========================== const now = generateConfig.getNow(); @@ -152,7 +174,13 @@ export default function PickerPanel(props: PickerPanelProps +
          (props: PickerPanelProps ); } + +const RefPanelPicker = React.forwardRef(PickerPanel); + +if (process.env.NODE_ENV !== 'production') { + RefPanelPicker.displayName = 'PanelPicker'; +} + +// Make support generic +export default RefPanelPicker as ( + props: PickerPanelProps & { ref?: React.Ref }, +) => React.ReactElement; diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index e9a7d3316..de3fceebc 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -278,6 +278,9 @@ export interface SelectorProps { locale: Locale; generateConfig: GenerateConfig; + // Click + onClick: React.MouseEventHandler; + // Change format: string[]; /** From c55f33ab70fac61e9aa153782bcbf4215011362e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 30 Oct 2023 20:34:04 +0800 Subject: [PATCH 038/380] chore: continue path --- docs/examples/debug.tsx | 6 +- src/NewPicker/PickerInput/RangePicker.tsx | 4 +- src/NewPicker/PickerInput/Selector/Input.tsx | 40 ++++++++------ .../PickerInput/hooks/useLockState.ts | 55 +++++++++++++++++++ src/NewPicker/PickerInput/hooks/useOpen.ts | 54 +++--------------- 5 files changed, 92 insertions(+), 67 deletions(-) create mode 100644 src/NewPicker/PickerInput/hooks/useLockState.ts diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 8d7c45924..ce7edbab4 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -53,9 +53,9 @@ export default () => { }} // preserveInvalidOnBlur allowEmpty={[true, false]} - // onOpenChange={(nextOpen) => { - // console.log('Next Open:', nextOpen); - // }} + onOpenChange={(nextOpen) => { + console.log('๐Ÿ† Next Open:', nextOpen); + }} order />
          diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index a95a5bef5..27819bd15 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -12,6 +12,7 @@ import PickerPanel, { type PickerPanelRef } from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; import { PrefixClsContext } from './context'; import { useFieldFormat } from './hooks/useFieldFormat'; +import useLockState from './hooks/useLockState'; import useOpen from './hooks/useOpen'; import RangeSelector from './Selector/RangeSelector'; @@ -103,6 +104,7 @@ export default function Picker(props: RangePickerProps const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, onOpenChange); + // const [mergedOpen, setMergeOpen] = useLockState(open, defaultOpen, onOpenChange); const onSelectorOpenChange: OnOpenChange = (nextOpen, index, config?: OpenConfig) => { setMergeOpen(nextOpen, config); @@ -230,7 +232,7 @@ export default function Picker(props: RangePickerProps const onPanelFocus: React.FocusEventHandler = () => { setFocused(true); setMergeOpen(true); - }; + }; const onPanelBlur: React.FocusEventHandler = () => { setFocused(false); diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 73137c9f2..5c64d7605 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -5,6 +5,7 @@ import raf from 'rc-util/lib/raf'; import * as React from 'react'; import { leftPad } from '../../../utils/miscUtil'; import { PrefixClsContext } from '../context'; +import { useLockEffect } from '../hooks/useLockState'; import Icon from './Icon'; import MaskFormat from './MaskFormat'; import { getMaskRange } from './util'; @@ -112,7 +113,7 @@ const Input = React.forwardRef((props, ref) => { } }; - const onInternalPaste: React.ClipboardEventHandler = (event) => { + const onFormatPaste: React.ClipboardEventHandler = (event) => { // Get paste text const pasteText = event.clipboardData.getData('text'); @@ -126,11 +127,11 @@ const Input = React.forwardRef((props, ref) => { // Since the up position maybe not is the first cell const mouseDownRef = React.useRef(false); - const onInternalMouseDown: React.MouseEventHandler = () => { + const onFormatMouseDown: React.MouseEventHandler = () => { mouseDownRef.current = true; }; - const onInternalMouseUp: React.MouseEventHandler = (event) => { + const onFormatMouseUp: React.MouseEventHandler = (event) => { const { selectionStart: start } = event.target as HTMLInputElement; const closeMaskIndex = maskFormat.getMaskCellIndex(start); @@ -145,7 +146,7 @@ const Input = React.forwardRef((props, ref) => { }; // ====================== Focus Blur ====================== - const onInternalFocus: React.FocusEventHandler = (event) => { + const onFormatFocus: React.FocusEventHandler = (event) => { setFocused(true); setFocusCellIndex(0); setFocusCellText(''); @@ -154,22 +155,29 @@ const Input = React.forwardRef((props, ref) => { }; const onSharedBlur: React.FocusEventHandler = (event) => { - if (!preserveInvalidOnBlur) { - setInputValue(value); - } + // if (!preserveInvalidOnBlur) { + // setInputValue(value); + // } onBlur(event); }; - const onInternalBlur: React.FocusEventHandler = (event) => { - triggerInputChange(value); + const onFormatBlur: React.FocusEventHandler = (event) => { setFocused(false); onSharedBlur(event); }; + // ======================== Active ======================== + // Check if blur need reset input value + useLockEffect(active, () => { + if (!active && format && (internalInputValue === format || !preserveInvalidOnBlur)) { + triggerInputChange(value); + } + }); + // ======================= Keyboard ======================= - const onInternalKeyDown: React.KeyboardEventHandler = (event) => { + const onFormatKeyDown: React.KeyboardEventHandler = (event) => { const { key } = event; console.log('key', key); @@ -326,12 +334,12 @@ const Input = React.forwardRef((props, ref) => { // Input props for format const inputProps: React.InputHTMLAttributes = format ? { - onFocus: onInternalFocus, - onBlur: onInternalBlur, - onKeyDown: onInternalKeyDown, - onMouseDown: onInternalMouseDown, - onMouseUp: onInternalMouseUp, - onPaste: onInternalPaste, + onFocus: onFormatFocus, + onBlur: onFormatBlur, + onKeyDown: onFormatKeyDown, + onMouseDown: onFormatMouseDown, + onMouseUp: onFormatMouseUp, + onPaste: onFormatPaste, } : {}; diff --git a/src/NewPicker/PickerInput/hooks/useLockState.ts b/src/NewPicker/PickerInput/hooks/useLockState.ts new file mode 100644 index 000000000..c12414dd1 --- /dev/null +++ b/src/NewPicker/PickerInput/hooks/useLockState.ts @@ -0,0 +1,55 @@ +import { useEvent, useMergedState } from 'rc-util'; +import { useLayoutUpdateEffect } from 'rc-util/lib/hooks/useLayoutEffect'; +import raf from 'rc-util/lib/raf'; +import * as React from 'react'; + +/** + * Will be `true` immediately for setState. + * But will be `false` for a requestAnimationFrame. + */ +export default function useLockState( + value: boolean, + defaultValue?: boolean, + onChange?: (next: boolean) => void, +): [state: boolean, setState: (nextState: boolean) => void] { + const [state, setState] = useMergedState(defaultValue || false, { + value, + }); + const rafRef = React.useRef(null); + + const updateValue = useEvent((next: boolean) => { + raf.cancel(rafRef.current); + + if (next) { + setState(next); + } else { + rafRef.current = raf(() => { + setState(next); + }); + } + }); + + useLayoutUpdateEffect(() => { + if (onChange) { + onChange(state); + } + }, [state]); + + return [state, updateValue]; +} + +export function useLockEffect(value: boolean, onChange: (next: boolean) => void) { + useLayoutUpdateEffect(() => { + if (value) { + onChange(value); + } else { + const id = raf(() => { + onChange(value); + }); + + return () => { + raf.cancel(id); + }; + } + }, [value]); +} diff --git a/src/NewPicker/PickerInput/hooks/useOpen.ts b/src/NewPicker/PickerInput/hooks/useOpen.ts index b5e7ac457..6f7a1cd5f 100644 --- a/src/NewPicker/PickerInput/hooks/useOpen.ts +++ b/src/NewPicker/PickerInput/hooks/useOpen.ts @@ -1,7 +1,5 @@ -import { useEvent, useMergedState } from 'rc-util'; -import raf from 'rc-util/lib/raf'; -import * as React from 'react'; import type { OpenConfig } from '../../interface'; +import useLockState from './useLockState'; /** * Control the open state. @@ -12,52 +10,14 @@ export default function useOpen( defaultOpen?: boolean, onOpenChange?: (open: boolean) => void, ): [open: boolean, setOpen: (open: boolean, config?: OpenConfig) => void] { - const [mergedOpen, setMergeOpen] = useMergedState(defaultOpen || false, { - value: open, - // onChange: onOpenChange, - }); - // Delay for handle the open state, in case fast shift from `open` -> `close` -> `open` - const mountedRef = React.useRef(false); - const [effectOpen, setEffectOpen] = React.useState(mergedOpen); - - React.useEffect(() => { - const syncOpen = () => { - setEffectOpen(mergedOpen); - - if (mountedRef.current && onOpenChange && mergedOpen !== effectOpen) { - onOpenChange(mergedOpen); - } - }; - - if (mergedOpen) { - syncOpen(); - } else { - const id = raf(syncOpen); - return () => { - raf.cancel(id); - }; - } - }, [mergedOpen]); - - React.useEffect(() => { - mountedRef.current = true; - return () => { - mountedRef.current = false; - }; - }, []); + const [rafOpen, setRafOpen] = useLockState(open, defaultOpen, onOpenChange); - // Open function - const setOpen = useEvent((nextOpen: boolean, option: OpenConfig = {}) => { - if ( - // Always keep sync - !option.inherit || - // Set only when current is the same - nextOpen === effectOpen - ) { - setMergeOpen(nextOpen); + function setOpen(next: boolean, config: OpenConfig = {}) { + if (!config.inherit || rafOpen) { + setRafOpen(next); } - }); + } - return [effectOpen, setOpen]; + return [rafOpen, setOpen]; } From 54243879ba339fab815ebc88c574883b77c96f1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 31 Oct 2023 17:46:26 +0800 Subject: [PATCH 039/380] chore: submit panel --- assets/index.less | 4 +- docs/examples/debug.tsx | 16 ++-- src/NewPicker/PickerInput/Popup/Footer.tsx | 79 ++++++++++++++++ src/NewPicker/PickerInput/Popup/index.tsx | 82 ++++++++++++++++ src/NewPicker/PickerInput/RangePicker.tsx | 94 ++++++++++++++++--- src/NewPicker/PickerInput/Selector/Icon.tsx | 4 +- src/NewPicker/PickerInput/Selector/Input.tsx | 4 +- .../PickerInput/Selector/RangeSelector.tsx | 4 +- .../PickerInput/Selector/SingleSelector.tsx | 4 +- src/NewPicker/PickerInput/SinglePicker.tsx | 6 +- src/NewPicker/PickerInput/context.tsx | 14 ++- src/NewPicker/PickerInput/hooks/useShowNow.ts | 23 +++++ .../TimePanel/TimePanelBody/TimeColumn.tsx | 29 +++--- src/NewPicker/PickerPanel/index.tsx | 20 +--- src/NewPicker/PickerTrigger/index.tsx | 4 +- src/NewPicker/interface.tsx | 18 +++- 16 files changed, 338 insertions(+), 67 deletions(-) create mode 100644 src/NewPicker/PickerInput/Popup/Footer.tsx create mode 100644 src/NewPicker/PickerInput/Popup/index.tsx create mode 100644 src/NewPicker/PickerInput/hooks/useShowNow.ts diff --git a/assets/index.less b/assets/index.less index 63db2aeef..c7a34b1a0 100644 --- a/assets/index.less +++ b/assets/index.less @@ -5,8 +5,8 @@ @input-placeholder-color: hsv(0, 0, 75%); @time-panel-padding-total: 180px; -@time-panel-padding-top: 90px; -// @time-panel-padding-top: 0; +// @time-panel-padding-top: 90px; +@time-panel-padding-top: 0; .placeholder(@color: @input-placeholder-color) { // Firefox diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index ce7edbab4..d793d32cd 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -40,11 +40,12 @@ export default () => { { console.log('๐Ÿ”ฅ Change:', val, text); }} @@ -52,11 +53,12 @@ export default () => { console.log('๐ŸŽ‰ Calendar Change:', val, text, info); }} // preserveInvalidOnBlur - allowEmpty={[true, false]} + allowEmpty={[false, true]} onOpenChange={(nextOpen) => { console.log('๐Ÿ† Next Open:', nextOpen); }} - order + // open + renderExtraFooter={(mode) => mode} />
          diff --git a/src/NewPicker/PickerInput/Popup/Footer.tsx b/src/NewPicker/PickerInput/Popup/Footer.tsx new file mode 100644 index 000000000..b34e6cc55 --- /dev/null +++ b/src/NewPicker/PickerInput/Popup/Footer.tsx @@ -0,0 +1,79 @@ +import * as React from 'react'; +import type { InternalMode, PanelMode, SharedPickerProps } from '../../interface'; +import PickerContext from '../context'; + +export interface FooterProps { + mode: PanelMode; + internalMode: InternalMode; + renderExtraFooter?: SharedPickerProps['renderExtraFooter']; + showNow: boolean; + onSubmit: (date?: DateType) => void; +} + +export default function Footer(props: FooterProps) { + const { mode, internalMode, renderExtraFooter, showNow, onSubmit } = props; + + const { + prefixCls, + locale, + generateConfig, + button: Button = 'button', + } = React.useContext(PickerContext); + + //
          {renderExtraFooter(mode)}
          + + { + /* {(extraNode || rangesNode) && ( +
          + {extraNode} + {rangesNode} +
          + )} */ + } + + // ======================== Event ========================= + const onNow = () => { + const now = generateConfig.getNow(); + onSubmit(now); + }; + + // ======================== Extra ========================= + const extraNode = renderExtraFooter?.(mode); + + // ======================== Ranges ======================== + const presetNode = showNow && ( +
        • + + {internalMode === 'date' ? locale.today : locale.now} + +
          • + ); + + const okNode = (internalMode === 'time' || internalMode === 'datetime') && ( +
        • + +
          • + ); + + const rangeNode = ( +
            + {presetNode} + {okNode} +
          + ); + + // ======================== Render ======================== + return ( +
          + {extraNode} + {rangeNode} +
          + ); +} diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx new file mode 100644 index 000000000..165f9dad8 --- /dev/null +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -0,0 +1,82 @@ +import classNames from 'classnames'; +import pickAttrs from 'rc-util/lib/pickAttrs'; +import * as React from 'react'; +import type { InternalMode, PanelMode, SharedPickerProps } from '../../interface'; +import PickerContext from '../context'; +import Footer from './Footer'; + +export interface PopupProps + extends Pick, 'onFocus' | 'onBlur'> { + children?: React.ReactElement | React.ReactElement[]; + panelRender?: SharedPickerProps['panelRender']; + mode: PanelMode; + internalMode: InternalMode; + renderExtraFooter?: SharedPickerProps['renderExtraFooter']; + showNow: boolean; + onSubmit: (date?: DateType) => void; +} + +export default function Popup(props: PopupProps) { + const { panelRender, children, internalMode, ...restProps } = props; + + const { prefixCls } = React.useContext(PickerContext); + const panelPrefixCls = `${prefixCls}-panel`; + + // ======================== Custom ======================== + const panelNode = Array.isArray(children) ? ( +
          {children}
          + ) : ( + children + ); + + let mergedNodes: React.ReactNode = ( +
          + {/* { + triggerChange(nextValue, null); + triggerOpen(false, mergedActivePickerIndex, 'preset'); + }} + onHover={(hoverValue) => { + setRangeHoverValue(hoverValue); + }} + /> */} +
          + {panelNode} + {/* {(extraNode || rangesNode) && ( +
          + {extraNode} + {rangesNode} +
          + )} */} +
          +
          +
          + ); + + if (panelRender) { + mergedNodes = panelRender(mergedNodes); + } + + // ======================== Render ======================== + const divProps = pickAttrs(restProps, { + attr: true, + }); + + const containerPrefixCls = `${panelPrefixCls}-container`; + + return ( +
          + {mergedNodes} +
          + ); +} diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 27819bd15..1712c2f59 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -2,18 +2,21 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; import { isSameTimestamp } from '../../utils/dateUtil'; import type { + InternalMode, OnOpenChange, OpenConfig, SelectorProps, SelectorRef, SharedPickerProps, } from '../interface'; -import PickerPanel, { type PickerPanelRef } from '../PickerPanel'; +import type { PickerPanelProps, PickerPanelRef } from '../PickerPanel'; +import PickerPanel from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; -import { PrefixClsContext } from './context'; +import PickerContext from './context'; import { useFieldFormat } from './hooks/useFieldFormat'; -import useLockState from './hooks/useLockState'; import useOpen from './hooks/useOpen'; +import useShowNow from './hooks/useShowNow'; +import Popup from './Popup'; import RangeSelector from './Selector/RangeSelector'; function separateConfig(config: T | [T, T] | null | undefined, defaultConfig: T): [T, T] { @@ -78,7 +81,11 @@ export default function Picker(props: RangePickerProps locale, generateConfig, picker = 'date', + mode, + onModeChange, showTime, + showNow, + showToday, // Format format, @@ -88,17 +95,28 @@ export default function Picker(props: RangePickerProps suffixIcon, direction, + + // Render + components = {}, } = props; const selectorRef = React.useRef(); const panelRef = React.useRef(); + // ======================== Picker ======================== + const [mergedMode, setMergedMode] = useMergedState(picker, { + value: mode, + onChange: onModeChange, + }); + + const internalPicker: InternalMode = picker === 'date' && showTime ? 'datetime' : picker; + const internalMode: InternalMode = mergedMode === 'date' && showTime ? 'datetime' : mergedMode; + + // ======================= Show Now ======================= + const mergedShowNow = useShowNow(internalPicker, mergedMode, showNow, showToday); + // ======================== Format ======================== - const [formatList, maskFormat] = useFieldFormat( - picker === 'date' && showTime ? 'datetime' : picker, - locale, - format, - ); + const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format); // ========================= Open ========================= const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; @@ -194,13 +212,19 @@ export default function Picker(props: RangePickerProps } }; - const onSelectorChange = (date: DateType, index: number) => { + const fillValue = (date: DateType, index: number) => { // Trigger change only when date changed const [prevStart, prevEnd] = mergedValue; const clone: RangeValueType = [prevStart, prevEnd]; clone[index] = date; + return clone; + }; + + const onSelectorChange = (date: DateType, index: number) => { + const clone = fillValue(date, index); + triggerChange(clone); }; @@ -215,8 +239,14 @@ export default function Picker(props: RangePickerProps triggerChange(mergedValue, 'submit'); }; - const onSubmit: SelectorProps['onSubmit'] = () => { - triggerChange(mergedValue, 'submit'); + const onSubmit = (date?: DateType) => { + let nextValue = mergedValue; + + if (date) { + nextValue = fillValue(date, activeIndex); + } + + triggerChange(nextValue, 'submit'); syncActive(); }; @@ -232,19 +262,53 @@ export default function Picker(props: RangePickerProps const onPanelFocus: React.FocusEventHandler = () => { setFocused(true); setMergeOpen(true); - }; + }; const onPanelBlur: React.FocusEventHandler = () => { setFocused(false); }; + const onPanelChange: PickerPanelProps['onChange'] = (date) => { + const clone: RangeValueType = [...mergedValue]; + clone[activeIndex] = date; + + triggerChange(clone); + }; + const panel = ( - {...props} ref={panelRef} onFocus={onPanelFocus} onBlur={onPanelBlur} /> + + + {...props} + ref={panelRef} + onChange={onPanelChange} + mode={mergedMode} + onModeChange={setMergedMode} + /> + + ); + + // ======================= Context ======================== + const context = React.useMemo( + () => ({ + prefixCls, + locale, + generateConfig, + button: components.button, + }), + [prefixCls, locale, generateConfig, components.button], ); // ======================== Render ======================== return ( - + (props: RangePickerProps onClick={onSelectorClick} /> - + ); } diff --git a/src/NewPicker/PickerInput/Selector/Icon.tsx b/src/NewPicker/PickerInput/Selector/Icon.tsx index 0bb082d22..f5f7ef5d2 100644 --- a/src/NewPicker/PickerInput/Selector/Icon.tsx +++ b/src/NewPicker/PickerInput/Selector/Icon.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { PrefixClsContext } from '../context'; +import PickerContext from '../context'; export interface IconProps { icon?: React.ReactNode; @@ -9,7 +9,7 @@ export interface IconProps { export default function Icon(props: IconProps) { const { icon, type } = props; - const prefixCls = React.useContext(PrefixClsContext); + const { prefixCls } = React.useContext(PickerContext); return icon ? {icon} : null; } diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 5c64d7605..f54854f38 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -4,7 +4,7 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import raf from 'rc-util/lib/raf'; import * as React from 'react'; import { leftPad } from '../../../utils/miscUtil'; -import { PrefixClsContext } from '../context'; +import PickerContext from '../context'; import { useLockEffect } from '../hooks/useLockState'; import Icon from './Icon'; import MaskFormat from './MaskFormat'; @@ -54,7 +54,7 @@ const Input = React.forwardRef((props, ref) => { } = props; const { value, onFocus, onBlur, onKeyDown, onMouseUp } = props; - const prefixCls = React.useContext(PrefixClsContext); + const { prefixCls } = React.useContext(PickerContext); const inputPrefixCls = `${prefixCls}-input`; // ======================== Value ========================= diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 1848f47d4..5850a2c32 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; import type { OpenConfig, SelectorProps, SelectorRef } from '../../interface'; -import { PrefixClsContext } from '../context'; +import PickerContext from '../context'; import Icon from './Icon'; import Input, { type InputProps } from './Input'; @@ -38,7 +38,7 @@ const RangeSelector = React.forwardRef((props, } = props; // ======================== Prefix ======================== - const prefixCls = React.useContext(PrefixClsContext); + const { prefixCls } = React.useContext(PickerContext); // ========================= Refs ========================= const rootRef = React.useRef(); diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector.tsx index ea96ec730..4ff582a42 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; -import { PrefixClsContext } from '../context'; import type { SelectorProps, SelectorRef } from '../../interface'; +import PickerContext from '../context'; import Input from './Input'; const SingleSelector = React.forwardRef((props, ref) => { @@ -18,7 +18,7 @@ const SingleSelector = React.forwardRef((props, ref) onBlur, } = props; - const prefixCls = React.useContext(PrefixClsContext); + const { prefixCls } = React.useContext(PickerContext); // ============================= Refs ============================= const rootRef = React.useRef(); diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index e192e4af6..aaf4c78de 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import type { PickerRef, SelectorRef, SharedPickerProps } from '../interface'; import PickerPanel from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; -import { PrefixClsContext } from './context'; +import PickerContext from './context'; import SingleSelector from './Selector/SingleSelector'; export type SinglePickerProps = SharedPickerProps; @@ -76,7 +76,7 @@ const SinglePicker = React.forwardRef((props, ref) // ============================ Render ============================ return ( - + ((props, ref) onBlur={onInternalBlur} /> - + ); }); diff --git a/src/NewPicker/PickerInput/context.tsx b/src/NewPicker/PickerInput/context.tsx index 701626118..7878472b4 100644 --- a/src/NewPicker/PickerInput/context.tsx +++ b/src/NewPicker/PickerInput/context.tsx @@ -1,3 +1,15 @@ import * as React from 'react'; +import type { GenerateConfig } from '../../generate'; +import type { Components, Locale } from '../interface'; -export const PrefixClsContext = React.createContext(''); +export interface PickerContextProps { + prefixCls: string; + locale: Locale; + generateConfig: GenerateConfig; + /** Customize button component */ + button?: Components['button']; +} + +const PickerContext = React.createContext(null!); + +export default PickerContext; diff --git a/src/NewPicker/PickerInput/hooks/useShowNow.ts b/src/NewPicker/PickerInput/hooks/useShowNow.ts new file mode 100644 index 000000000..c57c3d89a --- /dev/null +++ b/src/NewPicker/PickerInput/hooks/useShowNow.ts @@ -0,0 +1,23 @@ +import type { InternalMode, PanelMode } from '../../interface'; + +export default function useShowNow( + picker: InternalMode, + mode: PanelMode, + showNow?: boolean, + showToday?: boolean, +) { + if (mode !== 'date') { + return false; + } + + if (showNow !== undefined) { + return showNow; + } + + // Compatible with old version `showToday` + if (picker === 'date' && showToday === false) { + return showToday; + } + + return true; +} diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx index 2a351c866..afa6f512e 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames'; import { useEvent } from 'rc-util'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; +import raf from 'rc-util/lib/raf'; import * as React from 'react'; import { PanelContext } from '../../context'; @@ -40,23 +41,29 @@ export default function TimeColumn(props: TimeUnitColumnProps) { clearTimeout(timeoutRef.current!); }; + const scrollRafRef = React.useRef(null); + // Scroll to value position const scrollToValue = useEvent((val: number | string) => { - const ul = ulRef.current!; - const targetLi = ul.querySelector(`[data-value="${val}"]`); + raf.cancel(scrollRafRef.current); + + // Do not trigger realign by this effect scroll + setTimeout(cleanScroll, 100); - if (targetLi) { - const firstLiTop = ul.querySelector(`li`).offsetTop; - const targetLiTop = targetLi.offsetTop; + scrollRafRef.current = raf(() => { + const ul = ulRef.current; + const targetLi = ul?.querySelector(`[data-value="${val}"]`); - const nextTop = targetLiTop - firstLiTop; + if (targetLi) { + const firstLiTop = ul.querySelector(`li`).offsetTop; + const targetLiTop = targetLi.offsetTop; - // IE not support `scrollTo` - ul.scrollTop = nextTop; + const nextTop = targetLiTop - firstLiTop; - // Do not trigger realign by this effect scroll - setTimeout(cleanScroll, 100); - } + // IE not support `scrollTo` + ul.scrollTop = nextTop; + } + }); }); // Effect sync value scroll diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index fa2d14eca..363624b8e 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -9,7 +9,7 @@ import type { PanelMode, SharedTimeProps, } from '../interface'; -import { PrefixClsContext } from '../PickerInput/context'; +import PickerContext from '../PickerInput/context'; import DatePanel from './DatePanel'; import DateTimePanel from './DateTimePanel'; import DecadePanel from './DecadePanel'; @@ -63,10 +63,6 @@ export interface PickerPanelProps { // Components components?: Components; - - // Focus - onFocus?: React.FocusEventHandler; - onBlur?: React.FocusEventHandler; } function PickerPanel( @@ -104,13 +100,9 @@ function PickerPanel( // Components components = {}, - - // Focus - onFocus, - onBlur, } = props; - const mergedPrefixCls = React.useContext(PrefixClsContext) || prefixCls || 'rc-picker'; + const mergedPrefixCls = React.useContext(PickerContext)?.prefixCls || prefixCls || 'rc-picker'; // ========================== Refs ========================== const rootRef = React.useRef(); @@ -174,13 +166,7 @@ function PickerPanel( // ========================= Render ========================= return ( -
          +
          { diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index de3fceebc..538388e46 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -187,7 +187,9 @@ export interface SharedPanelProps { } export type Components = Partial< - Record>> + Record>> & { + button?: React.ComponentType | string; + } >; // ========================= Picker ========================= @@ -210,6 +212,8 @@ export interface SharedPickerProps { generateConfig: GenerateConfig; // Picker + mode?: PanelMode; + onModeChange?: (mode: PanelMode) => void; picker?: PanelMode; showTime?: SharedTimeProps; /** @@ -248,6 +252,18 @@ export interface SharedPickerProps { // Motion transitionName?: string; + + // Render + components?: Components; + /** + * When use `date` picker, + * Show the button to set current datetime. + */ + showNow?: boolean; + /** @deprecated Please use `showNow` instead */ + showToday?: boolean; + panelRender?: (originPanel: React.ReactNode) => React.ReactNode; + renderExtraFooter?: (mode: PanelMode) => React.ReactNode; } export interface PickerRef { From e79e8761a10ca2265de32ffadfc897537281db73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 31 Oct 2023 18:09:25 +0800 Subject: [PATCH 040/380] chore: submit it --- src/NewPicker/PickerInput/RangePicker.tsx | 57 ++++++++++++++++------- 1 file changed, 41 insertions(+), 16 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 1712c2f59..28ea6f15c 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -162,12 +162,36 @@ export default function Picker(props: RangePickerProps const mergedAllowEmpty = separateConfig(allowEmpty, true); // ======================== Value ========================= - const [mergedValue, setMergedValue] = useMergedState(defaultValue, { + const valueConfig = { value, - postState: (valList): RangeValueType => valList || [null, null], - }); + postState: (valList: RangeValueType): RangeValueType => + valList || [null, null], + }; + + // Used for internal value management. + // It should always use `mergedValue` in render logic + const [mergedValue, setMergedValue] = useMergedState(defaultValue, valueConfig); + + // Used for trigger `onChange` event. + // Record current submitted value. + const [submitValue, setSubmitValue] = useMergedState(defaultValue, valueConfig); // ======================== Change ======================== + const getDateTexts = (dateList: RangeValueType) => { + return dateList.map((date) => + date ? generateConfig.locale.format(locale.locale, date, formatList[0]) : '', + ) as [string, string]; + }; + + const isSameDates = (source: RangeValueType, target: RangeValueType) => { + const [prevSubmitStart, prevSubmitEnd] = source; + + const isSameStart = isSameTimestamp(generateConfig, prevSubmitStart, target[0]); + const isSameEnd = isSameTimestamp(generateConfig, prevSubmitEnd, target[1]); + + return [isSameStart && isSameEnd, isSameStart, isSameEnd]; + }; + const triggerChange = ([start, end]: RangeValueType, source?: 'submit') => { const clone: RangeValueType = [start, end]; @@ -176,37 +200,38 @@ export default function Picker(props: RangePickerProps clone.sort((a, b) => (generateConfig.isAfter(a, b) ? 1 : -1)); } - const [prevStart, prevEnd] = mergedValue; - const isSameStart = isSameTimestamp(generateConfig, prevStart, clone[0]); - const isSameEnd = isSameTimestamp(generateConfig, prevEnd, clone[1]); + // Update merged value + const [isSameMergedDates, isSameStart] = isSameDates(mergedValue, clone); - if (!isSameStart || !isSameEnd) { + if (!isSameMergedDates) { setMergedValue(clone); - // >>>>> Batch of change logic - const nextValueTexts = clone.map((date) => - date ? generateConfig.locale.format(locale.locale, date, formatList[0]) : '', - ) as [string, string]; - // Trigger calendar change event if (onCalendarChange) { - onCalendarChange(clone, nextValueTexts, { + onCalendarChange(clone, getDateTexts(clone), { range: isSameStart ? 'end' : 'start', }); } + } + + // Trigger Change event + if (source === 'submit') { + const [isSameSubmitDate] = isSameDates(submitValue, clone); + + if (!isSameSubmitDate) { + setSubmitValue(clone); - // Trigger Change event - if (onChange && source === 'submit') { const startEmpty = !clone[0]; const endEmpty = !clone[1]; if ( + onChange && // Validate start (!startEmpty || mergedAllowEmpty[0]) && // Validate end (!endEmpty || mergedAllowEmpty[1]) ) { - onChange(clone, nextValueTexts); + onChange(clone, getDateTexts(clone)); } } } From e4bf921ce46d02e8440358f9c94608f77b16877e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 1 Nov 2023 09:57:50 +0800 Subject: [PATCH 041/380] chore: support open logic --- src/NewPicker/PickerInput/RangePicker.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 28ea6f15c..92f39bd20 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -122,7 +122,6 @@ export default function Picker(props: RangePickerProps const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, onOpenChange); - // const [mergedOpen, setMergeOpen] = useLockState(open, defaultOpen, onOpenChange); const onSelectorOpenChange: OnOpenChange = (nextOpen, index, config?: OpenConfig) => { setMergeOpen(nextOpen, config); @@ -150,13 +149,6 @@ export default function Picker(props: RangePickerProps } }, [activeIndex, mergedOpen]); - // Trigger if need adjust active - const syncActive = () => { - if (activeList?.length === 1) { - selectorRef.current.focus(activeList[0] === 0 ? 1 : 0); - } - }; - // =================== Disabled & Empty =================== const mergedDisabled = separateConfig(disabled, false); const mergedAllowEmpty = separateConfig(allowEmpty, true); @@ -272,7 +264,16 @@ export default function Picker(props: RangePickerProps } triggerChange(nextValue, 'submit'); - syncActive(); + + // Focus or blur the open panel + const activeLen = activeList?.length; + if (activeLen === 1) { + // Open to the next field + selectorRef.current.focus(activeList[0] === 0 ? 1 : 0); + } else if (activeLen > 1) { + // Close anyway + onSelectorOpenChange(false, activeIndex); + } }; // ======================== Click ========================= From efaa0834b0d09e61523c01a3390926ddf1a90a68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 1 Nov 2023 10:29:09 +0800 Subject: [PATCH 042/380] fix: TimePanel selection logic --- docs/examples/debug.tsx | 6 +- src/NewPicker/PickerInput/Popup/index.tsx | 6 -- src/NewPicker/PickerInput/RangePicker.tsx | 3 + .../TimePanel/TimePanelBody/index.tsx | 65 ++++++++++++++----- src/NewPicker/PickerPanel/TimePanel/index.tsx | 26 +++++--- 5 files changed, 71 insertions(+), 35 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index d793d32cd..158d169eb 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -73,9 +73,9 @@ export default () => {
          {/* */} {/* */}
          {panelNode} - {/* {(extraNode || rangesNode) && ( -
          - {extraNode} - {rangesNode} -
          - )} */}
          diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 92f39bd20..5f7eeefe1 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -125,6 +125,7 @@ export default function Picker(props: RangePickerProps const onSelectorOpenChange: OnOpenChange = (nextOpen, index, config?: OpenConfig) => { setMergeOpen(nextOpen, config); + console.log('asdsadasdasdsa', index); }; // ======================== Active ======================== @@ -317,6 +318,8 @@ export default function Picker(props: RangePickerProps onChange={onPanelChange} mode={mergedMode} onModeChange={setMergedMode} + // Value + value={mergedValue[activeIndex] || null} /> ); diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index fef518dc7..2ba408a9c 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -73,14 +73,21 @@ export default function TimePanelBody(props: SharedTimeProps(props: SharedTimeProps { const hours = generateUnits(0, 23, hourStep, hideDisabledOptions, mergedDisabledHours()); @@ -128,12 +136,14 @@ export default function TimePanelBody(props: SharedTimeProps !isAM(h.value as number)); }, [hour, rowHourUnits, mergedShowMeridiem]); + // Minutes const getMinuteUnits = React.useCallback( (nextHour: number) => generateUnits(0, 59, minuteStep, hideDisabledOptions, mergedDisabledMinutes(nextHour)), [hideDisabledOptions, mergedDisabledMinutes, minuteStep], ); + // Seconds const getSecondUnits = React.useCallback( (nextHour: number, nextMinute: number) => generateUnits( @@ -146,6 +156,7 @@ export default function TimePanelBody(props: SharedTimeProps generateUnits( @@ -159,18 +170,27 @@ export default function TimePanelBody(props: SharedTimeProps getMinuteUnits(hour), [getMinuteUnits, hour]); + // >>> Minutes + const pickerHour = hour ?? rowHourUnits[0].value; + const minuteUnits = React.useMemo(() => getMinuteUnits(pickerHour), [getMinuteUnits, pickerHour]); + // >>> Seconds + const pickerMinute = minute ?? minuteUnits[0].value; const secondUnits = React.useMemo( - () => getSecondUnits(hour, minute), - [getSecondUnits, hour, minute], + () => getSecondUnits(pickerHour, pickerMinute), + [getSecondUnits, pickerHour, pickerMinute], ); + // >>> Milliseconds + const pickerSecond = second ?? secondUnits[0].value; const millisecondUnits = React.useMemo( - () => getMillisecondUnits(hour, minute, second), - [getMillisecondUnits, hour, minute, second], + () => getMillisecondUnits(pickerHour, pickerMinute, pickerSecond), + [getMillisecondUnits, pickerHour, pickerMinute, pickerSecond], ); + const pickerMillisecond = millisecond ?? millisecondUnits[0].value; + + // Meridiem const meridiemUnits = React.useMemo(() => { if (!mergedShowMeridiem) { return []; @@ -223,27 +243,38 @@ export default function TimePanelBody(props: SharedTimeProps { + let tmpl = generateConfig.getNow(); + tmpl = generateConfig.setHour(tmpl, pickerHour); + tmpl = generateConfig.setMinute(tmpl, pickerMinute); + tmpl = generateConfig.setSecond(tmpl, pickerSecond); + tmpl = generateConfig.setMillisecond(tmpl, pickerMillisecond); + + return tmpl; + }, [pickerHour, pickerMinute, pickerSecond, pickerMillisecond, generateConfig]); + const onHourChange = (val: number) => { - triggerChange(generateConfig.setHour(value, val)); + triggerChange(generateConfig.setHour(triggerDateTmpl, val)); }; const onMinuteChange = (val: number) => { - triggerChange(generateConfig.setMinute(value, val)); + triggerChange(generateConfig.setMinute(triggerDateTmpl, val)); }; const onSecondChange = (val: number) => { - triggerChange(generateConfig.setSecond(value, val)); + triggerChange(generateConfig.setSecond(triggerDateTmpl, val)); }; const onMillisecondChange = (val: number) => { - triggerChange(generateConfig.setMillisecond(value, val)); + triggerChange(generateConfig.setMillisecond(triggerDateTmpl, val)); }; const onMeridiemChange = (val: string) => { if (val === 'am' && !isAM(hour)) { - triggerChange(generateConfig.setHour(value, hour - 12)); + triggerChange(generateConfig.setHour(triggerDateTmpl, hour - 12)); } else if (val === 'pm' && isAM(hour)) { - triggerChange(generateConfig.setHour(value, hour + 12)); + triggerChange(generateConfig.setHour(triggerDateTmpl, hour + 12)); } }; diff --git a/src/NewPicker/PickerPanel/TimePanel/index.tsx b/src/NewPicker/PickerPanel/TimePanel/index.tsx index d171009a4..a5dcd4c10 100644 --- a/src/NewPicker/PickerPanel/TimePanel/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/index.tsx @@ -22,27 +22,35 @@ export default function TimePanel(props: SharedPanelProps
          - {mergedValue ? formatTimeStr : '\u00A0'} + + {value + ? formatValue(value, { + locale, + format, + generateConfig, + }) + : '\u00A0'} +
          From 0a6573c79cd707d7a5fd30f6417a9f888028066b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 1 Nov 2023 11:46:51 +0800 Subject: [PATCH 043/380] chore: align with pickerValue --- docs/examples/debug.tsx | 16 ++++-- src/NewPicker/PickerInput/Popup/Footer.tsx | 20 +++---- src/NewPicker/PickerInput/Popup/index.tsx | 3 ++ src/NewPicker/PickerInput/RangePicker.tsx | 18 ++++--- .../PickerPanel/DateTimePanel/index.tsx | 4 +- .../TimePanel/TimePanelBody/index.tsx | 53 +++++++++++++------ src/NewPicker/interface.tsx | 6 +++ 7 files changed, 78 insertions(+), 42 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 158d169eb..d61916437 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -58,7 +58,12 @@ export default () => { console.log('๐Ÿ† Next Open:', nextOpen); }} // open - renderExtraFooter={(mode) => mode} + // renderExtraFooter={(mode) => mode} + components={ + { + // datetime: () => null, + } + } />
          @@ -71,12 +76,17 @@ export default () => {
          - {/* */} + showTime={{ + format: 'HH:mm:ss.SSS', + showTitle: true, + }} + pickerValue={moment('2000-01-01 01:03:05.800')} + /> {/* { renderExtraFooter?: SharedPickerProps['renderExtraFooter']; showNow: boolean; onSubmit: (date?: DateType) => void; + + // Value + value?: DateType; } export default function Footer(props: FooterProps) { - const { mode, internalMode, renderExtraFooter, showNow, onSubmit } = props; + const { mode, internalMode, renderExtraFooter, showNow, onSubmit, value } = props; const { prefixCls, @@ -20,17 +23,6 @@ export default function Footer(props: FooterProps) { button: Button = 'button', } = React.useContext(PickerContext); - //
          {renderExtraFooter(mode)}
          - - { - /* {(extraNode || rangesNode) && ( -
          - {extraNode} - {rangesNode} -
          - )} */ - } - // ======================== Event ========================= const onNow = () => { const now = generateConfig.getNow(); @@ -49,10 +41,12 @@ export default function Footer(props: FooterProps) { ); + const validDate = value && generateConfig.isValidate(value); + const okNode = (internalMode === 'time' || internalMode === 'datetime') && (
          • ); } diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index 2ba408a9c..0d9f8beed 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -79,7 +79,7 @@ export default function TimePanelBody(props: SharedTimeProps(props: SharedTimeProps>> Pick Fallback + const getEnabled = (val: number, pickerVal: number, units: Unit[]) => { + const enabledUnits = units.filter((unit) => !unit.disabled); + + return ( + val ?? + // Fallback to picker value + enabledUnits.find((unit) => unit.value === pickerVal)?.value ?? + // Fallback to enabled value + enabledUnits[0].value ?? + // Fallback to picker value again since not have validate unit + pickerVal + ); + }; + // >>> Minutes - const pickerHour = hour ?? rowHourUnits[0].value; - const minuteUnits = React.useMemo(() => getMinuteUnits(pickerHour), [getMinuteUnits, pickerHour]); + const validHour = getEnabled(hour, generateConfig.getHour(pickerValue), rowHourUnits); + const minuteUnits = React.useMemo(() => getMinuteUnits(validHour), [getMinuteUnits, validHour]); // >>> Seconds - const pickerMinute = minute ?? minuteUnits[0].value; + const validMinute = getEnabled(minute, generateConfig.getMinute(pickerValue), minuteUnits); const secondUnits = React.useMemo( - () => getSecondUnits(pickerHour, pickerMinute), - [getSecondUnits, pickerHour, pickerMinute], + () => getSecondUnits(validHour, validMinute), + [getSecondUnits, validHour, validMinute], ); // >>> Milliseconds - const pickerSecond = second ?? secondUnits[0].value; + const validSecond = getEnabled(second, generateConfig.getSecond(pickerValue), secondUnits); const millisecondUnits = React.useMemo( - () => getMillisecondUnits(pickerHour, pickerMinute, pickerSecond), - [getMillisecondUnits, pickerHour, pickerMinute, pickerSecond], + () => getMillisecondUnits(validHour, validMinute, validSecond), + [getMillisecondUnits, validHour, validMinute, validSecond], ); - const pickerMillisecond = millisecond ?? millisecondUnits[0].value; + const validMillisecond = getEnabled( + millisecond, + generateConfig.getMillisecond(pickerValue), + millisecondUnits, + ); // Meridiem const meridiemUnits = React.useMemo(() => { @@ -210,7 +229,7 @@ export default function TimePanelBody(props: SharedTimeProps !isAM(h.value as number)), + disabled: rowHourUnits.every((h) => h.disabled || !isAM(h.value as number)), }, { label: locale.meridiemFormat @@ -221,7 +240,7 @@ export default function TimePanelBody(props: SharedTimeProps isAM(h.value as number)), + disabled: rowHourUnits.every((h) => h.disabled || isAM(h.value as number)), }, ]; }, [rowHourUnits, mergedShowMeridiem, generateConfig, locale]); @@ -246,13 +265,13 @@ export default function TimePanelBody(props: SharedTimeProps { let tmpl = generateConfig.getNow(); - tmpl = generateConfig.setHour(tmpl, pickerHour); - tmpl = generateConfig.setMinute(tmpl, pickerMinute); - tmpl = generateConfig.setSecond(tmpl, pickerSecond); - tmpl = generateConfig.setMillisecond(tmpl, pickerMillisecond); + tmpl = generateConfig.setHour(tmpl, validHour); + tmpl = generateConfig.setMinute(tmpl, validMinute); + tmpl = generateConfig.setSecond(tmpl, validSecond); + tmpl = generateConfig.setMillisecond(tmpl, validMillisecond); return tmpl; - }, [pickerHour, pickerMinute, pickerSecond, pickerMillisecond, generateConfig]); + }, [validHour, validMinute, validSecond, validMillisecond, generateConfig]); const onHourChange = (val: number) => { triggerChange(generateConfig.setHour(triggerDateTmpl, val)); diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 538388e46..6f54be0e4 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -307,6 +307,12 @@ export interface SelectorProps { onChange: (date: DateType, index?: number) => void; /** When user input invalidate date, keep it in the input field */ preserveInvalidOnBlur?: boolean; + /** + * Trigger change event when click outside to blur. + * This is only affect `datetime` & `time` picker + * which do not have certain end action on the panel cell so need confirm button. + */ + changeOnBlur?: boolean; // Open /** Open index */ From fd35f99ba2519c8f83ab8d1b9b6ba5e8b44ff061 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 1 Nov 2023 14:27:10 +0800 Subject: [PATCH 044/380] chore: keydown --- docs/examples/debug.tsx | 7 ++-- src/NewPicker/PickerInput/Selector/Input.tsx | 14 ++++--- .../TimePanel/TimePanelBody/index.tsx | 41 +++++++++++++------ src/NewPicker/interface.tsx | 3 ++ 4 files changed, 45 insertions(+), 20 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index d61916437..f9388c246 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -76,7 +76,7 @@ export default () => {
          - { showTime={{ format: 'HH:mm:ss.SSS', showTitle: true, + defaultValue: moment('2000-01-01 01:03:05.800'), }} - pickerValue={moment('2000-01-01 01:03:05.800')} - /> + // pickerValue={moment('2000-01-01 01:03:05.800')} + /> */} {/* ((props, ref) => { }); // ======================= Keyboard ======================= + const onSharedKeyDown: React.KeyboardEventHandler = (event) => { + if (event.key === 'Enter') { + onEnter(); + } + }; + const onFormatKeyDown: React.KeyboardEventHandler = (event) => { + onSharedKeyDown(event); + const { key } = event; console.log('key', key); @@ -249,11 +257,6 @@ const Input = React.forwardRef((props, ref) => { nextFillText = offsetCellValue(-1); break; - // =============== Enter ================ - case 'Enter': - onEnter(); - break; - // =============== Number =============== default: if (!isNaN(Number(key))) { @@ -352,6 +355,7 @@ const Input = React.forwardRef((props, ref) => { (props: SharedTimeProps(props: SharedTimeProps>> Pick Fallback - const getEnabled = (val: number, pickerVal: number, units: Unit[]) => { + const getEnabled = (units: Unit[], val: number, defaultVal: number) => { const enabledUnits = units.filter((unit) => !unit.disabled); return ( val ?? // Fallback to picker value - enabledUnits.find((unit) => unit.value === pickerVal)?.value ?? + enabledUnits.find((unit) => unit.value === defaultVal)?.value ?? // Fallback to enabled value enabledUnits[0].value ?? // Fallback to picker value again since not have validate unit - pickerVal + defaultVal ); }; // >>> Minutes - const validHour = getEnabled(hour, generateConfig.getHour(pickerValue), rowHourUnits); + const validHour = getEnabled( + rowHourUnits, + hour, + defaultValue && generateConfig.getHour(defaultValue), + ); const minuteUnits = React.useMemo(() => getMinuteUnits(validHour), [getMinuteUnits, validHour]); // >>> Seconds - const validMinute = getEnabled(minute, generateConfig.getMinute(pickerValue), minuteUnits); + const validMinute = getEnabled( + minuteUnits, + minute, + defaultValue && generateConfig.getMinute(defaultValue), + ); const secondUnits = React.useMemo( () => getSecondUnits(validHour, validMinute), [getSecondUnits, validHour, validMinute], ); // >>> Milliseconds - const validSecond = getEnabled(second, generateConfig.getSecond(pickerValue), secondUnits); + const validSecond = getEnabled( + secondUnits, + second, + defaultValue && generateConfig.getSecond(defaultValue), + ); const millisecondUnits = React.useMemo( () => getMillisecondUnits(validHour, validMinute, validSecond), [getMillisecondUnits, validHour, validMinute, validSecond], ); const validMillisecond = getEnabled( - millisecond, - generateConfig.getMillisecond(pickerValue), millisecondUnits, + millisecond, + defaultValue && generateConfig.getMillisecond(defaultValue), ); // Meridiem @@ -265,10 +279,13 @@ export default function TimePanelBody(props: SharedTimeProps { let tmpl = generateConfig.getNow(); - tmpl = generateConfig.setHour(tmpl, validHour); - tmpl = generateConfig.setMinute(tmpl, validMinute); - tmpl = generateConfig.setSecond(tmpl, validSecond); - tmpl = generateConfig.setMillisecond(tmpl, validMillisecond); + + if (validHour !== undefined) { + tmpl = generateConfig.setHour(tmpl, validHour); + tmpl = generateConfig.setMinute(tmpl, validMinute); + tmpl = generateConfig.setSecond(tmpl, validSecond); + tmpl = generateConfig.setMillisecond(tmpl, validMillisecond); + } return tmpl; }, [validHour, validMinute, validSecond, validMillisecond, generateConfig]); diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 6f54be0e4..e539067f9 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -145,6 +145,9 @@ export interface SharedTimeProps { /** Only work in picker is `time` */ hideDisabledOptions?: boolean; + /** Set default value template when empty selection */ + defaultValue?: DateType; + /** @deprecated Please use `disabledTime` instead. */ disabledHours?: DisabledTimes['disabledHours']; /** @deprecated Please use `disabledTime` instead. */ From 868fec9056d06ab6cc67105574ee3f2fac486cae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 1 Nov 2023 16:02:00 +0800 Subject: [PATCH 045/380] chore: rollback of open --- docs/examples/debug.tsx | 8 +++++++- src/NewPicker/PickerInput/Popup/index.tsx | 6 ++++++ src/NewPicker/PickerInput/RangePicker.tsx | 7 ++++--- src/NewPicker/PickerInput/Selector/Input.tsx | 4 ---- .../PickerInput/Selector/RangeSelector.tsx | 6 ++++++ src/NewPicker/PickerInput/hooks/useLockState.ts | 14 +++++++------- src/NewPicker/PickerInput/hooks/useOpen.ts | 2 +- 7 files changed, 31 insertions(+), 16 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index f9388c246..9fc3400c6 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -40,6 +40,12 @@ export default () => { { + console.log('๐Ÿท Focus!'); + }} + onBlur={() => { + console.log('๐Ÿท Blur!'); + }} // format={{ // format: 'YYYY-MM-DD', // // // format: 'YYYYMMDD', @@ -55,7 +61,7 @@ export default () => { // preserveInvalidOnBlur allowEmpty={[false, true]} onOpenChange={(nextOpen) => { - console.log('๐Ÿ† Next Open:', nextOpen); + console.error('๐Ÿ† Next Open:', nextOpen); }} // open // renderExtraFooter={(mode) => mode} diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index 039647617..beb7178d1 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -25,6 +25,11 @@ export default function Popup(props: PopupProps) { const { prefixCls } = React.useContext(PickerContext); const panelPrefixCls = `${prefixCls}-panel`; + // ======================== Focus ========================= + const onMouseDown: React.MouseEventHandler = (event) => { + event.preventDefault(); + }; + // ======================== Custom ======================== const panelNode = Array.isArray(children) ? (
          {children}
          @@ -71,6 +76,7 @@ export default function Popup(props: PopupProps) { // Used for Today Button style, safe to remove if no need `${prefixCls}-${internalMode}-panel-container`, )} + onMouseDown={onMouseDown} {...divProps} > {mergedNodes} diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 6ca42849a..a6e5afe54 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -279,10 +279,11 @@ export default function Picker(props: RangePickerProps // ======================== Click ========================= const onSelectorClick: React.MouseEventHandler = () => { - // if (focusedIndex === null) { - selectorRef.current.focus(0); + if (focusedIndex === null) { + selectorRef.current.focus(0); + } + setMergeOpen(true); - // } }; // ======================== Panels ======================== diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index fe1f637be..080b2496b 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -155,10 +155,6 @@ const Input = React.forwardRef((props, ref) => { }; const onSharedBlur: React.FocusEventHandler = (event) => { - // if (!preserveInvalidOnBlur) { - // setInputValue(value); - // } - onBlur(event); }; diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 5850a2c32..ef61a1607 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -139,6 +139,12 @@ const RangeSelector = React.forwardRef((props, })} ref={rootRef} onClick={onClick} + // onFocus={() => { + // console.log('my!!! IN', document.activeElement); + // }} + // onBlur={() => { + // console.log('my!!! OUT', document.activeElement); + // }} >
          {separator}
          diff --git a/src/NewPicker/PickerInput/hooks/useLockState.ts b/src/NewPicker/PickerInput/hooks/useLockState.ts index c12414dd1..fc3507d81 100644 --- a/src/NewPicker/PickerInput/hooks/useLockState.ts +++ b/src/NewPicker/PickerInput/hooks/useLockState.ts @@ -7,17 +7,17 @@ import * as React from 'react'; * Will be `true` immediately for setState. * But will be `false` for a requestAnimationFrame. */ -export default function useLockState( - value: boolean, - defaultValue?: boolean, - onChange?: (next: boolean) => void, -): [state: boolean, setState: (nextState: boolean) => void] { - const [state, setState] = useMergedState(defaultValue || false, { +export default function useLockState( + value: T, + defaultValue?: T, + onChange?: (next: T) => void, +): [state: T, setState: (nextState: T) => void] { + const [state, setState] = useMergedState(defaultValue, { value, }); const rafRef = React.useRef(null); - const updateValue = useEvent((next: boolean) => { + const updateValue = useEvent((next: T) => { raf.cancel(rafRef.current); if (next) { diff --git a/src/NewPicker/PickerInput/hooks/useOpen.ts b/src/NewPicker/PickerInput/hooks/useOpen.ts index 6f7a1cd5f..fb7eb0be7 100644 --- a/src/NewPicker/PickerInput/hooks/useOpen.ts +++ b/src/NewPicker/PickerInput/hooks/useOpen.ts @@ -11,7 +11,7 @@ export default function useOpen( onOpenChange?: (open: boolean) => void, ): [open: boolean, setOpen: (open: boolean, config?: OpenConfig) => void] { // Delay for handle the open state, in case fast shift from `open` -> `close` -> `open` - const [rafOpen, setRafOpen] = useLockState(open, defaultOpen, onOpenChange); + const [rafOpen, setRafOpen] = useLockState(open, defaultOpen || false, onOpenChange); function setOpen(next: boolean, config: OpenConfig = {}) { if (!config.inherit || rafOpen) { From c75eef398f4777957294a7bcdbd86517311a2912 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 1 Nov 2023 16:07:21 +0800 Subject: [PATCH 046/380] feat: connect focus --- docs/examples/debug.tsx | 2 +- src/NewPicker/PickerInput/RangePicker.tsx | 12 ++++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 9fc3400c6..f3030c7c9 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -61,7 +61,7 @@ export default () => { // preserveInvalidOnBlur allowEmpty={[false, true]} onOpenChange={(nextOpen) => { - console.error('๐Ÿ† Next Open:', nextOpen); + console.log('๐Ÿ† Next Open:', nextOpen); }} // open // renderExtraFooter={(mode) => mode} diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index a6e5afe54..94c35162d 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -96,6 +96,10 @@ export default function Picker(props: RangePickerProps suffixIcon, direction, + // Focus + onFocus, + onBlur, + // Render components = {}, } = props; @@ -246,14 +250,18 @@ export default function Picker(props: RangePickerProps }; // ==================== Selector Focus ==================== - const onSelectorFocus: SelectorProps['onFocus'] = (_, index) => { + const onSelectorFocus: SelectorProps['onFocus'] = (event, index) => { setActiveIndex(index); setFocused(true); + + onFocus?.(event); }; - const onSelectorBlur: SelectorProps['onBlur'] = () => { + const onSelectorBlur: SelectorProps['onBlur'] = (event) => { setFocused(false); triggerChange(mergedValue, 'submit'); + + onBlur?.(event); }; // ======================== Submit ======================== From 139748fa8fbebb32927c3a8424345edfcf5c3545 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 1 Nov 2023 17:12:50 +0800 Subject: [PATCH 047/380] chore: use one change --- docs/examples/debug.tsx | 12 ++-- src/NewPicker/PickerInput/Popup/index.tsx | 2 +- src/NewPicker/PickerInput/RangePicker.tsx | 58 ++++++++++++-------- src/NewPicker/PickerInput/Selector/Input.tsx | 4 +- src/NewPicker/PickerTrigger/index.tsx | 17 +++++- src/NewPicker/interface.tsx | 12 ++-- 6 files changed, 66 insertions(+), 39 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index f3030c7c9..03dc0bda3 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -46,11 +46,13 @@ export default () => { onBlur={() => { console.log('๐Ÿท Blur!'); }} - // format={{ - // format: 'YYYY-MM-DD', - // // // format: 'YYYYMMDD', - // align: true, - // }} + changeOnBlur + format={{ + // format: 'YYYY-MM-DD', + format: 'YYYY-MM-DD HH:mm:ss.SSS', + // // format: 'YYYYMMDD', + // align: true, + }} showTime={{}} onChange={(val, text) => { console.log('๐Ÿ”ฅ Change:', val, text); diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index beb7178d1..8233c714d 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -76,7 +76,7 @@ export default function Popup(props: PopupProps) { // Used for Today Button style, safe to remove if no need `${prefixCls}-${internalMode}-panel-container`, )} - onMouseDown={onMouseDown} + // onMouseDown={onMouseDown} {...divProps} > {mergedNodes} diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 94c35162d..df111ceda 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -64,6 +64,7 @@ export default function Picker(props: RangePickerProps defaultValue, onChange, onCalendarChange, + changeOnBlur, order = true, @@ -210,30 +211,30 @@ export default function Picker(props: RangePickerProps } } - // Trigger Change event + // Update `submitValue` to trigger event by effect if (source === 'submit') { - const [isSameSubmitDate] = isSameDates(submitValue, clone); - - if (!isSameSubmitDate) { - setSubmitValue(clone); - - const startEmpty = !clone[0]; - const endEmpty = !clone[1]; - - if ( - onChange && - // Validate start - (!startEmpty || mergedAllowEmpty[0]) && - // Validate end - (!endEmpty || mergedAllowEmpty[1]) - ) { - onChange(clone, getDateTexts(clone)); - } + setSubmitValue(clone); + + // Trigger `onChange` if needed + const [isSameSubmitDates] = isSameDates(submitValue, clone); + + const startEmpty = !clone[0]; + const endEmpty = !clone[1]; + + if ( + onChange && + !isSameSubmitDates && + // Validate start + (!startEmpty || mergedAllowEmpty[0]) && + // Validate end + (!endEmpty || mergedAllowEmpty[1]) + ) { + onChange(clone, getDateTexts(clone)); } } }; - const fillValue = (date: DateType, index: number) => { + const fillMergedValue = (date: DateType, index: number) => { // Trigger change only when date changed const [prevStart, prevEnd] = mergedValue; @@ -244,7 +245,7 @@ export default function Picker(props: RangePickerProps }; const onSelectorChange = (date: DateType, index: number) => { - const clone = fillValue(date, index); + const clone = fillMergedValue(date, index); triggerChange(clone); }; @@ -259,6 +260,8 @@ export default function Picker(props: RangePickerProps const onSelectorBlur: SelectorProps['onBlur'] = (event) => { setFocused(false); + + // Always trigger submit since input is always means confirm triggerChange(mergedValue, 'submit'); onBlur?.(event); @@ -269,7 +272,7 @@ export default function Picker(props: RangePickerProps let nextValue = mergedValue; if (date) { - nextValue = fillValue(date, activeIndex); + nextValue = fillMergedValue(date, activeIndex); } triggerChange(nextValue, 'submit'); @@ -311,6 +314,15 @@ export default function Picker(props: RangePickerProps triggerChange(clone); }; + const onPopupClose = () => { + if (changeOnBlur) { + triggerChange(mergedValue, 'submit'); + } + + // Close popup + setMergeOpen(false); + }; + const panelValue = mergedValue[activeIndex] || null; const panel = ( @@ -352,7 +364,6 @@ export default function Picker(props: RangePickerProps return ( (props: RangePickerProps transitionName={transitionName} popupPlacement={popupPlacement} direction={direction} + // Visible + visible={mergedOpen} + onClose={onPopupClose} > ((props, ref) => { // ======================== Active ======================== // Check if blur need reset input value useLockEffect(active, () => { - if (!active && format && (internalInputValue === format || !preserveInvalidOnBlur)) { - triggerInputChange(value); + if (!active && !preserveInvalidOnBlur) { + setInputValue(value); } }); diff --git a/src/NewPicker/PickerTrigger/index.tsx b/src/NewPicker/PickerTrigger/index.tsx index 1728f4ef3..be3eec243 100644 --- a/src/NewPicker/PickerTrigger/index.tsx +++ b/src/NewPicker/PickerTrigger/index.tsx @@ -42,7 +42,6 @@ const BUILT_IN_PLACEMENTS = { type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; export type PickerTriggerProps = { - visible: boolean; popupElement: React.ReactElement; popupStyle?: React.CSSProperties; children: React.ReactElement; @@ -53,12 +52,15 @@ export type PickerTriggerProps = { range?: boolean; popupPlacement?: Placement; direction?: 'ltr' | 'rtl'; + + // Visible + visible: boolean; + onClose: () => void; }; function PickerTrigger({ popupElement, popupStyle, - visible, popupClassName, popupAlign, transitionName, @@ -67,6 +69,10 @@ function PickerTrigger({ range, popupPlacement, direction, + + // Visible + visible, + onClose, }: PickerTriggerProps) { const { prefixCls } = React.useContext(PickerContext); const dropdownPrefixCls = `${prefixCls}-dropdown`; @@ -81,7 +87,7 @@ function PickerTrigger({ return ( { + if (!nextVisible) { + onClose(); + } + }} > {children} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index e539067f9..c0b4aa3b9 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -252,6 +252,12 @@ export interface SharedPickerProps { onOpenChange?: (open: boolean) => void; popupAlign?: AlignType; getPopupContainer?: (node: HTMLElement) => HTMLElement; + /** + * Trigger change event when click outside panel to blur. + * This is only affect `datetime` & `time` picker + * which do not have certain end action on the panel cell so need confirm button. + */ + changeOnBlur?: boolean; // Motion transitionName?: string; @@ -310,12 +316,6 @@ export interface SelectorProps { onChange: (date: DateType, index?: number) => void; /** When user input invalidate date, keep it in the input field */ preserveInvalidOnBlur?: boolean; - /** - * Trigger change event when click outside to blur. - * This is only affect `datetime` & `time` picker - * which do not have certain end action on the panel cell so need confirm button. - */ - changeOnBlur?: boolean; // Open /** Open index */ From e403c59019a1b8bbef702b5d7e55af6dcc697676 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 1 Nov 2023 17:34:08 +0800 Subject: [PATCH 048/380] fix: panel event --- docs/examples/debug.tsx | 4 +-- src/NewPicker/PickerInput/Popup/Footer.tsx | 9 ++++--- src/NewPicker/PickerInput/Popup/index.tsx | 21 +++------------ src/NewPicker/PickerInput/RangePicker.tsx | 17 +++++++++--- src/NewPicker/PickerPanel/index.tsx | 31 +++++++++++++++++++--- 5 files changed, 52 insertions(+), 30 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 03dc0bda3..c08b71a4e 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -48,8 +48,8 @@ export default () => { }} changeOnBlur format={{ - // format: 'YYYY-MM-DD', - format: 'YYYY-MM-DD HH:mm:ss.SSS', + format: 'YYYY-MM-DD', + // format: 'YYYY-MM-DD HH:mm:ss.SSS', // // format: 'YYYYMMDD', // align: true, }} diff --git a/src/NewPicker/PickerInput/Popup/Footer.tsx b/src/NewPicker/PickerInput/Popup/Footer.tsx index a1b0003c0..6d4dc8c9d 100644 --- a/src/NewPicker/PickerInput/Popup/Footer.tsx +++ b/src/NewPicker/PickerInput/Popup/Footer.tsx @@ -7,14 +7,17 @@ export interface FooterProps { internalMode: InternalMode; renderExtraFooter?: SharedPickerProps['renderExtraFooter']; showNow: boolean; - onSubmit: (date?: DateType) => void; // Value value?: DateType; + + // Submit + onSubmit: (date?: DateType) => void; + needConfirm: boolean; } export default function Footer(props: FooterProps) { - const { mode, internalMode, renderExtraFooter, showNow, onSubmit, value } = props; + const { mode, internalMode, renderExtraFooter, showNow, onSubmit, value, needConfirm } = props; const { prefixCls, @@ -43,7 +46,7 @@ export default function Footer(props: FooterProps) { const validDate = value && generateConfig.isValidate(value); - const okNode = (internalMode === 'time' || internalMode === 'datetime') && ( + const okNode = needConfirm && (
        • @@ -74,7 +57,7 @@ function PanelHeader(props: HeaderProps) { onClick={() => onOffset(-1)} tabIndex={-1} className={`${headerPrefixCls}-prev-btn`} - // style={hidePrevBtn ? HIDDEN_STYLE : {}} + style={hidePrev ? HIDDEN_STYLE : {}} > {prevIcon} @@ -86,7 +69,7 @@ function PanelHeader(props: HeaderProps) { onClick={() => onOffset(1)} tabIndex={-1} className={`${headerPrefixCls}-next-btn`} - // style={hideNextBtn ? HIDDEN_STYLE : {}} + style={hideNext ? HIDDEN_STYLE : {}} > {nextIcon} @@ -97,7 +80,7 @@ function PanelHeader(props: HeaderProps) { onClick={() => onSuperOffset(1)} tabIndex={-1} className={`${headerPrefixCls}-super-next-btn`} - // style={hideNextBtn ? HIDDEN_STYLE : {}} + style={hideNext ? HIDDEN_STYLE : {}} > {superNextIcon} diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index cca0c6d09..c8027d816 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -58,3 +58,14 @@ export function useInfo( return [info, now]; } + +// ============================== Internal ============================== +export interface PickerHackContextProps { + hidePrev?: boolean; + hideNext?: boolean; +} + +/** + * Internal usage for RangePicker to not to show the operation arrow + */ +export const PickerHackContext = React.createContext({}); From 7d78dfe02404a790afb71e241415a227254196f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 6 Nov 2023 17:45:06 +0800 Subject: [PATCH 067/380] fix: click to select but close without confirm --- docs/examples/debug.tsx | 2 +- src/NewPicker/PickerInput/RangePicker.tsx | 9 +++++++-- .../PickerInput/hooks/useRangeValue.ts | 20 ++++++++++++------- 3 files changed, 21 insertions(+), 10 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index da0e3dbbf..7f7514a7b 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -71,7 +71,7 @@ export default () => { // align: true, }} // preserveInvalidOnBlur - // showTime={{}} + showTime={{}} onChange={(val, text) => { console.log('๐Ÿ”ฅ Change:', val, text); setRangeValue(val); diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 21c83b45b..aafb17b09 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -182,6 +182,7 @@ export default function Picker(props: RangePickerProps // When click outside to close the panel, trigger event if it can trigger onChange. const [activeIndex, setActiveIndex] = React.useState(null); const [focused, setFocused] = React.useState(false); + const blurRef = React.useRef<'input' | 'panel'>(null); const focusedIndex = focused ? activeIndex : null; @@ -212,14 +213,16 @@ export default function Picker(props: RangePickerProps const [calendarValue, triggerCalendarChange, triggerSubmitChange] = useRangeValue( { ...props, - formatList, allowEmpty: mergedAllowEmpty, - focused, order, picker, }, + formatList, + focused, + blurRef, orderOnChange, isInvalidateDate, + needConfirm, ); // ===================== DisabledDate ===================== @@ -302,6 +305,7 @@ export default function Picker(props: RangePickerProps }; const onSelectorBlur: SelectorProps['onBlur'] = (event) => { + blurRef.current = 'input'; setFocused(false); // Always trigger submit since input is always means confirm @@ -384,6 +388,7 @@ export default function Picker(props: RangePickerProps }; const onPanelBlur: React.FocusEventHandler = () => { + blurRef.current = 'panel'; setFocused(false); }; diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 814ab603d..93ab83c51 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -23,12 +23,13 @@ export default function useRangeValue( | 'onChange' | 'preserveInvalidOnBlur' | 'picker' - > & { - formatList: string[]; - focused: boolean; - }, + >, + formatList: string[], + focused: boolean, + blurRef: React.RefObject<'input' | 'panel'>, orderOnChange: boolean, isInvalidateDate: (date: DateType) => boolean, + needConfirm: boolean, ): [ calendarValue: RangeValueType, triggerCalendarChange: TriggerChange, @@ -38,7 +39,6 @@ export default function useRangeValue( // MISC generateConfig, locale, - formatList, picker, @@ -49,7 +49,6 @@ export default function useRangeValue( onChange, // Focus - focused, preserveInvalidOnBlur, // Checker @@ -187,7 +186,14 @@ export default function useRangeValue( // ============================ Effect ============================ useLockEffect(focused, () => { if (!focused) { - triggerSubmit(); + // If panel no need panel confirm or last blur is not from panel + // Trigger submit + if (!needConfirm || blurRef.current !== 'panel') { + triggerSubmit(); + } else { + // Else should reset `calendarValue` to `submitValue` + setCalendarValue(submitValue); + } } }); From 2fbdb1f1313c022c9323c4e9cc9300e629a8a0b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 6 Nov 2023 19:00:13 +0800 Subject: [PATCH 068/380] chore: bump rc-util --- package.json | 2 +- src/NewPicker/PickerInput/hooks/useLockState.ts | 17 ++++++++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 462e1ff4c..8dea0d483 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@babel/runtime": "^7.10.1", "@rc-component/trigger": "^1.5.0", "classnames": "^2.2.1", - "rc-util": "^5.30.0" + "rc-util": "^5.38.1" }, "engines": { "node": ">=8.x" diff --git a/src/NewPicker/PickerInput/hooks/useLockState.ts b/src/NewPicker/PickerInput/hooks/useLockState.ts index fc3507d81..53c15b20c 100644 --- a/src/NewPicker/PickerInput/hooks/useLockState.ts +++ b/src/NewPicker/PickerInput/hooks/useLockState.ts @@ -38,18 +38,25 @@ export default function useLockState( return [state, updateValue]; } -export function useLockEffect(value: boolean, onChange: (next: boolean) => void) { +/** + * Trigger `callback` immediately when `condition` is `true`. + * But trigger `callback` in next frame when `condition` is `false`. + */ +export function useLockEffect( + condition: boolean, + callback: (next: boolean) => void, +) { useLayoutUpdateEffect(() => { - if (value) { - onChange(value); + if (condition) { + callback(condition); } else { const id = raf(() => { - onChange(value); + callback(condition); }); return () => { raf.cancel(id); }; } - }, [value]); + }, [condition]); } From fedcaea497dee0e5945da8d9d98dc63b353c7508 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 7 Nov 2023 15:02:40 +0800 Subject: [PATCH 069/380] feat: add quarter --- docs/examples/debug.tsx | 16 +-- .../PickerInput/hooks/useRangePickerValue.ts | 7 +- .../PickerInput/hooks/useRangeValue.ts | 2 +- src/NewPicker/PickerPanel/DatePanel/index.tsx | 3 +- .../PickerPanel/QuarterPanel/index.tsx | 97 +++++++++++++++++++ src/NewPicker/PickerPanel/WeekPanel/index.tsx | 2 +- src/NewPicker/PickerPanel/index.tsx | 2 + src/NewPicker/interface.tsx | 2 + 8 files changed, 117 insertions(+), 14 deletions(-) create mode 100644 src/NewPicker/PickerPanel/QuarterPanel/index.tsx diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 7f7514a7b..fda116935 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -38,7 +38,7 @@ export default () => { // has end // [null, moment('2023-11-15')], // [moment('2023-11-5'), moment('2023-12-29')], - [moment('2023-11-5'), moment('2132-12-29')], + // [moment('2023-11-5'), moment('2132-12-29')], ); return ( @@ -47,7 +47,7 @@ export default () => {
          { // console.log('๐Ÿท Blur!'); // }} // changeOnBlur - format={{ - format: 'YYYY-MM-DD', - // format: 'YYYY-MM-DD HH:mm:ss.SSS', - // // format: 'YYYYMMDD', - // align: true, - }} + // format={{ + // format: 'YYYY-MM-DD', + // // format: 'YYYY-MM-DD HH:mm:ss.SSS', + // // // format: 'YYYYMMDD', + // // align: true, + // }} // preserveInvalidOnBlur showTime={{}} onChange={(val, text) => { diff --git a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts index 258d9097b..cc1c08b5f 100644 --- a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts @@ -1,5 +1,5 @@ import { useMergedState } from 'rc-util'; -import * as React from 'react'; +import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import type { GenerateConfig } from '../../../generate'; import { isSame } from '../../../utils/dateUtil'; import type { InternalMode, Locale, PanelMode } from '../../interface'; @@ -13,6 +13,7 @@ export function offsetPanelDate( ) { switch (picker) { case 'date': + case 'week': return generateConfig.addMonth(date, offset); case 'month': @@ -114,7 +115,7 @@ export default function useRangePickerValue( }; // >>> calendarValue: Sync with `calendarValue` if changed - React.useEffect(() => { + useLayoutEffect(() => { if (open) { if (activeIndex === 0 && calendarValue[0]) { setCurrentPickerValue(calendarValue[0], 'reset'); @@ -129,7 +130,7 @@ export default function useRangePickerValue( }, [open, calendarValue, activeIndex]); // >>> defaultPickerValue: Resync to `defaultPickerValue` for each panel focused - React.useEffect(() => { + useLayoutEffect(() => { if (open && defaultPickerValue) { if (activeIndex === 0 && defaultPickerValue[0]) { setCurrentPickerValue(defaultPickerValue[0], 'reset'); diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 93ab83c51..f0388adb0 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -200,7 +200,7 @@ export default function useRangeValue( // When blur & invalid, restore to empty one // This is used for typed only one input React.useEffect(() => { - if (!lastSubmitResult[0] && !preserveInvalidOnBlur) { + if (!lastSubmitResult[0] && !preserveInvalidOnBlur && value) { triggerCalendarChange(value); } }, [lastSubmitResult]); diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index 0a7e96268..ef18492bb 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -76,7 +76,8 @@ export default function DatePanel(props: DatePanelProps ({ [`${prefixCls}-cell-in-view`]: isSameMonth(generateConfig, date, pickerValue), [`${prefixCls}-cell-today`]: isSameDate(generateConfig, date, now), - [`${prefixCls}-cell-selected`]: !hoverValue && isSameDate(generateConfig, date, value), + [`${prefixCls}-cell-selected`]: + !hoverValue && mode !== 'week' && isSameDate(generateConfig, date, value), }); // ========================= Header ========================= diff --git a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx new file mode 100644 index 000000000..f8760af5d --- /dev/null +++ b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx @@ -0,0 +1,97 @@ +import * as React from 'react'; +import { formatValue, isSameQuarter } from '../../../utils/dateUtil'; +import type { SharedPanelProps } from '../../interface'; +import { PanelContext, useInfo } from '../context'; +import PanelBody from '../PanelBody'; +import PanelHeader from '../PanelHeader'; + +export default function QuarterPanel(props: SharedPanelProps) { + const { + prefixCls, + locale, + generateConfig, + pickerValue, + value, + onPickerValueChange, + onModeChange, + hoverValue, + } = props; + + const panelPrefixCls = `${prefixCls}-quarter-panel`; + + // ========================== Base ========================== + const [info, now] = useInfo(props); + const baseDate = generateConfig.setMonth(pickerValue, 0); + + // ========================= Cells ========================== + const getCellDate = (date: DateType, offset: number) => { + return generateConfig.addMonth(date, offset * 3); + }; + + const getCellText = (date: DateType) => { + return formatValue(date, { + locale, + format: locale.quarterCellFormat || '[Q]Q', + generateConfig, + }); + }; + + const getCellClassName = (date: DateType) => ({ + [`${prefixCls}-cell-in-view`]: true, + [`${prefixCls}-cell-today`]: isSameQuarter(generateConfig, date, now), + [`${prefixCls}-cell-selected`]: !hoverValue && isSameQuarter(generateConfig, date, value), + }); + + // ========================= Header ========================= + const yearNode: React.ReactNode = ( + + ); + + // ========================= Render ========================= + return ( + +
          + {/* Header */} + { + onPickerValueChange(generateConfig.addYear(pickerValue, offset)); + }} + > + {yearNode} + + + {/* Body */} + +
          +           + ); +} diff --git a/src/NewPicker/PickerPanel/WeekPanel/index.tsx b/src/NewPicker/PickerPanel/WeekPanel/index.tsx index 99ed22df5..d3c46a6a9 100644 --- a/src/NewPicker/PickerPanel/WeekPanel/index.tsx +++ b/src/NewPicker/PickerPanel/WeekPanel/index.tsx @@ -70,7 +70,7 @@ export default function WeekPanel(props: SharedPanelProps Date: Tue, 7 Nov 2023 15:04:05 +0800 Subject: [PATCH 070/380] chore: locale test --- docs/examples/debug.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index fda116935..fdcd838ad 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import '../../assets/index.less'; -import type { PickerRef } from '../../src/NewPicker/interface'; +import type { Locale, PickerRef } from '../../src/NewPicker/interface'; import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import PickerPanel, { type PickerPanelProps } from '../../src/NewPicker/PickerPanel'; @@ -12,8 +12,10 @@ import zhCN from '../../src/locale/zh_CN'; moment.locale('zh-cn'); window.moment = moment; +const myLocale: Locale = { ...zhCN, quarterCellFormat: '็ฌฌQๅญฃๅบฆ' }; + const sharedLocale = { - locale: zhCN, + locale: myLocale, generateConfig: momentGenerateConfig, }; @@ -32,14 +34,13 @@ export default () => { const singleRef = React.useRef(null); const [value, setValue] = React.useState(null); - const [rangeValue, setRangeValue] = React.useState<[Moment?, Moment?]>( - // // has start - // [moment('2023-11-15'), null], - // has end - // [null, moment('2023-11-15')], - // [moment('2023-11-5'), moment('2023-12-29')], - // [moment('2023-11-5'), moment('2132-12-29')], - ); + const [rangeValue, setRangeValue] = React.useState<[Moment?, Moment?]>(); + // // has start + // [moment('2023-11-15'), null], + // has end + // [null, moment('2023-11-15')], + // [moment('2023-11-5'), moment('2023-12-29')], + // [moment('2023-11-5'), moment('2132-12-29')], return (
          From 0567aa53648bd41830baa1b69b9e4e77cc3a2644 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 7 Nov 2023 17:19:37 +0800 Subject: [PATCH 071/380] chore: presets --- docs/examples/debug.tsx | 16 +- .../PickerInput/Popup/PresetPanel.tsx | 46 +++ src/NewPicker/PickerInput/Popup/index.tsx | 36 ++- src/NewPicker/PickerInput/RangePicker.tsx | 73 ++++- src/NewPicker/PickerInput/Selector/Input.tsx | 1 + src/NewPicker/PickerInput/hooks/usePresets.ts | 25 ++ src/NewPicker/index.tsx | 2 + src/NewPicker/interface.tsx | 5 + tests/range.spec.tsx | 296 +++++++++--------- tests/util/commonUtil.tsx | 35 ++- 10 files changed, 340 insertions(+), 195 deletions(-) create mode 100644 src/NewPicker/PickerInput/Popup/PresetPanel.tsx create mode 100644 src/NewPicker/PickerInput/hooks/usePresets.ts diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index fdcd838ad..443d25bbd 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -35,7 +35,7 @@ export default () => { const [value, setValue] = React.useState(null); const [rangeValue, setRangeValue] = React.useState<[Moment?, Moment?]>(); - // // has start + // has start // [moment('2023-11-15'), null], // has end // [null, moment('2023-11-15')], @@ -48,8 +48,18 @@ export default () => {
          { @@ -72,7 +82,7 @@ export default () => { // // align: true, // }} // preserveInvalidOnBlur - showTime={{}} + // showTime={{}} onChange={(val, text) => { console.log('๐Ÿ”ฅ Change:', val, text); setRangeValue(val); diff --git a/src/NewPicker/PickerInput/Popup/PresetPanel.tsx b/src/NewPicker/PickerInput/Popup/PresetPanel.tsx new file mode 100644 index 000000000..d145cdcc5 --- /dev/null +++ b/src/NewPicker/PickerInput/Popup/PresetPanel.tsx @@ -0,0 +1,46 @@ +import * as React from 'react'; +import type { ValueDate } from '../../interface'; + +export interface PresetPanelProps { + prefixCls: string; + presets: ValueDate[]; + onClick: (value: ValueType) => void; + onHover: (value: ValueType) => void; +} + +function executeValue(value: ValueDate['value']): ValueType { + return typeof value === 'function' ? value() : value; +} + +export default function PresetPanel( + props: PresetPanelProps, +) { + const { prefixCls, presets, onClick, onHover } = props; + + if (!presets.length) { + return null; + } + + return ( +
          +
            + {presets.map(({ label, value }, index) => ( +
          • { + onClick(executeValue(value)); + }} + onMouseEnter={() => { + onHover(executeValue(value)); + }} + onMouseLeave={() => { + onHover(null); + }} + > + {label} +
            • + ))} +
          +
          + ); +} diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index ba8f15a98..079cfef48 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -1,20 +1,32 @@ import classNames from 'classnames'; import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; -import type { SharedPickerProps } from '../../interface'; +import type { SharedPickerProps, ValueDate } from '../../interface'; import PickerContext from '../context'; import Footer, { type FooterProps } from './Footer'; import PopupPanel, { type PopupPanelProps } from './PopupPanel'; +import PresetPanel from './PresetPanel'; -export interface PopupProps +export interface PopupProps extends Pick, 'onFocus' | 'onBlur'>, FooterProps, PopupPanelProps { panelRender?: SharedPickerProps['panelRender']; + presets: ValueDate[]; + onPresetHover: (presetValue: PresetValue) => void; } export default function Popup(props: PopupProps) { - const { panelRender, internalMode, picker, showNow, multiple, ...restProps } = props; + const { + panelRender, + internalMode, + picker, + showNow, + multiple, + presets, + onPresetHover, + ...restProps + } = props; const { prefixCls } = React.useContext(PickerContext); const panelPrefixCls = `${prefixCls}-panel`; @@ -22,17 +34,15 @@ export default function Popup(props: PopupProps) { // ======================== Custom ======================== let mergedNodes: React.ReactNode = (
          - {/* { - triggerChange(nextValue, null); - triggerOpen(false, mergedActivePickerIndex, 'preset'); - }} - onHover={(hoverValue) => { - setRangeHoverValue(hoverValue); - }} - /> */} + presets={presets} + // onClick={(nextValue) => { + // triggerChange(nextValue, null); + // triggerOpen(false, mergedActivePickerIndex, 'preset'); + // }} + onHover={onPresetHover} + />
          diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index aafb17b09..ba07a8589 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -8,6 +8,7 @@ import type { SelectorProps, SelectorRef, SharedPickerProps, + ValueDate, } from '../interface'; import type { PickerPanelProps } from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; @@ -15,6 +16,7 @@ import PickerContext from './context'; import { useFieldFormat } from './hooks/useFieldFormat'; import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; +import usePresets from './hooks/usePresets'; import useRangeDisabledDate from './hooks/useRangeDisabledDate'; import useRangePickerValue from './hooks/useRangePickerValue'; import useRangeValue from './hooks/useRangeValue'; @@ -76,6 +78,14 @@ export interface RangePickerProps extends SharedPickerProps /** Default will always order of selection after submit */ order?: boolean; + // Preset + presets?: ValueDate, null>>[]; + /** @deprecated Please use `presets` instead */ + ranges?: Record< + string, + Exclude, null> | (() => Exclude, null>) + >; + // Control disabled?: boolean | [boolean, boolean]; allowEmpty?: [boolean, boolean]; @@ -134,6 +144,10 @@ export default function Picker(props: RangePickerProps onFocus, onBlur, + // Presets + presets, + ranges, + // Render components = {}, } = props; @@ -353,32 +367,54 @@ export default function Picker(props: RangePickerProps }; // ======================== Hover ========================= - const hoverLockRef = React.useRef(false); - const [hoverDate, setHoverDate] = React.useState(null); + // const hoverLockRef = React.useRef(false); - // Lock `hoverDate` replacement to improve user experience - // When select the first date and change to next, - // it will still show the prev hover date till user hover to other cell. - React.useMemo(() => { - hoverLockRef.current = true; - }, [activeIndex]); + const [internalHoverValues, setInternalHoverValues] = + React.useState>(null); + + const onPresetHover = (nextValues: RangeValueType | null) => { + setInternalHoverValues(nextValues); + }; + + // const [hoverDate, setHoverDate] = React.useState(null); + + // // Lock `hoverDate` replacement to improve user experience + // // When select the first date and change to next, + // // it will still show the prev hover date till user hover to other cell. + // React.useMemo(() => { + // hoverLockRef.current = true; + // }, [activeIndex]); const hoverValues = React.useMemo(() => { - const clone: RangeValueType = [...calendarValue]; + // const clone: RangeValueType = [...calendarValue]; - if (hoverDate && !hoverLockRef.current) { - clone[activeIndex] = hoverDate; - } + // if (hoverDate && !hoverLockRef.current) { + // clone[activeIndex] = hoverDate; + // } - return clone; - }, [calendarValue, hoverDate, activeIndex]); + // if (internalHoverValues?.[activeIndex] && !hoverLockRef.current) { + // clone[activeIndex] = internalHoverValues[activeIndex]; + // } + + const clone = [...(internalHoverValues || calendarValue)].filter( + (n) => n, + ) as RangeValueType; + + return clone.sort((a, b) => (generateConfig.isAfter(b, a) ? -1 : 1)); + }, [calendarValue, internalHoverValues, generateConfig]); // ======================================================== // == Panels == // ======================================================== + + // ======================= Presets ======================== + const presetList = usePresets(presets, ranges); + + // ======================== Panel ========================= const onPanelHover = (date: DateType) => { - setHoverDate(date); - hoverLockRef.current = false; + // setHoverDate(date); + setInternalHoverValues(date ? fillMergedValue(date, activeIndex) : null); + // hoverLockRef.current = false; }; // >>> Focus @@ -445,9 +481,12 @@ export default function Picker(props: RangePickerProps //Hover hoverValue={hoverValues} onHover={onPanelHover} + onPresetHover={onPresetHover} // Submit needConfirm={needConfirm} onSubmit={triggerChangeAndFocusNext} + // Preset + presets={presetList} /> ); @@ -488,7 +527,7 @@ export default function Picker(props: RangePickerProps suffixIcon={suffixIcon} // Active activeIndex={focusedIndex} - activeHelp={!!hoverDate} + activeHelp={!!internalHoverValues} onFocus={onSelectorFocus} onBlur={onSelectorBlur} onSubmit={triggerChangeAndFocusNext} diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 20facdabb..d6c85593d 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -30,6 +30,7 @@ export interface InputProps extends Omit void; onEnter: VoidFunction; + /** Meaning current is from the hover cell getting the placeholder text */ helped?: boolean; /** * Trigger when input need additional help. diff --git a/src/NewPicker/PickerInput/hooks/usePresets.ts b/src/NewPicker/PickerInput/hooks/usePresets.ts new file mode 100644 index 000000000..3b95577d0 --- /dev/null +++ b/src/NewPicker/PickerInput/hooks/usePresets.ts @@ -0,0 +1,25 @@ +import * as React from 'react'; +import warning from 'rc-util/lib/warning'; +import type { ValueDate } from '../../interface'; + +export default function usePresets( + presets?: ValueDate[], + legacyRanges?: Record DateType)>, +): ValueDate[] { + return React.useMemo(() => { + if (presets) { + return presets; + } + + if (legacyRanges) { + warning(false, '`ranges` is deprecated. Please use `presets` instead.'); + + return Object.entries(legacyRanges).map(([label, value]) => ({ + label, + value, + })); + } + + return []; + }, [presets, legacyRanges]); +} diff --git a/src/NewPicker/index.tsx b/src/NewPicker/index.tsx index 69e6a37e3..ab6ba1b5f 100644 --- a/src/NewPicker/index.tsx +++ b/src/NewPicker/index.tsx @@ -11,4 +11,6 @@ * - Get correct `disabledHours` when set `use12Hours` * - `pickerValue` is now full controlled * - `defaultPickerValue` will take effect on every field active with popup opening. + * - [Break] Not order `value` if given `value` is wrong order. + * - Hover `presets` will show date in input field. */ \ No newline at end of file diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index fcc238b21..d71c7f9fe 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -111,6 +111,11 @@ export type CellRender = ( info: CellRenderInfo, ) => React.ReactNode; +export interface ValueDate { + label: React.ReactNode; + value: DateType | (() => DateType); +} + // ========================== Time ========================== export interface DisabledTimes { disabledHours?: () => number[]; diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 554c57836..9ce778c43 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1,3 +1,5 @@ +// Note: zombieJ refactoring + import { act, createEvent, fireEvent, render } from '@testing-library/react'; import type { Moment } from 'moment'; import moment from 'moment'; @@ -12,12 +14,12 @@ import { clearValue, clickButton, closePicker, + DayRangePicker, findCell, - getMoment, + getDay, inputValue, isOpen, isSame, - MomentRangePicker, openPicker, selectCell, } from './util/commonUtil'; @@ -43,7 +45,7 @@ describe('Picker.Range', () => { errorSpy.mockReset(); resetWarned(); global.scrollCalled = false; - jest.useFakeTimers().setSystemTime(getMoment('1990-09-03 00:00:00').valueOf()); + jest.useFakeTimers().setSystemTime(getDay('1990-09-03 00:00:00').valueOf()); }); afterEach(() => { @@ -62,7 +64,7 @@ describe('Picker.Range', () => { describe('value', () => { it('defaultValue', () => { const { container } = render( - , + , ); matchValues(container, '1989-11-28', '1990-09-03'); @@ -70,13 +72,13 @@ describe('Picker.Range', () => { it('controlled', () => { const { container, rerender } = render( - , + , ); matchValues(container, '1989-11-28', '1990-09-03'); // Update - rerender(); + rerender(); matchValues(container, '2000-01-01', '2011-12-12'); }); @@ -85,7 +87,7 @@ describe('Picker.Range', () => { const onChange = jest.fn(); const onCalendarChange = jest.fn(); const { container } = render( - , + , ); // Start date @@ -114,17 +116,17 @@ describe('Picker.Range', () => { }); }); - it('exchanged value should re-order', () => { + it('not re-order for given value', () => { const { container } = render( - , + , ); - matchValues(container, '1989-11-28', '1990-09-03'); + matchValues(container, '1990-09-03', '1989-11-28'); }); describe('view is closed', () => { it('year', () => { - const { container } = render(); + const { container } = render(); openPicker(container); expect(document.querySelector('.rc-picker-footer')).toBeFalsy(); expect(document.querySelectorAll('.rc-picker-header-view')[0].textContent).toEqual( @@ -137,7 +139,7 @@ describe('Picker.Range', () => { it('year with footer', () => { const { container } = render( -

          footer

          } picker="year" />, +

          footer

          } picker="year" />, ); openPicker(container); expect(document.querySelector('.rc-picker-footer').textContent).toEqual('footer'); @@ -150,15 +152,13 @@ describe('Picker.Range', () => { }); }); + return; + it('endDate can not click before startDate', () => { const onChange = jest.fn(); const { container } = render( - date.date() === 28} - allowClear - />, + date.date() === 28} allowClear />, ); let cellNode: HTMLElement; @@ -179,7 +179,7 @@ describe('Picker.Range', () => { }); it('week picker can not click before start week', () => { - const { container } = render(); + const { container } = render(); openPicker(container); selectCell(11); @@ -189,7 +189,7 @@ describe('Picker.Range', () => { describe('Can not select when start or end first selected', () => { it('select end', () => { - const { container } = render(); + const { container } = render(); openPicker(container, 1); selectCell(7); @@ -198,7 +198,7 @@ describe('Picker.Range', () => { }); it('select start', () => { - const { container } = render(); + const { container } = render(); openPicker(container, 0); selectCell('Q3'); @@ -207,7 +207,7 @@ describe('Picker.Range', () => { }); it('select end', () => { - const { container } = render(); + const { container } = render(); openPicker(container, 1); selectCell('May'); @@ -217,9 +217,9 @@ describe('Picker.Range', () => { it('disabled start', () => { const { container } = render( - , ); @@ -231,7 +231,7 @@ describe('Picker.Range', () => { it('allowEmpty', () => { const onChange = jest.fn(); const { container } = render( - , + , ); openPicker(container); @@ -250,20 +250,20 @@ describe('Picker.Range', () => { describe('disabled', () => { it('should no panel open with disabled', () => { - const { baseElement } = render(); + const { baseElement } = render(); expect(baseElement.querySelectorAll('.rc-picker-input')).toHaveLength(2); fireEvent.click(baseElement.querySelector('.rc-picker-input')); expect(baseElement.querySelector('.rc-picker-dropdown')).toBeFalsy(); }); it('basic disabled check', () => { - const { container } = render(); + const { container } = render(); expect(container.querySelectorAll('input')[0].disabled).toBeTruthy(); expect(container.querySelectorAll('input')[1].disabled).toBeFalsy(); }); it('should close panel when finish choose panel and next is disabled with disabled = [false, true]/[true,false]', () => { - const { baseElement } = render(); + const { baseElement } = render(); expect(baseElement.querySelectorAll('.rc-picker-input')).toHaveLength(2); fireEvent.click(baseElement.querySelectorAll('.rc-picker-input')[0]); expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy(); @@ -272,7 +272,7 @@ describe('Picker.Range', () => { }); it('should close panel when finish first choose with showTime = true and disabled = [false, true]', () => { - const { baseElement } = render(); + const { baseElement } = render(); expect(baseElement.querySelectorAll('.rc-picker-input')).toHaveLength(2); fireEvent.click(baseElement.querySelectorAll('.rc-picker-input')[0]); expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy(); @@ -282,7 +282,7 @@ describe('Picker.Range', () => { }); it('should close panel when finish second choose with showTime = true and disabled = [true, false]', () => { - const { baseElement } = render(); + const { baseElement } = render(); expect(baseElement.querySelectorAll('.rc-picker-input')).toHaveLength(2); fireEvent.click(baseElement.querySelectorAll('.rc-picker-input')[1]); expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy(); @@ -295,7 +295,7 @@ describe('Picker.Range', () => { it('panel can not be clicked with open and disabled', () => { const onChange = jest.fn(); - const { baseElement } = render(); + const { baseElement } = render(); expect(baseElement.querySelector('.rc-picker-cell')).toBeTruthy(); fireEvent.click(baseElement.querySelector('.rc-picker-cell')); expect(onChange).not.toBeCalled(); @@ -304,9 +304,9 @@ describe('Picker.Range', () => { it('startDate will have disabledDate when endDate is not selectable', () => { const onChange = jest.fn(); const { container } = render( - , ); @@ -330,7 +330,7 @@ describe('Picker.Range', () => { }); it('null value with disabled', () => { - render(); + render(); expect(errorSpy).toHaveBeenCalledWith( 'Warning: `disabled` should not set with empty `value`. You should set `allowEmpty` or `value` instead.', @@ -340,9 +340,9 @@ describe('Picker.Range', () => { it('clear should trigger change', () => { const onChange = jest.fn(); const { container } = render( - , @@ -356,7 +356,7 @@ describe('Picker.Range', () => { // https://github.com/ant-design/ant-design/issues/23726 it('not fill when all disabled and no value', () => { - const { container } = render(); + const { container } = render(); expect(container.querySelectorAll('input')[0].value).toEqual(''); expect(container.querySelectorAll('input')[1].value).toEqual(''); }); @@ -380,10 +380,10 @@ describe('Picker.Range', () => { it(`${propsType} work`, () => { const onChange = jest.fn(); const { container } = render( - [getMoment('2000-01-01'), getMoment('2010-11-11')], + test: [getDay('1989-11-28'), getDay('1990-09-03')], + func: () => [getDay('2000-01-01'), getDay('2010-11-11')], })} onChange={onChange} />, @@ -418,9 +418,9 @@ describe('Picker.Range', () => { it(`${propsType} hover className`, () => { const { container } = render( - , ); @@ -444,7 +444,7 @@ describe('Picker.Range', () => { }); it('placeholder', () => { - const { container } = render(); + const { container } = render(); expect(container.querySelectorAll('input')[0].placeholder).toEqual('light'); expect(container.querySelectorAll('input')[1].placeholder).toEqual('bamboo'); }); @@ -452,9 +452,7 @@ describe('Picker.Range', () => { describe('defaultPickerValue', () => { it('defaultPickerValue works', () => { const { container } = render( - , + , ); openPicker(container); @@ -467,11 +465,11 @@ describe('Picker.Range', () => { }); it('defaultPickerValue with showTime', () => { - const startDate = getMoment('1982-02-12'); - const endDate = getMoment('1982-02-12'); + const startDate = getDay('1982-02-12'); + const endDate = getDay('1982-02-12'); const { container } = render( - , + , ); openPicker(container); expect(document.querySelector('.rc-picker-year-btn').textContent).toEqual( @@ -480,11 +478,11 @@ describe('Picker.Range', () => { }); it('defaultPickerValue with showTime should works when open panel', () => { - const startDate = getMoment('1982-02-12'); - const endDate = getMoment('1982-02-12'); + const startDate = getDay('1982-02-12'); + const endDate = getDay('1982-02-12'); const { container } = render( - { }); it('function call', () => { - const ref = React.createRef(); + const ref = React.createRef(); render(
          - +
          , ); @@ -541,9 +539,9 @@ describe('Picker.Range', () => { it('not crash with showTime defaultValue', () => { const { container } = render( - , ); @@ -559,7 +557,7 @@ describe('Picker.Range', () => { }); it('mode is array', () => { - const { container } = render(); + const { container } = render(); openPicker(container); expect(document.querySelector('.rc-picker-year-panel')).toBeTruthy(); @@ -571,7 +569,7 @@ describe('Picker.Range', () => { it('mode', () => { const onPanelChange = jest.fn(); const { container } = render( - , + , ); openPicker(container); @@ -590,9 +588,7 @@ describe('Picker.Range', () => { it('picker', () => { const onPanelChange = jest.fn(); - const { container } = render( - , - ); + const { container } = render(); // First go to year panel openPicker(container); @@ -622,7 +618,7 @@ describe('Picker.Range', () => { }); it('should render correctly in rtl', () => { - const { container } = render(); + const { container } = render(); expect(container).toMatchSnapshot(); }); }); @@ -630,8 +626,8 @@ describe('Picker.Range', () => { it('type can not change before start time', () => { const onChange = jest.fn(); const { container } = render( - , ); @@ -660,7 +656,7 @@ describe('Picker.Range', () => { it('should open last when first selected', () => { jest.useFakeTimers(); const onOpenChange = jest.fn(); - const { container, unmount } = render(); + const { container, unmount } = render(); openPicker(container); expect(document.querySelectorAll('.rc-picker-input')[0]).toHaveClass('rc-picker-input-active'); @@ -682,7 +678,7 @@ describe('Picker.Range', () => { { picker: 'date', start: 11, end: 22, mid: 15 }, ].forEach(({ picker, start, end, mid }) => { it('year', () => { - const { container } = render(); + const { container } = render(); openPicker(container); selectCell(start); @@ -705,7 +701,7 @@ describe('Picker.Range', () => { it('range edge className', () => { const { container } = render( - , + , ); // End edge @@ -729,7 +725,7 @@ describe('Picker.Range', () => { }); it('should close when user focus out', () => { - const { container } = render(); + const { container } = render(); openPicker(container); selectCell(11); expect(isOpen()).toBeTruthy(); @@ -741,8 +737,8 @@ describe('Picker.Range', () => { it('icon', () => { const { container } = render( - } clearIcon={} allowClear @@ -756,7 +752,7 @@ describe('Picker.Range', () => { }); it('block native mouseDown in panel to prevent focus changed', () => { - const { container } = render(); + const { container } = render(); openPicker(container); // const preventDefault = jest.fn(); @@ -784,7 +780,7 @@ describe('Picker.Range', () => { }); it('end date arrow should move panel left', () => { - const { container } = render(); + const { container } = render(); openPicker(container, 1); // expect((document.querySelector('.rc-picker-panel-container').props() as any).style.marginLeft).toEqual( @@ -800,7 +796,7 @@ describe('Picker.Range', () => { jest.useFakeTimers(); const onOpenChange = jest.fn(); - const { container } = render(); + const { container } = render(); openPicker(container); onOpenChange.mockReset(); @@ -819,7 +815,7 @@ describe('Picker.Range', () => { it('fixed open need repeat trigger onOpenChange', () => { jest.useFakeTimers(); const onOpenChange = jest.fn(); - render(); + render(); expect(onOpenChange).toHaveBeenCalledTimes(0); @@ -839,7 +835,7 @@ describe('Picker.Range', () => { const onCalendarChange = jest.fn(); const onOk = jest.fn(); const { container } = render( - , + , ); openPicker(container); @@ -875,7 +871,7 @@ describe('Picker.Range', () => { it('datetime will reset by blur', () => { jest.useFakeTimers(); - const { container } = render(); + const { container } = render(); openPicker(container); selectCell(11); closePicker(container); @@ -898,37 +894,37 @@ describe('Picker.Range', () => { { picker: 'year', // Default picker value - defaultPickerValue: [getMoment('1990-09-03'), getMoment('2000-11-28')], + defaultPickerValue: [getDay('1990-09-03'), getDay('2000-11-28')], defaultPickerValueTitle: ['1990-1999', '2000-2009'], // Closing value - closingValue: [getMoment('1989-09-03'), getMoment('1990-11-28')], + closingValue: [getDay('1989-09-03'), getDay('1990-11-28')], closingValueTitle: '1980-1989', // Far away value - farValue: [getMoment('1989-09-03'), getMoment('2090-11-28')], + farValue: [getDay('1989-09-03'), getDay('2090-11-28')], farValueTitle: ['1980-1989', '2080-2089'], }, { picker: 'month', // Default picker value - defaultPickerValue: [getMoment('1990-09-03'), getMoment('2000-11-28')], + defaultPickerValue: [getDay('1990-09-03'), getDay('2000-11-28')], defaultPickerValueTitle: ['1990', '2000'], // Closing value - closingValue: [getMoment('1989-09-03'), getMoment('1989-10-11')], + closingValue: [getDay('1989-09-03'), getDay('1989-10-11')], closingValueTitle: '1989', // Far away value - farValue: [getMoment('1989-09-03'), getMoment('2000-10-11')], + farValue: [getDay('1989-09-03'), getDay('2000-10-11')], farValueTitle: ['1989', '1999'], }, { picker: 'date', // Default picker value - defaultPickerValue: [getMoment('1990-09-03'), getMoment('2000-11-28')], + defaultPickerValue: [getDay('1990-09-03'), getDay('2000-11-28')], defaultPickerValueTitle: ['Sep1990', 'Nov2000'], // Closing value - closingValue: [getMoment('1989-09-03'), getMoment('1989-10-11')], + closingValue: [getDay('1989-09-03'), getDay('1989-10-11')], closingValueTitle: 'Sep1989', // Far away value - farValue: [getMoment('1989-09-03'), getMoment('2000-10-11')], + farValue: [getDay('1989-09-03'), getDay('2000-10-11')], farValueTitle: ['Sep1989', 'Sep2000'], }, ].forEach( @@ -944,7 +940,7 @@ describe('Picker.Range', () => { describe(picker, () => { it('defaultPickerValue', () => { const { container } = render( - , @@ -958,7 +954,7 @@ describe('Picker.Range', () => { it('with closing value', () => { const { container } = render( - , + , ); openPicker(container); @@ -969,7 +965,7 @@ describe('Picker.Range', () => { it('with far value', () => { const { container } = render( - , + , ); openPicker(container); @@ -980,7 +976,7 @@ describe('Picker.Range', () => { it('no end date', () => { const { container } = render( - , + , ); openPicker(container); @@ -994,7 +990,7 @@ describe('Picker.Range', () => { // https://github.com/ant-design/ant-design/issues/22991 it('click switch 1 offset', () => { - const { container } = render(); + const { container } = render(); openPicker(container); expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('Sep1990'); const nextBtns = document.querySelectorAll('.rc-picker-header-next-btn'); @@ -1005,11 +1001,11 @@ describe('Picker.Range', () => { // https://github.com/ant-design/ant-design/issues/20868 it('change picker should reset mode', () => { - const { container, rerender } = render(); + const { container, rerender } = render(); openPicker(container); expect(document.querySelector('.rc-picker-date-panel')).toBeTruthy(); - rerender(); + rerender(); expect(document.querySelector('.rc-picker-date-panel')).toBeFalsy(); expect(document.querySelector('.rc-picker-month-panel')).toBeTruthy(); @@ -1019,7 +1015,7 @@ describe('Picker.Range', () => { it('datetime should reorder in onChange if start is after end in same date', () => { const onChange = jest.fn(); - const { container } = render(); + const { container } = render(); openPicker(container); selectCell(15); fireEvent.click(findLast(document.querySelector('ul'), 'li')); @@ -1043,7 +1039,7 @@ describe('Picker.Range', () => { const onChange = jest.fn(); const { container } = render( - , + , ); openPicker(container); fireEvent.click(findLast(document.querySelector('ul'), 'li')); @@ -1064,7 +1060,7 @@ describe('Picker.Range', () => { }); it('id', () => { - const { container } = render(); + const { container } = render(); expect(container.querySelector('input').id).toEqual('bamboo'); }); @@ -1072,7 +1068,7 @@ describe('Picker.Range', () => { let range = 'start'; const { container } = render( - { expect(info.range).toEqual(range); @@ -1090,7 +1086,7 @@ describe('Picker.Range', () => { // https://github.com/ant-design/ant-design/issues/21084 it('should not jump back to current date after select', () => { - const { container } = render(); + const { container } = render(); openPicker(container); clickButton('super-prev'); selectCell(3); @@ -1127,13 +1123,10 @@ describe('Picker.Range', () => { it(picker, () => { const onChange = jest.fn(); const { container } = render( - , ); openPicker(container, 1); @@ -1146,10 +1139,7 @@ describe('Picker.Range', () => { it('should not disabled when week picker in diff year', () => { const { container } = render( - , + , ); openPicker(container, 1); @@ -1158,9 +1148,9 @@ describe('Picker.Range', () => { it('format', () => { const { container } = render( - , ); @@ -1195,10 +1185,10 @@ describe('Picker.Range', () => { it('custom format', () => { const { container } = render( - `custom format:${val.format('YYYYMMDD')}`, 'YYYY-MM-DD']} - defaultValue={[getMoment('2020-09-17'), getMoment('2020-10-17')]} + defaultValue={[getDay('2020-09-17'), getDay('2020-10-17')]} />, ); @@ -1228,7 +1218,7 @@ describe('Picker.Range', () => { describe('auto open', () => { it('empty: start -> end -> close', () => { - const { container } = render(); + const { container } = render(); openPicker(container, 0); inputValue('1990-11-28'); @@ -1245,7 +1235,7 @@ describe('Picker.Range', () => { describe('valued: start -> end -> close', () => { it('in range', () => { const { container } = render( - , + , ); openPicker(container, 0); @@ -1262,7 +1252,7 @@ describe('Picker.Range', () => { it('new start is after end', () => { const { container } = render( - , + , ); openPicker(container, 0); @@ -1279,7 +1269,7 @@ describe('Picker.Range', () => { }); it('empty: end -> start -> close', () => { - const { container } = render(); + const { container } = render(); openPicker(container, 1); inputValue('1990-11-28', 1); @@ -1296,7 +1286,7 @@ describe('Picker.Range', () => { describe('valued: end -> start -> close', () => { it('in range', () => { const { container } = render( - , + , ); openPicker(container, 1); @@ -1313,7 +1303,7 @@ describe('Picker.Range', () => { it('new end is before start', () => { const { container } = render( - , + , ); openPicker(container, 1); @@ -1330,7 +1320,7 @@ describe('Picker.Range', () => { it('not change: start not to end', () => { const { container } = render( - , + , ); openPicker(container, 0); closePicker(container, 0); @@ -1341,7 +1331,7 @@ describe('Picker.Range', () => { describe('click at non-input elements', () => { it('should focus on the first element by default', () => { jest.useFakeTimers(); - const { container } = render(); + const { container } = render(); fireEvent.click(container.querySelector('.rc-picker')); expect(document.querySelector('.rc-picker-dropdown')).toBeTruthy(); jest.runAllTimers(); @@ -1351,7 +1341,7 @@ describe('Picker.Range', () => { it('should focus on the second element if first is disabled', () => { jest.useFakeTimers(); - const { container } = render(); + const { container } = render(); fireEvent.click(container.querySelector('.rc-picker')); expect(document.querySelector('.rc-picker-dropdown')).toBeTruthy(); jest.runAllTimers(); @@ -1360,7 +1350,7 @@ describe('Picker.Range', () => { }); it("shouldn't let mousedown blur the input", () => { jest.useFakeTimers(); - const { container } = render(); + const { container } = render(); const node = container.querySelector('.rc-picker'); fireEvent.click(node); act(() => { @@ -1375,7 +1365,7 @@ describe('Picker.Range', () => { }); it('panelRender', () => { - render(

          Light

          } />); + render(

          Light

          } />); expect(document.body).toMatchSnapshot(); }); @@ -1383,7 +1373,7 @@ describe('Picker.Range', () => { it('selection provide info for onCalendarChange', () => { const onCalendarChange = jest.fn(); - const { container } = render(); + const { container } = render(); openPicker(container); @@ -1411,10 +1401,10 @@ describe('Picker.Range', () => { jest.useRealTimers(); }); - const defaultValue: [Moment, Moment] = [getMoment('2020-07-22'), getMoment('2020-08-22')]; + const defaultValue: [Moment, Moment] = [getDay('2020-07-22'), getDay('2020-08-22')]; it('should restore when leave', () => { - const { container } = render(); + const { container } = render(); // left openPicker(container, 0); @@ -1484,7 +1474,7 @@ describe('Picker.Range', () => { }); it('should restore after selecting cell', () => { - const { container } = render(); + const { container } = render(); // left openPicker(container, 0); const leftCell = findCell(24, 0); @@ -1551,7 +1541,7 @@ describe('Picker.Range', () => { // https://github.com/ant-design/ant-design/issues/26544 it('should clean hover style when selecting the same value with last value', () => { const { container } = render( - , + , ); openPicker(container); @@ -1570,10 +1560,10 @@ describe('Picker.Range', () => { return true; }; const { container } = render( - , ); @@ -1591,7 +1581,7 @@ describe('Picker.Range', () => { // https://github.com/ant-design/ant-design/issues/26024 it('panel should keep open when nextValue is empty', () => { - const { container } = render(); + const { container } = render(); openPicker(container, 0); @@ -1614,7 +1604,7 @@ describe('Picker.Range', () => { }); it('right date panel switch to month should keep in the same year', () => { - const { container } = render(); + const { container } = render(); openPicker(container, 0); fireEvent.click(document.querySelectorAll('.rc-picker-month-btn')[1]); expect(document.querySelector('.rc-picker-year-btn').textContent).toEqual('1990'); @@ -1622,7 +1612,7 @@ describe('Picker.Range', () => { // https://github.com/ant-design/ant-design/issues/26390 it('month panel should be disabled', () => { - const { container } = render(); + const { container } = render(); openPicker(container); selectCell(15); @@ -1634,7 +1624,7 @@ describe('Picker.Range', () => { // https://github.com/ant-design/ant-design/issues/23167 it('default endDate should be relative startDate', () => { - const { container } = render(); + const { container } = render(); openPicker(container); selectCell(24); @@ -1647,7 +1637,7 @@ describe('Picker.Range', () => { }); it('default startDate should be relative endDate', () => { - const { container } = render(); + const { container } = render(); openPicker(container, 1); selectCell(24); @@ -1664,7 +1654,7 @@ describe('Picker.Range', () => { const handleMouseEnter = jest.fn(); const handleMouseLeave = jest.fn(); const { container } = render( - , + , ); // wrapper.simulate('mouseenter'); fireEvent.mouseEnter(container.querySelector('.rc-picker')); @@ -1682,7 +1672,7 @@ describe('Picker.Range', () => { return current.diff(now, 'days') > 1 || current.diff(now, 'days') < -1; }; const { container } = render( - , + , ); fireEvent.focus(document.querySelector('input')); @@ -1710,7 +1700,7 @@ describe('Picker.Range', () => { // https://github.com/ant-design/ant-design/issues/33662 it('range picker should have onClick event', () => { const handleClick = jest.fn(); - const { container } = render(); + const { container } = render(); // wrapper.simulate('click'); fireEvent.click(container.querySelector('.rc-picker')); expect(handleClick).toHaveBeenCalled(); @@ -1718,7 +1708,7 @@ describe('Picker.Range', () => { it('range picker should have onMouseDown event', () => { const handleMouseDown = jest.fn(); - const { container } = render(); + const { container } = render(); // wrapper.simulate('mousedown'); fireEvent.mouseDown(container.querySelector('.rc-picker')); expect(handleMouseDown).toHaveBeenCalled(); @@ -1748,7 +1738,7 @@ describe('Picker.Range', () => { }, }); const { container } = render( - X          } @@ -1784,7 +1774,7 @@ describe('Picker.Range', () => { }, }); const { container } = render( - X} @@ -1820,7 +1810,7 @@ describe('Picker.Range', () => { }, }); const { container } = render( - X} @@ -1835,7 +1825,7 @@ describe('Picker.Range', () => { }); it('week range selection style', () => { - const { container } = render(); + const { container } = render(); openPicker(container); function findWeekCell(val: string) { @@ -1865,13 +1855,13 @@ describe('Picker.Range', () => { }); it('range picker should use the passed in default when part is disabled', () => { - render(); + render(); expect(document.querySelectorAll('input')[1].value).toBeFalsy(); }); it('use dateRender and monthCellRender in month range picker', () => { const { container, baseElement } = render( -
          {date.get('date')}
          } monthCellRender={(date) =>
          {date.get('month') + 1}
          } @@ -1883,7 +1873,7 @@ describe('Picker.Range', () => { it('use dateRender and monthCellRender in date range picker', () => { const { container, baseElement } = render( -
          {date.get('date')}
          } monthCellRender={(date) =>
          {date.get('month') + 1}
          } @@ -1895,10 +1885,10 @@ describe('Picker.Range', () => { it('no -disabled cell when set open directly', () => { render( - , ); @@ -1907,9 +1897,9 @@ describe('Picker.Range', () => { it('custom clear icon', () => { render( - clear }} - defaultValue={[getMoment('2000-09-03'), getMoment('2000-09-03')]} + defaultValue={[getDay('2000-09-03'), getDay('2000-09-03')]} />, ); @@ -1920,7 +1910,7 @@ describe('Picker.Range', () => { }); it('selected date when open is true should switch panel', () => { - render(); + render(); fireEvent.click(document.querySelector('.rc-picker-cell')); expect(document.querySelectorAll('.rc-picker-input')[1]).toHaveClass('rc-picker-input-active'); @@ -1940,9 +1930,7 @@ describe('Picker.Range', () => { it('dateTime mode switch should trigger onCalendarChange', () => { const onCalendarChange = jest.fn(); - const { container } = render( - , - ); + const { container } = render(); switchInput(container); @@ -1953,7 +1941,7 @@ describe('Picker.Range', () => { const onCalendarChange = jest.fn(); const onChange = jest.fn(); const { container, baseElement } = render( - { it('dateTime mode should be can use a confirm button to close the panel', () => { const onOpenChange = jest.fn(); - render( - , - ); + render(); for (let i = 0; i < 2; i++) { selectCell(24); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index e3ccb7c15..d43876193 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -1,20 +1,24 @@ import React from 'react'; // import { mount as originMount, ReactWrapper } from 'enzyme'; import { fireEvent } from '@testing-library/react'; -import moment, { Moment, unitOfTime } from 'moment'; -import Picker, { PickerPanel, PickerProps } from '../../src'; +import dayjs, { type Dayjs } from 'dayjs'; +import moment, { type Moment, type unitOfTime } from 'moment'; +import Picker, { PickerPanel, type PickerProps } from '../../src'; +import dayGenerateConfig from '../../src/generate/dayjs'; import momentGenerateConfig from '../../src/generate/moment'; import enUS from '../../src/locale/en_US'; -import { PickerBaseProps, PickerDateProps, PickerTimeProps } from '../../src/Picker'; -import { +import zh_CN from '../../src/locale/zh_CN'; +import NewRangePicker, { type RangePickerProps } from '../../src/NewPicker/PickerInput/RangePicker'; +import type { PickerBaseProps, PickerDateProps, PickerTimeProps } from '../../src/Picker'; +import type { PickerPanelBaseProps, PickerPanelDateProps, PickerPanelTimeProps, } from '../../src/PickerPanel'; import RangePicker, { - RangePickerBaseProps, - RangePickerDateProps, - RangePickerTimeProps, + type RangePickerBaseProps, + type RangePickerDateProps, + type RangePickerTimeProps, } from '../../src/RangePicker'; const FULL_FORMAT = 'YYYY-MM-DD HH:mm:ss'; @@ -120,6 +124,7 @@ export class MomentRangePicker extends React.Component { export function openPicker(container: HTMLElement, index = 0) { const input = container.querySelectorAll('input')[index]; fireEvent.mouseDown(input); + fireEvent.click(input); fireEvent.focus(input); } @@ -183,3 +188,19 @@ export function clearValue() { export function inputValue(text: string, index = 0) { fireEvent.change(document.querySelectorAll('input')[index], { target: { value: text } }); } + +// ===================================== Day JS ===================================== +export const DayRangePicker = (props: Partial, 'generateConfig'>>) => { + return ; +}; + +export function getDay(str: string): Dayjs { + const formatList = [FULL_FORMAT, 'YYYY-MM-DD', 'HH:mm:ss', 'YYYY']; + for (let i = 0; i < formatList.length; i += 1) { + const date = dayjs(str, formatList[i], true); + if (date.isValid()) { + return date; + } + } + throw new Error(`Format not match with: ${str}`); +} \ No newline at end of file From eea88c31f08ac3d8877c66c3510c2d9b72ec43d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 7 Nov 2023 17:42:38 +0800 Subject: [PATCH 072/380] chore: hover values with preset --- docs/examples/debug.tsx | 4 ++ src/NewPicker/PickerInput/Popup/index.tsx | 13 ++++-- src/NewPicker/PickerInput/RangePicker.tsx | 43 +++++++------------ .../PickerInput/Selector/RangeSelector.tsx | 6 ++- 4 files changed, 33 insertions(+), 33 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 443d25bbd..734a8c333 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -59,6 +59,10 @@ export default () => { label: 'This Week', value: [moment().add(-7, 'd'), moment()], }, + { + label: 'Last Week', + value: [moment().add(-14, 'd'), moment().add(-7, 'd')], + }, ]} value={rangeValue} // defaultPickerValue={[moment('2020-01-01'), null]} diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index 079cfef48..de563a7bb 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -3,6 +3,7 @@ import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; import type { SharedPickerProps, ValueDate } from '../../interface'; import PickerContext from '../context'; +import type { RangeValueType } from '../RangePicker'; import Footer, { type FooterProps } from './Footer'; import PopupPanel, { type PopupPanelProps } from './PopupPanel'; import PresetPanel from './PresetPanel'; @@ -12,8 +13,11 @@ export interface PopupProps FooterProps, PopupPanelProps { panelRender?: SharedPickerProps['panelRender']; + + // Presets presets: ValueDate[]; onPresetHover: (presetValue: PresetValue) => void; + onPresetSubmit: (presetValue: RangeValueType) => void; } export default function Popup(props: PopupProps) { @@ -23,8 +27,12 @@ export default function Popup(props: PopupProps) { picker, showNow, multiple, + + // Presets presets, onPresetHover, + onPresetSubmit, + ...restProps } = props; @@ -37,10 +45,7 @@ export default function Popup(props: PopupProps) { { - // triggerChange(nextValue, null); - // triggerOpen(false, mergedActivePickerIndex, 'preset'); - // }} + onClick={onPresetSubmit} onHover={onPresetHover} />
          diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index ba07a8589..7312d1f3b 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -367,35 +367,11 @@ export default function Picker(props: RangePickerProps }; // ======================== Hover ========================= - // const hoverLockRef = React.useRef(false); - + const [hoverSource, setHoverSource] = React.useState<'cell' | 'preset'>(null); const [internalHoverValues, setInternalHoverValues] = React.useState>(null); - const onPresetHover = (nextValues: RangeValueType | null) => { - setInternalHoverValues(nextValues); - }; - - // const [hoverDate, setHoverDate] = React.useState(null); - - // // Lock `hoverDate` replacement to improve user experience - // // When select the first date and change to next, - // // it will still show the prev hover date till user hover to other cell. - // React.useMemo(() => { - // hoverLockRef.current = true; - // }, [activeIndex]); - const hoverValues = React.useMemo(() => { - // const clone: RangeValueType = [...calendarValue]; - - // if (hoverDate && !hoverLockRef.current) { - // clone[activeIndex] = hoverDate; - // } - - // if (internalHoverValues?.[activeIndex] && !hoverLockRef.current) { - // clone[activeIndex] = internalHoverValues[activeIndex]; - // } - const clone = [...(internalHoverValues || calendarValue)].filter( (n) => n, ) as RangeValueType; @@ -410,11 +386,20 @@ export default function Picker(props: RangePickerProps // ======================= Presets ======================== const presetList = usePresets(presets, ranges); + const onPresetHover = (nextValues: RangeValueType | null) => { + setInternalHoverValues(nextValues); + setHoverSource('preset'); + }; + + const onPresetSubmit = (nextValues: RangeValueType) => { + triggerSubmitChange(nextValues); + setMergeOpen(false); + }; + // ======================== Panel ========================= const onPanelHover = (date: DateType) => { - // setHoverDate(date); setInternalHoverValues(date ? fillMergedValue(date, activeIndex) : null); - // hoverLockRef.current = false; + setHoverSource('cell'); }; // >>> Focus @@ -481,12 +466,13 @@ export default function Picker(props: RangePickerProps //Hover hoverValue={hoverValues} onHover={onPanelHover} - onPresetHover={onPresetHover} // Submit needConfirm={needConfirm} onSubmit={triggerChangeAndFocusNext} // Preset presets={presetList} + onPresetHover={onPresetHover} + onPresetSubmit={onPresetSubmit} /> ); @@ -528,6 +514,7 @@ export default function Picker(props: RangePickerProps // Active activeIndex={focusedIndex} activeHelp={!!internalHoverValues} + allHelp={!!internalHoverValues && hoverSource === 'preset'} onFocus={onSelectorFocus} onBlur={onSelectorBlur} onSubmit={triggerChangeAndFocusNext} diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index ed1a0f438..46d3f3587 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -10,6 +10,8 @@ export interface RangeSelectorProps extends SelectorProps((props, ref) => { @@ -18,6 +20,8 @@ const RangeSelector = React.forwardRef((props, separator = '~', activeIndex, activeHelp, + allHelp, + onFocus, onBlur, locale, @@ -99,7 +103,7 @@ const RangeSelector = React.forwardRef((props, active: activeIndex === index, - helped: activeHelp && activeIndex === index, + helped: allHelp || (activeHelp && activeIndex === index), disabled: disabled[index], From 1367c0acfdd6725f565c7d5906d69c824883ee17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 7 Nov 2023 20:10:41 +0800 Subject: [PATCH 073/380] fix: hover logic --- docs/examples/debug.tsx | 21 ++++++++++++------- src/NewPicker/PickerInput/Popup/Footer.tsx | 6 +++++- src/NewPicker/PickerInput/RangePicker.tsx | 9 +++----- .../PickerInput/hooks/useRangeValue.ts | 6 +----- tests/range.spec.tsx | 2 ++ 5 files changed, 24 insertions(+), 20 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 734a8c333..d58090a6f 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -34,13 +34,14 @@ export default () => { const singleRef = React.useRef(null); const [value, setValue] = React.useState(null); - const [rangeValue, setRangeValue] = React.useState<[Moment?, Moment?]>(); - // has start - // [moment('2023-11-15'), null], - // has end - // [null, moment('2023-11-15')], - // [moment('2023-11-5'), moment('2023-12-29')], - // [moment('2023-11-5'), moment('2132-12-29')], + const [rangeValue, setRangeValue] = React.useState<[Moment?, Moment?]>( + // has start + // [moment('2023-11-15'), null], + // has end + // [null, moment('2023-11-15')], + // [moment('2023-11-5'), moment('2023-12-29')], + [moment('2000-09-03'), moment('1990-09-03')], + ); return (
          @@ -48,7 +49,7 @@ export default () => {
          { label: 'Last Week', value: [moment().add(-14, 'd'), moment().add(-7, 'd')], }, + { + label: 'Wrong Order', + value: [moment(), moment().add(-14, 'd')], + }, ]} value={rangeValue} // defaultPickerValue={[moment('2020-01-01'), null]} diff --git a/src/NewPicker/PickerInput/Popup/Footer.tsx b/src/NewPicker/PickerInput/Popup/Footer.tsx index 6d4dc8c9d..fd4222468 100644 --- a/src/NewPicker/PickerInput/Popup/Footer.tsx +++ b/src/NewPicker/PickerInput/Popup/Footer.tsx @@ -59,7 +59,7 @@ export default function Footer(props: FooterProps) {
          • ); - const rangeNode = ( + const rangeNode = (presetNode || okNode) && (
            {presetNode} {okNode} @@ -67,6 +67,10 @@ export default function Footer(props: FooterProps) { ); // ======================== Render ======================== + if (!extraNode && !rangeNode) { + return null; + } + return (
            {extraNode} diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 7312d1f3b..65bcd05dc 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -224,6 +224,7 @@ export default function Picker(props: RangePickerProps const orderOnChange = mergedDisabled.some((d) => d) ? false : order; // ======================== Value ========================= + const [calendarValue, triggerCalendarChange, triggerSubmitChange] = useRangeValue( { ...props, @@ -372,12 +373,8 @@ export default function Picker(props: RangePickerProps React.useState>(null); const hoverValues = React.useMemo(() => { - const clone = [...(internalHoverValues || calendarValue)].filter( - (n) => n, - ) as RangeValueType; - - return clone.sort((a, b) => (generateConfig.isAfter(b, a) ? -1 : 1)); - }, [calendarValue, internalHoverValues, generateConfig]); + return internalHoverValues || calendarValue; + }, [calendarValue, internalHoverValues]); // ======================================================== // == Panels == diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index f0388adb0..ce00fc739 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -59,15 +59,11 @@ export default function useRangeValue( // ============================ Values ============================ // Used for internal value management. // It should always use `mergedValue` in render logic - const [internalCalendarValue, setCalendarValue1] = React.useState>( + const [internalCalendarValue, setCalendarValue] = React.useState>( defaultValue || [null, null], ); const calendarValue = internalCalendarValue || [null, null]; - const setCalendarValue = (val) => { - setCalendarValue1(val); - }; - React.useEffect(() => { if (value) { setCalendarValue(value); diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 9ce778c43..a5ce75f42 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -137,6 +137,8 @@ describe('Picker.Range', () => { ); }); + return; + it('year with footer', () => { const { container } = render(

            footer

            } picker="year" />, From 9ffa00d7a276894721b290c6861cb7198cbb448a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 8 Nov 2023 11:01:21 +0800 Subject: [PATCH 074/380] feat: support showWeek --- docs/examples/debug.tsx | 11 ++-- src/NewPicker/PickerPanel/DatePanel/index.tsx | 47 ++++++++++++++++- src/NewPicker/PickerPanel/PanelBody.tsx | 4 +- src/NewPicker/PickerPanel/WeekPanel/index.tsx | 52 +------------------ src/NewPicker/PickerPanel/context.ts | 2 +- src/NewPicker/PickerPanel/index.tsx | 11 ++++ src/NewPicker/index.tsx | 33 +++++++----- src/NewPicker/interface.tsx | 9 ++++ tests/range.spec.tsx | 44 ++-------------- 9 files changed, 101 insertions(+), 112 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index d58090a6f..7bf0b15c4 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -137,10 +137,13 @@ export default () => { /> */} {/* + */} {/* extends SharedPanelProps { panelName?: PanelMode; - prefixColumn?: (date: DateType) => React.ReactNode; rowClassName?: (date: DateType) => string; /** Used for `WeekPanel` */ @@ -31,19 +30,62 @@ export default function DatePanel(props: DatePanelProps { + // >>> Additional check for disabled + const disabled = disabledDate?.(date, { type: 'week' }); + + return ( + { + if (!disabled) { + onChange(date); + } + }} + onMouseEnter={() => { + if (!disabled) { + onHover?.(date); + } + }} + onMouseLeave={() => { + if (!disabled) { + onHover?.(null); + } + }} + > +
            + {generateConfig.locale.getWeek(locale.locale, date)} +
            + + ); + } + : null; + // ========================= Cells ========================== // >>> Header Cells const headerCells: React.ReactNode[] = []; @@ -164,6 +206,7 @@ export default function DatePanel(props: DatePanelProps
            diff --git a/src/NewPicker/PickerPanel/PanelBody.tsx b/src/NewPicker/PickerPanel/PanelBody.tsx index ec8251ebb..0b31e3485 100644 --- a/src/NewPicker/PickerPanel/PanelBody.tsx +++ b/src/NewPicker/PickerPanel/PanelBody.tsx @@ -114,12 +114,12 @@ export default function PanelBody(props: PanelBodyProps { if (!disabled) { - onHover(currentDate); + onHover?.(currentDate); } }} onMouseLeave={() => { if (!disabled) { - onHover(null); + onHover?.(null); } }} > diff --git a/src/NewPicker/PickerPanel/WeekPanel/index.tsx b/src/NewPicker/PickerPanel/WeekPanel/index.tsx index d3c46a6a9..ba11d794a 100644 --- a/src/NewPicker/PickerPanel/WeekPanel/index.tsx +++ b/src/NewPicker/PickerPanel/WeekPanel/index.tsx @@ -5,45 +5,7 @@ import type { SharedPanelProps } from '../../interface'; import DatePanel from '../DatePanel'; export default function WeekPanel(props: SharedPanelProps) { - const { disabledDate, prefixCls, onChange, onHover, generateConfig, locale, value, hoverValue } = - props; - - const cellPrefixCls = `${prefixCls}-cell`; - - // =========================== PrefixColumn =========================== - const prefixColumn = (date: DateType) => { - // >>> Additional check for disabled - const disabled = disabledDate?.(date, { type: 'week' }); - - return ( - { - if (!disabled) { - onChange(date); - } - }} - onMouseEnter={() => { - if (!disabled) { - onHover(date); - } - }} - onMouseLeave={() => { - if (!disabled) { - onHover(null); - } - }} - > -
            - {generateConfig.locale.getWeek(locale.locale, date)} -
            - - ); - }; + const { prefixCls, generateConfig, locale, value, hoverValue } = props; // =============================== Row ================================ const rowPrefixCls = `${prefixCls}-week-panel-row`; @@ -55,8 +17,6 @@ export default function WeekPanel(props: SharedPanelProps(props: SharedPanelProps - ); + return ; } diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index c8027d816..e33e5ed04 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -13,7 +13,7 @@ export interface PanelProps { onChange: (date: DateType) => void; locale: Locale; hoverValue: [DateType, DateType] | null; - onHover: (date: DateType | null) => void; + onHover?: (date: DateType | null) => void; value?: DateType; pickerValue?: DateType; generateConfig: GenerateConfig; diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 8bcfe77e1..2dd40140f 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -64,6 +64,12 @@ export interface PickerPanelProps // Time showTime?: true | SharedTimeProps; + // Week + /** + * Only worked in `date` mode. Show the current week + */ + showWeek?: boolean; + // Cell cellRender?: CellRender; @@ -110,6 +116,9 @@ function PickerPanel( // Time showTime, + // Week + showWeek, + // Cell cellRender, @@ -229,6 +238,8 @@ function PickerPanel( { onHover?: (value: DateType | null) => void; // Time + /** + * Only used for `date` mode. + */ showTime?: SharedTimeProps; + + // Week + /** + * Only used for `date` mode. + */ + showWeek?: boolean; } export type Components = Partial< diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index a5ce75f42..2f78c1ecc 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -8,7 +8,6 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; import type { PickerMode } from '../src/interface'; -import zhCN from '../src/locale/zh_CN'; import type { RangePickerProps } from '../src/RangePicker'; import { clearValue, @@ -130,15 +129,13 @@ describe('Picker.Range', () => { openPicker(container); expect(document.querySelector('.rc-picker-footer')).toBeFalsy(); expect(document.querySelectorAll('.rc-picker-header-view')[0].textContent).toEqual( - '1990-1999', + '1990ๅนด-1999ๅนด', ); expect(document.querySelectorAll('.rc-picker-header-view')[1].textContent).toEqual( - '2000-2009', + '2000ๅนด-2009ๅนด', ); }); - return; - it('year with footer', () => { const { container } = render(

            footer

            } picker="year" />, @@ -146,49 +143,16 @@ describe('Picker.Range', () => { openPicker(container); expect(document.querySelector('.rc-picker-footer').textContent).toEqual('footer'); expect(document.querySelectorAll('.rc-picker-header-view')[0].textContent).toEqual( - '1990-1999', + '1990ๅนด-1999ๅนด', ); expect(document.querySelectorAll('.rc-picker-header-view')[1].textContent).toEqual( - '2000-2009', + '2000ๅนด-2009ๅนด', ); }); }); return; - it('endDate can not click before startDate', () => { - const onChange = jest.fn(); - - const { container } = render( - date.date() === 28} allowClear />, - ); - - let cellNode: HTMLElement; - - // Start date - openPicker(container); - selectCell(23); - - // End date - cellNode = selectCell(11); - expect(cellNode).toHaveClass('rc-picker-cell-disabled'); - expect(onChange).not.toHaveBeenCalled(); - - // Click origin disabled date - cellNode = selectCell(28); - expect(cellNode).toHaveClass('rc-picker-cell-disabled'); - expect(onChange).not.toHaveBeenCalled(); - }); - - it('week picker can not click before start week', () => { - const { container } = render(); - openPicker(container); - selectCell(11); - - expect(findCell(4)).toHaveClass('rc-picker-cell-disabled'); - expect(findCell(11)).not.toHaveClass('rc-picker-cell-disabled'); - }); - describe('Can not select when start or end first selected', () => { it('select end', () => { const { container } = render(); From 043683f49ec509db5e6401476cb094433c049991 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 8 Nov 2023 13:59:22 +0800 Subject: [PATCH 075/380] chore: back of onChange logic --- docs/examples/debug.tsx | 41 +++++++++-------- src/NewPicker/PickerInput/RangePicker.tsx | 20 ++++++-- src/NewPicker/PickerInput/Selector/Icon.tsx | 29 ++++++++++-- .../PickerInput/Selector/RangeSelector.tsx | 32 +++++++------ .../Selector/hooks/useClearIcon.tsx | 20 ++++++++ .../PickerInput/hooks/useRangeValue.ts | 37 ++++++++++----- src/NewPicker/interface.tsx | 7 +++ tests/range.spec.tsx | 46 +++++++------------ tests/util/commonUtil.tsx | 6 ++- 9 files changed, 155 insertions(+), 83 deletions(-) create mode 100644 src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 7bf0b15c4..f3f3dc435 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -40,7 +40,8 @@ export default () => { // has end // [null, moment('2023-11-15')], // [moment('2023-11-5'), moment('2023-12-29')], - [moment('2000-09-03'), moment('1990-09-03')], + // [moment('2000-09-03'), moment('1990-09-03')], + null, ); return ( @@ -51,24 +52,24 @@ export default () => { {...sharedLocale} // picker="year" // value={[moment('2000-01-01'), null]} - presets={[ - { - label: 'Now', - value: [moment(), moment()], - }, - { - label: 'This Week', - value: [moment().add(-7, 'd'), moment()], - }, - { - label: 'Last Week', - value: [moment().add(-14, 'd'), moment().add(-7, 'd')], - }, - { - label: 'Wrong Order', - value: [moment(), moment().add(-14, 'd')], - }, - ]} + // presets={[ + // { + // label: 'Now', + // value: [moment(), moment()], + // }, + // { + // label: 'This Week', + // value: [moment().add(-7, 'd'), moment()], + // }, + // { + // label: 'Last Week', + // value: [moment().add(-14, 'd'), moment().add(-7, 'd')], + // }, + // { + // label: 'Wrong Order', + // value: [moment(), moment().add(-14, 'd')], + // }, + // ]} value={rangeValue} // defaultPickerValue={[moment('2020-01-01'), null]} // onPickerValueChange={(dates, info) => { @@ -100,7 +101,7 @@ export default () => { console.log('๐ŸŽ‰ Calendar Change:', val, text, info); }} // preserveInvalidOnBlur - // allowEmpty={[false, true]} + allowEmpty={[false, true]} onOpenChange={(nextOpen) => { console.log('๐Ÿ† Next Open:', nextOpen); }} diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 65bcd05dc..b4f811926 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -22,6 +22,7 @@ import useRangePickerValue from './hooks/useRangePickerValue'; import useRangeValue from './hooks/useRangeValue'; import useShowNow from './hooks/useShowNow'; import Popup from './Popup'; +import { useClearIcon } from './Selector/hooks/useClearIcon'; import RangeSelector from './Selector/RangeSelector'; function separateConfig(config: T | [T, T] | null | undefined, defaultConfig: T): [T, T] { @@ -148,12 +149,19 @@ export default function Picker(props: RangePickerProps presets, ranges, + // Icons + allowClear, + clearIcon, + // Render components = {}, } = props; const selectorRef = React.useRef(); + // ========================= Icon ========================= + const mergedClearIcon = useClearIcon(prefixCls, allowClear, clearIcon); + // ======================= ShowTime ======================= const mergedShowTime = useShowTime(showTime); @@ -225,7 +233,7 @@ export default function Picker(props: RangePickerProps // ======================== Value ========================= - const [calendarValue, triggerCalendarChange, triggerSubmitChange] = useRangeValue( + const [calendarValue, triggerCalendarChange, triggerSubmitChange, emptyValue] = useRangeValue( { ...props, allowEmpty: mergedAllowEmpty, @@ -253,7 +261,7 @@ export default function Picker(props: RangePickerProps // ======================= Validate ======================= const isInvalidRange = React.useMemo(() => { // Not check if get focused - if (focused) { + if (focused || emptyValue) { return false; } @@ -278,7 +286,7 @@ export default function Picker(props: RangePickerProps } return false; - }, [focused, calendarValue, mergedAllowEmpty, isInvalidateDate]); + }, [focused, emptyValue, calendarValue, mergedAllowEmpty, isInvalidateDate]); // ===================== Picker Value ===================== const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue( @@ -367,6 +375,10 @@ export default function Picker(props: RangePickerProps setMergeOpen(true); }; + const onSelectorClear = () => { + triggerSubmitChange(null); + }; + // ======================== Hover ========================= const [hoverSource, setHoverSource] = React.useState<'cell' | 'preset'>(null); const [internalHoverValues, setInternalHoverValues] = @@ -507,6 +519,7 @@ export default function Picker(props: RangePickerProps // Ref ref={selectorRef} // Icon + clearIcon={mergedClearIcon} suffixIcon={suffixIcon} // Active activeIndex={focusedIndex} @@ -527,6 +540,7 @@ export default function Picker(props: RangePickerProps onOpenChange={onSelectorOpenChange} // Click onClick={onSelectorClick} + onClear={onSelectorClear} // Invalid invalid={isInvalidRange} /> diff --git a/src/NewPicker/PickerInput/Selector/Icon.tsx b/src/NewPicker/PickerInput/Selector/Icon.tsx index f5f7ef5d2..f506e033e 100644 --- a/src/NewPicker/PickerInput/Selector/Icon.tsx +++ b/src/NewPicker/PickerInput/Selector/Icon.tsx @@ -1,15 +1,38 @@ import * as React from 'react'; import PickerContext from '../context'; -export interface IconProps { +export interface IconProps extends React.HtmlHTMLAttributes { icon?: React.ReactNode; type: 'suffix' | 'clear'; } export default function Icon(props: IconProps) { - const { icon, type } = props; + const { icon, type, ...restProps } = props; const { prefixCls } = React.useContext(PickerContext); - return icon ? {icon} : null; + return icon ? ( + + {icon} + + ) : null; +} + +export interface ClearIconProps extends IconProps { + onClear: VoidFunction; +} + +export function ClearIcon({ onClear, ...restProps }: ClearIconProps) { + return ( + { + e.preventDefault(); + }} + onClick={(e) => { + e.stopPropagation(); + onClear(); + }} + /> + ); } diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 46d3f3587..7c5f72117 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import * as React from 'react'; import type { OpenConfig, SelectorProps, SelectorRef } from '../../interface'; import PickerContext from '../context'; -import Icon from './Icon'; +import Icon, { ClearIcon } from './Icon'; import Input, { type InputProps } from './Input'; export interface RangeSelectorProps extends SelectorProps { @@ -14,8 +14,12 @@ export interface RangeSelectorProps extends SelectorProps((props, ref) => { +function RangeSelector( + props: RangeSelectorProps, + ref: React.Ref, +) { const { + clearIcon, suffixIcon, separator = '~', activeIndex, @@ -29,6 +33,7 @@ const RangeSelector = React.forwardRef((props, // Click onClick, + onClear, // Change value, @@ -87,8 +92,7 @@ const RangeSelector = React.forwardRef((props, const valueTexts = React.useMemo(() => [getText(value[0]), getText(value[1])], [value, getText]); - // ======================== Render ======================== - // >>> Input Props + // ======================== Inputs ======================== const getInputProps = (index: number): InputProps => ({ // ============== Shared ============== format: maskFormat, @@ -146,7 +150,10 @@ const RangeSelector = React.forwardRef((props, }, }); - // >>> Render + // ======================== Clear ========================= + const showClear = (clearIcon && value[0] && !disabled[0]) || (value[1] && !disabled[1]); + + // ======================== Render ======================== return (
            ((props, })} ref={rootRef} onClick={onClick} - // onFocus={() => { - // console.log('my!!! IN', document.activeElement); - // }} - // onBlur={() => { - // console.log('my!!! OUT', document.activeElement); - // }} >
            {separator}
            + {showClear && }
            ); -}); +} + +const RefRangeSelector = React.forwardRef(RangeSelector); if (process.env.NODE_ENV !== 'production') { - RangeSelector.displayName = 'RangeSelector'; + RefRangeSelector.displayName = 'RangeSelector'; } -export default RangeSelector; +export default RefRangeSelector; diff --git a/src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx b/src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx new file mode 100644 index 000000000..a67635575 --- /dev/null +++ b/src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx @@ -0,0 +1,20 @@ +import type { ReactNode } from 'react'; +import * as React from 'react'; + +export function useClearIcon( + prefixCls: string, + allowClear?: boolean | { clearIcon?: ReactNode }, + clearIcon?: ReactNode, +) { + const mergedClearIcon = React.useMemo(() => { + if (allowClear === false) { + return null; + } + + const config = allowClear && typeof allowClear === 'object' ? allowClear : {}; + + return config.clearIcon || clearIcon || ; + }, [prefixCls, allowClear, clearIcon]); + + return mergedClearIcon; +} diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index ce00fc739..a5ecbbbfa 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -34,6 +34,7 @@ export default function useRangeValue( calendarValue: RangeValueType, triggerCalendarChange: TriggerChange, triggerSubmitChange: (value: RangeValueType) => void, + emptyValue: boolean, ] { const { // MISC @@ -60,12 +61,12 @@ export default function useRangeValue( // Used for internal value management. // It should always use `mergedValue` in render logic const [internalCalendarValue, setCalendarValue] = React.useState>( - defaultValue || [null, null], + defaultValue || null, ); const calendarValue = internalCalendarValue || [null, null]; React.useEffect(() => { - if (value) { + if (value || value === null) { setCalendarValue(value); } }, [value]); @@ -79,17 +80,19 @@ export default function useRangeValue( }); // ============================ Change ============================ - const getDateTexts = (dateList: RangeValueType) => { - return dateList.map((date) => + const getDateTexts = ([start, end]: RangeValueType) => { + return [start, end].map((date) => date ? generateConfig.locale.format(locale.locale, date, formatList[0]) : '', ) as [string, string]; }; const isSameDates = (source: RangeValueType, target: RangeValueType) => { - const [prevSubmitStart, prevSubmitEnd] = source; + const [prevStart = null, prevEnd = null] = source; + const [nextStart = null, nextEnd = null] = target; - const isSameStart = isSameTimestamp(generateConfig, prevSubmitStart, target[0]); - const isSameEnd = isSameTimestamp(generateConfig, prevSubmitEnd, target[1]); + const isSameStart = + prevStart === nextStart || isSameTimestamp(generateConfig, prevStart, nextStart); + const isSameEnd = prevEnd === nextEnd || isSameTimestamp(generateConfig, prevEnd, nextEnd); return [isSameStart && isSameEnd, isSameStart, isSameEnd]; }; @@ -116,7 +119,8 @@ export default function useRangeValue( const [lastSubmitResult, setLastSubmitResult] = React.useState<[passed: boolean]>([true]); const triggerSubmit = useEvent((nextValue?: RangeValueType) => { - const clone: RangeValueType = [...(nextValue || calendarValue)]; + const isNullValue = nextValue === null; + const clone: RangeValueType = isNullValue ? [] : [...(nextValue || calendarValue)]; // Only when exist value to sort if (orderOnChange && clone[0] && clone[1]) { @@ -155,7 +159,11 @@ export default function useRangeValue( (!end || !isInvalidateDate(end)); // >>> Result - const allPassed = validateEmptyDateRange && validateOrder && validateDates; + const allPassed = + // Null value is from clear button + isNullValue || + // Normal check + (validateEmptyDateRange && validateOrder && validateDates); if (allPassed) { // Sync submit value to not to trigger `onChange` again @@ -165,8 +173,8 @@ export default function useRangeValue( if (onChange) { const [isSameSubmitDates] = isSameDates(submitValue, clone); - if (!isSameSubmitDates && validateEmptyDateRange) { - onChange(clone, getDateTexts(clone)); + if (!isSameSubmitDates) { + onChange(isNullValue ? null : clone, getDateTexts(clone)); } } } @@ -202,5 +210,10 @@ export default function useRangeValue( }, [lastSubmitResult]); // ============================ Return ============================ - return [calendarValue, triggerCalendarChange, triggerSubmitChange]; + return [ + calendarValue, + triggerCalendarChange, + triggerSubmitChange, + internalCalendarValue === null, + ]; } diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 7314d33e5..cd7d087d0 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -268,6 +268,9 @@ export interface SharedPickerProps { clearIcon?: React.ReactNode; }; + /** @deprecated Please use `allowClear.clearIcon` instead */ + clearIcon?: React.ReactNode; + // Active onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; @@ -321,6 +324,7 @@ export interface OpenConfig { export type OnOpenChange = (open: boolean, index?: number, config?: OpenConfig) => void; export interface SelectorProps { + clearIcon?: React.ReactNode; suffixIcon?: React.ReactNode; className?: string; style?: React.CSSProperties; @@ -337,6 +341,9 @@ export interface SelectorProps { // Click onClick: React.MouseEventHandler; + // Clear + onClear: VoidFunction; + // Change format: string[]; /** diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 2f78c1ecc..999eac91f 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -151,36 +151,7 @@ describe('Picker.Range', () => { }); }); - return; - - describe('Can not select when start or end first selected', () => { - it('select end', () => { - const { container } = render(); - - openPicker(container, 1); - selectCell(7); - - expect(findCell(23)).toHaveClass('rc-picker-cell-disabled'); - }); - - it('select start', () => { - const { container } = render(); - - openPicker(container, 0); - selectCell('Q3'); - - expect(findCell('Q1')).toHaveClass('rc-picker-cell-disabled'); - }); - - it('select end', () => { - const { container } = render(); - - openPicker(container, 1); - selectCell('May'); - - expect(findCell('Dec')).toHaveClass('rc-picker-cell-disabled'); - }); - + describe('Can not select when part field disabled', () => { it('disabled start', () => { const { container } = render( { openPicker(container, 1); expect(findCell(14)).toHaveClass('rc-picker-cell-disabled'); }); + + it('disabled end', () => { + const { container } = render( + , + ); + + openPicker(container, 0); + expect(findCell(16, 1)).toHaveClass('rc-picker-cell-disabled'); + }); }); it('allowEmpty', () => { @@ -202,6 +185,7 @@ describe('Picker.Range', () => { openPicker(container); selectCell(11); + closePicker(container, 1); expect(onChange).toHaveBeenCalledWith([expect.anything(), null], ['1990-09-11', '']); clearValue(); @@ -214,6 +198,8 @@ describe('Picker.Range', () => { expect(onChange).not.toHaveBeenCalled(); }); + return; + describe('disabled', () => { it('should no panel open with disabled', () => { const { baseElement } = render(); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index d43876193..83c15a7b0 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -1,6 +1,6 @@ import React from 'react'; // import { mount as originMount, ReactWrapper } from 'enzyme'; -import { fireEvent } from '@testing-library/react'; +import { act, fireEvent } from '@testing-library/react'; import dayjs, { type Dayjs } from 'dayjs'; import moment, { type Moment, type unitOfTime } from 'moment'; import Picker, { PickerPanel, type PickerProps } from '../../src'; @@ -131,6 +131,10 @@ export function openPicker(container: HTMLElement, index = 0) { export function closePicker(container: HTMLElement, index = 0) { const input = container.querySelectorAll('input')[index]; fireEvent.blur(input); + + act(() => { + jest.runAllTimers(); + }); } export function isOpen() { From f5cd3cd2b064a5793727cf7b77bf00e51978fe86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 8 Nov 2023 14:19:04 +0800 Subject: [PATCH 076/380] fix: open check --- docs/examples/debug.tsx | 2 +- src/NewPicker/PickerInput/RangePicker.tsx | 28 +++++++++++-------- .../PickerInput/Selector/RangeSelector.tsx | 7 +++-- .../PickerInput/hooks/useRangePickerValue.ts | 22 +++++++++------ src/NewPicker/index.tsx | 1 + src/NewPicker/interface.tsx | 3 +- tests/range.spec.tsx | 7 +++-- tests/util/commonUtil.tsx | 1 + 8 files changed, 44 insertions(+), 27 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index f3f3dc435..e6ae5f8bd 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -75,7 +75,7 @@ export default () => { // onPickerValueChange={(dates, info) => { // console.log('๐Ÿญ Picker Value Change:', dates, info); // }} - // disabled={[false, true]} + disabled suffixIcon="๐Ÿงถ" disabledDate={(date) => date.date() === 11} // onFocus={() => { diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index b4f811926..f7e3098a0 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -159,6 +159,10 @@ export default function Picker(props: RangePickerProps const selectorRef = React.useRef(); + // =================== Disabled & Empty =================== + const mergedDisabled = separateConfig(disabled, false); + const mergedAllowEmpty = separateConfig(allowEmpty, false); + // ========================= Icon ========================= const mergedClearIcon = useClearIcon(prefixCls, allowClear, clearIcon); @@ -194,8 +198,11 @@ export default function Picker(props: RangePickerProps const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, onOpenChange); - const onSelectorOpenChange: OnOpenChange = (nextOpen, index, config?: OpenConfig) => { - setMergeOpen(nextOpen, config); + const triggerOpen: OnOpenChange = (nextOpen, config?: OpenConfig) => { + // No need to open if all disabled + if (mergedDisabled.some((fieldDisabled) => !fieldDisabled) || !nextOpen) { + setMergeOpen(nextOpen, config); + } }; // ======================== Active ======================== @@ -221,10 +228,7 @@ export default function Picker(props: RangePickerProps } }, [activeIndex, mergedOpen]); - // =================== Disabled & Empty =================== - const mergedDisabled = separateConfig(disabled, false); - const mergedAllowEmpty = separateConfig(allowEmpty, false); - + // ====================== Invalidate ====================== const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, mergedShowTime); // ======================== Order ========================= @@ -351,7 +355,7 @@ export default function Picker(props: RangePickerProps const activeLen = activeList?.length; if (activeLen > 1 || hasDisabled) { // Close anyway - onSelectorOpenChange(false, activeIndex); + triggerOpen(false, { index: activeIndex }); triggerSubmitChange(nextValue); } else if (activeLen === 1) { // Trigger @@ -372,7 +376,7 @@ export default function Picker(props: RangePickerProps } } - setMergeOpen(true); + triggerOpen(true); }; const onSelectorClear = () => { @@ -402,7 +406,7 @@ export default function Picker(props: RangePickerProps const onPresetSubmit = (nextValues: RangeValueType) => { triggerSubmitChange(nextValues); - setMergeOpen(false); + triggerOpen(false); }; // ======================== Panel ========================= @@ -414,7 +418,7 @@ export default function Picker(props: RangePickerProps // >>> Focus const onPanelFocus: React.FocusEventHandler = () => { setFocused(true); - setMergeOpen(true); + triggerOpen(true); }; const onPanelBlur: React.FocusEventHandler = () => { @@ -441,7 +445,7 @@ export default function Picker(props: RangePickerProps } // Close popup - setMergeOpen(false); + triggerOpen(false); }; // >>> Value @@ -537,7 +541,7 @@ export default function Picker(props: RangePickerProps disabled={mergedDisabled} // Open open={mergedOpen ? focusedIndex : null} - onOpenChange={onSelectorOpenChange} + onOpenChange={triggerOpen} // Click onClick={onSelectorClick} onClear={onSelectorClear} diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 7c5f72117..8a36fa1e3 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -72,8 +72,11 @@ function RangeSelector( })); // ========================= Open ========================= - const triggerOpen = (nextOpen: boolean, index: number, config?: OpenConfig) => { - onOpenChange(nextOpen, index, config); + const triggerOpen = (nextOpen: boolean, index: number, config: OpenConfig = {}) => { + onOpenChange(nextOpen, { + ...config, + index, + }); }; // ======================== Parser ======================== diff --git a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts index cc1c08b5f..618ea78fa 100644 --- a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts @@ -43,6 +43,10 @@ export default function useRangePickerValue( pickerValue?: RangeValueType, onPickerValueChange?: RangePickerProps['onPickerValueChange'], ): [currentIndexPickerValue: DateType, setCurrentIndexPickerValue: (value: DateType) => void] { + // ======================== Active ======================== + // `activeIndex` must be valid to avoid getting empty `pickerValue` + const mergedActiveIndex = activeIndex || 0; + // ===================== Picker Value ===================== const [mergedStartPickerValue, setStartPickerValue] = useMergedState( () => defaultPickerValue?.[0] || calendarValue?.[0] || generateConfig.getNow(), @@ -58,16 +62,16 @@ export default function useRangePickerValue( }, ); - const currentPickerValue = [mergedStartPickerValue, mergedEndPickerValue][activeIndex]; + const currentPickerValue = [mergedStartPickerValue, mergedEndPickerValue][mergedActiveIndex]; const setCurrentPickerValue = ( nextPickerValue: DateType, source: 'reset' | 'panel' = 'panel', ) => { - const updater = [setStartPickerValue, setEndPickerValue][activeIndex]; + const updater = [setStartPickerValue, setEndPickerValue][mergedActiveIndex]; updater(nextPickerValue); const clone: [DateType, DateType] = [mergedStartPickerValue, mergedEndPickerValue]; - clone[activeIndex] = nextPickerValue; + clone[mergedActiveIndex] = nextPickerValue; if ( onPickerValueChange && @@ -117,9 +121,9 @@ export default function useRangePickerValue( // >>> calendarValue: Sync with `calendarValue` if changed useLayoutEffect(() => { if (open) { - if (activeIndex === 0 && calendarValue[0]) { + if (mergedActiveIndex === 0 && calendarValue[0]) { setCurrentPickerValue(calendarValue[0], 'reset'); - } else if (activeIndex === 1 && calendarValue[1]) { + } else if (mergedActiveIndex === 1 && calendarValue[1]) { setCurrentPickerValue( // End PickerValue need additional shift getEndDatePickerValue(calendarValue[0], calendarValue[1]), @@ -127,18 +131,18 @@ export default function useRangePickerValue( ); } } - }, [open, calendarValue, activeIndex]); + }, [open, calendarValue, mergedActiveIndex]); // >>> defaultPickerValue: Resync to `defaultPickerValue` for each panel focused useLayoutEffect(() => { if (open && defaultPickerValue) { - if (activeIndex === 0 && defaultPickerValue[0]) { + if (mergedActiveIndex === 0 && defaultPickerValue[0]) { setCurrentPickerValue(defaultPickerValue[0], 'reset'); - } else if (activeIndex === 1 && defaultPickerValue[1]) { + } else if (mergedActiveIndex === 1 && defaultPickerValue[1]) { setCurrentPickerValue(defaultPickerValue[1], 'reset'); } } - }, [open, activeIndex]); + }, [open, mergedActiveIndex]); return [currentPickerValue, setCurrentPickerValue]; } diff --git a/src/NewPicker/index.tsx b/src/NewPicker/index.tsx index 025472d83..e99a744f1 100644 --- a/src/NewPicker/index.tsx +++ b/src/NewPicker/index.tsx @@ -6,6 +6,7 @@ * - Support `preserveInvalidOnBlur` to not to clean input if invalid * - `pickerValue` is now full controlled * - `defaultPickerValue` will take effect on every field active with popup opening. + * - [Break] clear button return the event with `onClick` * * - Picker * - TimePicker support `changeOnScroll` diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index cd7d087d0..8c9ab8eda 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -315,6 +315,7 @@ export interface PickerRef { // ======================== Selector ======================== export interface OpenConfig { + index?: number /** * Keep open if prev state is open but set close within the same frame. * This is used for RangePicker input switch to another one. @@ -322,7 +323,7 @@ export interface OpenConfig { inherit?: boolean; } -export type OnOpenChange = (open: boolean, index?: number, config?: OpenConfig) => void; +export type OnOpenChange = (open: boolean, config?: OpenConfig) => void; export interface SelectorProps { clearIcon?: React.ReactNode; suffixIcon?: React.ReactNode; diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 999eac91f..1bb1a1842 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -189,6 +189,7 @@ describe('Picker.Range', () => { expect(onChange).toHaveBeenCalledWith([expect.anything(), null], ['1990-09-11', '']); clearValue(); + expect(onChange).toHaveBeenCalledWith(null, ['', '']); onChange.mockReset(); // Not allow empty with startDate @@ -198,8 +199,6 @@ describe('Picker.Range', () => { expect(onChange).not.toHaveBeenCalled(); }); - return; - describe('disabled', () => { it('should no panel open with disabled', () => { const { baseElement } = render(); @@ -214,6 +213,8 @@ describe('Picker.Range', () => { expect(container.querySelectorAll('input')[1].disabled).toBeFalsy(); }); + return; + it('should close panel when finish choose panel and next is disabled with disabled = [false, true]/[true,false]', () => { const { baseElement } = render(); expect(baseElement.querySelectorAll('.rc-picker-input')).toHaveLength(2); @@ -314,6 +315,8 @@ describe('Picker.Range', () => { }); }); + return; + function testRangePickerPresetRange(propsType: 'ranges' | 'presets') { const genProps = (ranges: Record) => { const props: Partial> = {}; diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 83c15a7b0..50febba86 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -187,6 +187,7 @@ export function clearValue() { const clearBtn = document.querySelector('.rc-picker-clear'); fireEvent.mouseDown(clearBtn); fireEvent.mouseUp(clearBtn); + fireEvent.click(clearBtn); } export function inputValue(text: string, index = 0) { From b6cecfdf2fc04749199c7dffe567c33637f3682b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 8 Nov 2023 15:26:48 +0800 Subject: [PATCH 077/380] fix: null value --- docs/examples/debug.tsx | 10 +++-- src/NewPicker/PickerInput/RangePicker.tsx | 39 +++++++++++++------ .../PickerInput/Selector/RangeSelector.tsx | 18 +++++++-- .../PickerInput/hooks/useLockState.ts | 11 ++---- src/NewPicker/PickerInput/hooks/useOpen.ts | 2 +- .../PickerInput/hooks/useRangeValue.ts | 22 +++++++++-- src/NewPicker/interface.tsx | 6 ++- tests/range.spec.tsx | 21 +++++++--- tests/util/commonUtil.tsx | 1 + 9 files changed, 94 insertions(+), 36 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index e6ae5f8bd..41c281c96 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -40,8 +40,8 @@ export default () => { // has end // [null, moment('2023-11-15')], // [moment('2023-11-5'), moment('2023-12-29')], - // [moment('2000-09-03'), moment('1990-09-03')], - null, + [moment('2000-09-03'), moment('1990-09-03')], + // null, ); return ( @@ -50,6 +50,8 @@ export default () => {
            { // onPickerValueChange={(dates, info) => { // console.log('๐Ÿญ Picker Value Change:', dates, info); // }} - disabled + // disabled={[true, false]} suffixIcon="๐Ÿงถ" disabledDate={(date) => date.date() === 11} // onFocus={() => { @@ -92,7 +94,7 @@ export default () => { // // align: true, // }} // preserveInvalidOnBlur - // showTime={{}} + showTime onChange={(val, text) => { console.log('๐Ÿ”ฅ Change:', val, text); setRangeValue(val); diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index f7e3098a0..d9b145cb6 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -1,4 +1,6 @@ import { useMergedState } from 'rc-util'; +import omit from 'rc-util/lib/omit'; +import warning from 'rc-util/lib/warning'; import * as React from 'react'; import useShowTime from '../hooks/useShowTime'; import type { @@ -96,12 +98,12 @@ export default function Picker(props: RangePickerProps const { // Style prefixCls = 'rc-picker', - className, - style, styles = {}, classNames = {}, // Value + defaultValue, + value, changeOnBlur, order = true, @@ -231,12 +233,8 @@ export default function Picker(props: RangePickerProps // ====================== Invalidate ====================== const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, mergedShowTime); - // ======================== Order ========================= - // When exist disabled, it should not support order - const orderOnChange = mergedDisabled.some((d) => d) ? false : order; // ======================== Value ========================= - const [calendarValue, triggerCalendarChange, triggerSubmitChange, emptyValue] = useRangeValue( { ...props, @@ -244,10 +242,10 @@ export default function Picker(props: RangePickerProps order, picker, }, + mergedDisabled, formatList, focused, blurRef, - orderOnChange, isInvalidateDate, needConfirm, ); @@ -355,7 +353,7 @@ export default function Picker(props: RangePickerProps const activeLen = activeList?.length; if (activeLen > 1 || hasDisabled) { // Close anyway - triggerOpen(false, { index: activeIndex }); + triggerOpen(false, { index: activeIndex, force: true }); triggerSubmitChange(nextValue); } else if (activeLen === 1) { // Trigger @@ -381,6 +379,7 @@ export default function Picker(props: RangePickerProps const onSelectorClear = () => { triggerSubmitChange(null); + triggerOpen(false, { force: true }); }; // ======================== Hover ========================= @@ -406,7 +405,7 @@ export default function Picker(props: RangePickerProps const onPresetSubmit = (nextValues: RangeValueType) => { triggerSubmitChange(nextValues); - triggerOpen(false); + triggerOpen(false, { force: true }); }; // ======================== Panel ========================= @@ -455,7 +454,7 @@ export default function Picker(props: RangePickerProps const panel = ( , 'onChange' | 'onCalendarChange'>)} + {...omit(props, ['onChange', 'onCalendarChange', 'style', 'className'])} showNow={mergedShowNow} showTime={mergedShowTime} multiple={multiplePanel} @@ -500,8 +499,26 @@ export default function Picker(props: RangePickerProps [prefixCls, locale, generateConfig, components.button], ); - // ======================== Render ======================== + // ====================== DevWarning ====================== + if (process.env.NODE_ENV !== 'production') { + const isIndexEmpty = (index: number) => { + return ( + // Value is empty + (value && !value[index]) || + // DefaultValue is empty + (defaultValue && !defaultValue[index]) + ); + }; + + if (mergedDisabled.some((fieldDisabled, index) => fieldDisabled && isIndexEmpty(index))) { + warning( + false, + '`disabled` should not set with empty `value`. You should set `allowEmpty` or `value` instead.', + ); + } + } + // ======================== Render ======================== return ( ( locale, generateConfig, + // Style + className, + style, + // Click onClick, onClear, @@ -159,10 +163,16 @@ function RangeSelector( // ======================== Render ======================== return (
            diff --git a/src/NewPicker/PickerInput/hooks/useLockState.ts b/src/NewPicker/PickerInput/hooks/useLockState.ts index 53c15b20c..fdddc0302 100644 --- a/src/NewPicker/PickerInput/hooks/useLockState.ts +++ b/src/NewPicker/PickerInput/hooks/useLockState.ts @@ -11,16 +11,16 @@ export default function useLockState( value: T, defaultValue?: T, onChange?: (next: T) => void, -): [state: T, setState: (nextState: T) => void] { +): [state: T, setState: (nextState: T, immediately?: boolean) => void] { const [state, setState] = useMergedState(defaultValue, { value, }); const rafRef = React.useRef(null); - const updateValue = useEvent((next: T) => { + const updateValue = useEvent((next: T, immediately?: boolean) => { raf.cancel(rafRef.current); - if (next) { + if (next || immediately) { setState(next); } else { rafRef.current = raf(() => { @@ -42,10 +42,7 @@ export default function useLockState( * Trigger `callback` immediately when `condition` is `true`. * But trigger `callback` in next frame when `condition` is `false`. */ -export function useLockEffect( - condition: boolean, - callback: (next: boolean) => void, -) { +export function useLockEffect(condition: boolean, callback: (next: boolean) => void) { useLayoutUpdateEffect(() => { if (condition) { callback(condition); diff --git a/src/NewPicker/PickerInput/hooks/useOpen.ts b/src/NewPicker/PickerInput/hooks/useOpen.ts index fb7eb0be7..5e09fc0b3 100644 --- a/src/NewPicker/PickerInput/hooks/useOpen.ts +++ b/src/NewPicker/PickerInput/hooks/useOpen.ts @@ -15,7 +15,7 @@ export default function useOpen( function setOpen(next: boolean, config: OpenConfig = {}) { if (!config.inherit || rafOpen) { - setRafOpen(next); + setRafOpen(next, config.force); } } diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index a5ecbbbfa..ea7981a64 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -24,10 +24,10 @@ export default function useRangeValue( | 'preserveInvalidOnBlur' | 'picker' >, + disabled: [boolean, boolean], formatList: string[], focused: boolean, blurRef: React.RefObject<'input' | 'panel'>, - orderOnChange: boolean, isInvalidateDate: (date: DateType) => boolean, needConfirm: boolean, ): [ @@ -57,6 +57,8 @@ export default function useRangeValue( order, } = info; + const orderOnChange = disabled.some((d) => d) ? false : order; + // ============================ Values ============================ // Used for internal value management. // It should always use `mergedValue` in render logic @@ -120,7 +122,17 @@ export default function useRangeValue( const triggerSubmit = useEvent((nextValue?: RangeValueType) => { const isNullValue = nextValue === null; - const clone: RangeValueType = isNullValue ? [] : [...(nextValue || calendarValue)]; + + const clone: RangeValueType = [...calendarValue]; + + // Fill null value + if (isNullValue) { + disabled.forEach((fieldDisabled, index) => { + if (!fieldDisabled) { + clone[index] = null; + } + }); + } // Only when exist value to sort if (orderOnChange && clone[0] && clone[1]) { @@ -174,7 +186,11 @@ export default function useRangeValue( const [isSameSubmitDates] = isSameDates(submitValue, clone); if (!isSameSubmitDates) { - onChange(isNullValue ? null : clone, getDateTexts(clone)); + onChange( + // Return null directly if all date are empty + isNullValue && clone.every((val) => !val) ? null : clone, + getDateTexts(clone), + ); } } } diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 8c9ab8eda..917617cb8 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -315,12 +315,16 @@ export interface PickerRef { // ======================== Selector ======================== export interface OpenConfig { - index?: number + index?: number; /** * Keep open if prev state is open but set close within the same frame. * This is used for RangePicker input switch to another one. */ inherit?: boolean; + /** + * By default. Close popup will delay for one frame. `force` will trigger immediately. + */ + force?: boolean; } export type OnOpenChange = (open: boolean, config?: OpenConfig) => void; diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 1bb1a1842..33b650041 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -213,14 +213,17 @@ describe('Picker.Range', () => { expect(container.querySelectorAll('input')[1].disabled).toBeFalsy(); }); - return; - it('should close panel when finish choose panel and next is disabled with disabled = [false, true]/[true,false]', () => { const { baseElement } = render(); expect(baseElement.querySelectorAll('.rc-picker-input')).toHaveLength(2); fireEvent.click(baseElement.querySelectorAll('.rc-picker-input')[0]); expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy(); fireEvent.click(baseElement.querySelector('.rc-picker-cell-inner')); + + act(() => { + jest.runAllTimers(); + }); + expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeTruthy(); }); @@ -231,6 +234,11 @@ describe('Picker.Range', () => { expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy(); fireEvent.click(baseElement.querySelector('.rc-picker-cell-inner')); fireEvent.click(baseElement.querySelector('.rc-picker-ok button')); + + act(() => { + jest.runAllTimers(); + }); + expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeTruthy(); }); @@ -239,10 +247,13 @@ describe('Picker.Range', () => { expect(baseElement.querySelectorAll('.rc-picker-input')).toHaveLength(2); fireEvent.click(baseElement.querySelectorAll('.rc-picker-input')[1]); expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy(); - fireEvent.click( - baseElement.querySelector('.rc-picker-cell-range-start .rc-picker-cell-inner'), - ); + selectCell(11); fireEvent.click(baseElement.querySelector('.rc-picker-ok button')); + + act(() => { + jest.runAllTimers(); + }); + expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeTruthy(); }); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 50febba86..2d7653132 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -139,6 +139,7 @@ export function closePicker(container: HTMLElement, index = 0) { export function isOpen() { const dropdown = document.querySelector('.rc-picker-dropdown'); + console.log(dropdown.className); return dropdown && !dropdown.classList.contains('rc-picker-dropdown-hidden'); } From 33eefb4b2dbb1ab64123cb03041ed9b613dbc745 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 8 Nov 2023 15:30:21 +0800 Subject: [PATCH 078/380] test: fix test --- src/NewPicker/PickerInput/hooks/useRangeValue.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index ea7981a64..716d34ecd 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -123,7 +123,7 @@ export default function useRangeValue( const triggerSubmit = useEvent((nextValue?: RangeValueType) => { const isNullValue = nextValue === null; - const clone: RangeValueType = [...calendarValue]; + const clone: RangeValueType = [...(nextValue || calendarValue)]; // Fill null value if (isNullValue) { From 7cfe062f5dee4ce571391d8f64a773074842ce6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 8 Nov 2023 15:52:57 +0800 Subject: [PATCH 079/380] test: more test case --- docs/examples/debug.tsx | 1 + src/NewPicker/PickerInput/RangePicker.tsx | 3 +++ src/NewPicker/PickerInput/Selector/RangeSelector.tsx | 7 +++++++ tests/range.spec.tsx | 12 ++++++------ tests/util/commonUtil.tsx | 4 +++- 5 files changed, 20 insertions(+), 7 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 41c281c96..1a3a96e99 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -73,6 +73,7 @@ export default () => { // }, // ]} value={rangeValue} + placeholder={['Start', 'End']} // defaultPickerValue={[moment('2020-01-01'), null]} // onPickerValueChange={(dates, info) => { // console.log('๐Ÿญ Picker Value Change:', dates, info); diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index d9b145cb6..2f6804f9f 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -52,6 +52,9 @@ export interface RangePickerProps extends SharedPickerProps }, ) => void; + // Placeholder + placeholder?: [string, string]; + // Picker Value /** * Config the popup panel date. diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 170219adf..1c0e889b7 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -12,6 +12,8 @@ export interface RangeSelectorProps extends SelectorProps( @@ -31,6 +33,9 @@ function RangeSelector( locale, generateConfig, + // Placeholder + placeholder, + // Style className, style, @@ -112,6 +117,8 @@ function RangeSelector( // ============= By Index ============= value: valueTexts[index], + placeholder: (placeholder || [])[index], + active: activeIndex === index, helped: allHelp || (activeHelp && activeIndex === index), diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 33b650041..f593acd3f 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -326,8 +326,6 @@ describe('Picker.Range', () => { }); }); - return; - function testRangePickerPresetRange(propsType: 'ranges' | 'presets') { const genProps = (ranges: Record) => { const props: Partial> = {}; @@ -422,11 +420,11 @@ describe('Picker.Range', () => { ); openPicker(container); - expect(document.querySelectorAll('.rc-picker-header-view')[0].textContent).toEqual('Nov1989'); + expect(document.querySelectorAll('.rc-picker-header-view')[0].textContent).toEqual('1989ๅนด11ๆœˆ'); closePicker(container); openPicker(container, 1); - expect(document.querySelectorAll('.rc-picker-header-view')[1].textContent).toEqual('Oct1990'); + expect(document.querySelectorAll('.rc-picker-header-view')[1].textContent).toEqual('1990ๅนด10ๆœˆ'); closePicker(container, 1); }); @@ -439,7 +437,7 @@ describe('Picker.Range', () => { ); openPicker(container); expect(document.querySelector('.rc-picker-year-btn').textContent).toEqual( - startDate.format('YYYY'), + startDate.format('YYYYๅนด'), ); }); @@ -458,11 +456,13 @@ describe('Picker.Range', () => { openPicker(container); }).not.toThrow(); expect(document.querySelector('.rc-picker-year-btn').textContent).toEqual( - startDate.format('YYYY'), + startDate.format('YYYYๅนด'), ); }); }); + return; + describe('focus test', () => { let domMock: ReturnType; let focused = false; diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 2d7653132..00fac045d 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -2,6 +2,7 @@ import React from 'react'; // import { mount as originMount, ReactWrapper } from 'enzyme'; import { act, fireEvent } from '@testing-library/react'; import dayjs, { type Dayjs } from 'dayjs'; +import 'dayjs/locale/zh-cn'; import moment, { type Moment, type unitOfTime } from 'moment'; import Picker, { PickerPanel, type PickerProps } from '../../src'; import dayGenerateConfig from '../../src/generate/dayjs'; @@ -21,6 +22,8 @@ import RangePicker, { type RangePickerTimeProps, } from '../../src/RangePicker'; +dayjs.locale('zh-cn'); + const FULL_FORMAT = 'YYYY-MM-DD HH:mm:ss'; // export type Wrapper = ReactWrapper & { @@ -139,7 +142,6 @@ export function closePicker(container: HTMLElement, index = 0) { export function isOpen() { const dropdown = document.querySelector('.rc-picker-dropdown'); - console.log(dropdown.className); return dropdown && !dropdown.classList.contains('rc-picker-dropdown-hidden'); } From 3795f0f0062d42b5e085cbd4306e5d05cce8b9c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 8 Nov 2023 16:31:35 +0800 Subject: [PATCH 080/380] feat: TimePanel also response pickerValue --- docs/examples/debug.tsx | 12 +++-- src/NewPicker/PickerInput/RangePicker.tsx | 8 ++- .../PickerInput/hooks/useInvalidate.ts | 9 +++- .../PickerInput/hooks/useRangeValue.ts | 2 + .../TimePanel/TimePanelBody/TimeColumn.tsx | 7 +-- .../TimePanel/TimePanelBody/index.tsx | 51 ++++++++++++++++--- src/NewPicker/PickerPanel/TimePanel/index.tsx | 2 - src/NewPicker/hooks/useShowTime.ts | 8 +-- src/NewPicker/interface.tsx | 4 ++ tests/range.spec.tsx | 12 +++-- 10 files changed, 85 insertions(+), 30 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 1a3a96e99..71f1912d3 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -95,7 +95,9 @@ export default () => { // // align: true, // }} // preserveInvalidOnBlur - showTime + showTime={{ + defaultValue: [moment('2000-01-01 01:03:05'), moment('2000-01-01 03:07:22')], + }} onChange={(val, text) => { console.log('๐Ÿ”ฅ Change:', val, text); setRangeValue(val); @@ -127,7 +129,7 @@ export default () => {
            - {/* { showTime={{ format: 'HH:mm:ss.SSS', showTitle: true, - defaultValue: moment('2000-01-01 01:03:05.800'), + // defaultValue: moment('2000-01-01 01:03:05.800'), }} - // pickerValue={moment('2000-01-01 01:03:05.800')} - /> */} + pickerValue={moment('2000-01-01 01:03:05.800')} + /> {/* (config: T | [T, T] | null | undefined, defaultConfig: export type RangeValueType = [start?: DateType, end?: DateType]; -export interface RangePickerProps extends SharedPickerProps { +export interface RangePickerProps extends Omit, 'showTime'> { // Value value?: RangeValueType; defaultValue?: RangeValueType; @@ -95,6 +96,9 @@ export interface RangePickerProps extends SharedPickerProps // Control disabled?: boolean | [boolean, boolean]; allowEmpty?: [boolean, boolean]; + + // Time + showTime?: boolean | RangeTimeProps; } export default function Picker(props: RangePickerProps) { @@ -236,7 +240,6 @@ export default function Picker(props: RangePickerProps // ====================== Invalidate ====================== const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, mergedShowTime); - // ======================== Value ========================= const [calendarValue, triggerCalendarChange, triggerSubmitChange, emptyValue] = useRangeValue( { @@ -245,6 +248,7 @@ export default function Picker(props: RangePickerProps order, picker, }, + mergedShowTime, mergedDisabled, formatList, focused, diff --git a/src/NewPicker/PickerInput/hooks/useInvalidate.ts b/src/NewPicker/PickerInput/hooks/useInvalidate.ts index 232b9b501..1cf287f9f 100644 --- a/src/NewPicker/PickerInput/hooks/useInvalidate.ts +++ b/src/NewPicker/PickerInput/hooks/useInvalidate.ts @@ -1,6 +1,11 @@ import { useEvent } from 'rc-util'; import type { GenerateConfig } from '../../../generate'; -import type { PanelMode, SharedPickerProps, SharedTimeProps } from '../../interface'; +import type { + PanelMode, + RangeTimeProps, + SharedPickerProps, + SharedTimeProps, +} from '../../interface'; /** * Check if provided date is valid for the `disabledDate` & `showTime.disabledTime`. @@ -9,7 +14,7 @@ export default function useInvalidate( generateConfig: GenerateConfig, picker: PanelMode, disabledDate?: SharedPickerProps['disabledDate'], - showTime?: SharedTimeProps, + showTime?: SharedTimeProps | RangeTimeProps, ) { // Check disabled date const isInvalidate = useEvent((date: DateType) => { diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 716d34ecd..6bcc70984 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -1,3 +1,4 @@ +import type { RangeTimeProps } from '../../interface'; import { useEvent, useMergedState } from 'rc-util'; import * as React from 'react'; import { isSame, isSameTimestamp } from '../../../utils/dateUtil'; @@ -24,6 +25,7 @@ export default function useRangeValue( | 'preserveInvalidOnBlur' | 'picker' >, + showTime: RangeTimeProps, disabled: [boolean, boolean], formatList: string[], focused: boolean, diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx index afa6f512e..4783dd0d5 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -16,6 +16,7 @@ export type Unit = { export interface TimeUnitColumnProps { units: Unit[]; value: number | string; + optionalValue?: number | string; type: 'hour' | 'minute' | 'second' | 'millisecond' | 'meridiem'; onChange: (value: number | string) => void; changeOnScroll?: boolean; @@ -24,7 +25,7 @@ export interface TimeUnitColumnProps { } export default function TimeColumn(props: TimeUnitColumnProps) { - const { showTitle, title, units, value, type, onChange, changeOnScroll } = props; + const { showTitle, title, units, value, optionalValue, type, onChange, changeOnScroll } = props; const { prefixCls, cellRender, now, locale } = React.useContext(PanelContext); @@ -68,8 +69,8 @@ export default function TimeColumn(props: TimeUnitColumnProps) { // Effect sync value scroll useLayoutEffect(() => { - scrollToValue(value); - }, [value, units, scrollToValue]); + scrollToValue(value ?? optionalValue); + }, [value, optionalValue, units, scrollToValue]); // Scroll event if sync onScroll const onInternalScroll: React.UIEventHandler = (event) => { diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index 49c783bbb..1ba352f45 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -85,10 +85,19 @@ export default function TimePanelBody(props: SharedTimeProps { + const valueUnitVal = value && generateConfig[func](value); + const pickerUnitValue = pickerValue && generateConfig[func](pickerValue); + + return [valueUnitVal, pickerUnitValue]; + }; + + const [hour, pickerHour] = getUnitValue('getHour'); + const [minute, pickerMinute] = getUnitValue('getMinute'); + const [second, pickerSecond] = getUnitValue('getSecond'); + const [millisecond, pickerMillisecond] = getUnitValue('getMillisecond'); const meridiem = hour === null ? null : isAM(hour) ? 'am' : 'pm'; // ========================== Show ========================== @@ -280,7 +289,19 @@ export default function TimePanelBody(props: SharedTimeProps { let tmpl = generateConfig.getNow(); - if (validHour !== undefined) { + const isNotNull = (num: number) => num !== null && num !== undefined; + + if (isNotNull(hour)) { + tmpl = generateConfig.setHour(tmpl, hour); + tmpl = generateConfig.setMinute(tmpl, minute); + tmpl = generateConfig.setSecond(tmpl, second); + tmpl = generateConfig.setMillisecond(tmpl, millisecond); + } else if (isNotNull(pickerHour)) { + tmpl = generateConfig.setHour(tmpl, pickerHour); + tmpl = generateConfig.setMinute(tmpl, pickerMinute); + tmpl = generateConfig.setSecond(tmpl, pickerSecond); + tmpl = generateConfig.setMillisecond(tmpl, pickerMillisecond); + } else if (isNotNull(validHour)) { tmpl = generateConfig.setHour(tmpl, validHour); tmpl = generateConfig.setMinute(tmpl, validMinute); tmpl = generateConfig.setSecond(tmpl, validSecond); @@ -288,7 +309,21 @@ export default function TimePanelBody(props: SharedTimeProps { triggerChange(generateConfig.setHour(triggerDateTmpl, val)); @@ -323,6 +358,7 @@ export default function TimePanelBody(props: SharedTimeProps(props: SharedTimeProps(props: SharedTimeProps(props: SharedTimeProps(props: SharedPanelProps( - showTime?: boolean | SharedTimeProps, -) { +export default function useShowTime(showTime?: boolean | Config): Config { if (showTime === true) { - return {}; + return {} as Config; } return showTime || null; diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 917617cb8..f2ca567fd 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -172,6 +172,10 @@ export interface SharedTimeProps { changeOnScroll?: boolean; } +export type RangeTimeProps = Omit, 'defaultValue'> & { + defaultValue?: [DateType, DateType]; +}; + // ======================= Components ======================= export interface SharedPanelProps { // Style diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index f593acd3f..2e6151cfc 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -420,11 +420,15 @@ describe('Picker.Range', () => { ); openPicker(container); - expect(document.querySelectorAll('.rc-picker-header-view')[0].textContent).toEqual('1989ๅนด11ๆœˆ'); + expect(document.querySelectorAll('.rc-picker-header-view')[0].textContent).toEqual( + '1989ๅนด11ๆœˆ', + ); closePicker(container); openPicker(container, 1); - expect(document.querySelectorAll('.rc-picker-header-view')[1].textContent).toEqual('1990ๅนด10ๆœˆ'); + expect(document.querySelectorAll('.rc-picker-header-view')[1].textContent).toEqual( + '1990ๅนด10ๆœˆ', + ); closePicker(container, 1); }); @@ -461,8 +465,6 @@ describe('Picker.Range', () => { }); }); - return; - describe('focus test', () => { let domMock: ReturnType; let focused = false; @@ -522,6 +524,8 @@ describe('Picker.Range', () => { }); }); + return; + it('mode is array', () => { const { container } = render(); openPicker(container); From b457b800702d5b86086306db441405c3820992a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 8 Nov 2023 16:43:25 +0800 Subject: [PATCH 081/380] chore: pickerValue --- docs/examples/debug.tsx | 8 ++++---- src/NewPicker/PickerInput/hooks/useRangeValue.ts | 5 ++++- .../PickerPanel/TimePanel/TimePanelBody/index.tsx | 1 + 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 71f1912d3..b4606aba0 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -40,8 +40,8 @@ export default () => { // has end // [null, moment('2023-11-15')], // [moment('2023-11-5'), moment('2023-12-29')], - [moment('2000-09-03'), moment('1990-09-03')], - // null, + // [moment('2000-09-03'), moment('1990-09-03')], + null, ); return ( @@ -129,7 +129,7 @@ export default () => {
            - { // defaultValue: moment('2000-01-01 01:03:05.800'), }} pickerValue={moment('2000-01-01 01:03:05.800')} - /> + /> */} {/* ( const orderOnChange = disabled.some((d) => d) ? false : order; + // ====================== Time Picker Value ======================= + const { defaultValue: timeDefaultValue = [] } = showTime || {}; + // ============================ Values ============================ // Used for internal value management. // It should always use `mergedValue` in render logic diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index 1ba352f45..84ec38357 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -85,6 +85,7 @@ export default function TimePanelBody(props: SharedTimeProps { From 1707c40375809e9b47c5810fac06b42290f5b5d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 8 Nov 2023 17:24:24 +0800 Subject: [PATCH 082/380] chore: time picker support pickerValue --- src/NewPicker/PickerInput/RangePicker.tsx | 2 +- .../PickerInput/hooks/useRangePickerValue.ts | 65 +++++++++++++++---- .../PickerInput/hooks/useRangeValue.ts | 5 -- .../TimePanel/TimePanelBody/index.tsx | 33 ++-------- 4 files changed, 61 insertions(+), 44 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index aa19a829e..15d9f0034 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -248,7 +248,6 @@ export default function Picker(props: RangePickerProps order, picker, }, - mergedShowTime, mergedDisabled, formatList, focused, @@ -308,6 +307,7 @@ export default function Picker(props: RangePickerProps multiplePanel, defaultPickerValue, pickerValue, + mergedShowTime.defaultValue, onPickerValueChange, ); diff --git a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts index 618ea78fa..edc328fcb 100644 --- a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts @@ -1,5 +1,6 @@ import { useMergedState } from 'rc-util'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; +import * as React from 'react'; import type { GenerateConfig } from '../../../generate'; import { isSame } from '../../../utils/dateUtil'; import type { InternalMode, Locale, PanelMode } from '../../interface'; @@ -31,6 +32,30 @@ export function offsetPanelDate( } } +const EMPTY_LIST: RangeValueType = []; + +// Merge the `showTime.defaultValue` into `pickerValue` +function fillTimePickerValue( + generateConfig: GenerateConfig, + date: DateType, + timePickerValue?: DateType, +) { + let tmpDate = date; + + const getFn = ['getHour', 'getMinute', 'getSecond', 'getMillisecond'] as const; + const setFn = ['setHour', 'setMinute', 'setSecond', 'setMillisecond'] as const; + + setFn.forEach((fn, index) => { + if (timePickerValue) { + tmpDate = generateConfig[fn](tmpDate, generateConfig[getFn[index]](timePickerValue)); + } else { + tmpDate = generateConfig[fn](tmpDate, 0); + } + }); + + return tmpDate; +} + export default function useRangePickerValue( generateConfig: GenerateConfig, locale: Locale, @@ -39,8 +64,11 @@ export default function useRangePickerValue( activeIndex: number, pickerMode: InternalMode, multiplePanel: boolean, - defaultPickerValue?: RangeValueType, - pickerValue?: RangeValueType, + defaultPickerValue: RangeValueType = EMPTY_LIST, + pickerValue: RangeValueType = EMPTY_LIST, + // This is legacy from origin logic. + // We will take `showTime.defaultValue` as the part of `pickerValue` + timeDefaultValue: RangeValueType = EMPTY_LIST, onPickerValueChange?: RangePickerProps['onPickerValueChange'], ): [currentIndexPickerValue: DateType, setCurrentIndexPickerValue: (value: DateType) => void] { // ======================== Active ======================== @@ -48,19 +76,34 @@ export default function useRangePickerValue( const mergedActiveIndex = activeIndex || 0; // ===================== Picker Value ===================== + + const getDefaultPickerValue = (index: number) => { + const rawDate = defaultPickerValue[index] || calendarValue[index] || generateConfig.getNow(); + return fillTimePickerValue(generateConfig, rawDate, timeDefaultValue[index]); + }; + + const [startPickerValue, endPickerValue] = React.useMemo(() => { + const [startValue, endValue] = pickerValue; + + const filledStart = + startValue && fillTimePickerValue(generateConfig, startValue, timeDefaultValue[0]); + const filledEnd = + endValue && fillTimePickerValue(generateConfig, endValue, timeDefaultValue[1]); + + return [filledStart, filledEnd]; + }, [pickerValue, timeDefaultValue, generateConfig]); + + // State const [mergedStartPickerValue, setStartPickerValue] = useMergedState( - () => defaultPickerValue?.[0] || calendarValue?.[0] || generateConfig.getNow(), + () => getDefaultPickerValue(0), { - value: pickerValue?.[0], + value: startPickerValue, }, ); - const [mergedEndPickerValue, setEndPickerValue] = useMergedState( - () => defaultPickerValue?.[1] || calendarValue?.[1] || generateConfig.getNow(), - { - value: pickerValue?.[1], - }, - ); + const [mergedEndPickerValue, setEndPickerValue] = useMergedState(() => getDefaultPickerValue(1), { + value: endPickerValue, + }); const currentPickerValue = [mergedStartPickerValue, mergedEndPickerValue][mergedActiveIndex]; const setCurrentPickerValue = ( @@ -78,7 +121,7 @@ export default function useRangePickerValue( (!isSame(generateConfig, locale, mergedStartPickerValue, clone[0], pickerMode) || !isSame(generateConfig, locale, mergedEndPickerValue, clone[1], pickerMode)) ) { - onPickerValueChange?.(clone, { source }); + onPickerValueChange(clone, { source }); } }; diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 13d743c3e..716d34ecd 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -1,7 +1,6 @@ import { useEvent, useMergedState } from 'rc-util'; import * as React from 'react'; import { isSame, isSameTimestamp } from '../../../utils/dateUtil'; -import type { RangeTimeProps } from '../../interface'; import type { RangePickerProps, RangeValueType } from '../RangePicker'; import { useLockEffect } from './useLockState'; @@ -25,7 +24,6 @@ export default function useRangeValue( | 'preserveInvalidOnBlur' | 'picker' >, - showTime: RangeTimeProps, disabled: [boolean, boolean], formatList: string[], focused: boolean, @@ -61,9 +59,6 @@ export default function useRangeValue( const orderOnChange = disabled.some((d) => d) ? false : order; - // ====================== Time Picker Value ======================= - const { defaultValue: timeDefaultValue = [] } = showTime || {}; - // ============================ Values ============================ // Used for internal value management. // It should always use `mergedValue` in render logic diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index 84ec38357..c48a8cf59 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -72,7 +72,6 @@ export default function TimePanelBody(props: SharedTimeProps(props: SharedTimeProps>> Pick Fallback - const getEnabled = (units: Unit[], val: number, defaultVal: number) => { + const getEnabled = (units: Unit[], val: number) => { const enabledUnits = units.filter((unit) => !unit.disabled); return ( val ?? - // Fallback to picker value - enabledUnits.find((unit) => unit.value === defaultVal)?.value ?? // Fallback to enabled value - enabledUnits[0].value ?? - // Fallback to picker value again since not have validate unit - defaultVal + enabledUnits[0].value ); }; // >>> Minutes - const validHour = getEnabled( - rowHourUnits, - hour, - defaultValue && generateConfig.getHour(defaultValue), - ); + const validHour = getEnabled(rowHourUnits, hour); const minuteUnits = React.useMemo(() => getMinuteUnits(validHour), [getMinuteUnits, validHour]); // >>> Seconds - const validMinute = getEnabled( - minuteUnits, - minute, - defaultValue && generateConfig.getMinute(defaultValue), - ); + const validMinute = getEnabled(minuteUnits, minute); const secondUnits = React.useMemo( () => getSecondUnits(validHour, validMinute), [getSecondUnits, validHour, validMinute], ); // >>> Milliseconds - const validSecond = getEnabled( - secondUnits, - second, - defaultValue && generateConfig.getSecond(defaultValue), - ); + const validSecond = getEnabled(secondUnits, second); const millisecondUnits = React.useMemo( () => getMillisecondUnits(validHour, validMinute, validSecond), [getMillisecondUnits, validHour, validMinute, validSecond], ); - const validMillisecond = getEnabled( - millisecondUnits, - millisecond, - defaultValue && generateConfig.getMillisecond(defaultValue), - ); + const validMillisecond = getEnabled(millisecondUnits, millisecond); // Meridiem const meridiemUnits = React.useMemo(() => { From 44a077a02c786f240b4487540c085c3fea7600f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 8 Nov 2023 19:15:22 +0800 Subject: [PATCH 083/380] chore: ref-able --- src/NewPicker/PickerInput/RangePicker.tsx | 26 ++++++++++- .../PickerInput/Selector/RangeSelector.tsx | 4 +- .../TimePanel/TimePanelBody/index.tsx | 1 - src/NewPicker/index.tsx | 12 ++++-- src/NewPicker/interface.tsx | 6 ++- tests/range.spec.tsx | 43 +++++++++++++------ tests/util/commonUtil.tsx | 14 +++--- 7 files changed, 79 insertions(+), 27 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 15d9f0034..64b38c079 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -7,6 +7,7 @@ import type { InternalMode, OnOpenChange, OpenConfig, + PickerRef, RangeTimeProps, SelectorProps, SelectorRef, @@ -101,7 +102,7 @@ export interface RangePickerProps extends Omit; } -export default function Picker(props: RangePickerProps) { +function RangePicker(props: RangePickerProps, ref: React.Ref) { const { // Style prefixCls = 'rc-picker', @@ -166,8 +167,19 @@ export default function Picker(props: RangePickerProps components = {}, } = props; + // ========================= Refs ========================= const selectorRef = React.useRef(); + React.useImperativeHandle(ref, () => ({ + nativeElement: selectorRef.current?.nativeElement, + focus: () => { + selectorRef.current?.focus(); + }, + blur: () => { + selectorRef.current?.blur(); + }, + })); + // =================== Disabled & Empty =================== const mergedDisabled = separateConfig(disabled, false); const mergedAllowEmpty = separateConfig(allowEmpty, false); @@ -307,7 +319,7 @@ export default function Picker(props: RangePickerProps multiplePanel, defaultPickerValue, pickerValue, - mergedShowTime.defaultValue, + mergedShowTime?.defaultValue, onPickerValueChange, ); @@ -576,3 +588,13 @@ export default function Picker(props: RangePickerProps ); } + +const RefRangePicker = React.forwardRef(RangePicker) as ( + props: RangePickerProps & { ref?: React.Ref }, +) => React.ReactElement; + +if (process.env.NODE_ENV !== 'production') { + (RefRangePicker as any).displayName = 'RefRangePicker'; +} + +export default RefRangePicker; diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 1c0e889b7..c91fde4d0 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -73,7 +73,9 @@ function RangeSelector( React.useImperativeHandle(ref, () => ({ nativeElement: rootRef.current, - focus: (index = 0) => getInput(index)?.focus(), + focus: (index = 0) => { + getInput(index)?.focus(); + }, blur: () => { getInput(0)?.blur(); getInput(1)?.blur(); diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index c48a8cf59..228a4150a 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -71,7 +71,6 @@ export default function TimePanelBody(props: SharedTimeProps = Partial< // ========================= Picker ========================= export type SemanticStructure = 'popup'; +export type CustomFormat = (value: DateType) => string; + export interface SharedPickerProps { // MISC direction?: 'ltr' | 'rtl'; @@ -250,10 +252,12 @@ export interface SharedPickerProps { * Config the input field parse and format. * When set `format.align`, it will force user input align with your input, * it's only support basic format mask: YYYY, MM, DD, HH, mm, ss, SSS. + * Once use config mode, it must be fill with format your config. */ format?: | string - | string[] + | CustomFormat + | (string | CustomFormat)[] | { format: string; align?: boolean; diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 2e6151cfc..c2a9a4cbc 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1,6 +1,7 @@ // Note: zombieJ refactoring import { act, createEvent, fireEvent, render } from '@testing-library/react'; +import type { Dayjs } from 'dayjs'; import type { Moment } from 'moment'; import moment from 'moment'; import KeyCode from 'rc-util/lib/KeyCode'; @@ -8,7 +9,7 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; import type { PickerMode } from '../src/interface'; -import type { RangePickerProps } from '../src/RangePicker'; +import type { PickerRef, RangePickerProps } from '../src/NewPicker'; import { clearValue, clickButton, @@ -328,7 +329,7 @@ describe('Picker.Range', () => { function testRangePickerPresetRange(propsType: 'ranges' | 'presets') { const genProps = (ranges: Record) => { - const props: Partial> = {}; + const props: Partial> = {}; if (propsType === 'ranges') { // ranges is deprecated, but the case needs to be retained for a while props.ranges = ranges; @@ -338,7 +339,7 @@ describe('Picker.Range', () => { props.presets.push({ label, value }); }); } - return props as RangePickerProps; + return props as RangePickerProps; }; it(`${propsType} work`, () => { @@ -472,11 +473,17 @@ describe('Picker.Range', () => { beforeAll(() => { domMock = spyElementPrototypes(HTMLElement, { - focus: () => { + focus(oriDesc: any, ...rest: any[]) { focused = true; + + // Call origin + oriDesc.value.call(this, ...rest); }, - blur: () => { + blur(oriDesc: any, ...rest: any[]) { blurred = true; + + // Call origin + oriDesc.value.call(this, ...rest); }, }); }); @@ -491,32 +498,40 @@ describe('Picker.Range', () => { }); it('function call', () => { - const ref = React.createRef(); + const ref = React.createRef(); render(
            , ); - ref.current!.rangePickerRef.current!.focus(); + ref.current!.focus(); expect(focused).toBeTruthy(); - ref.current!.rangePickerRef.current!.blur(); + ref.current!.blur(); expect(blurred).toBeTruthy(); }); + it('jsdom', () => { + const { container } = render(); + const btn = container.querySelector('button'); + btn.focus(); + }); + it('not crash with showTime defaultValue', () => { const { container } = render( - , + <> + +
            diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index c91fde4d0..a1f1a8bd8 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -55,6 +55,10 @@ function RangeSelector( // Disabled disabled, invalid, + inputReadOnly, + + // Direction + direction, // Open open, @@ -116,6 +120,8 @@ function RangeSelector( }, preserveInvalidOnBlur, + readOnly: inputReadOnly, + // ============= By Index ============= value: valueTexts[index], @@ -178,6 +184,7 @@ function RangeSelector( { [`${prefixCls}-focused`]: activeIndex !== null, [`${prefixCls}-invalid`]: invalid, + [`${prefixCls}-rtl`]: direction === 'rtl', }, className, )} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 946bcf03b..5d366f12b 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -283,6 +283,8 @@ export interface SharedPickerProps { onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; + inputReadOnly?: boolean; + // Disabled disabledDate?: DisabledDate; @@ -351,6 +353,9 @@ export interface SelectorProps { locale: Locale; generateConfig: GenerateConfig; + // Direction + direction?: 'ltr' | 'rtl'; + // Click onClick: React.MouseEventHandler; @@ -376,6 +381,7 @@ export interface SelectorProps { // Invalidate invalid?: boolean; + inputReadOnly?: boolean; } export interface SelectorRef { diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 0c4367064..da70c589f 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -512,12 +512,6 @@ describe('Picker.Range', () => { expect(blurred).toBeTruthy(); }); - it('jsdom', () => { - const { container } = render(); - const btn = container.querySelector('button'); - btn.focus(); - }); - it('not crash with showTime defaultValue', () => { const { container } = render( <> @@ -548,8 +542,6 @@ describe('Picker.Range', () => { expect(document.querySelector('.rc-picker-month-panel')).toBeTruthy(); }); - return; - describe('onPanelChange is array args', () => { it('mode', () => { const onPanelChange = jest.fn(); @@ -558,7 +550,7 @@ describe('Picker.Range', () => { ); openPicker(container); - selectCell('Feb'); + selectCell('2ๆœˆ'); expect(isSame(onPanelChange.mock.calls[0][0][0], '1990-02-03')); expect(onPanelChange.mock.calls[0][1]).toEqual(['date', 'year']); @@ -567,7 +559,7 @@ describe('Picker.Range', () => { openPicker(container, 1); selectCell(1993); - expect(isSame(onPanelChange.mock.calls[0][0][1], '1993-02-03')); + expect(isSame(onPanelChange.mock.calls[0][0][1], '1993-09-03')); expect(onPanelChange.mock.calls[0][1]).toEqual(['month', 'month']); }); @@ -608,6 +600,8 @@ describe('Picker.Range', () => { }); }); + return; + it('type can not change before start time', () => { const onChange = jest.fn(); const { container } = render( From f9ea8b962b44a7b0e0c64906cdc96c5164bd8f17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Nov 2023 11:33:04 +0800 Subject: [PATCH 086/380] chore: add bar --- src/NewPicker/PickerInput/Selector/Input.tsx | 24 ++++++++++++++--- .../PickerInput/Selector/RangeSelector.tsx | 27 ++++++++++++++++--- 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 60223d4a5..1a98ceded 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import { useComposeRef, useEvent } from 'rc-util'; +import { useEvent } from 'rc-util'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import raf from 'rc-util/lib/raf'; import * as React from 'react'; @@ -22,6 +22,12 @@ import { getMaskRange } from './util'; // 2. Re-selection the mask cell // 3. If `cacheValue` match the limit length or cell format (like 1 ~ 12 month), go to next cell +export interface InputRef { + nativeElement: HTMLDivElement; + focus: VoidFunction; + blur: VoidFunction; +} + export interface InputProps extends Omit, 'onChange'> { format?: string; validateFormat: (value: string, format: string) => boolean; @@ -40,7 +46,7 @@ export interface InputProps extends Omit((props, ref) => { +const Input = React.forwardRef((props, ref) => { const { active, suffixIcon, @@ -75,9 +81,18 @@ const Input = React.forwardRef((props, ref) => { }, [value]); // ========================= Refs ========================= + const holderRef = React.useRef(); const inputRef = React.useRef(); - const mergedRef = useComposeRef(ref, inputRef); + React.useImperativeHandle(ref, () => ({ + nativeElement: holderRef.current, + focus: () => { + inputRef.current.focus(); + }, + blur: () => { + inputRef.current.blur(); + }, + })); // ======================== Format ======================== const maskFormat = React.useMemo(() => new MaskFormat(format || ''), [format]); @@ -350,13 +365,14 @@ const Input = React.forwardRef((props, ref) => { return (
            extends SelectorProps { separator?: React.ReactNode; @@ -70,10 +70,10 @@ function RangeSelector( // ========================= Refs ========================= const rootRef = React.useRef(); - const inputStartRef = React.useRef(); - const inputEndRef = React.useRef(); + const inputStartRef = React.useRef(); + const inputEndRef = React.useRef(); - const getInput = (index: number) => [inputStartRef, inputEndRef][index].current; + const getInput = (index: number) => [inputStartRef, inputEndRef][index]?.current; React.useImperativeHandle(ref, () => ({ nativeElement: rootRef.current, @@ -172,6 +172,24 @@ function RangeSelector( }, }); + // ====================== ActiveBar ======================= + const [activeBarStyle, setActiveBarStyle] = React.useState({ + position: 'absolute', + width: 0, + left: 0, + }); + + React.useEffect(() => { + const input = getInput(activeIndex); + if (input) { + setActiveBarStyle((ori) => ({ + ...ori, + width: input.nativeElement.offsetWidth, + left: input.nativeElement.offsetLeft, + })); + } + }, [activeIndex]); + // ======================== Clear ========================= const showClear = (clearIcon && value[0] && !disabled[0]) || (value[1] && !disabled[1]); @@ -195,6 +213,7 @@ function RangeSelector(
            {separator}
            +
            {showClear && }
            From 211bf02fb524b556fe258409d93a9c62bb83c5ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Nov 2023 11:36:23 +0800 Subject: [PATCH 087/380] chore: tmp of empty --- docs/examples/debug.tsx | 10 +++++----- src/NewPicker/PickerInput/RangePicker.tsx | 1 + 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 0edab2abf..4d43e4fc4 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -94,7 +94,7 @@ export default () => { // // // format: 'YYYYMMDD', // // align: true, // }} - // preserveInvalidOnBlur + preserveInvalidOnBlur showTime={{ defaultValue: [moment('2000-01-01 01:03:05'), moment('2000-01-01 03:07:22')], }} @@ -110,10 +110,10 @@ export default () => { // onOpenChange={(nextOpen) => { // console.log('๐Ÿ† Next Open:', nextOpen); // }} - mode={['month', 'year']} - onPanelChange={(val, mode) => { - console.log('๐Ÿ† Panel Change:', val?.[0]?.format('YYYY-MM-DD'), mode); - }} + // mode={['month', 'year']} + // onPanelChange={(val, mode) => { + // console.log('๐Ÿ† Panel Change:', val?.[0]?.format('YYYY-MM-DD'), mode); + // }} // onPickerValueChange={(val) => { // console.log('๐Ÿ‘ป Picker Value Change:', val); // }} diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 0cb944490..1cefe6593 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -282,6 +282,7 @@ function RangePicker(props: RangePickerProps, ref: Rea // ======================= Validate ======================= const isInvalidRange = React.useMemo(() => { + console.log('>>>', focused, emptyValue); // Not check if get focused if (focused || emptyValue) { return false; From b22908c1284d0af48fa34a8bfb9a596b63d4bb56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Nov 2023 13:50:52 +0800 Subject: [PATCH 088/380] chore: bar --- docs/examples/debug.tsx | 1 + src/NewPicker/PickerInput/RangePicker.tsx | 77 ++++++++++--------- src/NewPicker/PickerInput/Selector/Input.tsx | 3 + .../PickerInput/Selector/RangeSelector.tsx | 24 ++++-- src/NewPicker/interface.tsx | 1 - src/NewPicker/util.ts | 7 ++ 6 files changed, 68 insertions(+), 45 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 4d43e4fc4..adf22dc36 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -50,6 +50,7 @@ export default () => {
            (props: RangePickerProps, ref: Rea ); // ======================= Validate ======================= - const isInvalidRange = React.useMemo(() => { - console.log('>>>', focused, emptyValue); - // Not check if get focused - if (focused || emptyValue) { - return false; - } + const [fieldsInvalidates, setFieldsInvalidates] = React.useState<[boolean, boolean]>([ + false, + false, + ]); - const [start, end] = calendarValue; + const onSelectorInvalid = (index: number, valid: boolean) => { + setFieldsInvalidates((ori) => fillIndex(ori, index, valid)); + }; - if ( - // No start - (!mergedAllowEmpty[0] && !start) || - // No end - (!mergedAllowEmpty[1] && !end) - ) { - return true; - } + const submitInvalidates = React.useMemo(() => { + return fieldsInvalidates.map((invalid, index) => { + // If typing invalidate + if (invalid) { + return true; + } - if ( - // Invalidate start - (start && isInvalidateDate(start)) || - // Invalidate end - (end && isInvalidateDate(end)) - ) { - return true; - } + // Not check if all empty + if (emptyValue) { + return false; + } + + const current = calendarValue[index]; - return false; - }, [focused, emptyValue, calendarValue, mergedAllowEmpty, isInvalidateDate]); + // Not allow empty + if (!mergedAllowEmpty[index] && !current) { + return true; + } + + // Invalidate + if (current && isInvalidateDate(current)) { + return true; + } + + return false; + }) as [boolean, boolean]; + }, [calendarValue, emptyValue, fieldsInvalidates, isInvalidateDate, mergedAllowEmpty]); // ===================== Picker Value ===================== const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue( @@ -329,8 +337,7 @@ function RangePicker(props: RangePickerProps, ref: Rea // >>> Mode need wait for `pickerValue` const triggerModeChange = useEvent( (nextPickerValue: DateType, nextMode: PanelMode, triggerEvent?: boolean) => { - const clone: [PanelMode, PanelMode] = [...modes]; - clone[activeIndex] = nextMode; + const clone = fillIndex(modes, activeIndex, nextMode); if (clone[0] !== modes[0] || clone[1] !== modes[1]) { setModes(clone); @@ -348,15 +355,9 @@ function RangePicker(props: RangePickerProps, ref: Rea ); // ======================== Change ======================== - const fillMergedValue = (date: DateType, index: number) => { + const fillMergedValue = (date: DateType, index: number) => // Trigger change only when date changed - const [prevStart, prevEnd] = calendarValue; - - const clone: RangeValueType = [prevStart, prevEnd]; - clone[index] = date; - - return clone; - }; + fillIndex(calendarValue, index, date); const onSelectorChange = (date: DateType, index: number) => { const clone = fillMergedValue(date, index); @@ -470,8 +471,7 @@ function RangePicker(props: RangePickerProps, ref: Rea // >>> Calendar const onPanelCalendarChange: PickerPanelProps['onChange'] = (date) => { - const clone: RangeValueType = [...calendarValue]; - clone[activeIndex] = date; + const clone: RangeValueType = fillIndex(calendarValue, activeIndex, date); if (mergedMode === picker && !needConfirm) { triggerChangeAndFocusNext(date); @@ -628,7 +628,8 @@ function RangePicker(props: RangePickerProps, ref: Rea onClick={onSelectorClick} onClear={onSelectorClear} // Invalid - invalid={isInvalidRange} + invalid={submitInvalidates} + onInvalid={onSelectorInvalid} /> diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 1a98ceded..19f24cb3a 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -44,6 +44,7 @@ export interface InputProps extends Omit void; preserveInvalidOnBlur?: boolean; + invalid?: boolean; } const Input = React.forwardRef((props, ref) => { @@ -58,6 +59,7 @@ const Input = React.forwardRef((props, ref) => { onHelp, onEnter, preserveInvalidOnBlur, + invalid, // Pass to input ...restProps } = props; @@ -373,6 +375,7 @@ const Input = React.forwardRef((props, ref) => { > extends SelectorProps { separator?: React.ReactNode; @@ -14,6 +14,9 @@ export interface RangeSelectorProps extends SelectorProps void; } function RangeSelector( @@ -46,11 +49,14 @@ function RangeSelector( // Change value, - format, - maskFormat, onChange, onSubmit, + + // Valid + format, + maskFormat, preserveInvalidOnBlur, + onInvalid, // Disabled disabled, @@ -125,6 +131,8 @@ function RangeSelector( // ============= By Index ============= value: valueTexts[index], + invalid: invalid[index], + placeholder: (placeholder || [])[index], active: activeIndex === index, @@ -155,10 +163,15 @@ function RangeSelector( const parsed = parseDate(text, format[i]); if (parsed) { + onInvalid(index, false); onChange(parsed, index); - break; + return; } } + + // Tell outer that the value typed is invalid. + // If text is empty, it means valid. + onInvalid(index, !!text); }, onHelp: () => { triggerOpen(true, index); @@ -176,7 +189,6 @@ function RangeSelector( const [activeBarStyle, setActiveBarStyle] = React.useState({ position: 'absolute', width: 0, - left: 0, }); React.useEffect(() => { @@ -201,7 +213,7 @@ function RangeSelector( `${prefixCls}-range`, { [`${prefixCls}-focused`]: activeIndex !== null, - [`${prefixCls}-invalid`]: invalid, + [`${prefixCls}-invalid`]: invalid.some((i) => i), [`${prefixCls}-rtl`]: direction === 'rtl', }, className, diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 5d366f12b..30cf0e029 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -380,7 +380,6 @@ export interface SelectorProps { onOpenChange: OnOpenChange; // Invalidate - invalid?: boolean; inputReadOnly?: boolean; } diff --git a/src/NewPicker/util.ts b/src/NewPicker/util.ts index 60e72ebc1..446bb16ee 100644 --- a/src/NewPicker/util.ts +++ b/src/NewPicker/util.ts @@ -5,3 +5,10 @@ export function toArray(val: T | T[]): T[] { return Array.isArray(val) ? val : [val]; } + +export function fillIndex(ori: T, index: number, value: T[number]): T { + const clone = [...ori] as T; + clone[index] = value; + + return clone; +} From 1ca26d3a4b0c5542e52839343ca1df1c840432d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Nov 2023 13:54:08 +0800 Subject: [PATCH 089/380] test: update snapshot --- tests/__snapshots__/range.spec.tsx.snap | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap index cc4931eab..f704ca390 100644 --- a/tests/__snapshots__/range.spec.tsx.snap +++ b/tests/__snapshots__/range.spec.tsx.snap @@ -61,13 +61,11 @@ exports[`Picker.Range onPanelChange is array args should render correctly in rtl class="rc-picker rc-picker-range rc-picker-rtl" >
            @@ -80,16 +78,14 @@ exports[`Picker.Range onPanelChange is array args should render correctly in rtl class="rc-picker-input" >
            From 6da1bf7ca2a15f0f67fdcf135d3aa521a9f3ba41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Nov 2023 14:14:40 +0800 Subject: [PATCH 090/380] test: update test --- docs/examples/debug.tsx | 8 +-- src/NewPicker/PickerInput/Selector/Icon.tsx | 1 + .../PickerInput/Selector/RangeSelector.tsx | 1 + .../Selector/hooks/useClearIcon.tsx | 5 ++ tests/range.spec.tsx | 64 +++++-------------- 5 files changed, 27 insertions(+), 52 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index adf22dc36..95e31c2b0 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -50,7 +50,7 @@ export default () => {
            { // // align: true, // }} preserveInvalidOnBlur - showTime={{ - defaultValue: [moment('2000-01-01 01:03:05'), moment('2000-01-01 03:07:22')], - }} + // showTime={{ + // defaultValue: [moment('2000-01-01 01:03:05'), moment('2000-01-01 03:07:22')], + // }} onChange={(val, text) => { console.log('๐Ÿ”ฅ Change:', val, text); setRangeValue(val); diff --git a/src/NewPicker/PickerInput/Selector/Icon.tsx b/src/NewPicker/PickerInput/Selector/Icon.tsx index f506e033e..b893beb96 100644 --- a/src/NewPicker/PickerInput/Selector/Icon.tsx +++ b/src/NewPicker/PickerInput/Selector/Icon.tsx @@ -26,6 +26,7 @@ export function ClearIcon({ onClear, ...restProps }: ClearIconProps) { return ( { e.preventDefault(); }} diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 99738a200..de2a1cf57 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -189,6 +189,7 @@ function RangeSelector( const [activeBarStyle, setActiveBarStyle] = React.useState({ position: 'absolute', width: 0, + left: 0, }); React.useEffect(() => { diff --git a/src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx b/src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx index a67635575..f031e0e89 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx +++ b/src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx @@ -1,3 +1,4 @@ +import warning from 'rc-util/lib/warning'; import type { ReactNode } from 'react'; import * as React from 'react'; @@ -6,6 +7,10 @@ export function useClearIcon( allowClear?: boolean | { clearIcon?: ReactNode }, clearIcon?: ReactNode, ) { + if (process.env.NODE_ENV !== 'production' && clearIcon) { + warning(false, '`clearIcon` will be removed in future. Please use `allowClear` instead.'); + } + const mergedClearIcon = React.useMemo(() => { if (allowClear === false) { return null; diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index da70c589f..94b333be4 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -600,8 +600,6 @@ describe('Picker.Range', () => { }); }); - return; - it('type can not change before start time', () => { const onChange = jest.fn(); const { container } = render( @@ -611,22 +609,11 @@ describe('Picker.Range', () => { />, ); - // wrapper - // .find('input') - // .last() - // .simulate('change', { - // target: { - // value: '2000-01-11', - // }, - // }); fireEvent.change(container.querySelectorAll('input')[1], { target: { value: '2000-01-11', }, }); - // document.querySelector('input').last().simulate('keyDown', { - // which: KeyCode.ENTER, - // }); keyDown(container, 0, KeyCode.ENTER); expect(onChange).not.toHaveBeenCalled(); @@ -653,53 +640,28 @@ describe('Picker.Range', () => { describe('hover className', () => { [ { picker: 'year', start: 1990, end: 1997, mid: 1991 }, - { picker: 'month', start: 'Feb', end: 'Oct', mid: 'May' }, + { picker: 'month', start: '2ๆœˆ', end: '10ๆœˆ', mid: '5ๆœˆ' }, { picker: 'date', start: 11, end: 22, mid: 15 }, ].forEach(({ picker, start, end, mid }) => { - it('year', () => { + it(picker, () => { const { container } = render(); openPicker(container); selectCell(start); // Hover it - // findCell(end).simulate('mouseEnter'); fireEvent.mouseEnter(findCell(end)); - expect(findCell(start)).toHaveClass('rc-picker-cell-range-hover-start'); - expect(findCell(mid)).toHaveClass('rc-picker-cell-range-hover'); - expect(findCell(end)).toHaveClass('rc-picker-cell-range-hover-end'); + expect(findCell(start)).toHaveClass('rc-picker-cell-range-start'); + expect(findCell(mid)).toHaveClass('rc-picker-cell-in-range'); + expect(findCell(end)).toHaveClass('rc-picker-cell-range-end'); // Leave - // findCell(end).simulate('mouseLeave'); fireEvent.mouseLeave(findCell(end)); - expect(findCell(start)).not.toHaveClass('rc-picker-cell-range-hover-start'); - expect(findCell(mid)).not.toHaveClass('rc-picker-cell-range-hover'); - expect(findCell(end)).not.toHaveClass('rc-picker-cell-range-hover-end'); - }); - }); - it('range edge className', () => { - const { container } = render( - , - ); - - // End edge - openPicker(container); - // findCell(10).simulate('mouseEnter'); - fireEvent.mouseEnter(findCell(10)); - expect(findCell(19)).toHaveClass('rc-picker-cell-range-hover-edge-end'); - expect(findCell(20)).toHaveClass('rc-picker-cell-range-start-near-hover'); - // findCell(10).simulate('mouseOut'); - fireEvent.mouseOut(findCell(10)); - - // Start edge - openPicker(container, 1); - // findCell(28).simulate('mouseEnter'); - fireEvent.mouseEnter(findCell(28)); - expect(findCell(21)).toHaveClass('rc-picker-cell-range-hover-edge-start'); - expect(findCell(20)).toHaveClass('rc-picker-cell-range-end-near-hover'); - // findCell(28).simulate('mouseOut'); - fireEvent.mouseOut(findCell(28)); + expect(findCell(start)).toHaveClass('rc-picker-cell-range-start'); + expect(findCell(mid)).not.toHaveClass('rc-picker-cell-in-range'); + expect(findCell(end)).not.toHaveClass('rc-picker-cell-range-end'); + }); }); }); @@ -709,8 +671,12 @@ describe('Picker.Range', () => { selectCell(11); expect(isOpen()).toBeTruthy(); - // document.querySelector('input').last().simulate('blur'); fireEvent.blur(container.querySelectorAll('input')[1]); + + act(() => { + jest.runAllTimers(); + }); + expect(isOpen()).toBeFalsy(); }); @@ -730,6 +696,8 @@ describe('Picker.Range', () => { ); }); + return; + it('block native mouseDown in panel to prevent focus changed', () => { const { container } = render(); openPicker(container); From dda0d6bf1d8720cd8bb44f4d8617b7589b18e3e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Nov 2023 14:16:04 +0800 Subject: [PATCH 091/380] test: update snapshot --- tests/__snapshots__/range.spec.tsx.snap | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap index f704ca390..d3455b058 100644 --- a/tests/__snapshots__/range.spec.tsx.snap +++ b/tests/__snapshots__/range.spec.tsx.snap @@ -6,13 +6,11 @@ exports[`Picker.Range icon 1`] = ` class="rc-picker rc-picker-range" >
            @@ -25,16 +23,14 @@ exports[`Picker.Range icon 1`] = ` class="rc-picker-input" >
            From 3fdcdfffd8e486a803fe2f2712cddab2b90cd1b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Nov 2023 14:27:38 +0800 Subject: [PATCH 092/380] test: update test --- docs/examples/debug.tsx | 7 +++--- src/NewPicker/PickerInput/Popup/index.tsx | 4 ++++ .../PickerInput/hooks/useLockState.ts | 17 ++++++------- tests/range.spec.tsx | 24 +++++++------------ 4 files changed, 23 insertions(+), 29 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 95e31c2b0..99e1555ea 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -108,9 +108,10 @@ export default () => { // }} // preserveInvalidOnBlur allowEmpty={[false, true]} - // onOpenChange={(nextOpen) => { - // console.log('๐Ÿ† Next Open:', nextOpen); - // }} + onOpenChange={(nextOpen) => { + console.log('๐Ÿ† Next Open:', nextOpen); + }} + open // mode={['month', 'year']} // onPanelChange={(val, mode) => { // console.log('๐Ÿ† Panel Change:', val?.[0]?.format('YYYY-MM-DD'), mode); diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index de563a7bb..3d07fda9d 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -74,6 +74,10 @@ export default function Popup(props: PopupProps) { // Used for Today Button style, safe to remove if no need `${prefixCls}-${internalMode}-panel-container`, )} + // Still wish not to lose focus on mouse down + onMouseDown={(e) => { + e.preventDefault(); + }} {...divProps} > {mergedNodes} diff --git a/src/NewPicker/PickerInput/hooks/useLockState.ts b/src/NewPicker/PickerInput/hooks/useLockState.ts index fdddc0302..b5c7e345c 100644 --- a/src/NewPicker/PickerInput/hooks/useLockState.ts +++ b/src/NewPicker/PickerInput/hooks/useLockState.ts @@ -20,21 +20,18 @@ export default function useLockState( const updateValue = useEvent((next: T, immediately?: boolean) => { raf.cancel(rafRef.current); - if (next || immediately) { + const doUpdate = () => { setState(next); + onChange?.(next); + }; + + if (next || immediately) { + doUpdate(); } else { - rafRef.current = raf(() => { - setState(next); - }); + rafRef.current = raf(doUpdate); } }); - useLayoutUpdateEffect(() => { - if (onChange) { - onChange(state); - } - }, [state]); - return [state, updateValue]; } diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 94b333be4..0263b6294 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -696,14 +696,10 @@ describe('Picker.Range', () => { ); }); - return; - it('block native mouseDown in panel to prevent focus changed', () => { const { container } = render(); openPicker(container); - // const preventDefault = jest.fn(); - // document.querySelector('td').first().simulate('mouseDown', { preventDefault }); const cell = document.querySelector('td'); const mouseDownEvent = createEvent.mouseDown(cell); fireEvent(cell, mouseDownEvent); @@ -711,6 +707,7 @@ describe('Picker.Range', () => { expect(mouseDownEvent.defaultPrevented).toBeTruthy(); }); + // TODO: handle this describe('arrow position', () => { let domMock: ReturnType; @@ -730,9 +727,6 @@ describe('Picker.Range', () => { const { container } = render(); openPicker(container, 1); - // expect((document.querySelector('.rc-picker-panel-container').props() as any).style.marginLeft).toEqual( - // 200, - // ); expect(document.querySelector('.rc-picker-panel-container')).toHaveStyle({ marginLeft: 200, }); @@ -740,8 +734,6 @@ describe('Picker.Range', () => { }); it('focus to next input not to onOpenChange', () => { - jest.useFakeTimers(); - const onOpenChange = jest.fn(); const { container } = render(); openPicker(container); @@ -755,12 +747,9 @@ describe('Picker.Range', () => { }); expect(onOpenChange).not.toHaveBeenCalled(); - - jest.useRealTimers(); }); it('fixed open need repeat trigger onOpenChange', () => { - jest.useFakeTimers(); const onOpenChange = jest.fn(); render(); @@ -769,15 +758,18 @@ describe('Picker.Range', () => { for (let i = 0; i < 10; i += 1) { act(() => { fireEvent.mouseDown(document.body); + fireEvent.mouseUp(document.body); + fireEvent.click(document.body); + }); + act(() => { + jest.runAllTimers(); }); expect(onOpenChange).toHaveBeenCalledTimes(i + 1); } - act(() => { - jest.runAllTimers(); - }); - jest.useRealTimers(); }); + return; + it('datetime display ok button', () => { const onCalendarChange = jest.fn(); const onOk = jest.fn(); From 397218274b678f66d7d668e7bf4255a90f3777c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Nov 2023 14:36:37 +0800 Subject: [PATCH 093/380] test: more test case --- docs/examples/debug.tsx | 2 +- src/NewPicker/PickerInput/hooks/useLockState.ts | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 99e1555ea..c31adf7f4 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -111,7 +111,7 @@ export default () => { onOpenChange={(nextOpen) => { console.log('๐Ÿ† Next Open:', nextOpen); }} - open + // open // mode={['month', 'year']} // onPanelChange={(val, mode) => { // console.log('๐Ÿ† Panel Change:', val?.[0]?.format('YYYY-MM-DD'), mode); diff --git a/src/NewPicker/PickerInput/hooks/useLockState.ts b/src/NewPicker/PickerInput/hooks/useLockState.ts index b5c7e345c..f29222cd5 100644 --- a/src/NewPicker/PickerInput/hooks/useLockState.ts +++ b/src/NewPicker/PickerInput/hooks/useLockState.ts @@ -16,13 +16,19 @@ export default function useLockState( value, }); const rafRef = React.useRef(null); + const stateRef = React.useRef(state); + stateRef.current = state; const updateValue = useEvent((next: T, immediately?: boolean) => { raf.cancel(rafRef.current); const doUpdate = () => { + const prev = stateRef.current; setState(next); - onChange?.(next); + + if (onChange && prev !== next) { + onChange(next); + } }; if (next || immediately) { From 8a80fdc44192e93e240dcd1a900ca8f06e5679fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Nov 2023 14:36:45 +0800 Subject: [PATCH 094/380] test: more test case --- tests/range.spec.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 0263b6294..9d2bf36d3 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -768,8 +768,6 @@ describe('Picker.Range', () => { } }); - return; - it('datetime display ok button', () => { const onCalendarChange = jest.fn(); const onOk = jest.fn(); @@ -824,6 +822,8 @@ describe('Picker.Range', () => { jest.useRealTimers(); }); + return; + describe('viewDate', () => { function matchTitle(title: string) { expect(document.querySelector('.rc-picker-header-view').textContent).toEqual(title); From 1839886f558cf08ab2ff411b63638ab5b8a2b42a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 9 Nov 2023 15:18:14 +0800 Subject: [PATCH 095/380] chore: fix blur logic --- docs/examples/debug.tsx | 9 ++++++--- src/NewPicker/PickerInput/Popup/Footer.tsx | 7 ++++++- src/NewPicker/PickerInput/RangePicker.tsx | 13 +++++++++---- .../PickerInput/Selector/RangeSelector.tsx | 3 +++ src/NewPicker/PickerInput/hooks/useRangeValue.ts | 4 ++-- src/NewPicker/interface.tsx | 4 ++++ tests/range.spec.tsx | 13 +++++-------- 7 files changed, 35 insertions(+), 18 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index c31adf7f4..5d48ac96b 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -96,9 +96,12 @@ export default () => { // // align: true, // }} preserveInvalidOnBlur - // showTime={{ - // defaultValue: [moment('2000-01-01 01:03:05'), moment('2000-01-01 03:07:22')], - // }} + showTime={{ + defaultValue: [moment('2000-01-01 01:03:05'), moment('2000-01-01 03:07:22')], + }} + onOk={() => { + console.log('๐Ÿท Ok!'); + }} onChange={(val, text) => { console.log('๐Ÿ”ฅ Change:', val, text); setRangeValue(val); diff --git a/src/NewPicker/PickerInput/Popup/Footer.tsx b/src/NewPicker/PickerInput/Popup/Footer.tsx index fd4222468..9af207569 100644 --- a/src/NewPicker/PickerInput/Popup/Footer.tsx +++ b/src/NewPicker/PickerInput/Popup/Footer.tsx @@ -14,10 +14,14 @@ export interface FooterProps { // Submit onSubmit: (date?: DateType) => void; needConfirm: boolean; + + // OK + onOk?: VoidFunction; } export default function Footer(props: FooterProps) { - const { mode, internalMode, renderExtraFooter, showNow, onSubmit, value, needConfirm } = props; + const { mode, internalMode, renderExtraFooter, showNow, onSubmit, onOk, value, needConfirm } = + props; const { prefixCls, @@ -51,6 +55,7 @@ export default function Footer(props: FooterProps) {
          @@ -194,15 +191,15 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1` >
          @@ -1134,16 +1128,14 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1 class="rc-picker-input" >
          @@ -1154,15 +1146,15 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1 >
          + M 1
          + M 2
          + M 3
          - -
          + M 4
          + +
          + M 5
          + M 6
          - -
          + M 7
          + M 8
          + +
          + M 9
          - -
          + M 10
          + M 11
          + M 12
          @@ -1325,7 +1315,6 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          + M 1
          + M 2
          + M 3
          - -
          + M 4
          + +
          + M 5
          + M 6
          - -
          + M 7
          + M 8
          + +
          + M 9
          - -
          + M 10
          + M 11
          + M 12
          diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 58101a85d..ee07cea99 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1807,8 +1807,6 @@ describe('Picker.Range', () => { expect(baseElement).toMatchSnapshot(); }); - return; - it('no -disabled cell when set open directly', () => { render( { expect(document.querySelectorAll('.rc-picker-input')[1]).toHaveClass('rc-picker-input-active'); }); + return; + describe('trigger onCalendarChange', () => { const switchInput = (container: HTMLElement) => { openPicker(container, 0); From c34446ee802ce8c34fd7a8a596291950f59361e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 13 Nov 2023 19:57:39 +0800 Subject: [PATCH 114/380] chore: adjust focus logic --- src/NewPicker/PickerInput/RangePicker.tsx | 1 + src/NewPicker/PickerInput/Selector/RangeSelector.tsx | 3 ++- src/NewPicker/interface.tsx | 1 + tests/__snapshots__/range.spec.tsx.snap | 2 +- 4 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index b07cf8f53..cfdeb9137 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -689,6 +689,7 @@ function RangePicker(props: RangePickerProps, ref: Rea activeIndex={focusedIndex} activeHelp={!!internalHoverValues} allHelp={!!internalHoverValues && hoverSource === 'preset'} + focused={focused} onFocus={onSelectorFocus} onBlur={onSelectorBlur} onSubmit={triggerChangeAndFocusNext} diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 6ae494549..1dadeeb2c 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -52,6 +52,7 @@ function RangeSelector( activeHelp, allHelp, + focused, onFocus, onBlur, locale, @@ -290,7 +291,7 @@ function RangeSelector( prefixCls, `${prefixCls}-range`, { - [`${prefixCls}-focused`]: activeIndex !== null, + [`${prefixCls}-focused`]: focused, [`${prefixCls}-invalid`]: invalid.some((i) => i), [`${prefixCls}-rtl`]: rtl, }, diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index b0a918194..bd9ee1311 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -360,6 +360,7 @@ export interface SelectorProps extends SharedHTMLAttrs { activeIndex: number | null; /** Add `-placeholder` className as a help info */ activeHelp?: boolean; + focused: boolean; onFocus: (event: React.FocusEvent, index?: number) => void; onBlur: (event: React.FocusEvent, index?: number) => void; /** Trigger by `enter` key */ diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap index fec4f39d7..d00515dfc 100644 --- a/tests/__snapshots__/range.spec.tsx.snap +++ b/tests/__snapshots__/range.spec.tsx.snap @@ -94,7 +94,7 @@ exports[`Picker.Range panelRender 1`] = ` class="rc-picker rc-picker-range" >
          Date: Mon, 13 Nov 2023 19:59:34 +0800 Subject: [PATCH 115/380] test: all range test --- tests/range.spec.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index ee07cea99..ecefc5790 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1840,8 +1840,6 @@ describe('Picker.Range', () => { expect(document.querySelectorAll('.rc-picker-input')[1]).toHaveClass('rc-picker-input-active'); }); - return; - describe('trigger onCalendarChange', () => { const switchInput = (container: HTMLElement) => { openPicker(container, 0); From c5f3bfb773c891f6e0dae5623a56fedd4a1cb68b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 14 Nov 2023 14:27:56 +0800 Subject: [PATCH 116/380] feat: onPickerChange add range info --- docs/examples/debug.tsx | 29 ++-- src/NewPicker/PickerInput/RangePicker.tsx | 1 + .../PickerInput/hooks/useRangePickerValue.ts | 2 +- src/NewPicker/PickerPanel/WeekPanel/index.tsx | 2 +- src/NewPicker/PickerPanel/index.tsx | 4 +- tests/new-range.spec.tsx | 132 ++++++++++++++++++ tests/util/commonUtil.tsx | 17 ++- 7 files changed, 164 insertions(+), 23 deletions(-) create mode 100644 tests/new-range.spec.tsx diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index ba02ec987..ebf59bc4a 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -34,17 +34,16 @@ export default () => { const singleRef = React.useRef(null); const [value, setValue] = React.useState(null); - const [rangeValue, setRangeValue] = React.useState<[Moment?, Moment?]>( - // has start - // [moment('2023-11-15'), null], - // has end - // [null, moment('2023-11-15')], - // [moment('2023-11-5'), moment('2023-12-29')], - // [moment('2000-09-03'), moment('1990-09-03')], - // [moment('1990-09-03'), null], - // null, - // undefined, - ); + const [rangeValue, setRangeValue] = React.useState<[Moment?, Moment?]>(); + // has start + // [moment('2023-11-15'), null], + // has end + // [null, moment('2023-11-15')], + // [moment('2023-11-5'), moment('2023-12-29')], + // [moment('2000-09-03'), moment('1990-09-03')], + // [moment('1990-09-03'), null], + // null, + // undefined, return (
          @@ -121,14 +120,14 @@ export default () => { onOpenChange={(nextOpen) => { console.log('๐Ÿ† Next Open:', nextOpen); }} - open + // open // mode={['month', 'year']} // onPanelChange={(val, mode) => { // console.log('๐Ÿ† Panel Change:', val?.[0]?.format('YYYY-MM-DD'), mode); // }} - // onPickerValueChange={(val) => { - // console.log('๐Ÿ‘ป Picker Value Change:', val); - // }} + onPickerValueChange={(val, info) => { + console.log('๐Ÿ‘ป Picker Value Change:', val, val?.[1]?.format('YYYY-MM-DD'), info); + }} // renderExtraFooter={(mode) => mode} components={ { diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index cfdeb9137..fdf138ad9 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -90,6 +90,7 @@ export interface RangePickerProps date: [DateType, DateType], info: { source: 'reset' | 'panel'; + range: 'start' | 'end'; }, ) => void; diff --git a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts index f77a2bb38..bee446718 100644 --- a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts @@ -126,7 +126,7 @@ export default function useRangePickerValue( (!isSame(generateConfig, locale, mergedStartPickerValue, clone[0], pickerMode) || !isSame(generateConfig, locale, mergedEndPickerValue, clone[1], pickerMode)) ) { - onPickerValueChange(clone, { source }); + onPickerValueChange(clone, { source, range: mergedActiveIndex === 1 ? 'end' : 'start' }); } }; diff --git a/src/NewPicker/PickerPanel/WeekPanel/index.tsx b/src/NewPicker/PickerPanel/WeekPanel/index.tsx index 8579d0b0f..3ee0b8e96 100644 --- a/src/NewPicker/PickerPanel/WeekPanel/index.tsx +++ b/src/NewPicker/PickerPanel/WeekPanel/index.tsx @@ -15,7 +15,7 @@ export default function WeekPanel(props: SharedPanelProps( defaultPickerValue || mergedValue || now, { value: pickerValue, - onChange: onPickerValueChange, + onChange: (val) => { + onPickerValueChange?.(val); + }, }, ); diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx new file mode 100644 index 000000000..f4b5d3d80 --- /dev/null +++ b/tests/new-range.spec.tsx @@ -0,0 +1,132 @@ +// In theory, all RangePicker test cases should be paired with SinglePicker +import { fireEvent, render } from '@testing-library/react'; +import { Dayjs } from 'dayjs'; +import { resetWarned } from 'rc-util/lib/warning'; +import React from 'react'; +import { DayRangePicker, getDay, isSame, openPicker, selectCell } from './util/commonUtil'; + +describe('NewPicker.Range', () => { + beforeEach(() => { + resetWarned(); + jest.useFakeTimers().setSystemTime(getDay('1990-09-03 00:00:00').valueOf()); + }); + + afterEach(() => { + jest.clearAllTimers(); + jest.useRealTimers(); + }); + + describe('PickerValue', () => { + it('defaultPickerValue should reset every time when opened', () => { + const { container } = render( + , + ); + + // Left + openPicker(container); + + for (let i = 0; i < 13; i += 1) { + fireEvent.click(document.querySelector('.rc-picker-header-prev-btn')); + } + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('1998ๅนด12ๆœˆ'); + + // Right + openPicker(container, 1); + + for (let i = 0; i < 13; i += 1) { + fireEvent.click(document.querySelector('.rc-picker-header-next-btn')); + } + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('2024ๅนด10ๆœˆ'); + + // Left again + openPicker(container); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('2000ๅนด1ๆœˆ'); + + // Right again + openPicker(container, 1); + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('2023ๅนด9ๆœˆ'); + }); + + it('onPickerValueChange', () => { + let nextPickerValues: [Dayjs | null, Dayjs | null]; + const onPickerValueChange = jest.fn(); + + const { container } = render( + , + ); + + // Left + openPicker(container); + expect(onPickerValueChange).toHaveBeenCalledTimes(1); + + nextPickerValues = onPickerValueChange.mock.calls[0][0]; + expect(isSame(nextPickerValues[0], '2000-01-01')); + expect(isSame(nextPickerValues[1], '1990-02-03')); + expect(onPickerValueChange.mock.calls[0][1]).toEqual( + expect.objectContaining({ + source: 'reset', + range: 'start', + }), + ); + onPickerValueChange.mockReset(); + + // Right + openPicker(container, 1); + expect(onPickerValueChange).toHaveBeenCalledTimes(1); + + nextPickerValues = onPickerValueChange.mock.calls[0][0]; + expect(isSame(nextPickerValues[0], '1990-02-03')); + expect(isSame(nextPickerValues[1], '2023-09-03')); + expect(onPickerValueChange.mock.calls[0][1]).toEqual( + expect.objectContaining({ + source: 'reset', + range: 'end', + }), + ); + }); + + it('half set defaultPickerValue', () => { + const onPickerValueChange = jest.fn(); + + const { container } = render( + , + ); + + openPicker(container); + + // Left + for (let i = 0; i < 13; i += 1) { + onPickerValueChange.mockReset(); + fireEvent.click(document.querySelector('.rc-picker-header-prev-btn')); + } + + expect(isSame(onPickerValueChange.mock.calls[0][0][0], '1998-12-01')).toBeTruthy(); + expect(onPickerValueChange.mock.calls[0][1]).toEqual( + expect.objectContaining({ + source: 'panel', + range: 'start', + }), + ); + onPickerValueChange.mockReset(); + + // Right + selectCell(7); + + const lastCalled = onPickerValueChange.mock.calls[onPickerValueChange.mock.calls.length - 1]; + expect(isSame(lastCalled[0][1], '1998-12-07')).toBeTruthy(); + expect(lastCalled[1]).toEqual( + expect.objectContaining({ + source: 'reset', + range: 'end', + }), + ); + }); + }); +}); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 307878fb5..45480379b 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -1,9 +1,9 @@ import React from 'react'; // import { mount as originMount, ReactWrapper } from 'enzyme'; import { act, fireEvent } from '@testing-library/react'; -import dayjs, { type Dayjs } from 'dayjs'; +import dayjs, { isDayjs, type Dayjs } from 'dayjs'; import 'dayjs/locale/zh-cn'; -import moment, { type Moment, type unitOfTime } from 'moment'; +import moment, { isMoment, type Moment } from 'moment'; import Picker, { PickerPanel, type PickerProps } from '../../src'; import dayGenerateConfig from '../../src/generate/dayjs'; import momentGenerateConfig from '../../src/generate/moment'; @@ -53,13 +53,20 @@ export function getMoment(str: string): Moment { throw new Error(`Format not match with: ${str}`); } -export function isSame(date: Moment | null, dateStr: string, type: unitOfTime.StartOf = 'date') { +export function isSame(date: Moment | Dayjs | null, dateStr: string, type: any = 'date') { if (!date) { return false; } - if (date.isSame(getMoment(dateStr), type)) { - return true; + if (isMoment(date)) { + if (date.isSame(getMoment(dateStr), type)) { + return true; + } + } + if (isDayjs(date)) { + if (date.isSame(getDay(dateStr), type)) { + return true; + } } throw new Error(`${date.format(FULL_FORMAT)} is not same as expected: ${dateStr}`); From 5fb89a3fed4f60ecf287f190955e4ad0de57bf38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 14 Nov 2023 16:07:01 +0800 Subject: [PATCH 117/380] chore: clean up --- docs/examples/debug.tsx | 36 ++++++++++---------- src/NewPicker/PickerInput/Selector/Input.tsx | 3 +- tests/new-range.spec.tsx | 23 +++++++++++-- 3 files changed, 41 insertions(+), 21 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index ebf59bc4a..48f9badc6 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -58,24 +58,24 @@ export default () => { // monthCellRender={(date) => { // return <>MM{date.month()}; // }} - // presets={[ - // { - // label: 'Now', - // value: [moment(), moment()], - // }, - // { - // label: 'This Week', - // value: [moment().add(-7, 'd'), moment()], - // }, - // { - // label: 'Last Week', - // value: [moment().add(-14, 'd'), moment().add(-7, 'd')], - // }, - // { - // label: 'Wrong Order', - // value: [moment(), moment().add(-14, 'd')], - // }, - // ]} + presets={[ + { + label: 'Now', + value: [moment(), moment()], + }, + { + label: 'This Week', + value: [moment().add(-7, 'd'), moment()], + }, + { + label: 'Last Week', + value: [moment().add(-14, 'd'), moment().add(-7, 'd')], + }, + { + label: 'Wrong Order', + value: [moment(), moment().add(-14, 'd')], + }, + ]} value={rangeValue} placeholder={['Start', 'End']} // defaultValue={[moment('1990-11-28'), moment('2000-09-03')]} diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 287110485..758e197a6 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -199,6 +199,8 @@ const Input = React.forwardRef((props, ref) => { // ======================= Keyboard ======================= const onSharedKeyDown: React.KeyboardEventHandler = (event) => { + console.log('key', event.key); + if (event.key === 'Enter') { onEnter(); } @@ -208,7 +210,6 @@ const Input = React.forwardRef((props, ref) => { onSharedKeyDown(event); const { key } = event; - console.log('key', key); // Save the cache with cell text let nextCellText: string = null; diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index f4b5d3d80..2a6312e15 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -1,9 +1,9 @@ // In theory, all RangePicker test cases should be paired with SinglePicker import { fireEvent, render } from '@testing-library/react'; -import { Dayjs } from 'dayjs'; +import { type Dayjs } from 'dayjs'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; -import { DayRangePicker, getDay, isSame, openPicker, selectCell } from './util/commonUtil'; +import { DayRangePicker, getDay, isOpen, isSame, openPicker, selectCell } from './util/commonUtil'; describe('NewPicker.Range', () => { beforeEach(() => { @@ -129,4 +129,23 @@ describe('NewPicker.Range', () => { ); }); }); + + describe('field', () => { + it('not open for function key', () => { + const { container } = render(); + const firstInput = container.querySelector('input'); + + fireEvent.keyDown(firstInput, { + key: 'Shift', + }); + expect(isOpen()).toBeFalsy(); + + fireEvent.change(firstInput, { + target: { + value: 'a', + }, + }); + expect(isOpen()).toBeTruthy(); + }); + }); }); From 72f679d769a8bc8d3db8fcc3fee9b7847420fc85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 14 Nov 2023 16:19:46 +0800 Subject: [PATCH 118/380] chore: add test case --- tests/new-range.spec.tsx | 48 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index 2a6312e15..5e3973105 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -1,9 +1,17 @@ // In theory, all RangePicker test cases should be paired with SinglePicker -import { fireEvent, render } from '@testing-library/react'; +import { act, fireEvent, render } from '@testing-library/react'; import { type Dayjs } from 'dayjs'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; -import { DayRangePicker, getDay, isOpen, isSame, openPicker, selectCell } from './util/commonUtil'; +import { + closePicker, + DayRangePicker, + getDay, + isOpen, + isSame, + openPicker, + selectCell, +} from './util/commonUtil'; describe('NewPicker.Range', () => { beforeEach(() => { @@ -147,5 +155,41 @@ describe('NewPicker.Range', () => { }); expect(isOpen()).toBeTruthy(); }); + + it('preserveInvalidOnBlur=false', () => { + const { container } = render(); + const firstInput = container.querySelector('input'); + + openPicker(container); + fireEvent.change(firstInput, { + target: { + value: 'invalidate 123', + }, + }); + + closePicker(container); + act(() => { + jest.runAllTimers(); + }); + expect(firstInput).toHaveValue(''); + }); + + it('preserveInvalidOnBlur=true', () => { + const { container } = render(); + const firstInput = container.querySelector('input'); + + openPicker(container); + fireEvent.change(firstInput, { + target: { + value: 'invalidate 123', + }, + }); + + closePicker(container); + act(() => { + jest.runAllTimers(); + }); + expect(firstInput).toHaveValue('invalidate 123'); + }); }); }); From 058d0aec507bdc9ff095aad91e73450c8753c0d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 14 Nov 2023 17:02:30 +0800 Subject: [PATCH 119/380] refactor: auto fill date format --- docs/examples/debug.tsx | 48 ++++++++--------- src/NewPicker/PickerInput/RangePicker.tsx | 43 +++++++++------ .../PickerInput/hooks/useFieldFormat.ts | 14 ++--- src/NewPicker/PickerPanel/DatePanel/index.tsx | 15 +++--- .../PickerPanel/DecadePanel/index.tsx | 2 +- .../PickerPanel/QuarterPanel/index.tsx | 2 +- .../TimePanel/TimePanelBody/index.tsx | 27 +++++----- src/NewPicker/PickerPanel/YearPanel/index.tsx | 2 +- src/NewPicker/hooks/useLocale.ts | 54 +++++++++++++++++++ src/NewPicker/index.tsx | 2 +- src/NewPicker/interface.tsx | 22 +++++--- src/locale/zh_CN.ts | 4 +- 12 files changed, 154 insertions(+), 81 deletions(-) create mode 100644 src/NewPicker/hooks/useLocale.ts diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 48f9badc6..001017740 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -58,24 +58,24 @@ export default () => { // monthCellRender={(date) => { // return <>MM{date.month()}; // }} - presets={[ - { - label: 'Now', - value: [moment(), moment()], - }, - { - label: 'This Week', - value: [moment().add(-7, 'd'), moment()], - }, - { - label: 'Last Week', - value: [moment().add(-14, 'd'), moment().add(-7, 'd')], - }, - { - label: 'Wrong Order', - value: [moment(), moment().add(-14, 'd')], - }, - ]} + // presets={[ + // { + // label: 'Now', + // value: [moment(), moment()], + // }, + // { + // label: 'This Week', + // value: [moment().add(-7, 'd'), moment()], + // }, + // { + // label: 'Last Week', + // value: [moment().add(-14, 'd'), moment().add(-7, 'd')], + // }, + // { + // label: 'Wrong Order', + // value: [moment(), moment().add(-14, 'd')], + // }, + // ]} value={rangeValue} placeholder={['Start', 'End']} // defaultValue={[moment('1990-11-28'), moment('2000-09-03')]} @@ -92,12 +92,12 @@ export default () => { // console.log('๐Ÿท Blur!'); // }} // changeOnBlur - // format={{ - // format: 'YYYY-MM-DD', - // // format: 'YYYY-MM-DD HH:mm:ss.SSS', - // // // format: 'YYYYMMDD', - // // align: true, - // }} + format={{ + format: 'YYYY--MM--DD', + // format: 'YYYY-MM-DD HH:mm:ss.SSS', + // // format: 'YYYYMMDD', + // align: true, + }} // preserveInvalidOnBlur // showTime // showTime={ diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index fdf138ad9..027c3cc83 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -4,6 +4,7 @@ import omit from 'rc-util/lib/omit'; import pickAttrs from 'rc-util/lib/pickAttrs'; import warning from 'rc-util/lib/warning'; import * as React from 'react'; +import useLocale from '../hooks/useLocale'; import useTimeConfig from '../hooks/useTimeConfig'; import type { InternalMode, @@ -207,6 +208,9 @@ function RangePicker(props: RangePickerProps, ref: Rea }, })); + // ======================== Locale ======================== + const filledLocale = useLocale(locale); + // =================== Disabled & Empty =================== const mergedDisabled = separateConfig(disabled, false); const mergedAllowEmpty = separateConfig(allowEmpty, false); @@ -214,8 +218,20 @@ function RangePicker(props: RangePickerProps, ref: Rea // ========================= Icon ========================= const mergedClearIcon = useClearIcon(prefixCls, allowClear, clearIcon); + // ========================= Prop ========================= + const filledProps = React.useMemo( + () => ({ + ...props, + locale: filledLocale, + allowEmpty: mergedAllowEmpty, + order, + picker, + }), + [props], + ); + // ======================= ShowTime ======================= - const mergedShowTime = useTimeConfig(props); + const mergedShowTime = useTimeConfig(filledProps); // ======================== Active ======================== // When user first focus one input, any submit will trigger focus another one. @@ -255,7 +271,7 @@ function RangePicker(props: RangePickerProps, ref: Rea const mergedShowNow = useShowNow(internalPicker, mergedMode, showNow, showToday); // ======================== Format ======================== - const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format); + const [formatList, maskFormat] = useFieldFormat(internalPicker, filledLocale, format); // ======================= ReadOnly ======================= const mergedInputReadOnly = useInputReadOnly(formatList, inputReadOnly); @@ -277,12 +293,7 @@ function RangePicker(props: RangePickerProps, ref: Rea // ======================== Value ========================= const [calendarValue, triggerCalendarChange, triggerSubmitChange, emptyValue] = useRangeValue( - { - ...props, - allowEmpty: mergedAllowEmpty, - order, - picker, - }, + filledProps, mergedDisabled, formatList, focused, @@ -297,7 +308,7 @@ function RangePicker(props: RangePickerProps, ref: Rea mergedDisabled, activeIndex, generateConfig, - locale, + filledLocale, disabledDate, ); @@ -342,7 +353,7 @@ function RangePicker(props: RangePickerProps, ref: Rea // ===================== Picker Value ===================== const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue( generateConfig, - locale, + filledLocale, calendarValue, mergedOpen, activeIndex, @@ -551,8 +562,8 @@ function RangePicker(props: RangePickerProps, ref: Rea const panelValueInvalid = !panelValue || isInvalidateDate(panelValue); const panelProps = React.useMemo(() => { - const domProps = pickAttrs(props, false); - const restProps = omit(props, [ + const domProps = pickAttrs(filledProps, false); + const restProps = omit(filledProps, [ ...(Object.keys(domProps) as (keyof SharedHTMLAttrs)[]), 'onChange', 'onCalendarChange', @@ -562,7 +573,7 @@ function RangePicker(props: RangePickerProps, ref: Rea 'onPanelChange', ]); return restProps; - }, [props]); + }, [filledProps]); // >>> Render const panel = ( @@ -612,11 +623,11 @@ function RangePicker(props: RangePickerProps, ref: Rea const context = React.useMemo( () => ({ prefixCls, - locale, + locale: filledLocale, generateConfig, button: components.button, }), - [prefixCls, locale, generateConfig, components.button], + [prefixCls, filledLocale, generateConfig, components.button], ); // ======================== Effect ======================== @@ -680,7 +691,7 @@ function RangePicker(props: RangePickerProps, ref: Rea > (props: DatePanelProps { return formatValue(date, { locale, - format: locale.dayFormat, + format: locale.dateCellFormat, generateConfig, }); }; @@ -176,11 +176,7 @@ export default function DatePanel(props: DatePanelProps -
          +
          {/* Header */} { @@ -196,6 +192,13 @@ export default function DatePanel(props: DatePanelProps + formatValue(date, { + locale, + format: locale.fieldDateFormat, + generateConfig, + }) + } {...props} colNum={WEEK_DAY_COUNT} rowNum={6} diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx index 772fae96b..8baa32710 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -28,7 +28,7 @@ export default function DecadePanel(props: SharedPanelProps { - const yearCellFormat = locale.yearCellFormat || 'YYYY'; + const yearCellFormat = locale.yearCellFormat; const startYearStr = formatValue(date, { locale, diff --git a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx index 48cce73dc..2737ec3f4 100644 --- a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx +++ b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx @@ -31,7 +31,7 @@ export default function QuarterPanel(props: SharedPanelProps { return formatValue(date, { locale, - format: locale.quarterCellFormat || '[Q]Q', + format: locale.quarterCellFormat, generateConfig, }); }; diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index b7b0a0710..e4d7d2278 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -221,26 +221,25 @@ export default function TimePanelBody(props: SharedTimeProps { + const { meridiemCellFormat } = locale; + return meridiemCellFormat + ? formatValue(amDate, { + generateConfig, + locale, + format: meridiemCellFormat, + }) + : defaultLabel; + }; + return [ { - label: locale.meridiemFormat - ? formatValue(amDate, { - generateConfig, - locale, - format: locale.meridiemFormat, - }) - : 'AM', + label: formatMeridiem(amDate, 'AM'), value: 'am', disabled: rowHourUnits.every((h) => h.disabled || !isAM(h.value as number)), }, { - label: locale.meridiemFormat - ? formatValue(pmDate, { - generateConfig, - locale, - format: locale.meridiemFormat, - }) - : 'PM', + label: formatMeridiem(pmDate, 'PM'), value: 'pm', disabled: rowHourUnits.every((h) => h.disabled || isAM(h.value as number)), }, diff --git a/src/NewPicker/PickerPanel/YearPanel/index.tsx b/src/NewPicker/PickerPanel/YearPanel/index.tsx index 1e021effb..829909486 100644 --- a/src/NewPicker/PickerPanel/YearPanel/index.tsx +++ b/src/NewPicker/PickerPanel/YearPanel/index.tsx @@ -38,7 +38,7 @@ export default function YearPanel(props: SharedPanelProps { return formatValue(date, { locale, - format: locale.yearCellFormat || 'YYYY', + format: locale.yearCellFormat, generateConfig, }); }; diff --git a/src/NewPicker/hooks/useLocale.ts b/src/NewPicker/hooks/useLocale.ts new file mode 100644 index 000000000..1c0179ee8 --- /dev/null +++ b/src/NewPicker/hooks/useLocale.ts @@ -0,0 +1,54 @@ +import React from 'react'; +import type { Locale } from '../interface'; + +/** + * Fill locale format as start up + */ +export default function useLocale(locale: Locale) { + return React.useMemo(() => { + // Not fill `monthFormat` since `locale.shortMonths` handle this + // Not fill `meridiemCellFormat` since AM & PM by default + const { + // Input Field + dateFormat, + dateTimeFormat, + fieldDateTimeFormat, + fieldDateFormat, + fieldTimeFormat, + fieldMonthFormat, + fieldYearFormat, + fieldWeekFormat, + fieldQuarterFormat, + + // Header Format + yearFormat, + // monthFormat, + + // Cell format + yearCellFormat, + quarterCellFormat, + dayFormat, + dateCellFormat, + + // meridiemCellFormat, + } = locale; + + return { + ...locale, + + fieldDateTimeFormat: fieldDateTimeFormat || dateTimeFormat || 'YYYY-MM-DD HH:mm:ss', + fieldDateFormat: fieldDateFormat || dateFormat || 'YYYY-MM-DD', + fieldTimeFormat: fieldTimeFormat || 'HH:mm:ss', + fieldMonthFormat: fieldMonthFormat || 'YYYY-MM', + fieldYearFormat: fieldYearFormat || 'YYYY', + fieldWeekFormat: fieldWeekFormat || 'gggg-wo', + fieldQuarterFormat: fieldQuarterFormat || 'YYYY-[Q]Q', + + yearFormat: yearFormat || 'YYYY', + + yearCellFormat: yearCellFormat || 'YYYY', + quarterCellFormat: quarterCellFormat || '[Q]Q', + dateCellFormat: dateCellFormat || dayFormat || 'D', + }; + }, [locale]); +} diff --git a/src/NewPicker/index.tsx b/src/NewPicker/index.tsx index 1c416e783..bcf0979b5 100644 --- a/src/NewPicker/index.tsx +++ b/src/NewPicker/index.tsx @@ -12,7 +12,7 @@ * - TimePicker support `changeOnScroll` * - TimePicker support `showTitle` * - TimePicker support `millisecond` - * - Support meridiemFormat for AM/PM + * - Support meridiemCellFormat for AM/PM * - Get correct `disabledHours` when set `use12Hours` * - Support `showWeek` * diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index bd9ee1311..3beddd99c 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -10,16 +10,20 @@ export type Locale = { // ==================== Input Format ==================== // Input format + /** @deprecated Please use `fieldDateFormat` instead */ + dateFormat?: string; + /** @deprecated Please use `fieldDateTimeFormat` instead */ + dateTimeFormat?: string; /** Input field formatter like YYYY-MM-DD HH:mm:ss */ - fieldDateTimeFormat: string; + fieldDateTimeFormat?: string; /** Input field formatter like YYYY-MM-DD */ - fieldDateFormat: string; + fieldDateFormat?: string; /** Input field formatter like HH:mm:ss */ - fieldTimeFormat: string; + fieldTimeFormat?: string; /** Input field formatter like YYYY-MM */ - fieldMonthFormat: string; + fieldMonthFormat?: string; /** Input field formatter like YYYY */ - fieldYearFormat: string; + fieldYearFormat?: string; /** Input field formatter like wwww-go */ fieldWeekFormat?: string; /** Input field formatter like YYYY-Q */ @@ -30,7 +34,7 @@ export type Locale = { /** Display month before year in date panel header */ monthBeforeYear?: boolean; /** year format in header panel */ - yearFormat: string; + yearFormat?: string; /** month format in header panel */ monthFormat?: string; @@ -39,10 +43,12 @@ export type Locale = { yearCellFormat?: string; /** quarter format in body panel */ quarterCellFormat?: string; + /** @deprecated Please use `dateCellFormat` instead */ + dayFormat?: string; /** day format in body panel */ - dayFormat: string; + dateCellFormat?: string; /** meridiem format in body panel */ - meridiemFormat?: string; + meridiemCellFormat?: string; // Column desc hour?: string; diff --git a/src/locale/zh_CN.ts b/src/locale/zh_CN.ts index 5e160940d..6991dd2f4 100644 --- a/src/locale/zh_CN.ts +++ b/src/locale/zh_CN.ts @@ -5,8 +5,8 @@ const locale: Locale = { yearFormat: 'YYYYๅนด', - dayFormat: 'D', - meridiemFormat: 'A', + dateCellFormat: 'D', + meridiemCellFormat: 'A', hour: 'ๆ—ถ', minute: 'ๅˆ†', From 6473da55f04d4ae3eabc3ab6d6d6e12602c21a65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 14 Nov 2023 17:03:56 +0800 Subject: [PATCH 120/380] refactor: auto fill date format on Panel --- src/NewPicker/PickerPanel/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 46238de8b..55ac94c35 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -1,5 +1,6 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; +import useLocale from '../hooks/useLocale'; import useTimeConfig from '../hooks/useTimeConfig'; import type { CellRender, @@ -134,6 +135,9 @@ function PickerPanel( nativeElement: rootRef.current, })); + // ========================= Locale ========================= + const filledLocale = useLocale(locale); + // ======================== ShowTime ======================== const mergedShowTime = useTimeConfig(props); @@ -252,7 +256,7 @@ function PickerPanel( showWeek={showWeek} // MISC prefixCls={mergedPrefixCls} - locale={locale} + locale={filledLocale} generateConfig={generateConfig} // Mode onModeChange={triggerModeChange} From 2526c06e03772b56c654e09bd91bcb62b18ba55a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 14 Nov 2023 17:20:12 +0800 Subject: [PATCH 121/380] chore: format support --- docs/examples/debug.tsx | 2 +- src/NewPicker/PickerPanel/DatePanel/index.tsx | 8 +- .../PickerPanel/DecadePanel/index.tsx | 7 +- .../PickerPanel/MonthPanel/index.tsx | 8 +- src/NewPicker/PickerPanel/PanelBody.tsx | 17 ++- .../PickerPanel/QuarterPanel/index.tsx | 1 + src/NewPicker/PickerPanel/YearPanel/index.tsx | 8 +- src/locale/zh_CN.ts | 2 - tests/__snapshots__/range.spec.tsx.snap | 108 ++++++++++++++++++ 9 files changed, 129 insertions(+), 32 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 001017740..af669efd3 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -54,7 +54,7 @@ export default () => { // direction="rtl" // className="good" // style={{ opacity: 0.5 }} - // picker="month" + picker="week" // monthCellRender={(date) => { // return <>MM{date.month()}; // }} diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index 1f29c8c60..9e4eb09be 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -192,13 +192,7 @@ export default function DatePanel(props: DatePanelProps - formatValue(date, { - locale, - format: locale.fieldDateFormat, - generateConfig, - }) - } + titleFormat={locale.fieldDateFormat} {...props} colNum={WEEK_DAY_COUNT} rowNum={6} diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx index 8baa32710..37f24ea1a 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -1,4 +1,3 @@ -import classNames from 'classnames'; import * as React from 'react'; import { formatValue, isSameDecade } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../interface'; @@ -72,11 +71,7 @@ export default function DecadePanel(props: SharedPanelProps -
          +
          {/* Header */} { diff --git a/src/NewPicker/PickerPanel/MonthPanel/index.tsx b/src/NewPicker/PickerPanel/MonthPanel/index.tsx index f96a68841..857976c22 100644 --- a/src/NewPicker/PickerPanel/MonthPanel/index.tsx +++ b/src/NewPicker/PickerPanel/MonthPanel/index.tsx @@ -1,4 +1,3 @@ -import classNames from 'classnames'; import * as React from 'react'; import { formatValue, isSameMonth } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../interface'; @@ -81,11 +80,7 @@ export default function MonthPanel(props: SharedPanelProps -
          +
          {/* Header */} { @@ -99,6 +94,7 @@ export default function MonthPanel(props: SharedPanelProps { colNum: number; baseDate: DateType; - titleCell?: (date: DateType) => string; + titleFormat?: string; // Render getCellDate: (date: DateType, offset: number) => DateType; @@ -36,7 +36,7 @@ export default function PanelBody(props: PanelBodyProps(props: PanelBodyProps{getCellText(currentDate)}
          ; rowNode.push( (props: SharedPanelProps(props: SharedPanelProps -
          +
          {/* Header */} { @@ -103,6 +98,7 @@ export default function YearPanel(props: SharedPanelProps
          D @@ -309,6 +310,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -317,6 +319,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -325,6 +328,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -333,6 +337,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -341,6 +346,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -349,6 +355,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -359,6 +366,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -367,6 +375,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -375,6 +384,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -383,6 +393,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -391,6 +402,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -399,6 +411,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -407,6 +420,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -417,6 +431,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -425,6 +440,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -433,6 +449,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -441,6 +458,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -449,6 +467,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -457,6 +476,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -465,6 +485,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -475,6 +496,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -483,6 +505,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -491,6 +514,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -499,6 +523,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -507,6 +532,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -515,6 +541,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -523,6 +550,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -533,6 +561,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -541,6 +570,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -549,6 +579,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -557,6 +588,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -565,6 +597,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -573,6 +606,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -581,6 +615,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -591,6 +626,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -599,6 +635,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -607,6 +644,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -615,6 +653,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -623,6 +662,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -631,6 +671,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -639,6 +680,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -744,6 +786,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -752,6 +795,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -760,6 +804,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -768,6 +813,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -776,6 +822,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -784,6 +831,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -792,6 +840,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -802,6 +851,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -810,6 +860,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -818,6 +869,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -826,6 +878,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -834,6 +887,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -842,6 +896,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -850,6 +905,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -860,6 +916,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -868,6 +925,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -876,6 +934,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -884,6 +943,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -892,6 +952,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -900,6 +961,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -908,6 +970,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -918,6 +981,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -926,6 +990,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -934,6 +999,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -942,6 +1008,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -950,6 +1017,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -958,6 +1026,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -966,6 +1035,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -976,6 +1046,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -984,6 +1055,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -992,6 +1064,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -1000,6 +1073,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -1008,6 +1082,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -1016,6 +1091,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -1024,6 +1100,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -1034,6 +1111,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -1042,6 +1120,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -1050,6 +1129,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -1058,6 +1138,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -1066,6 +1147,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -1074,6 +1156,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -1082,6 +1165,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          D @@ -1209,6 +1293,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1217,6 +1302,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1225,6 +1311,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1233,6 +1320,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1243,6 +1331,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1251,6 +1340,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1259,6 +1349,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1267,6 +1358,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1277,6 +1369,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1285,6 +1378,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1293,6 +1387,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1301,6 +1396,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1359,6 +1455,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1367,6 +1464,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1375,6 +1473,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1383,6 +1482,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1393,6 +1493,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1401,6 +1502,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1409,6 +1511,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1417,6 +1520,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1427,6 +1531,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1435,6 +1540,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1443,6 +1549,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M @@ -1451,6 +1558,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          M From bbf2ac0fb9053f84430c99591c36a905a3ee0a4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 14 Nov 2023 18:07:18 +0800 Subject: [PATCH 122/380] test: more test case --- docs/examples/debug.tsx | 71 ++++++++++++++++++++++----------------- tests/new-range.spec.tsx | 34 +++++++++++++++++++ tests/util/commonUtil.tsx | 2 ++ 3 files changed, 76 insertions(+), 31 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index af669efd3..addbeb6ce 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -4,19 +4,28 @@ import type { Locale, PickerRef } from '../../src/NewPicker/interface'; import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import PickerPanel, { type PickerPanelProps } from '../../src/NewPicker/PickerPanel'; -import moment, { type Moment } from 'moment'; -import 'moment/locale/zh-cn'; -import momentGenerateConfig from '../../src/generate/moment'; +import dayjs, { type Dayjs } from 'dayjs'; +import 'dayjs/locale/zh-cn'; +import buddhistEra from 'dayjs/plugin/buddhistEra'; +import dayjsGenerateConfig from '../../src/generate/dayjs'; import zhCN from '../../src/locale/zh_CN'; -moment.locale('zh-cn'); -window.moment = moment; +dayjs.locale('zh-cn'); +dayjs.extend(buddhistEra); -const myLocale: Locale = { ...zhCN, quarterCellFormat: '็ฌฌQๅญฃๅบฆ' }; +(window as any).dayjs = dayjs; + +const myLocale: Locale = { + ...zhCN, + quarterCellFormat: '็ฌฌQๅญฃๅบฆ', + fieldYearFormat: 'BBBB', + yearCellFormat: 'BBBB', + yearFormat: 'BBBB', +}; const sharedLocale = { locale: myLocale, - generateConfig: momentGenerateConfig, + generateConfig: dayjsGenerateConfig, }; function CellPicker(props: Partial) { @@ -33,15 +42,15 @@ const MyTime = () =>
          2333
          ; export default () => { const singleRef = React.useRef(null); - const [value, setValue] = React.useState(null); - const [rangeValue, setRangeValue] = React.useState<[Moment?, Moment?]>(); + const [value, setValue] = React.useState(null); + const [rangeValue, setRangeValue] = React.useState<[Dayjs?, Dayjs?]>(); // has start - // [moment('2023-11-15'), null], + // [dayjs('2023-11-15'), null], // has end - // [null, moment('2023-11-15')], - // [moment('2023-11-5'), moment('2023-12-29')], - // [moment('2000-09-03'), moment('1990-09-03')], - // [moment('1990-09-03'), null], + // [null, dayjs('2023-11-15')], + // [dayjs('2023-11-5'), dayjs('2023-12-29')], + // [dayjs('2000-09-03'), dayjs('1990-09-03')], + // [dayjs('1990-09-03'), null], // null, // undefined, @@ -54,31 +63,31 @@ export default () => { // direction="rtl" // className="good" // style={{ opacity: 0.5 }} - picker="week" + picker="year" // monthCellRender={(date) => { // return <>MM{date.month()}; // }} // presets={[ // { // label: 'Now', - // value: [moment(), moment()], + // value: [dayjs(), dayjs()], // }, // { // label: 'This Week', - // value: [moment().add(-7, 'd'), moment()], + // value: [dayjs().add(-7, 'd'), dayjs()], // }, // { // label: 'Last Week', - // value: [moment().add(-14, 'd'), moment().add(-7, 'd')], + // value: [dayjs().add(-14, 'd'), dayjs().add(-7, 'd')], // }, // { // label: 'Wrong Order', - // value: [moment(), moment().add(-14, 'd')], + // value: [dayjs(), dayjs().add(-14, 'd')], // }, // ]} value={rangeValue} placeholder={['Start', 'End']} - // defaultValue={[moment('1990-11-28'), moment('2000-09-03')]} + // defaultValue={[dayjs('1990-11-28'), dayjs('2000-09-03')]} // onPickerValueChange={(dates, info) => { // console.log('๐Ÿญ Picker Value Change:', dates, info); // }} @@ -93,7 +102,7 @@ export default () => { // }} // changeOnBlur format={{ - format: 'YYYY--MM--DD', + format: 'BBBB', // format: 'YYYY-MM-DD HH:mm:ss.SSS', // // format: 'YYYYMMDD', // align: true, @@ -102,7 +111,7 @@ export default () => { // showTime // showTime={ // { - // // defaultValue: [moment('2000-01-01 01:03:05'), moment('2000-01-01 03:07:22')], + // // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], // } // } // onOk={() => { @@ -154,9 +163,9 @@ export default () => { showTime={{ format: 'HH:mm:ss.SSS', showTitle: true, - // defaultValue: moment('2000-01-01 01:03:05.800'), + // defaultValue: dayjs('2000-01-01 01:03:05.800'), }} - pickerValue={moment('2000-01-01 01:03:05.800')} + pickerValue={dayjs('2000-01-01 01:03:05.800')} /> */} {/* { /> */} {/* date.date() === 11} - // cellRender={(date: Moment, info) => { + // cellRender={(date: Dayjs, info) => { // if (info.type === 'date') { // return date.format('Do'); // } @@ -183,13 +192,13 @@ export default () => { date.week() === 3} /> date.week() === 3} value={value} onChange={setValue} @@ -197,19 +206,19 @@ export default () => { date.week() === 3} /> date.week() === 3} /> date.week() === 3} showTime={{ format: 'HH:mm:ss.SSS', diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index 5e3973105..0e9afeffd 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -3,6 +3,7 @@ import { act, fireEvent, render } from '@testing-library/react'; import { type Dayjs } from 'dayjs'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; +import zh_CN from '../src/locale/zh_CN'; import { closePicker, DayRangePicker, @@ -192,4 +193,37 @@ describe('NewPicker.Range', () => { expect(firstInput).toHaveValue('invalidate 123'); }); }); + + describe('format', () => { + it('support BBBB', () => { + const onChange = jest.fn(); + + const { container } = render( + , + ); + + openPicker(container); + + // Title + expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('2533-2542'); + + // Cell + selectCell(2538); + selectCell(2551, 1); + + expect(onChange).toHaveBeenCalledWith(expect.anything(), ['2538', '2551']); + + expect(container.querySelectorAll('input')[0]).toHaveValue('2538'); + expect(container.querySelectorAll('input')[1]).toHaveValue('2551'); + }); + }); }); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 45480379b..7f4e3148e 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { act, fireEvent } from '@testing-library/react'; import dayjs, { isDayjs, type Dayjs } from 'dayjs'; import 'dayjs/locale/zh-cn'; +import buddhistEra from 'dayjs/plugin/buddhistEra'; import moment, { isMoment, type Moment } from 'moment'; import Picker, { PickerPanel, type PickerProps } from '../../src'; import dayGenerateConfig from '../../src/generate/dayjs'; @@ -24,6 +25,7 @@ import RangePicker, { } from '../../src/RangePicker'; dayjs.locale('zh-cn'); +dayjs.extend(buddhistEra); const FULL_FORMAT = 'YYYY-MM-DD HH:mm:ss'; From 22e08f22d0ff3995778a25d5689a47c600ab6b67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 14 Nov 2023 18:28:21 +0800 Subject: [PATCH 123/380] fix: LTS support --- docs/examples/debug.tsx | 4 ++-- src/NewPicker/PickerPanel/DatePanel/index.tsx | 2 +- src/NewPicker/PickerPanel/DecadePanel/index.tsx | 6 +++--- src/NewPicker/PickerPanel/QuarterPanel/index.tsx | 2 +- .../TimePanel/TimePanelBody/index.tsx | 6 +++--- src/NewPicker/PickerPanel/YearPanel/index.tsx | 2 +- src/NewPicker/hooks/useLocale.ts | 16 ++++++++-------- src/NewPicker/hooks/useTimeConfig.ts | 11 ++++++++++- src/NewPicker/index.tsx | 2 +- src/NewPicker/interface.tsx | 10 +++++----- tests/new-range.spec.tsx | 11 ++++++++++- 11 files changed, 45 insertions(+), 27 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index addbeb6ce..1c100b426 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -63,7 +63,7 @@ export default () => { // direction="rtl" // className="good" // style={{ opacity: 0.5 }} - picker="year" + picker="time" // monthCellRender={(date) => { // return <>MM{date.month()}; // }} @@ -102,7 +102,7 @@ export default () => { // }} // changeOnBlur format={{ - format: 'BBBB', + format: 'LTS', // format: 'YYYY-MM-DD HH:mm:ss.SSS', // // format: 'YYYYMMDD', // align: true, diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index 9e4eb09be..7804e4812 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -110,7 +110,7 @@ export default function DatePanel(props: DatePanelProps { return formatValue(date, { locale, - format: locale.dateCellFormat, + format: locale.cellDateFormat, generateConfig, }); }; diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx index 37f24ea1a..85c77455c 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -27,16 +27,16 @@ export default function DecadePanel(props: SharedPanelProps { - const yearCellFormat = locale.yearCellFormat; + const cellYearFormat = locale.cellYearFormat; const startYearStr = formatValue(date, { locale, - format: yearCellFormat, + format: cellYearFormat, generateConfig, }); const endYearStr = formatValue(generateConfig.addYear(date, 9), { locale, - format: yearCellFormat, + format: cellYearFormat, generateConfig, }); diff --git a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx index 20bb319bc..50e3b5b1f 100644 --- a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx +++ b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx @@ -31,7 +31,7 @@ export default function QuarterPanel(props: SharedPanelProps { return formatValue(date, { locale, - format: locale.quarterCellFormat, + format: locale.cellQuarterFormat, generateConfig, }); }; diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index e4d7d2278..ad1a44017 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -222,12 +222,12 @@ export default function TimePanelBody(props: SharedTimeProps { - const { meridiemCellFormat } = locale; - return meridiemCellFormat + const { cellMeridiemFormat } = locale; + return cellMeridiemFormat ? formatValue(amDate, { generateConfig, locale, - format: meridiemCellFormat, + format: cellMeridiemFormat, }) : defaultLabel; }; diff --git a/src/NewPicker/PickerPanel/YearPanel/index.tsx b/src/NewPicker/PickerPanel/YearPanel/index.tsx index 1919395a2..3d66709c9 100644 --- a/src/NewPicker/PickerPanel/YearPanel/index.tsx +++ b/src/NewPicker/PickerPanel/YearPanel/index.tsx @@ -37,7 +37,7 @@ export default function YearPanel(props: SharedPanelProps { return formatValue(date, { locale, - format: locale.yearCellFormat, + format: locale.cellYearFormat, generateConfig, }); }; diff --git a/src/NewPicker/hooks/useLocale.ts b/src/NewPicker/hooks/useLocale.ts index 1c0179ee8..5ec4e547d 100644 --- a/src/NewPicker/hooks/useLocale.ts +++ b/src/NewPicker/hooks/useLocale.ts @@ -7,7 +7,7 @@ import type { Locale } from '../interface'; export default function useLocale(locale: Locale) { return React.useMemo(() => { // Not fill `monthFormat` since `locale.shortMonths` handle this - // Not fill `meridiemCellFormat` since AM & PM by default + // Not fill `cellMeridiemFormat` since AM & PM by default const { // Input Field dateFormat, @@ -25,12 +25,12 @@ export default function useLocale(locale: Locale) { // monthFormat, // Cell format - yearCellFormat, - quarterCellFormat, + cellYearFormat, + cellQuarterFormat, dayFormat, - dateCellFormat, + cellDateFormat, - // meridiemCellFormat, + // cellMeridiemFormat, } = locale; return { @@ -46,9 +46,9 @@ export default function useLocale(locale: Locale) { yearFormat: yearFormat || 'YYYY', - yearCellFormat: yearCellFormat || 'YYYY', - quarterCellFormat: quarterCellFormat || '[Q]Q', - dateCellFormat: dateCellFormat || dayFormat || 'D', + cellYearFormat: cellYearFormat || 'YYYY', + cellQuarterFormat: cellQuarterFormat || '[Q]Q', + cellDateFormat: cellDateFormat || dayFormat || 'D', }; }, [locale]); } diff --git a/src/NewPicker/hooks/useTimeConfig.ts b/src/NewPicker/hooks/useTimeConfig.ts index f182887db..7455f41b3 100644 --- a/src/NewPicker/hooks/useTimeConfig.ts +++ b/src/NewPicker/hooks/useTimeConfig.ts @@ -41,6 +41,15 @@ function pickTimeProps(props: object): SharedTimeProps timeProps[key] = props[key]; } }); + + if (timeProps.format) { + let format = timeProps.format; + if (Array.isArray(format)) { + format = format[0]; + } + timeProps.format = typeof format === 'object' ? format.format : format; + } + return timeProps; } @@ -57,7 +66,7 @@ export default function useTimeConfig( } if (picker === 'time') { - return pickTimeProps(showTime || {}) as Config; + return showTime || (pickTimeProps(componentProps) as Config); } return showTime || null; diff --git a/src/NewPicker/index.tsx b/src/NewPicker/index.tsx index bcf0979b5..ec1dddee1 100644 --- a/src/NewPicker/index.tsx +++ b/src/NewPicker/index.tsx @@ -12,7 +12,7 @@ * - TimePicker support `changeOnScroll` * - TimePicker support `showTitle` * - TimePicker support `millisecond` - * - Support meridiemCellFormat for AM/PM + * - Support cellMeridiemFormat for AM/PM * - Get correct `disabledHours` when set `use12Hours` * - Support `showWeek` * diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 3beddd99c..02dc3b17a 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -40,15 +40,15 @@ export type Locale = { // Cell format /** year format in body panel */ - yearCellFormat?: string; + cellYearFormat?: string; /** quarter format in body panel */ - quarterCellFormat?: string; - /** @deprecated Please use `dateCellFormat` instead */ + cellQuarterFormat?: string; + /** @deprecated Please use `cellDateFormat` instead */ dayFormat?: string; /** day format in body panel */ - dateCellFormat?: string; + cellDateFormat?: string; /** meridiem format in body panel */ - meridiemCellFormat?: string; + cellMeridiemFormat?: string; // Column desc hour?: string; diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index 0e9afeffd..126eca253 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -205,7 +205,7 @@ describe('NewPicker.Range', () => { locale={{ ...zh_CN, fieldYearFormat: 'BBBB', - yearCellFormat: 'BBBB', + cellYearFormat: 'BBBB', yearFormat: 'BBBB', }} />, @@ -225,5 +225,14 @@ describe('NewPicker.Range', () => { expect(container.querySelectorAll('input')[0]).toHaveValue('2538'); expect(container.querySelectorAll('input')[1]).toHaveValue('2551'); }); + + it('support LTS', () => { + const { rerender } = render(); + expect(document.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(3); + + // With second + rerender(); + expect(document.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(4); + }); }); }); From c629b7de7fb91d1a51ba58f9364b7f7cd1376735 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 15 Nov 2023 10:35:20 +0800 Subject: [PATCH 124/380] chore: clean up --- docs/examples/debug.tsx | 15 ++++++++++----- src/NewPicker/hooks/useLocale.ts | 6 ++---- src/NewPicker/index.tsx | 4 ++++ src/NewPicker/interface.tsx | 2 -- tests/new-range.spec.tsx | 18 +++++++++++++++++- 5 files changed, 33 insertions(+), 12 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 1c100b426..bd710d18b 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -5,22 +5,27 @@ import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import PickerPanel, { type PickerPanelProps } from '../../src/NewPicker/PickerPanel'; import dayjs, { type Dayjs } from 'dayjs'; +import 'dayjs/locale/ar'; import 'dayjs/locale/zh-cn'; import buddhistEra from 'dayjs/plugin/buddhistEra'; import dayjsGenerateConfig from '../../src/generate/dayjs'; import zhCN from '../../src/locale/zh_CN'; dayjs.locale('zh-cn'); +dayjs.locale('ar'); dayjs.extend(buddhistEra); +console.log('>>', dayjs().format('YYYY-MM-dd')); + (window as any).dayjs = dayjs; const myLocale: Locale = { ...zhCN, - quarterCellFormat: '็ฌฌQๅญฃๅบฆ', - fieldYearFormat: 'BBBB', - yearCellFormat: 'BBBB', - yearFormat: 'BBBB', + cellQuarterFormat: '็ฌฌQๅญฃๅบฆ', + // fieldYearFormat: 'BBBB', + // cellYearFormat: 'BBBB', + // yearFormat: 'BBBB', + cellDateFormat: '!d!', }; const sharedLocale = { @@ -63,7 +68,7 @@ export default () => { // direction="rtl" // className="good" // style={{ opacity: 0.5 }} - picker="time" + // picker="time" // monthCellRender={(date) => { // return <>MM{date.month()}; // }} diff --git a/src/NewPicker/hooks/useLocale.ts b/src/NewPicker/hooks/useLocale.ts index 5ec4e547d..179cc357e 100644 --- a/src/NewPicker/hooks/useLocale.ts +++ b/src/NewPicker/hooks/useLocale.ts @@ -10,8 +10,6 @@ export default function useLocale(locale: Locale) { // Not fill `cellMeridiemFormat` since AM & PM by default const { // Input Field - dateFormat, - dateTimeFormat, fieldDateTimeFormat, fieldDateFormat, fieldTimeFormat, @@ -36,8 +34,8 @@ export default function useLocale(locale: Locale) { return { ...locale, - fieldDateTimeFormat: fieldDateTimeFormat || dateTimeFormat || 'YYYY-MM-DD HH:mm:ss', - fieldDateFormat: fieldDateFormat || dateFormat || 'YYYY-MM-DD', + fieldDateTimeFormat: fieldDateTimeFormat || 'YYYY-MM-DD HH:mm:ss', + fieldDateFormat: fieldDateFormat || 'YYYY-MM-DD', fieldTimeFormat: fieldTimeFormat || 'HH:mm:ss', fieldMonthFormat: fieldMonthFormat || 'YYYY-MM', fieldYearFormat: fieldYearFormat || 'YYYY', diff --git a/src/NewPicker/index.tsx b/src/NewPicker/index.tsx index ec1dddee1..43097ab5c 100644 --- a/src/NewPicker/index.tsx +++ b/src/NewPicker/index.tsx @@ -7,6 +7,10 @@ * - `pickerValue` is now full controlled * - `defaultPickerValue` will take effect on every field active with popup opening. * - [Break] clear button return the event with `onClick` + * + * - Locale + * - Remove `dateFormat` since it's never used + * - Remove `dateTimeFormat` since it's never used * * - Picker * - TimePicker support `changeOnScroll` diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 02dc3b17a..4db064554 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -12,8 +12,6 @@ export type Locale = { // Input format /** @deprecated Please use `fieldDateFormat` instead */ dateFormat?: string; - /** @deprecated Please use `fieldDateTimeFormat` instead */ - dateTimeFormat?: string; /** Input field formatter like YYYY-MM-DD HH:mm:ss */ fieldDateTimeFormat?: string; /** Input field formatter like YYYY-MM-DD */ diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index 126eca253..cbe7c3f19 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -1,6 +1,7 @@ // In theory, all RangePicker test cases should be paired with SinglePicker import { act, fireEvent, render } from '@testing-library/react'; -import { type Dayjs } from 'dayjs'; +import dayjs, { type Dayjs } from 'dayjs'; +import 'dayjs/locale/ar'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; import zh_CN from '../src/locale/zh_CN'; @@ -18,6 +19,7 @@ describe('NewPicker.Range', () => { beforeEach(() => { resetWarned(); jest.useFakeTimers().setSystemTime(getDay('1990-09-03 00:00:00').valueOf()); + dayjs.locale('zh-cn'); }); afterEach(() => { @@ -234,5 +236,19 @@ describe('NewPicker.Range', () => { rerender(); expect(document.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(4); }); + + it('cellDateFormat should work', () => { + render( + , + ); + + expect(document.querySelector('[title="1990-11-04"]').textContent).toEqual('!04!'); + }); }); }); From 2baaf0508ba209978ed8668305dc0e7d8e76522f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 15 Nov 2023 10:46:52 +0800 Subject: [PATCH 125/380] chore: tmp of it --- tests/new-range.spec.tsx | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index cbe7c3f19..0bb410843 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -196,7 +196,7 @@ describe('NewPicker.Range', () => { }); }); - describe('format', () => { + describe('format and panel', () => { it('support BBBB', () => { const onChange = jest.fn(); @@ -250,5 +250,32 @@ describe('NewPicker.Range', () => { expect(document.querySelector('[title="1990-11-04"]').textContent).toEqual('!04!'); }); + + it('cellQuarterFormat should work', () => { + render( + , + ); + + expect(document.querySelector('[title="1990-Q1"]').textContent).toEqual('็ฌฌ1ๅญฃๅบฆ'); + }); + + it('time show header', () => { + render( + , + ); + }); }); }); From 4e3202486733cf5bff2a0bf44b409da31596f37f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 15 Nov 2023 11:13:58 +0800 Subject: [PATCH 126/380] chore: rm showTitle --- docs/examples/debug.tsx | 38 ++++++++++-------- .../TimePanel/TimePanelBody/TimeColumn.tsx | 18 +-------- .../TimePanel/TimePanelBody/index.tsx | 11 ------ src/NewPicker/hooks/useTimeConfig.ts | 1 - src/NewPicker/index.tsx | 1 - src/NewPicker/interface.tsx | 11 +----- tests/new-range.spec.tsx | 39 +++++++++++++++++-- 7 files changed, 61 insertions(+), 58 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index bd710d18b..d048b4513 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -10,12 +10,13 @@ import 'dayjs/locale/zh-cn'; import buddhistEra from 'dayjs/plugin/buddhistEra'; import dayjsGenerateConfig from '../../src/generate/dayjs'; import zhCN from '../../src/locale/zh_CN'; +import TimePanel from '../../src/NewPicker/PickerPanel/TimePanel'; dayjs.locale('zh-cn'); -dayjs.locale('ar'); +// dayjs.locale('ar'); dayjs.extend(buddhistEra); -console.log('>>', dayjs().format('YYYY-MM-dd')); +// console.log('>>', dayjs().format('YYYY-MM-dd')); (window as any).dayjs = dayjs; @@ -25,7 +26,7 @@ const myLocale: Locale = { // fieldYearFormat: 'BBBB', // cellYearFormat: 'BBBB', // yearFormat: 'BBBB', - cellDateFormat: '!d!', + // cellDateFormat: '!d!', }; const sharedLocale = { @@ -42,7 +43,14 @@ function CellPicker(props: Partial) { ); } -const MyTime = () =>
          2333
          ; +const MyTime = (props: any) => { + return ( +
          + 2333 + +
          + ); +}; export default () => { const singleRef = React.useRef(null); @@ -65,10 +73,10 @@ export default () => {
          { // return <>MM{date.month()}; // }} @@ -114,11 +122,9 @@ export default () => { }} // preserveInvalidOnBlur // showTime - // showTime={ - // { - // // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], - // } - // } + showTime={{ + // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], + }} // onOk={() => { // console.log('๐Ÿท Ok!'); // }} @@ -160,18 +166,18 @@ export default () => {
          - {/* */} + /> {/* void; changeOnScroll?: boolean; - showTitle?: boolean; - title?: React.ReactNode; } export default function TimeColumn(props: TimeUnitColumnProps) { - const { showTitle, title, units, value, optionalValue, type, onChange, changeOnScroll } = props; + const { units, value, optionalValue, type, onChange, changeOnScroll } = props; const { prefixCls, cellRender, now, locale } = React.useContext(PanelContext); @@ -108,21 +106,9 @@ export default function TimeColumn(props: TimeUnitColumnProps) { // ========================= Render ========================= const columnPrefixCls = `${panelPrefixCls}-column`; - const columnHolderPrefixCls = `${columnPrefixCls}-holder`; return ( -
          - {showTitle && ( -
          - {title !== undefined ? title || '\u00A0' : type} -
          - )} - +
            {units.map(({ label, value: unitValue, disabled }) => { const inner =
            {label}
            ; diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index ad1a44017..6e59e05fe 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -54,7 +54,6 @@ export default function TimePanelBody(props: SharedTimeProps(props: SharedTimeProps {mergedShowHour && ( (props: SharedTimeProps(props: SharedTimeProps(props: SharedTimeProps(props: SharedTimeProps = { range?: 'start' | 'end'; type: PanelMode; locale?: Locale; - subType?: 'hour' | 'minute' | 'second' | 'meridiem'; + subType?: 'hour' | 'minute' | 'second' | 'millisecond' | 'meridiem'; }; export type CellRender = ( @@ -132,8 +125,6 @@ export interface SharedTimeProps { /** Only work in picker is `time` */ format?: string; /** Only work in picker is `time` */ - showTitle?: boolean; - /** Only work in picker is `time` */ showNow?: boolean; /** Only work in picker is `time` */ showHour?: boolean; diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index 0bb410843..08eeef36f 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -266,16 +266,49 @@ describe('NewPicker.Range', () => { expect(document.querySelector('[title="1990-Q1"]').textContent).toEqual('็ฌฌ1ๅญฃๅบฆ'); }); - it('time show header', () => { + it('components support', () => { render(

            Hello

            , }} open />, ); + + expect(document.querySelector('.bamboo').textContent).toEqual('Hello'); + }); + }); + + it('showTime.changeOnScroll', () => { + const onCalendarChange = jest.fn(); + + const { container } = render( + , + ); + + openPicker(container); + act(() => { + jest.runAllTimers(); }); + + fireEvent.scroll(document.querySelector('.rc-picker-time-panel-column')); + act(() => { + jest.runAllTimers(); + }); + + expect(onCalendarChange).toHaveBeenCalledWith( + expect.anything(), + ['00:11:11', '11:11:11'], + expect.anything(), + ); }); }); From fd5bf7c9a6ccf4d579a9855bf1a327726ab8cf01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 15 Nov 2023 11:42:10 +0800 Subject: [PATCH 127/380] fix: me format --- docs/examples/debug.tsx | 15 ++++++++--- .../TimePanel/TimePanelBody/index.tsx | 2 +- tests/new-range.spec.tsx | 25 +++++++++++++++++++ 3 files changed, 37 insertions(+), 5 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index d048b4513..711cfe0b5 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -122,9 +122,11 @@ export default () => { }} // preserveInvalidOnBlur // showTime - showTime={{ - // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], - }} + showTime={ + { + // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], + } + } // onOk={() => { // console.log('๐Ÿท Ok!'); // }} @@ -168,11 +170,16 @@ export default () => {
            (props: SharedTimeProps { const { cellMeridiemFormat } = locale; return cellMeridiemFormat - ? formatValue(amDate, { + ? formatValue(date, { generateConfig, locale, format: cellMeridiemFormat, diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index 08eeef36f..897b92fe3 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -266,6 +266,31 @@ describe('NewPicker.Range', () => { expect(document.querySelector('[title="1990-Q1"]').textContent).toEqual('็ฌฌ1ๅญฃๅบฆ'); }); + it('cellMeridiemFormat should work', () => { + render( + , + ); + + expect( + document.querySelectorAll('[data-type="meridiem"] .rc-picker-time-panel-cell')[0] + .textContent, + ).toEqual('ๆ—ฉไธŠ'); + expect( + document.querySelectorAll('[data-type="meridiem"] .rc-picker-time-panel-cell')[1] + .textContent, + ).toEqual('ๆ™šไธŠ'); + }); + it('components support', () => { render( Date: Wed, 15 Nov 2023 14:29:10 +0800 Subject: [PATCH 128/380] test: should be disabled --- docs/examples/debug.tsx | 14 ++++++++------ tests/new-range.spec.tsx | 19 +++++++++++++++++++ tests/util/commonUtil.tsx | 2 ++ 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 711cfe0b5..9a85fdd02 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -8,6 +8,7 @@ import dayjs, { type Dayjs } from 'dayjs'; import 'dayjs/locale/ar'; import 'dayjs/locale/zh-cn'; import buddhistEra from 'dayjs/plugin/buddhistEra'; +import LocalizedFormat from 'dayjs/plugin/localizedFormat'; import dayjsGenerateConfig from '../../src/generate/dayjs'; import zhCN from '../../src/locale/zh_CN'; import TimePanel from '../../src/NewPicker/PickerPanel/TimePanel'; @@ -15,6 +16,7 @@ import TimePanel from '../../src/NewPicker/PickerPanel/TimePanel'; dayjs.locale('zh-cn'); // dayjs.locale('ar'); dayjs.extend(buddhistEra); +dayjs.extend(LocalizedFormat); // console.log('>>', dayjs().format('YYYY-MM-dd')); @@ -106,7 +108,7 @@ export default () => { // }} // disabled={[true, false]} suffixIcon="๐Ÿงถ" - // disabledDate={() => true} + disabledDate={(date) => date.date() === 15} // onFocus={() => { // console.log('๐Ÿท Focus!'); // }} @@ -134,9 +136,9 @@ export default () => { console.log('๐Ÿ”ฅ Change:', val, text); setRangeValue(val); }} - // onCalendarChange={(val, text, info) => { - // console.log('๐ŸŽ‰ Calendar Change:', val, text, info); - // }} + onCalendarChange={(val, text, info) => { + console.log('๐ŸŽ‰ Calendar Change:', val, text, info); + }} // preserveInvalidOnBlur // allowEmpty={[false, true]} onOpenChange={(nextOpen) => { @@ -168,7 +170,7 @@ export default () => {
            - { // defaultValue: dayjs('2000-01-01 01:03:05.800'), }} pickerValue={dayjs('2000-01-01 01:03:05.800')} - /> + /> */} {/* { expect.anything(), ); }); + + describe('disabledDate', () => { + it('select time column should not trigger change', () => { + const onCalendarChange = jest.fn(); + const { container } = render( + true} onCalendarChange={onCalendarChange} showTime />, + ); + + openPicker(container); + fireEvent.click( + document.querySelector('.rc-picker-time-panel-column .rc-picker-time-panel-cell'), + ); + + expect(onCalendarChange).toHaveBeenCalled(); + + // Check button disabled + expect(document.querySelector('.rc-picker-ok button')).toBeDisabled(); + }); + }); }); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 7f4e3148e..7f611dbaf 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -4,6 +4,7 @@ import { act, fireEvent } from '@testing-library/react'; import dayjs, { isDayjs, type Dayjs } from 'dayjs'; import 'dayjs/locale/zh-cn'; import buddhistEra from 'dayjs/plugin/buddhistEra'; +import localizedFormat from 'dayjs/plugin/localizedFormat'; import moment, { isMoment, type Moment } from 'moment'; import Picker, { PickerPanel, type PickerProps } from '../../src'; import dayGenerateConfig from '../../src/generate/dayjs'; @@ -26,6 +27,7 @@ import RangePicker, { dayjs.locale('zh-cn'); dayjs.extend(buddhistEra); +dayjs.extend(localizedFormat); const FULL_FORMAT = 'YYYY-MM-DD HH:mm:ss'; From 692bdaecb5b7b7b9a51c2b80c2d58b407ba00cc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 15 Nov 2023 14:38:22 +0800 Subject: [PATCH 129/380] test: more test case --- docs/examples/debug.tsx | 11 ++++++----- tests/new-range.spec.tsx | 18 +++++++++++++++++- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 9a85fdd02..3f336fcaa 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -124,11 +124,12 @@ export default () => { }} // preserveInvalidOnBlur // showTime - showTime={ - { - // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], - } - } + showTime={{ + disabledTime: () => ({ + disabledHours: () => new Array(24).fill(0).map((_, index) => index), + }), + // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], + }} // onOk={() => { // console.log('๐Ÿท Ok!'); // }} diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index b848c104b..4464cb41c 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -337,7 +337,7 @@ describe('NewPicker.Range', () => { ); }); - describe('disabledDate', () => { + describe('disabled', () => { it('select time column should not trigger change', () => { const onCalendarChange = jest.fn(); const { container } = render( @@ -354,5 +354,21 @@ describe('NewPicker.Range', () => { // Check button disabled expect(document.querySelector('.rc-picker-ok button')).toBeDisabled(); }); + + it('not trigger on disabled all hours', () => { + const onCalendarChange = jest.fn(); + const { container } = render( + ({ + disabledHours: () => new Array(24).fill(0).map((_, index) => index), + }), + }} + />, + ); + + openPicker(container); + }); }); }); From 01c7e8ac980a350a218e0df0471d0d02eb7382f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 15 Nov 2023 14:43:15 +0800 Subject: [PATCH 130/380] test: more test case --- docs/examples/debug.tsx | 2 +- src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx | 2 +- tests/new-range.spec.tsx | 6 ++++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 3f336fcaa..7d02cb29e 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -75,7 +75,7 @@ export default () => {
            (props: SharedTimeProps { ); openPicker(container); + selectCell(9); + + expect(onCalendarChange).toHaveBeenCalled(); + + // Check button disabled + expect(document.querySelector('.rc-picker-ok button')).toBeDisabled(); }); }); }); From 82a34969416d262749bf21e2244270d8db9b3495 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 15 Nov 2023 15:07:45 +0800 Subject: [PATCH 131/380] fix: preset should not trigger when invalidate --- docs/examples/debug.tsx | 62 +++++++++++------------ src/NewPicker/PickerInput/RangePicker.tsx | 14 ++++- tests/new-range.spec.tsx | 24 +++++++++ 3 files changed, 67 insertions(+), 33 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 7d02cb29e..b1fd20523 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -82,24 +82,24 @@ export default () => { // monthCellRender={(date) => { // return <>MM{date.month()}; // }} - // presets={[ - // { - // label: 'Now', - // value: [dayjs(), dayjs()], - // }, - // { - // label: 'This Week', - // value: [dayjs().add(-7, 'd'), dayjs()], - // }, - // { - // label: 'Last Week', - // value: [dayjs().add(-14, 'd'), dayjs().add(-7, 'd')], - // }, - // { - // label: 'Wrong Order', - // value: [dayjs(), dayjs().add(-14, 'd')], - // }, - // ]} + presets={[ + { + label: 'Now', + value: [dayjs(), dayjs()], + }, + { + label: 'This Week', + value: [dayjs().add(-7, 'd'), dayjs()], + }, + { + label: 'Last Week', + value: [dayjs().add(-14, 'd'), dayjs().add(-7, 'd')], + }, + { + label: 'Wrong Order', + value: [dayjs(), dayjs().add(-14, 'd')], + }, + ]} value={rangeValue} placeholder={['Start', 'End']} // defaultValue={[dayjs('1990-11-28'), dayjs('2000-09-03')]} @@ -108,7 +108,7 @@ export default () => { // }} // disabled={[true, false]} suffixIcon="๐Ÿงถ" - disabledDate={(date) => date.date() === 15} + disabledDate={(date) => true} // onFocus={() => { // console.log('๐Ÿท Focus!'); // }} @@ -116,20 +116,20 @@ export default () => { // console.log('๐Ÿท Blur!'); // }} // changeOnBlur - format={{ - format: 'LTS', - // format: 'YYYY-MM-DD HH:mm:ss.SSS', - // // format: 'YYYYMMDD', - // align: true, - }} + // format={{ + // // format: 'LTS', + // // format: 'YYYY-MM-DD HH:mm:ss.SSS', + // // // format: 'YYYYMMDD', + // // align: true, + // }} // preserveInvalidOnBlur // showTime - showTime={{ - disabledTime: () => ({ - disabledHours: () => new Array(24).fill(0).map((_, index) => index), - }), - // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], - }} + // showTime={{ + // disabledTime: () => ({ + // disabledHours: () => new Array(24).fill(0).map((_, index) => index), + // }), + // // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], + // }} // onOk={() => { // console.log('๐Ÿท Ok!'); // }} diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 027c3cc83..665df856a 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -504,8 +504,18 @@ function RangePicker(props: RangePickerProps, ref: Rea }; const onPresetSubmit = (nextValues: RangeValueType) => { - triggerSubmitChange(nextValues); - triggerOpen(false, { force: true }); + // https://github.com/ant-design/ant-design/issues/18765 + const [start, end] = nextValues; + const isStartInvalidate = start && isInvalidateDate(start); + const isEndInvalidate = end && isInvalidateDate(end); + + // Invalidate value should only trigger `onCalendarChange` + if (isStartInvalidate || isEndInvalidate) { + triggerCalendarChange(nextValues); + } else { + triggerSubmitChange(nextValues); + triggerOpen(false, { force: true }); + } }; // ======================== Panel ========================= diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index 5282da97c..abd73c9e2 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -376,5 +376,29 @@ describe('NewPicker.Range', () => { // Check button disabled expect(document.querySelector('.rc-picker-ok button')).toBeDisabled(); }); + + it('not trigger onChange if presets is invalidate', () => { + const onChange = jest.fn(); + const onCalendarChange = jest.fn(); + const { container } = render( + true} + />, + ); + + openPicker(container); + fireEvent.click(document.querySelector('.rc-picker-presets li')); + + expect(onChange).not.toHaveBeenCalled(); + expect(onCalendarChange).toHaveBeenCalled(); + }); }); }); From 20b6c1ba54495d5f7dda2717be36bba7b84be82c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 15 Nov 2023 16:00:24 +0800 Subject: [PATCH 132/380] fix: block disabled --- docs/examples/debug.tsx | 44 +++++++++-------- src/NewPicker/PickerInput/Popup/Footer.tsx | 1 - src/NewPicker/PickerInput/RangePicker.tsx | 28 +++++++---- tests/new-range.spec.tsx | 57 ++++++++++++++++++++++ 4 files changed, 98 insertions(+), 32 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index b1fd20523..469a807ff 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -82,24 +82,24 @@ export default () => { // monthCellRender={(date) => { // return <>MM{date.month()}; // }} - presets={[ - { - label: 'Now', - value: [dayjs(), dayjs()], - }, - { - label: 'This Week', - value: [dayjs().add(-7, 'd'), dayjs()], - }, - { - label: 'Last Week', - value: [dayjs().add(-14, 'd'), dayjs().add(-7, 'd')], - }, - { - label: 'Wrong Order', - value: [dayjs(), dayjs().add(-14, 'd')], - }, - ]} + // presets={[ + // { + // label: 'Now', + // value: [dayjs(), dayjs()], + // }, + // { + // label: 'This Week', + // value: [dayjs().add(-7, 'd'), dayjs()], + // }, + // { + // label: 'Last Week', + // value: [dayjs().add(-14, 'd'), dayjs().add(-7, 'd')], + // }, + // { + // label: 'Wrong Order', + // value: [dayjs(), dayjs().add(-14, 'd')], + // }, + // ]} value={rangeValue} placeholder={['Start', 'End']} // defaultValue={[dayjs('1990-11-28'), dayjs('2000-09-03')]} @@ -108,7 +108,7 @@ export default () => { // }} // disabled={[true, false]} suffixIcon="๐Ÿงถ" - disabledDate={(date) => true} + disabledDate={() => true} // onFocus={() => { // console.log('๐Ÿท Focus!'); // }} @@ -123,10 +123,12 @@ export default () => { // // align: true, // }} // preserveInvalidOnBlur - // showTime + showTime + showNow // showTime={{ + // defaultValue: [dayjs('2000-01-01 00:00:00'), dayjs('2000-01-01 00:00:00')], // disabledTime: () => ({ - // disabledHours: () => new Array(24).fill(0).map((_, index) => index), + // disabledHours: () => [0], // }), // // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], // }} diff --git a/src/NewPicker/PickerInput/Popup/Footer.tsx b/src/NewPicker/PickerInput/Popup/Footer.tsx index f19289824..79fba08dd 100644 --- a/src/NewPicker/PickerInput/Popup/Footer.tsx +++ b/src/NewPicker/PickerInput/Popup/Footer.tsx @@ -31,7 +31,6 @@ export default function Footer(props: FooterProps) { showNow, onSubmit, onOk, - value, invalid, needConfirm, } = props; diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 665df856a..565c8a239 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -292,7 +292,7 @@ function RangePicker(props: RangePickerProps, ref: Rea const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, mergedShowTime); // ======================== Value ========================= - const [calendarValue, triggerCalendarChange, triggerSubmitChange, emptyValue] = useRangeValue( + const [calendarValue, triggerCalendarChange, oriTriggerSubmitChange, emptyValue] = useRangeValue( filledProps, mergedDisabled, formatList, @@ -302,6 +302,21 @@ function RangePicker(props: RangePickerProps, ref: Rea needConfirm, ); + const triggerSubmitChange = (nextValues: RangeValueType) => { + // https://github.com/ant-design/ant-design/issues/18765 + const isStartInvalidate = nextValues && nextValues[0] && isInvalidateDate(nextValues[0]); + const isEndInvalidate = nextValues && nextValues[0] && isInvalidateDate(nextValues[0]); + + // Invalidate value should only trigger `onCalendarChange` + if (isStartInvalidate || isEndInvalidate) { + triggerCalendarChange(nextValues); + return false; + } + + oriTriggerSubmitChange(nextValues); + return true; + }; + // ===================== DisabledDate ===================== const mergedDisabledDate = useRangeDisabledDate( calendarValue, @@ -504,16 +519,9 @@ function RangePicker(props: RangePickerProps, ref: Rea }; const onPresetSubmit = (nextValues: RangeValueType) => { - // https://github.com/ant-design/ant-design/issues/18765 - const [start, end] = nextValues; - const isStartInvalidate = start && isInvalidateDate(start); - const isEndInvalidate = end && isInvalidateDate(end); + const passed = triggerSubmitChange(nextValues); - // Invalidate value should only trigger `onCalendarChange` - if (isStartInvalidate || isEndInvalidate) { - triggerCalendarChange(nextValues); - } else { - triggerSubmitChange(nextValues); + if (passed) { triggerOpen(false, { force: true }); } }; diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index abd73c9e2..5038cbaf3 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -400,5 +400,62 @@ describe('NewPicker.Range', () => { expect(onChange).not.toHaveBeenCalled(); expect(onCalendarChange).toHaveBeenCalled(); }); + + it('not trigger onChange if showNow is invalidate', () => { + const onChange = jest.fn(); + const onCalendarChange = jest.fn(); + const { container } = render( + true} + />, + ); + + openPicker(container); + fireEvent.click(document.querySelector('.rc-picker-now-btn')); + fireEvent.click(document.querySelector('.rc-picker-now-btn')); + + expect(onChange).not.toHaveBeenCalled(); + expect(onCalendarChange).toHaveBeenCalledWith( + expect.anything(), + ['1990-09-03 00:00:00', '1990-09-03 00:00:00'], + expect.anything(), + ); + }); + }); + + it('showTime.defaultValue', () => { + const onCalendarChange = jest.fn(); + const { container } = render( + , + ); + + openPicker(container); + + // Start field + selectCell(6); + expect(onCalendarChange).toHaveBeenCalledWith( + expect.anything(), + ['1990-09-06 01:03:05', ''], + expect.anything(), + ); + onCalendarChange.mockReset(); + + // End field + fireEvent.click(document.querySelector('.rc-picker-ok button')); + selectCell(7); + expect(onCalendarChange).toHaveBeenCalledWith( + expect.anything(), + ['1990-09-06 01:sss03:05', '1990-09-07 02:04:06'], + expect.anything(), + ); }); }); From 5bd78fced18b197085f9e5228a52e30c7dc3c42d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 15 Nov 2023 16:28:22 +0800 Subject: [PATCH 133/380] fix: picker logic --- docs/examples/debug.tsx | 40 ++++++------ src/NewPicker/PickerInput/RangePicker.tsx | 17 +---- .../PickerInput/hooks/useInvalidate.ts | 2 +- .../PickerInput/hooks/useRangeValue.ts | 8 +-- tests/new-range.spec.tsx | 63 ++++++++++++++++++- 5 files changed, 88 insertions(+), 42 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 469a807ff..fec455166 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -82,24 +82,24 @@ export default () => { // monthCellRender={(date) => { // return <>MM{date.month()}; // }} - // presets={[ - // { - // label: 'Now', - // value: [dayjs(), dayjs()], - // }, - // { - // label: 'This Week', - // value: [dayjs().add(-7, 'd'), dayjs()], - // }, - // { - // label: 'Last Week', - // value: [dayjs().add(-14, 'd'), dayjs().add(-7, 'd')], - // }, - // { - // label: 'Wrong Order', - // value: [dayjs(), dayjs().add(-14, 'd')], - // }, - // ]} + presets={[ + { + label: 'Now', + value: [dayjs(), dayjs()], + }, + { + label: 'This Week', + value: [dayjs().add(-7, 'd'), dayjs()], + }, + { + label: 'Last Week', + value: [dayjs().add(-14, 'd'), dayjs().add(-7, 'd')], + }, + { + label: 'Wrong Order', + value: [dayjs(), dayjs().add(-14, 'd')], + }, + ]} value={rangeValue} placeholder={['Start', 'End']} // defaultValue={[dayjs('1990-11-28'), dayjs('2000-09-03')]} @@ -123,8 +123,8 @@ export default () => { // // align: true, // }} // preserveInvalidOnBlur - showTime - showNow + // showTime + // showNow // showTime={{ // defaultValue: [dayjs('2000-01-01 00:00:00'), dayjs('2000-01-01 00:00:00')], // disabledTime: () => ({ diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 565c8a239..e3111d3af 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -292,7 +292,7 @@ function RangePicker(props: RangePickerProps, ref: Rea const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, mergedShowTime); // ======================== Value ========================= - const [calendarValue, triggerCalendarChange, oriTriggerSubmitChange, emptyValue] = useRangeValue( + const [calendarValue, triggerCalendarChange, triggerSubmitChange, emptyValue] = useRangeValue( filledProps, mergedDisabled, formatList, @@ -302,21 +302,6 @@ function RangePicker(props: RangePickerProps, ref: Rea needConfirm, ); - const triggerSubmitChange = (nextValues: RangeValueType) => { - // https://github.com/ant-design/ant-design/issues/18765 - const isStartInvalidate = nextValues && nextValues[0] && isInvalidateDate(nextValues[0]); - const isEndInvalidate = nextValues && nextValues[0] && isInvalidateDate(nextValues[0]); - - // Invalidate value should only trigger `onCalendarChange` - if (isStartInvalidate || isEndInvalidate) { - triggerCalendarChange(nextValues); - return false; - } - - oriTriggerSubmitChange(nextValues); - return true; - }; - // ===================== DisabledDate ===================== const mergedDisabledDate = useRangeDisabledDate( calendarValue, diff --git a/src/NewPicker/PickerInput/hooks/useInvalidate.ts b/src/NewPicker/PickerInput/hooks/useInvalidate.ts index 0c32df6bb..a0257d983 100644 --- a/src/NewPicker/PickerInput/hooks/useInvalidate.ts +++ b/src/NewPicker/PickerInput/hooks/useInvalidate.ts @@ -27,7 +27,7 @@ export default function useInvalidate( return true; } - if (picker === 'date' && showTime) { + if ((picker === 'date' || picker === 'time') && showTime) { const { disabledHours, disabledMinutes, disabledSeconds, disabledMilliSeconds } = showTime.disabledTime?.(date) || {}; diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 0343082d8..9ea7fe28e 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -34,7 +34,7 @@ export default function useRangeValue( ): [ calendarValue: RangeValueType, triggerCalendarChange: TriggerChange, - triggerSubmitChange: (value: RangeValueType) => void, + triggerSubmitChange: (value: RangeValueType) => boolean, emptyValue: boolean, ] { const { @@ -197,12 +197,12 @@ export default function useRangeValue( } setLastSubmitResult([allPassed]); + + return allPassed; }); // From the 2 active panel finished - const triggerSubmitChange = (nextValue: RangeValueType) => { - triggerSubmit(nextValue); - }; + const triggerSubmitChange = (nextValue: RangeValueType) => triggerSubmit(nextValue); // ============================ Effect ============================ useLockEffect(focused, () => { diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index 5038cbaf3..72af1a8e5 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -425,6 +425,67 @@ describe('NewPicker.Range', () => { expect.anything(), ); }); + + it('not select disabled time', () => { + const onCalendarChange = jest.fn(); + const { container } = render( + ({ + disabledMinutes: () => [0], + }), + }} + onCalendarChange={onCalendarChange} + />, + ); + + openPicker(container); + fireEvent.click( + document.querySelector('.rc-picker-time-panel-column .rc-picker-time-panel-cell'), + ); + + expect(onCalendarChange).toHaveBeenCalledWith( + expect.anything(), + ['00:01:00', ''], + expect.anything(), + ); + }); + + it('disabledTime has error style', () => { + // rc-picker-invalid + const { container } = render( + ({ + disabledHours: () => [0], + }), + }} + />, + ); + + const startInput = container.querySelectorAll('input')[0]; + const endInput = container.querySelectorAll('input')[1]; + + fireEvent.focus(startInput); + fireEvent.change(startInput, { + target: { + value: '00:00:00', + }, + }); + expect(startInput).toHaveAttribute('aria-invalid', 'true'); + fireEvent.keyDown(startInput, { + key: 'Enter', + }); + + fireEvent.change(endInput, { + target: { + value: '00:00:00', + }, + }); + expect(startInput).toHaveAttribute('aria-invalid', 'true'); + }); }); it('showTime.defaultValue', () => { @@ -454,7 +515,7 @@ describe('NewPicker.Range', () => { selectCell(7); expect(onCalendarChange).toHaveBeenCalledWith( expect.anything(), - ['1990-09-06 01:sss03:05', '1990-09-07 02:04:06'], + ['1990-09-06 01:03:05', '1990-09-07 02:04:06'], expect.anything(), ); }); From f28a5eeb14076eba1cd6f82c7750f33801c0ea9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 15 Nov 2023 16:40:40 +0800 Subject: [PATCH 134/380] test: no clickable --- docs/examples/debug.tsx | 54 ++++++++++++++++++++-------------------- tests/new-range.spec.tsx | 34 +++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 27 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index fec455166..b9e7a7627 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -75,31 +75,31 @@ export default () => {
            { // return <>MM{date.month()}; // }} - presets={[ - { - label: 'Now', - value: [dayjs(), dayjs()], - }, - { - label: 'This Week', - value: [dayjs().add(-7, 'd'), dayjs()], - }, - { - label: 'Last Week', - value: [dayjs().add(-14, 'd'), dayjs().add(-7, 'd')], - }, - { - label: 'Wrong Order', - value: [dayjs(), dayjs().add(-14, 'd')], - }, - ]} + // presets={[ + // { + // label: 'Now', + // value: [dayjs(), dayjs()], + // }, + // { + // label: 'This Week', + // value: [dayjs().add(-7, 'd'), dayjs()], + // }, + // { + // label: 'Last Week', + // value: [dayjs().add(-14, 'd'), dayjs().add(-7, 'd')], + // }, + // { + // label: 'Wrong Order', + // value: [dayjs(), dayjs().add(-14, 'd')], + // }, + // ]} value={rangeValue} placeholder={['Start', 'End']} // defaultValue={[dayjs('1990-11-28'), dayjs('2000-09-03')]} @@ -108,7 +108,7 @@ export default () => { // }} // disabled={[true, false]} suffixIcon="๐Ÿงถ" - disabledDate={() => true} + // disabledDate={() => true} // onFocus={() => { // console.log('๐Ÿท Focus!'); // }} @@ -125,13 +125,13 @@ export default () => { // preserveInvalidOnBlur // showTime // showNow - // showTime={{ - // defaultValue: [dayjs('2000-01-01 00:00:00'), dayjs('2000-01-01 00:00:00')], - // disabledTime: () => ({ - // disabledHours: () => [0], - // }), - // // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], - // }} + showTime={{ + // defaultValue: [dayjs('2000-01-01 00:00:00'), dayjs('2000-01-01 00:00:00')], + disabledTime: () => ({ + disabledHours: () => [0], + }), + // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], + }} // onOk={() => { // console.log('๐Ÿท Ok!'); // }} diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index 72af1a8e5..8d7dac4b9 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -486,6 +486,40 @@ describe('NewPicker.Range', () => { }); expect(startInput).toHaveAttribute('aria-invalid', 'true'); }); + + it('type disabled time should not clickable ok', () => { + const { container } = render( + ({ + disabledHours: () => [0], + }), + }} + />, + ); + + const input = container.querySelectorAll('input')[0]; + + openPicker(container); + + // Enabled + fireEvent.change(input, { + target: { + value: '01:00:00', + }, + }); + console.log(container.innerHTML); + expect(document.querySelector('.rc-picker-ok button')).not.toBeDisabled(); + + // Disabled + fireEvent.change(input, { + target: { + value: '00:00:00', + }, + }); + expect(document.querySelector('.rc-picker-ok button')).toBeDisabled(); + }); }); it('showTime.defaultValue', () => { From 9d08d4f211d3223e77a02dd8c9e4800751cf863e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 15 Nov 2023 19:24:08 +0800 Subject: [PATCH 135/380] test: more test case --- docs/examples/debug.tsx | 16 ++++++++-------- tests/new-range.spec.tsx | 19 ++++++++++++++++++- 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index b9e7a7627..f216e7568 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -75,7 +75,7 @@ export default () => {
            { // preserveInvalidOnBlur // showTime // showNow - showTime={{ - // defaultValue: [dayjs('2000-01-01 00:00:00'), dayjs('2000-01-01 00:00:00')], - disabledTime: () => ({ - disabledHours: () => [0], - }), - // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], - }} + // showTime={{ + // // defaultValue: [dayjs('2000-01-01 00:00:00'), dayjs('2000-01-01 00:00:00')], + // disabledTime: () => ({ + // disabledHours: () => [0], + // }), + // // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], + // }} // onOk={() => { // console.log('๐Ÿท Ok!'); // }} diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index 8d7dac4b9..aad722a04 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -509,7 +509,6 @@ describe('NewPicker.Range', () => { value: '01:00:00', }, }); - console.log(container.innerHTML); expect(document.querySelector('.rc-picker-ok button')).not.toBeDisabled(); // Disabled @@ -553,4 +552,22 @@ describe('NewPicker.Range', () => { expect.anything(), ); }); + + it('not trigger onChange when in half', () => { + const onChange = jest.fn(); + + const { container } = render( + , + ); + + openPicker(container); + selectCell(5); + expect(onChange).not.toHaveBeenCalled(); + + selectCell(22); + expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-05', '1990-09-22']); + }); }); From 580619dde5c2ac2a131d0100989644effb533e77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 16 Nov 2023 11:18:04 +0800 Subject: [PATCH 136/380] chore: init needConfirm prop def --- src/NewPicker/interface.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index c6ad04a88..52125f150 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -302,6 +302,13 @@ export interface SharedPickerProps extends SharedHTMLAttrs { */ changeOnBlur?: boolean; + /** + * By default. Only `time` or `datetime` show the confirm button. + * `true` to make every picker need confirm. + * `false` to trigger change on blur when panel match the picker type. + */ + needConfirm?: boolean; + // Motion transitionName?: string; From 599df4c25f4bca12c43c883885435f69b09a42c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 17 Nov 2023 15:28:03 +0800 Subject: [PATCH 137/380] refactor: needConfirm logic --- docs/examples/debug.tsx | 75 +-------- src/NewPicker/PickerInput/Popup/Footer.tsx | 12 +- .../PickerInput/Popup/PopupPanel.tsx | 1 + src/NewPicker/PickerInput/Popup/index.tsx | 79 ++++++++- src/NewPicker/PickerInput/RangePicker.tsx | 152 +++++++----------- .../PickerInput/Selector/RangeSelector.tsx | 5 - .../PickerInput/hooks/useRangeActive.ts | 69 ++++++++ .../PickerInput/hooks/useRangeValue.ts | 33 ++-- src/NewPicker/interface.tsx | 8 +- 9 files changed, 227 insertions(+), 207 deletions(-) create mode 100644 src/NewPicker/PickerInput/hooks/useRangeActive.ts diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index f216e7568..36860077a 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -75,66 +75,12 @@ export default () => {
            { - // return <>MM{date.month()}; - // }} - // presets={[ - // { - // label: 'Now', - // value: [dayjs(), dayjs()], - // }, - // { - // label: 'This Week', - // value: [dayjs().add(-7, 'd'), dayjs()], - // }, - // { - // label: 'Last Week', - // value: [dayjs().add(-14, 'd'), dayjs().add(-7, 'd')], - // }, - // { - // label: 'Wrong Order', - // value: [dayjs(), dayjs().add(-14, 'd')], - // }, - // ]} - value={rangeValue} + needConfirm + // needConfirm={false} + // showTime + // value={rangeValue} placeholder={['Start', 'End']} - // defaultValue={[dayjs('1990-11-28'), dayjs('2000-09-03')]} - // onPickerValueChange={(dates, info) => { - // console.log('๐Ÿญ Picker Value Change:', dates, info); - // }} - // disabled={[true, false]} suffixIcon="๐Ÿงถ" - // disabledDate={() => true} - // onFocus={() => { - // console.log('๐Ÿท Focus!'); - // }} - // onBlur={() => { - // console.log('๐Ÿท Blur!'); - // }} - // changeOnBlur - // format={{ - // // format: 'LTS', - // // format: 'YYYY-MM-DD HH:mm:ss.SSS', - // // // format: 'YYYYMMDD', - // // align: true, - // }} - // preserveInvalidOnBlur - // showTime - // showNow - // showTime={{ - // // defaultValue: [dayjs('2000-01-01 00:00:00'), dayjs('2000-01-01 00:00:00')], - // disabledTime: () => ({ - // disabledHours: () => [0], - // }), - // // defaultValue: [dayjs('2000-01-01 01:03:05'), dayjs('2000-01-01 03:07:22')], - // }} - // onOk={() => { - // console.log('๐Ÿท Ok!'); - // }} onChange={(val, text) => { console.log('๐Ÿ”ฅ Change:', val, text); setRangeValue(val); @@ -142,25 +88,12 @@ export default () => { onCalendarChange={(val, text, info) => { console.log('๐ŸŽ‰ Calendar Change:', val, text, info); }} - // preserveInvalidOnBlur - // allowEmpty={[false, true]} onOpenChange={(nextOpen) => { console.log('๐Ÿ† Next Open:', nextOpen); }} - // open - // mode={['month', 'year']} - // onPanelChange={(val, mode) => { - // console.log('๐Ÿ† Panel Change:', val?.[0]?.format('YYYY-MM-DD'), mode); - // }} onPickerValueChange={(val, info) => { console.log('๐Ÿ‘ป Picker Value Change:', val, val?.[1]?.format('YYYY-MM-DD'), info); }} - // renderExtraFooter={(mode) => mode} - components={ - { - // datetime: () => null, - } - } />
            diff --git a/src/NewPicker/PickerInput/Popup/Footer.tsx b/src/NewPicker/PickerInput/Popup/Footer.tsx index 79fba08dd..6f90164d6 100644 --- a/src/NewPicker/PickerInput/Popup/Footer.tsx +++ b/src/NewPicker/PickerInput/Popup/Footer.tsx @@ -24,16 +24,8 @@ export interface FooterProps { } export default function Footer(props: FooterProps) { - const { - mode, - internalMode, - renderExtraFooter, - showNow, - onSubmit, - onOk, - invalid, - needConfirm, - } = props; + const { mode, internalMode, renderExtraFooter, showNow, onSubmit, onOk, invalid, needConfirm } = + props; const { prefixCls, diff --git a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx index 4930e3c8d..9111692a5 100644 --- a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx +++ b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx @@ -17,6 +17,7 @@ export default function PopupPanel(props: PopupPanelProps { return offsetPanelDate(generateConfig, picker, date, offset); diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index 05547c9ee..14f2be47a 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -25,9 +25,13 @@ export interface PopupProps // Direction direction?: 'ltr' | 'rtl'; + + // Change + needConfirm: boolean; + isInvalid: (date: DateType) => boolean; } -export default function Popup(props: PopupProps) { +export default function Popup(props: PopupProps) { const { panelRender, internalMode, @@ -44,8 +48,22 @@ export default function Popup(props: PopupProps) { onPresetHover, onPresetSubmit, + // Focus + onFocus, + onBlur, + // Direction direction, + + // Hover + onHover, + + // Change + value, + onCalendarChange, + needConfirm, + onSubmit, + isInvalid, } = props; const { prefixCls } = React.useContext(PickerContext); @@ -56,6 +74,39 @@ export default function Popup(props: PopupProps) { // ========================= Refs ========================= const wrapperRef = React.useRef(null); + // ======================== Values ======================== + // Form the `needConfirm` config, the value from panel will save temporary. + // And flush when press `OK` button. + + const [cacheValue, setCacheValue] = React.useState(value); + + // Block `onCalendarChange` before confirmed + const onPanelCalendarChange = (date: DateType) => { + onCalendarChange(date); + onHover(date); + + if (!needConfirm) { + onSubmit(date); + } else { + setCacheValue(date); + } + }; + + // Proxy `onHover` + const onPanelHover = (date: DateType) => { + onHover(date || cacheValue); + }; + + // Sync back if `value` changed + React.useEffect(() => { + setCacheValue(value); + }, [value]); + + // ======================== Footer ======================== + const onFooterSubmit = (date?: DateType) => { + onSubmit(date ?? cacheValue); + }; + // ======================== Offset ======================== const [containerWidth, setContainerWidth] = React.useState(0); const [containerOffset, setContainerOffset] = React.useState(0); @@ -81,15 +132,27 @@ export default function Popup(props: PopupProps) { // ======================== Custom ======================== let mergedNodes: React.ReactNode = (
            - prefixCls={prefixCls} presets={presets} onClick={onPresetSubmit} onHover={onPresetHover} />
            - -
            + +
            ); @@ -118,9 +181,11 @@ export default function Popup(props: PopupProps) { [rtl ? marginLeft : marginRight]: 'auto', }} // Still wish not to lose focus on mouse down - onMouseDown={(e) => { - e.preventDefault(); - }} + // onMouseDown={(e) => { + // // e.preventDefault(); + // }} + onFocus={onFocus} + onBlur={onBlur} > {mergedNodes}
            diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index e3111d3af..935023b57 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -29,6 +29,7 @@ import useInputReadOnly from './hooks/useInputReadOnly'; import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; import usePresets from './hooks/usePresets'; +import useRangeActive from './hooks/useRangeActive'; import useRangeDisabledDate from './hooks/useRangeDisabledDate'; import useRangePickerValue from './hooks/useRangePickerValue'; import useRangeValue from './hooks/useRangeValue'; @@ -132,8 +133,8 @@ function RangePicker(props: RangePickerProps, ref: Rea // Value defaultValue, value, - changeOnBlur, order = true, + needConfirm, // Disabled disabled, @@ -233,19 +234,28 @@ function RangePicker(props: RangePickerProps, ref: Rea // ======================= ShowTime ======================= const mergedShowTime = useTimeConfig(filledProps); - // ======================== Active ======================== - // When user first focus one input, any submit will trigger focus another one. - // When second time focus one input, submit will not trigger focus again. - // When click outside to close the panel, trigger event if it can trigger onChange. - const [internalActiveIndex, setActiveIndex] = React.useState(null); - const [focused, setFocused] = React.useState(false); - const lastOperationRef = React.useRef<'input' | 'panel'>(null); + // ========================= Open ========================= + const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - // If `open` is controlled, `activeIndex` should always have value - const activeIndex = open ? internalActiveIndex ?? 0 : internalActiveIndex; - const focusedIndex = open || focused ? activeIndex : null; + const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, onOpenChange); - const [activeList, setActiveList] = React.useState(null); + const triggerOpen: OnOpenChange = (nextOpen, config?: OpenConfig) => { + // No need to open if all disabled + if (mergedDisabled.some((fieldDisabled) => !fieldDisabled) || !nextOpen) { + setMergeOpen(nextOpen, config); + } + }; + + // ======================== Picker ======================== + /** Almost same as `picker`, but add `datetime` for `date` with `showTime` */ + const internalPicker: InternalMode = picker === 'date' && mergedShowTime ? 'datetime' : picker; + + const complexPicker = internalPicker === 'time' || internalPicker === 'datetime'; + const mergedNeedConfirm = needConfirm ?? complexPicker; + + // ======================== Active ======================== + const [activeIndex, setActiveIndex, focused, triggerFocus, lastOperation, nextActiveIndex] = + useRangeActive(mergedOpen, mergedDisabled); // ========================= Mode ========================= const [modes, setModes] = useMergedState<[PanelMode, PanelMode]>([picker, picker], { @@ -254,16 +264,10 @@ function RangePicker(props: RangePickerProps, ref: Rea const mergedMode = modes[activeIndex] || picker; - // ======================== Picker ======================== - /** Almost same as `picker`, but add `datetime` for `date` with `showTime` */ - const internalPicker: InternalMode = picker === 'date' && mergedShowTime ? 'datetime' : picker; - /** Extends from `mergedMode` to patch `datetime` mode */ const internalMode: InternalMode = mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode; - const needConfirm = internalMode === 'time' || internalMode === 'datetime'; - // ====================== PanelCount ====================== const multiplePanel = internalMode === picker && internalMode !== 'time'; @@ -276,18 +280,6 @@ function RangePicker(props: RangePickerProps, ref: Rea // ======================= ReadOnly ======================= const mergedInputReadOnly = useInputReadOnly(formatList, inputReadOnly); - // ========================= Open ========================= - const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - - const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, onOpenChange); - - const triggerOpen: OnOpenChange = (nextOpen, config?: OpenConfig) => { - // No need to open if all disabled - if (mergedDisabled.some((fieldDisabled) => !fieldDisabled) || !nextOpen) { - setMergeOpen(nextOpen, config); - } - }; - // ====================== Invalidate ====================== const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, mergedShowTime); @@ -297,9 +289,9 @@ function RangePicker(props: RangePickerProps, ref: Rea mergedDisabled, formatList, focused, - lastOperationRef, + lastOperation, isInvalidateDate, - needConfirm, + mergedNeedConfirm, ); // ===================== DisabledDate ===================== @@ -397,66 +389,54 @@ function RangePicker(props: RangePickerProps, ref: Rea }; const onSelectorInputChange = () => { - lastOperationRef.current = 'input'; + lastOperation('input'); }; // ==================== Selector Focus ==================== const onSelectorFocus: SelectorProps['onFocus'] = (event, index) => { + triggerOpen(true, { + inherit: true, + }); + setActiveIndex(index); - setFocused(true); + triggerFocus(true); onFocus?.(event); }; const onSelectorBlur: SelectorProps['onBlur'] = (event) => { - setFocused(false); + triggerOpen(false); - // Always trigger submit since input is always means confirm - triggerCalendarChange(calendarValue); + triggerFocus(false); onBlur?.(event); }; // ======================== Submit ======================== - const hasDisabled = mergedDisabled.some((disabledItem) => disabledItem); + // const hasDisabled = mergedDisabled.some((disabledItem) => disabledItem); - const triggerChangeAndFocusNext = (date?: DateType) => { + /** Trigger for single field submit */ + const triggerPartSubmit = (date?: DateType) => { let nextValue = calendarValue; if (date) { nextValue = fillMergedValue(date, activeIndex); } - // Focus or blur the open panel - const validateActiveList = (activeList || []).filter( - (index) => - // Filled value - nextValue[index] || - // Skip disabled - mergedDisabled[index] || - // Skip allow empty - mergedAllowEmpty[index], - ); - - // Should merge repeat fill one field action - const activeLen = new Set(validateActiveList).size; - - if (activeLen > 1 || hasDisabled) { - // Close anyway - triggerOpen(false, { index: activeIndex, force: true }); - triggerSubmitChange(nextValue); - } else if (activeLen === 1) { - // Trigger - triggerCalendarChange(nextValue); - - // Open to the next field - selectorRef.current.focus(validateActiveList[0] === 0 ? 1 : 0); + triggerSubmitChange(nextValue); + + // Check if need focus next + const nextIndex = nextActiveIndex(); + if (nextIndex === null) { + triggerOpen(false, { force: true }); + } else { + selectorRef.current.focus(nextIndex); } }; // ======================== Click ========================= const onSelectorClick: React.MouseEventHandler = (event) => { - if (focusedIndex === null) { + if (!selectorRef.current.nativeElement.contains(document.activeElement)) { // Click to focus the enabled input const enabledIndex = mergedDisabled.findIndex((d) => !d); if (enabledIndex >= 0) { @@ -519,33 +499,26 @@ function RangePicker(props: RangePickerProps, ref: Rea // >>> Focus const onPanelFocus: React.FocusEventHandler = () => { - setFocused(true); + triggerFocus(true); triggerOpen(true); }; const onPanelBlur: React.FocusEventHandler = () => { - setFocused(false); + triggerFocus(false); }; // >>> Calendar const onPanelCalendarChange: PickerPanelProps['onChange'] = (date) => { - lastOperationRef.current = 'panel'; + lastOperation('panel'); const clone: RangeValueType = fillIndex(calendarValue, activeIndex, date); - if (mergedMode === picker && !needConfirm) { - triggerChangeAndFocusNext(date); - } else { - triggerCalendarChange(clone); - } + // Only trigger calendar event but not update internal `calendarValue` state + triggerCalendarChange(clone, true); }; // >>> Close const onPopupClose = () => { - if (changeOnBlur) { - triggerCalendarChange(calendarValue); - } - // Close popup triggerOpen(false); }; @@ -562,7 +535,6 @@ function RangePicker(props: RangePickerProps, ref: Rea const panelValue = calendarValue[activeIndex] || null; // >>> invalid - const panelValueInvalid = !panelValue || isInvalidateDate(panelValue); const panelProps = React.useMemo(() => { const domProps = pickAttrs(filledProps, false); @@ -580,7 +552,7 @@ function RangePicker(props: RangePickerProps, ref: Rea // >>> Render const panel = ( - // MISC {...panelProps} showNow={mergedShowNow} @@ -601,7 +573,7 @@ function RangePicker(props: RangePickerProps, ref: Rea onPanelChange={triggerModeChange} // Value value={panelValue} - invalid={panelValueInvalid} + isInvalid={isInvalidateDate} onChange={null} onCalendarChange={onPanelCalendarChange} // PickerValue @@ -611,8 +583,8 @@ function RangePicker(props: RangePickerProps, ref: Rea hoverValue={hoverValues} onHover={onPanelHover} // Submit - needConfirm={needConfirm} - onSubmit={triggerChangeAndFocusNext} + needConfirm={mergedNeedConfirm} + onSubmit={triggerPartSubmit} // Preset presets={presetList} onPresetHover={onPresetHover} @@ -634,18 +606,6 @@ function RangePicker(props: RangePickerProps, ref: Rea ); // ======================== Effect ======================== - // >>> Active: Reset list - React.useEffect(() => { - if (!mergedOpen) { - setActiveList(null); - } else if (activeIndex !== null) { - setActiveList((ori) => { - const list = [...(ori || [])]; - return list[list.length - 1] === activeIndex ? ori : [...list, activeIndex]; - }); - } - }, [activeIndex, mergedOpen]); - // >>> Mode // Reset for every active useLayoutEffect(() => { @@ -701,13 +661,13 @@ function RangePicker(props: RangePickerProps, ref: Rea clearIcon={mergedClearIcon} suffixIcon={suffixIcon} // Active - activeIndex={focusedIndex} + activeIndex={activeIndex} activeHelp={!!internalHoverValues} allHelp={!!internalHoverValues && hoverSource === 'preset'} focused={focused} onFocus={onSelectorFocus} onBlur={onSelectorBlur} - onSubmit={triggerChangeAndFocusNext} + onSubmit={triggerPartSubmit} // Change value={hoverValues} maskFormat={maskFormat} @@ -719,7 +679,7 @@ function RangePicker(props: RangePickerProps, ref: Rea // Disabled disabled={mergedDisabled} // Open - open={mergedOpen ? focusedIndex : null} + open={mergedOpen ? activeIndex : null} onOpenChange={triggerOpen} // Click onClick={onSelectorClick} diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 1dadeeb2c..5eda309f6 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -194,16 +194,11 @@ function RangeSelector( onFocus: (event) => { onFocus(event, index); - - triggerOpen(true, index, { - inherit: true, - }); }, onBlur: (event) => { // Blur do not trigger close // Since it may focus to the popup panel onBlur(event, index); - triggerOpen(false, index); }, onEnter: onSubmit, diff --git a/src/NewPicker/PickerInput/hooks/useRangeActive.ts b/src/NewPicker/PickerInput/hooks/useRangeActive.ts new file mode 100644 index 000000000..7fe9be6ac --- /dev/null +++ b/src/NewPicker/PickerInput/hooks/useRangeActive.ts @@ -0,0 +1,69 @@ +import * as React from 'react'; + +export type OperationType = 'input' | 'panel'; + +export type NextActive = () => number | null; + +/** + * When user first focus one input, any submit will trigger focus another one. + * When second time focus one input, submit will not trigger focus again. + * When click outside to close the panel, trigger event if it can trigger onChange. + */ +export default function useRangeActive( + open: boolean, + disabled: [boolean, boolean], + // complexPicker: boolean, + // needConfirm: boolean, +): [ + activeIndex: number, + setActiveIndex: (index: number) => void, + focused: boolean, + triggerFocus: (focused: boolean) => void, + lastOperation: (type?: OperationType) => OperationType, + nextActiveIndex: NextActive, +] { + const [activeIndex, setActiveIndex] = React.useState(0); + const [focused, setFocused] = React.useState(false); + + const activeListRef = React.useRef([]); + + const lastOperationRef = React.useRef(null); + + const triggerFocus = (nextFocus: boolean) => { + setFocused(nextFocus); + }; + + // ============================= Record ============================= + const lastOperation = (type?: OperationType) => { + if (type) { + lastOperationRef.current = type; + } + return lastOperationRef.current; + }; + + // ============================ Strategy ============================ + // Trigger when input enter or input blur or panel close + const nextActiveIndex: NextActive = () => { + const list = activeListRef.current; + const activeSet = new Set(list); + const nextActiveIndex = list[list.length - 1] === 0 ? 1 : 0; + + if (activeSet.size >= 2 || disabled[nextActiveIndex]) { + return null; + } + + return nextActiveIndex; + }; + + // ============================= Effect ============================= + // Record for the open timing `activeIndex` + React.useEffect(() => { + if (!open) { + activeListRef.current = []; + } else { + activeListRef.current.push(activeIndex); + } + }, [open, activeIndex]); + + return [activeIndex, setActiveIndex, focused, triggerFocus, lastOperation, nextActiveIndex]; +} diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 9ea7fe28e..cfff733fa 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -4,12 +4,20 @@ import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; import type { FormatType } from '../../interface'; import type { RangePickerProps, RangeValueType } from '../RangePicker'; import { useLockEffect } from './useLockState'; +import type { OperationType } from './useRangeActive'; // Submit Logic (with order): // * Submit by next input // * None of the Picker has focused anymore -type TriggerChange = ([start, end]: RangeValueType, source?: 'submit') => void; +/** + * `eventOnly` means only trigger `onCalendarChange` event + * but not update internal `calendarValue` state + */ +type TriggerCalendarChange = ( + [start, end]: RangeValueType, + eventOnly?: boolean, +) => void; export default function useRangeValue( info: Pick< @@ -28,12 +36,12 @@ export default function useRangeValue( disabled: [boolean, boolean], formatList: FormatType[], focused: boolean, - lastOperationRef: React.RefObject<'input' | 'panel'>, + lastOperation: () => OperationType, isInvalidateDate: (date: DateType) => boolean, needConfirm: boolean, ): [ calendarValue: RangeValueType, - triggerCalendarChange: TriggerChange, + triggerCalendarChange: TriggerCalendarChange, triggerSubmitChange: (value: RangeValueType) => boolean, emptyValue: boolean, ] { @@ -100,14 +108,16 @@ export default function useRangeValue( return [isSameStart && isSameEnd, isSameStart, isSameEnd]; }; - const triggerCalendarChange = ([start, end]: RangeValueType) => { + const triggerCalendarChange: TriggerCalendarChange = ([start, end], eventOnly) => { const clone: RangeValueType = [start, end]; // Update merged value const [isSameMergedDates, isSameStart] = isSameDates(calendarValue, clone); if (!isSameMergedDates) { - setCalendarValue(clone); + if (!eventOnly) { + setCalendarValue(clone); + } // Trigger calendar change event if (onCalendarChange) { @@ -209,7 +219,7 @@ export default function useRangeValue( if (!focused) { // If panel no need panel confirm or last blur is not from panel // Trigger submit - if (!needConfirm || lastOperationRef.current !== 'panel') { + if (!needConfirm || lastOperation() !== 'panel') { triggerSubmit(); } else { // Else should reset `calendarValue` to `submitValue` @@ -218,13 +228,14 @@ export default function useRangeValue( } }); + // TODO: ้žๅ—ๆŽงไธ‹ `value` ่ฟ™ไธชไธไผš้‡็ฝฎ๏ผŒ้€ป่พ‘ๅบ”่ฏฅไธๅฏน // When blur & invalid, restore to empty one // This is used for typed only one input - React.useEffect(() => { - if (!lastSubmitResult[0] && !preserveInvalidOnBlur && value) { - triggerCalendarChange(value); - } - }, [lastSubmitResult]); + // React.useEffect(() => { + // if (!lastSubmitResult[0] && !preserveInvalidOnBlur && value) { + // triggerCalendarChange(value); + // } + // }, [lastSubmitResult]); // ============================ Return ============================ return [ diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 52125f150..0c510227c 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -295,17 +295,11 @@ export interface SharedPickerProps extends SharedHTMLAttrs { onOpenChange?: (open: boolean) => void; popupAlign?: AlignType; getPopupContainer?: (node: HTMLElement) => HTMLElement; - /** - * Trigger change event when click outside panel to blur. - * This is only affect `datetime` & `time` picker - * which do not have certain end action on the panel cell so need confirm button. - */ - changeOnBlur?: boolean; /** * By default. Only `time` or `datetime` show the confirm button. * `true` to make every picker need confirm. - * `false` to trigger change on blur when panel match the picker type. + * `false` to trigger change on every time value by the mode = picker. */ needConfirm?: boolean; From f9f99ceb0470f1d33e01dcd1142b890cd08c905b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 17 Nov 2023 16:21:30 +0800 Subject: [PATCH 138/380] fix: new test case --- docs/examples/debug.tsx | 25 ++++++++++--------- src/NewPicker/PickerInput/RangePicker.tsx | 12 ++++----- .../PickerInput/hooks/useRangeActive.ts | 6 ++--- 3 files changed, 22 insertions(+), 21 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 36860077a..7292cdace 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -58,16 +58,17 @@ export default () => { const singleRef = React.useRef(null); const [value, setValue] = React.useState(null); - const [rangeValue, setRangeValue] = React.useState<[Dayjs?, Dayjs?]>(); - // has start - // [dayjs('2023-11-15'), null], - // has end - // [null, dayjs('2023-11-15')], - // [dayjs('2023-11-5'), dayjs('2023-12-29')], - // [dayjs('2000-09-03'), dayjs('1990-09-03')], - // [dayjs('1990-09-03'), null], - // null, - // undefined, + const [rangeValue, setRangeValue] = React.useState<[Dayjs?, Dayjs?]>( + // has start + // [dayjs('2023-11-15'), null], + // has end + // [null, dayjs('2023-11-15')], + [dayjs('2023-11-5'), dayjs('2023-12-29')], + // [dayjs('2000-09-03'), dayjs('1990-09-03')], + // [dayjs('1990-09-03'), null], + // null, + // undefined, + ); return (
            @@ -75,10 +76,10 @@ export default () => {
            { diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 935023b57..dec64f7e2 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -416,20 +416,20 @@ function RangePicker(props: RangePickerProps, ref: Rea // const hasDisabled = mergedDisabled.some((disabledItem) => disabledItem); /** Trigger for single field submit */ - const triggerPartSubmit = (date?: DateType) => { + const triggerPartConfirm = (date?: DateType) => { let nextValue = calendarValue; if (date) { nextValue = fillMergedValue(date, activeIndex); } - triggerSubmitChange(nextValue); - // Check if need focus next const nextIndex = nextActiveIndex(); if (nextIndex === null) { + triggerSubmitChange(nextValue); triggerOpen(false, { force: true }); } else { + triggerCalendarChange(nextValue); selectorRef.current.focus(nextIndex); } }; @@ -584,7 +584,7 @@ function RangePicker(props: RangePickerProps, ref: Rea onHover={onPanelHover} // Submit needConfirm={mergedNeedConfirm} - onSubmit={triggerPartSubmit} + onSubmit={triggerPartConfirm} // Preset presets={presetList} onPresetHover={onPresetHover} @@ -661,13 +661,13 @@ function RangePicker(props: RangePickerProps, ref: Rea clearIcon={mergedClearIcon} suffixIcon={suffixIcon} // Active - activeIndex={activeIndex} + activeIndex={focused || mergedOpen ? activeIndex : null} activeHelp={!!internalHoverValues} allHelp={!!internalHoverValues && hoverSource === 'preset'} focused={focused} onFocus={onSelectorFocus} onBlur={onSelectorBlur} - onSubmit={triggerPartSubmit} + onSubmit={triggerPartConfirm} // Change value={hoverValues} maskFormat={maskFormat} diff --git a/src/NewPicker/PickerInput/hooks/useRangeActive.ts b/src/NewPicker/PickerInput/hooks/useRangeActive.ts index 7fe9be6ac..5c209a076 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeActive.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeActive.ts @@ -46,13 +46,13 @@ export default function useRangeActive( const nextActiveIndex: NextActive = () => { const list = activeListRef.current; const activeSet = new Set(list); - const nextActiveIndex = list[list.length - 1] === 0 ? 1 : 0; + const nextIndex = list[list.length - 1] === 0 ? 1 : 0; - if (activeSet.size >= 2 || disabled[nextActiveIndex]) { + if (activeSet.size >= 2 || disabled[nextIndex]) { return null; } - return nextActiveIndex; + return nextIndex; }; // ============================= Effect ============================= From 9be9ac3893cb9e6e78f398c7709897ab8bf05589 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 17 Nov 2023 16:49:50 +0800 Subject: [PATCH 139/380] fix: lock logic --- docs/examples/debug.tsx | 10 +++++++--- src/NewPicker/PickerInput/Selector/Input.tsx | 2 -- src/NewPicker/PickerInput/hooks/useLockState.ts | 7 +++++-- src/NewPicker/PickerPanel/WeekPanel/index.tsx | 1 - tests/range.spec.tsx | 4 ++-- 5 files changed, 14 insertions(+), 10 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 7292cdace..ae91b99bf 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -63,10 +63,10 @@ export default () => { // [dayjs('2023-11-15'), null], // has end // [null, dayjs('2023-11-15')], - [dayjs('2023-11-5'), dayjs('2023-12-29')], + // [dayjs('2023-11-5'), dayjs('2023-12-29')], // [dayjs('2000-09-03'), dayjs('1990-09-03')], // [dayjs('1990-09-03'), null], - // null, + null, // undefined, ); @@ -78,7 +78,7 @@ export default () => { {...sharedLocale} // needConfirm // needConfirm={false} - // showTime + showTime value={rangeValue} placeholder={['Start', 'End']} suffixIcon="๐Ÿงถ" @@ -95,6 +95,10 @@ export default () => { onPickerValueChange={(val, info) => { console.log('๐Ÿ‘ป Picker Value Change:', val, val?.[1]?.format('YYYY-MM-DD'), info); }} + id={{ + start: 'inputStart', + end: 'inputEnd', + }} />
            diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 758e197a6..27e1a9f48 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -199,8 +199,6 @@ const Input = React.forwardRef((props, ref) => { // ======================= Keyboard ======================= const onSharedKeyDown: React.KeyboardEventHandler = (event) => { - console.log('key', event.key); - if (event.key === 'Enter') { onEnter(); } diff --git a/src/NewPicker/PickerInput/hooks/useLockState.ts b/src/NewPicker/PickerInput/hooks/useLockState.ts index f29222cd5..a43740aec 100644 --- a/src/NewPicker/PickerInput/hooks/useLockState.ts +++ b/src/NewPicker/PickerInput/hooks/useLockState.ts @@ -46,12 +46,15 @@ export default function useLockState( * But trigger `callback` in next frame when `condition` is `false`. */ export function useLockEffect(condition: boolean, callback: (next: boolean) => void) { + const callbackRef = React.useRef(callback); + callbackRef.current = callback; + useLayoutUpdateEffect(() => { if (condition) { - callback(condition); + callbackRef.current(condition); } else { const id = raf(() => { - callback(condition); + callbackRef.current(condition); }); return () => { diff --git a/src/NewPicker/PickerPanel/WeekPanel/index.tsx b/src/NewPicker/PickerPanel/WeekPanel/index.tsx index 3ee0b8e96..721f56f24 100644 --- a/src/NewPicker/PickerPanel/WeekPanel/index.tsx +++ b/src/NewPicker/PickerPanel/WeekPanel/index.tsx @@ -10,7 +10,6 @@ export default function WeekPanel(props: SharedPanelProps { let rangeCls = {}; diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index ecefc5790..53f24b4eb 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -696,7 +696,8 @@ describe('Picker.Range', () => { ); }); - it('block native mouseDown in panel to prevent focus changed', () => { + // TODO: This may no need anymore + it.skip('block native mouseDown in panel to prevent focus changed', () => { const { container } = render(); openPicker(container); @@ -707,7 +708,6 @@ describe('Picker.Range', () => { expect(mouseDownEvent.defaultPrevented).toBeTruthy(); }); - // TODO: handle this describe('arrow position', () => { let domMock: ReturnType; From 176ec51be91b71aff3faf93be3f64e70306d8793 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 17 Nov 2023 17:21:02 +0800 Subject: [PATCH 140/380] fix: active logic --- docs/examples/debug.tsx | 3 ++- src/NewPicker/PickerInput/RangePicker.tsx | 4 ++-- .../PickerInput/hooks/useRangeActive.ts | 16 ++++++++-------- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index ae91b99bf..f0f3fe79f 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -78,7 +78,8 @@ export default () => { {...sharedLocale} // needConfirm // needConfirm={false} - showTime + // open + // showTime value={rangeValue} placeholder={['Start', 'End']} suffixIcon="๐Ÿงถ" diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index dec64f7e2..bdb4469f8 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -255,7 +255,7 @@ function RangePicker(props: RangePickerProps, ref: Rea // ======================== Active ======================== const [activeIndex, setActiveIndex, focused, triggerFocus, lastOperation, nextActiveIndex] = - useRangeActive(mergedOpen, mergedDisabled); + useRangeActive(mergedOpen, mergedDisabled, mergedAllowEmpty); // ========================= Mode ========================= const [modes, setModes] = useMergedState<[PanelMode, PanelMode]>([picker, picker], { @@ -424,7 +424,7 @@ function RangePicker(props: RangePickerProps, ref: Rea } // Check if need focus next - const nextIndex = nextActiveIndex(); + const nextIndex = nextActiveIndex(nextValue); if (nextIndex === null) { triggerSubmitChange(nextValue); triggerOpen(false, { force: true }); diff --git a/src/NewPicker/PickerInput/hooks/useRangeActive.ts b/src/NewPicker/PickerInput/hooks/useRangeActive.ts index 5c209a076..ac3ba1f70 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeActive.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeActive.ts @@ -1,26 +1,26 @@ import * as React from 'react'; +import type { RangeValueType } from '../RangePicker'; export type OperationType = 'input' | 'panel'; -export type NextActive = () => number | null; +export type NextActive = (nextValue: RangeValueType) => number | null; /** * When user first focus one input, any submit will trigger focus another one. * When second time focus one input, submit will not trigger focus again. * When click outside to close the panel, trigger event if it can trigger onChange. */ -export default function useRangeActive( +export default function useRangeActive( open: boolean, disabled: [boolean, boolean], - // complexPicker: boolean, - // needConfirm: boolean, + empty: [boolean, boolean], ): [ activeIndex: number, setActiveIndex: (index: number) => void, focused: boolean, triggerFocus: (focused: boolean) => void, lastOperation: (type?: OperationType) => OperationType, - nextActiveIndex: NextActive, + nextActiveIndex: NextActive, ] { const [activeIndex, setActiveIndex] = React.useState(0); const [focused, setFocused] = React.useState(false); @@ -43,12 +43,12 @@ export default function useRangeActive( // ============================ Strategy ============================ // Trigger when input enter or input blur or panel close - const nextActiveIndex: NextActive = () => { + const nextActiveIndex: NextActive = (nextValue: RangeValueType) => { const list = activeListRef.current; - const activeSet = new Set(list); + const filledActiveSet = new Set(list.filter((index) => nextValue[index] || empty[index])); const nextIndex = list[list.length - 1] === 0 ? 1 : 0; - if (activeSet.size >= 2 || disabled[nextIndex]) { + if (filledActiveSet.size >= 2 || disabled[nextIndex]) { return null; } From d185e00e792936fb1558a182d302ea5ed962619f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 17 Nov 2023 17:50:52 +0800 Subject: [PATCH 141/380] fix: no need hover --- src/NewPicker/PickerInput/Popup/index.tsx | 2 +- src/NewPicker/PickerInput/Selector/RangeSelector.tsx | 1 + tests/range.spec.tsx | 7 ++++--- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index 14f2be47a..952e9962a 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -94,7 +94,7 @@ export default function Popup(props: PopupProps) { // Proxy `onHover` const onPanelHover = (date: DateType) => { - onHover(date || cacheValue); + onHover(needConfirm ? date || cacheValue : date); }; // Sync back if `value` changed diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 5eda309f6..24b4bbf07 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -22,6 +22,7 @@ export interface RangeSelectorProps extends SelectorProps { // left openPicker(container, 0); const leftCell = findCell(24); - // leftCell.simulate('mouseEnter'); fireEvent.mouseEnter(leftCell); - jest.runAllTimers(); + + act(() => { + jest.runAllTimers(); + }); expect(document.querySelectorAll('input')[0].value).toBe('2020-07-24'); expect(document.querySelectorAll('input')[1].value).toBe('2020-08-22'); @@ -1366,7 +1368,6 @@ describe('Picker.Range', () => { 'rc-picker-input-placeholder', ); - // leftCell.simulate('mouseLeave'); fireEvent.mouseLeave(leftCell); act(() => { jest.runAllTimers(); From 6856ec68b29eb77598117fae8977b595bd3bc68f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 17 Nov 2023 18:12:46 +0800 Subject: [PATCH 142/380] test: fix test case --- docs/examples/debug.tsx | 5 +++-- tests/range.spec.tsx | 4 ++++ tests/util/commonUtil.tsx | 6 +++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index f0f3fe79f..415505880 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -63,10 +63,10 @@ export default () => { // [dayjs('2023-11-15'), null], // has end // [null, dayjs('2023-11-15')], - // [dayjs('2023-11-5'), dayjs('2023-12-29')], + [dayjs('2020-03-30'), dayjs('2020-05-20')], // [dayjs('2000-09-03'), dayjs('1990-09-03')], // [dayjs('1990-09-03'), null], - null, + // null, // undefined, ); @@ -76,6 +76,7 @@ export default () => {
            { let errorSpy; @@ -1072,7 +1074,9 @@ describe('Picker.Range', () => { defaultValue={[getDay(defaultValue[0]), getDay(defaultValue[1] || defaultValue[0])]} />, ); + console.log('~~~~~~~~~~~~'); openPicker(container, 1); + console.log('~~~~~~~~~~~~'); selectCell(targetCell); closePicker(container, 1); expect(onChange).toHaveBeenCalled(); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 7f611dbaf..1e57f6ad5 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -139,7 +139,11 @@ export class MomentRangePicker extends React.Component { export function openPicker(container: HTMLElement, index = 0) { const input = container.querySelectorAll('input')[index]; fireEvent.mouseDown(input); - fireEvent.focus(input); + + // Testing lib not trigger real focus + act(() => { + input.focus(); + }); fireEvent.click(input); } From f47df5172e7045b8bdf6e455f3952a39afad6881 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 20 Nov 2023 10:57:41 +0800 Subject: [PATCH 143/380] chore: init logic desc --- .../PickerInput/hooks/useRangeValue.ts | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index cfff733fa..4ff3dd645 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -6,9 +6,20 @@ import type { RangePickerProps, RangeValueType } from '../RangePicker'; import { useLockEffect } from './useLockState'; import type { OperationType } from './useRangeActive'; -// Submit Logic (with order): -// * Submit by next input -// * None of the Picker has focused anymore +// Submit Logic: +// * Calender Value: +// * ๐Ÿ’ป When user typing is validate, change the calendar value +// * ๐ŸŒ… When user click on the panel, change the calendar value +// * Submit Value: +// * ๐Ÿ’ป When user blur the input, flush calendar value to submit value +// * ๐ŸŒ… When user click on the panel is no needConfirm, flush calendar value to submit value +// * ๐ŸŒ… When user click on the panel is needConfirm and click OK, flush calendar value to submit value +// * All the flush will mark submitted as false +// * onChange: +// * If all the start & end field is used or all blur or panel closed +// * trigger onChange if submitted is false and reset it to true +// * onBlur: +// * Reset calendar value to submit value /** * `eventOnly` means only trigger `onCalendarChange` event @@ -83,13 +94,15 @@ export default function useRangeValue( }, [value]); // Used for trigger `onChange` event. - // Record current submitted value. + // Record current value which is wait for submit. const [submitValue, setSubmitValue] = useMergedState(defaultValue, { value, postState: (valList: RangeValueType): RangeValueType => valList || [null, null], }); + const [submitted, setSubmitted] = React.useState(true); + // ============================ Change ============================ const getDateTexts = ([start, end]: RangeValueType) => { return [start, end].map((date) => From f52d4850bacff5c8ec43511cbd1c3f4bdaf60193 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 20 Nov 2023 11:17:08 +0800 Subject: [PATCH 144/380] chore: new confirm logic --- src/NewPicker/PickerInput/Popup/index.tsx | 50 +------------------ src/NewPicker/PickerInput/RangePicker.tsx | 21 ++++++-- .../PickerInput/hooks/useRangeValue.ts | 18 +++---- src/NewPicker/interface.tsx | 4 +- 4 files changed, 27 insertions(+), 66 deletions(-) diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index 952e9962a..877ea46a9 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -55,14 +55,8 @@ export default function Popup(props: PopupProps) { // Direction direction, - // Hover - onHover, - // Change value, - onCalendarChange, - needConfirm, - onSubmit, isInvalid, } = props; @@ -74,39 +68,6 @@ export default function Popup(props: PopupProps) { // ========================= Refs ========================= const wrapperRef = React.useRef(null); - // ======================== Values ======================== - // Form the `needConfirm` config, the value from panel will save temporary. - // And flush when press `OK` button. - - const [cacheValue, setCacheValue] = React.useState(value); - - // Block `onCalendarChange` before confirmed - const onPanelCalendarChange = (date: DateType) => { - onCalendarChange(date); - onHover(date); - - if (!needConfirm) { - onSubmit(date); - } else { - setCacheValue(date); - } - }; - - // Proxy `onHover` - const onPanelHover = (date: DateType) => { - onHover(needConfirm ? date || cacheValue : date); - }; - - // Sync back if `value` changed - React.useEffect(() => { - setCacheValue(value); - }, [value]); - - // ======================== Footer ======================== - const onFooterSubmit = (date?: DateType) => { - onSubmit(date ?? cacheValue); - }; - // ======================== Offset ======================== const [containerWidth, setContainerWidth] = React.useState(0); const [containerOffset, setContainerOffset] = React.useState(0); @@ -140,18 +101,11 @@ export default function Popup(props: PopupProps) { onHover={onPresetHover} />
            - +
            diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index bdb4469f8..9a80a9226 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -413,9 +413,11 @@ function RangePicker(props: RangePickerProps, ref: Rea }; // ======================== Submit ======================== - // const hasDisabled = mergedDisabled.some((disabledItem) => disabledItem); - - /** Trigger for single field submit */ + /** + * Trigger by confirm operation. + * - Selector: enter key + * - Panel: OK button + */ const triggerPartConfirm = (date?: DateType) => { let nextValue = calendarValue; @@ -514,7 +516,18 @@ function RangePicker(props: RangePickerProps, ref: Rea const clone: RangeValueType = fillIndex(calendarValue, activeIndex, date); // Only trigger calendar event but not update internal `calendarValue` state - triggerCalendarChange(clone, true); + triggerCalendarChange(clone); + + // >>> Trigger next active if !needConfirm + // Fully logic check `useRangeValue` hook + if ( + !needConfirm && + internalPicker === internalMode && + internalPicker !== 'datetime' && + internalPicker !== 'time' + ) { + triggerPartConfirm(date); + } }; // >>> Close diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 4ff3dd645..64097722f 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -15,20 +15,16 @@ import type { OperationType } from './useRangeActive'; // * ๐ŸŒ… When user click on the panel is no needConfirm, flush calendar value to submit value // * ๐ŸŒ… When user click on the panel is needConfirm and click OK, flush calendar value to submit value // * All the flush will mark submitted as false +// * Special blur Logic: +// * If `!needConfirm`, and last operation is panel and has empty value, +// * active another input. // * onChange: // * If all the start & end field is used or all blur or panel closed // * trigger onChange if submitted is false and reset it to true // * onBlur: // * Reset calendar value to submit value -/** - * `eventOnly` means only trigger `onCalendarChange` event - * but not update internal `calendarValue` state - */ -type TriggerCalendarChange = ( - [start, end]: RangeValueType, - eventOnly?: boolean, -) => void; +type TriggerCalendarChange = ([start, end]: RangeValueType) => void; export default function useRangeValue( info: Pick< @@ -121,16 +117,14 @@ export default function useRangeValue( return [isSameStart && isSameEnd, isSameStart, isSameEnd]; }; - const triggerCalendarChange: TriggerCalendarChange = ([start, end], eventOnly) => { + const triggerCalendarChange: TriggerCalendarChange = ([start, end]) => { const clone: RangeValueType = [start, end]; // Update merged value const [isSameMergedDates, isSameStart] = isSameDates(calendarValue, clone); if (!isSameMergedDates) { - if (!eventOnly) { - setCalendarValue(clone); - } + setCalendarValue(clone); // Trigger calendar change event if (onCalendarChange) { diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 0c510227c..4f9d81267 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -297,9 +297,9 @@ export interface SharedPickerProps extends SharedHTMLAttrs { getPopupContainer?: (node: HTMLElement) => HTMLElement; /** - * By default. Only `time` or `datetime` show the confirm button. + * By default. Only `time` or `datetime` show the confirm button in panel. * `true` to make every picker need confirm. - * `false` to trigger change on every time value by the mode = picker. + * `false` to trigger change on every time panel closed by the mode = picker. */ needConfirm?: boolean; From f16a4047a04755691bda9332ce787932f1bd7a00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 20 Nov 2023 21:35:11 +0800 Subject: [PATCH 145/380] chore: renew flush logic --- docs/examples/debug.tsx | 2 +- .../PickerInput/Popup/PopupPanel.tsx | 1 + src/NewPicker/PickerInput/RangePicker.tsx | 46 ++++-- .../PickerInput/hooks/useRangeValue.ts | 142 +++++++++++------- 4 files changed, 116 insertions(+), 75 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 415505880..6902ff91c 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -77,7 +77,7 @@ export default () => { = MustProp & multiple?: boolean; }; +// TODO: `needConfirm` ไธ‹๏ผŒ่ฟž็ปญ็‚นๅ‡ปๅณ่พน็š„้ขๆฟไผšๆŒ็ปญไฝ็งป๏ผŒๅบ”่ฏฅๅช้œ€่ฆๅœจๅˆ‡ๆข field ๆ—ถๆ‰ๅšไฝ็งป export default function PopupPanel(props: PopupPanelProps) { const { picker, multiple, pickerValue, onPickerValueChange } = props; const { prefixCls, generateConfig } = React.useContext(PickerContext); diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 9a80a9226..08e5d9507 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -284,15 +284,16 @@ function RangePicker(props: RangePickerProps, ref: Rea const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, mergedShowTime); // ======================== Value ========================= - const [calendarValue, triggerCalendarChange, triggerSubmitChange, emptyValue] = useRangeValue( - filledProps, - mergedDisabled, - formatList, - focused, - lastOperation, - isInvalidateDate, - mergedNeedConfirm, - ); + const [calendarValue, triggerCalendarChange, flushSubmit, triggerSubmitChange, emptyValue] = + useRangeValue( + filledProps, + mergedDisabled, + formatList, + focused, + lastOperation, + isInvalidateDate, + mergedNeedConfirm, + ); // ===================== DisabledDate ===================== const mergedDisabledDate = useRangeDisabledDate( @@ -378,12 +379,12 @@ function RangePicker(props: RangePickerProps, ref: Rea ); // ======================== Change ======================== - const fillMergedValue = (date: DateType, index: number) => + const fillCalendarValue = (date: DateType, index: number) => // Trigger change only when date changed fillIndex(calendarValue, index, date); const onSelectorChange = (date: DateType, index: number) => { - const clone = fillMergedValue(date, index); + const clone = fillCalendarValue(date, index); triggerCalendarChange(clone); }; @@ -415,6 +416,7 @@ function RangePicker(props: RangePickerProps, ref: Rea // ======================== Submit ======================== /** * Trigger by confirm operation. + * This function has already handle the `needConfirm` check logic. * - Selector: enter key * - Panel: OK button */ @@ -422,18 +424,30 @@ function RangePicker(props: RangePickerProps, ref: Rea let nextValue = calendarValue; if (date) { - nextValue = fillMergedValue(date, activeIndex); + nextValue = fillCalendarValue(date, activeIndex); } - // Check if need focus next + // Get next focus index const nextIndex = nextActiveIndex(nextValue); + + // Change calendar value and tell flush it + triggerCalendarChange(nextValue); + flushSubmit(activeIndex, nextIndex === null); + if (nextIndex === null) { - triggerSubmitChange(nextValue); triggerOpen(false, { force: true }); } else { - triggerCalendarChange(nextValue); selectorRef.current.focus(nextIndex); } + + // if (nextIndex === null) { + // triggerCalendarChange(nextValue); + // // triggerSubmitChange(nextValue); + // triggerOpen(false, { force: true }); + // } else { + // triggerCalendarChange(nextValue); + // selectorRef.current.focus(nextIndex); + // } }; // ======================== Click ========================= @@ -495,7 +509,7 @@ function RangePicker(props: RangePickerProps, ref: Rea // ======================== Panel ========================= const onPanelHover = (date: DateType) => { - setInternalHoverValues(date ? fillMergedValue(date, activeIndex) : null); + setInternalHoverValues(date ? fillCalendarValue(date, activeIndex) : null); setHoverSource('cell'); }; diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 64097722f..012f37be1 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -1,9 +1,9 @@ -import { useEvent, useMergedState } from 'rc-util'; +import { useEvent } from 'rc-util'; import * as React from 'react'; import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; import type { FormatType } from '../../interface'; +import { fillIndex } from '../../util'; import type { RangePickerProps, RangeValueType } from '../RangePicker'; -import { useLockEffect } from './useLockState'; import type { OperationType } from './useRangeActive'; // Submit Logic: @@ -15,7 +15,8 @@ import type { OperationType } from './useRangeActive'; // * ๐ŸŒ… When user click on the panel is no needConfirm, flush calendar value to submit value // * ๐ŸŒ… When user click on the panel is needConfirm and click OK, flush calendar value to submit value // * All the flush will mark submitted as false -// * Special blur Logic: +// * Blur logic: +// * If `needConfirm`, reset calendar value to value // * If `!needConfirm`, and last operation is panel and has empty value, // * active another input. // * onChange: @@ -49,6 +50,7 @@ export default function useRangeValue( ): [ calendarValue: RangeValueType, triggerCalendarChange: TriggerCalendarChange, + flushSubmit: (index: number, needTriggerChange: boolean) => void, triggerSubmitChange: (value: RangeValueType) => boolean, emptyValue: boolean, ] { @@ -75,31 +77,7 @@ export default function useRangeValue( const orderOnChange = disabled.some((d) => d) ? false : order; - // ============================ Values ============================ - // Used for internal value management. - // It should always use `mergedValue` in render logic - const [internalCalendarValue, setCalendarValue] = React.useState>( - defaultValue || null, - ); - const calendarValue = internalCalendarValue || [null, null]; - - React.useEffect(() => { - if (value || value === null) { - setCalendarValue(value); - } - }, [value]); - - // Used for trigger `onChange` event. - // Record current value which is wait for submit. - const [submitValue, setSubmitValue] = useMergedState(defaultValue, { - value, - postState: (valList: RangeValueType): RangeValueType => - valList || [null, null], - }); - - const [submitted, setSubmitted] = React.useState(true); - - // ============================ Change ============================ + // ============================= Util ============================= const getDateTexts = ([start, end]: RangeValueType) => { return [start, end].map((date) => formatValue(date, { generateConfig, locale, format: formatList[0] }), @@ -117,11 +95,52 @@ export default function useRangeValue( return [isSameStart && isSameEnd, isSameStart, isSameEnd]; }; - const triggerCalendarChange: TriggerCalendarChange = ([start, end]) => { + // ============================ Values ============================ + // Used for internal value management. + // It should always use `mergedValue` in render logic + const [internalCalendarValue, setInternalCalendarValue] = React.useState< + RangeValueType + >(defaultValue || null); + const calendarValue = internalCalendarValue || [null, null]; + + // Add little trick here to ensure always use latest value + const calendarValueRef = React.useRef(calendarValue); + calendarValueRef.current = calendarValue; + const getCalendarValue = () => calendarValueRef.current; + + // Used for trigger `onChange` event. + // Record current value which is wait for submit. + const [internalSubmitValue, setSubmitValue] = React.useState(defaultValue); + const submitValue = internalSubmitValue || [null, null]; + + const [needSubmit, setNeedSubmit] = React.useState(false); + + // Update calendar value + const setCalendarValue = (val: RangeValueType) => { + calendarValueRef.current = val; + + setInternalCalendarValue(val); + }; + + const syncWithValue = useEvent(() => { + setCalendarValue(value); + setSubmitValue(value); + setNeedSubmit(false); + }); + + React.useEffect(() => { + if (value || value === null) { + syncWithValue(); + } + }, [value]); + + // ============================ Change ============================ + + const triggerCalendarChange: TriggerCalendarChange = useEvent(([start, end]) => { const clone: RangeValueType = [start, end]; // Update merged value - const [isSameMergedDates, isSameStart] = isSameDates(calendarValue, clone); + const [isSameMergedDates, isSameStart] = isSameDates(getCalendarValue(), clone); if (!isSameMergedDates) { setCalendarValue(clone); @@ -133,6 +152,15 @@ export default function useRangeValue( }); } } + }); + + // ========================= Flush Submit ========================= + const flushSubmit = (index: number, needTriggerChange: boolean) => { + setSubmitValue((ori) => fillIndex(ori, index, getCalendarValue()[index])); + + if (needTriggerChange) { + setNeedSubmit(true); + } }; // ============================ Submit ============================ @@ -141,7 +169,7 @@ export default function useRangeValue( const triggerSubmit = useEvent((nextValue?: RangeValueType) => { const isNullValue = nextValue === null; - const clone: RangeValueType = [...(nextValue || calendarValue)]; + const clone: RangeValueType = [...(nextValue || submitValue)]; // Fill null value if (isNullValue) { @@ -197,20 +225,14 @@ export default function useRangeValue( if (allPassed) { // Sync submit value to not to trigger `onChange` again - setSubmitValue(clone); + syncWithValue(); // Trigger `onChange` if needed - if (onChange) { - const [isSameSubmitDates] = isSameDates(submitValue, clone); - - if (!isSameSubmitDates) { - onChange( - // Return null directly if all date are empty - isNullValue && clone.every((val) => !val) ? null : clone, - getDateTexts(clone), - ); - } - } + onChange( + // Return null directly if all date are empty + isNullValue && clone.every((val) => !val) ? null : clone, + getDateTexts(clone), + ); } setLastSubmitResult([allPassed]); @@ -218,22 +240,25 @@ export default function useRangeValue( return allPassed; }); - // From the 2 active panel finished - const triggerSubmitChange = (nextValue: RangeValueType) => triggerSubmit(nextValue); - // ============================ Effect ============================ - useLockEffect(focused, () => { - if (!focused) { - // If panel no need panel confirm or last blur is not from panel - // Trigger submit - if (!needConfirm || lastOperation() !== 'panel') { - triggerSubmit(); - } else { - // Else should reset `calendarValue` to `submitValue` - setCalendarValue(submitValue); - } + React.useEffect(() => { + if (needSubmit) { + triggerSubmit(); } - }); + }, [needSubmit]); + + // useLockEffect(focused, () => { + // if (!focused) { + // // If panel no need panel confirm or last blur is not from panel + // // Trigger submit + // if (!needConfirm || lastOperation() !== 'panel') { + // triggerSubmit(); + // } else { + // // Else should reset `calendarValue` to `submitValue` + // setCalendarValue(submitValue); + // } + // } + // }); // TODO: ้žๅ—ๆŽงไธ‹ `value` ่ฟ™ไธชไธไผš้‡็ฝฎ๏ผŒ้€ป่พ‘ๅบ”่ฏฅไธๅฏน // When blur & invalid, restore to empty one @@ -248,7 +273,8 @@ export default function useRangeValue( return [ calendarValue, triggerCalendarChange, - triggerSubmitChange, + flushSubmit, + triggerSubmit, internalCalendarValue === null, ]; } From e5ca270506c84149b2236552e7c210984ca139da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 20 Nov 2023 22:50:55 +0800 Subject: [PATCH 146/380] chore: tmp of it --- .../PickerInput/hooks/useRangeValue.ts | 39 +++++++++---------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 012f37be1..b569a1e36 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -1,4 +1,4 @@ -import { useEvent } from 'rc-util'; +import { useEvent, useMergedState } from 'rc-util'; import * as React from 'react'; import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; import type { FormatType } from '../../interface'; @@ -6,6 +6,8 @@ import { fillIndex } from '../../util'; import type { RangePickerProps, RangeValueType } from '../RangePicker'; import type { OperationType } from './useRangeActive'; +const EMPTY_VALUE: [null, null] = [null, null]; + // Submit Logic: // * Calender Value: // * ๐Ÿ’ป When user typing is validate, change the calendar value @@ -96,12 +98,17 @@ export default function useRangeValue( }; // ============================ Values ============================ + // This is the root value which will sync with controlled or uncontrolled value + const [innerValue, setInnerValue] = useMergedState(defaultValue, { + value, + }); + const mergedValue = innerValue || EMPTY_VALUE; + + // ========================= Inner Values ========================= // Used for internal value management. // It should always use `mergedValue` in render logic - const [internalCalendarValue, setInternalCalendarValue] = React.useState< - RangeValueType - >(defaultValue || null); - const calendarValue = internalCalendarValue || [null, null]; + const [calendarValue, setInternalCalendarValue] = + React.useState>(mergedValue); // Add little trick here to ensure always use latest value const calendarValueRef = React.useRef(calendarValue); @@ -110,8 +117,7 @@ export default function useRangeValue( // Used for trigger `onChange` event. // Record current value which is wait for submit. - const [internalSubmitValue, setSubmitValue] = React.useState(defaultValue); - const submitValue = internalSubmitValue || [null, null]; + const [submitValue, setSubmitValue] = React.useState(mergedValue); const [needSubmit, setNeedSubmit] = React.useState(false); @@ -123,19 +129,16 @@ export default function useRangeValue( }; const syncWithValue = useEvent(() => { - setCalendarValue(value); - setSubmitValue(value); + setCalendarValue(mergedValue); + setSubmitValue(mergedValue); setNeedSubmit(false); }); React.useEffect(() => { - if (value || value === null) { - syncWithValue(); - } - }, [value]); + syncWithValue(); + }, [mergedValue]); // ============================ Change ============================ - const triggerCalendarChange: TriggerCalendarChange = useEvent(([start, end]) => { const clone: RangeValueType = [start, end]; @@ -270,11 +273,5 @@ export default function useRangeValue( // }, [lastSubmitResult]); // ============================ Return ============================ - return [ - calendarValue, - triggerCalendarChange, - flushSubmit, - triggerSubmit, - internalCalendarValue === null, - ]; + return [calendarValue, triggerCalendarChange, flushSubmit, triggerSubmit, innerValue === null]; } From e14d4765bb03402ebc4bccb97a6f4cad5397faca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 20 Nov 2023 22:55:24 +0800 Subject: [PATCH 147/380] chore: sync flush --- .../PickerInput/hooks/useRangeValue.ts | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index b569a1e36..7292b3515 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -9,7 +9,7 @@ import type { OperationType } from './useRangeActive'; const EMPTY_VALUE: [null, null] = [null, null]; // Submit Logic: -// * Calender Value: +// * โœ… Calender Value: // * ๐Ÿ’ป When user typing is validate, change the calendar value // * ๐ŸŒ… When user click on the panel, change the calendar value // * Submit Value: @@ -227,15 +227,19 @@ export default function useRangeValue( (validateEmptyDateRange && validateOrder && validateDates); if (allPassed) { - // Sync submit value to not to trigger `onChange` again - syncWithValue(); + // Sync value with submit value + setInnerValue(clone); + + const [isSameMergedDates] = isSameDates(clone, mergedValue); // Trigger `onChange` if needed - onChange( - // Return null directly if all date are empty - isNullValue && clone.every((val) => !val) ? null : clone, - getDateTexts(clone), - ); + if (onChange && !isSameMergedDates) { + onChange( + // Return null directly if all date are empty + isNullValue && clone.every((val) => !val) ? null : clone, + getDateTexts(clone), + ); + } } setLastSubmitResult([allPassed]); From 137d0eb91a690df02f278f614fcfb2fbeb0082ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 21 Nov 2023 14:53:50 +0800 Subject: [PATCH 148/380] chore: rm submit effect --- src/NewPicker/PickerInput/RangePicker.tsx | 1 + .../PickerInput/hooks/useLockState.ts | 8 +- .../PickerInput/hooks/useRangeValue.ts | 82 +++++++++++++------ 3 files changed, 63 insertions(+), 28 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 08e5d9507..766951775 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -290,6 +290,7 @@ function RangePicker(props: RangePickerProps, ref: Rea mergedDisabled, formatList, focused, + mergedOpen, lastOperation, isInvalidateDate, mergedNeedConfirm, diff --git a/src/NewPicker/PickerInput/hooks/useLockState.ts b/src/NewPicker/PickerInput/hooks/useLockState.ts index a43740aec..879f5199f 100644 --- a/src/NewPicker/PickerInput/hooks/useLockState.ts +++ b/src/NewPicker/PickerInput/hooks/useLockState.ts @@ -45,7 +45,11 @@ export default function useLockState( * Trigger `callback` immediately when `condition` is `true`. * But trigger `callback` in next frame when `condition` is `false`. */ -export function useLockEffect(condition: boolean, callback: (next: boolean) => void) { +export function useLockEffect( + condition: boolean, + callback: (next: boolean) => void, + delayFrames = 1, +) { const callbackRef = React.useRef(callback); callbackRef.current = callback; @@ -55,7 +59,7 @@ export function useLockEffect(condition: boolean, callback: (next: boolean) => v } else { const id = raf(() => { callbackRef.current(condition); - }); + }, delayFrames); return () => { raf.cancel(id); diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 7292b3515..086497e50 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -4,11 +4,15 @@ import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; import type { FormatType } from '../../interface'; import { fillIndex } from '../../util'; import type { RangePickerProps, RangeValueType } from '../RangePicker'; +import { useLockEffect } from './useLockState'; import type { OperationType } from './useRangeActive'; const EMPTY_VALUE: [null, null] = [null, null]; // Submit Logic: +// * โœ… Value: +// * merged value using controlled value, if not, use stateValue +// * When merged value change, [1] resync calendar value and submit value // * โœ… Calender Value: // * ๐Ÿ’ป When user typing is validate, change the calendar value // * ๐ŸŒ… When user click on the panel, change the calendar value @@ -16,16 +20,15 @@ const EMPTY_VALUE: [null, null] = [null, null]; // * ๐Ÿ’ป When user blur the input, flush calendar value to submit value // * ๐ŸŒ… When user click on the panel is no needConfirm, flush calendar value to submit value // * ๐ŸŒ… When user click on the panel is needConfirm and click OK, flush calendar value to submit value -// * All the flush will mark submitted as false -// * Blur logic: -// * If `needConfirm`, reset calendar value to value -// * If `!needConfirm`, and last operation is panel and has empty value, -// * active another input. -// * onChange: -// * If all the start & end field is used or all blur or panel closed -// * trigger onChange if submitted is false and reset it to true -// * onBlur: -// * Reset calendar value to submit value +// * Blur logic & close logic: +// * โœ… For value, always try flush submit +// * โœ… If `needConfirm`, reset as [1] +// * Else (`!needConfirm`) +// * If has another index field, active another index +// * โœ… Flush submit: +// * If all the start & end field is confirmed or all blur or panel closed +// * Update `needSubmit` mark to true +// * trigger onChange by `needSubmit` and update stateValue type TriggerCalendarChange = ([start, end]: RangeValueType) => void; @@ -46,6 +49,7 @@ export default function useRangeValue( disabled: [boolean, boolean], formatList: FormatType[], focused: boolean, + open: boolean, lastOperation: () => OperationType, isInvalidateDate: (date: DateType) => boolean, needConfirm: boolean, @@ -119,7 +123,7 @@ export default function useRangeValue( // Record current value which is wait for submit. const [submitValue, setSubmitValue] = React.useState(mergedValue); - const [needSubmit, setNeedSubmit] = React.useState(false); + // const [needSubmit, setNeedSubmit] = React.useState(false); // Update calendar value const setCalendarValue = (val: RangeValueType) => { @@ -128,10 +132,11 @@ export default function useRangeValue( setInternalCalendarValue(val); }; + /** Sync calendarValue & submitValue back with value */ const syncWithValue = useEvent(() => { setCalendarValue(mergedValue); setSubmitValue(mergedValue); - setNeedSubmit(false); + // setNeedSubmit(false); }); React.useEffect(() => { @@ -157,15 +162,6 @@ export default function useRangeValue( } }); - // ========================= Flush Submit ========================= - const flushSubmit = (index: number, needTriggerChange: boolean) => { - setSubmitValue((ori) => fillIndex(ori, index, getCalendarValue()[index])); - - if (needTriggerChange) { - setNeedSubmit(true); - } - }; - // ============================ Submit ============================ const [lastSubmitResult, setLastSubmitResult] = React.useState<[passed: boolean]>([true]); @@ -247,12 +243,46 @@ export default function useRangeValue( return allPassed; }); - // ============================ Effect ============================ - React.useEffect(() => { - if (needSubmit) { - triggerSubmit(); + // ========================= Flush Submit ========================= + const flushSubmit = useEvent((index: number, needTriggerChange: boolean) => { + const nextSubmitValue = fillIndex(submitValue, index, getCalendarValue()[index]); + setSubmitValue(nextSubmitValue); + + if (needTriggerChange) { + triggerSubmit(nextSubmitValue); } - }, [needSubmit]); + }); + + // ============================ Effect ============================ + // // Submit with `needSubmit` mark + // React.useEffect(() => { + // if (needSubmit) { + // triggerSubmit(); + // } + // }, [needSubmit]); + + // All finished action trigger after 2 frames + const interactiveFinished = !focused && !open; + + // console.log('???', needSubmit); + + useLockEffect( + interactiveFinished, + () => { + if (interactiveFinished) { + console.log('finished!!!'); + + // Always try to trigger submit first + triggerSubmit(); + + // Sync with value + if (needConfirm) { + syncWithValue(); + } + } + }, + 2, + ); // useLockEffect(focused, () => { // if (!focused) { From 854650c9c29300b713fc872e9ae95bb05e1864a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 21 Nov 2023 15:02:43 +0800 Subject: [PATCH 149/380] chore: off it --- .../PickerInput/hooks/useRangeValue.ts | 42 ++++--------------- src/NewPicker/hooks/useSyncState.ts | 22 ++++++++++ 2 files changed, 30 insertions(+), 34 deletions(-) create mode 100644 src/NewPicker/hooks/useSyncState.ts diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 086497e50..f61982971 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -1,6 +1,7 @@ import { useEvent, useMergedState } from 'rc-util'; import * as React from 'react'; import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; +import useSyncState from '../../hooks/useSyncState'; import type { FormatType } from '../../interface'; import { fillIndex } from '../../util'; import type { RangePickerProps, RangeValueType } from '../RangePicker'; @@ -111,32 +112,16 @@ export default function useRangeValue( // ========================= Inner Values ========================= // Used for internal value management. // It should always use `mergedValue` in render logic - const [calendarValue, setInternalCalendarValue] = - React.useState>(mergedValue); - - // Add little trick here to ensure always use latest value - const calendarValueRef = React.useRef(calendarValue); - calendarValueRef.current = calendarValue; - const getCalendarValue = () => calendarValueRef.current; + const [calendarValue, setCalendarValue] = useSyncState(mergedValue); // Used for trigger `onChange` event. // Record current value which is wait for submit. - const [submitValue, setSubmitValue] = React.useState(mergedValue); - - // const [needSubmit, setNeedSubmit] = React.useState(false); - - // Update calendar value - const setCalendarValue = (val: RangeValueType) => { - calendarValueRef.current = val; - - setInternalCalendarValue(val); - }; + const [submitValue, setSubmitValue] = useSyncState(mergedValue); /** Sync calendarValue & submitValue back with value */ const syncWithValue = useEvent(() => { setCalendarValue(mergedValue); setSubmitValue(mergedValue); - // setNeedSubmit(false); }); React.useEffect(() => { @@ -148,7 +133,7 @@ export default function useRangeValue( const clone: RangeValueType = [start, end]; // Update merged value - const [isSameMergedDates, isSameStart] = isSameDates(getCalendarValue(), clone); + const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone); if (!isSameMergedDates) { setCalendarValue(clone); @@ -168,7 +153,7 @@ export default function useRangeValue( const triggerSubmit = useEvent((nextValue?: RangeValueType) => { const isNullValue = nextValue === null; - const clone: RangeValueType = [...(nextValue || submitValue)]; + const clone: RangeValueType = [...(nextValue || submitValue())]; // Fill null value if (isNullValue) { @@ -245,33 +230,22 @@ export default function useRangeValue( // ========================= Flush Submit ========================= const flushSubmit = useEvent((index: number, needTriggerChange: boolean) => { - const nextSubmitValue = fillIndex(submitValue, index, getCalendarValue()[index]); + const nextSubmitValue = fillIndex(submitValue(), index, calendarValue()[index]); setSubmitValue(nextSubmitValue); if (needTriggerChange) { - triggerSubmit(nextSubmitValue); + triggerSubmit(); } }); // ============================ Effect ============================ - // // Submit with `needSubmit` mark - // React.useEffect(() => { - // if (needSubmit) { - // triggerSubmit(); - // } - // }, [needSubmit]); - // All finished action trigger after 2 frames const interactiveFinished = !focused && !open; - // console.log('???', needSubmit); - useLockEffect( interactiveFinished, () => { if (interactiveFinished) { - console.log('finished!!!'); - // Always try to trigger submit first triggerSubmit(); @@ -307,5 +281,5 @@ export default function useRangeValue( // }, [lastSubmitResult]); // ============================ Return ============================ - return [calendarValue, triggerCalendarChange, flushSubmit, triggerSubmit, innerValue === null]; + return [calendarValue(), triggerCalendarChange, flushSubmit, triggerSubmit, innerValue === null]; } diff --git a/src/NewPicker/hooks/useSyncState.ts b/src/NewPicker/hooks/useSyncState.ts new file mode 100644 index 000000000..1f505a555 --- /dev/null +++ b/src/NewPicker/hooks/useSyncState.ts @@ -0,0 +1,22 @@ +import * as React from 'react'; + +/** + * Sync value with state. + * This should only used for internal which not affect outside calculation. + * Since it's not safe for suspense. + */ +export default function useSyncState( + defaultValue: T, +): [getter: () => T, setter: (nextValue: T) => void] { + const valueRef = React.useRef(defaultValue); + const [, forceUpdate] = React.useState({}); + + const getter = () => valueRef.current; + + const setter = (nextValue: T) => { + valueRef.current = nextValue; + forceUpdate({}); + }; + + return [getter, setter]; +} From 4e693a87ceaabf1508160fa8662551ee3e829e73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 21 Nov 2023 16:45:15 +0800 Subject: [PATCH 150/380] chore: support switch on !needConfirm --- docs/examples/debug.tsx | 8 ++++---- src/NewPicker/PickerInput/RangePicker.tsx | 19 +++++++++++++------ .../PickerInput/hooks/useRangeActive.ts | 13 ++++++++++--- .../PickerInput/hooks/useRangeValue.ts | 8 +++----- 4 files changed, 30 insertions(+), 18 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 6902ff91c..df98f8cfe 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -76,11 +76,11 @@ export default () => {
            (props: RangePickerProps, ref: Rea /** Almost same as `picker`, but add `datetime` for `date` with `showTime` */ const internalPicker: InternalMode = picker === 'date' && mergedShowTime ? 'datetime' : picker; + /** The picker is `datetime` or `time` */ const complexPicker = internalPicker === 'time' || internalPicker === 'datetime'; const mergedNeedConfirm = needConfirm ?? complexPicker; @@ -404,6 +405,8 @@ function RangePicker(props: RangePickerProps, ref: Rea triggerFocus(true); onFocus?.(event); + + lastOperation('input'); }; const onSelectorBlur: SelectorProps['onBlur'] = (event) => { @@ -535,12 +538,7 @@ function RangePicker(props: RangePickerProps, ref: Rea // >>> Trigger next active if !needConfirm // Fully logic check `useRangeValue` hook - if ( - !needConfirm && - internalPicker === internalMode && - internalPicker !== 'datetime' && - internalPicker !== 'time' - ) { + if (!needConfirm && !complexPicker && internalPicker === internalMode) { triggerPartConfirm(date); } }; @@ -643,6 +641,15 @@ function RangePicker(props: RangePickerProps, ref: Rea } }, [mergedOpen, activeIndex, picker]); + // >>> For complex picker, we need check if need to focus next one + useLayoutEffect(() => { + if (!mergedOpen && complexPicker && !mergedNeedConfirm && lastOperation() === 'panel') { + console.log('next one!'); + triggerPartConfirm(); + triggerOpen(true); + } + }, [mergedOpen]); + // ====================== DevWarning ====================== if (process.env.NODE_ENV !== 'production') { const isIndexEmpty = (index: number) => { diff --git a/src/NewPicker/PickerInput/hooks/useRangeActive.ts b/src/NewPicker/PickerInput/hooks/useRangeActive.ts index ac3ba1f70..bba05b894 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeActive.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeActive.ts @@ -1,3 +1,4 @@ +import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import * as React from 'react'; import type { RangeValueType } from '../RangePicker'; @@ -47,6 +48,7 @@ export default function useRangeActive( const list = activeListRef.current; const filledActiveSet = new Set(list.filter((index) => nextValue[index] || empty[index])); const nextIndex = list[list.length - 1] === 0 ? 1 : 0; + console.log('>>>>>>', list); if (filledActiveSet.size >= 2 || disabled[nextIndex]) { return null; @@ -57,10 +59,15 @@ export default function useRangeActive( // ============================= Effect ============================= // Record for the open timing `activeIndex` - React.useEffect(() => { - if (!open) { + useLayoutEffect(() => { + if (open) { activeListRef.current = []; - } else { + } + }, [open]); + + // Record for the open timing `activeIndex` + React.useEffect(() => { + if (open) { activeListRef.current.push(activeIndex); } }, [open, activeIndex]); diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index f61982971..442734313 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -243,16 +243,14 @@ export default function useRangeValue( const interactiveFinished = !focused && !open; useLockEffect( - interactiveFinished, + !interactiveFinished, () => { if (interactiveFinished) { // Always try to trigger submit first triggerSubmit(); - // Sync with value - if (needConfirm) { - syncWithValue(); - } + // Sync with value anyway + syncWithValue(); } }, 2, From 81024451e3921d346527c6dc77f6f14c82694a90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 21 Nov 2023 17:47:45 +0800 Subject: [PATCH 151/380] chore: open logic --- src/NewPicker/PickerInput/RangePicker.tsx | 3 +- src/NewPicker/PickerInput/Selector/Input.tsx | 2 +- .../PickerInput/hooks/useDelayState.ts | 88 +++++++++++++++++++ .../PickerInput/hooks/useLockEffect.ts | 30 +++++++ .../PickerInput/hooks/useLockState.ts | 69 --------------- src/NewPicker/PickerInput/hooks/useOpen.ts | 5 +- .../PickerInput/hooks/useRangeActive.ts | 8 +- .../PickerInput/hooks/useRangeValue.ts | 2 +- 8 files changed, 127 insertions(+), 80 deletions(-) create mode 100644 src/NewPicker/PickerInput/hooks/useDelayState.ts create mode 100644 src/NewPicker/PickerInput/hooks/useLockEffect.ts delete mode 100644 src/NewPicker/PickerInput/hooks/useLockState.ts diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index fec55dc93..b22d01357 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -644,9 +644,8 @@ function RangePicker(props: RangePickerProps, ref: Rea // >>> For complex picker, we need check if need to focus next one useLayoutEffect(() => { if (!mergedOpen && complexPicker && !mergedNeedConfirm && lastOperation() === 'panel') { - console.log('next one!'); - triggerPartConfirm(); triggerOpen(true); + triggerPartConfirm(); } }, [mergedOpen]); diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 27e1a9f48..fc32ef58e 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -5,7 +5,7 @@ import raf from 'rc-util/lib/raf'; import * as React from 'react'; import { leftPad } from '../../../utils/miscUtil'; import PickerContext from '../context'; -import { useLockEffect } from '../hooks/useLockState'; +import useLockEffect from '../hooks/useLockEffect'; import Icon from './Icon'; import MaskFormat from './MaskFormat'; import { getMaskRange } from './util'; diff --git a/src/NewPicker/PickerInput/hooks/useDelayState.ts b/src/NewPicker/PickerInput/hooks/useDelayState.ts new file mode 100644 index 000000000..fd324bc10 --- /dev/null +++ b/src/NewPicker/PickerInput/hooks/useDelayState.ts @@ -0,0 +1,88 @@ +import { useEvent, useMergedState } from 'rc-util'; +import React from 'react'; + +// We need wait for outside state updated. +// Which means need 2 effect: +// 1. Outside sync state +// 2. Still may be old state +// 3. Safe to sync state +const DELAY_TIMES = 2; + +/** + * Will be `true` immediately for next effect. + * But will be `false` for a delay of effect. + */ +export default function useDelayState( + value: T, + defaultValue?: T, + onChange?: (next: T) => void, +): [state: T, setState: (nextState: T, immediately?: boolean) => void] { + const [state, setState] = useMergedState(defaultValue, { + value, + }); + + const [times, setTimes] = React.useState(false); + const nextValueRef = React.useRef(value); + + // ============================= Update ============================= + const doUpdate = useEvent(() => { + setState(nextValueRef.current); + + if (onChange && state !== nextValueRef.current) { + onChange(nextValueRef.current); + } + }); + + const updateValue = useEvent((next: T, immediately?: boolean) => { + nextValueRef.current = next; + + if (next || immediately) { + doUpdate(); + setTimes(false); + } else { + setTimes(0); + } + }); + + // ============================= Effect ============================= + React.useEffect(() => { + if (times === DELAY_TIMES) { + doUpdate(); + } else if (times !== false && times < DELAY_TIMES) { + setTimes(times + 1); + } + }, [times, doUpdate]); + + return [state, updateValue]; +} + +const EFFECT_DELAY_TIMES = 1; + +export function useDelayEffect(condition: boolean, callback: VoidFunction) { + const [times, setTimes] = React.useState(false); + const prevConditionRef = React.useRef(condition); + + const triggerCallback = useEvent(() => { + if (prevConditionRef.current !== condition) { + prevConditionRef.current = condition; + callback(); + } + }); + + React.useEffect(() => { + if (condition) { + triggerCallback(); + setTimes(false); + } else { + setTimes(0); + } + }, [condition]); + + React.useEffect(() => { + if (times === EFFECT_DELAY_TIMES) { + triggerCallback(); + } else if (times !== false && times < EFFECT_DELAY_TIMES) { + setTimes(times + 1); + } + }, [times]); +} diff --git a/src/NewPicker/PickerInput/hooks/useLockEffect.ts b/src/NewPicker/PickerInput/hooks/useLockEffect.ts new file mode 100644 index 000000000..62b487ae2 --- /dev/null +++ b/src/NewPicker/PickerInput/hooks/useLockEffect.ts @@ -0,0 +1,30 @@ +import { useLayoutUpdateEffect } from 'rc-util/lib/hooks/useLayoutEffect'; +import raf from 'rc-util/lib/raf'; +import * as React from 'react'; + +/** + * Trigger `callback` immediately when `condition` is `true`. + * But trigger `callback` in next frame when `condition` is `false`. + */ +export default function useLockEffect( + condition: boolean, + callback: (next: boolean) => void, + delayFrames = 1, +) { + const callbackRef = React.useRef(callback); + callbackRef.current = callback; + + useLayoutUpdateEffect(() => { + if (condition) { + callbackRef.current(condition); + } else { + const id = raf(() => { + callbackRef.current(condition); + }, delayFrames); + + return () => { + raf.cancel(id); + }; + } + }, [condition]); +} diff --git a/src/NewPicker/PickerInput/hooks/useLockState.ts b/src/NewPicker/PickerInput/hooks/useLockState.ts deleted file mode 100644 index 879f5199f..000000000 --- a/src/NewPicker/PickerInput/hooks/useLockState.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { useEvent, useMergedState } from 'rc-util'; -import { useLayoutUpdateEffect } from 'rc-util/lib/hooks/useLayoutEffect'; -import raf from 'rc-util/lib/raf'; -import * as React from 'react'; - -/** - * Will be `true` immediately for setState. - * But will be `false` for a requestAnimationFrame. - */ -export default function useLockState( - value: T, - defaultValue?: T, - onChange?: (next: T) => void, -): [state: T, setState: (nextState: T, immediately?: boolean) => void] { - const [state, setState] = useMergedState(defaultValue, { - value, - }); - const rafRef = React.useRef(null); - const stateRef = React.useRef(state); - stateRef.current = state; - - const updateValue = useEvent((next: T, immediately?: boolean) => { - raf.cancel(rafRef.current); - - const doUpdate = () => { - const prev = stateRef.current; - setState(next); - - if (onChange && prev !== next) { - onChange(next); - } - }; - - if (next || immediately) { - doUpdate(); - } else { - rafRef.current = raf(doUpdate); - } - }); - - return [state, updateValue]; -} - -/** - * Trigger `callback` immediately when `condition` is `true`. - * But trigger `callback` in next frame when `condition` is `false`. - */ -export function useLockEffect( - condition: boolean, - callback: (next: boolean) => void, - delayFrames = 1, -) { - const callbackRef = React.useRef(callback); - callbackRef.current = callback; - - useLayoutUpdateEffect(() => { - if (condition) { - callbackRef.current(condition); - } else { - const id = raf(() => { - callbackRef.current(condition); - }, delayFrames); - - return () => { - raf.cancel(id); - }; - } - }, [condition]); -} diff --git a/src/NewPicker/PickerInput/hooks/useOpen.ts b/src/NewPicker/PickerInput/hooks/useOpen.ts index 5e09fc0b3..74917bd04 100644 --- a/src/NewPicker/PickerInput/hooks/useOpen.ts +++ b/src/NewPicker/PickerInput/hooks/useOpen.ts @@ -1,5 +1,5 @@ import type { OpenConfig } from '../../interface'; -import useLockState from './useLockState'; +import useDelayState from './useDelayState'; /** * Control the open state. @@ -11,7 +11,8 @@ export default function useOpen( onOpenChange?: (open: boolean) => void, ): [open: boolean, setOpen: (open: boolean, config?: OpenConfig) => void] { // Delay for handle the open state, in case fast shift from `open` -> `close` -> `open` - const [rafOpen, setRafOpen] = useLockState(open, defaultOpen || false, onOpenChange); + // const [rafOpen, setRafOpen] = useLockState(open, defaultOpen || false, onOpenChange); + const [rafOpen, setRafOpen] = useDelayState(open, defaultOpen || false, onOpenChange); function setOpen(next: boolean, config: OpenConfig = {}) { if (!config.inherit || rafOpen) { diff --git a/src/NewPicker/PickerInput/hooks/useRangeActive.ts b/src/NewPicker/PickerInput/hooks/useRangeActive.ts index bba05b894..ed72b5d04 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeActive.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeActive.ts @@ -1,6 +1,6 @@ -import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import * as React from 'react'; import type { RangeValueType } from '../RangePicker'; +import { useDelayEffect } from './useDelayState'; export type OperationType = 'input' | 'panel'; @@ -48,7 +48,6 @@ export default function useRangeActive( const list = activeListRef.current; const filledActiveSet = new Set(list.filter((index) => nextValue[index] || empty[index])); const nextIndex = list[list.length - 1] === 0 ? 1 : 0; - console.log('>>>>>>', list); if (filledActiveSet.size >= 2 || disabled[nextIndex]) { return null; @@ -58,12 +57,11 @@ export default function useRangeActive( }; // ============================= Effect ============================= - // Record for the open timing `activeIndex` - useLayoutEffect(() => { + useDelayEffect(open, () => { if (open) { activeListRef.current = []; } - }, [open]); + }); // Record for the open timing `activeIndex` React.useEffect(() => { diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 442734313..8201ed58e 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -5,7 +5,7 @@ import useSyncState from '../../hooks/useSyncState'; import type { FormatType } from '../../interface'; import { fillIndex } from '../../util'; import type { RangePickerProps, RangeValueType } from '../RangePicker'; -import { useLockEffect } from './useLockState'; +import useLockEffect from './useLockEffect'; import type { OperationType } from './useRangeActive'; const EMPTY_VALUE: [null, null] = [null, null]; From 559e92b9e265f46813ea4059d7e000c66ddac329 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 21 Nov 2023 17:57:17 +0800 Subject: [PATCH 152/380] fix: part logic --- docs/examples/debug.tsx | 4 ++-- src/NewPicker/PickerInput/hooks/useRangeValue.ts | 8 +++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index df98f8cfe..0fa9d470f 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -63,11 +63,11 @@ export default () => { // [dayjs('2023-11-15'), null], // has end // [null, dayjs('2023-11-15')], - [dayjs('2020-03-30'), dayjs('2020-05-20')], + // [dayjs('2020-03-30'), dayjs('2020-05-20')], // [dayjs('2000-09-03'), dayjs('1990-09-03')], // [dayjs('1990-09-03'), null], // null, - // undefined, + undefined, ); return ( diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 8201ed58e..c5f4b579e 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -279,5 +279,11 @@ export default function useRangeValue( // }, [lastSubmitResult]); // ============================ Return ============================ - return [calendarValue(), triggerCalendarChange, flushSubmit, triggerSubmit, innerValue === null]; + return [ + calendarValue(), + triggerCalendarChange, + flushSubmit, + triggerSubmit, + innerValue === null || innerValue === undefined, + ]; } From ebf50cfbcac77cd4580dbc8d5ae56afaec06b5ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 21 Nov 2023 19:43:20 +0800 Subject: [PATCH 153/380] chore: fix validate logic --- docs/examples/debug.tsx | 8 +++++--- src/NewPicker/PickerInput/RangePicker.tsx | 16 ++++++++++++---- src/NewPicker/PickerInput/hooks/useInvalidate.ts | 16 +++++++++++++--- 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 0fa9d470f..8d85c8d3a 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -76,11 +76,13 @@ export default () => {
            [0], + }} value={rangeValue} placeholder={['Start', 'End']} suffixIcon="๐Ÿงถ" diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index b22d01357..eb7e47f6b 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -324,13 +324,13 @@ function RangePicker(props: RangePickerProps, ref: Rea return true; } + const current = calendarValue[index]; + // Not check if all empty - if (emptyValue) { + if (!current) { return false; } - const current = calendarValue[index]; - // Not allow empty if (!mergedAllowEmpty[index] && !current) { return true; @@ -643,7 +643,15 @@ function RangePicker(props: RangePickerProps, ref: Rea // >>> For complex picker, we need check if need to focus next one useLayoutEffect(() => { - if (!mergedOpen && complexPicker && !mergedNeedConfirm && lastOperation() === 'panel') { + const lastOp = lastOperation(); + + // Trade as confirm on field leave + if (!mergedOpen && lastOp === 'input') { + triggerPartConfirm(); + } + + // Submit with complex picker + if (!mergedOpen && complexPicker && !mergedNeedConfirm && lastOp === 'panel') { triggerOpen(true); triggerPartConfirm(); } diff --git a/src/NewPicker/PickerInput/hooks/useInvalidate.ts b/src/NewPicker/PickerInput/hooks/useInvalidate.ts index a0257d983..72e36e19d 100644 --- a/src/NewPicker/PickerInput/hooks/useInvalidate.ts +++ b/src/NewPicker/PickerInput/hooks/useInvalidate.ts @@ -31,20 +31,30 @@ export default function useInvalidate( const { disabledHours, disabledMinutes, disabledSeconds, disabledMilliSeconds } = showTime.disabledTime?.(date) || {}; + const { + disabledHours: legacyDisabledHours, + disabledMinutes: legacyDisabledMinutes, + disabledSeconds: legacyDisabledSeconds, + } = showTime; + + const mergedDisabledHours = disabledHours || legacyDisabledHours; + const mergedDisabledMinutes = disabledMinutes || legacyDisabledMinutes; + const mergedDisabledSeconds = disabledSeconds || legacyDisabledSeconds; + const hour = generateConfig.getHour(date); const minute = generateConfig.getMinute(date); const second = generateConfig.getSecond(date); const millisecond = generateConfig.getMillisecond(date); - if (disabledHours && disabledHours().includes(hour)) { + if (mergedDisabledHours && mergedDisabledHours().includes(hour)) { return true; } - if (disabledMinutes && disabledMinutes(hour).includes(minute)) { + if (mergedDisabledMinutes && mergedDisabledMinutes(hour).includes(minute)) { return true; } - if (disabledSeconds && disabledSeconds(hour, minute).includes(second)) { + if (mergedDisabledSeconds && mergedDisabledSeconds(hour, minute).includes(second)) { return true; } From 2ad4a8298d6af011925be4108b9c0cc0a0298b92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 21 Nov 2023 19:53:27 +0800 Subject: [PATCH 154/380] chore: clean up --- src/NewPicker/PickerInput/RangePicker.tsx | 21 +++++----- .../PickerInput/hooks/useRangeValue.ts | 38 +------------------ 2 files changed, 10 insertions(+), 49 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index eb7e47f6b..fc2e6cd99 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -285,17 +285,14 @@ function RangePicker(props: RangePickerProps, ref: Rea const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, mergedShowTime); // ======================== Value ========================= - const [calendarValue, triggerCalendarChange, flushSubmit, triggerSubmitChange, emptyValue] = - useRangeValue( - filledProps, - mergedDisabled, - formatList, - focused, - mergedOpen, - lastOperation, - isInvalidateDate, - mergedNeedConfirm, - ); + const [calendarValue, triggerCalendarChange, flushSubmit, triggerSubmitChange] = useRangeValue( + filledProps, + mergedDisabled, + formatList, + focused, + mergedOpen, + isInvalidateDate, + ); // ===================== DisabledDate ===================== const mergedDisabledDate = useRangeDisabledDate( @@ -343,7 +340,7 @@ function RangePicker(props: RangePickerProps, ref: Rea return false; }) as [boolean, boolean]; - }, [calendarValue, emptyValue, fieldsInvalidates, isInvalidateDate, mergedAllowEmpty]); + }, [calendarValue, fieldsInvalidates, isInvalidateDate, mergedAllowEmpty]); // ===================== Picker Value ===================== const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue( diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index c5f4b579e..413372baa 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -6,7 +6,6 @@ import type { FormatType } from '../../interface'; import { fillIndex } from '../../util'; import type { RangePickerProps, RangeValueType } from '../RangePicker'; import useLockEffect from './useLockEffect'; -import type { OperationType } from './useRangeActive'; const EMPTY_VALUE: [null, null] = [null, null]; @@ -51,15 +50,12 @@ export default function useRangeValue( formatList: FormatType[], focused: boolean, open: boolean, - lastOperation: () => OperationType, isInvalidateDate: (date: DateType) => boolean, - needConfirm: boolean, ): [ calendarValue: RangeValueType, triggerCalendarChange: TriggerCalendarChange, flushSubmit: (index: number, needTriggerChange: boolean) => void, triggerSubmitChange: (value: RangeValueType) => boolean, - emptyValue: boolean, ] { const { // MISC @@ -148,8 +144,6 @@ export default function useRangeValue( }); // ============================ Submit ============================ - const [lastSubmitResult, setLastSubmitResult] = React.useState<[passed: boolean]>([true]); - const triggerSubmit = useEvent((nextValue?: RangeValueType) => { const isNullValue = nextValue === null; @@ -223,8 +217,6 @@ export default function useRangeValue( } } - setLastSubmitResult([allPassed]); - return allPassed; }); @@ -256,34 +248,6 @@ export default function useRangeValue( 2, ); - // useLockEffect(focused, () => { - // if (!focused) { - // // If panel no need panel confirm or last blur is not from panel - // // Trigger submit - // if (!needConfirm || lastOperation() !== 'panel') { - // triggerSubmit(); - // } else { - // // Else should reset `calendarValue` to `submitValue` - // setCalendarValue(submitValue); - // } - // } - // }); - - // TODO: ้žๅ—ๆŽงไธ‹ `value` ่ฟ™ไธชไธไผš้‡็ฝฎ๏ผŒ้€ป่พ‘ๅบ”่ฏฅไธๅฏน - // When blur & invalid, restore to empty one - // This is used for typed only one input - // React.useEffect(() => { - // if (!lastSubmitResult[0] && !preserveInvalidOnBlur && value) { - // triggerCalendarChange(value); - // } - // }, [lastSubmitResult]); - // ============================ Return ============================ - return [ - calendarValue(), - triggerCalendarChange, - flushSubmit, - triggerSubmit, - innerValue === null || innerValue === undefined, - ]; + return [calendarValue(), triggerCalendarChange, flushSubmit, triggerSubmit]; } From 427f3b5aff7f79a6314d1f5f6f969042555849b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 22 Nov 2023 15:17:19 +0800 Subject: [PATCH 155/380] test: more test case --- assets/index.less | 2 + docs/examples/debug.tsx | 8 +- src/NewPicker/PickerInput/RangePicker.tsx | 16 +--- tests/new-range.spec.tsx | 90 +++++++++++++++++++++++ 4 files changed, 100 insertions(+), 16 deletions(-) diff --git a/assets/index.less b/assets/index.less index 7ae26d12c..9258b4755 100644 --- a/assets/index.less +++ b/assets/index.less @@ -414,6 +414,7 @@ &-dropdown { position: absolute; box-shadow: 0 0 1px red; + pointer-events: none; &-range { padding: 10px 0; @@ -519,6 +520,7 @@ display: inline-block; vertical-align: top; transition: margin 0.3s; + pointer-events: all; } &-panel-layout { diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 8d85c8d3a..f0c7ec0ab 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -78,11 +78,11 @@ export default () => { {...sharedLocale} picker="time" // needConfirm - // needConfirm={false} + needConfirm={false} // open - showTime={{ - disabledHours: () => [0], - }} + // showTime={{ + // disabledHours: () => [0], + // }} value={rangeValue} placeholder={['Start', 'End']} suffixIcon="๐Ÿงถ" diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index fc2e6cd99..b28edaecb 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -421,7 +421,7 @@ function RangePicker(props: RangePickerProps, ref: Rea * - Selector: enter key * - Panel: OK button */ - const triggerPartConfirm = (date?: DateType) => { + const triggerPartConfirm = (date?: DateType, skipFocus?: boolean) => { let nextValue = calendarValue; if (date) { @@ -437,18 +437,9 @@ function RangePicker(props: RangePickerProps, ref: Rea if (nextIndex === null) { triggerOpen(false, { force: true }); - } else { + } else if (!skipFocus) { selectorRef.current.focus(nextIndex); } - - // if (nextIndex === null) { - // triggerCalendarChange(nextValue); - // // triggerSubmitChange(nextValue); - // triggerOpen(false, { force: true }); - // } else { - // triggerCalendarChange(nextValue); - // selectorRef.current.focus(nextIndex); - // } }; // ======================== Click ========================= @@ -644,7 +635,8 @@ function RangePicker(props: RangePickerProps, ref: Rea // Trade as confirm on field leave if (!mergedOpen && lastOp === 'input') { - triggerPartConfirm(); + triggerOpen(false); + triggerPartConfirm(null, true); } // Submit with complex picker diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index aad722a04..c159b92e2 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -15,6 +15,17 @@ import { selectCell, } from './util/commonUtil'; +// jest.mock('rc-util/lib/hooks/useLayoutEffect', () => { +// const react = jest.requireActual('react'); +// const { useLayoutUpdateEffect } = jest.requireActual('rc-util/lib/hooks/useLayoutEffect'); + +// return { +// __esModule: true, +// default: react.useLayoutEffect, +// useLayoutUpdateEffect, +// }; +// }); + describe('NewPicker.Range', () => { beforeEach(() => { resetWarned(); @@ -570,4 +581,83 @@ describe('NewPicker.Range', () => { selectCell(22); expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-05', '1990-09-22']); }); + + describe('needConfirm', () => { + it('normal picker need confirm', () => { + const onChange = jest.fn(); + const { container } = render(); + + // Nothing happen if not confirmed + openPicker(container); + selectCell(5); + closePicker(container); + + expect(container.querySelectorAll('input')[0]).toHaveValue(''); + + act(() => { + jest.runAllTimers(); + }); + + // Changed by click OK + openPicker(container); + selectCell(10); + fireEvent.click(document.querySelector('.rc-picker-ok button')); + + expect(container.querySelectorAll('input')[0]).toHaveValue('1990-09-10'); + + // End time + selectCell(15, 1); + expect(onChange).not.toHaveBeenCalled(); + fireEvent.click(document.querySelector('.rc-picker-ok button')); + + expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-10', '1990-10-15']); + }); + + it('no need confirm is blur to submit', () => { + const onChange = jest.fn(); + const { container } = render( + console.log(123)} + />, + ); + + // Change start time (manually focus since fireEvent.focus not change activeElement) + openPicker(container); + fireEvent.click( + document.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[6], + ); + document.querySelector('.rc-picker-panel-container').focus(); + + act(() => { + jest.runAllTimers(); + }); + + // Close panel to auto focus next end field + fireEvent.click(document.body); + expect(container.querySelectorAll('input')[1]).toHaveFocus(); + + expect(isOpen()).toBeTruthy(); + + // Select end time + fireEvent.click( + document.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[11], + ); + + act(() => { + jest.runAllTimers(); + }); + + // Close panel to auto focus next end field + fireEvent.click(document.body); + + act(() => { + jest.runAllTimers(); + }); + + expect(onChange).toHaveBeenCalledWith(expect.anything(), ['06:00:00', '11:00:00']); + }); + }); }); From dd12fad297b1f4dfe86e9e81c632e25fbe28a8b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 23 Nov 2023 10:15:35 +0800 Subject: [PATCH 156/380] chore: dbl click --- docs/examples/debug.tsx | 3 ++- .../PickerInput/Popup/PopupPanel.tsx | 21 ++++++++++++++----- src/NewPicker/PickerPanel/PanelBody.tsx | 10 ++++++++- .../TimePanel/TimePanelBody/TimeColumn.tsx | 8 ++++++- .../TimePanel/TimePanelBody/index.tsx | 19 +++++++++++------ src/NewPicker/PickerPanel/context.ts | 1 + 6 files changed, 48 insertions(+), 14 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index f0c7ec0ab..67c71a9f4 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -76,10 +76,11 @@ export default () => {
            [0], // }} diff --git a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx index 6bda67b90..027839073 100644 --- a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx +++ b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PickerPanel, { type PickerPanelProps } from '../../PickerPanel'; -import { PickerHackContext } from '../../PickerPanel/context'; +import { PickerHackContext, type PickerHackContextProps } from '../../PickerPanel/context'; import PickerContext from '../context'; import { offsetPanelDate } from '../hooks/useRangePickerValue'; import { type FooterProps } from './Footer'; @@ -15,7 +15,7 @@ export type PopupPanelProps = MustProp & // TODO: `needConfirm` ไธ‹๏ผŒ่ฟž็ปญ็‚นๅ‡ปๅณ่พน็š„้ขๆฟไผšๆŒ็ปญไฝ็งป๏ผŒๅบ”่ฏฅๅช้œ€่ฆๅœจๅˆ‡ๆข field ๆ—ถๆ‰ๅšไฝ็งป export default function PopupPanel(props: PopupPanelProps) { - const { picker, multiple, pickerValue, onPickerValueChange } = props; + const { picker, multiple, pickerValue, onPickerValueChange, onSubmit } = props; const { prefixCls, generateConfig } = React.useContext(PickerContext); // ======================== Offset ======================== @@ -35,15 +35,22 @@ export default function PopupPanel(props: PopupPanelProps { + onSubmit(); + }, + }; + // ======================== Render ======================== // Multiple if (multiple) { return (
            - + - + (props: PopupPanelProps; + return ( + + + + ); } diff --git a/src/NewPicker/PickerPanel/PanelBody.tsx b/src/NewPicker/PickerPanel/PanelBody.tsx index 0734db463..de9935fca 100644 --- a/src/NewPicker/PickerPanel/PanelBody.tsx +++ b/src/NewPicker/PickerPanel/PanelBody.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import * as React from 'react'; import { formatValue, isInRange, isSame } from '../../utils/dateUtil'; import type { PanelMode } from '../interface'; -import { PanelContext } from './context'; +import { PanelContext, PickerHackContext } from './context'; export interface PanelBodyProps { rowNum: number; @@ -57,6 +57,9 @@ export default function PanelBody(props: PanelBodyProps(props: PanelBodyProps { + if (!disabled && onCellDblClick) { + onCellDblClick(); + } + }} onMouseEnter={() => { if (!disabled) { onHover?.(currentDate); diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx index 9fe2253a0..1aeba0b4d 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -19,11 +19,12 @@ export interface TimeUnitColumnProps { optionalValue?: number | string; type: 'hour' | 'minute' | 'second' | 'millisecond' | 'meridiem'; onChange: (value: number | string) => void; + onDblClick?: VoidFunction; changeOnScroll?: boolean; } export default function TimeColumn(props: TimeUnitColumnProps) { - const { units, value, optionalValue, type, onChange, changeOnScroll } = props; + const { units, value, optionalValue, type, onChange, onDblClick, changeOnScroll } = props; const { prefixCls, cellRender, now, locale } = React.useContext(PanelContext); @@ -125,6 +126,11 @@ export default function TimeColumn(props: TimeUnitColumnProps) { onChange(unitValue); } }} + onDoubleClick={() => { + if (!disabled && onDblClick) { + onDblClick(); + } + }} data-value={unitValue} > {cellRender diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index abc0bf4fe..c7b5a43bf 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { formatValue } from '../../../../utils/dateUtil'; import { leftPad } from '../../../../utils/miscUtil'; import type { SharedPanelProps, SharedTimeProps } from '../../../interface'; -import { PanelContext, type PanelContextProps } from '../../context'; +import { PanelContext, PickerHackContext, type PanelContextProps } from '../../context'; import TimeColumn, { type Unit } from './TimeColumn'; import { findValidateTime } from './util'; @@ -81,6 +81,8 @@ export default function TimePanelBody(props: SharedTimeProps>(PanelContext); + const { onCellDblClick } = React.useContext(PickerHackContext); + // ========================= Value ========================== // PickerValue will tell which one to align on the top const getUnitValue = ( @@ -328,6 +330,11 @@ export default function TimePanelBody(props: SharedTimeProps {mergedShowHour && ( @@ -337,7 +344,7 @@ export default function TimePanelBody(props: SharedTimeProps )} {mergedShowMinute && ( @@ -347,7 +354,7 @@ export default function TimePanelBody(props: SharedTimeProps )} {mergedShowSecond && ( @@ -357,7 +364,7 @@ export default function TimePanelBody(props: SharedTimeProps )} {mergedShowMillisecond && ( @@ -367,7 +374,7 @@ export default function TimePanelBody(props: SharedTimeProps )} {mergedShowMeridiem && ( @@ -376,7 +383,7 @@ export default function TimePanelBody(props: SharedTimeProps )}
            diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index 6e1ce1265..c229074d5 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -64,6 +64,7 @@ export function useInfo( export interface PickerHackContextProps { hidePrev?: boolean; hideNext?: boolean; + onCellDblClick?: () => void; } /** From 48a13f88e3334382748b1dd60e36e22e80224bc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 23 Nov 2023 14:40:00 +0800 Subject: [PATCH 157/380] refactor: motion scroll --- docs/examples/debug.tsx | 5 +- .../TimePanel/TimePanelBody/TimeColumn.tsx | 57 +++++--------- .../TimePanel/TimePanelBody/useScrollTo.ts | 76 +++++++++++++++++++ 3 files changed, 97 insertions(+), 41 deletions(-) create mode 100644 src/NewPicker/PickerPanel/TimePanel/TimePanelBody/useScrollTo.ts diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 67c71a9f4..17ececae4 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -80,7 +80,10 @@ export default () => { // needConfirm needConfirm={false} // open - showTime + showTime={{ + format: 'HH', + // changeOnScroll: true, + }} // showTime={{ // disabledHours: () => [0], // }} diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx index 1aeba0b4d..9facf61c7 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -1,11 +1,10 @@ import classNames from 'classnames'; -import { useEvent } from 'rc-util'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; -import raf from 'rc-util/lib/raf'; import * as React from 'react'; import { PanelContext } from '../../context'; +import useScrollTo from './useScrollTo'; -const SCROLL_DELAY = 500; +const SCROLL_DELAY = 300; export type Unit = { label: React.ReactText; @@ -35,56 +34,36 @@ export default function TimeColumn(props: TimeUnitColumnProps) { const ulRef = React.useRef(null); // ========================= Scroll ========================= - const timeoutRef = React.useRef(); + const checkDelayRef = React.useRef(); - const cleanScroll = () => { - clearTimeout(timeoutRef.current!); + const clearDelayCheck = () => { + clearTimeout(checkDelayRef.current); }; - const scrollRafRef = React.useRef(null); - - // Scroll to value position - const scrollToValue = useEvent((val: number | string) => { - raf.cancel(scrollRafRef.current); - - // Do not trigger realign by this effect scroll - setTimeout(cleanScroll, 100); - - scrollRafRef.current = raf(() => { - const ul = ulRef.current; - const targetLi = ul?.querySelector(`[data-value="${val}"]`); - - if (targetLi) { - const firstLiTop = ul.querySelector(`li`).offsetTop; - const targetLiTop = targetLi.offsetTop; - - const nextTop = targetLiTop - firstLiTop; - - // IE not support `scrollTo` - ul.scrollTop = nextTop; - } - }); - }); + // ========================== Sync ========================== + const [syncScroll, stopScroll, isScrolling] = useScrollTo(ulRef, value ?? optionalValue); // Effect sync value scroll useLayoutEffect(() => { - scrollToValue(value ?? optionalValue); - }, [value, optionalValue, units, scrollToValue]); + syncScroll(); + clearDelayCheck(); + return stopScroll; + }, [value, optionalValue, units]); + + // ========================= Change ========================= // Scroll event if sync onScroll const onInternalScroll: React.UIEventHandler = (event) => { - const target = event.target as HTMLUListElement; + clearDelayCheck(); - if (changeOnScroll) { - cleanScroll(); + const target = event.target as HTMLUListElement; - timeoutRef.current = setTimeout(() => { + if (!isScrolling() && changeOnScroll) { + checkDelayRef.current = setTimeout(() => { const ul = ulRef.current!; - const firstLiTop = ul.querySelector(`li`).offsetTop; const liList = Array.from(ul.querySelectorAll(`li`)); const liTopList = liList.map((li) => li.offsetTop - firstLiTop); - const liDistList = liTopList.map((top, index) => { if (units[index].disabled) { return Number.MAX_SAFE_INTEGER; @@ -95,11 +74,9 @@ export default function TimeColumn(props: TimeUnitColumnProps) { // Find min distance index const minDist = Math.min(...liDistList); const minDistIndex = liDistList.findIndex((dist) => dist === minDist); - const targetUnit = units[minDistIndex]; if (targetUnit && !targetUnit.disabled) { onChange(targetUnit.value); - scrollToValue(targetUnit.value); } }, SCROLL_DELAY); } diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/useScrollTo.ts b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/useScrollTo.ts new file mode 100644 index 000000000..5f75c343e --- /dev/null +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/useScrollTo.ts @@ -0,0 +1,76 @@ +import { useEvent } from 'rc-util'; +import raf from 'rc-util/lib/raf'; +import * as React from 'react'; + +const SPEED_PTG = 1 / 5; + +export default function useScrollTo( + ulRef: React.RefObject, + value: number | string, +): [syncScroll: VoidFunction, clearScroll: VoidFunction, isScrolling: () => boolean] { + // ========================= Scroll ========================= + const scrollingRef = React.useRef(false); + const scrollRafRef = React.useRef(null); + const scrollDistRef = React.useRef(null); + + const isScrolling = () => scrollingRef.current; + + const stopScroll = () => { + raf.cancel(scrollRafRef.current); + scrollingRef.current = false; + }; + + const startScroll = (targetTop: number) => { + const ul = ulRef.current; + scrollDistRef.current = null; + + if (ul) { + const doScroll = () => { + stopScroll(); + scrollingRef.current = true; + + const currentTop = ul.scrollTop; + const nextTop = currentTop + (targetTop - currentTop) * SPEED_PTG; + const dist = Math.abs(targetTop - nextTop); + + // Break if dist get larger, which means user is scrolling + if (scrollDistRef.current !== null && scrollDistRef.current < dist) { + stopScroll(); + return; + } + scrollDistRef.current = dist; + + // Stop when dist is less than 1 + if (dist <= 1) { + ul.scrollTop = targetTop; + stopScroll(); + return; + } + + // IE not support `scrollTo` + ul.scrollTop = nextTop; + + scrollRafRef.current = raf(doScroll); + }; + + doScroll(); + } + }; + + // ======================== Trigger ========================= + const syncScroll = useEvent(() => { + const ul = ulRef.current; + const targetLi = ul?.querySelector(`[data-value="${value}"]`); + + if (targetLi) { + const firstLiTop = ul.querySelector(`li`).offsetTop; + const targetLiTop = targetLi.offsetTop; + + const nextTop = targetLiTop - firstLiTop; + + startScroll(nextTop); + } + }); + + return [syncScroll, stopScroll, isScrolling]; +} From 0cceb077d20adda7febc5a9d4acc55a5b9be562f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 23 Nov 2023 14:41:59 +0800 Subject: [PATCH 158/380] chore: clean up --- tests/range.spec.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 0e626b56a..588420014 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1074,9 +1074,7 @@ describe('Picker.Range', () => { defaultValue={[getDay(defaultValue[0]), getDay(defaultValue[1] || defaultValue[0])]} />, ); - console.log('~~~~~~~~~~~~'); openPicker(container, 1); - console.log('~~~~~~~~~~~~'); selectCell(targetCell); closePicker(container, 1); expect(onChange).toHaveBeenCalled(); From 623051d4da36d5315fd991073324af6860bc31d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 23 Nov 2023 15:35:15 +0800 Subject: [PATCH 159/380] test: dbl click --- tests/new-range.spec.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index c159b92e2..a16b555a9 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -8,6 +8,7 @@ import zh_CN from '../src/locale/zh_CN'; import { closePicker, DayRangePicker, + findCell, getDay, isOpen, isSame, @@ -659,5 +660,28 @@ describe('NewPicker.Range', () => { expect(onChange).toHaveBeenCalledWith(expect.anything(), ['06:00:00', '11:00:00']); }); + + it('double click to confirm if needConfirm', () => { + const onChange = jest.fn(); + + const { container } = render(); + openPicker(container); + + fireEvent.click(findCell(5)); + fireEvent.doubleClick(findCell(5)); + + act(() => { + jest.runAllTimers(); + }); + + const li = document.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[11]; + fireEvent.click(li); + fireEvent.doubleClick(li); + + expect(onChange).toHaveBeenCalledWith(expect.anything(), [ + '1990-09-05 00:00:00', + '1990-09-05 11:00:00', + ]); + }); }); }); From f49a481a9e86dc4c9e21df2131e654ecbd40dcad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 23 Nov 2023 17:14:35 +0800 Subject: [PATCH 160/380] chore: all the logic --- docs/examples/debug.tsx | 15 +++++++++------ src/NewPicker/PickerInput/hooks/useRangeActive.ts | 11 +++++------ tests/new-range.spec.tsx | 9 ++++++++- tests/range.spec.tsx | 10 ++++++++-- tests/util/commonUtil.tsx | 6 ++++++ 5 files changed, 36 insertions(+), 15 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 17ececae4..7138a0db0 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -72,18 +72,21 @@ export default () => { return (
            + + {/* */}
            [0], // }} diff --git a/src/NewPicker/PickerInput/hooks/useRangeActive.ts b/src/NewPicker/PickerInput/hooks/useRangeActive.ts index ed72b5d04..b016db95d 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeActive.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeActive.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import type { RangeValueType } from '../RangePicker'; -import { useDelayEffect } from './useDelayState'; +import useLockEffect from './useLockEffect'; export type OperationType = 'input' | 'panel'; @@ -57,18 +57,17 @@ export default function useRangeActive( }; // ============================= Effect ============================= - useDelayEffect(open, () => { - if (open) { + useLockEffect(focused, () => { + if (!focused) { activeListRef.current = []; } }); - // Record for the open timing `activeIndex` React.useEffect(() => { - if (open) { + if (focused) { activeListRef.current.push(activeIndex); } - }, [open, activeIndex]); + }, [focused, activeIndex]); return [activeIndex, setActiveIndex, focused, triggerFocus, lastOperation, nextActiveIndex]; } diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index a16b555a9..b02e3ad6d 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -586,7 +586,12 @@ describe('NewPicker.Range', () => { describe('needConfirm', () => { it('normal picker need confirm', () => { const onChange = jest.fn(); - const { container } = render(); + const { container } = render( + <> + +
            @@ -113,6 +118,7 @@ exports[`Picker.Range panelRender 1`] = `
            @@ -161,6 +167,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          @@ -175,6 +182,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
          @@ -1200,6 +1208,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          @@ -1214,6 +1223,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
          From f65ef7ea694d74f88e2b606cbaf781d85e87be10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 5 Dec 2023 11:58:49 +0800 Subject: [PATCH 197/380] docs: update --- docs/examples/debug.tsx | 41 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 36 insertions(+), 5 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 98822512b..1dd1f04fc 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -37,7 +37,38 @@ const sharedLocale = { const MyInput = React.forwardRef>( (props, ref) => { console.log('>>>', props); - return ; + const { 'data-range': range, value, style } = props as any; + + // return ( + //
          + // + //
          + // ); + + return ( +
          + + {!value && ( +
          + {range === 'start' ? 'ไปŽๆœช' : '่‡ณไปŠ'} +
          + )} +
          + ); }, ); MyInput.displayName = 'MyInput'; @@ -61,11 +92,11 @@ export default () => { <>2333{ori}} placeholder={['Start', 'End']} suffixIcon="๐Ÿงถ" onFocus={(_, info) => { From 1a185135bee3650b3e1a2d0d9c7c3b2eaee94f0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 5 Dec 2023 16:03:33 +0800 Subject: [PATCH 198/380] chore: tmp of it --- src/NewPicker/PickerInput/Selector/Icon.tsx | 3 +- src/NewPicker/PickerInput/Selector/Input.tsx | 4 + .../PickerInput/Selector/RangeSelector.tsx | 2 +- .../PickerInput/Selector/SingleSelector.tsx | 253 +++++- .../Selector/hooks/useInputProps.ts | 125 +++ src/NewPicker/PickerInput/SinglePicker.tsx | 772 ++++++++++++++++-- 6 files changed, 1085 insertions(+), 74 deletions(-) create mode 100644 src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts diff --git a/src/NewPicker/PickerInput/Selector/Icon.tsx b/src/NewPicker/PickerInput/Selector/Icon.tsx index b893beb96..18d55f5da 100644 --- a/src/NewPicker/PickerInput/Selector/Icon.tsx +++ b/src/NewPicker/PickerInput/Selector/Icon.tsx @@ -18,7 +18,7 @@ export default function Icon(props: IconProps) { ) : null; } -export interface ClearIconProps extends IconProps { +export interface ClearIconProps extends Omit { onClear: VoidFunction; } @@ -26,6 +26,7 @@ export function ClearIcon({ onClear, ...restProps }: ClearIconProps) { return ( { e.preventDefault(); diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 8cdd42fd4..66d947b79 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -46,6 +46,8 @@ export interface InputProps extends Omit void; changeOnBlur?: boolean; invalid?: boolean; + + clearIcon?: React.ReactNode; } const Input = React.forwardRef((props, ref) => { @@ -62,6 +64,7 @@ const Input = React.forwardRef((props, ref) => { onKeyDown, changeOnBlur = true, invalid, + clearIcon, // Pass to input ...restProps } = props; @@ -392,6 +395,7 @@ const Input = React.forwardRef((props, ref) => { autoComplete="off" /> + {clearIcon}
          ); }); diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 37f82c732..b1745b2ba 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -339,7 +339,7 @@ function RangeSelector(
          - {showClear && } + {showClear && }
          ); diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector.tsx index 4ff582a42..46d60e4f6 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector.tsx @@ -1,49 +1,268 @@ import classNames from 'classnames'; +import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; +import { formatValue } from '../../../utils/dateUtil'; import type { SelectorProps, SelectorRef } from '../../interface'; import PickerContext from '../context'; -import Input from './Input'; +import { ClearIcon } from './Icon'; +import Input, { type InputProps, type InputRef } from './Input'; -const SingleSelector = React.forwardRef((props, ref) => { +export interface SingleSelectorProps extends SelectorProps { + id?: string; + + value?: DateType; + disabled: boolean; + + /** All the field show as `placeholder` */ + allHelp: boolean; + + placeholder?: string; + + // Invalid + invalid: boolean; + onInvalid: (valid: boolean) => void; +} + +function SingleSelector( + props: SingleSelectorProps, + ref: React.Ref, +) { const { + id, + + clearIcon, suffixIcon, + activeIndex, + activeHelp, + allHelp, + + focused, + onFocus, + onBlur, + onKeyDown, + locale, + generateConfig, + + // Placeholder + placeholder, // Style className, style, - // Focus - focused, - onFocus, - onBlur, + // Click + onClick, + onClear, + + // Change + value, + onChange, + onSubmit, + onInputChange, + + // Valid + format, + maskFormat, + changeOnBlur, + onInvalid, + + // Disabled + disabled, + invalid, + inputReadOnly, + + // Direction + direction, + + // Open + open, + onOpenChange, + + // Native + onMouseDown, + + // Input + required, + 'aria-required': ariaRequired, + + ...restProps } = props; + const rtl = direction === 'rtl'; + + // ======================== Prefix ======================== const { prefixCls } = React.useContext(PickerContext); - // ============================= Refs ============================= + // ========================= Refs ========================= const rootRef = React.useRef(); - const inputRef = React.useRef(); + const inputRef = React.useRef(); React.useImperativeHandle(ref, () => ({ nativeElement: rootRef.current, - focus: () => inputRef.current?.focus(), - blur: () => inputRef.current?.blur(), + focus: () => { + inputRef.current?.focus(); + }, + blur: () => { + inputRef.current?.blur(); + }, })); - // ============================ Render ============================ + // ======================== Parser ======================== + const parseDate = (str: string, formatStr: string) => { + const parsed = generateConfig.locale.parse(locale.locale, str, [formatStr]); + return parsed && generateConfig.isValidate(parsed) ? parsed : null; + }; + + // ========================= Text ========================= + const firstFormat = format[0]; + + const getText = React.useCallback( + (date: DateType) => + formatValue(date, { + locale, + format: firstFormat, + generateConfig, + }), + [locale, generateConfig, firstFormat], + ); + + const valueTexts = React.useMemo(() => [getText(value[0]), getText(value[1])], [value, getText]); + + // ======================= Validate ======================= + const validateFormat = (text: string) => { + for (let i = 0; i < format.length; i += 1) { + const singleFormat = format[i]; + + // Only support string type + if (typeof singleFormat === 'string') { + const parsed = parseDate(text, singleFormat); + + if (parsed) { + return parsed; + } + } + } + + return false; + }; + + // ======================== Inputs ======================== + const getInputProps = (index: number): InputProps => ({ + // ============== Shared ============== + format: maskFormat, + validateFormat: (text) => !!validateFormat(text), + changeOnBlur, + + readOnly: inputReadOnly, + + required, + 'aria-required': ariaRequired, + + // ============= By Index ============= + id: ids[index], + + value: valueTexts[index], + + invalid: invalid[index], + + placeholder: (placeholder || [])[index], + + active: activeIndex === index, + + helped: allHelp || (activeHelp && activeIndex === index), + + disabled: disabled[index], + + onFocus: (event) => { + onFocus(event, index); + }, + onBlur: (event) => { + // Blur do not trigger close + // Since it may focus to the popup panel + onBlur(event, index); + }, + + onSubmit, + + // Get validate text value + onChange: (text) => { + onInputChange(); + + const parsed = validateFormat(text); + + if (parsed) { + onInvalid(index, false); + onChange(parsed, index); + return; + } + + // Tell outer that the value typed is invalid. + // If text is empty, it means valid. + onInvalid(index, !!text); + }, + onHelp: () => { + onOpenChange(true); + }, + onKeyDown: (event) => { + switch (event.key) { + case 'Escape': + onOpenChange(false); + break; + } + + onKeyDown?.(event); + }, + }); + + // ======================== Clear ========================= + const showClear = (clearIcon && value[0] && !disabled[0]) || (value[1] && !disabled[1]); + + // ======================== Render ======================== return (
          { + const { target } = e; + if (target !== inputRef.current.inputElement) { + e.preventDefault(); + } + + onMouseDown?.(e); + }} > - + } + /> + + {/* + +
          + + */}
          ); -}); +} + +const RefSingleSelector = React.forwardRef(SingleSelector); if (process.env.NODE_ENV !== 'production') { - SingleSelector.displayName = 'SingleSelector'; + RefSingleSelector.displayName = 'SingleSelector'; } -export default SingleSelector; +export default RefSingleSelector; diff --git a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts new file mode 100644 index 000000000..fc0c10241 --- /dev/null +++ b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts @@ -0,0 +1,125 @@ +import type { SelectorProps } from '../../../interface'; +import type { InputProps } from '../Input'; + +export default function useInputProps( + props: Pick< + SelectorProps, + | 'maskFormat' + | 'format' + | 'generateConfig' + | 'locale' + | 'changeOnBlur' + | 'inputReadOnly' + | 'required' + | 'aria-required' + | 'onSubmit' + >, +) { + const { + format, + maskFormat, + generateConfig, + locale, + changeOnBlur, + inputReadOnly, + required, + 'aria-required': ariaRequired, + onSubmit, + } = props; + + // ======================== Parser ======================== + const parseDate = (str: string, formatStr: string) => { + const parsed = generateConfig.locale.parse(locale.locale, str, [formatStr]); + return parsed && generateConfig.isValidate(parsed) ? parsed : null; + }; + + // ======================= Validate ======================= + const validateFormat = (text: string) => { + for (let i = 0; i < format.length; i += 1) { + const singleFormat = format[i]; + + // Only support string type + if (typeof singleFormat === 'string') { + const parsed = parseDate(text, singleFormat); + + if (parsed) { + return parsed; + } + } + } + + return false; + }; + + // ======================== Input ========================= + const getInputProps = (index: number): InputProps => { + return { + // ============== Shared ============== + format: maskFormat, + validateFormat: (text) => !!validateFormat(text), + changeOnBlur, + + readOnly: inputReadOnly, + + required, + 'aria-required': ariaRequired, + + // ============= By Index ============= + id: ids[index], + + value: valueTexts[index], + + invalid: invalid[index], + + placeholder: (placeholder || [])[index], + + active: activeIndex === index, + + helped: allHelp || (activeHelp && activeIndex === index), + + disabled: disabled[index], + + onFocus: (event) => { + onFocus(event, index); + }, + onBlur: (event) => { + // Blur do not trigger close + // Since it may focus to the popup panel + onBlur(event, index); + }, + + onSubmit, + + // Get validate text value + onChange: (text) => { + onInputChange(); + + const parsed = validateFormat(text); + + if (parsed) { + onInvalid(index, false); + onChange(parsed, index); + return; + } + + // Tell outer that the value typed is invalid. + // If text is empty, it means valid. + onInvalid(index, !!text); + }, + onHelp: () => { + onOpenChange(true); + }, + onKeyDown: (event) => { + switch (event.key) { + case 'Escape': + onOpenChange(false); + break; + } + + onKeyDown?.(event); + }, + }; + }; + + return getInputProps; +} diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index aaf4c78de..9598217bd 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -1,32 +1,110 @@ -import { useMergedState } from 'rc-util'; +import { useEvent, useMergedState } from 'rc-util'; +import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; +import omit from 'rc-util/lib/omit'; +import pickAttrs from 'rc-util/lib/pickAttrs'; +import warning from 'rc-util/lib/warning'; import * as React from 'react'; -import type { PickerRef, SelectorRef, SharedPickerProps } from '../interface'; -import PickerPanel from '../PickerPanel'; +import useLocale from '../hooks/useLocale'; +import useTimeConfig from '../hooks/useTimeConfig'; +import type { + BaseInfo, + InternalMode, + OnOpenChange, + OpenConfig, + PanelMode, + PickerRef, + SelectorProps, + SelectorRef, + SharedHTMLAttrs, + SharedPickerProps, + ValueDate, +} from '../interface'; +import type { PickerPanelProps } from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; +import { fillIndex } from '../util'; import PickerContext from './context'; -import SingleSelector from './Selector/SingleSelector'; +import useCellRender from './hooks/useCellRender'; +import useDisabledBoundary from './hooks/useDisabledBoundary'; +import { useFieldFormat } from './hooks/useFieldFormat'; +import useInputReadOnly from './hooks/useInputReadOnly'; +import useInvalidate from './hooks/useInvalidate'; +import useOpen from './hooks/useOpen'; +import usePresets from './hooks/usePresets'; +import useRangeActive from './hooks/useRangeActive'; +import useRangeDisabledDate from './hooks/useRangeDisabledDate'; +import useRangePickerValue from './hooks/useRangePickerValue'; +import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; +import useShowNow from './hooks/useShowNow'; +import Popup from './Popup'; +import { useClearIcon } from './Selector/hooks/useClearIcon'; +import RangeSelector from './Selector/RangeSelector'; -export type SinglePickerProps = SharedPickerProps; +export interface PickerProps extends SharedPickerProps { + // Value + value?: DateType; + defaultValue?: DateType; + onChange?: (date: DateType, dateString: string) => void; + onCalendarChange?: (date: DateType, dateString: string, info: BaseInfo) => void; -const SinglePicker = React.forwardRef((props, ref) => { - const { - prefixCls = 'rc-picker', + // Placeholder + placeholder?: string; - // MISC - direction, + // Picker Value + /** + * Config the popup panel date. + * Every time active the input to open popup will reset with `defaultPickerValue`. + * + * Note: `defaultPickerValue` priority is higher than `value` for the first open. + */ + defaultPickerValue?: DateType | null; + /** + * Config each start & end field popup panel date. + * When config `pickerValue`, you must also provide `onPickerValueChange` to handle changes. + */ + pickerValue?: DateType | null; + /** + * Each popup panel `pickerValue` change will trigger the callback. + * @param date The changed picker value + * @param info.source `panel` from the panel click. `reset` from popup open or field typing. + */ + onPickerValueChange?: ( + date: DateType, + info: { + source: 'reset' | 'panel'; + }, + ) => void; - // Selector - className, - style, - classNames = {}, + // Preset + presets?: ValueDate[]; + + // Control + disabled?: boolean; + + // Mode + mode?: PanelMode; + onPanelChange?: (values: DateType, modes: PanelMode) => void; +} + +function Picker( + props: PickerProps, + ref: React.Ref, +) { + const { + // Style + prefixCls = 'rc-picker', styles = {}, + classNames = {}, - // Icons - suffixIcon, + // Value + defaultValue, + value, + needConfirm, - // Focus - onFocus, - onBlur, + // Disabled + disabled, + disabledDate, + minDate, + maxDate, // Open defaultOpen, @@ -35,50 +113,596 @@ const SinglePicker = React.forwardRef((props, ref) popupAlign, getPopupContainer, + // Picker + locale, + generateConfig, + picker = 'date', + showNow, + showToday, + + // Mode + mode, + onPanelChange, + onCalendarChange, + + // Picker Value + defaultPickerValue, + pickerValue, + onPickerValueChange, + + // Format + format, + inputReadOnly, + // Motion transitionName, - } = props; - // ============================= Open ============================= - const [mergedOpen, setMergeOpen] = useMergedState(defaultOpen || false, { - value: open, - onChange: onOpenChange, - }); + suffixIcon, + direction, - const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; + // Focus + onFocus, + onBlur, - // ============================ Active ============================ - const [focused, setFocused] = React.useState(false); + // Presets + presets, - const onInternalFocus: React.FocusEventHandler = (event) => { - onFocus?.(event); - setFocused(true); - setMergeOpen(true); - }; + // Icons + allowClear, + clearIcon, - const onInternalBlur: React.FocusEventHandler = (event) => { - onBlur?.(event); - setFocused(false); - setMergeOpen(false); - }; + // Render + components = {}, + cellRender, + dateRender, + monthCellRender, + + // Native + onClick, + } = props; - // ============================= Refs ============================= + // ========================= Refs ========================= const selectorRef = React.useRef(); React.useImperativeHandle(ref, () => ({ nativeElement: selectorRef.current?.nativeElement, - focus: selectorRef.current?.focus, - blur: selectorRef.current?.blur, + focus: () => { + selectorRef.current?.focus(); + }, + blur: () => { + selectorRef.current?.blur(); + }, })); - // ============================ Panels ============================ - const panel = ; + // ======================== Locale ======================== + const filledLocale = useLocale(locale); + + + // ========================= Icon ========================= + const mergedClearIcon = useClearIcon(prefixCls, allowClear, clearIcon); + + // ========================= Prop ========================= + const filledProps = React.useMemo( + () => ({ + ...props, + locale: filledLocale, + picker, + }), + [props], + ); + + // ======================= ShowTime ======================= + const mergedShowTime = useTimeConfig(filledProps); + + // ========================= Open ========================= + const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; + + const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, onOpenChange); + + const triggerOpen: OnOpenChange = (nextOpen, config?: OpenConfig) => { + // No need to open if all disabled + if (disabled.some((fieldDisabled) => !fieldDisabled) || !nextOpen) { + setMergeOpen(nextOpen, config); + } + }; + + // ======================== Picker ======================== + /** Almost same as `picker`, but add `datetime` for `date` with `showTime` */ + const internalPicker: InternalMode = picker === 'date' && mergedShowTime ? 'datetime' : picker; + + /** The picker is `datetime` or `time` */ + const complexPicker = internalPicker === 'time' || internalPicker === 'datetime'; + const mergedNeedConfirm = needConfirm ?? complexPicker; + + // ======================== Format ======================== + const [formatList, maskFormat] = useFieldFormat(internalPicker, filledLocale, format); + + // ======================== Values ======================== + const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange] = useInnerValue( + generateConfig, + locale, + formatList, + defaultValue, + value, + onCalendarChange, + ); + + const calendarValue = getCalendarValue(); + + // ======================== Active ======================== + const [ + activeIndex, + setActiveIndex, + focused, + triggerFocus, + lastOperation, + nextActiveIndex, + activeIndexList, + ] = useRangeActive(mergedOpen, disabled, mergedAllowEmpty); + + const onSharedFocus = (event: React.FocusEvent, index?: number) => { + triggerFocus(true); + + onFocus?.(event, { + range: getActiveRange(index ?? activeIndex), + }); + }; + + const onSharedBlur = (event: React.FocusEvent, index?: number) => { + triggerFocus(false); + + onBlur?.(event, { + range: getActiveRange(index ?? activeIndex), + }); + }; + + // ========================= Mode ========================= + const [modes, setModes] = useMergedState<[PanelMode, PanelMode]>([picker, picker], { + value: mode, + }); + + const mergedMode = modes[activeIndex] || picker; + + /** Extends from `mergedMode` to patch `datetime` mode */ + const internalMode: InternalMode = + mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode; + + // ====================== PanelCount ====================== + const multiplePanel = internalMode === picker && internalMode !== 'time'; + + // ======================= Show Now ======================= + const mergedShowNow = useShowNow(internalPicker, mergedMode, showNow, showToday); + + // ======================= ReadOnly ======================= + const mergedInputReadOnly = useInputReadOnly(formatList, inputReadOnly); + + // ======================= Boundary ======================= + const disabledBoundaryDate = useDisabledBoundary( + generateConfig, + locale, + disabledDate, + minDate, + maxDate, + ); + + // ====================== Invalidate ====================== + const isInvalidateDate = useInvalidate( + generateConfig, + picker, + disabledBoundaryDate, + mergedShowTime, + ); + + // ======================== Value ========================= + const [ + /** Trigger `onChange` by check `disabledDate` */ + flushSubmit, + /** Trigger `onChange` directly without check `disabledDate` */ + triggerSubmitChange, + ] = useRangeValue( + filledProps, + mergedValue, + setInnerValue, + getCalendarValue, + triggerCalendarChange, + disabled, + formatList, + focused, + mergedOpen, + isInvalidateDate, + ); + + // ===================== DisabledDate ===================== + const disabledDate = useRangeDisabledDate( + calendarValue, + disabled, + activeIndexList, + generateConfig, + filledLocale, + disabledBoundaryDate, + // minDate, + // maxDate, + ); + + // ======================= Validate ======================= + const [fieldsInvalidates, setFieldsInvalidates] = React.useState<[boolean, boolean]>([ + false, + false, + ]); + + const onSelectorInvalid = (index: number, valid: boolean) => { + setFieldsInvalidates((ori) => fillIndex(ori, index, valid)); + }; + + /** + * For the Selector Input to mark as `aria-disabled` + */ + const submitInvalidates = React.useMemo(() => { + return fieldsInvalidates.map((invalid, index) => { + // If typing invalidate + if (invalid) { + return true; + } + + const current = calendarValue[index]; + + // Not check if all empty + if (!current) { + return false; + } + + // Not allow empty + if (!mergedAllowEmpty[index] && !current) { + return true; + } - // ============================ Render ============================ + // Invalidate + if (current && isInvalidateDate(current)) { + return true; + } + + return false; + }) as [boolean, boolean]; + }, [calendarValue, fieldsInvalidates, isInvalidateDate, mergedAllowEmpty]); + + // ===================== Picker Value ===================== + const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue( + generateConfig, + filledLocale, + calendarValue, + mergedOpen, + activeIndex, + internalPicker, + multiplePanel, + defaultPickerValue, + pickerValue, + mergedShowTime?.defaultValue, + onPickerValueChange, + minDate, + maxDate, + ); + + // >>> Mode need wait for `pickerValue` + const triggerModeChange = useEvent( + (nextPickerValue: DateType, nextMode: PanelMode, triggerEvent?: boolean) => { + const clone = fillIndex(modes, activeIndex, nextMode); + + if (clone[0] !== modes[0] || clone[1] !== modes[1]) { + setModes(clone); + } + + // Compatible with `onPanelChange` + if (onPanelChange && triggerEvent !== false) { + const clonePickerValue: RangeValueType = [...calendarValue]; + if (nextPickerValue) { + clonePickerValue[activeIndex] = nextPickerValue; + } + onPanelChange(clonePickerValue, clone); + } + }, + ); + + // ======================== Change ======================== + const fillCalendarValue = (date: DateType, index: number) => + // Trigger change only when date changed + fillIndex(calendarValue, index, date); + + // ======================== Submit ======================== + /** + * Trigger by confirm operation. + * This function has already handle the `needConfirm` check logic. + * - Selector: enter key + * - Panel: OK button + */ + const triggerPartConfirm = (date?: DateType, skipFocus?: boolean) => { + let nextValue = calendarValue; + + if (date) { + nextValue = fillCalendarValue(date, activeIndex); + } + + // Get next focus index + const nextIndex = nextActiveIndex(nextValue); + + // Change calendar value and tell flush it + triggerCalendarChange(nextValue); + flushSubmit(activeIndex, nextIndex === null); + + if (nextIndex === null) { + triggerOpen(false, { force: true }); + } else if (!skipFocus) { + selectorRef.current.focus(nextIndex); + } + }; + + // ======================== Click ========================= + const onSelectorClick: React.MouseEventHandler = (event) => { + if (!selectorRef.current.nativeElement.contains(document.activeElement)) { + // Click to focus the enabled input + const enabledIndex = disabled.findIndex((d) => !d); + if (enabledIndex >= 0) { + selectorRef.current.focus(enabledIndex); + } + } + + triggerOpen(true); + + onClick?.(event); + }; + + const onSelectorClear = () => { + triggerSubmitChange(null); + triggerOpen(false, { force: true }); + }; + + // ======================== Hover ========================= + const [hoverSource, setHoverSource] = React.useState<'cell' | 'preset'>(null); + const [internalHoverValues, setInternalHoverValues] = + React.useState>(null); + + const hoverValues = React.useMemo(() => { + return internalHoverValues || calendarValue; + }, [calendarValue, internalHoverValues]); + + // Clean up `internalHoverValues` when closed + React.useEffect(() => { + if (!mergedOpen) { + setInternalHoverValues(null); + } + }, [mergedOpen]); + + // ======================================================== + // == Panels == + // ======================================================== + const [activeOffset, setActiveOffset] = React.useState(0); + + // ======================= Presets ======================== + const presetList = usePresets(presets, ranges); + + const onPresetHover = (nextValues: RangeValueType | null) => { + setInternalHoverValues(nextValues); + setHoverSource('preset'); + }; + + const onPresetSubmit = (nextValues: RangeValueType) => { + const passed = triggerSubmitChange(nextValues); + + if (passed) { + triggerOpen(false, { force: true }); + } + }; + + // ======================== Panel ========================= + const onPanelHover = (date: DateType) => { + setInternalHoverValues(date ? fillCalendarValue(date, activeIndex) : null); + setHoverSource('cell'); + }; + + // >>> Focus + const onPanelFocus: React.FocusEventHandler = (event) => { + triggerOpen(true); + onSharedFocus(event); + }; + + // >>> Calendar + const onPanelCalendarChange: PickerPanelProps['onChange'] = (date) => { + lastOperation('panel'); + + const clone: RangeValueType = fillIndex(calendarValue, activeIndex, date); + + // Only trigger calendar event but not update internal `calendarValue` state + triggerCalendarChange(clone); + + // >>> Trigger next active if !needConfirm + // Fully logic check `useRangeValue` hook + if (!needConfirm && !complexPicker && internalPicker === internalMode) { + triggerPartConfirm(date); + } + }; + + // >>> Close + const onPopupClose = () => { + // Close popup + triggerOpen(false); + }; + + // >>> cellRender + const onInternalCellRender = useCellRender( + cellRender, + dateRender, + monthCellRender, + getActiveRange(activeIndex), + ); + + // >>> Value + const panelValue = calendarValue[activeIndex] || null; + + // >>> invalid + + const panelProps = React.useMemo(() => { + const domProps = pickAttrs(filledProps, false); + const restProps = omit(filledProps, [ + ...(Object.keys(domProps) as (keyof SharedHTMLAttrs)[]), + 'onChange', + 'onCalendarChange', + 'style', + 'className', + 'id', + 'onPanelChange', + ]); + return restProps; + }, [filledProps]); + + // >>> Render + const panel = ( + + // MISC + {...panelProps} + showNow={mergedShowNow} + showTime={mergedShowTime} + // Range + range + multiple={multiplePanel} + activeOffset={activeOffset} + // Disabled + disabledDate={disabledDate} + // Focus + onFocus={onPanelFocus} + onBlur={onSharedBlur} + // Mode + picker={picker} + mode={mergedMode} + internalMode={internalMode} + onPanelChange={triggerModeChange} + // Value + value={panelValue} + isInvalid={isInvalidateDate} + onChange={null} + onCalendarChange={onPanelCalendarChange} + // PickerValue + pickerValue={currentPickerValue} + onPickerValueChange={setCurrentPickerValue} + // Hover + hoverValue={hoverValues} + onHover={onPanelHover} + // Submit + needConfirm={mergedNeedConfirm} + onSubmit={triggerPartConfirm} + // Preset + presets={presetList} + onPresetHover={onPresetHover} + onPresetSubmit={onPresetSubmit} + // Render + cellRender={onInternalCellRender} + /> + ); + + // ======================================================== + // == Selector == + // ======================================================== + + // ======================== Change ======================== + const onSelectorChange = (date: DateType, index: number) => { + const clone = fillCalendarValue(date, index); + + triggerCalendarChange(clone); + }; + + const onSelectorInputChange = () => { + lastOperation('input'); + }; + + // ======================= Selector ======================= + const onSelectorFocus: SelectorProps['onFocus'] = (event, index) => { + lastOperation('input'); + + triggerOpen(true, { + inherit: true, + }); + + setActiveIndex(index); + + onSharedFocus(event, index); + }; + + const onSelectorBlur: SelectorProps['onBlur'] = (event, index) => { + triggerOpen(false); + + onSharedBlur(event, index); + }; + + const onSelectorKeyDown: SelectorProps['onKeyDown'] = (event) => { + if (event.key === 'Tab') { + triggerPartConfirm(null, true); + } + }; + + // ======================= Context ======================== + const context = React.useMemo( + () => ({ + prefixCls, + locale: filledLocale, + generateConfig, + button: components.button, + input: components.input, + }), + [prefixCls, filledLocale, generateConfig, components.button, components.input], + ); + + // ======================== Effect ======================== + // >>> Mode + // Reset for every active + useLayoutEffect(() => { + if (mergedOpen && activeIndex !== undefined) { + // Legacy compatible. This effect update should not trigger `onPanelChange` + triggerModeChange(null, picker, false); + } + }, [mergedOpen, activeIndex, picker]); + + // >>> For complex picker, we need check if need to focus next one + useLayoutEffect(() => { + const lastOp = lastOperation(); + + // Trade as confirm on field leave + if (!mergedOpen && lastOp === 'input') { + triggerOpen(false); + triggerPartConfirm(null, true); + } + + // Submit with complex picker + if (!mergedOpen && complexPicker && !mergedNeedConfirm && lastOp === 'panel') { + triggerOpen(true); + triggerPartConfirm(); + } + }, [mergedOpen]); + + // ====================== DevWarning ====================== + if (process.env.NODE_ENV !== 'production') { + const isIndexEmpty = (index: number) => { + return ( + // Value is empty + !value?.[index] && + // DefaultValue is empty + !defaultValue?.[index] + ); + }; + + if ( + disabled.some( + (fieldDisabled, index) => fieldDisabled && isIndexEmpty(index) && !mergedAllowEmpty[index], + ) + ) { + warning( + false, + '`disabled` should not set with empty `value`. You should set `allowEmpty` or `value` instead.', + ); + } + } + + // ======================== Render ======================== return ( - + ((props, ref) transitionName={transitionName} popupPlacement={popupPlacement} direction={direction} + // Visible + visible={mergedOpen} + onClose={onPopupClose} + // Range + range > - ); -}); +} + +const RefPicker = React.forwardRef(Picker) as ( + props: PickerProps & { ref?: React.Ref }, +) => React.ReactElement; if (process.env.NODE_ENV !== 'production') { - SinglePicker.displayName = 'SinglePicker'; + (RefPicker as any).displayName = 'RefPicker'; } -export default SinglePicker; +export default RefPicker; From 645ffc001c9861b1a07ae6741caec41e065dd435 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 5 Dec 2023 16:27:41 +0800 Subject: [PATCH 199/380] chore: tmp of it --- .../PickerInput/Selector/RangeSelector.tsx | 10 +++- .../Selector/hooks/useInputProps.ts | 58 ++++++++++++++++--- 2 files changed, 58 insertions(+), 10 deletions(-) diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index b1745b2ba..10917aec1 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -27,7 +27,7 @@ export interface RangeSelectorProps extends SelectorProps( }, })); + // ===================== Placeholder ====================== + const mergedPlaceholder = React.useMemo( + () => (Array.isArray(placeholder) ? placeholder : [placeholder, placeholder]), + [placeholder], + ); + // ========================= Open ========================= const triggerOpen = (nextOpen: boolean, index: number, config: OpenConfig = {}) => { onOpenChange(nextOpen, { @@ -210,7 +216,7 @@ function RangeSelector( invalid: invalid[index], - placeholder: (placeholder || [])[index], + placeholder: mergedPlaceholder[index], active: activeIndex === index, diff --git a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts index fc0c10241..f617bdf35 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts +++ b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts @@ -1,7 +1,9 @@ +import * as React from 'react'; +import { formatValue } from '../../../../utils/dateUtil'; import type { SelectorProps } from '../../../interface'; import type { InputProps } from '../Input'; -export default function useInputProps( +export default function useInputProps( props: Pick< SelectorProps, | 'maskFormat' @@ -13,7 +15,16 @@ export default function useInputProps( | 'required' | 'aria-required' | 'onSubmit' - >, + | 'onFocus' + | 'onBlur' + | 'onInputChange' + > & { + id?: string | string[]; + value?: DateType | [DateType?, DateType?]; + invalid?: boolean | [boolean, boolean]; + placeholder?: string | [string, string]; + disabled?: boolean | [boolean, boolean]; + }, ) { const { format, @@ -25,6 +36,15 @@ export default function useInputProps( required, 'aria-required': ariaRequired, onSubmit, + onFocus, + onBlur, + onInputChange, + + id, + value, + invalid, + placeholder, + disabled, } = props; // ======================== Parser ======================== @@ -33,6 +53,24 @@ export default function useInputProps( return parsed && generateConfig.isValidate(parsed) ? parsed : null; }; + // ========================= Text ========================= + const firstFormat = format[0]; + + const getText = React.useCallback( + (date: DateType) => + formatValue(date, { + locale, + format: firstFormat, + generateConfig, + }), + [locale, generateConfig, firstFormat], + ); + + const valueTexts = React.useMemo( + () => (Array.isArray(value) ? [getText(value[0]), getText(value[1])] : getText(value)), + [value, getText], + ); + // ======================= Validate ======================= const validateFormat = (text: string) => { for (let i = 0; i < format.length; i += 1) { @@ -52,7 +90,11 @@ export default function useInputProps( }; // ======================== Input ========================= - const getInputProps = (index: number): InputProps => { + const getInputProps = (index?: number): InputProps => { + function getProp(propValue: T | T[]): T { + return index !== undefined ? propValue[index] : propValue; + } + return { // ============== Shared ============== format: maskFormat, @@ -65,19 +107,19 @@ export default function useInputProps( 'aria-required': ariaRequired, // ============= By Index ============= - id: ids[index], + id: getProp(id), - value: valueTexts[index], + value: getProp(valueTexts), - invalid: invalid[index], + invalid: getProp(invalid), - placeholder: (placeholder || [])[index], + placeholder: getProp(placeholder), active: activeIndex === index, helped: allHelp || (activeHelp && activeIndex === index), - disabled: disabled[index], + disabled: getProp(disabled), onFocus: (event) => { onFocus(event, index); From 33043897e015403403f995f4b65662ddd4f24716 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 5 Dec 2023 16:54:05 +0800 Subject: [PATCH 200/380] chore: tmp of it --- src/NewPicker/PickerInput/RangePicker.tsx | 2 +- src/NewPicker/PickerInput/Selector/RangeSelector.tsx | 7 ++++--- src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts | 2 ++ src/NewPicker/interface.tsx | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index ae6a08ac8..7d8cbe811 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -379,7 +379,7 @@ function RangePicker( false, ]); - const onSelectorInvalid = (index: number, valid: boolean) => { + const onSelectorInvalid = (valid: boolean, index: number) => { setFieldsInvalidates((ori) => fillIndex(ori, index, valid)); }; diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 10917aec1..bf42c06da 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -19,6 +19,8 @@ export type SelectorIdType = export interface RangeSelectorProps extends SelectorProps { id?: SelectorIdType; + activeIndex: number | null; + separator?: React.ReactNode; value?: [DateType?, DateType?]; @@ -31,7 +33,6 @@ export interface RangeSelectorProps extends SelectorProps void; // Offset /** @@ -242,14 +243,14 @@ function RangeSelector( const parsed = validateFormat(text); if (parsed) { - onInvalid(index, false); + onInvalid(false, index); onChange(parsed, index); return; } // Tell outer that the value typed is invalid. // If text is empty, it means valid. - onInvalid(index, !!text); + onInvalid(!!text, index); }, onHelp: () => { triggerOpen(true, index); diff --git a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts index f617bdf35..4a6e2ee15 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts +++ b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts @@ -24,6 +24,7 @@ export default function useInputProps( invalid?: boolean | [boolean, boolean]; placeholder?: string | [string, string]; disabled?: boolean | [boolean, boolean]; + activeIndex?: number | null; }, ) { const { @@ -45,6 +46,7 @@ export default function useInputProps( invalid, placeholder, disabled, + activeIndex, } = props; // ======================== Parser ======================== diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 36ec8360a..d1c3f39b0 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -395,7 +395,6 @@ export interface SelectorProps extends SharedHTMLAttrs { suffixIcon?: React.ReactNode; className?: string; style?: React.CSSProperties; - activeIndex: number | null; /** Add `-placeholder` className as a help info */ activeHelp?: boolean; focused: boolean; @@ -424,6 +423,7 @@ export interface SelectorProps extends SharedHTMLAttrs { maskFormat?: string; onChange: (date: DateType, index?: number) => void; onInputChange: VoidFunction; + onInvalid: (valid: boolean, index?: number) => void; /** When user input invalidate date, keep it in the input field */ /** * By default value in input field will be reset with previous valid value when blur. From 7f6e8bac0c0e602d56d87844f916dc8c166bb6cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 5 Dec 2023 17:07:33 +0800 Subject: [PATCH 201/380] chore: tmp of it --- .../Selector/hooks/useInputProps.ts | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts index 4a6e2ee15..6ea5a1b73 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts +++ b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts @@ -18,12 +18,20 @@ export default function useInputProps( | 'onFocus' | 'onBlur' | 'onInputChange' + | 'onInvalid' + | 'onOpenChange' + | 'onKeyDown' + | 'onChange' + | 'activeHelp' > & { id?: string | string[]; value?: DateType | [DateType?, DateType?]; invalid?: boolean | [boolean, boolean]; placeholder?: string | [string, string]; disabled?: boolean | [boolean, boolean]; + + // RangePicker only + allHelp: boolean; activeIndex?: number | null; }, ) { @@ -40,6 +48,11 @@ export default function useInputProps( onFocus, onBlur, onInputChange, + onInvalid, + onOpenChange, + onKeyDown, + onChange, + activeHelp, id, value, @@ -47,6 +60,7 @@ export default function useInputProps( placeholder, disabled, activeIndex, + allHelp, } = props; // ======================== Parser ======================== @@ -141,14 +155,14 @@ export default function useInputProps( const parsed = validateFormat(text); if (parsed) { - onInvalid(index, false); + onInvalid(false, index); onChange(parsed, index); return; } // Tell outer that the value typed is invalid. // If text is empty, it means valid. - onInvalid(index, !!text); + onInvalid(!!text, index); }, onHelp: () => { onOpenChange(true); From b284261f93900b040fcbf956b34eb6dc8222a1d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 5 Dec 2023 17:25:49 +0800 Subject: [PATCH 202/380] chore: clean up --- .../PickerInput/Selector/RangeSelector.tsx | 124 ++---------------- .../Selector/hooks/useInputProps.ts | 8 +- 2 files changed, 14 insertions(+), 118 deletions(-) diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index bf42c06da..26e02febe 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -3,11 +3,11 @@ import ResizeObserver from 'rc-resize-observer'; import { useEvent } from 'rc-util'; import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; -import { formatValue } from '../../../utils/dateUtil'; -import type { OpenConfig, SelectorProps, SelectorRef } from '../../interface'; +import type { SelectorProps, SelectorRef } from '../../interface'; import PickerContext from '../context'; +import useInputProps from './hooks/useInputProps'; import Icon, { ClearIcon } from './Icon'; -import Input, { type InputProps, type InputRef } from './Input'; +import Input, { type InputRef } from './Input'; export type SelectorIdType = | string @@ -146,124 +146,16 @@ function RangeSelector( })); // ===================== Placeholder ====================== - const mergedPlaceholder = React.useMemo( + const mergedPlaceholder = React.useMemo<[string, string]>( () => (Array.isArray(placeholder) ? placeholder : [placeholder, placeholder]), [placeholder], ); - // ========================= Open ========================= - const triggerOpen = (nextOpen: boolean, index: number, config: OpenConfig = {}) => { - onOpenChange(nextOpen, { - ...config, - index, - }); - }; - - // ======================== Parser ======================== - const parseDate = (str: string, formatStr: string) => { - const parsed = generateConfig.locale.parse(locale.locale, str, [formatStr]); - return parsed && generateConfig.isValidate(parsed) ? parsed : null; - }; - - // ========================= Text ========================= - const firstFormat = format[0]; - - const getText = React.useCallback( - (date: DateType) => - formatValue(date, { - locale, - format: firstFormat, - generateConfig, - }), - [locale, generateConfig, firstFormat], - ); - - const valueTexts = React.useMemo(() => [getText(value[0]), getText(value[1])], [value, getText]); - - // ======================= Validate ======================= - const validateFormat = (text: string) => { - for (let i = 0; i < format.length; i += 1) { - const singleFormat = format[i]; - - // Only support string type - if (typeof singleFormat === 'string') { - const parsed = parseDate(text, singleFormat); - - if (parsed) { - return parsed; - } - } - } - - return false; - }; - // ======================== Inputs ======================== - const getInputProps = (index: number): InputProps => ({ - // ============== Shared ============== - format: maskFormat, - validateFormat: (text) => !!validateFormat(text), - changeOnBlur, - - readOnly: inputReadOnly, - - required, - 'aria-required': ariaRequired, - - // ============= By Index ============= - id: ids[index], - - value: valueTexts[index], - - invalid: invalid[index], - - placeholder: mergedPlaceholder[index], - - active: activeIndex === index, - - helped: allHelp || (activeHelp && activeIndex === index), - - disabled: disabled[index], - - onFocus: (event) => { - onFocus(event, index); - }, - onBlur: (event) => { - // Blur do not trigger close - // Since it may focus to the popup panel - onBlur(event, index); - }, - - onSubmit, - - // Get validate text value - onChange: (text) => { - onInputChange(); - - const parsed = validateFormat(text); - - if (parsed) { - onInvalid(false, index); - onChange(parsed, index); - return; - } - - // Tell outer that the value typed is invalid. - // If text is empty, it means valid. - onInvalid(!!text, index); - }, - onHelp: () => { - triggerOpen(true, index); - }, - onKeyDown: (event) => { - switch (event.key) { - case 'Escape': - triggerOpen(false, index); - break; - } - - onKeyDown?.(event); - }, + const getInputProps = useInputProps({ + ...props, + id: ids, + placeholder: mergedPlaceholder, }); // ====================== ActiveBar ======================= diff --git a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts index 6ea5a1b73..ae9d96205 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts +++ b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts @@ -165,12 +165,16 @@ export default function useInputProps( onInvalid(!!text, index); }, onHelp: () => { - onOpenChange(true); + onOpenChange(true, { + index, + }); }, onKeyDown: (event) => { switch (event.key) { case 'Escape': - onOpenChange(false); + onOpenChange(false, { + index, + }); break; } From 9c187e1c12a97bb772a91032a7b03fe0dc4effe5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 5 Dec 2023 17:39:46 +0800 Subject: [PATCH 203/380] chore: single selector --- .../PickerInput/Selector/RangeSelector.tsx | 4 +- .../PickerInput/Selector/SingleSelector.tsx | 125 ++---------------- 2 files changed, 10 insertions(+), 119 deletions(-) diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 26e02febe..04f50f8f9 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -42,7 +42,7 @@ export interface RangeSelectorProps extends SelectorProps void; } -function RangeSelector( +function RangeSelector( props: RangeSelectorProps, ref: React.Ref, ) { @@ -200,7 +200,7 @@ function RangeSelector( }, [activeIndex]); // ======================== Clear ========================= - const showClear = (clearIcon && value[0] && !disabled[0]) || (value[1] && !disabled[1]); + const showClear = clearIcon && ((value[0] && !disabled[0]) || (value[1] && !disabled[1])); // ======================== Render ======================== return ( diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector.tsx index 46d60e4f6..4259f7b6e 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector.tsx @@ -1,13 +1,14 @@ import classNames from 'classnames'; import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; -import { formatValue } from '../../../utils/dateUtil'; import type { SelectorProps, SelectorRef } from '../../interface'; import PickerContext from '../context'; +import useInputProps from './hooks/useInputProps'; import { ClearIcon } from './Icon'; -import Input, { type InputProps, type InputRef } from './Input'; +import Input, { type InputRef } from './Input'; -export interface SingleSelectorProps extends SelectorProps { +export interface SingleSelectorProps + extends SelectorProps { id?: string; value?: DateType; @@ -23,7 +24,7 @@ export interface SingleSelectorProps extends SelectorProps void; } -function SingleSelector( +function SingleSelector( props: SingleSelectorProps, ref: React.Ref, ) { @@ -32,7 +33,6 @@ function SingleSelector( clearIcon, suffixIcon, - activeIndex, activeHelp, allHelp, @@ -107,115 +107,11 @@ function SingleSelector( }, })); - // ======================== Parser ======================== - const parseDate = (str: string, formatStr: string) => { - const parsed = generateConfig.locale.parse(locale.locale, str, [formatStr]); - return parsed && generateConfig.isValidate(parsed) ? parsed : null; - }; - - // ========================= Text ========================= - const firstFormat = format[0]; - - const getText = React.useCallback( - (date: DateType) => - formatValue(date, { - locale, - format: firstFormat, - generateConfig, - }), - [locale, generateConfig, firstFormat], - ); - - const valueTexts = React.useMemo(() => [getText(value[0]), getText(value[1])], [value, getText]); - - // ======================= Validate ======================= - const validateFormat = (text: string) => { - for (let i = 0; i < format.length; i += 1) { - const singleFormat = format[i]; - - // Only support string type - if (typeof singleFormat === 'string') { - const parsed = parseDate(text, singleFormat); - - if (parsed) { - return parsed; - } - } - } - - return false; - }; - // ======================== Inputs ======================== - const getInputProps = (index: number): InputProps => ({ - // ============== Shared ============== - format: maskFormat, - validateFormat: (text) => !!validateFormat(text), - changeOnBlur, - - readOnly: inputReadOnly, - - required, - 'aria-required': ariaRequired, - - // ============= By Index ============= - id: ids[index], - - value: valueTexts[index], - - invalid: invalid[index], - - placeholder: (placeholder || [])[index], - - active: activeIndex === index, - - helped: allHelp || (activeHelp && activeIndex === index), - - disabled: disabled[index], - - onFocus: (event) => { - onFocus(event, index); - }, - onBlur: (event) => { - // Blur do not trigger close - // Since it may focus to the popup panel - onBlur(event, index); - }, - - onSubmit, - - // Get validate text value - onChange: (text) => { - onInputChange(); - - const parsed = validateFormat(text); - - if (parsed) { - onInvalid(index, false); - onChange(parsed, index); - return; - } - - // Tell outer that the value typed is invalid. - // If text is empty, it means valid. - onInvalid(index, !!text); - }, - onHelp: () => { - onOpenChange(true); - }, - onKeyDown: (event) => { - switch (event.key) { - case 'Escape': - onOpenChange(false); - break; - } - - onKeyDown?.(event); - }, - }); + const getInputProps = useInputProps(props); // ======================== Clear ========================= - const showClear = (clearIcon && value[0] && !disabled[0]) || (value[1] && !disabled[1]); + const showClear = clearIcon && value && !disabled; // ======================== Render ======================== return ( @@ -246,15 +142,10 @@ function SingleSelector( > } /> - - {/* - -
          - - */}
          ); } From 6828a117e997fbd043734b4d387d01b27ed459c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 5 Dec 2023 17:56:54 +0800 Subject: [PATCH 204/380] chore: tmp of it --- src/NewPicker/PickerInput/RangePicker.tsx | 1 - src/NewPicker/PickerInput/Selector/RangeSelector.tsx | 1 - src/NewPicker/PickerInput/Selector/SingleSelector.tsx | 1 - src/NewPicker/PickerInput/SinglePicker.tsx | 6 ++---- src/NewPicker/interface.tsx | 2 -- tests/__snapshots__/range.spec.tsx.snap | 1 + 6 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 7d8cbe811..8ab2abc1c 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -794,7 +794,6 @@ function RangePicker( // Disabled disabled={mergedDisabled} // Open - open={mergedOpen ? activeIndex : null} onOpenChange={triggerOpen} // Click onClick={onSelectorClick} diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 04f50f8f9..3c4ef0040 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -95,7 +95,6 @@ function RangeSelector( direction, // Open - open, onOpenChange, // Offset diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector.tsx index 4259f7b6e..ed2d8e629 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector.tsx @@ -75,7 +75,6 @@ function SingleSelector( direction, // Open - open, onOpenChange, // Native diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 9598217bd..bd4290785 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -37,7 +37,7 @@ import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; import useShowNow from './hooks/useShowNow'; import Popup from './Popup'; import { useClearIcon } from './Selector/hooks/useClearIcon'; -import RangeSelector from './Selector/RangeSelector'; +import SingleSelector from './Selector/SingleSelector'; export interface PickerProps extends SharedPickerProps { // Value @@ -177,7 +177,6 @@ function Picker( // ======================== Locale ======================== const filledLocale = useLocale(locale); - // ========================= Icon ========================= const mergedClearIcon = useClearIcon(prefixCls, allowClear, clearIcon); @@ -717,7 +716,7 @@ function Picker( // Range range > - ( // Disabled disabled={disabled} // Open - open={mergedOpen ? activeIndex : null} onOpenChange={triggerOpen} // Click onClick={onSelectorClick} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index d1c3f39b0..351071417 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -432,8 +432,6 @@ export interface SelectorProps extends SharedHTMLAttrs { changeOnBlur?: boolean; // Open - /** Open index */ - open: number; /** Trigger when need open by selector */ onOpenChange: OnOpenChange; diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap index 6248fc872..55314a873 100644 --- a/tests/__snapshots__/range.spec.tsx.snap +++ b/tests/__snapshots__/range.spec.tsx.snap @@ -96,6 +96,7 @@ exports[`Picker.Range panelRender 1`] = `
          Date: Tue, 5 Dec 2023 19:08:38 +0800 Subject: [PATCH 205/380] chore: tmp of it --- src/NewPicker/PickerInput/SinglePicker.tsx | 53 +------------------ .../PickerInput/hooks/useRangeDisabledDate.ts | 29 ++-------- 2 files changed, 5 insertions(+), 77 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index bd4290785..f525b91bd 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -2,15 +2,12 @@ import { useEvent, useMergedState } from 'rc-util'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import omit from 'rc-util/lib/omit'; import pickAttrs from 'rc-util/lib/pickAttrs'; -import warning from 'rc-util/lib/warning'; import * as React from 'react'; import useLocale from '../hooks/useLocale'; import useTimeConfig from '../hooks/useTimeConfig'; import type { BaseInfo, InternalMode, - OnOpenChange, - OpenConfig, PanelMode, PickerRef, SelectorProps, @@ -31,7 +28,6 @@ import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; import usePresets from './hooks/usePresets'; import useRangeActive from './hooks/useRangeActive'; -import useRangeDisabledDate from './hooks/useRangeDisabledDate'; import useRangePickerValue from './hooks/useRangePickerValue'; import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; import useShowNow from './hooks/useShowNow'; @@ -196,14 +192,7 @@ function Picker( // ========================= Open ========================= const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, onOpenChange); - - const triggerOpen: OnOpenChange = (nextOpen, config?: OpenConfig) => { - // No need to open if all disabled - if (disabled.some((fieldDisabled) => !fieldDisabled) || !nextOpen) { - setMergeOpen(nextOpen, config); - } - }; + const [mergedOpen, triggerOpen] = useOpen(open, defaultOpen, onOpenChange); // ======================== Picker ======================== /** Almost same as `picker`, but add `datetime` for `date` with `showTime` */ @@ -311,18 +300,6 @@ function Picker( isInvalidateDate, ); - // ===================== DisabledDate ===================== - const disabledDate = useRangeDisabledDate( - calendarValue, - disabled, - activeIndexList, - generateConfig, - filledLocale, - disabledBoundaryDate, - // minDate, - // maxDate, - ); - // ======================= Validate ======================= const [fieldsInvalidates, setFieldsInvalidates] = React.useState<[boolean, boolean]>([ false, @@ -350,11 +327,6 @@ function Picker( return false; } - // Not allow empty - if (!mergedAllowEmpty[index] && !current) { - return true; - } - // Invalidate if (current && isInvalidateDate(current)) { return true; @@ -675,29 +647,6 @@ function Picker( } }, [mergedOpen]); - // ====================== DevWarning ====================== - if (process.env.NODE_ENV !== 'production') { - const isIndexEmpty = (index: number) => { - return ( - // Value is empty - !value?.[index] && - // DefaultValue is empty - !defaultValue?.[index] - ); - }; - - if ( - disabled.some( - (fieldDisabled, index) => fieldDisabled && isIndexEmpty(index) && !mergedAllowEmpty[index], - ) - ) { - warning( - false, - '`disabled` should not set with empty `value`. You should set `allowEmpty` or `value` instead.', - ); - } - } - // ======================== Render ======================== return ( diff --git a/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts b/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts index 04aaa681d..1c3e04cb4 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts @@ -3,6 +3,10 @@ import { isSame } from '../../../utils/dateUtil'; import type { DisabledDate, Locale } from '../../interface'; import type { RangeValueType } from '../RangePicker'; +/** + * RangePicker need additional logic to handle the `disabled` case. e.g. + * [disabled, enabled] should end date not before start date + */ export default function useRangeDisabledDate( values: RangeValueType, disabled: [boolean, boolean], @@ -49,31 +53,6 @@ export default function useRangeDisabledDate( return true; } - // =========================== Min or Max =========================== - // const limitInfo = { - // from: activeIndex !== firstValuedIndex ? values[firstValuedIndex] : undefined, - // }; - // const mergedMinDate = typeof minDate === 'function' ? minDate(limitInfo) : minDate; - // const mergedMaxDate = typeof maxDate === 'function' ? maxDate(limitInfo) : maxDate; - - // if ( - // mergedMinDate && - // generateConfig.isAfter(mergedMinDate, date) && - // !isSame(generateConfig, locale, mergedMinDate, date, info.type) - // ) { - // return true; - // } - - // if ( - // mergedMaxDate && - // generateConfig.isAfter(date, mergedMaxDate) && - // !isSame(generateConfig, locale, mergedMaxDate, date, info.type) - // ) { - // return true; - // } - - // TODO: Select Range then select the date after end date - // ============================= Origin ============================= return disabledDate?.(date, mergedInfo); }; From 706040b4fab19ac89310b6b0b492a05c9c658ce0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 10:05:25 +0800 Subject: [PATCH 206/380] chore: tmp of it --- src/NewPicker/PickerInput/SinglePicker.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index f525b91bd..7091b6391 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -364,7 +364,7 @@ function Picker( // Compatible with `onPanelChange` if (onPanelChange && triggerEvent !== false) { - const clonePickerValue: RangeValueType = [...calendarValue]; + const clonePickerValue: DateType = [...calendarValue]; if (nextPickerValue) { clonePickerValue[activeIndex] = nextPickerValue; } @@ -429,7 +429,7 @@ function Picker( // ======================== Hover ========================= const [hoverSource, setHoverSource] = React.useState<'cell' | 'preset'>(null); const [internalHoverValues, setInternalHoverValues] = - React.useState>(null); + React.useState(null); const hoverValues = React.useMemo(() => { return internalHoverValues || calendarValue; @@ -450,12 +450,12 @@ function Picker( // ======================= Presets ======================== const presetList = usePresets(presets, ranges); - const onPresetHover = (nextValues: RangeValueType | null) => { + const onPresetHover = (nextValues: DateType | null) => { setInternalHoverValues(nextValues); setHoverSource('preset'); }; - const onPresetSubmit = (nextValues: RangeValueType) => { + const onPresetSubmit = (nextValues: DateType) => { const passed = triggerSubmitChange(nextValues); if (passed) { @@ -479,7 +479,7 @@ function Picker( const onPanelCalendarChange: PickerPanelProps['onChange'] = (date) => { lastOperation('panel'); - const clone: RangeValueType = fillIndex(calendarValue, activeIndex, date); + const clone: DateType = fillIndex(calendarValue, activeIndex, date); // Only trigger calendar event but not update internal `calendarValue` state triggerCalendarChange(clone); @@ -531,10 +531,6 @@ function Picker( {...panelProps} showNow={mergedShowNow} showTime={mergedShowTime} - // Range - range - multiple={multiplePanel} - activeOffset={activeOffset} // Disabled disabledDate={disabledDate} // Focus @@ -662,8 +658,6 @@ function Picker( // Visible visible={mergedOpen} onClose={onPopupClose} - // Range - range > Date: Wed, 6 Dec 2023 10:53:44 +0800 Subject: [PATCH 207/380] chore: tmp of it --- src/NewPicker/PickerInput/SinglePicker.tsx | 5 +- .../PickerInput/hooks/useFlexibleValue.ts | 275 ++++++++++++++++++ .../PickerInput/hooks/useRangeValue.ts | 61 ++-- 3 files changed, 319 insertions(+), 22 deletions(-) create mode 100644 src/NewPicker/PickerInput/hooks/useFlexibleValue.ts diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 7091b6391..f8f26fc62 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -29,8 +29,8 @@ import useOpen from './hooks/useOpen'; import usePresets from './hooks/usePresets'; import useRangeActive from './hooks/useRangeActive'; import useRangePickerValue from './hooks/useRangePickerValue'; -import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; import useShowNow from './hooks/useShowNow'; +import useRangeValue, { useInnerValue } from './hooks/useFlexibleValue'; import Popup from './Popup'; import { useClearIcon } from './Selector/hooks/useClearIcon'; import SingleSelector from './Selector/SingleSelector'; @@ -428,8 +428,7 @@ function Picker( // ======================== Hover ========================= const [hoverSource, setHoverSource] = React.useState<'cell' | 'preset'>(null); - const [internalHoverValues, setInternalHoverValues] = - React.useState(null); + const [internalHoverValues, setInternalHoverValues] = React.useState(null); const hoverValues = React.useMemo(() => { return internalHoverValues || calendarValue; diff --git a/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts b/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts new file mode 100644 index 000000000..6271de6ad --- /dev/null +++ b/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts @@ -0,0 +1,275 @@ +import { useEvent, useMergedState } from 'rc-util'; +import * as React from 'react'; +import type { GenerateConfig } from '../../../generate'; +import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; +import useSyncState from '../../hooks/useSyncState'; +import type { FormatType, Locale } from '../../interface'; +import { fillIndex } from '../../util'; +import type { RangePickerProps } from '../RangePicker'; +import useLockEffect from './useLockEffect'; +import { useCalendarValue } from './useRangeValue'; + +const EMPTY_VALUE: any[] = []; + +// Single Value is similar to Range Value, but it's more simple. +// This is design to support single value or multiple value, +// Thus this hook reuse part of the util from `useRangeValue`. + +type TriggerCalendarChange = ([start, end]: DateType) => void; + +function useUtil( + generateConfig: GenerateConfig, + locale: Locale, + formatList: FormatType[], +) { + const getDateTexts = ([start, end]: DateType) => { + return [start, end].map((date) => + formatValue(date, { generateConfig, locale, format: formatList[0] }), + ) as [string, string]; + }; + + const isSameDates = (source: DateType, target: DateType) => { + const [prevStart = null, prevEnd = null] = source; + const [nextStart = null, nextEnd = null] = target; + + const isSameStart = + prevStart === nextStart || isSameTimestamp(generateConfig, prevStart, nextStart); + const isSameEnd = prevEnd === nextEnd || isSameTimestamp(generateConfig, prevEnd, nextEnd); + + return [isSameStart && isSameEnd, isSameStart, isSameEnd]; + }; + + return [getDateTexts, isSameDates] as const; +} + +export function useInnerValue( + generateConfig: GenerateConfig, + locale: Locale, + formatList: FormatType[], + defaultValue?: DateType, + value?: DateType, + onCalendarChange?: RangePickerProps['onCalendarChange'], +) { + // This is the root value which will sync with controlled or uncontrolled value + const [innerValue, setInnerValue] = useMergedState(defaultValue, { + value, + }); + const mergedValue = React.useMemo(() => { + const filledValue = innerValue || EMPTY_VALUE; + + return Array.isArray(filledValue) ? filledValue : [filledValue]; + }, [innerValue]); + + // ========================= Inner Values ========================= + const [calendarValue, setCalendarValue] = useCalendarValue(mergedValue); + + // ============================ Change ============================ + const [getDateTexts, isSameDates] = useUtil(generateConfig, locale, formatList); + + const triggerCalendarChange: TriggerCalendarChange = useEvent(([start, end]) => { + const clone: DateType = [start, end]; + + // Update merged value + const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone); + + if (!isSameMergedDates) { + setCalendarValue(clone); + + // Trigger calendar change event + if (onCalendarChange) { + onCalendarChange(clone, getDateTexts(clone), { + range: isSameStart ? 'end' : 'start', + }); + } + } + }); + + return [mergedValue, setInnerValue, calendarValue, triggerCalendarChange] as const; +} + +export default function useFlexibleValue( + info: Pick< + RangePickerProps, + | 'generateConfig' + | 'locale' + | 'allowEmpty' + | 'order' + | 'onCalendarChange' + | 'onChange' + | 'picker' + >, + mergedValue: DateType, + setInnerValue: (nextValue: DateType) => void, + getCalendarValue: () => DateType, + triggerCalendarChange: TriggerCalendarChange, + disabled: [boolean, boolean], + formatList: FormatType[], + focused: boolean, + open: boolean, + isInvalidateDate: (date: DateType) => boolean, +): [ + /** Trigger `onChange` by check `disabledDate` */ + flushSubmit: (index: number, needTriggerChange: boolean) => void, + /** Trigger `onChange` directly without check `disabledDate` */ + triggerSubmitChange: (value: DateType) => boolean, +] { + const { + // MISC + generateConfig, + locale, + + picker, + + onChange, + + // Checker + allowEmpty, + order, + } = info; + + const orderOnChange = disabled.some((d) => d) ? false : order; + + // ============================= Util ============================= + const getDateTexts = ([start, end]: DateType) => { + return [start, end].map((date) => + formatValue(date, { generateConfig, locale, format: formatList[0] }), + ) as [string, string]; + }; + + const isSameDates = (source: DateType, target: DateType) => { + const [prevStart = null, prevEnd = null] = source; + const [nextStart = null, nextEnd = null] = target; + + const isSameStart = + prevStart === nextStart || isSameTimestamp(generateConfig, prevStart, nextStart); + const isSameEnd = prevEnd === nextEnd || isSameTimestamp(generateConfig, prevEnd, nextEnd); + + return [isSameStart && isSameEnd, isSameStart, isSameEnd]; + }; + + // ============================ Values ============================ + // Used for trigger `onChange` event. + // Record current value which is wait for submit. + const [submitValue, setSubmitValue] = useSyncState(mergedValue); + + /** Sync calendarValue & submitValue back with value */ + const syncWithValue = useEvent(() => { + setSubmitValue(mergedValue); + }); + + React.useEffect(() => { + syncWithValue(); + }, [mergedValue]); + + // ============================ Submit ============================ + const triggerSubmit = useEvent((nextValue?: DateType) => { + const isNullValue = nextValue === null; + + const clone: DateType = [...(nextValue || submitValue())]; + + // Fill null value + if (isNullValue) { + disabled.forEach((fieldDisabled, index) => { + if (!fieldDisabled) { + clone[index] = null; + } + }); + } + + // Only when exist value to sort + if (orderOnChange && clone[0] && clone[1]) { + clone.sort((a, b) => (generateConfig.isAfter(a, b) ? 1 : -1)); + } + + // Sync `calendarValue` + triggerCalendarChange(clone); + + // ========= Validate check ========= + const [start, end] = clone; + + // >>> Empty + const startEmpty = !start; + const endEmpty = !end; + + const validateEmptyDateRange = + // Validate empty start + (!startEmpty || allowEmpty[0]) && + // Validate empty end + (!endEmpty || allowEmpty[1]); + + // >>> Order + const validateOrder = + !order || + startEmpty || + endEmpty || + isSame(generateConfig, locale, start, end, picker) || + generateConfig.isAfter(end, start); + + // >>> Invalid + const validateDates = + // Validate start + (!start || !isInvalidateDate(start)) && + // Validate end + (!end || !isInvalidateDate(end, { from: start })); + + // >>> Result + const allPassed = + // Null value is from clear button + isNullValue || + // Normal check + (validateEmptyDateRange && validateOrder && validateDates); + + if (allPassed) { + // Sync value with submit value + setInnerValue(clone); + + const [isSameMergedDates] = isSameDates(clone, mergedValue); + + // Trigger `onChange` if needed + if (onChange && !isSameMergedDates) { + onChange( + // Return null directly if all date are empty + isNullValue && clone.every((val) => !val) ? null : clone, + getDateTexts(clone), + ); + } + } + + return allPassed; + }); + + // ========================= Flush Submit ========================= + const flushSubmit = useEvent((index: number, needTriggerChange: boolean) => { + const nextSubmitValue = fillIndex(submitValue(), index, getCalendarValue()[index]); + setSubmitValue(nextSubmitValue); + + if (needTriggerChange) { + triggerSubmit(); + } + }); + + // ============================ Effect ============================ + // All finished action trigger after 2 frames + const interactiveFinished = !focused && !open; + + useLockEffect( + !interactiveFinished, + () => { + if (interactiveFinished) { + // Always try to trigger submit first + triggerSubmit(); + + // Trigger calendar change since this is a effect reset + // https://github.com/ant-design/ant-design/issues/22351 + triggerCalendarChange(mergedValue); + + // Sync with value anyway + syncWithValue(); + } + }, + 2, + ); + + // ============================ Return ============================ + return [flushSubmit, triggerSubmit]; +} diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 518ef1ed6..5aa13c4c2 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -33,18 +33,30 @@ const EMPTY_VALUE: [null, null] = [null, null]; type TriggerCalendarChange = ([start, end]: RangeValueType) => void; -function useUtil( - generateConfig: GenerateConfig, - locale: Locale, - formatList: FormatType[], -) { +function useUtil< + DateType extends object = any, + MergedValueType extends DateType[] = RangeValueType, +>(generateConfig: GenerateConfig, locale: Locale, formatList: FormatType[]) { const getDateTexts = ([start, end]: RangeValueType) => { return [start, end].map((date) => formatValue(date, { generateConfig, locale, format: formatList[0] }), ) as [string, string]; }; - const isSameDates = (source: RangeValueType, target: RangeValueType) => { + const isSameDates = (source: MergedValueType, target: MergedValueType) => { + const maxLen = Math.max(source.length, target.length); + let diffIndex = -1; + + // for (let i = 0; i < maxLen; i += 1) { + // const prev = source[i] || null; + // const next = target[i] || null; + + // if (prev !== next && !isSameTimestamp(generateConfig, prev, next)) { + // diffIndex = i; + // break; + // } + // } + const [prevStart = null, prevEnd = null] = source; const [nextStart = null, nextEnd = null] = target; @@ -58,6 +70,28 @@ function useUtil( return [getDateTexts, isSameDates] as const; } +/** + * Used for internal value management. + * It should always use `mergedValue` in render logic + */ +export function useCalendarValue< + DateType extends object = any, + MergedValueType extends DateType[] = RangeValueType, +>(mergedValue: MergedValueType) { + const [calendarValue, setCalendarValue] = useSyncState(mergedValue); + + /** Sync calendarValue & submitValue back with value */ + const syncWithValue = useEvent(() => { + setCalendarValue(mergedValue); + }); + + React.useEffect(() => { + syncWithValue(); + }, [mergedValue]); + + return [calendarValue, setCalendarValue] as const; +} + export function useInnerValue( generateConfig: GenerateConfig, locale: Locale, @@ -73,18 +107,7 @@ export function useInnerValue( const mergedValue = innerValue || EMPTY_VALUE; // ========================= Inner Values ========================= - // Used for internal value management. - // It should always use `mergedValue` in render logic - const [calendarValue, setCalendarValue] = useSyncState(mergedValue); - - /** Sync calendarValue & submitValue back with value */ - const syncWithValue = useEvent(() => { - setCalendarValue(mergedValue); - }); - - React.useEffect(() => { - syncWithValue(); - }, [mergedValue]); + const [calendarValue, setCalendarValue] = useCalendarValue(mergedValue); // ============================ Change ============================ const [getDateTexts, isSameDates] = useUtil(generateConfig, locale, formatList); @@ -129,7 +152,7 @@ export default function useRangeValue( formatList: FormatType[], focused: boolean, open: boolean, - isInvalidateDate: (date: DateType) => boolean, + isInvalidateDate: (date: DateType, info?: { from?: DateType }) => boolean, ): [ /** Trigger `onChange` by check `disabledDate` */ flushSubmit: (index: number, needTriggerChange: boolean) => void, From 3cb73c9fbca5c8ad54730769c63cdae0f5a7c681 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 11:03:21 +0800 Subject: [PATCH 208/380] refactor: generic of useUtil --- .../PickerInput/hooks/useRangeValue.ts | 25 +++++++------------ 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 5aa13c4c2..ed1be3c60 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -47,24 +47,17 @@ function useUtil< const maxLen = Math.max(source.length, target.length); let diffIndex = -1; - // for (let i = 0; i < maxLen; i += 1) { - // const prev = source[i] || null; - // const next = target[i] || null; + for (let i = 0; i < maxLen; i += 1) { + const prev = source[i] || null; + const next = target[i] || null; - // if (prev !== next && !isSameTimestamp(generateConfig, prev, next)) { - // diffIndex = i; - // break; - // } - // } - - const [prevStart = null, prevEnd = null] = source; - const [nextStart = null, nextEnd = null] = target; - - const isSameStart = - prevStart === nextStart || isSameTimestamp(generateConfig, prevStart, nextStart); - const isSameEnd = prevEnd === nextEnd || isSameTimestamp(generateConfig, prevEnd, nextEnd); + if (prev !== next && !isSameTimestamp(generateConfig, prev, next)) { + diffIndex = i; + break; + } + } - return [isSameStart && isSameEnd, isSameStart, isSameEnd]; + return [diffIndex < 0, diffIndex !== 0]; }; return [getDateTexts, isSameDates] as const; From d1f76519b08bf5bbcd51cdbac0e957363ade4c4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 11:36:08 +0800 Subject: [PATCH 209/380] refactor: generic of SinglePicker --- src/NewPicker/PickerInput/SinglePicker.tsx | 32 +++++++++++---- .../PickerInput/hooks/useFlexibleValue.ts | 39 +++++-------------- .../PickerInput/hooks/useRangeValue.ts | 2 +- 3 files changed, 34 insertions(+), 39 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index f8f26fc62..5fb45abf3 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -23,6 +23,7 @@ import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; import useDisabledBoundary from './hooks/useDisabledBoundary'; import { useFieldFormat } from './hooks/useFieldFormat'; +import useRangeValue, { useInnerValue } from './hooks/useFlexibleValue'; import useInputReadOnly from './hooks/useInputReadOnly'; import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; @@ -30,18 +31,11 @@ import usePresets from './hooks/usePresets'; import useRangeActive from './hooks/useRangeActive'; import useRangePickerValue from './hooks/useRangePickerValue'; import useShowNow from './hooks/useShowNow'; -import useRangeValue, { useInnerValue } from './hooks/useFlexibleValue'; import Popup from './Popup'; import { useClearIcon } from './Selector/hooks/useClearIcon'; import SingleSelector from './Selector/SingleSelector'; -export interface PickerProps extends SharedPickerProps { - // Value - value?: DateType; - defaultValue?: DateType; - onChange?: (date: DateType, dateString: string) => void; - onCalendarChange?: (date: DateType, dateString: string, info: BaseInfo) => void; - +export interface BasePickerProps extends SharedPickerProps { // Placeholder placeholder?: string; @@ -81,6 +75,28 @@ export interface PickerProps extends SharedPickerProps< onPanelChange?: (values: DateType, modes: PanelMode) => void; } +export interface SinglePickerProps extends SharedPickerProps { + // Value + value?: DateType; + defaultValue?: DateType; + onChange?: (date: DateType, dateString: string) => void; + onCalendarChange?: (date: DateType, dateString: string, info: BaseInfo) => void; +} + +export interface MultiplePickerProps extends SharedPickerProps { + multiple: true; + + // Value + value?: DateType[]; + defaultValue?: DateType[]; + onChange?: (date: DateType[], dateString: string[]) => void; + onCalendarChange?: (date: DateType[], dateString: string[], info: BaseInfo) => void; +} + +export type PickerProps = + | SinglePickerProps + | MultiplePickerProps; + function Picker( props: PickerProps, ref: React.Ref, diff --git a/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts b/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts index 6271de6ad..cf0811832 100644 --- a/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts +++ b/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts @@ -7,7 +7,7 @@ import type { FormatType, Locale } from '../../interface'; import { fillIndex } from '../../util'; import type { RangePickerProps } from '../RangePicker'; import useLockEffect from './useLockEffect'; -import { useCalendarValue } from './useRangeValue'; +import { useCalendarValue, useUtil } from './useRangeValue'; const EMPTY_VALUE: any[] = []; @@ -15,32 +15,7 @@ const EMPTY_VALUE: any[] = []; // This is design to support single value or multiple value, // Thus this hook reuse part of the util from `useRangeValue`. -type TriggerCalendarChange = ([start, end]: DateType) => void; - -function useUtil( - generateConfig: GenerateConfig, - locale: Locale, - formatList: FormatType[], -) { - const getDateTexts = ([start, end]: DateType) => { - return [start, end].map((date) => - formatValue(date, { generateConfig, locale, format: formatList[0] }), - ) as [string, string]; - }; - - const isSameDates = (source: DateType, target: DateType) => { - const [prevStart = null, prevEnd = null] = source; - const [nextStart = null, nextEnd = null] = target; - - const isSameStart = - prevStart === nextStart || isSameTimestamp(generateConfig, prevStart, nextStart); - const isSameEnd = prevEnd === nextEnd || isSameTimestamp(generateConfig, prevEnd, nextEnd); - - return [isSameStart && isSameEnd, isSameStart, isSameEnd]; - }; - - return [getDateTexts, isSameDates] as const; -} +type TriggerCalendarChange = (dates: DateType[]) => void; export function useInnerValue( generateConfig: GenerateConfig, @@ -64,10 +39,14 @@ export function useInnerValue( const [calendarValue, setCalendarValue] = useCalendarValue(mergedValue); // ============================ Change ============================ - const [getDateTexts, isSameDates] = useUtil(generateConfig, locale, formatList); + const [getDateTexts, isSameDates] = useUtil( + generateConfig, + locale, + formatList, + ); - const triggerCalendarChange: TriggerCalendarChange = useEvent(([start, end]) => { - const clone: DateType = [start, end]; + const triggerCalendarChange: TriggerCalendarChange = useEvent((dates) => { + const clone: DateType[] = [...dates]; // Update merged value const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone); diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index ed1be3c60..998bd053a 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -33,7 +33,7 @@ const EMPTY_VALUE: [null, null] = [null, null]; type TriggerCalendarChange = ([start, end]: RangeValueType) => void; -function useUtil< +export function useUtil< DateType extends object = any, MergedValueType extends DateType[] = RangeValueType, >(generateConfig: GenerateConfig, locale: Locale, formatList: FormatType[]) { From 6425fbfec1aeef0ebe24451e838ce71cf223e04b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 11:43:03 +0800 Subject: [PATCH 210/380] chore: tmp of it --- src/NewPicker/PickerInput/RangePicker.tsx | 14 ++------------ src/NewPicker/PickerInput/SinglePicker.tsx | 18 ++++-------------- .../PickerInput/hooks/usePickerRef.ts | 18 ++++++++++++++++++ 3 files changed, 24 insertions(+), 26 deletions(-) create mode 100644 src/NewPicker/PickerInput/hooks/usePickerRef.ts diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 8ab2abc1c..ed9d5e74f 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -15,7 +15,6 @@ import type { PickerRef, RangeTimeProps, SelectorProps, - SelectorRef, SharedHTMLAttrs, SharedPickerProps, ValueDate, @@ -30,6 +29,7 @@ import { useFieldFormat } from './hooks/useFieldFormat'; import useInputReadOnly from './hooks/useInputReadOnly'; import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; +import { usePickerRef } from './hooks/usePickerRef'; import usePresets from './hooks/usePresets'; import useRangeActive from './hooks/useRangeActive'; import useRangeDisabledDate from './hooks/useRangeDisabledDate'; @@ -206,17 +206,7 @@ function RangePicker( } = props; // ========================= Refs ========================= - const selectorRef = React.useRef(); - - React.useImperativeHandle(ref, () => ({ - nativeElement: selectorRef.current?.nativeElement, - focus: () => { - selectorRef.current?.focus(); - }, - blur: () => { - selectorRef.current?.blur(); - }, - })); + const selectorRef = usePickerRef(ref); // ======================== Locale ======================== const filledLocale = useLocale(locale); diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 5fb45abf3..d1ceab57a 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -11,7 +11,6 @@ import type { PanelMode, PickerRef, SelectorProps, - SelectorRef, SharedHTMLAttrs, SharedPickerProps, ValueDate, @@ -27,6 +26,7 @@ import useRangeValue, { useInnerValue } from './hooks/useFlexibleValue'; import useInputReadOnly from './hooks/useInputReadOnly'; import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; +import { usePickerRef } from './hooks/usePickerRef'; import usePresets from './hooks/usePresets'; import useRangeActive from './hooks/useRangeActive'; import useRangePickerValue from './hooks/useRangePickerValue'; @@ -75,7 +75,7 @@ export interface BasePickerProps extends SharedPickerPr onPanelChange?: (values: DateType, modes: PanelMode) => void; } -export interface SinglePickerProps extends SharedPickerProps { +export interface SinglePickerProps extends BasePickerProps { // Value value?: DateType; defaultValue?: DateType; @@ -83,7 +83,7 @@ export interface SinglePickerProps extends SharedPicker onCalendarChange?: (date: DateType, dateString: string, info: BaseInfo) => void; } -export interface MultiplePickerProps extends SharedPickerProps { +export interface MultiplePickerProps extends BasePickerProps { multiple: true; // Value @@ -174,17 +174,7 @@ function Picker( } = props; // ========================= Refs ========================= - const selectorRef = React.useRef(); - - React.useImperativeHandle(ref, () => ({ - nativeElement: selectorRef.current?.nativeElement, - focus: () => { - selectorRef.current?.focus(); - }, - blur: () => { - selectorRef.current?.blur(); - }, - })); + const selectorRef = usePickerRef(ref); // ======================== Locale ======================== const filledLocale = useLocale(locale); diff --git a/src/NewPicker/PickerInput/hooks/usePickerRef.ts b/src/NewPicker/PickerInput/hooks/usePickerRef.ts new file mode 100644 index 000000000..eafc1789c --- /dev/null +++ b/src/NewPicker/PickerInput/hooks/usePickerRef.ts @@ -0,0 +1,18 @@ +import * as React from 'react'; +import type { PickerRef, SelectorRef } from '../../interface'; + +export function usePickerRef(ref: React.Ref) { + const selectorRef = React.useRef(); + + React.useImperativeHandle(ref, () => ({ + nativeElement: selectorRef.current?.nativeElement, + focus: () => { + selectorRef.current?.focus(); + }, + blur: () => { + selectorRef.current?.blur(); + }, + })); + + return selectorRef; +} From 42e6fbe0edc9aea3bd3cbb87faaaa3d923e4182f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 11:55:34 +0800 Subject: [PATCH 211/380] chore: merge filled logic --- src/NewPicker/PickerInput/RangePicker.tsx | 15 +++++-------- .../PickerInput/hooks/useFilledProps.ts | 22 +++++++++++++++++++ 2 files changed, 27 insertions(+), 10 deletions(-) create mode 100644 src/NewPicker/PickerInput/hooks/useFilledProps.ts diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index ed9d5e74f..ffb23cd58 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -26,6 +26,7 @@ import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; import useDisabledBoundary from './hooks/useDisabledBoundary'; import { useFieldFormat } from './hooks/useFieldFormat'; +import useFilledProps from './hooks/useFilledProps'; import useInputReadOnly from './hooks/useInputReadOnly'; import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; @@ -219,16 +220,10 @@ function RangePicker( const mergedClearIcon = useClearIcon(prefixCls, allowClear, clearIcon); // ========================= Prop ========================= - const filledProps = React.useMemo( - () => ({ - ...props, - locale: filledLocale, - allowEmpty: mergedAllowEmpty, - order, - picker, - }), - [props], - ); + const filledProps = useFilledProps(props, { + allowEmpty: mergedAllowEmpty, + order, + }); // ======================= ShowTime ======================= const mergedShowTime = useTimeConfig(filledProps); diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts new file mode 100644 index 000000000..6e2bd005c --- /dev/null +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -0,0 +1,22 @@ +import * as React from 'react'; +import useLocale from '../../hooks/useLocale'; +import type { Locale, PickerMode } from '../../interface'; + +export default function useFilledProps( + props: T, + additionalProps?: Partial, +): T { + const { locale, picker = 'date' } = props; + + const filledLocale = useLocale(locale); + + return React.useMemo( + () => ({ + ...props, + locale: filledLocale, + picker, + ...additionalProps, + }), + [props], + ); +} From c0bc3e50938ac3e307ca8001de50b286ef128c8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 14:12:52 +0800 Subject: [PATCH 212/380] refactor: more hooks --- src/NewPicker/PickerInput/RangePicker.tsx | 70 +++++++++---------- .../PickerInput/hooks/useFilledProps.ts | 37 +++++++--- 2 files changed, 63 insertions(+), 44 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index ffb23cd58..f1d9d12e7 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -4,7 +4,6 @@ import omit from 'rc-util/lib/omit'; import pickAttrs from 'rc-util/lib/pickAttrs'; import warning from 'rc-util/lib/warning'; import * as React from 'react'; -import useLocale from '../hooks/useLocale'; import useTimeConfig from '../hooks/useTimeConfig'; import type { BaseInfo, @@ -131,16 +130,28 @@ function RangePicker( props: RangePickerProps, ref: React.Ref, ) { + // ========================= Prop ========================= + const filledProps = useFilledProps(props, () => { + const { disabled, allowEmpty } = props; + + const mergedDisabled = separateConfig(disabled, false); + const mergedAllowEmpty = separateConfig(allowEmpty, false); + + return { + disabled: mergedDisabled, + allowEmpty: mergedAllowEmpty, + }; + }); + const { // Style - prefixCls = 'rc-picker', - styles = {}, - classNames = {}, + prefixCls, + styles, + classNames, // Value defaultValue, value, - order = true, needConfirm, // Disabled @@ -160,7 +171,7 @@ function RangePicker( // Picker locale, generateConfig, - picker = 'date', + picker, showNow, showToday, @@ -197,34 +208,21 @@ function RangePicker( clearIcon, // Render - components = {}, + components, cellRender, dateRender, monthCellRender, // Native onClick, - } = props; + } = filledProps; // ========================= Refs ========================= const selectorRef = usePickerRef(ref); - // ======================== Locale ======================== - const filledLocale = useLocale(locale); - - // =================== Disabled & Empty =================== - const mergedDisabled = separateConfig(disabled, false); - const mergedAllowEmpty = separateConfig(allowEmpty, false); - // ========================= Icon ========================= const mergedClearIcon = useClearIcon(prefixCls, allowClear, clearIcon); - // ========================= Prop ========================= - const filledProps = useFilledProps(props, { - allowEmpty: mergedAllowEmpty, - order, - }); - // ======================= ShowTime ======================= const mergedShowTime = useTimeConfig(filledProps); @@ -235,7 +233,7 @@ function RangePicker( const triggerOpen: OnOpenChange = (nextOpen, config?: OpenConfig) => { // No need to open if all disabled - if (mergedDisabled.some((fieldDisabled) => !fieldDisabled) || !nextOpen) { + if (disabled.some((fieldDisabled) => !fieldDisabled) || !nextOpen) { setMergeOpen(nextOpen, config); } }; @@ -249,7 +247,7 @@ function RangePicker( const mergedNeedConfirm = needConfirm ?? complexPicker; // ======================== Format ======================== - const [formatList, maskFormat] = useFieldFormat(internalPicker, filledLocale, format); + const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format); // ======================== Values ======================== const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange] = useInnerValue( @@ -272,7 +270,7 @@ function RangePicker( lastOperation, nextActiveIndex, activeIndexList, - ] = useRangeActive(mergedOpen, mergedDisabled, mergedAllowEmpty); + ] = useRangeActive(mergedOpen, disabled, allowEmpty); const onSharedFocus = (event: React.FocusEvent, index?: number) => { triggerFocus(true); @@ -339,7 +337,7 @@ function RangePicker( setInnerValue, getCalendarValue, triggerCalendarChange, - mergedDisabled, + disabled, formatList, focused, mergedOpen, @@ -349,10 +347,10 @@ function RangePicker( // ===================== DisabledDate ===================== const mergedDisabledDate = useRangeDisabledDate( calendarValue, - mergedDisabled, + disabled, activeIndexList, generateConfig, - filledLocale, + locale, disabledBoundaryDate, // minDate, // maxDate, @@ -386,7 +384,7 @@ function RangePicker( } // Not allow empty - if (!mergedAllowEmpty[index] && !current) { + if (!allowEmpty[index] && !current) { return true; } @@ -397,12 +395,12 @@ function RangePicker( return false; }) as [boolean, boolean]; - }, [calendarValue, fieldsInvalidates, isInvalidateDate, mergedAllowEmpty]); + }, [calendarValue, fieldsInvalidates, isInvalidateDate, allowEmpty]); // ===================== Picker Value ===================== const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue( generateConfig, - filledLocale, + locale, calendarValue, mergedOpen, activeIndex, @@ -473,7 +471,7 @@ function RangePicker( const onSelectorClick: React.MouseEventHandler = (event) => { if (!selectorRef.current.nativeElement.contains(document.activeElement)) { // Click to focus the enabled input - const enabledIndex = mergedDisabled.findIndex((d) => !d); + const enabledIndex = disabled.findIndex((d) => !d); if (enabledIndex >= 0) { selectorRef.current.focus(enabledIndex); } @@ -675,12 +673,12 @@ function RangePicker( const context = React.useMemo( () => ({ prefixCls, - locale: filledLocale, + locale, generateConfig, button: components.button, input: components.input, }), - [prefixCls, filledLocale, generateConfig, components.button, components.input], + [prefixCls, locale, generateConfig, components.button, components.input], ); // ======================== Effect ======================== @@ -722,8 +720,8 @@ function RangePicker( }; if ( - mergedDisabled.some( - (fieldDisabled, index) => fieldDisabled && isIndexEmpty(index) && !mergedAllowEmpty[index], + disabled.some( + (fieldDisabled, index) => fieldDisabled && isIndexEmpty(index) && !allowEmpty[index], ) ) { warning( @@ -777,7 +775,7 @@ function RangePicker( format={formatList} inputReadOnly={mergedInputReadOnly} // Disabled - disabled={mergedDisabled} + disabled={disabled} // Open onOpenChange={triggerOpen} // Click diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 6e2bd005c..0bd6edeb7 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -1,22 +1,43 @@ import * as React from 'react'; import useLocale from '../../hooks/useLocale'; -import type { Locale, PickerMode } from '../../interface'; +import type { RangePickerProps } from '../RangePicker'; -export default function useFilledProps( - props: T, - additionalProps?: Partial, -): T { - const { locale, picker = 'date' } = props; +type PickedProps = Pick< + RangePickerProps, + 'locale' | 'picker' | 'prefixCls' | 'styles' | 'classNames' | 'order' | 'components' +>; + +export default function useFilledProps< + DateType extends object = any, + InProps extends PickedProps = PickedProps, + UpdaterProps = any, +>(props: InProps, updater?: () => UpdaterProps): Omit & UpdaterProps { + const { + locale, + picker = 'date', + prefixCls = 'rc-picker', + styles = {}, + classNames = {}, + order = true, + components = {}, + } = props; const filledLocale = useLocale(locale); - return React.useMemo( + const filledProps = React.useMemo( () => ({ ...props, + prefixCls, locale: filledLocale, picker, - ...additionalProps, + styles, + classNames, + order, + components, + ...updater?.(), }), [props], ); + + return filledProps; } From 8365a397ba02ef46102385ca7d66582e8a797f65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 14:15:16 +0800 Subject: [PATCH 213/380] chore: comment it --- src/NewPicker/PickerInput/SinglePicker.tsx | 38 +++++++------------ .../PickerInput/hooks/useFilledProps.ts | 1 + 2 files changed, 15 insertions(+), 24 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index d1ceab57a..f9f6c9c6a 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -3,7 +3,6 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import omit from 'rc-util/lib/omit'; import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; -import useLocale from '../hooks/useLocale'; import useTimeConfig from '../hooks/useTimeConfig'; import type { BaseInfo, @@ -22,6 +21,7 @@ import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; import useDisabledBoundary from './hooks/useDisabledBoundary'; import { useFieldFormat } from './hooks/useFieldFormat'; +import useFilledProps from './hooks/useFilledProps'; import useRangeValue, { useInnerValue } from './hooks/useFlexibleValue'; import useInputReadOnly from './hooks/useInputReadOnly'; import useInvalidate from './hooks/useInvalidate'; @@ -101,11 +101,14 @@ function Picker( props: PickerProps, ref: React.Ref, ) { + // ========================= Prop ========================= + const filledProps = useFilledProps(props); + const { // Style - prefixCls = 'rc-picker', - styles = {}, - classNames = {}, + prefixCls, + styles, + classNames, // Value defaultValue, @@ -128,7 +131,7 @@ function Picker( // Picker locale, generateConfig, - picker = 'date', + picker, showNow, showToday, @@ -164,34 +167,21 @@ function Picker( clearIcon, // Render - components = {}, + components, cellRender, dateRender, monthCellRender, // Native onClick, - } = props; + } = filledProps; // ========================= Refs ========================= const selectorRef = usePickerRef(ref); - // ======================== Locale ======================== - const filledLocale = useLocale(locale); - // ========================= Icon ========================= const mergedClearIcon = useClearIcon(prefixCls, allowClear, clearIcon); - // ========================= Prop ========================= - const filledProps = React.useMemo( - () => ({ - ...props, - locale: filledLocale, - picker, - }), - [props], - ); - // ======================= ShowTime ======================= const mergedShowTime = useTimeConfig(filledProps); @@ -209,7 +199,7 @@ function Picker( const mergedNeedConfirm = needConfirm ?? complexPicker; // ======================== Format ======================== - const [formatList, maskFormat] = useFieldFormat(internalPicker, filledLocale, format); + const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format); // ======================== Values ======================== const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange] = useInnerValue( @@ -345,7 +335,7 @@ function Picker( // ===================== Picker Value ===================== const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue( generateConfig, - filledLocale, + locale, calendarValue, mergedOpen, activeIndex, @@ -613,12 +603,12 @@ function Picker( const context = React.useMemo( () => ({ prefixCls, - locale: filledLocale, + locale, generateConfig, button: components.button, input: components.input, }), - [prefixCls, filledLocale, generateConfig, components.button, components.input], + [prefixCls, locale, generateConfig, components.button, components.input], ); // ======================== Effect ======================== diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 0bd6edeb7..974b2d18c 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -7,6 +7,7 @@ type PickedProps = Pick< 'locale' | 'picker' | 'prefixCls' | 'styles' | 'classNames' | 'order' | 'components' >; +/** Align the outer props with unique typed and fill undefined props */ export default function useFilledProps< DateType extends object = any, InProps extends PickedProps = PickedProps, From 7326a75d8d82217c88b955f700f7a6a63d797aab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 15:00:59 +0800 Subject: [PATCH 214/380] chore: move more --- src/NewPicker/PickerInput/RangePicker.tsx | 9 -- .../Selector/hooks/useClearIcon.tsx | 20 ++-- src/NewPicker/PickerInput/SinglePicker.tsx | 9 -- .../PickerInput/hooks/useFilledProps.ts | 24 ++++- src/NewPicker/hooks/useLocale.ts | 93 ++++++++++--------- 5 files changed, 78 insertions(+), 77 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index f1d9d12e7..34dbd980f 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -37,7 +37,6 @@ import useRangePickerValue from './hooks/useRangePickerValue'; import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; import useShowNow from './hooks/useShowNow'; import Popup from './Popup'; -import { useClearIcon } from './Selector/hooks/useClearIcon'; import RangeSelector, { type SelectorIdType } from './Selector/RangeSelector'; function separateConfig(config: T | [T, T] | null | undefined, defaultConfig: T): [T, T] { @@ -203,10 +202,6 @@ function RangePicker( presets, ranges, - // Icons - allowClear, - clearIcon, - // Render components, cellRender, @@ -220,9 +215,6 @@ function RangePicker( // ========================= Refs ========================= const selectorRef = usePickerRef(ref); - // ========================= Icon ========================= - const mergedClearIcon = useClearIcon(prefixCls, allowClear, clearIcon); - // ======================= ShowTime ======================= const mergedShowTime = useTimeConfig(filledProps); @@ -755,7 +747,6 @@ function RangePicker( // Ref ref={selectorRef} // Icon - clearIcon={mergedClearIcon} suffixIcon={suffixIcon} // Active activeIndex={focused || mergedOpen ? activeIndex : null} diff --git a/src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx b/src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx index f031e0e89..02d12399d 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx +++ b/src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx @@ -2,7 +2,10 @@ import warning from 'rc-util/lib/warning'; import type { ReactNode } from 'react'; import * as React from 'react'; -export function useClearIcon( +/** + * Used for `useFilledProps` since it already in the React.useMemo + */ +export function fillClearIcon( prefixCls: string, allowClear?: boolean | { clearIcon?: ReactNode }, clearIcon?: ReactNode, @@ -11,15 +14,12 @@ export function useClearIcon( warning(false, '`clearIcon` will be removed in future. Please use `allowClear` instead.'); } - const mergedClearIcon = React.useMemo(() => { - if (allowClear === false) { - return null; - } - - const config = allowClear && typeof allowClear === 'object' ? allowClear : {}; + if (allowClear === false) { + return null; + } - return config.clearIcon || clearIcon || ; - }, [prefixCls, allowClear, clearIcon]); + const config = allowClear && typeof allowClear === 'object' ? allowClear : {}; - return mergedClearIcon; + return config.clearIcon || clearIcon || ; } + diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index f9f6c9c6a..f34007357 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -32,7 +32,6 @@ import useRangeActive from './hooks/useRangeActive'; import useRangePickerValue from './hooks/useRangePickerValue'; import useShowNow from './hooks/useShowNow'; import Popup from './Popup'; -import { useClearIcon } from './Selector/hooks/useClearIcon'; import SingleSelector from './Selector/SingleSelector'; export interface BasePickerProps extends SharedPickerProps { @@ -162,10 +161,6 @@ function Picker( // Presets presets, - // Icons - allowClear, - clearIcon, - // Render components, cellRender, @@ -179,9 +174,6 @@ function Picker( // ========================= Refs ========================= const selectorRef = usePickerRef(ref); - // ========================= Icon ========================= - const mergedClearIcon = useClearIcon(prefixCls, allowClear, clearIcon); - // ======================= ShowTime ======================= const mergedShowTime = useTimeConfig(filledProps); @@ -660,7 +652,6 @@ function Picker( // Ref ref={selectorRef} // Icon - clearIcon={mergedClearIcon} suffixIcon={suffixIcon} // Active activeIndex={focused || mergedOpen ? activeIndex : null} diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 974b2d18c..078a78bca 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -1,13 +1,26 @@ import * as React from 'react'; -import useLocale from '../../hooks/useLocale'; +import { fillLocale } from '../../hooks/useLocale'; import type { RangePickerProps } from '../RangePicker'; +import { fillClearIcon } from '../Selector/hooks/useClearIcon'; type PickedProps = Pick< RangePickerProps, - 'locale' | 'picker' | 'prefixCls' | 'styles' | 'classNames' | 'order' | 'components' + | 'locale' + | 'picker' + | 'prefixCls' + | 'styles' + | 'classNames' + | 'order' + | 'components' + | 'clearIcon' + | 'allowClear' >; /** Align the outer props with unique typed and fill undefined props */ +/** + * Align the outer props with unique typed and fill undefined props. + * This will auto handle the legacy props fill like `clearIcon` + `allowClear` = `clearIcon` + */ export default function useFilledProps< DateType extends object = any, InProps extends PickedProps = PickedProps, @@ -21,20 +34,21 @@ export default function useFilledProps< classNames = {}, order = true, components = {}, + allowClear, + clearIcon, } = props; - const filledLocale = useLocale(locale); - const filledProps = React.useMemo( () => ({ ...props, prefixCls, - locale: filledLocale, + locale: fillLocale(locale), picker, styles, classNames, order, components, + clearIcon: fillClearIcon(prefixCls, allowClear, clearIcon), ...updater?.(), }), [props], diff --git a/src/NewPicker/hooks/useLocale.ts b/src/NewPicker/hooks/useLocale.ts index 179cc357e..f7c6603a0 100644 --- a/src/NewPicker/hooks/useLocale.ts +++ b/src/NewPicker/hooks/useLocale.ts @@ -1,52 +1,57 @@ import React from 'react'; import type { Locale } from '../interface'; +/** + * Used for `useFilledProps` since it already in the React.useMemo + */ +export function fillLocale(locale: Locale) { + // Not fill `monthFormat` since `locale.shortMonths` handle this + // Not fill `cellMeridiemFormat` since AM & PM by default + const { + // Input Field + fieldDateTimeFormat, + fieldDateFormat, + fieldTimeFormat, + fieldMonthFormat, + fieldYearFormat, + fieldWeekFormat, + fieldQuarterFormat, + + // Header Format + yearFormat, + // monthFormat, + + // Cell format + cellYearFormat, + cellQuarterFormat, + dayFormat, + cellDateFormat, + + // cellMeridiemFormat, + } = locale; + + return { + ...locale, + + fieldDateTimeFormat: fieldDateTimeFormat || 'YYYY-MM-DD HH:mm:ss', + fieldDateFormat: fieldDateFormat || 'YYYY-MM-DD', + fieldTimeFormat: fieldTimeFormat || 'HH:mm:ss', + fieldMonthFormat: fieldMonthFormat || 'YYYY-MM', + fieldYearFormat: fieldYearFormat || 'YYYY', + fieldWeekFormat: fieldWeekFormat || 'gggg-wo', + fieldQuarterFormat: fieldQuarterFormat || 'YYYY-[Q]Q', + + yearFormat: yearFormat || 'YYYY', + + cellYearFormat: cellYearFormat || 'YYYY', + cellQuarterFormat: cellQuarterFormat || '[Q]Q', + cellDateFormat: cellDateFormat || dayFormat || 'D', + }; +} + /** * Fill locale format as start up */ export default function useLocale(locale: Locale) { - return React.useMemo(() => { - // Not fill `monthFormat` since `locale.shortMonths` handle this - // Not fill `cellMeridiemFormat` since AM & PM by default - const { - // Input Field - fieldDateTimeFormat, - fieldDateFormat, - fieldTimeFormat, - fieldMonthFormat, - fieldYearFormat, - fieldWeekFormat, - fieldQuarterFormat, - - // Header Format - yearFormat, - // monthFormat, - - // Cell format - cellYearFormat, - cellQuarterFormat, - dayFormat, - cellDateFormat, - - // cellMeridiemFormat, - } = locale; - - return { - ...locale, - - fieldDateTimeFormat: fieldDateTimeFormat || 'YYYY-MM-DD HH:mm:ss', - fieldDateFormat: fieldDateFormat || 'YYYY-MM-DD', - fieldTimeFormat: fieldTimeFormat || 'HH:mm:ss', - fieldMonthFormat: fieldMonthFormat || 'YYYY-MM', - fieldYearFormat: fieldYearFormat || 'YYYY', - fieldWeekFormat: fieldWeekFormat || 'gggg-wo', - fieldQuarterFormat: fieldQuarterFormat || 'YYYY-[Q]Q', - - yearFormat: yearFormat || 'YYYY', - - cellYearFormat: cellYearFormat || 'YYYY', - cellQuarterFormat: cellQuarterFormat || '[Q]Q', - cellDateFormat: cellDateFormat || dayFormat || 'D', - }; - }, [locale]); + return React.useMemo(() => fillLocale(locale), [locale]); } From d60c64829fc4464ff8d2ceb2d608127e0adc2bd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 15:23:25 +0800 Subject: [PATCH 215/380] chore: more exclude --- src/NewPicker/PickerInput/RangePicker.tsx | 21 ++++++------------- .../PickerInput/hooks/useFilledProps.ts | 17 +++++++++++++-- src/NewPicker/PickerPanel/index.tsx | 4 ++-- src/NewPicker/hooks/useTimeConfig.ts | 2 +- 4 files changed, 24 insertions(+), 20 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 34dbd980f..3a2544c67 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -4,7 +4,6 @@ import omit from 'rc-util/lib/omit'; import pickAttrs from 'rc-util/lib/pickAttrs'; import warning from 'rc-util/lib/warning'; import * as React from 'react'; -import useTimeConfig from '../hooks/useTimeConfig'; import type { BaseInfo, InternalMode, @@ -173,6 +172,7 @@ function RangePicker( picker, showNow, showToday, + showTime, // Mode mode, @@ -215,9 +215,6 @@ function RangePicker( // ========================= Refs ========================= const selectorRef = usePickerRef(ref); - // ======================= ShowTime ======================= - const mergedShowTime = useTimeConfig(filledProps); - // ========================= Open ========================= const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; @@ -232,7 +229,7 @@ function RangePicker( // ======================== Picker ======================== /** Almost same as `picker`, but add `datetime` for `date` with `showTime` */ - const internalPicker: InternalMode = picker === 'date' && mergedShowTime ? 'datetime' : picker; + const internalPicker: InternalMode = picker === 'date' && showTime ? 'datetime' : picker; /** The picker is `datetime` or `time` */ const complexPicker = internalPicker === 'time' || internalPicker === 'datetime'; @@ -288,8 +285,7 @@ function RangePicker( const mergedMode = modes[activeIndex] || picker; /** Extends from `mergedMode` to patch `datetime` mode */ - const internalMode: InternalMode = - mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode; + const internalMode: InternalMode = mergedMode === 'date' && showTime ? 'datetime' : mergedMode; // ====================== PanelCount ====================== const multiplePanel = internalMode === picker && internalMode !== 'time'; @@ -310,12 +306,7 @@ function RangePicker( ); // ====================== Invalidate ====================== - const isInvalidateDate = useInvalidate( - generateConfig, - picker, - disabledBoundaryDate, - mergedShowTime, - ); + const isInvalidateDate = useInvalidate(generateConfig, picker, disabledBoundaryDate, showTime); // ======================== Value ========================= const [ @@ -400,7 +391,7 @@ function RangePicker( multiplePanel, defaultPickerValue, pickerValue, - mergedShowTime?.defaultValue, + showTime?.defaultValue, onPickerValueChange, minDate, maxDate, @@ -583,7 +574,7 @@ function RangePicker( // MISC {...panelProps} showNow={mergedShowNow} - showTime={mergedShowTime} + showTime={showTime} // Range range multiple={multiplePanel} diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 078a78bca..23ebcc4e3 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { fillLocale } from '../../hooks/useLocale'; +import { getTimeConfig } from '../../hooks/useTimeConfig'; import type { RangePickerProps } from '../RangePicker'; import { fillClearIcon } from '../Selector/hooks/useClearIcon'; @@ -14,7 +15,12 @@ type PickedProps = Pick< | 'components' | 'clearIcon' | 'allowClear' ->; +> & { + // RangePicker showTime definition is different with Picker + showTime?: any; +}; + +type ExcludeBooleanType = T extends boolean ? never : T; /** Align the outer props with unique typed and fill undefined props */ /** @@ -25,7 +31,13 @@ export default function useFilledProps< DateType extends object = any, InProps extends PickedProps = PickedProps, UpdaterProps = any, ->(props: InProps, updater?: () => UpdaterProps): Omit & UpdaterProps { +>( + props: InProps, + updater?: () => UpdaterProps, +): Omit & + UpdaterProps & { + showTime?: ExcludeBooleanType; + } { const { locale, picker = 'date', @@ -49,6 +61,7 @@ export default function useFilledProps< order, components, clearIcon: fillClearIcon(prefixCls, allowClear, clearIcon), + showTime: getTimeConfig(props), ...updater?.(), }), [props], diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 5d619b50f..8ce7edde5 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -1,7 +1,7 @@ import { useMergedState } from 'rc-util'; import * as React from 'react'; import useLocale from '../hooks/useLocale'; -import useTimeConfig from '../hooks/useTimeConfig'; +import { getTimeConfig } from '../hooks/useTimeConfig'; import type { CellRender, Components, @@ -139,7 +139,7 @@ function PickerPanel( const filledLocale = useLocale(locale); // ======================== ShowTime ======================== - const mergedShowTime = useTimeConfig(props); + const mergedShowTime = getTimeConfig(props); // ========================== Now =========================== const now = generateConfig.getNow(); diff --git a/src/NewPicker/hooks/useTimeConfig.ts b/src/NewPicker/hooks/useTimeConfig.ts index 0d84179c3..37b4bf2a1 100644 --- a/src/NewPicker/hooks/useTimeConfig.ts +++ b/src/NewPicker/hooks/useTimeConfig.ts @@ -52,7 +52,7 @@ function pickTimeProps(props: object): SharedTimeProps return timeProps; } -export default function useTimeConfig( +export function getTimeConfig( componentProps: { picker?: PickerMode; showTime?: boolean | Config; From c40f8b56ead48652d4c27092a9cf902092178610 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 15:27:23 +0800 Subject: [PATCH 216/380] chore: ts update --- src/NewPicker/PickerInput/SinglePicker.tsx | 21 ++++++------------- .../PickerInput/hooks/useFilledProps.ts | 8 +++---- 2 files changed, 10 insertions(+), 19 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index f34007357..4744614da 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -3,7 +3,6 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import omit from 'rc-util/lib/omit'; import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; -import useTimeConfig from '../hooks/useTimeConfig'; import type { BaseInfo, InternalMode, @@ -133,6 +132,7 @@ function Picker( picker, showNow, showToday, + showTime, // Mode mode, @@ -174,9 +174,6 @@ function Picker( // ========================= Refs ========================= const selectorRef = usePickerRef(ref); - // ======================= ShowTime ======================= - const mergedShowTime = useTimeConfig(filledProps); - // ========================= Open ========================= const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; @@ -184,7 +181,7 @@ function Picker( // ======================== Picker ======================== /** Almost same as `picker`, but add `datetime` for `date` with `showTime` */ - const internalPicker: InternalMode = picker === 'date' && mergedShowTime ? 'datetime' : picker; + const internalPicker: InternalMode = picker === 'date' && showTime ? 'datetime' : picker; /** The picker is `datetime` or `time` */ const complexPicker = internalPicker === 'time' || internalPicker === 'datetime'; @@ -240,8 +237,7 @@ function Picker( const mergedMode = modes[activeIndex] || picker; /** Extends from `mergedMode` to patch `datetime` mode */ - const internalMode: InternalMode = - mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode; + const internalMode: InternalMode = mergedMode === 'date' && showTime ? 'datetime' : mergedMode; // ====================== PanelCount ====================== const multiplePanel = internalMode === picker && internalMode !== 'time'; @@ -262,12 +258,7 @@ function Picker( ); // ====================== Invalidate ====================== - const isInvalidateDate = useInvalidate( - generateConfig, - picker, - disabledBoundaryDate, - mergedShowTime, - ); + const isInvalidateDate = useInvalidate(generateConfig, picker, disabledBoundaryDate, showTime); // ======================== Value ========================= const [ @@ -335,7 +326,7 @@ function Picker( multiplePanel, defaultPickerValue, pickerValue, - mergedShowTime?.defaultValue, + showTime?.defaultValue, onPickerValueChange, minDate, maxDate, @@ -517,7 +508,7 @@ function Picker( // MISC {...panelProps} showNow={mergedShowNow} - showTime={mergedShowTime} + showTime={showTime} // Disabled disabledDate={disabledDate} // Focus diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 23ebcc4e3..19778dec3 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -28,13 +28,13 @@ type ExcludeBooleanType = T extends boolean ? never : T; * This will auto handle the legacy props fill like `clearIcon` + `allowClear` = `clearIcon` */ export default function useFilledProps< - DateType extends object = any, - InProps extends PickedProps = PickedProps, - UpdaterProps = any, + DateType extends object, + InProps extends PickedProps, + UpdaterProps extends object, >( props: InProps, updater?: () => UpdaterProps, -): Omit & +): Omit & UpdaterProps & { showTime?: ExcludeBooleanType; } { From bf0fa885a41aea8b7946a749d5b7201f2f304897 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 16:02:21 +0800 Subject: [PATCH 217/380] chore: move more --- src/NewPicker/PickerInput/RangePicker.tsx | 14 ++----- .../PickerInput/hooks/useFilledProps.ts | 37 ++++++++++++++++--- 2 files changed, 34 insertions(+), 17 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 3a2544c67..fc1aa7227 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -129,7 +129,7 @@ function RangePicker( ref: React.Ref, ) { // ========================= Prop ========================= - const filledProps = useFilledProps(props, () => { + const [filledProps, internalPicker, complexPicker] = useFilledProps(props, () => { const { disabled, allowEmpty } = props; const mergedDisabled = separateConfig(disabled, false); @@ -227,14 +227,6 @@ function RangePicker( } }; - // ======================== Picker ======================== - /** Almost same as `picker`, but add `datetime` for `date` with `showTime` */ - const internalPicker: InternalMode = picker === 'date' && showTime ? 'datetime' : picker; - - /** The picker is `datetime` or `time` */ - const complexPicker = internalPicker === 'time' || internalPicker === 'datetime'; - const mergedNeedConfirm = needConfirm ?? complexPicker; - // ======================== Format ======================== const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format); @@ -601,7 +593,7 @@ function RangePicker( hoverValue={hoverValues} onHover={onPanelHover} // Submit - needConfirm={mergedNeedConfirm} + needConfirm={needConfirm} onSubmit={triggerPartConfirm} // Preset presets={presetList} @@ -685,7 +677,7 @@ function RangePicker( } // Submit with complex picker - if (!mergedOpen && complexPicker && !mergedNeedConfirm && lastOp === 'panel') { + if (!mergedOpen && complexPicker && !needConfirm && lastOp === 'panel') { triggerOpen(true); triggerPartConfirm(); } diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 19778dec3..7f06b11a3 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import { fillLocale } from '../../hooks/useLocale'; import { getTimeConfig } from '../../hooks/useTimeConfig'; +import type { InternalMode } from '../../interface'; import type { RangePickerProps } from '../RangePicker'; import { fillClearIcon } from '../Selector/hooks/useClearIcon'; @@ -15,6 +16,7 @@ type PickedProps = Pick< | 'components' | 'clearIcon' | 'allowClear' + | 'needConfirm' > & { // RangePicker showTime definition is different with Picker showTime?: any; @@ -22,9 +24,9 @@ type PickedProps = Pick< type ExcludeBooleanType = T extends boolean ? never : T; -/** Align the outer props with unique typed and fill undefined props */ /** * Align the outer props with unique typed and fill undefined props. + * This is shared with both RangePicker and Picker. * This will auto handle the legacy props fill like `clearIcon` + `allowClear` = `clearIcon` */ export default function useFilledProps< @@ -34,10 +36,14 @@ export default function useFilledProps< >( props: InProps, updater?: () => UpdaterProps, -): Omit & - UpdaterProps & { - showTime?: ExcludeBooleanType; - } { +): [ + filledProps: Omit & + UpdaterProps & { + showTime?: ExcludeBooleanType; + }, + internalPicker: InternalMode, + complexPicker: boolean, +] { const { locale, picker = 'date', @@ -48,6 +54,7 @@ export default function useFilledProps< components = {}, allowClear, clearIcon, + needConfirm, } = props; const filledProps = React.useMemo( @@ -67,5 +74,23 @@ export default function useFilledProps< [props], ); - return filledProps; + // ======================== Picker ======================== + /** Almost same as `picker`, but add `datetime` for `date` with `showTime` */ + const internalPicker: InternalMode = + picker === 'date' && filledProps.showTime ? 'datetime' : picker; + + /** The picker is `datetime` or `time` */ + const complexPicker = internalPicker === 'time' || internalPicker === 'datetime'; + const mergedNeedConfirm = needConfirm ?? complexPicker; + + // ======================== Merged ======================== + const mergedProps = React.useMemo( + () => ({ + ...filledProps, + needConfirm: mergedNeedConfirm, + }), + [filledProps, mergedNeedConfirm], + ); + + return [mergedProps, internalPicker, complexPicker]; } From 2e5ccb5aadef82adf2adce2fe929771abeeaddd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 17:49:20 +0800 Subject: [PATCH 218/380] chore: fix type --- src/NewPicker/PickerInput/SinglePicker.tsx | 16 +++++----------- .../PickerInput/hooks/useFlexibleValue.ts | 11 +++++++++-- src/NewPicker/PickerInput/hooks/useRangeValue.ts | 13 +++++++++---- 3 files changed, 23 insertions(+), 17 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 4744614da..94073c70e 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -100,7 +100,7 @@ function Picker( ref: React.Ref, ) { // ========================= Prop ========================= - const filledProps = useFilledProps(props); + const [filledProps, internalPicker, complexPicker] = useFilledProps(props); const { // Style @@ -138,6 +138,7 @@ function Picker( mode, onPanelChange, onCalendarChange, + multiple, // Picker Value defaultPickerValue, @@ -179,14 +180,6 @@ function Picker( const [mergedOpen, triggerOpen] = useOpen(open, defaultOpen, onOpenChange); - // ======================== Picker ======================== - /** Almost same as `picker`, but add `datetime` for `date` with `showTime` */ - const internalPicker: InternalMode = picker === 'date' && showTime ? 'datetime' : picker; - - /** The picker is `datetime` or `time` */ - const complexPicker = internalPicker === 'time' || internalPicker === 'datetime'; - const mergedNeedConfirm = needConfirm ?? complexPicker; - // ======================== Format ======================== const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format); @@ -194,6 +187,7 @@ function Picker( const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange] = useInnerValue( generateConfig, locale, + multiple, formatList, defaultValue, value, @@ -531,7 +525,7 @@ function Picker( hoverValue={hoverValues} onHover={onPanelHover} // Submit - needConfirm={mergedNeedConfirm} + needConfirm={needConfirm} onSubmit={triggerPartConfirm} // Preset presets={presetList} @@ -615,7 +609,7 @@ function Picker( } // Submit with complex picker - if (!mergedOpen && complexPicker && !mergedNeedConfirm && lastOp === 'panel') { + if (!mergedOpen && complexPicker && !needConfirm && lastOp === 'panel') { triggerOpen(true); triggerPartConfirm(); } diff --git a/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts b/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts index cf0811832..2d1ed1c33 100644 --- a/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts +++ b/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts @@ -6,6 +6,7 @@ import useSyncState from '../../hooks/useSyncState'; import type { FormatType, Locale } from '../../interface'; import { fillIndex } from '../../util'; import type { RangePickerProps } from '../RangePicker'; +import type { PickerProps } from '../SinglePicker'; import useLockEffect from './useLockEffect'; import { useCalendarValue, useUtil } from './useRangeValue'; @@ -18,12 +19,14 @@ const EMPTY_VALUE: any[] = []; type TriggerCalendarChange = (dates: DateType[]) => void; export function useInnerValue( + multiple: boolean, generateConfig: GenerateConfig, locale: Locale, formatList: FormatType[], + defaultValue?: DateType, value?: DateType, - onCalendarChange?: RangePickerProps['onCalendarChange'], + onCalendarChange?: PickerProps['onCalendarChange'], ) { // This is the root value which will sync with controlled or uncontrolled value const [innerValue, setInnerValue] = useMergedState(defaultValue, { @@ -45,6 +48,10 @@ export function useInnerValue( formatList, ); + function pickByMultiple(values: T[]): any { + return multiple ? values : values[0]; + } + const triggerCalendarChange: TriggerCalendarChange = useEvent((dates) => { const clone: DateType[] = [...dates]; @@ -56,7 +63,7 @@ export function useInnerValue( // Trigger calendar change event if (onCalendarChange) { - onCalendarChange(clone, getDateTexts(clone), { + onCalendarChange(pickByMultiple(clone), pickByMultiple(getDateTexts(clone)), { range: isSameStart ? 'end' : 'start', }); } diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 998bd053a..f192e0f87 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -33,14 +33,18 @@ const EMPTY_VALUE: [null, null] = [null, null]; type TriggerCalendarChange = ([start, end]: RangeValueType) => void; +type RefillType = { + [P in keyof T]: string; +}; + export function useUtil< DateType extends object = any, MergedValueType extends DateType[] = RangeValueType, >(generateConfig: GenerateConfig, locale: Locale, formatList: FormatType[]) { - const getDateTexts = ([start, end]: RangeValueType) => { - return [start, end].map((date) => + const getDateTexts = (dates: MergedValueType) => { + return dates.map((date) => formatValue(date, { generateConfig, locale, format: formatList[0] }), - ) as [string, string]; + ) as any as RefillType>; }; const isSameDates = (source: MergedValueType, target: MergedValueType) => { @@ -116,7 +120,8 @@ export function useInnerValue( // Trigger calendar change event if (onCalendarChange) { - onCalendarChange(clone, getDateTexts(clone), { + const cellTexts = getDateTexts(clone); + onCalendarChange(clone, cellTexts, { range: isSameStart ? 'end' : 'start', }); } From a71aed389600a9e2241d0d0789324904da669079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 17:52:51 +0800 Subject: [PATCH 219/380] chore: merge code --- src/NewPicker/PickerInput/SinglePicker.tsx | 2 +- .../PickerInput/hooks/useRangeValue.ts | 17 +---------------- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 94073c70e..1104720e2 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -185,9 +185,9 @@ function Picker( // ======================== Values ======================== const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange] = useInnerValue( + multiple, generateConfig, locale, - multiple, formatList, defaultValue, value, diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index f192e0f87..6ffee37ad 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -174,22 +174,7 @@ export default function useRangeValue( const orderOnChange = disabled.some((d) => d) ? false : order; // ============================= Util ============================= - const getDateTexts = ([start, end]: RangeValueType) => { - return [start, end].map((date) => - formatValue(date, { generateConfig, locale, format: formatList[0] }), - ) as [string, string]; - }; - - const isSameDates = (source: RangeValueType, target: RangeValueType) => { - const [prevStart = null, prevEnd = null] = source; - const [nextStart = null, nextEnd = null] = target; - - const isSameStart = - prevStart === nextStart || isSameTimestamp(generateConfig, prevStart, nextStart); - const isSameEnd = prevEnd === nextEnd || isSameTimestamp(generateConfig, prevEnd, nextEnd); - - return [isSameStart && isSameEnd, isSameStart, isSameEnd]; - }; + const [getDateTexts, isSameDates] = useUtil(generateConfig, locale, formatList); // ============================ Values ============================ // Used for trigger `onChange` event. From 6c685053424b6d1e30a650b82179e7eda432aab8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 17:54:15 +0800 Subject: [PATCH 220/380] chore: more info --- .../PickerInput/hooks/useFlexibleValue.ts | 23 ++++--------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts b/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts index 2d1ed1c33..4ca193f24 100644 --- a/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts +++ b/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts @@ -1,7 +1,7 @@ import { useEvent, useMergedState } from 'rc-util'; import * as React from 'react'; import type { GenerateConfig } from '../../../generate'; -import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; +import { isSame } from '../../../utils/dateUtil'; import useSyncState from '../../hooks/useSyncState'; import type { FormatType, Locale } from '../../interface'; import { fillIndex } from '../../util'; @@ -88,7 +88,7 @@ export default function useFlexibleValue( setInnerValue: (nextValue: DateType) => void, getCalendarValue: () => DateType, triggerCalendarChange: TriggerCalendarChange, - disabled: [boolean, boolean], + disabled: boolean, formatList: FormatType[], focused: boolean, open: boolean, @@ -113,25 +113,10 @@ export default function useFlexibleValue( order, } = info; - const orderOnChange = disabled.some((d) => d) ? false : order; + const orderOnChange = true; // ============================= Util ============================= - const getDateTexts = ([start, end]: DateType) => { - return [start, end].map((date) => - formatValue(date, { generateConfig, locale, format: formatList[0] }), - ) as [string, string]; - }; - - const isSameDates = (source: DateType, target: DateType) => { - const [prevStart = null, prevEnd = null] = source; - const [nextStart = null, nextEnd = null] = target; - - const isSameStart = - prevStart === nextStart || isSameTimestamp(generateConfig, prevStart, nextStart); - const isSameEnd = prevEnd === nextEnd || isSameTimestamp(generateConfig, prevEnd, nextEnd); - - return [isSameStart && isSameEnd, isSameStart, isSameEnd]; - }; + const [getDateTexts, isSameDates] = useUtil(generateConfig, locale, formatList); // ============================ Values ============================ // Used for trigger `onChange` event. From 78a7a336facca7ad882065312ed3529714337b4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 17:58:17 +0800 Subject: [PATCH 221/380] chore: clean up --- src/NewPicker/PickerInput/hooks/useFlexibleValue.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts b/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts index 4ca193f24..c81f23934 100644 --- a/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts +++ b/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts @@ -121,7 +121,12 @@ export default function useFlexibleValue( // ============================ Values ============================ // Used for trigger `onChange` event. // Record current value which is wait for submit. - const [submitValue, setSubmitValue] = useSyncState(mergedValue); + const [innerSubmitValue, setSubmitValue] = useSyncState(mergedValue); + const submitValue = React.useMemo(() => { + const filledValue = innerSubmitValue || EMPTY_VALUE; + + return Array.isArray(filledValue) ? filledValue : [filledValue]; + }, [innerSubmitValue]); /** Sync calendarValue & submitValue back with value */ const syncWithValue = useEvent(() => { @@ -133,7 +138,7 @@ export default function useFlexibleValue( }, [mergedValue]); // ============================ Submit ============================ - const triggerSubmit = useEvent((nextValue?: DateType) => { + const triggerSubmit = useEvent((nextValue?: DateType[]) => { const isNullValue = nextValue === null; const clone: DateType = [...(nextValue || submitValue())]; From fe5707812b17dee088d89c1948827e0a3c232474 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 18:56:18 +0800 Subject: [PATCH 222/380] chore: fix type --- .../PickerInput/hooks/useRangeValue.ts | 75 ++++++++++--------- 1 file changed, 41 insertions(+), 34 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 6ffee37ad..4086234de 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -3,12 +3,12 @@ import * as React from 'react'; import type { GenerateConfig } from '../../../generate'; import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; import useSyncState from '../../hooks/useSyncState'; -import type { FormatType, Locale } from '../../interface'; +import type { BaseInfo, FormatType, Locale } from '../../interface'; import { fillIndex } from '../../util'; import type { RangePickerProps, RangeValueType } from '../RangePicker'; import useLockEffect from './useLockEffect'; -const EMPTY_VALUE: [null, null] = [null, null]; +const EMPTY_VALUE: any[] = []; // Submit Logic: // * โœ… Value: @@ -31,20 +31,20 @@ const EMPTY_VALUE: [null, null] = [null, null]; // * Update `needSubmit` mark to true // * trigger onChange by `needSubmit` and update stateValue -type TriggerCalendarChange = ([start, end]: RangeValueType) => void; +type TriggerCalendarChange = (calendarValues: ValueType) => void; -type RefillType = { +type Replace2String = { [P in keyof T]: string; }; export function useUtil< - DateType extends object = any, - MergedValueType extends DateType[] = RangeValueType, + MergedValueType extends object[], + DateType extends MergedValueType[number] = any, >(generateConfig: GenerateConfig, locale: Locale, formatList: FormatType[]) { const getDateTexts = (dates: MergedValueType) => { return dates.map((date) => formatValue(date, { generateConfig, locale, format: formatList[0] }), - ) as any as RefillType>; + ) as any as Replace2String>; }; const isSameDates = (source: MergedValueType, target: MergedValueType) => { @@ -71,10 +71,7 @@ export function useUtil< * Used for internal value management. * It should always use `mergedValue` in render logic */ -export function useCalendarValue< - DateType extends object = any, - MergedValueType extends DateType[] = RangeValueType, ->(mergedValue: MergedValueType) { +export function useCalendarValue(mergedValue: MergedValueType) { const [calendarValue, setCalendarValue] = useSyncState(mergedValue); /** Sync calendarValue & submitValue back with value */ @@ -89,44 +86,50 @@ export function useCalendarValue< return [calendarValue, setCalendarValue] as const; } -export function useInnerValue( +export function useInnerValue( generateConfig: GenerateConfig, locale: Locale, formatList: FormatType[], - defaultValue?: RangeValueType, - value?: RangeValueType, - onCalendarChange?: RangePickerProps['onCalendarChange'], + defaultValue?: ValueType, + value?: ValueType, + onCalendarChange?: ( + dates: ValueType, + dateStrings: Replace2String>, + info: BaseInfo, + ) => void, ) { // This is the root value which will sync with controlled or uncontrolled value const [innerValue, setInnerValue] = useMergedState(defaultValue, { value, }); - const mergedValue = innerValue || EMPTY_VALUE; + const mergedValue = innerValue || (EMPTY_VALUE as ValueType); // ========================= Inner Values ========================= const [calendarValue, setCalendarValue] = useCalendarValue(mergedValue); // ============================ Change ============================ - const [getDateTexts, isSameDates] = useUtil(generateConfig, locale, formatList); + const [getDateTexts, isSameDates] = useUtil(generateConfig, locale, formatList); - const triggerCalendarChange: TriggerCalendarChange = useEvent(([start, end]) => { - const clone: RangeValueType = [start, end]; + const triggerCalendarChange: TriggerCalendarChange = useEvent( + (nextCalendarValues: ValueType) => { + const clone = [...nextCalendarValues] as ValueType; - // Update merged value - const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone); + // Update merged value + const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone); - if (!isSameMergedDates) { - setCalendarValue(clone); + if (!isSameMergedDates) { + setCalendarValue(clone); - // Trigger calendar change event - if (onCalendarChange) { - const cellTexts = getDateTexts(clone); - onCalendarChange(clone, cellTexts, { - range: isSameStart ? 'end' : 'start', - }); + // Trigger calendar change event + if (onCalendarChange) { + const cellTexts = getDateTexts(clone); + onCalendarChange(clone, cellTexts, { + range: isSameStart ? 'end' : 'start', + }); + } } - } - }); + }, + ); return [mergedValue, setInnerValue, calendarValue, triggerCalendarChange] as const; } @@ -145,7 +148,7 @@ export default function useRangeValue( mergedValue: RangeValueType, setInnerValue: (nextValue: RangeValueType) => void, getCalendarValue: () => RangeValueType, - triggerCalendarChange: TriggerCalendarChange, + triggerCalendarChange: TriggerCalendarChange>, disabled: [boolean, boolean], formatList: FormatType[], focused: boolean, @@ -174,7 +177,11 @@ export default function useRangeValue( const orderOnChange = disabled.some((d) => d) ? false : order; // ============================= Util ============================= - const [getDateTexts, isSameDates] = useUtil(generateConfig, locale, formatList); + const [getDateTexts, isSameDates] = useUtil>( + generateConfig, + locale, + formatList, + ); // ============================ Values ============================ // Used for trigger `onChange` event. @@ -194,7 +201,7 @@ export default function useRangeValue( const triggerSubmit = useEvent((nextValue?: RangeValueType) => { const isNullValue = nextValue === null; - const clone: RangeValueType = [...(nextValue || submitValue())]; + const clone = [...(nextValue || submitValue())] as RangeValueType; // Fill null value if (isNullValue) { From a4c2bf72215d13a00134ae7a9fbb23508a785249 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 6 Dec 2023 19:18:03 +0800 Subject: [PATCH 223/380] fix: event --- src/NewPicker/PickerInput/RangePicker.tsx | 1 + src/NewPicker/PickerInput/SinglePicker.tsx | 13 ++- .../PickerInput/hooks/useFilledProps.ts | 16 ++- .../PickerInput/hooks/useFlexibleValue.ts | 108 +++++++++--------- .../PickerInput/hooks/useRangeValue.ts | 8 ++ 5 files changed, 88 insertions(+), 58 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index fc1aa7227..a5e3a5947 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -238,6 +238,7 @@ function RangePicker( defaultValue, value, onCalendarChange, + 2, ); const calendarValue = getCalendarValue(); diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 1104720e2..f83819116 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -21,7 +21,7 @@ import useCellRender from './hooks/useCellRender'; import useDisabledBoundary from './hooks/useDisabledBoundary'; import { useFieldFormat } from './hooks/useFieldFormat'; import useFilledProps from './hooks/useFilledProps'; -import useRangeValue, { useInnerValue } from './hooks/useFlexibleValue'; +import useRangeValue from './hooks/useFlexibleValue'; import useInputReadOnly from './hooks/useInputReadOnly'; import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; @@ -29,6 +29,7 @@ import { usePickerRef } from './hooks/usePickerRef'; import usePresets from './hooks/usePresets'; import useRangeActive from './hooks/useRangeActive'; import useRangePickerValue from './hooks/useRangePickerValue'; +import { useInnerValue } from './hooks/useRangeValue'; import useShowNow from './hooks/useShowNow'; import Popup from './Popup'; import SingleSelector from './Selector/SingleSelector'; @@ -183,15 +184,21 @@ function Picker( // ======================== Format ======================== const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format); + // ======================= Calendar ======================= + const onInternalCalendarChange: any = ( + dates: DateType[], + dateStrings: string[], + info: BaseInfo, + ) => {}; + // ======================== Values ======================== const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange] = useInnerValue( - multiple, generateConfig, locale, formatList, defaultValue, value, - onCalendarChange, + onInternalCalendarChange, ); const calendarValue = getCalendarValue(); diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 7f06b11a3..158e704eb 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { toArray } from '../../../utils/miscUtil'; import { fillLocale } from '../../hooks/useLocale'; import { getTimeConfig } from '../../hooks/useTimeConfig'; import type { InternalMode } from '../../interface'; @@ -20,10 +21,14 @@ type PickedProps = Pick< > & { // RangePicker showTime definition is different with Picker showTime?: any; + value?: any; + defaultValue?: any; }; type ExcludeBooleanType = T extends boolean ? never : T; +type ToArrayType = T extends any[] ? T : [T]; + /** * Align the outer props with unique typed and fill undefined props. * This is shared with both RangePicker and Picker. @@ -37,9 +42,11 @@ export default function useFilledProps< props: InProps, updater?: () => UpdaterProps, ): [ - filledProps: Omit & + filledProps: Omit & UpdaterProps & { showTime?: ExcludeBooleanType; + value?: ToArrayType; + defaultValue?: ToArrayType; }, internalPicker: InternalMode, complexPicker: boolean, @@ -55,8 +62,13 @@ export default function useFilledProps< allowClear, clearIcon, needConfirm, + value, + defaultValue, } = props; + const values = React.useMemo(() => (value ? toArray(value) : value), [value]); + const defaultValues = React.useMemo(() => toArray(defaultValue), [defaultValue]); + const filledProps = React.useMemo( () => ({ ...props, @@ -69,6 +81,8 @@ export default function useFilledProps< components, clearIcon: fillClearIcon(prefixCls, allowClear, clearIcon), showTime: getTimeConfig(props), + value: values, + defaultValue: defaultValues, ...updater?.(), }), [props], diff --git a/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts b/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts index c81f23934..b50de16dd 100644 --- a/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts +++ b/src/NewPicker/PickerInput/hooks/useFlexibleValue.ts @@ -18,60 +18,60 @@ const EMPTY_VALUE: any[] = []; type TriggerCalendarChange = (dates: DateType[]) => void; -export function useInnerValue( - multiple: boolean, - generateConfig: GenerateConfig, - locale: Locale, - formatList: FormatType[], - - defaultValue?: DateType, - value?: DateType, - onCalendarChange?: PickerProps['onCalendarChange'], -) { - // This is the root value which will sync with controlled or uncontrolled value - const [innerValue, setInnerValue] = useMergedState(defaultValue, { - value, - }); - const mergedValue = React.useMemo(() => { - const filledValue = innerValue || EMPTY_VALUE; - - return Array.isArray(filledValue) ? filledValue : [filledValue]; - }, [innerValue]); - - // ========================= Inner Values ========================= - const [calendarValue, setCalendarValue] = useCalendarValue(mergedValue); - - // ============================ Change ============================ - const [getDateTexts, isSameDates] = useUtil( - generateConfig, - locale, - formatList, - ); - - function pickByMultiple(values: T[]): any { - return multiple ? values : values[0]; - } - - const triggerCalendarChange: TriggerCalendarChange = useEvent((dates) => { - const clone: DateType[] = [...dates]; - - // Update merged value - const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone); - - if (!isSameMergedDates) { - setCalendarValue(clone); - - // Trigger calendar change event - if (onCalendarChange) { - onCalendarChange(pickByMultiple(clone), pickByMultiple(getDateTexts(clone)), { - range: isSameStart ? 'end' : 'start', - }); - } - } - }); - - return [mergedValue, setInnerValue, calendarValue, triggerCalendarChange] as const; -} +// export function useInnerValue( +// multiple: boolean, +// generateConfig: GenerateConfig, +// locale: Locale, +// formatList: FormatType[], + +// defaultValue?: DateType, +// value?: DateType, +// onCalendarChange?: PickerProps['onCalendarChange'], +// ) { +// // This is the root value which will sync with controlled or uncontrolled value +// const [innerValue, setInnerValue] = useMergedState(defaultValue, { +// value, +// }); +// const mergedValue = React.useMemo(() => { +// const filledValue = innerValue || EMPTY_VALUE; + +// return Array.isArray(filledValue) ? filledValue : [filledValue]; +// }, [innerValue]); + +// // ========================= Inner Values ========================= +// const [calendarValue, setCalendarValue] = useCalendarValue(mergedValue); + +// // ============================ Change ============================ +// const [getDateTexts, isSameDates] = useUtil( +// generateConfig, +// locale, +// formatList, +// ); + +// function pickByMultiple(values: T[]): any { +// return multiple ? values : values[0]; +// } + +// const triggerCalendarChange: TriggerCalendarChange = useEvent((dates) => { +// const clone: DateType[] = [...dates]; + +// // Update merged value +// const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone); + +// if (!isSameMergedDates) { +// setCalendarValue(clone); + +// // Trigger calendar change event +// if (onCalendarChange) { +// onCalendarChange(pickByMultiple(clone), pickByMultiple(getDateTexts(clone)), { +// range: isSameStart ? 'end' : 'start', +// }); +// } +// } +// }); + +// return [mergedValue, setInnerValue, calendarValue, triggerCalendarChange] as const; +// } export default function useFlexibleValue( info: Pick< diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 4086234de..4738c49e6 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -97,6 +97,8 @@ export function useInnerValue>, info: BaseInfo, ) => void, + /** Used for RangePicker */ + valueLen = 2, ) { // This is the root value which will sync with controlled or uncontrolled value const [innerValue, setInnerValue] = useMergedState(defaultValue, { @@ -114,6 +116,12 @@ export function useInnerValue { const clone = [...nextCalendarValues] as ValueType; + if (valueLen) { + for (let i = 0; i < valueLen; i += 1) { + clone[i] = clone[i] || null; + } + } + // Update merged value const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone); From c23740e2f78c9bda2733cd1f17662ed11bf06546 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 10:46:58 +0800 Subject: [PATCH 224/380] chore: unique --- src/NewPicker/PickerInput/SinglePicker.tsx | 28 ++++++++++++++----- .../PickerInput/hooks/useFilledProps.ts | 5 ++-- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index f83819116..02c1d9ace 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -92,10 +92,22 @@ export interface MultiplePickerProps extends BasePicker onCalendarChange?: (date: DateType[], dateString: string[], info: BaseInfo) => void; } -export type PickerProps = +export type PickerProps = | SinglePickerProps | MultiplePickerProps; +type InternalPickerProps = Omit< + MultiplePickerProps, + 'onChange' | 'onCalendarChange' +> & { + onChange?: (date: DateType | DateType[], dateString: string | string[]) => void; + onCalendarChange?: ( + date: DateType | DateType[], + dateString: string | string[], + info: BaseInfo, + ) => void; +}; + function Picker( props: PickerProps, ref: React.Ref, @@ -171,7 +183,7 @@ function Picker( // Native onClick, - } = filledProps; + } = filledProps as InternalPickerProps; // ========================= Refs ========================= const selectorRef = usePickerRef(ref); @@ -185,11 +197,13 @@ function Picker( const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format); // ======================= Calendar ======================= - const onInternalCalendarChange: any = ( - dates: DateType[], - dateStrings: string[], - info: BaseInfo, - ) => {}; + function pickerParam(values: T | T[]) { + return multiple ? values : values[0]; + } + + const onInternalCalendarChange = (dates: DateType[], dateStrings: string[], info: BaseInfo) => { + onCalendarChange?.(pickerParam(dates), pickerParam(dateStrings), info); + }; // ======================== Values ======================== const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange] = useInnerValue( diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 158e704eb..43aa4bf9c 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -31,8 +31,9 @@ type ToArrayType = T extends any[] ? T : [T]; /** * Align the outer props with unique typed and fill undefined props. - * This is shared with both RangePicker and Picker. - * This will auto handle the legacy props fill like `clearIcon` + `allowClear` = `clearIcon` + * This is shared with both RangePicker and Picker. This will do: + * - Convert `value` & `defaultValue` to array + * - handle the legacy props fill like `clearIcon` + `allowClear` = `clearIcon` */ export default function useFilledProps< DateType extends object, From 6f0a729302f91b9b9c4840e057f209698f50f95a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 10:54:32 +0800 Subject: [PATCH 225/380] chore: tmp of it --- src/NewPicker/PickerInput/RangePicker.tsx | 6 +++--- src/NewPicker/PickerInput/SinglePicker.tsx | 18 +++++++++--------- .../PickerInput/hooks/useRangeActive.ts | 13 ++++++------- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index a5e3a5947..909d9e0e4 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -245,14 +245,14 @@ function RangePicker( // ======================== Active ======================== const [ - activeIndex, - setActiveIndex, focused, triggerFocus, lastOperation, + activeIndex, + setActiveIndex, nextActiveIndex, activeIndexList, - ] = useRangeActive(mergedOpen, disabled, allowEmpty); + ] = useRangeActive(disabled, allowEmpty); const onSharedFocus = (event: React.FocusEvent, index?: number) => { triggerFocus(true); diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 02c1d9ace..5043b238f 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -21,7 +21,6 @@ import useCellRender from './hooks/useCellRender'; import useDisabledBoundary from './hooks/useDisabledBoundary'; import { useFieldFormat } from './hooks/useFieldFormat'; import useFilledProps from './hooks/useFilledProps'; -import useRangeValue from './hooks/useFlexibleValue'; import useInputReadOnly from './hooks/useInputReadOnly'; import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; @@ -29,7 +28,7 @@ import { usePickerRef } from './hooks/usePickerRef'; import usePresets from './hooks/usePresets'; import useRangeActive from './hooks/useRangeActive'; import useRangePickerValue from './hooks/useRangePickerValue'; -import { useInnerValue } from './hooks/useRangeValue'; +import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; import useShowNow from './hooks/useShowNow'; import Popup from './Popup'; import SingleSelector from './Selector/SingleSelector'; @@ -188,6 +187,11 @@ function Picker( // ========================= Refs ========================= const selectorRef = usePickerRef(ref); + // ========================= Util ========================= + function pickerParam(values: T | T[]) { + return multiple ? values : values[0]; + } + // ========================= Open ========================= const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; @@ -197,10 +201,6 @@ function Picker( const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format); // ======================= Calendar ======================= - function pickerParam(values: T | T[]) { - return multiple ? values : values[0]; - } - const onInternalCalendarChange = (dates: DateType[], dateStrings: string[], info: BaseInfo) => { onCalendarChange?.(pickerParam(dates), pickerParam(dateStrings), info); }; @@ -219,14 +219,14 @@ function Picker( // ======================== Active ======================== const [ - activeIndex, - setActiveIndex, focused, triggerFocus, lastOperation, + activeIndex, + setActiveIndex, nextActiveIndex, activeIndexList, - ] = useRangeActive(mergedOpen, disabled, mergedAllowEmpty); + ] = useRangeActive([disabled], []); const onSharedFocus = (event: React.FocusEvent, index?: number) => { triggerFocus(true); diff --git a/src/NewPicker/PickerInput/hooks/useRangeActive.ts b/src/NewPicker/PickerInput/hooks/useRangeActive.ts index a05ddd058..8f6569ef8 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeActive.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeActive.ts @@ -12,15 +12,14 @@ export type NextActive = (nextValue: RangeValueType) => numb * When click outside to close the panel, trigger event if it can trigger onChange. */ export default function useRangeActive( - open: boolean, - disabled: [boolean, boolean], - empty: [boolean, boolean], + disabled: boolean[], + empty: boolean[], ): [ - activeIndex: number, - setActiveIndex: (index: number) => void, focused: boolean, triggerFocus: (focused: boolean) => void, lastOperation: (type?: OperationType) => OperationType, + activeIndex: number, + setActiveIndex: (index: number) => void, nextActiveIndex: NextActive, activeList: number[], ] { @@ -71,11 +70,11 @@ export default function useRangeActive( }, [focused, activeIndex]); return [ - activeIndex, - setActiveIndex, focused, triggerFocus, lastOperation, + activeIndex, + setActiveIndex, nextActiveIndex, activeListRef.current, ]; From bffb149e33001661e294e6f9c3e9c907bff39d34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 11:13:22 +0800 Subject: [PATCH 226/380] chore: merge more --- src/NewPicker/PickerInput/RangePicker.tsx | 29 ++++++++--------- src/NewPicker/PickerInput/SinglePicker.tsx | 32 +++++++------------ .../PickerInput/hooks/useFilledProps.ts | 20 +++++++++--- .../PickerInput/hooks/useRangeActive.ts | 2 +- 4 files changed, 43 insertions(+), 40 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 909d9e0e4..87859201a 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -23,7 +23,6 @@ import { fillIndex } from '../util'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; import useDisabledBoundary from './hooks/useDisabledBoundary'; -import { useFieldFormat } from './hooks/useFieldFormat'; import useFilledProps from './hooks/useFilledProps'; import useInputReadOnly from './hooks/useInputReadOnly'; import useInvalidate from './hooks/useInvalidate'; @@ -129,17 +128,20 @@ function RangePicker( ref: React.Ref, ) { // ========================= Prop ========================= - const [filledProps, internalPicker, complexPicker] = useFilledProps(props, () => { - const { disabled, allowEmpty } = props; - - const mergedDisabled = separateConfig(disabled, false); - const mergedAllowEmpty = separateConfig(allowEmpty, false); - - return { - disabled: mergedDisabled, - allowEmpty: mergedAllowEmpty, - }; - }); + const [filledProps, internalPicker, complexPicker, formatList, maskFormat] = useFilledProps( + props, + () => { + const { disabled, allowEmpty } = props; + + const mergedDisabled = separateConfig(disabled, false); + const mergedAllowEmpty = separateConfig(allowEmpty, false); + + return { + disabled: mergedDisabled, + allowEmpty: mergedAllowEmpty, + }; + }, + ); const { // Style @@ -227,9 +229,6 @@ function RangePicker( } }; - // ======================== Format ======================== - const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format); - // ======================== Values ======================== const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange] = useInnerValue( generateConfig, diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 5043b238f..20daec543 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -19,7 +19,6 @@ import { fillIndex } from '../util'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; import useDisabledBoundary from './hooks/useDisabledBoundary'; -import { useFieldFormat } from './hooks/useFieldFormat'; import useFilledProps from './hooks/useFilledProps'; import useInputReadOnly from './hooks/useInputReadOnly'; import useInvalidate from './hooks/useInvalidate'; @@ -82,6 +81,7 @@ export interface SinglePickerProps extends BasePickerPr } export interface MultiplePickerProps extends BasePickerProps { + /** Not support `time` or `datetime` picker */ multiple: true; // Value @@ -112,7 +112,8 @@ function Picker( ref: React.Ref, ) { // ========================= Prop ========================= - const [filledProps, internalPicker, complexPicker] = useFilledProps(props); + const [filledProps, internalPicker, complexPicker, formatList, maskFormat] = + useFilledProps(props); const { // Style @@ -197,9 +198,6 @@ function Picker( const [mergedOpen, triggerOpen] = useOpen(open, defaultOpen, onOpenChange); - // ======================== Format ======================== - const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format); - // ======================= Calendar ======================= const onInternalCalendarChange = (dates: DateType[], dateStrings: string[], info: BaseInfo) => { onCalendarChange?.(pickerParam(dates), pickerParam(dateStrings), info); @@ -226,36 +224,30 @@ function Picker( setActiveIndex, nextActiveIndex, activeIndexList, - ] = useRangeActive([disabled], []); + ] = useRangeActive([disabled]); - const onSharedFocus = (event: React.FocusEvent, index?: number) => { + const onSharedFocus = (event: React.FocusEvent) => { triggerFocus(true); - onFocus?.(event, { - range: getActiveRange(index ?? activeIndex), - }); + onFocus?.(event, {}); }; - const onSharedBlur = (event: React.FocusEvent, index?: number) => { + const onSharedBlur = (event: React.FocusEvent) => { triggerFocus(false); - onBlur?.(event, { - range: getActiveRange(index ?? activeIndex), - }); + onBlur?.(event, {}); }; // ========================= Mode ========================= - const [modes, setModes] = useMergedState<[PanelMode, PanelMode]>([picker, picker], { + const [mergedMode, setMode] = useMergedState(picker, { value: mode, }); - const mergedMode = modes[activeIndex] || picker; - /** Extends from `mergedMode` to patch `datetime` mode */ const internalMode: InternalMode = mergedMode === 'date' && showTime ? 'datetime' : mergedMode; - // ====================== PanelCount ====================== - const multiplePanel = internalMode === picker && internalMode !== 'time'; + // // ====================== PanelCount ====================== + // const multiplePanel = internalMode === picker && internalMode !== 'time'; // ======================= Show Now ======================= const mergedShowNow = useShowNow(internalPicker, mergedMode, showNow, showToday); @@ -353,7 +345,7 @@ function Picker( const clone = fillIndex(modes, activeIndex, nextMode); if (clone[0] !== modes[0] || clone[1] !== modes[1]) { - setModes(clone); + setMode(clone); } // Compatible with `onPanelChange` diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 43aa4bf9c..5a71fb716 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -2,9 +2,10 @@ import * as React from 'react'; import { toArray } from '../../../utils/miscUtil'; import { fillLocale } from '../../hooks/useLocale'; import { getTimeConfig } from '../../hooks/useTimeConfig'; -import type { InternalMode } from '../../interface'; +import type { FormatType, InternalMode } from '../../interface'; import type { RangePickerProps } from '../RangePicker'; import { fillClearIcon } from '../Selector/hooks/useClearIcon'; +import { useFieldFormat } from './useFieldFormat'; type PickedProps = Pick< RangePickerProps, @@ -18,7 +19,9 @@ type PickedProps = Pick< | 'clearIcon' | 'allowClear' | 'needConfirm' + | 'format' > & { + multiple?: boolean; // RangePicker showTime definition is different with Picker showTime?: any; value?: any; @@ -51,6 +54,8 @@ export default function useFilledProps< }, internalPicker: InternalMode, complexPicker: boolean, + formatList: FormatType[], + maskFormat: string, ] { const { locale, @@ -65,16 +70,20 @@ export default function useFilledProps< needConfirm, value, defaultValue, + multiple, + format, } = props; const values = React.useMemo(() => (value ? toArray(value) : value), [value]); const defaultValues = React.useMemo(() => toArray(defaultValue), [defaultValue]); + const mergedLocale = fillLocale(locale); + const filledProps = React.useMemo( () => ({ ...props, prefixCls, - locale: fillLocale(locale), + locale: mergedLocale, picker, styles, classNames, @@ -95,9 +104,12 @@ export default function useFilledProps< picker === 'date' && filledProps.showTime ? 'datetime' : picker; /** The picker is `datetime` or `time` */ - const complexPicker = internalPicker === 'time' || internalPicker === 'datetime'; + const complexPicker = internalPicker === 'time' || internalPicker === 'datetime' || multiple; const mergedNeedConfirm = needConfirm ?? complexPicker; + // ======================== Format ======================== + const [formatList, maskFormat] = useFieldFormat(internalPicker, mergedLocale, format); + // ======================== Merged ======================== const mergedProps = React.useMemo( () => ({ @@ -107,5 +119,5 @@ export default function useFilledProps< [filledProps, mergedNeedConfirm], ); - return [mergedProps, internalPicker, complexPicker]; + return [mergedProps, internalPicker, complexPicker, formatList, maskFormat]; } diff --git a/src/NewPicker/PickerInput/hooks/useRangeActive.ts b/src/NewPicker/PickerInput/hooks/useRangeActive.ts index 8f6569ef8..a8cd80fec 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeActive.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeActive.ts @@ -13,7 +13,7 @@ export type NextActive = (nextValue: RangeValueType) => numb */ export default function useRangeActive( disabled: boolean[], - empty: boolean[], + empty: boolean[] = [], ): [ focused: boolean, triggerFocus: (focused: boolean) => void, From 8a5805d98f8744f70ed4bb21ce10f60f9c5beadc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 11:34:57 +0800 Subject: [PATCH 227/380] chore: tmp of it --- src/NewPicker/PickerInput/RangePicker.tsx | 21 ++------------ src/NewPicker/PickerInput/SinglePicker.tsx | 27 ++++-------------- .../PickerInput/hooks/useFilledProps.ts | 28 ++++++++++++++++++- 3 files changed, 35 insertions(+), 41 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 87859201a..125b7c941 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -22,9 +22,7 @@ import PickerTrigger from '../PickerTrigger'; import { fillIndex } from '../util'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; -import useDisabledBoundary from './hooks/useDisabledBoundary'; import useFilledProps from './hooks/useFilledProps'; -import useInputReadOnly from './hooks/useInputReadOnly'; import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; import { usePickerRef } from './hooks/usePickerRef'; @@ -187,7 +185,6 @@ function RangePicker( onPickerValueChange, // Format - format, inputReadOnly, // Motion @@ -285,20 +282,8 @@ function RangePicker( // ======================= Show Now ======================= const mergedShowNow = useShowNow(internalPicker, mergedMode, showNow, showToday); - // ======================= ReadOnly ======================= - const mergedInputReadOnly = useInputReadOnly(formatList, inputReadOnly); - - // ======================= Boundary ======================= - const disabledBoundaryDate = useDisabledBoundary( - generateConfig, - locale, - disabledDate, - minDate, - maxDate, - ); - // ====================== Invalidate ====================== - const isInvalidateDate = useInvalidate(generateConfig, picker, disabledBoundaryDate, showTime); + const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, showTime); // ======================== Value ========================= const [ @@ -326,7 +311,7 @@ function RangePicker( activeIndexList, generateConfig, locale, - disabledBoundaryDate, + disabledDate, // minDate, // maxDate, ); @@ -747,7 +732,7 @@ function RangePicker( onInputChange={onSelectorInputChange} // Format format={formatList} - inputReadOnly={mergedInputReadOnly} + inputReadOnly={inputReadOnly} // Disabled disabled={disabled} // Open diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 20daec543..b038b65fd 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -18,9 +18,7 @@ import PickerTrigger from '../PickerTrigger'; import { fillIndex } from '../util'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; -import useDisabledBoundary from './hooks/useDisabledBoundary'; import useFilledProps from './hooks/useFilledProps'; -import useInputReadOnly from './hooks/useInputReadOnly'; import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; import { usePickerRef } from './hooks/usePickerRef'; @@ -95,10 +93,7 @@ export type PickerProps = | SinglePickerProps | MultiplePickerProps; -type InternalPickerProps = Omit< - MultiplePickerProps, - 'onChange' | 'onCalendarChange' -> & { +type ReplacedPickerProps = { onChange?: (date: DateType | DateType[], dateString: string | string[]) => void; onCalendarChange?: ( date: DateType | DateType[], @@ -159,7 +154,6 @@ function Picker( onPickerValueChange, // Format - format, inputReadOnly, // Motion @@ -183,7 +177,8 @@ function Picker( // Native onClick, - } = filledProps as InternalPickerProps; + } = filledProps as Omit> & + ReplacedPickerProps; // ========================= Refs ========================= const selectorRef = usePickerRef(ref); @@ -252,20 +247,8 @@ function Picker( // ======================= Show Now ======================= const mergedShowNow = useShowNow(internalPicker, mergedMode, showNow, showToday); - // ======================= ReadOnly ======================= - const mergedInputReadOnly = useInputReadOnly(formatList, inputReadOnly); - - // ======================= Boundary ======================= - const disabledBoundaryDate = useDisabledBoundary( - generateConfig, - locale, - disabledDate, - minDate, - maxDate, - ); - // ====================== Invalidate ====================== - const isInvalidateDate = useInvalidate(generateConfig, picker, disabledBoundaryDate, showTime); + const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, showTime); // ======================== Value ========================= const [ @@ -667,7 +650,7 @@ function Picker( onInputChange={onSelectorInputChange} // Format format={formatList} - inputReadOnly={mergedInputReadOnly} + inputReadOnly={inputReadOnly} // Disabled disabled={disabled} // Open diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 5a71fb716..3720cf4ca 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -5,10 +5,13 @@ import { getTimeConfig } from '../../hooks/useTimeConfig'; import type { FormatType, InternalMode } from '../../interface'; import type { RangePickerProps } from '../RangePicker'; import { fillClearIcon } from '../Selector/hooks/useClearIcon'; +import useDisabledBoundary from './useDisabledBoundary'; import { useFieldFormat } from './useFieldFormat'; +import useInputReadOnly from './useInputReadOnly'; type PickedProps = Pick< RangePickerProps, + | 'generateConfig' | 'locale' | 'picker' | 'prefixCls' @@ -20,6 +23,10 @@ type PickedProps = Pick< | 'allowClear' | 'needConfirm' | 'format' + | 'inputReadOnly' + | 'disabledDate' + | 'minDate' + | 'maxDate' > & { multiple?: boolean; // RangePicker showTime definition is different with Picker @@ -58,6 +65,7 @@ export default function useFilledProps< maskFormat: string, ] { const { + generateConfig, locale, picker = 'date', prefixCls = 'rc-picker', @@ -72,6 +80,10 @@ export default function useFilledProps< defaultValue, multiple, format, + inputReadOnly, + disabledDate, + minDate, + maxDate, } = props; const values = React.useMemo(() => (value ? toArray(value) : value), [value]); @@ -110,13 +122,27 @@ export default function useFilledProps< // ======================== Format ======================== const [formatList, maskFormat] = useFieldFormat(internalPicker, mergedLocale, format); + // ======================= ReadOnly ======================= + const mergedInputReadOnly = useInputReadOnly(formatList, inputReadOnly); + + // ======================= Boundary ======================= + const disabledBoundaryDate = useDisabledBoundary( + generateConfig, + locale, + disabledDate, + minDate, + maxDate, + ); + // ======================== Merged ======================== const mergedProps = React.useMemo( () => ({ ...filledProps, needConfirm: mergedNeedConfirm, + inputReadOnly: mergedInputReadOnly, + disabledDate: disabledBoundaryDate, }), - [filledProps, mergedNeedConfirm], + [filledProps, mergedNeedConfirm, mergedInputReadOnly, disabledBoundaryDate], ); return [mergedProps, internalPicker, complexPicker, formatList, maskFormat]; From 52dce605379d74c63ef836f1957f897eb4a9c8f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 11:38:19 +0800 Subject: [PATCH 228/380] chore: tmp of it --- src/NewPicker/PickerInput/SinglePicker.tsx | 3 +- .../PickerInput/hooks/useRangeValue.ts | 39 ++++++++----------- 2 files changed, 19 insertions(+), 23 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index b038b65fd..34f7ce966 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -93,7 +93,8 @@ export type PickerProps = | SinglePickerProps | MultiplePickerProps; -type ReplacedPickerProps = { +/** Internal usage. For cross function get same aligned props */ +export type ReplacedPickerProps = { onChange?: (date: DateType | DateType[], dateString: string | string[]) => void; onCalendarChange?: ( date: DateType | DateType[], diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 4738c49e6..e06af86f2 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -5,7 +5,8 @@ import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; import useSyncState from '../../hooks/useSyncState'; import type { BaseInfo, FormatType, Locale } from '../../interface'; import { fillIndex } from '../../util'; -import type { RangePickerProps, RangeValueType } from '../RangePicker'; +import type { RangePickerProps } from '../RangePicker'; +import type { ReplacedPickerProps } from '../SinglePicker'; import useLockEffect from './useLockEffect'; const EMPTY_VALUE: any[] = []; @@ -142,21 +143,19 @@ export function useInnerValue( +export default function useRangeValue< + ValueType extends object[], + DateType extends ValueType[number], +>( info: Pick< RangePickerProps, - | 'generateConfig' - | 'locale' - | 'allowEmpty' - | 'order' - | 'onCalendarChange' - | 'onChange' - | 'picker' - >, - mergedValue: RangeValueType, - setInnerValue: (nextValue: RangeValueType) => void, - getCalendarValue: () => RangeValueType, - triggerCalendarChange: TriggerCalendarChange>, + 'generateConfig' | 'locale' | 'allowEmpty' | 'order' | 'picker' + > & + ReplacedPickerProps, + mergedValue: ValueType, + setInnerValue: (nextValue: ValueType) => void, + getCalendarValue: () => ValueType, + triggerCalendarChange: TriggerCalendarChange, disabled: [boolean, boolean], formatList: FormatType[], focused: boolean, @@ -166,7 +165,7 @@ export default function useRangeValue( /** Trigger `onChange` by check `disabledDate` */ flushSubmit: (index: number, needTriggerChange: boolean) => void, /** Trigger `onChange` directly without check `disabledDate` */ - triggerSubmitChange: (value: RangeValueType) => boolean, + triggerSubmitChange: (value: ValueType) => boolean, ] { const { // MISC @@ -185,11 +184,7 @@ export default function useRangeValue( const orderOnChange = disabled.some((d) => d) ? false : order; // ============================= Util ============================= - const [getDateTexts, isSameDates] = useUtil>( - generateConfig, - locale, - formatList, - ); + const [getDateTexts, isSameDates] = useUtil(generateConfig, locale, formatList); // ============================ Values ============================ // Used for trigger `onChange` event. @@ -206,10 +201,10 @@ export default function useRangeValue( }, [mergedValue]); // ============================ Submit ============================ - const triggerSubmit = useEvent((nextValue?: RangeValueType) => { + const triggerSubmit = useEvent((nextValue?: ValueType) => { const isNullValue = nextValue === null; - const clone = [...(nextValue || submitValue())] as RangeValueType; + const clone = [...(nextValue || submitValue())] as ValueType; // Fill null value if (isNullValue) { From deac496b804c4dd5c211891130fd34e09742acfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 11:40:55 +0800 Subject: [PATCH 229/380] chore: refix Range type --- src/NewPicker/PickerInput/RangePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 125b7c941..fc7541ec7 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -291,7 +291,7 @@ function RangePicker( flushSubmit, /** Trigger `onChange` directly without check `disabledDate` */ triggerSubmitChange, - ] = useRangeValue( + ] = useRangeValue, DateType>( filledProps, mergedValue, setInnerValue, From a0ecd44fb8efa07089c4f0fceec57527b1b1fee3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 11:45:50 +0800 Subject: [PATCH 230/380] chore: fix type --- src/NewPicker/PickerInput/hooks/useRangeValue.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index e06af86f2..ca8591191 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -87,7 +87,7 @@ export function useCalendarValue(mergedValue: return [calendarValue, setCalendarValue] as const; } -export function useInnerValue( +export function useInnerValue( generateConfig: GenerateConfig, locale: Locale, formatList: FormatType[], @@ -143,10 +143,7 @@ export function useInnerValue( +export default function useRangeValue( info: Pick< RangePickerProps, 'generateConfig' | 'locale' | 'allowEmpty' | 'order' | 'picker' From d6733101eedd4a00d86022bc7d6cf4d409c4e6ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 13:56:40 +0800 Subject: [PATCH 231/380] chore: move more --- docs/examples/debug.tsx | 1 + src/NewPicker/PickerInput/RangePicker.tsx | 12 +++--------- src/NewPicker/PickerInput/SinglePicker.tsx | 8 ++------ src/NewPicker/PickerInput/hooks/useFilledProps.ts | 12 ++++++++++-- src/NewPicker/PickerInput/hooks/useRangeValue.ts | 10 +++++----- 5 files changed, 21 insertions(+), 22 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 1dd1f04fc..525c2a53e 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -96,6 +96,7 @@ export default () => { // input: MyInput, // }} // showTime + disabled panelRender={(ori) => <>2333{ori}} placeholder={['Start', 'End']} suffixIcon="๐Ÿงถ" diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index fc7541ec7..7c7f4fd0c 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -23,7 +23,6 @@ import { fillIndex } from '../util'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; import useFilledProps from './hooks/useFilledProps'; -import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; import { usePickerRef } from './hooks/usePickerRef'; import usePresets from './hooks/usePresets'; @@ -126,9 +125,8 @@ function RangePicker( ref: React.Ref, ) { // ========================= Prop ========================= - const [filledProps, internalPicker, complexPicker, formatList, maskFormat] = useFilledProps( - props, - () => { + const [filledProps, internalPicker, complexPicker, formatList, maskFormat, isInvalidateDate] = + useFilledProps(props, () => { const { disabled, allowEmpty } = props; const mergedDisabled = separateConfig(disabled, false); @@ -138,8 +136,7 @@ function RangePicker( disabled: mergedDisabled, allowEmpty: mergedAllowEmpty, }; - }, - ); + }); const { // Style @@ -282,9 +279,6 @@ function RangePicker( // ======================= Show Now ======================= const mergedShowNow = useShowNow(internalPicker, mergedMode, showNow, showToday); - // ====================== Invalidate ====================== - const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, showTime); - // ======================== Value ========================= const [ /** Trigger `onChange` by check `disabledDate` */ diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 34f7ce966..a28a9c6d5 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -19,7 +19,6 @@ import { fillIndex } from '../util'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; import useFilledProps from './hooks/useFilledProps'; -import useInvalidate from './hooks/useInvalidate'; import useOpen from './hooks/useOpen'; import { usePickerRef } from './hooks/usePickerRef'; import usePresets from './hooks/usePresets'; @@ -108,7 +107,7 @@ function Picker( ref: React.Ref, ) { // ========================= Prop ========================= - const [filledProps, internalPicker, complexPicker, formatList, maskFormat] = + const [filledProps, internalPicker, complexPicker, formatList, maskFormat, isInvalidateDate] = useFilledProps(props); const { @@ -248,9 +247,6 @@ function Picker( // ======================= Show Now ======================= const mergedShowNow = useShowNow(internalPicker, mergedMode, showNow, showToday); - // ====================== Invalidate ====================== - const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, showTime); - // ======================== Value ========================= const [ /** Trigger `onChange` by check `disabledDate` */ @@ -263,7 +259,7 @@ function Picker( setInnerValue, getCalendarValue, triggerCalendarChange, - disabled, + [], //disabled, formatList, focused, mergedOpen, diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 3720cf4ca..05b47c892 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -8,6 +8,9 @@ import { fillClearIcon } from '../Selector/hooks/useClearIcon'; import useDisabledBoundary from './useDisabledBoundary'; import { useFieldFormat } from './useFieldFormat'; import useInputReadOnly from './useInputReadOnly'; +import useInvalidate from './useInvalidate'; + +type UseInvalidate = typeof useInvalidate; type PickedProps = Pick< RangePickerProps, @@ -63,6 +66,7 @@ export default function useFilledProps< complexPicker: boolean, formatList: FormatType[], maskFormat: string, + isInvalidateDate: ReturnType>, ] { const { generateConfig, @@ -90,6 +94,7 @@ export default function useFilledProps< const defaultValues = React.useMemo(() => toArray(defaultValue), [defaultValue]); const mergedLocale = fillLocale(locale); + const mergedShowTime = getTimeConfig(props); const filledProps = React.useMemo( () => ({ @@ -102,7 +107,7 @@ export default function useFilledProps< order, components, clearIcon: fillClearIcon(prefixCls, allowClear, clearIcon), - showTime: getTimeConfig(props), + showTime: mergedShowTime, value: values, defaultValue: defaultValues, ...updater?.(), @@ -134,6 +139,9 @@ export default function useFilledProps< maxDate, ); + // ====================== Invalidate ====================== + const isInvalidateDate = useInvalidate(generateConfig, picker, disabledDate, mergedShowTime); + // ======================== Merged ======================== const mergedProps = React.useMemo( () => ({ @@ -145,5 +153,5 @@ export default function useFilledProps< [filledProps, mergedNeedConfirm, mergedInputReadOnly, disabledBoundaryDate], ); - return [mergedProps, internalPicker, complexPicker, formatList, maskFormat]; + return [mergedProps, internalPicker, complexPicker, formatList, maskFormat, isInvalidateDate]; } diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index ca8591191..19062729c 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -34,8 +34,8 @@ const EMPTY_VALUE: any[] = []; type TriggerCalendarChange = (calendarValues: ValueType) => void; -type Replace2String = { - [P in keyof T]: string; +type ReplaceListType = { + [P in keyof List]: Type; }; export function useUtil< @@ -45,7 +45,7 @@ export function useUtil< const getDateTexts = (dates: MergedValueType) => { return dates.map((date) => formatValue(date, { generateConfig, locale, format: formatList[0] }), - ) as any as Replace2String>; + ) as any as ReplaceListType, string>; }; const isSameDates = (source: MergedValueType, target: MergedValueType) => { @@ -95,7 +95,7 @@ export function useInnerValue>, + dateStrings: ReplaceListType, string>, info: BaseInfo, ) => void, /** Used for RangePicker */ @@ -153,7 +153,7 @@ export default function useRangeValue void, getCalendarValue: () => ValueType, triggerCalendarChange: TriggerCalendarChange, - disabled: [boolean, boolean], + disabled: ReplaceListType, boolean>, formatList: FormatType[], focused: boolean, open: boolean, From 65a1683675df7f641333ce62b1d5f60b0ccaf801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 16:22:10 +0800 Subject: [PATCH 232/380] chore: fix type --- src/NewPicker/PickerInput/hooks/useFilledProps.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 05b47c892..5ea420d6f 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -42,6 +42,8 @@ type ExcludeBooleanType = T extends boolean ? never : T; type ToArrayType = T extends any[] ? T : [T]; +type GetGeneric = T extends PickedProps ? U : never; + /** * Align the outer props with unique typed and fill undefined props. * This is shared with both RangePicker and Picker. This will do: @@ -49,8 +51,8 @@ type ToArrayType = T extends any[] ? T : [T]; * - handle the legacy props fill like `clearIcon` + `allowClear` = `clearIcon` */ export default function useFilledProps< - DateType extends object, - InProps extends PickedProps, + InProps extends PickedProps, + DateType extends GetGeneric, UpdaterProps extends object, >( props: InProps, From 56efe0d2e8573c0f89f92af48bc97fbd69753680 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 16:34:49 +0800 Subject: [PATCH 233/380] chore: fix type --- src/NewPicker/PickerInput/hooks/useFilledProps.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 5ea420d6f..881eee63e 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -40,10 +40,10 @@ type PickedProps = Pick< type ExcludeBooleanType = T extends boolean ? never : T; -type ToArrayType = T extends any[] ? T : [T]; - type GetGeneric = T extends PickedProps ? U : never; +type ToArrayType = T extends any[] ? T : DateType[]; + /** * Align the outer props with unique typed and fill undefined props. * This is shared with both RangePicker and Picker. This will do: @@ -61,8 +61,8 @@ export default function useFilledProps< filledProps: Omit & UpdaterProps & { showTime?: ExcludeBooleanType; - value?: ToArrayType; - defaultValue?: ToArrayType; + value?: ToArrayType; + defaultValue?: ToArrayType; }, internalPicker: InternalMode, complexPicker: boolean, From de227248f4b5fc0c2ab6020d0a85fcf081da2e14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 16:51:07 +0800 Subject: [PATCH 234/380] chore: more --- src/NewPicker/PickerInput/RangePicker.tsx | 47 +++------------- src/NewPicker/PickerInput/SinglePicker.tsx | 40 +++----------- .../PickerInput/hooks/useFieldsInvalidate.ts | 54 +++++++++++++++++++ 3 files changed, 66 insertions(+), 75 deletions(-) create mode 100644 src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 7c7f4fd0c..77017dc9f 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -22,6 +22,7 @@ import PickerTrigger from '../PickerTrigger'; import { fillIndex } from '../util'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; +import useFieldsInvalidate from './hooks/useFieldsInvalidate'; import useFilledProps from './hooks/useFilledProps'; import useOpen from './hooks/useOpen'; import { usePickerRef } from './hooks/usePickerRef'; @@ -306,50 +307,14 @@ function RangePicker( generateConfig, locale, disabledDate, - // minDate, - // maxDate, ); // ======================= Validate ======================= - const [fieldsInvalidates, setFieldsInvalidates] = React.useState<[boolean, boolean]>([ - false, - false, - ]); - - const onSelectorInvalid = (valid: boolean, index: number) => { - setFieldsInvalidates((ori) => fillIndex(ori, index, valid)); - }; - - /** - * For the Selector Input to mark as `aria-disabled` - */ - const submitInvalidates = React.useMemo(() => { - return fieldsInvalidates.map((invalid, index) => { - // If typing invalidate - if (invalid) { - return true; - } - - const current = calendarValue[index]; - - // Not check if all empty - if (!current) { - return false; - } - - // Not allow empty - if (!allowEmpty[index] && !current) { - return true; - } - - // Invalidate - if (current && isInvalidateDate(current)) { - return true; - } - - return false; - }) as [boolean, boolean]; - }, [calendarValue, fieldsInvalidates, isInvalidateDate, allowEmpty]); + const [submitInvalidates, onSelectorInvalid] = useFieldsInvalidate( + calendarValue, + isInvalidateDate, + allowEmpty, + ); // ===================== Picker Value ===================== const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue( diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index a28a9c6d5..20bf647ee 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -18,6 +18,7 @@ import PickerTrigger from '../PickerTrigger'; import { fillIndex } from '../util'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; +import useFieldsInvalidate from './hooks/useFieldsInvalidate'; import useFilledProps from './hooks/useFilledProps'; import useOpen from './hooks/useOpen'; import { usePickerRef } from './hooks/usePickerRef'; @@ -248,6 +249,7 @@ function Picker( const mergedShowNow = useShowNow(internalPicker, mergedMode, showNow, showToday); // ======================== Value ========================= + // TODO: Fix submit logic const [ /** Trigger `onChange` by check `disabledDate` */ flushSubmit, @@ -267,40 +269,10 @@ function Picker( ); // ======================= Validate ======================= - const [fieldsInvalidates, setFieldsInvalidates] = React.useState<[boolean, boolean]>([ - false, - false, - ]); - - const onSelectorInvalid = (index: number, valid: boolean) => { - setFieldsInvalidates((ori) => fillIndex(ori, index, valid)); - }; - - /** - * For the Selector Input to mark as `aria-disabled` - */ - const submitInvalidates = React.useMemo(() => { - return fieldsInvalidates.map((invalid, index) => { - // If typing invalidate - if (invalid) { - return true; - } - - const current = calendarValue[index]; - - // Not check if all empty - if (!current) { - return false; - } - - // Invalidate - if (current && isInvalidateDate(current)) { - return true; - } - - return false; - }) as [boolean, boolean]; - }, [calendarValue, fieldsInvalidates, isInvalidateDate, mergedAllowEmpty]); + const [submitInvalidates, onSelectorInvalid] = useFieldsInvalidate( + calendarValue, + isInvalidateDate, + ); // ===================== Picker Value ===================== const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue( diff --git a/src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts b/src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts new file mode 100644 index 000000000..5d7c7eb45 --- /dev/null +++ b/src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts @@ -0,0 +1,54 @@ +import * as React from 'react'; +import { fillIndex } from '../../util'; +import type useInvalidate from './useInvalidate'; + +/** + * Used to control each fields invalidate status + */ +export default function useFieldsInvalidate( + calendarValue: ValueType, + isInvalidateDate: ReturnType>, + allowEmpty: boolean[] = [], +) { + const [fieldsInvalidates, setFieldsInvalidates] = React.useState<[boolean, boolean]>([ + false, + false, + ]); + + const onSelectorInvalid = (invalid: boolean, index: number) => { + setFieldsInvalidates((ori) => fillIndex(ori, index, invalid)); + }; + + /** + * For the Selector Input to mark as `aria-disabled` + */ + const submitInvalidates = React.useMemo(() => { + return fieldsInvalidates.map((invalid, index) => { + // If typing invalidate + if (invalid) { + return true; + } + + const current = calendarValue[index]; + + // Not check if all empty + if (!current) { + return false; + } + + // Not allow empty + if (!allowEmpty[index] && !current) { + return true; + } + + // Invalidate + if (current && isInvalidateDate(current)) { + return true; + } + + return false; + }) as [boolean, boolean]; + }, [calendarValue, fieldsInvalidates, isInvalidateDate, allowEmpty]); + + return [submitInvalidates, onSelectorInvalid] as const; +} From 9f7092222a7201b7c0014af6d50d8ba51353a343 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 16:57:26 +0800 Subject: [PATCH 235/380] chore: more ts --- .../PickerInput/hooks/useRangePickerValue.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts index 4a36ba9d4..3f5fde27b 100644 --- a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts @@ -4,7 +4,7 @@ import * as React from 'react'; import type { GenerateConfig } from '../../../generate'; import { isSame } from '../../../utils/dateUtil'; import type { InternalMode, Locale, PanelMode } from '../../interface'; -import type { RangePickerProps, RangeValueType } from '../RangePicker'; +import type { RangePickerProps } from '../RangePicker'; export function offsetPanelDate( generateConfig: GenerateConfig, @@ -32,7 +32,7 @@ export function offsetPanelDate( } } -const EMPTY_LIST: RangeValueType = []; +const EMPTY_LIST = []; /** Merge the `showTime.defaultValue` into `pickerValue` */ function fillTimePickerValue( @@ -56,22 +56,22 @@ function fillTimePickerValue( return tmpDate; } -export default function useRangePickerValue( +export default function useRangePickerValue( generateConfig: GenerateConfig, locale: Locale, - calendarValue: RangeValueType, + calendarValue: ValueType, open: boolean, activeIndex: number, pickerMode: InternalMode, multiplePanel: boolean, - defaultPickerValue: RangeValueType = EMPTY_LIST, - pickerValue: RangeValueType = EMPTY_LIST, + defaultPickerValue: ValueType = EMPTY_LIST as ValueType, + pickerValue: ValueType = EMPTY_LIST as ValueType, // This is legacy from origin logic. // We will take `showTime.defaultValue` as the part of `pickerValue` - timeDefaultValue: RangeValueType = EMPTY_LIST, + timeDefaultValue: ValueType = EMPTY_LIST as ValueType, onPickerValueChange?: RangePickerProps['onPickerValueChange'], - minDate: DateType, - maxDate: DateType, + minDate?: DateType, + maxDate?: DateType, ): [currentIndexPickerValue: DateType, setCurrentIndexPickerValue: (value: DateType) => void] { // ======================== Active ======================== // `activeIndex` must be valid to avoid getting empty `pickerValue` From 8973deebec97018aa3e09b9f02b83ce3454d2430 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 17:31:18 +0800 Subject: [PATCH 236/380] chore: more types --- src/NewPicker/PickerInput/SinglePicker.tsx | 7 ++++-- .../PickerInput/hooks/useFilledProps.ts | 24 +++++++++++++++---- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 20bf647ee..cf79a3aea 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -212,6 +212,7 @@ function Picker( const calendarValue = getCalendarValue(); // ======================== Active ======================== + // In SinglePicker, we will always get `activeIndex` is 0. const [ focused, triggerFocus, @@ -275,6 +276,8 @@ function Picker( ); // ===================== Picker Value ===================== + const timeDefaultValue = showTime?.defaultValue; + const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue( generateConfig, locale, @@ -282,10 +285,10 @@ function Picker( mergedOpen, activeIndex, internalPicker, - multiplePanel, + false, // multiplePanel, defaultPickerValue, pickerValue, - showTime?.defaultValue, + timeDefaultValue ? [timeDefaultValue] : undefined, onPickerValueChange, minDate, maxDate, diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 881eee63e..5bce3a455 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -36,6 +36,8 @@ type PickedProps = Pick< showTime?: any; value?: any; defaultValue?: any; + pickerValue?: any; + defaultPickerValue?: any; }; type ExcludeBooleanType = T extends boolean ? never : T; @@ -44,6 +46,11 @@ type GetGeneric = T extends PickedProps ? U : never; type ToArrayType = T extends any[] ? T : DateType[]; +function useArrayIfNeeded(value: T | T[]) { + const values = React.useMemo(() => (value ? toArray(value) : value), [value]); + return values; +} + /** * Align the outer props with unique typed and fill undefined props. * This is shared with both RangePicker and Picker. This will do: @@ -63,6 +70,8 @@ export default function useFilledProps< showTime?: ExcludeBooleanType; value?: ToArrayType; defaultValue?: ToArrayType; + pickerValue?: ToArrayType; + defaultPickerValue?: ToArrayType; }, internalPicker: InternalMode, complexPicker: boolean, @@ -82,18 +91,23 @@ export default function useFilledProps< allowClear, clearIcon, needConfirm, - value, - defaultValue, multiple, format, inputReadOnly, disabledDate, minDate, maxDate, + + value, + defaultValue, + pickerValue, + defaultPickerValue, } = props; - const values = React.useMemo(() => (value ? toArray(value) : value), [value]); - const defaultValues = React.useMemo(() => toArray(defaultValue), [defaultValue]); + const values = useArrayIfNeeded(value); + const defaultValues = useArrayIfNeeded(defaultValue); + const pickerValues = useArrayIfNeeded(pickerValue); + const defaultPickerValues = useArrayIfNeeded(defaultPickerValue); const mergedLocale = fillLocale(locale); const mergedShowTime = getTimeConfig(props); @@ -112,6 +126,8 @@ export default function useFilledProps< showTime: mergedShowTime, value: values, defaultValue: defaultValues, + pickerValue: pickerValues, + defaultPickerValue: defaultPickerValues, ...updater?.(), }), [props], From 77bd7247ebee8a52388d4c689eaaf9e0a9405070 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 17:37:58 +0800 Subject: [PATCH 237/380] chore: more types --- src/NewPicker/PickerInput/SinglePicker.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index cf79a3aea..2bd47c1a6 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -220,7 +220,7 @@ function Picker( activeIndex, setActiveIndex, nextActiveIndex, - activeIndexList, + // activeIndexList, ] = useRangeActive([disabled]); const onSharedFocus = (event: React.FocusEvent) => { @@ -278,6 +278,18 @@ function Picker( // ===================== Picker Value ===================== const timeDefaultValue = showTime?.defaultValue; + // Proxy to single pickerValue + const onInternalPickerValueChange = ( + dates: DateType[], + info: BaseInfo & { source: 'reset' | 'panel' }, + ) => { + if (onPickerValueChange) { + const cleanInfo = { ...info }; + delete cleanInfo.range; + onPickerValueChange(dates[0], cleanInfo); + } + }; + const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue( generateConfig, locale, @@ -289,7 +301,7 @@ function Picker( defaultPickerValue, pickerValue, timeDefaultValue ? [timeDefaultValue] : undefined, - onPickerValueChange, + onInternalPickerValueChange, minDate, maxDate, ); From edbdba11c2b2d218c9b2ba285a6bf45a2a767b61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 17:44:16 +0800 Subject: [PATCH 238/380] chore: fix mode change --- src/NewPicker/PickerInput/SinglePicker.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 2bd47c1a6..fb08ba9f4 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -309,19 +309,13 @@ function Picker( // >>> Mode need wait for `pickerValue` const triggerModeChange = useEvent( (nextPickerValue: DateType, nextMode: PanelMode, triggerEvent?: boolean) => { - const clone = fillIndex(modes, activeIndex, nextMode); - - if (clone[0] !== modes[0] || clone[1] !== modes[1]) { - setMode(clone); - } + setMode(nextMode); // Compatible with `onPanelChange` if (onPanelChange && triggerEvent !== false) { - const clonePickerValue: DateType = [...calendarValue]; - if (nextPickerValue) { - clonePickerValue[activeIndex] = nextPickerValue; - } - onPanelChange(clonePickerValue, clone); + const lastPickerValue: DateType = + nextPickerValue || calendarValue[calendarValue.length - 1]; + onPanelChange(lastPickerValue, nextMode); } }, ); From 8b676d01df371414614943535d2f7b7f0364c37f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 7 Dec 2023 19:39:17 +0800 Subject: [PATCH 239/380] chore: clean up --- src/NewPicker/PickerInput/SinglePicker.tsx | 66 +++++++++++----------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index fb08ba9f4..bfe5c5cd7 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -219,7 +219,7 @@ function Picker( lastOperation, activeIndex, setActiveIndex, - nextActiveIndex, + // nextActiveIndex, // activeIndexList, ] = useRangeActive([disabled]); @@ -321,46 +321,46 @@ function Picker( ); // ======================== Change ======================== - const fillCalendarValue = (date: DateType, index: number) => - // Trigger change only when date changed - fillIndex(calendarValue, index, date); + // const fillCalendarValue = (date: DateType, index: number) => + // // Trigger change only when date changed + // fillIndex(calendarValue, index, date); // ======================== Submit ======================== /** - * Trigger by confirm operation. - * This function has already handle the `needConfirm` check logic. - * - Selector: enter key - * - Panel: OK button + * Different with RangePicker, confirm should check `multiple` logic. + * And confirm should not provide `date` value */ - const triggerPartConfirm = (date?: DateType, skipFocus?: boolean) => { - let nextValue = calendarValue; + const triggerConfirm = () => { + // const triggerConfirm = (date?: DateType, skipFocus?: boolean) => { + // let nextValue = calendarValue; - if (date) { - nextValue = fillCalendarValue(date, activeIndex); - } + // if (date) { + // nextValue = fillCalendarValue(date, activeIndex); + // } // Get next focus index - const nextIndex = nextActiveIndex(nextValue); + // const nextIndex = nextActiveIndex(nextValue); // Change calendar value and tell flush it - triggerCalendarChange(nextValue); - flushSubmit(activeIndex, nextIndex === null); - - if (nextIndex === null) { - triggerOpen(false, { force: true }); - } else if (!skipFocus) { - selectorRef.current.focus(nextIndex); - } + // triggerCalendarChange(nextValue); + // flushSubmit(activeIndex, nextIndex === null); + triggerSubmitChange(getCalendarValue()); + + // if (nextIndex === null) { + // triggerOpen(false, { force: true }); + // } else if (!skipFocus) { + // selectorRef.current.focus(nextIndex); + // } }; // ======================== Click ========================= const onSelectorClick: React.MouseEventHandler = (event) => { - if (!selectorRef.current.nativeElement.contains(document.activeElement)) { + if (!disabled && !selectorRef.current.nativeElement.contains(document.activeElement)) { // Click to focus the enabled input - const enabledIndex = disabled.findIndex((d) => !d); - if (enabledIndex >= 0) { - selectorRef.current.focus(enabledIndex); - } + // const enabledIndex = disabled.findIndex((d) => !d); + // if (enabledIndex >= 0) { + selectorRef.current.focus(); + // } } triggerOpen(true); @@ -433,7 +433,7 @@ function Picker( // >>> Trigger next active if !needConfirm // Fully logic check `useRangeValue` hook if (!needConfirm && !complexPicker && internalPicker === internalMode) { - triggerPartConfirm(date); + triggerConfirm(date); } }; @@ -500,7 +500,7 @@ function Picker( onHover={onPanelHover} // Submit needConfirm={needConfirm} - onSubmit={triggerPartConfirm} + onSubmit={triggerConfirm} // Preset presets={presetList} onPresetHover={onPresetHover} @@ -546,7 +546,7 @@ function Picker( const onSelectorKeyDown: SelectorProps['onKeyDown'] = (event) => { if (event.key === 'Tab') { - triggerPartConfirm(null, true); + triggerConfirm(null, true); } }; @@ -579,13 +579,13 @@ function Picker( // Trade as confirm on field leave if (!mergedOpen && lastOp === 'input') { triggerOpen(false); - triggerPartConfirm(null, true); + triggerConfirm(null, true); } // Submit with complex picker if (!mergedOpen && complexPicker && !needConfirm && lastOp === 'panel') { triggerOpen(true); - triggerPartConfirm(); + triggerConfirm(); } }, [mergedOpen]); @@ -620,7 +620,7 @@ function Picker( onFocus={onSelectorFocus} onBlur={onSelectorBlur} onKeyDown={onSelectorKeyDown} - onSubmit={triggerPartConfirm} + onSubmit={triggerConfirm} // Change value={hoverValues} maskFormat={maskFormat} From 1936a3051ec0900aa9389cc0f7e718f2df5682c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 8 Dec 2023 11:30:10 +0800 Subject: [PATCH 240/380] chore: more info --- src/NewPicker/PickerInput/RangePicker.tsx | 1 + src/NewPicker/PickerInput/SinglePicker.tsx | 55 ++++++++++++++----- .../PickerInput/hooks/useFilledProps.ts | 2 +- .../PickerInput/hooks/useInputReadOnly.ts | 3 +- .../PickerInput/hooks/useRangeValue.ts | 4 ++ 5 files changed, 48 insertions(+), 17 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 77017dc9f..bfaf3585b 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -425,6 +425,7 @@ function RangePicker( // ======================================================== // == Panels == // ======================================================== + // Save the offset with active bar position const [activeOffset, setActiveOffset] = React.useState(0); // ======================= Presets ======================== diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index bfe5c5cd7..5e2c08867 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -3,6 +3,7 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import omit from 'rc-util/lib/omit'; import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; +import { isSame } from '../../utils/dateUtil'; import type { BaseInfo, InternalMode, @@ -189,6 +190,23 @@ function Picker( return multiple ? values : values[0]; } + /** + * Toggles the presence of a value in an array. + * If the value exists in the array, removed it. + * Else add it. + */ + function toggleDates(list: DateType[], target: DateType) { + const index = list.findIndex((date) => + isSame(generateConfig, locale, date, target, internalPicker), + ); + + if (index === -1) { + return [...list, target]; + } + + return [...list].splice(index, 1); + } + // ========================= Open ========================= const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; @@ -375,43 +393,50 @@ function Picker( // ======================== Hover ========================= const [hoverSource, setHoverSource] = React.useState<'cell' | 'preset'>(null); - const [internalHoverValues, setInternalHoverValues] = React.useState(null); + const [internalHoverValue, setInternalHoverValue] = React.useState(null); const hoverValues = React.useMemo(() => { - return internalHoverValues || calendarValue; - }, [calendarValue, internalHoverValues]); + return internalHoverValue || calendarValue; + }, [calendarValue, internalHoverValue]); // Clean up `internalHoverValues` when closed React.useEffect(() => { if (!mergedOpen) { - setInternalHoverValues(null); + setInternalHoverValue(null); } }, [mergedOpen]); // ======================================================== // == Panels == // ======================================================== - const [activeOffset, setActiveOffset] = React.useState(0); + // const [activeOffset, setActiveOffset] = React.useState(0); // ======================= Presets ======================== - const presetList = usePresets(presets, ranges); + const presetList = usePresets(presets); - const onPresetHover = (nextValues: DateType | null) => { - setInternalHoverValues(nextValues); + const onPresetHover = (nextValue: DateType | null) => { + setInternalHoverValue(nextValue); setHoverSource('preset'); }; - const onPresetSubmit = (nextValues: DateType) => { - const passed = triggerSubmitChange(nextValues); + const onPresetSubmit = (nextValue: DateType) => { + // const passed = triggerSubmitChange(nextValues); + + // if (passed) { + // triggerOpen(false, { force: true }); + // } + + const nextCalendarValues = multiple ? toggleDates(getCalendarValue(), nextValue) : [nextValue]; + const passed = triggerSubmitChange(nextCalendarValues); - if (passed) { + if (passed && !multiple) { triggerOpen(false, { force: true }); } }; // ======================== Panel ========================= - const onPanelHover = (date: DateType) => { - setInternalHoverValues(date ? fillCalendarValue(date, activeIndex) : null); + const onPanelHover = (date: DateType | null) => { + setInternalHoverValue(date); setHoverSource('cell'); }; @@ -614,8 +639,8 @@ function Picker( suffixIcon={suffixIcon} // Active activeIndex={focused || mergedOpen ? activeIndex : null} - activeHelp={!!internalHoverValues} - allHelp={!!internalHoverValues && hoverSource === 'preset'} + activeHelp={!!internalHoverValue} + allHelp={!!internalHoverValue && hoverSource === 'preset'} focused={focused} onFocus={onSelectorFocus} onBlur={onSelectorBlur} diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 5bce3a455..95495e7c8 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -146,7 +146,7 @@ export default function useFilledProps< const [formatList, maskFormat] = useFieldFormat(internalPicker, mergedLocale, format); // ======================= ReadOnly ======================= - const mergedInputReadOnly = useInputReadOnly(formatList, inputReadOnly); + const mergedInputReadOnly = useInputReadOnly(formatList, inputReadOnly, multiple); // ======================= Boundary ======================= const disabledBoundaryDate = useDisabledBoundary( diff --git a/src/NewPicker/PickerInput/hooks/useInputReadOnly.ts b/src/NewPicker/PickerInput/hooks/useInputReadOnly.ts index 73a986a31..346ec4b6e 100644 --- a/src/NewPicker/PickerInput/hooks/useInputReadOnly.ts +++ b/src/NewPicker/PickerInput/hooks/useInputReadOnly.ts @@ -3,8 +3,9 @@ import type { FormatType } from '../../interface'; export default function useInputReadOnly( formatList: FormatType[], inputReadOnly?: boolean, + multiple?: boolean, ) { - if (typeof formatList[0] === 'function') { + if (typeof formatList[0] === 'function' || multiple) { return true; } diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 19062729c..d425d6c95 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -87,6 +87,10 @@ export function useCalendarValue(mergedValue: return [calendarValue, setCalendarValue] as const; } +/** + * Control the internal `value` align with prop `value` and provide a temp `calendarValue` for ui. + * `calendarValue` will be reset when blur & focus & open. + */ export function useInnerValue( generateConfig: GenerateConfig, locale: Locale, From 1a9496bda8280631b45af5be4298ea8c8233d019 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 8 Dec 2023 11:49:04 +0800 Subject: [PATCH 241/380] chore: more info --- docs/examples/debug.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 525c2a53e..652940cf8 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import '../../assets/index.less'; import type { Locale, PickerRef } from '../../src/NewPicker/interface'; import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; +import PickerPanel from '../../src/NewPicker/PickerPanel'; import dayjs, { type Dayjs } from 'dayjs'; import 'dayjs/locale/ar'; @@ -141,6 +142,7 @@ export default () => {
          + {/* Date: Fri, 8 Dec 2023 14:55:54 +0800 Subject: [PATCH 242/380] chore: rename to onSelect --- docs/examples/debug.tsx | 1 - src/NewPicker/PickerInput/Popup/index.tsx | 2 +- src/NewPicker/PickerInput/RangePicker.tsx | 2 +- src/NewPicker/PickerPanel/index.tsx | 31 ++++++++++++++++++----- 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 652940cf8..f54a16d0e 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -97,7 +97,6 @@ export default () => { // input: MyInput, // }} // showTime - disabled panelRender={(ori) => <>2333{ori}} placeholder={['Start', 'End']} suffixIcon="๐Ÿงถ" diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index cfb897c41..150da2fb0 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -101,7 +101,7 @@ export default function Popup(props: PopupProps) { onHover={onPresetHover} />
          - +
          ( value={panelValue} isInvalid={isInvalidateDate} onChange={null} - onCalendarChange={onPanelCalendarChange} + onSelect={onPanelCalendarChange} // PickerValue pickerValue={currentPickerValue} onPickerValueChange={setCurrentPickerValue} diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 8ce7edde5..bc4bc0c0b 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -1,5 +1,6 @@ -import { useMergedState } from 'rc-util'; +import { useEvent, useMergedState } from 'rc-util'; import * as React from 'react'; +import { isSame } from '../../utils/dateUtil'; import useLocale from '../hooks/useLocale'; import { getTimeConfig } from '../hooks/useTimeConfig'; import type { @@ -52,7 +53,7 @@ export interface PickerPanelProps defaultValue?: DateType | null; value?: DateType | null; onChange?: (date: DateType) => void; - onCalendarChange?: (date: DateType) => void; + onSelect?: (date: DateType) => void; // Panel control defaultPickerValue?: DateType | null; @@ -100,7 +101,7 @@ function PickerPanel( defaultValue, value, onChange, - onCalendarChange, + onSelect, // Picker control defaultPickerValue, @@ -155,7 +156,24 @@ function PickerPanel( // Interactive with `onChange` event which only trigger when the `mode` is `picker` const [mergedValue, setMergedValue] = useMergedState(defaultValue, { value, - onChange, + }); + + // Sync value and only trigger onChange event when changed + const triggerChange = useEvent((nextValue: DateType | null) => { + setMergedValue(nextValue); + + if ( + onChange && + !isSame( + generateConfig, + locale, + mergedValue, + nextValue, + picker === 'date' && mergedShowTime ? 'datetime' : picker, + ) + ) { + onChange?.(nextValue); + } }); // >>> CalendarValue @@ -165,10 +183,11 @@ function PickerPanel( const updateCalendarValue = (newDate: DateType) => { setCalendarValue(newDate); - onCalendarChange?.(newDate); + onSelect?.(newDate); if (mergedMode === picker) { - setMergedValue(newDate); + // setMergedValue(newDate); + triggerChange(newDate); } }; From af4707a239bfd9bcb429c3526adf3bc61a17f8f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 8 Dec 2023 15:19:12 +0800 Subject: [PATCH 243/380] refactor: rename onCalendarChange to onSelect --- src/NewPicker/PickerPanel/index.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index bc4bc0c0b..60a1a75e9 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -179,22 +179,14 @@ function PickerPanel( // >>> CalendarValue // CalendarValue is a temp value for user operation // which will only trigger `onCalendarChange` but not `onChange` - const [calendarValue, setCalendarValue] = React.useState(mergedValue); - const updateCalendarValue = (newDate: DateType) => { - setCalendarValue(newDate); - + const onInternalSelect = (newDate: DateType) => { onSelect?.(newDate); if (mergedMode === picker) { - // setMergedValue(newDate); triggerChange(newDate); } }; - React.useEffect(() => { - setCalendarValue(mergedValue); - }, [mergedValue]); - // >>> PickerValue // PickerValue is used to control the current displaying panel const [mergedPickerValue, setInternalPickerValue] = useMergedState( @@ -221,7 +213,7 @@ function PickerPanel( }; const onPanelValueChange = (newVal: DateType) => { - updateCalendarValue(newVal); + onInternalSelect(newVal); setPickerValue(newVal); // Update mode if needed @@ -285,7 +277,7 @@ function PickerPanel( // Value pickerValue={mergedPickerValue} onPickerValueChange={setPickerValue} - value={calendarValue} + value={mergedValue} onChange={onPanelValueChange} // Render cellRender={cellRender} From 9d770e9cc3bcee4fdcd9676f909ab59fabdf243c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 8 Dec 2023 15:26:31 +0800 Subject: [PATCH 244/380] chore: ts support multiple --- src/NewPicker/PickerInput/RangePicker.tsx | 4 +-- src/NewPicker/PickerInput/SinglePicker.tsx | 6 +++-- src/NewPicker/PickerPanel/index.tsx | 29 ++++++++++++++++++---- 3 files changed, 30 insertions(+), 9 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index a62754f86..41008ff10 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -457,7 +457,7 @@ function RangePicker( }; // >>> Calendar - const onPanelCalendarChange: PickerPanelProps['onChange'] = (date) => { + const onPanelSelect: PickerPanelProps['onChange'] = (date) => { lastOperation('panel'); const clone: RangeValueType = fillIndex(calendarValue, activeIndex, date); @@ -530,7 +530,7 @@ function RangePicker( value={panelValue} isInvalid={isInvalidateDate} onChange={null} - onSelect={onPanelCalendarChange} + onSelect={onPanelSelect} // PickerValue pickerValue={currentPickerValue} onPickerValueChange={setCurrentPickerValue} diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 5e2c08867..70e63a6db 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -72,6 +72,8 @@ export interface BasePickerProps extends SharedPickerPr } export interface SinglePickerProps extends BasePickerProps { + multiple?: false; + // Value value?: DateType; defaultValue?: DateType; @@ -447,7 +449,7 @@ function Picker( }; // >>> Calendar - const onPanelCalendarChange: PickerPanelProps['onChange'] = (date) => { + const onPanelSelect: PickerPanelProps['onChange'] = (date) => { lastOperation('panel'); const clone: DateType = fillIndex(calendarValue, activeIndex, date); @@ -516,7 +518,7 @@ function Picker( value={panelValue} isInvalid={isInvalidateDate} onChange={null} - onCalendarChange={onPanelCalendarChange} + onSelect={onPanelSelect} // PickerValue pickerValue={currentPickerValue} onPickerValueChange={setCurrentPickerValue} diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 60a1a75e9..36466b3df 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -37,7 +37,7 @@ export interface PickerPanelRef { nativeElement: HTMLDivElement; } -export interface PickerPanelProps +export interface BasePickerPanelProps extends Pick< SharedPanelProps, // MISC @@ -50,9 +50,6 @@ export interface PickerPanelProps prefixCls?: string; // Value - defaultValue?: DateType | null; - value?: DateType | null; - onChange?: (date: DateType) => void; onSelect?: (date: DateType) => void; // Panel control @@ -85,7 +82,29 @@ export interface PickerPanelProps components?: Components; } -function PickerPanel( +export interface SinglePickerPanelProps + extends BasePickerPanelProps { + multiple?: false; + + defaultValue?: DateType | null; + value?: DateType | null; + onChange?: (date: DateType) => void; +} + +export interface MultiplePickerPanelProps + extends BasePickerPanelProps { + multiple: true; + + defaultValue?: DateType[] | null; + value?: DateType[] | null; + onChange?: (date: DateType[]) => void; +} + +export type PickerPanelProps = + | SinglePickerPanelProps + | MultiplePickerPanelProps; + +function PickerPanel( props: PickerPanelProps, ref: React.Ref, ) { From 39c55a28d5a783d411040bcda0e55dddeddf600b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 8 Dec 2023 15:40:57 +0800 Subject: [PATCH 245/380] chore: tmp of it --- .../PickerInput/hooks/useFilledProps.ts | 10 +++--- src/NewPicker/PickerPanel/index.tsx | 34 +++++++++++++------ 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 95495e7c8..b563dc550 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -46,7 +46,7 @@ type GetGeneric = T extends PickedProps ? U : never; type ToArrayType = T extends any[] ? T : DateType[]; -function useArrayIfNeeded(value: T | T[]) { +function useList(value: T | T[]) { const values = React.useMemo(() => (value ? toArray(value) : value), [value]); return values; } @@ -104,10 +104,10 @@ export default function useFilledProps< defaultPickerValue, } = props; - const values = useArrayIfNeeded(value); - const defaultValues = useArrayIfNeeded(defaultValue); - const pickerValues = useArrayIfNeeded(pickerValue); - const defaultPickerValues = useArrayIfNeeded(defaultPickerValue); + const values = useList(value); + const defaultValues = useList(defaultValue); + const pickerValues = useList(pickerValue); + const defaultPickerValues = useList(defaultPickerValue); const mergedLocale = fillLocale(locale); const mergedShowTime = getTimeConfig(props); diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 36466b3df..79ebedbd5 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -13,6 +13,7 @@ import type { SharedTimeProps, } from '../interface'; import PickerContext from '../PickerInput/context'; +import { toArray } from '../util'; import DatePanel from './DatePanel'; import DateTimePanel from './DateTimePanel'; import DecadePanel from './DecadePanel'; @@ -104,6 +105,13 @@ export type PickerPanelProps = | SinglePickerPanelProps | MultiplePickerPanelProps; +type InternalPickerPanelProps = Omit< + PickerPanelProps, + 'onChange' +> & { + onChange?: (date: DateType | DateType[]) => void; +}; + function PickerPanel( props: PickerPanelProps, ref: React.Ref, @@ -117,6 +125,7 @@ function PickerPanel( prefixCls, // Value + multiple, defaultValue, value, onChange, @@ -144,7 +153,7 @@ function PickerPanel( // Components components = {}, - } = props; + } = props as InternalPickerPanelProps; const mergedPrefixCls = React.useContext(PickerContext)?.prefixCls || prefixCls || 'rc-picker'; @@ -173,23 +182,26 @@ function PickerPanel( // ========================= Value ========================== // >>> Real value // Interactive with `onChange` event which only trigger when the `mode` is `picker` - const [mergedValue, setMergedValue] = useMergedState(defaultValue, { + const [innerValue, setMergedValue] = useMergedState(defaultValue, { value, }); + const mergedValue = React.useMemo(() => toArray(innerValue), [innerValue])[0]; + // Sync value and only trigger onChange event when changed const triggerChange = useEvent((nextValue: DateType | null) => { setMergedValue(nextValue); if ( - onChange && - !isSame( - generateConfig, - locale, - mergedValue, - nextValue, - picker === 'date' && mergedShowTime ? 'datetime' : picker, - ) + onChange + // && + // !isSame( + // generateConfig, + // locale, + // mergedValue, + // nextValue, + // picker === 'date' && mergedShowTime ? 'datetime' : picker, + // ) ) { onChange?.(nextValue); } @@ -316,6 +328,6 @@ if (process.env.NODE_ENV !== 'production') { } // Make support generic -export default RefPanelPicker as ( +export default RefPanelPicker as ( props: PickerPanelProps & { ref?: React.Ref }, ) => React.ReactElement; From 44cb6c23adb2e3d120e2e82448d1648d74646da1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 8 Dec 2023 15:55:39 +0800 Subject: [PATCH 246/380] chore: split code --- src/NewPicker/PickerPanel/index.tsx | 29 ++++++++++++++++++----------- src/NewPicker/interface.tsx | 14 ++++++++++++-- 2 files changed, 30 insertions(+), 13 deletions(-) diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 79ebedbd5..8073d072f 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -1,6 +1,5 @@ import { useEvent, useMergedState } from 'rc-util'; import * as React from 'react'; -import { isSame } from '../../utils/dateUtil'; import useLocale from '../hooks/useLocale'; import { getTimeConfig } from '../hooks/useTimeConfig'; import type { @@ -186,14 +185,14 @@ function PickerPanel( value, }); - const mergedValue = React.useMemo(() => toArray(innerValue), [innerValue])[0]; + const mergedValue = React.useMemo(() => toArray(innerValue), [innerValue]); // Sync value and only trigger onChange event when changed const triggerChange = useEvent((nextValue: DateType | null) => { setMergedValue(nextValue); if ( - onChange + onChange // && // !isSame( // generateConfig, @@ -221,7 +220,7 @@ function PickerPanel( // >>> PickerValue // PickerValue is used to control the current displaying panel const [mergedPickerValue, setInternalPickerValue] = useMergedState( - defaultPickerValue || mergedValue || now, + defaultPickerValue || mergedValue[0] || now, { value: pickerValue, }, @@ -243,9 +242,11 @@ function PickerPanel( onPanelChange?.(viewDate || pickerValue, nextMode); }; - const onPanelValueChange = (newVal: DateType) => { - onInternalSelect(newVal); - setPickerValue(newVal); + const onPanelValuesChange = (nextValues: DateType[]) => { + const nextSingleValue = toArray(nextValues)[0]; + + onInternalSelect(nextSingleValue); + setPickerValue(nextSingleValue); // Update mode if needed if (mergedMode !== picker) { @@ -253,17 +254,21 @@ function PickerPanel( const index = queue.indexOf(mergedMode); const nextMode = queue[index + 1]; if (index >= 0 && nextMode) { - triggerModeChange(nextMode, newVal); + triggerModeChange(nextMode, nextSingleValue); } else if (mergedMode === 'month') { if (picker === 'date') { - triggerModeChange('date', newVal); + triggerModeChange('date', nextSingleValue); } else if (picker === 'week') { - triggerModeChange('week', newVal); + triggerModeChange('week', nextSingleValue); } } } }; + const onPanelValueChange = (nextValue: DateType) => { + onPanelValuesChange([nextValue]); + }; + // ======================= Hover Date ======================= const hoverRangeDate = React.useMemo<[DateType, DateType] | null>(() => { let start: DateType; @@ -308,8 +313,10 @@ function PickerPanel( // Value pickerValue={mergedPickerValue} onPickerValueChange={setPickerValue} - value={mergedValue} + value={mergedValue[0]} onChange={onPanelValueChange} + values={mergedValue} + onValuesChange={onPanelValuesChange} // Render cellRender={cellRender} disabledDate={disabledDate} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 351071417..abe971b0c 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -206,15 +206,25 @@ export interface SharedPanelProps { pickerValue: DateType; onPickerValueChange: (date: DateType) => void; value?: DateType; + /** + * Trigger for single value change. + * You can realize `onValuesChange` and ignore this to + * both handle single or multiple mode if need. + */ onChange: (date: DateType) => void; + /** + * Used for `multiple` mode. + * When not `multiple`, it will be `[value]`. + */ + values?: DateType[]; + onValuesChange: (values: DateType[]) => void; + // Mode onModeChange: (mode: PanelMode, date?: DateType) => void; // Render disabledDate?: DisabledDate; - minDate?: DateType; - maxDate?: DateType; cellRender?: CellRender; // Hover From 4ccfdf5f69cfe2b75533f681f8bc6ba12262db7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 8 Dec 2023 16:14:50 +0800 Subject: [PATCH 247/380] refactor: type of it --- docs/examples/debug.tsx | 7 ++++- src/NewPicker/PickerPanel/PanelBody.tsx | 4 +-- src/NewPicker/PickerPanel/context.ts | 35 +++++++++++++++---------- src/NewPicker/PickerPanel/index.tsx | 1 + src/NewPicker/interface.tsx | 3 +++ 5 files changed, 33 insertions(+), 17 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index f54a16d0e..3711e6555 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -141,7 +141,12 @@ export default () => {
          - + {/* (props: PanelBodyProps(props: PanelBodyProps { if (!disabled) { - onChange(currentDate); + onValuesChange([currentDate]); } }} onDoubleClick={() => { diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index c229074d5..b0ef7c6c7 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -1,23 +1,26 @@ import React from 'react'; -import type { GenerateConfig } from '../../generate'; -import type { CellRender, DisabledDate, Locale, PanelMode, SharedPanelProps } from '../interface'; +import type { PanelMode, SharedPanelProps } from '../interface'; -export interface PanelContextProps { +export interface PanelContextProps + extends Pick< + SharedPanelProps, + | 'prefixCls' + | 'disabledDate' + | 'cellRender' + | 'generateConfig' + | 'locale' + | 'onChange' + | 'onValuesChange' + | 'hoverValue' + | 'onHover' + | 'value' + | 'values' + | 'pickerValue' + > { type: PanelMode; // Shared - prefixCls: string; now: DateType; - disabledDate?: DisabledDate; - cellRender?: CellRender; - onChange: (date: DateType) => void; - locale: Locale; - hoverValue: [DateType, DateType] | null; - onHover?: (date: DateType | null) => void; - value?: DateType; - /** `pickerValue` is always exist */ - pickerValue: DateType; - generateConfig: GenerateConfig; } /** Used for each single Panel. e.g. DatePanel */ @@ -36,9 +39,11 @@ export function useInfo( disabledDate, cellRender, onChange, + onValuesChange, hoverValue, onHover, value, + values, pickerValue, } = props; @@ -46,11 +51,13 @@ export function useInfo( const info = { now, value, + values, pickerValue, prefixCls, disabledDate, cellRender, onChange, + onValuesChange, hoverValue, onHover, locale, diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 8073d072f..f60de058c 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -266,6 +266,7 @@ function PickerPanel( }; const onPanelValueChange = (nextValue: DateType) => { + console.error('change!!!'); onPanelValuesChange([nextValue]); }; diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index abe971b0c..c4045b088 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -218,6 +218,9 @@ export interface SharedPanelProps { * When not `multiple`, it will be `[value]`. */ values?: DateType[]; + /** + * For multiple value usage. + */ onValuesChange: (values: DateType[]) => void; // Mode From 86e182c3578e6e15fd6df1cb066ac1edf8ab01dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 8 Dec 2023 16:36:40 +0800 Subject: [PATCH 248/380] chore: clean up --- src/NewPicker/PickerPanel/DatePanel/index.tsx | 16 ++++++++-------- src/NewPicker/PickerPanel/DecadePanel/index.tsx | 4 +--- src/NewPicker/PickerPanel/MonthPanel/index.tsx | 13 ++----------- src/NewPicker/PickerPanel/PanelBody.tsx | 5 +++++ src/NewPicker/PickerPanel/QuarterPanel/index.tsx | 13 ++----------- src/NewPicker/PickerPanel/YearPanel/index.tsx | 13 ++----------- src/NewPicker/PickerPanel/index.tsx | 1 + 7 files changed, 21 insertions(+), 44 deletions(-) diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index 88f8ddd55..2d0435762 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -27,11 +27,9 @@ export default function DatePanel(props: DatePanelProps(props: DatePanelProps ({ - [`${prefixCls}-cell-in-view`]: isSameMonth(generateConfig, date, pickerValue), - [`${prefixCls}-cell-today`]: isSameDate(generateConfig, date, now), - [`${prefixCls}-cell-selected`]: - !hoverValue && mode !== 'week' && isSameDate(generateConfig, date, value), - }); + const getCellClassName = (date: DateType) => { + const classObj = { + [`${prefixCls}-cell-in-view`]: isSameMonth(generateConfig, date, pickerValue), + [`${prefixCls}-cell-today`]: isSameDate(generateConfig, date, now), + }; + + return classObj; + }; // ========================= Header ========================= const monthsLocale: string[] = diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx index 85c77455c..cbb64b7ad 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -6,8 +6,7 @@ import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; export default function DecadePanel(props: SharedPanelProps) { - const { prefixCls, locale, generateConfig, pickerValue, value, onPickerValueChange, hoverValue } = - props; + const { prefixCls, locale, generateConfig, pickerValue, onPickerValueChange } = props; const panelPrefixCls = `${prefixCls}-decade-panel`; @@ -48,7 +47,6 @@ export default function DecadePanel(props: SharedPanelProps(props: SharedPanelProps) { - const { - prefixCls, - locale, - generateConfig, - pickerValue, - value, - onPickerValueChange, - onModeChange, - hoverValue, - } = props; + const { prefixCls, locale, generateConfig, pickerValue, onPickerValueChange, onModeChange } = + props; const panelPrefixCls = `${prefixCls}-month-panel`; @@ -50,7 +42,6 @@ export default function MonthPanel(props: SharedPanelProps ({ [`${prefixCls}-cell-in-view`]: true, [`${prefixCls}-cell-today`]: isSameMonth(generateConfig, date, now), - [`${prefixCls}-cell-selected`]: !hoverValue && isSameMonth(generateConfig, date, value), }); // ========================= Header ========================= diff --git a/src/NewPicker/PickerPanel/PanelBody.tsx b/src/NewPicker/PickerPanel/PanelBody.tsx index 1dac4f03d..aa09cb201 100644 --- a/src/NewPicker/PickerPanel/PanelBody.tsx +++ b/src/NewPicker/PickerPanel/PanelBody.tsx @@ -52,6 +52,7 @@ export default function PanelBody(props: PanelBodyProps(props: PanelBodyProps { diff --git a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx index 50e3b5b1f..58c4a25a2 100644 --- a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx +++ b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx @@ -6,16 +6,8 @@ import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; export default function QuarterPanel(props: SharedPanelProps) { - const { - prefixCls, - locale, - generateConfig, - pickerValue, - value, - onPickerValueChange, - onModeChange, - hoverValue, - } = props; + const { prefixCls, locale, generateConfig, pickerValue, onPickerValueChange, onModeChange } = + props; const panelPrefixCls = `${prefixCls}-quarter-panel`; @@ -39,7 +31,6 @@ export default function QuarterPanel(props: SharedPanelProps ({ [`${prefixCls}-cell-in-view`]: true, [`${prefixCls}-cell-today`]: isSameQuarter(generateConfig, date, now), - [`${prefixCls}-cell-selected`]: !hoverValue && isSameQuarter(generateConfig, date, value), }); // ========================= Header ========================= diff --git a/src/NewPicker/PickerPanel/YearPanel/index.tsx b/src/NewPicker/PickerPanel/YearPanel/index.tsx index 3d66709c9..4512d20d0 100644 --- a/src/NewPicker/PickerPanel/YearPanel/index.tsx +++ b/src/NewPicker/PickerPanel/YearPanel/index.tsx @@ -6,16 +6,8 @@ import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; export default function YearPanel(props: SharedPanelProps) { - const { - prefixCls, - locale, - generateConfig, - pickerValue, - value, - onPickerValueChange, - onModeChange, - hoverValue, - } = props; + const { prefixCls, locale, generateConfig, pickerValue, onPickerValueChange, onModeChange } = + props; const panelPrefixCls = `${prefixCls}-year-panel`; @@ -47,7 +39,6 @@ export default function YearPanel(props: SharedPanelProps export interface MultiplePickerPanelProps extends BasePickerPanelProps { + /** multiple selection. Not support time or datetime picker */ multiple: true; defaultValue?: DateType[] | null; From 610b134fa154db6f42389c09ee2e9fe8051e4ce2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 8 Dec 2023 17:17:15 +0800 Subject: [PATCH 249/380] refactor: pass type --- src/NewPicker/PickerInput/SinglePicker.tsx | 19 ++-------- src/NewPicker/PickerPanel/DatePanel/index.tsx | 17 ++++----- .../PickerPanel/DateTimePanel/index.tsx | 13 +++++-- .../PickerPanel/DecadePanel/index.tsx | 9 ++--- .../PickerPanel/MonthPanel/index.tsx | 9 ++--- src/NewPicker/PickerPanel/PanelBody.tsx | 5 ++- .../PickerPanel/QuarterPanel/index.tsx | 9 ++--- src/NewPicker/PickerPanel/TimePanel/index.tsx | 20 +++++------ src/NewPicker/PickerPanel/YearPanel/index.tsx | 10 ++---- src/NewPicker/PickerPanel/context.ts | 35 ++++++++++++++----- src/NewPicker/PickerPanel/index.tsx | 6 +++- src/NewPicker/hooks/useToggleDates.ts | 26 ++++++++++++++ src/NewPicker/interface.tsx | 1 + 13 files changed, 99 insertions(+), 80 deletions(-) create mode 100644 src/NewPicker/hooks/useToggleDates.ts diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 70e63a6db..7e064a467 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -3,7 +3,7 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import omit from 'rc-util/lib/omit'; import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; -import { isSame } from '../../utils/dateUtil'; +import useToggleDates from '../hooks/useToggleDates'; import type { BaseInfo, InternalMode, @@ -192,22 +192,7 @@ function Picker( return multiple ? values : values[0]; } - /** - * Toggles the presence of a value in an array. - * If the value exists in the array, removed it. - * Else add it. - */ - function toggleDates(list: DateType[], target: DateType) { - const index = list.findIndex((date) => - isSame(generateConfig, locale, date, target, internalPicker), - ); - - if (index === -1) { - return [...list, target]; - } - - return [...list].splice(index, 1); - } + const toggleDates = useToggleDates(generateConfig, locale, internalPicker); // ========================= Open ========================= const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index 2d0435762..665013af0 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -7,7 +7,7 @@ import { isSameMonth, WEEK_DAY_COUNT, } from '../../../utils/dateUtil'; -import type { PanelMode, SharedPanelProps } from '../../interface'; +import type { InternalMode, PanelMode, SharedPanelProps } from '../../interface'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; @@ -16,8 +16,8 @@ export interface DatePanelProps extends SharedPanelProps { panelName?: PanelMode; rowClassName?: (date: DateType) => string; - /** Used for `WeekPanel` */ - mode?: PanelMode; + /** Used for `WeekPanel` or `DateTimePanel` */ + mode?: InternalMode; } export default function DatePanel(props: DatePanelProps) { @@ -29,7 +29,7 @@ export default function DatePanel(props: DatePanelProps(props: DatePanelProps(props: DatePanelProps +
          {/* Header */} (props: SharedPanelProps & { + mode: InternalMode; + } = { + ...props, + mode: 'datetime', + }; + // ============================== Render ============================== return (
          - - + +
          ); } diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx index cbb64b7ad..d2808081f 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -11,7 +11,7 @@ export default function DecadePanel(props: SharedPanelProps(props: SharedPanelProps +
          {/* Header */} (props: SharedPanelProps(props: SharedPanelProps +
          {/* Header */} (props: PanelBodyProps(props: PanelBodyProps { if (!disabled) { + // toggleDate(currentDate); onValuesChange([currentDate]); } }} diff --git a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx index 58c4a25a2..f0cfb529f 100644 --- a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx +++ b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx @@ -12,7 +12,7 @@ export default function QuarterPanel(props: SharedPanelProps(props: SharedPanelProps +
          {/* Header */} (props: SharedPanelProps) { +export interface TimePanelProps extends SharedPanelProps { + /** Used for `DateTimePanel` */ + mode?: InternalMode; +} + +export default function TimePanel(props: TimePanelProps) { const { prefixCls, value, locale, generateConfig, + mode = 'time', // Format showTime = {}, @@ -22,17 +28,11 @@ export default function TimePanel(props: SharedPanelProps +
          {value diff --git a/src/NewPicker/PickerPanel/YearPanel/index.tsx b/src/NewPicker/PickerPanel/YearPanel/index.tsx index 4512d20d0..9fc904455 100644 --- a/src/NewPicker/PickerPanel/YearPanel/index.tsx +++ b/src/NewPicker/PickerPanel/YearPanel/index.tsx @@ -12,7 +12,7 @@ export default function YearPanel(props: SharedPanelProps(props: SharedPanelProps +
          {/* Header */} extends Pick< @@ -9,18 +11,19 @@ export interface PanelContextProps | 'cellRender' | 'generateConfig' | 'locale' - | 'onChange' + // | 'onChange' | 'onValuesChange' | 'hoverValue' | 'onHover' - | 'value' + // | 'value' | 'values' | 'pickerValue' > { - type: PanelMode; + type: InternalMode; // Shared now: DateType; + toggleDate: (date: DateType) => void; } /** Used for each single Panel. e.g. DatePanel */ @@ -31,37 +34,51 @@ export const PanelContext = React.createContext(null!); */ export function useInfo( props: SharedPanelProps, -): [sharedProps: Omit, 'type'>, now: DateType] { + type: InternalMode, +): [sharedProps: PanelContextProps, now: DateType] { const { prefixCls, generateConfig, locale, disabledDate, cellRender, - onChange, + // onChange, onValuesChange, hoverValue, onHover, - value, + // value, values, pickerValue, + multiple, } = props; + // ========================= MISC ========================= const now = generateConfig.getNow(); + + // ======================== Toggle ======================== + const toggleDates = useToggleDates(generateConfig, locale, type); + const toggleDate = useEvent((date: DateType) => { + const nextValues = multiple ? toggleDates(values, date) : [date]; + onValuesChange(nextValues); + }); + + // ========================= Info ========================= const info = { now, - value, + // value, values, pickerValue, prefixCls, disabledDate, cellRender, - onChange, + // onChange, onValuesChange, hoverValue, onHover, locale, generateConfig, + toggleDate, + type, }; return [info, now]; diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 97d6e3354..19b7a4190 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -186,7 +186,10 @@ function PickerPanel( value, }); - const mergedValue = React.useMemo(() => toArray(innerValue), [innerValue]); + const mergedValue = React.useMemo(() => { + const values = toArray(innerValue); + return multiple ? values : values.slice(0, 1); + }, [innerValue, multiple]); // Sync value and only trigger onChange event when changed const triggerChange = useEvent((nextValue: DateType | null) => { @@ -319,6 +322,7 @@ function PickerPanel( onChange={onPanelValueChange} values={mergedValue} onValuesChange={onPanelValuesChange} + multiple={multiple} // Render cellRender={cellRender} disabledDate={disabledDate} diff --git a/src/NewPicker/hooks/useToggleDates.ts b/src/NewPicker/hooks/useToggleDates.ts new file mode 100644 index 000000000..b6e98504b --- /dev/null +++ b/src/NewPicker/hooks/useToggleDates.ts @@ -0,0 +1,26 @@ +import type { GenerateConfig } from '../../generate'; +import { isSame } from '../../utils/dateUtil'; +import type { InternalMode, Locale } from '../interface'; + +/** + * Toggles the presence of a value in an array. + * If the value exists in the array, removed it. + * Else add it. + */ +export default function useToggleDates( + generateConfig: GenerateConfig, + locale: Locale, + panelMode: InternalMode, +) { + function toggleDates(list: DateType[], target: DateType) { + const index = list.findIndex((date) => isSame(generateConfig, locale, date, target, panelMode)); + + if (index === -1) { + return [...list, target]; + } + + return [...list].splice(index, 1); + } + + return toggleDates; +} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index c4045b088..5802276d9 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -206,6 +206,7 @@ export interface SharedPanelProps { pickerValue: DateType; onPickerValueChange: (date: DateType) => void; value?: DateType; + multiple?: boolean; /** * Trigger for single value change. * You can realize `onValuesChange` and ignore this to From 6a46dd5cc93eebac6de44f22598b32940bb8a40f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 8 Dec 2023 17:50:01 +0800 Subject: [PATCH 250/380] chore: part of it --- src/NewPicker/PickerPanel/PanelBody.tsx | 4 ++-- src/NewPicker/PickerPanel/context.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/NewPicker/PickerPanel/PanelBody.tsx b/src/NewPicker/PickerPanel/PanelBody.tsx index 83728c446..3acd10e2d 100644 --- a/src/NewPicker/PickerPanel/PanelBody.tsx +++ b/src/NewPicker/PickerPanel/PanelBody.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; import { formatValue, isInRange, isSame } from '../../utils/dateUtil'; -import type { PanelMode } from '../interface'; +import type { InternalMode } from '../interface'; import { PanelContext, PickerHackContext } from './context'; export interface PanelBodyProps { @@ -24,7 +24,7 @@ export interface PanelBodyProps { rowClassName?: (date: DateType) => string; // Mode - mode: PanelMode; + mode: InternalMode; } export default function PanelBody(props: PanelBodyProps) { diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index b353c5de3..ed7239305 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -1,7 +1,7 @@ import { useEvent } from 'rc-util'; import React from 'react'; import useToggleDates from '../hooks/useToggleDates'; -import type { InternalMode, SharedPanelProps } from '../interface'; +import type { PanelMode, SharedPanelProps } from '../interface'; export interface PanelContextProps extends Pick< @@ -19,7 +19,7 @@ export interface PanelContextProps | 'values' | 'pickerValue' > { - type: InternalMode; + type: PanelMode; // Shared now: DateType; @@ -34,7 +34,7 @@ export const PanelContext = React.createContext(null!); */ export function useInfo( props: SharedPanelProps, - type: InternalMode, + type: PanelMode, ): [sharedProps: PanelContextProps, now: DateType] { const { prefixCls, From 76f8ea2279c4948a89842d2ba3094d5a8c84e373 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 09:46:00 +0800 Subject: [PATCH 251/380] chore: tmp of selection --- src/NewPicker/PickerPanel/DatePanel/index.tsx | 2 ++ src/NewPicker/PickerPanel/context.ts | 15 ++++++++++----- src/NewPicker/PickerPanel/index.tsx | 8 ++++++-- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index 665013af0..b20a0bdec 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -36,6 +36,8 @@ export default function DatePanel(props: DatePanelProps>>>>>>>', props); + const panelPrefixCls = `${prefixCls}-${panelName}-panel`; const cellPrefixCls = `${prefixCls}-cell`; diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index ed7239305..18a3a8ed1 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -1,7 +1,7 @@ import { useEvent } from 'rc-util'; import React from 'react'; import useToggleDates from '../hooks/useToggleDates'; -import type { PanelMode, SharedPanelProps } from '../interface'; +import type { InternalMode, PanelMode, SharedPanelProps } from '../interface'; export interface PanelContextProps extends Pick< @@ -19,7 +19,10 @@ export interface PanelContextProps | 'values' | 'pickerValue' > { - type: PanelMode; + /** Tell current panel type */ + panelType: PanelMode; + /** Tell the current picker type. Includes 'datetime' */ + internalPicker: InternalMode; // Shared now: DateType; @@ -34,7 +37,8 @@ export const PanelContext = React.createContext(null!); */ export function useInfo( props: SharedPanelProps, - type: PanelMode, + panelType: PanelMode, + internalPicker: InternalMode, ): [sharedProps: PanelContextProps, now: DateType] { const { prefixCls, @@ -56,7 +60,7 @@ export function useInfo( const now = generateConfig.getNow(); // ======================== Toggle ======================== - const toggleDates = useToggleDates(generateConfig, locale, type); + const toggleDates = useToggleDates(generateConfig, locale, internalPicker); const toggleDate = useEvent((date: DateType) => { const nextValues = multiple ? toggleDates(values, date) : [date]; onValuesChange(nextValues); @@ -78,7 +82,8 @@ export function useInfo( locale, generateConfig, toggleDate, - type, + panelType, + internalPicker, }; return [info, now]; diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 19b7a4190..7d346ca90 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -5,6 +5,7 @@ import { getTimeConfig } from '../hooks/useTimeConfig'; import type { CellRender, Components, + InternalMode, OnPanelChange, PanelMode, PickerMode, @@ -298,8 +299,11 @@ function PickerPanel( }, [hoverValue, generateConfig]); // ======================= Components ======================= - const componentName = mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode; - const PanelComponent = components[componentName] || DefaultComponents[componentName] || DatePanel; + const internalMode: InternalMode = + mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode; + const PanelComponent = components[internalMode] || DefaultComponents[internalMode] || DatePanel; + + const internalPicker: InternalMode = picker === 'date' && mergedShowTime ? 'datetime' : picker; // ========================= Render ========================= return ( From e65bbecf1e0a210ad1b8cf865798190773080662 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 10:13:50 +0800 Subject: [PATCH 252/380] refactor: toggle logic outside --- src/NewPicker/PickerPanel/context.ts | 29 ++++++++-------- src/NewPicker/PickerPanel/index.tsx | 49 ++++++++++++++-------------- src/NewPicker/interface.tsx | 24 +++++++++----- 3 files changed, 54 insertions(+), 48 deletions(-) diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index 18a3a8ed1..efd7752a1 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -1,6 +1,6 @@ -import { useEvent } from 'rc-util'; +// import { useEvent } from 'rc-util'; import React from 'react'; -import useToggleDates from '../hooks/useToggleDates'; +// import useToggleDates from '../hooks/useToggleDates'; import type { InternalMode, PanelMode, SharedPanelProps } from '../interface'; export interface PanelContextProps @@ -12,7 +12,8 @@ export interface PanelContextProps | 'generateConfig' | 'locale' // | 'onChange' - | 'onValuesChange' + // | 'onValuesChange' + | 'onSelect' | 'hoverValue' | 'onHover' // | 'value' @@ -26,7 +27,6 @@ export interface PanelContextProps // Shared now: DateType; - toggleDate: (date: DateType) => void; } /** Used for each single Panel. e.g. DatePanel */ @@ -47,24 +47,25 @@ export function useInfo( disabledDate, cellRender, // onChange, - onValuesChange, + // onValuesChange, hoverValue, onHover, // value, values, pickerValue, - multiple, + // multiple, + onSelect, } = props; // ========================= MISC ========================= const now = generateConfig.getNow(); - // ======================== Toggle ======================== - const toggleDates = useToggleDates(generateConfig, locale, internalPicker); - const toggleDate = useEvent((date: DateType) => { - const nextValues = multiple ? toggleDates(values, date) : [date]; - onValuesChange(nextValues); - }); + // // ======================== Toggle ======================== + // const toggleDates = useToggleDates(generateConfig, locale, internalPicker); + // const toggleDate = useEvent((date: DateType) => { + // const nextValues = multiple ? toggleDates(values, date) : [date]; + // onValuesChange(nextValues); + // }); // ========================= Info ========================= const info = { @@ -76,12 +77,12 @@ export function useInfo( disabledDate, cellRender, // onChange, - onValuesChange, + // onValuesChange, hoverValue, onHover, locale, generateConfig, - toggleDate, + onSelect, panelType, internalPicker, }; diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 7d346ca90..c5f1389fb 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -2,6 +2,7 @@ import { useEvent, useMergedState } from 'rc-util'; import * as React from 'react'; import useLocale from '../hooks/useLocale'; import { getTimeConfig } from '../hooks/useTimeConfig'; +import useToggleDates from '../hooks/useToggleDates'; import type { CellRender, Components, @@ -180,6 +181,13 @@ function PickerPanel( postState: (val) => val || 'date', }); + const internalMode: InternalMode = + mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode; + const internalPicker: InternalMode = picker === 'date' && mergedShowTime ? 'datetime' : picker; + + // ========================= Toggle ========================= + const toggleDates = useToggleDates(generateConfig, locale, internalPicker); + // ========================= Value ========================== // >>> Real value // Interactive with `onChange` event which only trigger when the `mode` is `picker` @@ -193,9 +201,11 @@ function PickerPanel( }, [innerValue, multiple]); // Sync value and only trigger onChange event when changed - const triggerChange = useEvent((nextValue: DateType | null) => { + const triggerChange = useEvent((nextValue: DateType[] | null) => { setMergedValue(nextValue); + // TODO: compare values + if ( onChange // && @@ -207,20 +217,22 @@ function PickerPanel( // picker === 'date' && mergedShowTime ? 'datetime' : picker, // ) ) { - onChange?.(nextValue); + onChange?.(multiple ? nextValue : nextValue[0]); } }); // >>> CalendarValue // CalendarValue is a temp value for user operation // which will only trigger `onCalendarChange` but not `onChange` - const onInternalSelect = (newDate: DateType) => { + const onInternalSelect = useEvent((newDate: DateType) => { onSelect?.(newDate); if (mergedMode === picker) { - triggerChange(newDate); + const nextValues = multiple ? toggleDates(mergedValue, newDate) : [newDate]; + + triggerChange(nextValues); } - }; + }); // >>> PickerValue // PickerValue is used to control the current displaying panel @@ -247,11 +259,9 @@ function PickerPanel( onPanelChange?.(viewDate || pickerValue, nextMode); }; - const onPanelValuesChange = (nextValues: DateType[]) => { - const nextSingleValue = toArray(nextValues)[0]; - - onInternalSelect(nextSingleValue); - setPickerValue(nextSingleValue); + const onPanelValueSelect = (nextValue: DateType) => { + onInternalSelect(nextValue); + setPickerValue(nextValue); // Update mode if needed if (mergedMode !== picker) { @@ -259,22 +269,17 @@ function PickerPanel( const index = queue.indexOf(mergedMode); const nextMode = queue[index + 1]; if (index >= 0 && nextMode) { - triggerModeChange(nextMode, nextSingleValue); + triggerModeChange(nextMode, nextValue); } else if (mergedMode === 'month') { if (picker === 'date') { - triggerModeChange('date', nextSingleValue); + triggerModeChange('date', nextValue); } else if (picker === 'week') { - triggerModeChange('week', nextSingleValue); + triggerModeChange('week', nextValue); } } } }; - const onPanelValueChange = (nextValue: DateType) => { - console.error('change!!!'); - onPanelValuesChange([nextValue]); - }; - // ======================= Hover Date ======================= const hoverRangeDate = React.useMemo<[DateType, DateType] | null>(() => { let start: DateType; @@ -299,12 +304,8 @@ function PickerPanel( }, [hoverValue, generateConfig]); // ======================= Components ======================= - const internalMode: InternalMode = - mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode; const PanelComponent = components[internalMode] || DefaultComponents[internalMode] || DatePanel; - const internalPicker: InternalMode = picker === 'date' && mergedShowTime ? 'datetime' : picker; - // ========================= Render ========================= return (
          @@ -323,10 +324,8 @@ function PickerPanel( pickerValue={mergedPickerValue} onPickerValueChange={setPickerValue} value={mergedValue[0]} - onChange={onPanelValueChange} + onSelect={onPanelValueSelect} values={mergedValue} - onValuesChange={onPanelValuesChange} - multiple={multiple} // Render cellRender={cellRender} disabledDate={disabledDate} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 5802276d9..97be36a47 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -206,23 +206,29 @@ export interface SharedPanelProps { pickerValue: DateType; onPickerValueChange: (date: DateType) => void; value?: DateType; - multiple?: boolean; /** - * Trigger for single value change. - * You can realize `onValuesChange` and ignore this to - * both handle single or multiple mode if need. + * Should trigger when user select the cell. + * PickerPanel will mark as `value` in single mode, + * Or toggle `values` in multiple mode. */ - onChange: (date: DateType) => void; + onSelect: (date: DateType) => void; + // multiple?: boolean; + // /** + // * Trigger for single value change. + // * You can realize `onValuesChange` and ignore this to + // * both handle single or multiple mode if need. + // */ + // onChange: (date: DateType) => void; /** * Used for `multiple` mode. * When not `multiple`, it will be `[value]`. */ values?: DateType[]; - /** - * For multiple value usage. - */ - onValuesChange: (values: DateType[]) => void; + // /** + // * For multiple value usage. + // */ + // onValuesChange: (values: DateType[]) => void; // Mode onModeChange: (mode: PanelMode, date?: DateType) => void; From 5a0d5f47ee51467cb971d16910f87b4fc6dd6ce4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 10:18:33 +0800 Subject: [PATCH 253/380] refactor: use unique panelType --- src/NewPicker/PickerPanel/PanelBody.tsx | 28 ++++++++++++------------- src/NewPicker/PickerPanel/context.ts | 19 ----------------- 2 files changed, 14 insertions(+), 33 deletions(-) diff --git a/src/NewPicker/PickerPanel/PanelBody.tsx b/src/NewPicker/PickerPanel/PanelBody.tsx index 3acd10e2d..897f0fc75 100644 --- a/src/NewPicker/PickerPanel/PanelBody.tsx +++ b/src/NewPicker/PickerPanel/PanelBody.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; import { formatValue, isInRange, isSame } from '../../utils/dateUtil'; -import type { InternalMode } from '../interface'; +import type { PanelMode } from '../interface'; import { PanelContext, PickerHackContext } from './context'; export interface PanelBodyProps { @@ -24,12 +24,12 @@ export interface PanelBodyProps { rowClassName?: (date: DateType) => string; // Mode - mode: InternalMode; + panelType: PanelMode; } export default function PanelBody(props: PanelBodyProps) { const { - mode, + panelType, rowNum, colNum, baseDate, @@ -44,7 +44,7 @@ export default function PanelBody(props: PanelBodyProps(props: PanelBodyProps(props: PanelBodyProps(props: PanelBodyProps(props: PanelBodyProps { if (!disabled) { - // toggleDate(currentDate); - onValuesChange([currentDate]); + onSelect(currentDate); } }} onDoubleClick={() => { @@ -153,7 +153,7 @@ export default function PanelBody(props: PanelBodyProps @@ -11,12 +9,9 @@ export interface PanelContextProps | 'cellRender' | 'generateConfig' | 'locale' - // | 'onChange' - // | 'onValuesChange' | 'onSelect' | 'hoverValue' | 'onHover' - // | 'value' | 'values' | 'pickerValue' > { @@ -46,38 +41,24 @@ export function useInfo( locale, disabledDate, cellRender, - // onChange, - // onValuesChange, hoverValue, onHover, - // value, values, pickerValue, - // multiple, onSelect, } = props; // ========================= MISC ========================= const now = generateConfig.getNow(); - // // ======================== Toggle ======================== - // const toggleDates = useToggleDates(generateConfig, locale, internalPicker); - // const toggleDate = useEvent((date: DateType) => { - // const nextValues = multiple ? toggleDates(values, date) : [date]; - // onValuesChange(nextValues); - // }); - // ========================= Info ========================= const info = { now, - // value, values, pickerValue, prefixCls, disabledDate, cellRender, - // onChange, - // onValuesChange, hoverValue, onHover, locale, From 7bfe07d0a6257d9fe495239ae2e2d1a3075526a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 10:27:39 +0800 Subject: [PATCH 254/380] refactor: logic adjust --- src/NewPicker/PickerPanel/DatePanel/index.tsx | 13 +++++-------- src/NewPicker/PickerPanel/DateTimePanel/index.tsx | 13 +++---------- src/NewPicker/PickerPanel/DecadePanel/index.tsx | 1 - src/NewPicker/PickerPanel/MonthPanel/index.tsx | 1 - src/NewPicker/PickerPanel/PanelBody.tsx | 2 +- src/NewPicker/PickerPanel/QuarterPanel/index.tsx | 1 - .../PickerPanel/TimePanel/TimePanelBody/index.tsx | 14 +++++--------- src/NewPicker/PickerPanel/TimePanel/index.tsx | 10 +++------- src/NewPicker/PickerPanel/YearPanel/index.tsx | 2 -- src/NewPicker/PickerPanel/context.ts | 6 +----- 10 files changed, 18 insertions(+), 45 deletions(-) diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index b20a0bdec..9f7285e77 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -7,7 +7,7 @@ import { isSameMonth, WEEK_DAY_COUNT, } from '../../../utils/dateUtil'; -import type { InternalMode, PanelMode, SharedPanelProps } from '../../interface'; +import type { PanelMode, SharedPanelProps } from '../../interface'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; @@ -16,8 +16,8 @@ export interface DatePanelProps extends SharedPanelProps { panelName?: PanelMode; rowClassName?: (date: DateType) => string; - /** Used for `WeekPanel` or `DateTimePanel` */ - mode?: InternalMode; + /** Used for `WeekPanel` */ + mode?: PanelMode; } export default function DatePanel(props: DatePanelProps) { @@ -31,13 +31,11 @@ export default function DatePanel(props: DatePanelProps>>>>>>>', props); - const panelPrefixCls = `${prefixCls}-${panelName}-panel`; const cellPrefixCls = `${prefixCls}-cell`; @@ -64,7 +62,7 @@ export default function DatePanel(props: DatePanelProps { if (!disabled) { - onChange(date); + onSelect(date); } }} onMouseEnter={() => { @@ -188,7 +186,6 @@ export default function DatePanel(props: DatePanelProps(props: SharedPanelProps & { - mode: InternalMode; - } = { - ...props, - mode: 'datetime', - }; - // ============================== Render ============================== return (
          - - + +
          ); } diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx index d2808081f..c6fc19549 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -77,7 +77,6 @@ export default function DecadePanel(props: SharedPanelProps(props: SharedPanelProps { rowClassName?: (date: DateType) => string; // Mode - panelType: PanelMode; + panelType?: PanelMode; } export default function PanelBody(props: PanelBodyProps) { diff --git a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx index f0cfb529f..121805f98 100644 --- a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx +++ b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx @@ -69,7 +69,6 @@ export default function QuarterPanel(props: SharedPanelProps(props: SharedTimeProps>(PanelContext); + const { prefixCls, values, generateConfig, locale, onSelect, pickerValue } = + React.useContext>(PanelContext); + + const value = values?.[0] || null; const { onCellDblClick } = React.useContext(PickerHackContext); @@ -260,7 +256,7 @@ export default function TimePanelBody(props: SharedTimeProps extends SharedPanelProps { - /** Used for `DateTimePanel` */ - mode?: InternalMode; -} +export type TimePanelProps = SharedPanelProps; export default function TimePanel(props: TimePanelProps) { const { @@ -17,7 +14,6 @@ export default function TimePanel(props: TimePanelProps(props: TimePanelProps(props: SharedPanelProps
          @@ -84,7 +83,6 @@ export default function YearPanel(props: SharedPanelProps extends Pick< @@ -17,8 +17,6 @@ export interface PanelContextProps > { /** Tell current panel type */ panelType: PanelMode; - /** Tell the current picker type. Includes 'datetime' */ - internalPicker: InternalMode; // Shared now: DateType; @@ -33,7 +31,6 @@ export const PanelContext = React.createContext(null!); export function useInfo( props: SharedPanelProps, panelType: PanelMode, - internalPicker: InternalMode, ): [sharedProps: PanelContextProps, now: DateType] { const { prefixCls, @@ -65,7 +62,6 @@ export function useInfo( generateConfig, onSelect, panelType, - internalPicker, }; return [info, now]; From ce91cc06b651c072fff9bef31f22f576897ffa3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 10:48:12 +0800 Subject: [PATCH 255/380] chore: support panel multiple --- docs/examples/debug.tsx | 3 +++ src/NewPicker/PickerPanel/PanelBody.tsx | 15 ++++++--------- src/NewPicker/hooks/useToggleDates.ts | 5 ++++- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 3711e6555..e7e5f2175 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -146,6 +146,9 @@ export default () => { locale={zhCN} defaultValue={[dayjs()]} multiple + onChange={(val) => { + console.log('๐Ÿ”ฅ Change:', val); + }} /> {/* { @@ -22,14 +21,10 @@ export interface PanelBodyProps { // Used for week panel prefixColumn?: (date: DateType) => React.ReactNode; rowClassName?: (date: DateType) => string; - - // Mode - panelType?: PanelMode; } export default function PanelBody(props: PanelBodyProps) { const { - panelType, rowNum, colNum, baseDate, @@ -44,7 +39,7 @@ export default function PanelBody(props: PanelBodyProps(props: PanelBodyProps + values.some((singleValue) => isSame(generateConfig, locale, date, singleValue, type)); + // =============================== Body =============================== const rows: React.ReactNode[] = []; @@ -124,7 +121,7 @@ export default function PanelBody(props: PanelBodyProps { diff --git a/src/NewPicker/hooks/useToggleDates.ts b/src/NewPicker/hooks/useToggleDates.ts index b6e98504b..f435d5896 100644 --- a/src/NewPicker/hooks/useToggleDates.ts +++ b/src/NewPicker/hooks/useToggleDates.ts @@ -19,7 +19,10 @@ export default function useToggleDates( return [...list, target]; } - return [...list].splice(index, 1); + const sliceList = [...list]; + sliceList.splice(index, 1); + + return sliceList; } return toggleDates; From a7b05349ad0bd4aa7ddb8e0d2a7bfc2d2c8c5f27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 11:47:50 +0800 Subject: [PATCH 256/380] chore: tmp of def --- docs/examples/debug.tsx | 6 ++++-- .../PickerInput/Popup/PopupPanel.tsx | 19 +++++++++++++------ src/NewPicker/PickerInput/Popup/index.tsx | 2 +- src/NewPicker/PickerInput/RangePicker.tsx | 2 +- 4 files changed, 19 insertions(+), 10 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index e7e5f2175..22dd7f9f5 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import '../../assets/index.less'; import type { Locale, PickerRef } from '../../src/NewPicker/interface'; import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; +import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; import PickerPanel from '../../src/NewPicker/PickerPanel'; import dayjs, { type Dayjs } from 'dayjs'; @@ -17,7 +18,8 @@ dayjs.locale('zh-cn'); dayjs.extend(buddhistEra); dayjs.extend(LocalizedFormat); -// console.log('>>', dayjs().format('YYYY-MM-dd')); +console.log('>>', RangePicker, SinglePicker, PickerPanel); +console.clear(); (window as any).dayjs = dayjs; @@ -145,7 +147,7 @@ export default () => { generateConfig={dayjsGenerateConfig} locale={zhCN} defaultValue={[dayjs()]} - multiple + multiple={true as boolean} onChange={(val) => { console.log('๐Ÿ”ฅ Change:', val); }} diff --git a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx index 5a0bd2d6b..0a4a22200 100644 --- a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx +++ b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx @@ -5,17 +5,24 @@ import PickerContext from '../context'; import { offsetPanelDate } from '../hooks/useRangePickerValue'; import { type FooterProps } from './Footer'; -export type MustProp = Required>; +export type MustProp = Required< + Pick, 'mode' | 'onPanelChange'> +>; -export type PopupPanelProps = MustProp & - PickerPanelProps & +export type PopupPanelProps = MustProp & + Pick< + PickerPanelProps, + 'picker' | 'pickerValue' | 'onPickerValueChange' | 'generateConfig' | 'locale' | 'multiple' + > & FooterProps & { multiple?: boolean; minDate?: DateType; maxDate?: DateType; }; -export default function PopupPanel(props: PopupPanelProps) { +export default function PopupPanel( + props: PopupPanelProps, +) { const { picker, multiple, pickerValue, onPickerValueChange, onSubmit, minDate, maxDate } = props; const { prefixCls, generateConfig } = React.useContext(PickerContext); @@ -81,12 +88,12 @@ export default function PopupPanel(props: PopupPanelProps - + {...props} /> - {...props} pickerValue={nextPickerValue} onPickerValueChange={onNextPickerValueChange} diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index 150da2fb0..04971bfa9 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -8,7 +8,7 @@ import Footer, { type FooterProps } from './Footer'; import PopupPanel, { type PopupPanelProps } from './PopupPanel'; import PresetPanel from './PresetPanel'; -export interface PopupProps +export interface PopupProps extends Pick, 'onFocus' | 'onBlur'>, FooterProps, PopupPanelProps { diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 41008ff10..37400aa16 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -457,7 +457,7 @@ function RangePicker( }; // >>> Calendar - const onPanelSelect: PickerPanelProps['onChange'] = (date) => { + const onPanelSelect: PickerPanelProps['onChange'] = (date: DateType) => { lastOperation('panel'); const clone: RangeValueType = fillIndex(calendarValue, activeIndex, date); From 975c73046a1d04353baf5c4f243edb670e91d251 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 11:53:48 +0800 Subject: [PATCH 257/380] chore: more ts --- docs/examples/debug.tsx | 10 +++++---- src/NewPicker/PickerInput/Popup/index.tsx | 2 +- src/NewPicker/PickerPanel/index.tsx | 26 +++++++++++++++-------- 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 22dd7f9f5..e81407b83 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -86,6 +86,10 @@ export default () => { undefined, ); + const setSingleValue = (nextVal: Dayjs) => { + setValue(nextVal); + }; + return (
          @@ -146,11 +150,9 @@ export default () => { { - console.log('๐Ÿ”ฅ Change:', val); - }} + onChange={setSingleValue} /> {/* boolean; } -export default function Popup(props: PopupProps) { +export default function Popup(props: PopupProps) { const { panelRender, internalMode, diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index c5f1389fb..5a24ae43c 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -103,17 +103,25 @@ export interface MultiplePickerPanelProps onChange?: (date: DateType[]) => void; } -export type PickerPanelProps = - | SinglePickerPanelProps - | MultiplePickerPanelProps; - -type InternalPickerPanelProps = Omit< - PickerPanelProps, - 'onChange' -> & { +// export type PickerPanelProps = +// | SinglePickerPanelProps +// | MultiplePickerPanelProps; +export type PickerPanelProps = BasePickerPanelProps & { + /** multiple selection. Not support time or datetime picker */ + multiple?: boolean; + + defaultValue?: DateType | DateType[] | null; + value?: DateType | DateType[] | null; onChange?: (date: DateType | DateType[]) => void; }; +// type InternalPickerPanelProps = Omit< +// PickerPanelProps, +// 'onChange' +// > & { +// onChange?: (date: DateType | DateType[]) => void; +// }; + function PickerPanel( props: PickerPanelProps, ref: React.Ref, @@ -155,7 +163,7 @@ function PickerPanel( // Components components = {}, - } = props as InternalPickerPanelProps; + } = props; const mergedPrefixCls = React.useContext(PickerContext)?.prefixCls || prefixCls || 'rc-picker'; From 557b5cf45340924239c9d8e14bb07d25846bc58f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 12:01:18 +0800 Subject: [PATCH 258/380] chore: fix ts logic --- src/NewPicker/PickerInput/Popup/Footer.tsx | 3 --- src/NewPicker/PickerInput/Popup/PopupPanel.tsx | 5 +---- src/NewPicker/PickerInput/Popup/index.tsx | 2 +- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/NewPicker/PickerInput/Popup/Footer.tsx b/src/NewPicker/PickerInput/Popup/Footer.tsx index 6f90164d6..470382ab1 100644 --- a/src/NewPicker/PickerInput/Popup/Footer.tsx +++ b/src/NewPicker/PickerInput/Popup/Footer.tsx @@ -8,9 +8,6 @@ export interface FooterProps { renderExtraFooter?: SharedPickerProps['renderExtraFooter']; showNow: boolean; - // Value - value?: DateType; - // Invalid /** From Footer component used only. Check if can OK button click */ invalid?: boolean; diff --git a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx index 0a4a22200..3dfe38e20 100644 --- a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx +++ b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx @@ -10,10 +10,7 @@ export type MustProp = Required< >; export type PopupPanelProps = MustProp & - Pick< - PickerPanelProps, - 'picker' | 'pickerValue' | 'onPickerValueChange' | 'generateConfig' | 'locale' | 'multiple' - > & + PickerPanelProps & FooterProps & { multiple?: boolean; minDate?: DateType; diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index d981d295e..6b055172c 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -28,7 +28,7 @@ export interface PopupProps boolean; + isInvalid: (date: DateType | DateType[]) => boolean; } export default function Popup(props: PopupProps) { From 9c61715a572e83896220ecd2fbb0c2e43a2abf1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 13:55:09 +0800 Subject: [PATCH 259/380] chore: refactor part of code --- docs/examples/debug.tsx | 4 +-- src/NewPicker/PickerInput/SinglePicker.tsx | 40 +++++++++++----------- src/NewPicker/PickerPanel/index.tsx | 4 +++ 3 files changed, 26 insertions(+), 22 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index e81407b83..a542bcb00 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -147,13 +147,13 @@ export default () => {
          - + /> */} {/* ( }; // >>> Calendar - const onPanelSelect: PickerPanelProps['onChange'] = (date) => { - lastOperation('panel'); + // const onPanelSelect: PickerPanelProps['onChange'] = (date) => { + // lastOperation('panel'); - const clone: DateType = fillIndex(calendarValue, activeIndex, date); + // const clone: DateType = fillIndex(calendarValue, activeIndex, date); - // Only trigger calendar event but not update internal `calendarValue` state - triggerCalendarChange(clone); + // // Only trigger calendar event but not update internal `calendarValue` state + // triggerCalendarChange(clone); - // >>> Trigger next active if !needConfirm - // Fully logic check `useRangeValue` hook - if (!needConfirm && !complexPicker && internalPicker === internalMode) { - triggerConfirm(date); - } + // // >>> Trigger next active if !needConfirm + // // Fully logic check `useRangeValue` hook + // if (!needConfirm && !complexPicker && internalPicker === internalMode) { + // triggerConfirm(date); + // } + // }; + + const onPopupChange = (nextValues: Date | DateType[]) => { + // TODO: handle this + console.log('>>>', nextValues); }; // >>> Close @@ -456,12 +459,7 @@ function Picker( }; // >>> cellRender - const onInternalCellRender = useCellRender( - cellRender, - dateRender, - monthCellRender, - getActiveRange(activeIndex), - ); + const onInternalCellRender = useCellRender(cellRender, dateRender, monthCellRender); // >>> Value const panelValue = calendarValue[activeIndex] || null; @@ -502,8 +500,10 @@ function Picker( // Value value={panelValue} isInvalid={isInvalidateDate} - onChange={null} - onSelect={onPanelSelect} + // onChange={null} + // onSelect={onPanelSelect} + onChange={onPopupChange} + onSelect={null} // PickerValue pickerValue={currentPickerValue} onPickerValueChange={setCurrentPickerValue} diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 5a24ae43c..f53c3dfcd 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -61,6 +61,10 @@ export interface BasePickerPanelProps // Mode mode?: PanelMode; + /** + * Compatible with origin API. + * Not mean the PickerPanel `onChange` event. + */ onPanelChange?: OnPanelChange; picker?: PickerMode; From a59794aa01cea2ae474d14acd683078b7c15032b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 14:15:28 +0800 Subject: [PATCH 260/380] chore: fix SinglePicker warning --- src/NewPicker/PickerInput/Popup/index.tsx | 3 +- src/NewPicker/PickerInput/RangePicker.tsx | 1 - src/NewPicker/PickerInput/SinglePicker.tsx | 43 +++++++++++++--------- 3 files changed, 26 insertions(+), 21 deletions(-) diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index 6b055172c..1eb7c1b14 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -3,7 +3,6 @@ import ResizeObserver, { type ResizeObserverProps } from 'rc-resize-observer'; import * as React from 'react'; import type { SharedPickerProps, ValueDate } from '../../interface'; import PickerContext from '../context'; -import type { RangeValueType } from '../RangePicker'; import Footer, { type FooterProps } from './Footer'; import PopupPanel, { type PopupPanelProps } from './PopupPanel'; import PresetPanel from './PresetPanel'; @@ -17,7 +16,7 @@ export interface PopupProps[]; onPresetHover: (presetValue: PresetValue) => void; - onPresetSubmit: (presetValue: RangeValueType) => void; + onPresetSubmit: (presetValue: PresetValue) => void; // Range range?: boolean; diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 37400aa16..ff7b50cc4 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -499,7 +499,6 @@ function RangePicker( 'onCalendarChange', 'style', 'className', - 'id', 'onPanelChange', ]); return restProps; diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 220b5bcfa..66479f858 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -221,7 +221,7 @@ function Picker( triggerFocus, lastOperation, activeIndex, - setActiveIndex, + // setActiveIndex, // nextActiveIndex, // activeIndexList, ] = useRangeActive([disabled]); @@ -278,6 +278,11 @@ function Picker( isInvalidateDate, ); + const submitInvalidate = React.useMemo( + () => submitInvalidates.some((invalidated) => invalidated), + [submitInvalidates], + ); + // ===================== Picker Value ===================== const timeDefaultValue = showTime?.defaultValue; @@ -404,6 +409,7 @@ function Picker( setHoverSource('preset'); }; + // TODO: handle this const onPresetSubmit = (nextValue: DateType) => { // const passed = triggerSubmitChange(nextValues); @@ -474,7 +480,6 @@ function Picker( 'onCalendarChange', 'style', 'className', - 'id', 'onPanelChange', ]); return restProps; @@ -527,10 +532,9 @@ function Picker( // ======================================================== // ======================== Change ======================== - const onSelectorChange = (date: DateType, index: number) => { - const clone = fillCalendarValue(date, index); - - triggerCalendarChange(clone); + // TODO: support multiple mode + const onSelectorChange = (date: DateType) => { + triggerCalendarChange([date]); }; const onSelectorInputChange = () => { @@ -538,27 +542,28 @@ function Picker( }; // ======================= Selector ======================= - const onSelectorFocus: SelectorProps['onFocus'] = (event, index) => { + const onSelectorFocus: SelectorProps['onFocus'] = (event) => { lastOperation('input'); triggerOpen(true, { inherit: true, }); - setActiveIndex(index); + // setActiveIndex(index); - onSharedFocus(event, index); + onSharedFocus(event); }; - const onSelectorBlur: SelectorProps['onBlur'] = (event, index) => { + const onSelectorBlur: SelectorProps['onBlur'] = (event) => { triggerOpen(false); - onSharedBlur(event, index); + onSharedBlur(event); }; const onSelectorKeyDown: SelectorProps['onKeyDown'] = (event) => { if (event.key === 'Tab') { - triggerConfirm(null, true); + // triggerConfirm(null, true); + triggerConfirm(); } }; @@ -591,7 +596,8 @@ function Picker( // Trade as confirm on field leave if (!mergedOpen && lastOp === 'input') { triggerOpen(false); - triggerConfirm(null, true); + // triggerConfirm(null, true); + triggerConfirm(); } // Submit with complex picker @@ -625,7 +631,7 @@ function Picker( // Icon suffixIcon={suffixIcon} // Active - activeIndex={focused || mergedOpen ? activeIndex : null} + // activeIndex={focused || mergedOpen ? activeIndex : null} activeHelp={!!internalHoverValue} allHelp={!!internalHoverValue && hoverSource === 'preset'} focused={focused} @@ -649,10 +655,11 @@ function Picker( onClick={onSelectorClick} onClear={onSelectorClear} // Invalid - invalid={submitInvalidates} - onInvalid={onSelectorInvalid} - // Offset - onActiveOffset={setActiveOffset} + invalid={submitInvalidate} + onInvalid={(invalid) => { + // TODO: check this + onSelectorInvalid(invalid, 0); + }} /> From a4d8dbc2b8897cc8fe43065fba0f9a7c2131c4b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 14:28:53 +0800 Subject: [PATCH 261/380] chore: adjust useInput logic --- docs/examples/debug.tsx | 8 +++++--- .../PickerInput/Selector/SingleSelector.tsx | 5 +++-- .../PickerInput/Selector/hooks/useInputProps.ts | 17 +++++++++++------ 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index a542bcb00..5102ecdca 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -94,9 +94,11 @@ export default () => {
          - {/* */}
          - +
          + {/* { start: 'inputStart', end: 'inputEnd', }} - /> + /> */}
          } />, + X
          } />, ); const $input = container.querySelector('input'); @@ -408,7 +411,7 @@ describe('Picker.Basic', () => { const onChange = jest.fn(); const onPanelChange = jest.fn(); const { container } = render( - { }); it('date -> year -> date', () => { - const { container } = render(); + const { container } = render(); openPicker(container); fireEvent.click(document.querySelector('.rc-picker-year-btn')); selectCell(1990); @@ -475,7 +478,7 @@ describe('Picker.Basic', () => { it('time', () => { const onChange = jest.fn(); const onOk = jest.fn(); - const { container } = render(); + const { container } = render(); openPicker(container); selectColumn(0, 13); @@ -491,7 +494,7 @@ describe('Picker.Basic', () => { it('renderExtraFooter', () => { const renderExtraFooter = jest.fn((mode) =>
          {mode}
          ); - const { container } = render(); + const { container } = render(); function matchFooter(mode: string) { expect(document.querySelector('.rc-picker-footer').textContent).toEqual(mode); @@ -518,7 +521,7 @@ describe('Picker.Basic', () => { describe('showToday', () => { it('only works on date', () => { const onSelect = jest.fn(); - const { container } = render(); + const { container } = render(); openPicker(container); fireEvent.click(document.querySelector('.rc-picker-today-btn')); expect(isSame(onSelect.mock.calls[0][0], '1990-09-03')).toBeTruthy(); @@ -527,7 +530,7 @@ describe('Picker.Basic', () => { it('disabled when in disabledDate', () => { const onSelect = jest.fn(); const { container } = render( - true} showToday />, + true} showToday />, ); openPicker(container); expect(document.querySelector('.rc-picker-today-btn')).toHaveClass( @@ -539,7 +542,7 @@ describe('Picker.Basic', () => { ['decade', 'year', 'quarter', 'month', 'week'].forEach((name) => { it(`not works on ${name}`, () => { - const { container } = render(); + const { container } = render(); openPicker(container); expect(document.querySelector('.rc-picker-today-btn')).toBeFalsy(); }); @@ -549,7 +552,7 @@ describe('Picker.Basic', () => { it('icon', () => { expect(errorSpy).not.toHaveBeenCalled(); render( - } clearIcon={} @@ -563,7 +566,7 @@ describe('Picker.Basic', () => { }); it('inputRender', () => { - render( } />); + render( } />); expect(document.querySelector('.rc-picker-input')).toMatchSnapshot(); }); @@ -571,7 +574,7 @@ describe('Picker.Basic', () => { describe('showNow', () => { it('datetime should display now', () => { const onSelect = jest.fn(); - const { container } = render(); + const { container } = render(); openPicker(container); fireEvent.click(document.querySelector('.rc-picker-now > a')); @@ -580,21 +583,21 @@ describe('Picker.Basic', () => { it("date shouldn't display now", () => { const onSelect = jest.fn(); - const { container } = render(); + const { container } = render(); openPicker(container); expect(document.querySelector('.rc-picker-now > a')).toBeFalsy(); }); it("datetime shouldn't display now when showNow is false", () => { const onSelect = jest.fn(); - const { container } = render(); + const { container } = render(); openPicker(container); expect(document.querySelector('.rc-picker-now > a')).toBeFalsy(); }); it('time should display now', () => { const onSelect = jest.fn(); - const { container } = render(); + const { container } = render(); openPicker(container); fireEvent.click(document.querySelector('.rc-picker-now > a')); @@ -604,7 +607,7 @@ describe('Picker.Basic', () => { it("time shouldn't display now when showNow is false", () => { const onSelect = jest.fn(); const { container } = render( - , + , ); openPicker(container); expect(document.querySelector('.rc-picker-now > a')).toBeFalsy(); @@ -616,7 +619,7 @@ describe('Picker.Basic', () => { jest.setSystemTime(getMoment('1990-09-03 00:09:00').valueOf()); const onSelect = jest.fn(); const { container } = render( - , + , ); openPicker(container); // document.querySelector('.rc-picker-now > a').simulate('click'); @@ -627,7 +630,7 @@ describe('Picker.Basic', () => { it('should show warning when hour step is invalid', () => { expect(errorSpy).not.toBeCalled(); - const { container } = render(); + const { container } = render(); openPicker(container); expect(errorSpy).toBeCalledWith( 'Warning: `hourStep` 9 is invalid. It should be a factor of 24.', @@ -637,7 +640,7 @@ describe('Picker.Basic', () => { it('should change 12 hours format correctly', () => { const onTimeChange = jest.fn(); const { getByText } = render( - ({ disabledHours: () => [0], disabledMinutes: (hour) => { @@ -662,7 +665,7 @@ describe('Picker.Basic', () => { it('should show warning when minute step is invalid', () => { expect(errorSpy).not.toBeCalled(); - const { container } = render(); + const { container } = render(); openPicker(container); expect(errorSpy).toBeCalledWith( 'Warning: `minuteStep` 9 is invalid. It should be a factor of 60.', @@ -671,7 +674,7 @@ describe('Picker.Basic', () => { it('should show warning when second step is invalid', () => { expect(errorSpy).not.toBeCalled(); - const { container } = render(); + const { container } = render(); openPicker(container); expect(errorSpy).toBeCalledWith( 'Warning: `secondStep` 9 is invalid. It should be a factor of 60.', @@ -684,7 +687,7 @@ describe('Picker.Basic', () => { const props = { [`${unit}Step`]: 5.5, }; - const { container } = render(); + const { container } = render(); openPicker(container); const column = document.querySelector( @@ -701,27 +704,27 @@ describe('Picker.Basic', () => { it('should work when hourStep < 0', () => { // @ts-ignore - const { container } = render(); + const { container } = render(); openPicker(container); expect(document.querySelectorAll('.rc-picker-time-panel-column')[0].children.length).toBe(24); }); }); it('pass data- & aria- & role', () => { - const { container } = render(); + const { container } = render(); expect(container).toMatchSnapshot(); }); it('support name & autoComplete prop', () => { - const { container } = render(); + const { container } = render(); expect(container.querySelector('input')).toHaveAttribute('name', 'bamboo'); expect(container.querySelector('input')).toHaveAttribute('autoComplete', 'off'); }); it('blur should reset invalidate text', () => { - const { container } = render(); + const { container } = render(); openPicker(container); fireEvent.change(container.querySelector('input'), { target: { @@ -733,19 +736,19 @@ describe('Picker.Basic', () => { }); it('should render correctly in rtl', () => { - const { container } = render(); + const { container } = render(); expect(container).toMatchSnapshot(); }); it('week picker show correct year', () => { - const { container } = render(); + const { container } = render(); expect(container.querySelector('input').value).toEqual('2020-1st'); }); it('Picker should open when click inside', () => { const onClick = jest.fn(); - render(); + render(); const inputElement = document.querySelector('input'); inputElement.focus = jest.fn(); @@ -757,18 +760,18 @@ describe('Picker.Basic', () => { }); it('not open when disabled', () => { - const { rerender } = render(); + const { rerender } = render(); // document.querySelector('.rc-picker').simulate('click'); fireEvent.click(document.querySelector('.rc-picker')); expect(isOpen()).toBeFalsy(); // wrapper.setProps({ disabled: false }); - rerender(); + rerender(); expect(isOpen()).toBeFalsy(); }); it('not open when mouseup', () => { - render(); + render(); const inputElement = document.querySelector('input'); inputElement.focus = jest.fn(); @@ -784,7 +787,7 @@ describe('Picker.Basic', () => { const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const { container } = render( - { }); it('close to reset', () => { - const { container } = render(); + const { container } = render(); openPicker(container); fireEvent.change(document.querySelector('input'), { @@ -821,7 +824,7 @@ describe('Picker.Basic', () => { it('switch picker should change format', () => { const { rerender } = render( - , + , ); expect(document.querySelector('input').value).toEqual('1999-09-03 00:00:00'); @@ -832,7 +835,7 @@ describe('Picker.Basic', () => { ['year', '1999'], ].forEach(([picker, text]) => { rerender( - { }); it('id', () => { - const { container } = render(); + const { container } = render(); expect(container.querySelector('input').id).toEqual('light'); }); it('dateRender', () => { - render( date.format('YYYY-MM-DD')} />); + render( date.format('YYYY-MM-DD')} />); const tdList = document.querySelectorAll('tbody td'); expect(tdList[tdList.length - 1].textContent).toEqual('1990-10-06'); }); it('format', () => { - const { container } = render(); + const { container } = render(); openPicker(container); fireEvent.change(container.querySelector('input'), { target: { @@ -868,7 +871,7 @@ describe('Picker.Basic', () => { it('custom format', () => { const { container } = render( - `custom format:${val.format('YYYYMMDD')}`, 'YYYY-MM-DD']} @@ -887,7 +890,7 @@ describe('Picker.Basic', () => { it('custom clear icon', () => { render( - clear }} defaultValue={getMoment('2020-09-17')} />, @@ -900,14 +903,14 @@ describe('Picker.Basic', () => { }); it('panelRender', () => { - render(

          Light

          } />); + render(

          Light

          } />); expect(document.querySelector('.rc-picker')).toMatchSnapshot(); }); it('change panel when `picker` changed', () => { - const { rerender } = render(); + const { rerender } = render(); expect(document.querySelector('.rc-picker-week-panel')).toBeTruthy(); - rerender(); + rerender(); expect(document.querySelector('.rc-picker-week-panel')).toBeFalsy(); expect(document.querySelector('.rc-picker-month-panel')).toBeTruthy(); @@ -923,7 +926,7 @@ describe('Picker.Basic', () => { }); it('should restore when leave', () => { - render(); + render(); const cell = findCell(24); fireEvent.mouseEnter(cell); jest.runAllTimers(); @@ -941,7 +944,7 @@ describe('Picker.Basic', () => { }); it('should restore after selecting cell', () => { - const { container } = render(); + const { container } = render(); openPicker(container); const cell = findCell(24); // cell.simulate('mouseEnter'); @@ -959,7 +962,7 @@ describe('Picker.Basic', () => { }); it('change value when hovering', () => { - const { container } = render(); + const { container } = render(); openPicker(container); const cell = findCell(24); // cell.simulate('mouseEnter'); @@ -1020,7 +1023,7 @@ describe('Picker.Basic', () => { it('work', () => { jest.useFakeTimers(); const { unmount } = render( - , + , ); jest.runAllTimers(); @@ -1033,7 +1036,7 @@ describe('Picker.Basic', () => { describe('prevent default on keydown', () => { it('should open picker panel if no prevent default', () => { - const { container } = render(); + const { container } = render(); closePicker(container); keyDown(KeyCode.ENTER); @@ -1044,7 +1047,7 @@ describe('Picker.Basic', () => { const onKeyDown = jest.fn(({ which }, preventDefault) => { if (which === 13) preventDefault(); }); - const { container } = render(); + const { container } = render(); openPicker(container); expect(isOpen()).toBeTruthy(); @@ -1058,7 +1061,7 @@ describe('Picker.Basic', () => { }); it('disabledDate should not crash', () => { - const { container } = render( d.isAfter(Date.now())} />); + const { container } = render( d.isAfter(Date.now())} />); fireEvent.change(container.querySelector('input'), { target: { value: moment().add(1, 'year').format('YYYY-MM-DD') }, }); @@ -1070,7 +1073,7 @@ describe('Picker.Basic', () => { const onChange = jest.fn(); render( - { const mockPresetValue = jest.fn().mockImplementationOnce(() => moment('2000-09-03')); render( - { it('switch picker locale should reformat value', () => { const { container, rerender } = render( - , + , ); expect(container.querySelector('input').value).toEqual('Friday'); // Switch locale moment.locale('zh-cn'); - rerender(); + rerender(); expect(container.querySelector('input').value).toEqual('ๆ˜ŸๆœŸไบ”'); // Reset locale @@ -1136,7 +1139,7 @@ describe('Picker.Basic', () => { it('select minutes and seconds directly in dateTime mode will apply the current time', () => { jest.setSystemTime(getMoment('2023-09-04 21:49:10').valueOf()); - const ui = ; + const ui = ; const { container } = render(ui); openPicker(container); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index babe2a245..ebdd2c27c 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -11,8 +11,12 @@ import dayGenerateConfig from '../../src/generate/dayjs'; import momentGenerateConfig from '../../src/generate/moment'; import enUS from '../../src/locale/en_US'; import zh_CN from '../../src/locale/zh_CN'; -import type { PickerRef, RangePickerProps } from '../../src/NewPicker'; -import { RangePicker as NewRangePicker } from '../../src/NewPicker'; +import type { + PickerProps as NewPickerProps, + PickerRef, + RangePickerProps, +} from '../../src/NewPicker'; +import { Picker as NewPicker, RangePicker as NewRangePicker } from '../../src/NewPicker'; import type { PickerBaseProps, PickerDateProps, PickerTimeProps } from '../../src/Picker'; import type { PickerPanelBaseProps, @@ -221,6 +225,13 @@ export function inputValue(text: string, index = 0) { } // ===================================== Day JS ===================================== +export const DayPicker = React.forwardRef< + PickerRef, + Partial, 'generateConfig'>> +>((props, ref) => { + return ; +}); + export const DayRangePicker = React.forwardRef< PickerRef, Partial, 'generateConfig'>> From e530ecb8dc1eea60aa88c2fe9d1661a0ad3265ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 17:27:56 +0800 Subject: [PATCH 271/380] fix: should not open when all disabled --- docs/examples/debug.tsx | 2 ++ src/NewPicker/PickerInput/RangePicker.tsx | 2 +- src/NewPicker/PickerInput/SinglePicker.tsx | 2 +- src/NewPicker/PickerInput/hooks/useOpen.ts | 5 ++++- tests/picker.spec.tsx | 18 +++++++----------- tests/range.spec.tsx | 10 ++++------ tests/util/commonUtil.tsx | 2 +- 7 files changed, 20 insertions(+), 21 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 8901e52e8..4bfcc1a54 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -100,6 +100,8 @@ export default () => { // Shared {...sharedLocale} multiple + open + disabled ref={singleRef} suffixIcon="๐Ÿงถ" onChange={(val, text) => { diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 25740b7eb..ee26473d8 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -211,7 +211,7 @@ function RangePicker( // ========================= Open ========================= const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, onOpenChange); + const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, disabled, onOpenChange); const triggerOpen: OnOpenChange = (nextOpen, config?: OpenConfig) => { // No need to open if all disabled diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 6961c56fa..c0e5c9748 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -206,7 +206,7 @@ function Picker( // ========================= Open ========================= const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - const [mergedOpen, triggerOpen] = useOpen(open, defaultOpen, onOpenChange); + const [mergedOpen, triggerOpen] = useOpen(open, defaultOpen, [disabled], onOpenChange); // ======================= Calendar ======================= const onInternalCalendarChange = (dates: DateType[], dateStrings: string[], info: BaseInfo) => { diff --git a/src/NewPicker/PickerInput/hooks/useOpen.ts b/src/NewPicker/PickerInput/hooks/useOpen.ts index 74917bd04..8c10334eb 100644 --- a/src/NewPicker/PickerInput/hooks/useOpen.ts +++ b/src/NewPicker/PickerInput/hooks/useOpen.ts @@ -8,11 +8,14 @@ import useDelayState from './useDelayState'; export default function useOpen( open?: boolean, defaultOpen?: boolean, + disabledList: boolean[] = [], onOpenChange?: (open: boolean) => void, ): [open: boolean, setOpen: (open: boolean, config?: OpenConfig) => void] { + const mergedOpen = disabledList.every((disabled) => disabled) ? false : open; + // Delay for handle the open state, in case fast shift from `open` -> `close` -> `open` // const [rafOpen, setRafOpen] = useLockState(open, defaultOpen || false, onOpenChange); - const [rafOpen, setRafOpen] = useDelayState(open, defaultOpen || false, onOpenChange); + const [rafOpen, setRafOpen] = useDelayState(mergedOpen, defaultOpen || false, onOpenChange); function setOpen(next: boolean, config: OpenConfig = {}) { if (!config.inherit || rafOpen) { diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 1b9889318..f152c3eb9 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -14,12 +14,12 @@ import { clearValue, closePicker, confirmOK, + // MomentPicker, + DayPicker, findCell, getMoment, isOpen, isSame, - // MomentPicker, - DayPicker, openPicker, selectCell, } from './util/commonUtil'; @@ -97,8 +97,6 @@ describe('Picker.Basic', () => { }); }); - return; - describe('picker', () => { const modeList: { picker: PickerMode; className: string }[] = [ { @@ -166,7 +164,7 @@ describe('Picker.Basic', () => { for (let i = 0; i < 10; i += 1) { act(() => { - fireEvent.mouseDown(document.body); + fireEvent.click(document.body); }); expect(onOpenChange).toHaveBeenCalledTimes(i + 1); } @@ -182,6 +180,8 @@ describe('Picker.Basic', () => { }); }); + return; + describe('value', () => { it('defaultValue', () => { const { container } = render(); @@ -606,9 +606,7 @@ describe('Picker.Basic', () => { it("time shouldn't display now when showNow is false", () => { const onSelect = jest.fn(); - const { container } = render( - , - ); + const { container } = render(); openPicker(container); expect(document.querySelector('.rc-picker-now > a')).toBeFalsy(); }); @@ -618,9 +616,7 @@ describe('Picker.Basic', () => { it('work with now', () => { jest.setSystemTime(getMoment('1990-09-03 00:09:00').valueOf()); const onSelect = jest.fn(); - const { container } = render( - , - ); + const { container } = render(); openPicker(container); // document.querySelector('.rc-picker-now > a').simulate('click'); fireEvent.click(document.querySelector('.rc-picker-now > a')); diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 09e84c6f3..c85f43067 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -261,12 +261,10 @@ describe('Picker.Range', () => { expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeTruthy(); }); - it('panel can not be clicked with open and disabled', () => { - const onChange = jest.fn(); - const { baseElement } = render(); - expect(baseElement.querySelector('.rc-picker-cell')).toBeTruthy(); - fireEvent.click(baseElement.querySelector('.rc-picker-cell')); - expect(onChange).not.toBeCalled(); + it('disabled should not open', () => { + render(); + + expect(isOpen()).toBeFalsy(); }); it('startDate will have disabledDate when endDate is not selectable', () => { diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index ebdd2c27c..3209f74fd 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -229,7 +229,7 @@ export const DayPicker = React.forwardRef< PickerRef, Partial, 'generateConfig'>> >((props, ref) => { - return ; + return ; }); export const DayRangePicker = React.forwardRef< From dd3498e92a6815705717273cea470b73a4b55cf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 17:41:45 +0800 Subject: [PATCH 272/380] fix: go to emptys --- docs/examples/debug.tsx | 8 +-- .../PickerInput/hooks/useRangeValue.ts | 13 ++--- tests/picker.spec.tsx | 51 ++++++++++--------- 3 files changed, 39 insertions(+), 33 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 4bfcc1a54..7e6788ea7 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -99,16 +99,16 @@ export default () => { { console.log('๐Ÿ”ฅ Change:', val, text); }} style={{ width: 300 }} - needConfirm={false} + // needConfirm={false} />
          {/* >> Order const validateOrder = diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index f152c3eb9..f80c2bbba 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -17,6 +17,7 @@ import { // MomentPicker, DayPicker, findCell, + getDay, getMoment, isOpen, isSame, @@ -24,7 +25,7 @@ import { selectCell, } from './util/commonUtil'; -const fakeTime = getMoment('1990-09-03 00:00:00').valueOf(); +const fakeTime = getDay('1990-09-03 00:00:00').valueOf(); describe('Picker.Basic', () => { let errorSpy; @@ -180,11 +181,11 @@ describe('Picker.Basic', () => { }); }); - return; + describe('value', () => { it('defaultValue', () => { - const { container } = render(); + const { container } = render(); expect(container.querySelector('input').value).toEqual('1989-11-28'); }); @@ -195,6 +196,8 @@ describe('Picker.Basic', () => { selectCell(11); closePicker(container); + expect(onChange).toHaveBeenCalled(); + expect(isSame(onChange.mock.calls[0][0], '1990-09-11')).toBeTruthy(); expect(onChange.mock.calls[0][1]).toEqual('1990-09-11'); expect(container.querySelector('input').value).toEqual('1990-09-11'); @@ -203,7 +206,7 @@ describe('Picker.Basic', () => { it('controlled', () => { const onChange = jest.fn(); const { container, rerender } = render( - , + , ); openPicker(container); @@ -218,12 +221,14 @@ describe('Picker.Basic', () => { expect(document.querySelector('input').value).toEqual('2011-11-03'); // Raw change value - rerender(); + rerender(); expect(document.querySelector('input').value).toEqual('1999-09-09'); }); }); + return; + describe('typing to change value', () => { [ { @@ -553,7 +558,7 @@ describe('Picker.Basic', () => { expect(errorSpy).not.toHaveBeenCalled(); render( } clearIcon={} allowClear @@ -614,14 +619,14 @@ describe('Picker.Basic', () => { describe('time step', () => { it('work with now', () => { - jest.setSystemTime(getMoment('1990-09-03 00:09:00').valueOf()); + jest.setSystemTime(getDay('1990-09-03 00:09:00').valueOf()); const onSelect = jest.fn(); const { container } = render(); openPicker(container); // document.querySelector('.rc-picker-now > a').simulate('click'); fireEvent.click(document.querySelector('.rc-picker-now > a')); expect(isSame(onSelect.mock.calls[0][0], '1990-09-03 00:00:59', 'second')).toBeTruthy(); - jest.setSystemTime(getMoment('1990-09-03 00:00:00').valueOf()); + jest.setSystemTime(getDay('1990-09-03 00:00:00').valueOf()); }); it('should show warning when hour step is invalid', () => { @@ -645,7 +650,7 @@ describe('Picker.Basic', () => { }, disabledSeconds: () => [0], })} - value={getMoment('2000-01-01 21:40:40')} + value={getDay('2000-01-01 21:40:40')} format="YYYY-MM-DD hh:mm:ss A" use12Hours showTime @@ -737,7 +742,7 @@ describe('Picker.Basic', () => { }); it('week picker show correct year', () => { - const { container } = render(); + const { container } = render(); expect(container.querySelector('input').value).toEqual('2020-1st'); }); @@ -785,7 +790,7 @@ describe('Picker.Basic', () => { const { container } = render( , ); @@ -804,7 +809,7 @@ describe('Picker.Basic', () => { }); it('close to reset', () => { - const { container } = render(); + const { container } = render(); openPicker(container); fireEvent.change(document.querySelector('input'), { @@ -820,7 +825,7 @@ describe('Picker.Basic', () => { it('switch picker should change format', () => { const { rerender } = render( - , + , ); expect(document.querySelector('input').value).toEqual('1999-09-03 00:00:00'); @@ -834,7 +839,7 @@ describe('Picker.Basic', () => { , ); @@ -869,7 +874,7 @@ describe('Picker.Basic', () => { const { container } = render( `custom format:${val.format('YYYYMMDD')}`, 'YYYY-MM-DD']} />, ); @@ -888,7 +893,7 @@ describe('Picker.Basic', () => { render( clear }} - defaultValue={getMoment('2020-09-17')} + defaultValue={getDay('2020-09-17')} />, ); @@ -922,7 +927,7 @@ describe('Picker.Basic', () => { }); it('should restore when leave', () => { - render(); + render(); const cell = findCell(24); fireEvent.mouseEnter(cell); jest.runAllTimers(); @@ -940,7 +945,7 @@ describe('Picker.Basic', () => { }); it('should restore after selecting cell', () => { - const { container } = render(); + const { container } = render(); openPicker(container); const cell = findCell(24); // cell.simulate('mouseEnter'); @@ -958,7 +963,7 @@ describe('Picker.Basic', () => { }); it('change value when hovering', () => { - const { container } = render(); + const { container } = render(); openPicker(container); const cell = findCell(24); // cell.simulate('mouseEnter'); @@ -1019,7 +1024,7 @@ describe('Picker.Basic', () => { it('work', () => { jest.useFakeTimers(); const { unmount } = render( - , + , ); jest.runAllTimers(); @@ -1120,13 +1125,13 @@ describe('Picker.Basic', () => { it('switch picker locale should reformat value', () => { const { container, rerender } = render( - , + , ); expect(container.querySelector('input').value).toEqual('Friday'); // Switch locale moment.locale('zh-cn'); - rerender(); + rerender(); expect(container.querySelector('input').value).toEqual('ๆ˜ŸๆœŸไบ”'); // Reset locale @@ -1134,7 +1139,7 @@ describe('Picker.Basic', () => { }); it('select minutes and seconds directly in dateTime mode will apply the current time', () => { - jest.setSystemTime(getMoment('2023-09-04 21:49:10').valueOf()); + jest.setSystemTime(getDay('2023-09-04 21:49:10').valueOf()); const ui = ; const { container } = render(ui); From efa85e81915fc0ceb57e3f4c900dd81fad309458 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 17:52:04 +0800 Subject: [PATCH 273/380] fix: change logic --- src/NewPicker/PickerInput/SinglePicker.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index c0e5c9748..f32125150 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -133,6 +133,7 @@ function Picker( defaultValue, value, needConfirm, + onChange, // Disabled disabled, @@ -266,13 +267,23 @@ function Picker( // ======================== Value ========================= // TODO: Fix submit logic + + const onInternalChange: PickerProps['onChange'] = + onChange && + ((dates, dateStrings) => { + onChange(pickerParam(dates), pickerParam(dateStrings)); + }); + const [ /** Trigger `onChange` by check `disabledDate` */ flushSubmit, /** Trigger `onChange` directly without check `disabledDate` */ triggerSubmitChange, ] = useRangeValue( - filledProps, + { + ...filledProps, + onChange: onInternalChange, + }, mergedValue, setInnerValue, getCalendarValue, From 170cb157ebad3f7f4ccbf649f4a1f64a7387bdd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 19:32:05 +0800 Subject: [PATCH 274/380] chore: add missing picker reset --- docs/examples/debug.tsx | 8 +++- .../PickerInput/hooks/useRangePickerValue.ts | 7 +++- tests/picker.spec.tsx | 39 ++++++------------- 3 files changed, 23 insertions(+), 31 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 7e6788ea7..350c0d106 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -92,7 +92,7 @@ export default () => { return (
          - +
          @@ -107,6 +107,12 @@ export default () => { onChange={(val, text) => { console.log('๐Ÿ”ฅ Change:', val, text); }} + onCalendarChange={(val, text, info) => { + console.log('๐ŸŽ‰ Calendar Change:', val, text, info); + }} + onPickerValueChange={(val, info) => { + console.log('๐Ÿ‘ป Picker Value Change:', val, val?.format('YYYY-MM-DD'), info); + }} style={{ width: 300 }} // needConfirm={false} /> diff --git a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts index 3f5fde27b..bd39a28a0 100644 --- a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts @@ -184,7 +184,10 @@ export default function useRangePickerValue>> Reset prevActiveIndex when panel closed React.useEffect(() => { diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index f80c2bbba..802e60a1f 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -18,7 +18,6 @@ import { DayPicker, findCell, getDay, - getMoment, isOpen, isSame, openPicker, @@ -181,8 +180,6 @@ describe('Picker.Basic', () => { }); }); - - describe('value', () => { it('defaultValue', () => { const { container } = render(); @@ -227,8 +224,6 @@ describe('Picker.Basic', () => { }); }); - return; - describe('typing to change value', () => { [ { @@ -237,13 +232,13 @@ describe('Picker.Basic', () => { selected: '.rc-picker-cell-selected', matchDate: '2000-11-11', }, - { - name: 'week', - picker: 'week', - value: '2000-45th', - matchDate: '2000-10-29', - selected: '.rc-picker-week-panel-row-selected', - }, + // { + // name: 'week', + // picker: 'week', + // value: '2000-45th', + // matchDate: '2000-10-29', + // selected: '.rc-picker-week-panel-row-selected', + // }, ].forEach(({ name, picker, value, matchDate, selected }) => { it(name, () => { const onChange = jest.fn(); @@ -251,15 +246,9 @@ describe('Picker.Basic', () => { , ); openPicker(container); - // document.querySelector('input').simulate('focus'); fireEvent.focus(container.querySelector('input')); // Invalidate value - // document.querySelector('input').simulate('change', { - // target: { - // value: 'abc', - // }, - // }); fireEvent.change(container.querySelector('input'), { target: { value: 'abc', @@ -267,11 +256,6 @@ describe('Picker.Basic', () => { }); // Validate value - // document.querySelector('input').simulate('change', { - // target: { - // value, - // }, - // }); fireEvent.change(container.querySelector('input'), { target: { value, @@ -282,6 +266,7 @@ describe('Picker.Basic', () => { expect(onChange).not.toHaveBeenCalled(); keyDown(KeyCode.ENTER); + console.log(document.body.innerHTML); expect(isSame(onChange.mock.calls[0][0], matchDate, picker as any)).toBeTruthy(); expect(document.querySelector(selected)).toBeTruthy(); onChange.mockReset(); @@ -296,6 +281,8 @@ describe('Picker.Basic', () => { }); }); + return; + describe('focus test', () => { let domMock: ReturnType; let focused = false; @@ -836,11 +823,7 @@ describe('Picker.Basic', () => { ['year', '1999'], ].forEach(([picker, text]) => { rerender( - , + , ); expect(document.querySelector('input').value).toEqual(text); From c08c5128617e6c2d3e0e01c44331338cb522e7f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 11 Dec 2023 20:07:18 +0800 Subject: [PATCH 275/380] fix: invalidate logic --- docs/examples/debug.tsx | 6 +- src/NewPicker/PickerInput/Popup/index.tsx | 2 +- src/NewPicker/PickerInput/SinglePicker.tsx | 5 +- .../PickerInput/hooks/useFlexibleValue.ts | 251 ------------------ .../PickerInput/hooks/useRangeValue.ts | 19 +- tests/picker.spec.tsx | 1 - 6 files changed, 19 insertions(+), 265 deletions(-) delete mode 100644 src/NewPicker/PickerInput/hooks/useFlexibleValue.ts diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 350c0d106..693c5baf3 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -117,13 +117,13 @@ export default () => { // needConfirm={false} />
          - {/* <>2333{ori}} placeholder={['Start', 'End']} suffixIcon="๐Ÿงถ" @@ -156,7 +156,7 @@ export default () => { start: 'inputStart', end: 'inputEnd', }} - /> */} + />
          } />, @@ -377,19 +377,19 @@ describe('Picker.Basic', () => { describe('full steps', () => { [ - { - name: 'date', - yearBtn: '.rc-picker-year-btn', - finalPanel: '.rc-picker-date-panel', - finalMode: 'date', - }, - { - name: 'datetime', - yearBtn: '.rc-picker-year-btn', - finalPanel: '.rc-picker-datetime-panel', - finalMode: 'date', - showTime: true, - }, + // { + // name: 'date', + // yearBtn: '.rc-picker-year-btn', + // finalPanel: '.rc-picker-date-panel', + // finalMode: 'date', + // }, + // { + // name: 'datetime', + // yearBtn: '.rc-picker-year-btn', + // finalPanel: '.rc-picker-datetime-panel', + // finalMode: 'date', + // showTime: true, + // }, { name: 'week', yearBtn: '.rc-picker-year-btn', @@ -398,7 +398,7 @@ describe('Picker.Basic', () => { picker: 'week', }, ].forEach(({ name, finalMode, yearBtn, finalPanel, picker, showTime }) => { - it(name, () => { + it.only(name, () => { const onChange = jest.fn(); const onPanelChange = jest.fn(); const { container } = render( @@ -413,6 +413,7 @@ describe('Picker.Basic', () => { openPicker(container); function expectPanelChange(dateStr: string, mode: PanelMode) { + expect(onPanelChange).toHaveBeenCalled(); expect(isSame(onPanelChange.mock.calls[0][0], dateStr)).toBeTruthy(); expect(onPanelChange.mock.calls[0][1]).toEqual(mode); onPanelChange.mockReset(); @@ -428,6 +429,7 @@ describe('Picker.Basic', () => { fireEvent.click(document.querySelector('.rc-picker-decade-btn')); expectPanelChange('1990-09-03', 'decade'); + // Next page fireEvent.click(document.querySelector('.rc-picker-header-super-next-btn')); expectPanelChange('2090-09-03', 'decade'); @@ -458,11 +460,13 @@ describe('Picker.Basic', () => { }); }); - it('date -> year -> date', () => { + // Origin `date > year > date`, now is always step by step + it('date -> year -> month -> date', () => { const { container } = render(); openPicker(container); fireEvent.click(document.querySelector('.rc-picker-year-btn')); selectCell(1990); + selectCell('Jan'); expect(document.querySelector('.rc-picker-date-panel')).toBeTruthy(); }); @@ -483,6 +487,8 @@ describe('Picker.Basic', () => { }); }); + return; + it('renderExtraFooter', () => { const renderExtraFooter = jest.fn((mode) =>
          {mode}
          ); const { container } = render(); From ffc44291c991537f72e1fceb2da9582681bbf25a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 12 Dec 2023 11:03:41 +0800 Subject: [PATCH 277/380] chore: onPickerValue change also provide the mode info --- docs/examples/debug.tsx | 7 +++++-- src/NewPicker/PickerInput/RangePicker.tsx | 1 + src/NewPicker/PickerInput/SinglePicker.tsx | 1 + src/NewPicker/PickerPanel/index.tsx | 16 ++++++++++++---- 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 8d359fd53..be8b20d94 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -171,13 +171,16 @@ export default () => {
          - {/* */} + onPickerValueChange={(pickerValue, info) => { + console.log('๐ŸŽผ PickerValue Change:', pickerValue, info); + }} + /> {/* // Mode mode?: [startMode: PanelMode, endMode: PanelMode]; + /** @deprecated You can get more info from `onPickerValueChange` */ onPanelChange?: ( values: RangeValueType, modes: [startMode: PanelMode, endMode: PanelMode], diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 7a15de4d5..ecba9f14c 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -66,6 +66,7 @@ export interface BasePickerProps extends SharedPickerPr // Mode mode?: PanelMode; + /** @deprecated You can get more info from `onPickerValueChange` */ onPanelChange?: (values: DateType, modes: PanelMode) => void; } diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index f53c3dfcd..aea83f4f0 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -57,11 +57,17 @@ export interface BasePickerPanelProps // Panel control defaultPickerValue?: DateType | null; pickerValue?: DateType | null; - onPickerValueChange?: (date: DateType) => void; + onPickerValueChange?: ( + date: DateType, + info: { + mode: PanelMode; + }, + ) => void; // Mode mode?: PanelMode; /** + * @deprecated You can get more info from `onPickerValueChange` instead. * Compatible with origin API. * Not mean the PickerPanel `onChange` event. */ @@ -255,17 +261,19 @@ function PickerPanel( }, ); - const setPickerValue = (nextPickerValue: DateType) => { + const setPickerValue = (nextPickerValue: DateType, nextMode?: PanelMode) => { setInternalPickerValue(nextPickerValue); - onPickerValueChange?.(nextPickerValue); + onPickerValueChange?.(nextPickerValue, { + mode: nextMode || mergedMode, + }); }; const triggerModeChange = (nextMode: PanelMode, viewDate?: DateType) => { setMergedMode(nextMode); if (viewDate) { - setPickerValue(viewDate); + setPickerValue(viewDate, nextMode); } onPanelChange?.(viewDate || pickerValue, nextMode); From 67b6da53a7950444302d672a8341daed6c2ad7a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 12 Dec 2023 11:39:36 +0800 Subject: [PATCH 278/380] chore: adjust logic --- docs/examples/debug.tsx | 1 + src/NewPicker/PickerInput/Popup/PopupPanel.tsx | 9 ++++++--- src/NewPicker/PickerInput/RangePicker.tsx | 14 +++++++++++--- src/NewPicker/PickerInput/SinglePicker.tsx | 1 + .../PickerInput/hooks/useRangePickerValue.ts | 7 ++++++- src/NewPicker/PickerInput/hooks/useRangeValue.ts | 6 +----- src/NewPicker/hooks/useSyncState.ts | 8 +++++--- src/NewPicker/interface.tsx | 4 ++++ tests/__snapshots__/range.spec.tsx.snap | 16 ++++++++-------- 9 files changed, 43 insertions(+), 23 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index be8b20d94..82bfe5060 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -147,6 +147,7 @@ export default () => { console.log('๐Ÿ† Next Open:', nextOpen); }} onPickerValueChange={(val, info) => { + console.error('!'); console.log( '๐Ÿ‘ป Picker Value Change:', val, diff --git a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx index ed45400d6..429984541 100644 --- a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx +++ b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx @@ -10,11 +10,13 @@ export type MustProp = Required< >; export type PopupPanelProps = MustProp & - PickerPanelProps & + Omit, 'onPickerValueChange'> & FooterProps & { multiplePanel?: boolean; minDate?: DateType; maxDate?: DateType; + + onPickerValueChange: (date: DateType) => void; }; export default function PopupPanel( @@ -37,7 +39,8 @@ export default function PopupPanel( [pickerValue, internalOffsetDate], ); - const onNextPickerValueChange = (nextDate: DateType) => { + // Outside + const onSecondPickerValueChange = (nextDate: DateType) => { onPickerValueChange(internalOffsetDate(nextDate, -1)); }; @@ -94,7 +97,7 @@ export default function PopupPanel( {...props} pickerValue={nextPickerValue} - onPickerValueChange={onNextPickerValueChange} + onPickerValueChange={onSecondPickerValueChange} />
          diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index a7da159a3..098e87432 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -79,14 +79,16 @@ export interface RangePickerProps */ pickerValue?: [DateType, DateType] | null; /** - * Each popup panel `pickerValue` change will trigger the callback. + * Each popup panel `pickerValue` includes `mode` change will trigger the callback. * @param date The changed picker value - * @param info.source `panel` from the panel click. `reset` from popup open or field typing. + * @param info.source `panel` from the panel click. `reset` from popup open or field typing + * @param info.mode Next `mode` panel */ onPickerValueChange?: ( date: [DateType, DateType], info: BaseInfo & { source: 'reset' | 'panel'; + mode: [PanelMode, PanelMode]; }, ) => void; @@ -266,6 +268,8 @@ function RangePicker( value: mode, }); + // useSyncState<[]> + const mergedMode = modes[activeIndex] || picker; /** Extends from `mergedMode` to patch `datetime` mode */ @@ -318,6 +322,7 @@ function RangePicker( generateConfig, locale, calendarValue, + modes, mergedOpen, activeIndex, internalPicker, @@ -529,7 +534,10 @@ function RangePicker( onSelect={onPanelSelect} // PickerValue pickerValue={currentPickerValue} - onPickerValueChange={setCurrentPickerValue} + onPickerValueChange={(nextPickerValue) => { + // We only need accept first param. Ignore second param. + setCurrentPickerValue(nextPickerValue); + }} // Hover hoverValue={hoverValues} onHover={onPanelHover} diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index ecba9f14c..436d0eb5e 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -329,6 +329,7 @@ function Picker( generateConfig, locale, calendarValue, + [mergedMode], mergedOpen, activeIndex, internalPicker, diff --git a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts index bd39a28a0..03915f39d 100644 --- a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts @@ -60,6 +60,7 @@ export default function useRangePickerValue, locale: Locale, calendarValue: ValueType, + modes: PanelMode[], open: boolean, activeIndex: number, pickerMode: InternalMode, @@ -128,7 +129,11 @@ export default function useRangePickerValue = (calendarValues: ValueType) => void; -type ReplaceListType = { - [P in keyof List]: Type; -}; - function useUtil( generateConfig: GenerateConfig, locale: Locale, diff --git a/src/NewPicker/hooks/useSyncState.ts b/src/NewPicker/hooks/useSyncState.ts index 1f505a555..dee37d9db 100644 --- a/src/NewPicker/hooks/useSyncState.ts +++ b/src/NewPicker/hooks/useSyncState.ts @@ -7,16 +7,18 @@ import * as React from 'react'; */ export default function useSyncState( defaultValue: T, -): [getter: () => T, setter: (nextValue: T) => void] { + controlledValue: T, +): [getter: (useControlledValueFirst?: boolean) => T, setter: (nextValue: T) => void, value: T] { const valueRef = React.useRef(defaultValue); const [, forceUpdate] = React.useState({}); - const getter = () => valueRef.current; + const getter = (useControlledValueFirst?: boolean) => + useControlledValueFirst && controlledValue !== undefined ? controlledValue : valueRef.current; const setter = (nextValue: T) => { valueRef.current = nextValue; forceUpdate({}); }; - return [getter, setter]; + return [getter, setter, getter()]; } diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 5ae84c100..739c0a8b8 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -476,3 +476,7 @@ type Enumerate = Acc['length'] exte : Enumerate; export type IntRange = Exclude, Enumerate>; + +export type ReplaceListType = { + [P in keyof List]: Type; +}; \ No newline at end of file diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap index 55314a873..a41bea928 100644 --- a/tests/__snapshots__/range.spec.tsx.snap +++ b/tests/__snapshots__/range.spec.tsx.snap @@ -1268,11 +1268,11 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1 class="rc-picker-header" >
          Date: Tue, 12 Dec 2023 14:15:05 +0800 Subject: [PATCH 279/380] refactor: rollback --- src/NewPicker/PickerInput/RangePicker.tsx | 8 +------- src/NewPicker/PickerInput/SinglePicker.tsx | 1 - src/NewPicker/PickerPanel/index.tsx | 16 ++++------------ src/NewPicker/hooks/useSyncState.ts | 2 +- 4 files changed, 6 insertions(+), 21 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 098e87432..d7b51d3e5 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -109,7 +109,6 @@ export interface RangePickerProps // Mode mode?: [startMode: PanelMode, endMode: PanelMode]; - /** @deprecated You can get more info from `onPickerValueChange` */ onPanelChange?: ( values: RangeValueType, modes: [startMode: PanelMode, endMode: PanelMode], @@ -268,8 +267,6 @@ function RangePicker( value: mode, }); - // useSyncState<[]> - const mergedMode = modes[activeIndex] || picker; /** Extends from `mergedMode` to patch `datetime` mode */ @@ -534,10 +531,7 @@ function RangePicker( onSelect={onPanelSelect} // PickerValue pickerValue={currentPickerValue} - onPickerValueChange={(nextPickerValue) => { - // We only need accept first param. Ignore second param. - setCurrentPickerValue(nextPickerValue); - }} + onPickerValueChange={setCurrentPickerValue} // Hover hoverValue={hoverValues} onHover={onPanelHover} diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 436d0eb5e..4e60e984f 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -66,7 +66,6 @@ export interface BasePickerProps extends SharedPickerPr // Mode mode?: PanelMode; - /** @deprecated You can get more info from `onPickerValueChange` */ onPanelChange?: (values: DateType, modes: PanelMode) => void; } diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index aea83f4f0..f53c3dfcd 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -57,17 +57,11 @@ export interface BasePickerPanelProps // Panel control defaultPickerValue?: DateType | null; pickerValue?: DateType | null; - onPickerValueChange?: ( - date: DateType, - info: { - mode: PanelMode; - }, - ) => void; + onPickerValueChange?: (date: DateType) => void; // Mode mode?: PanelMode; /** - * @deprecated You can get more info from `onPickerValueChange` instead. * Compatible with origin API. * Not mean the PickerPanel `onChange` event. */ @@ -261,19 +255,17 @@ function PickerPanel( }, ); - const setPickerValue = (nextPickerValue: DateType, nextMode?: PanelMode) => { + const setPickerValue = (nextPickerValue: DateType) => { setInternalPickerValue(nextPickerValue); - onPickerValueChange?.(nextPickerValue, { - mode: nextMode || mergedMode, - }); + onPickerValueChange?.(nextPickerValue); }; const triggerModeChange = (nextMode: PanelMode, viewDate?: DateType) => { setMergedMode(nextMode); if (viewDate) { - setPickerValue(viewDate, nextMode); + setPickerValue(viewDate); } onPanelChange?.(viewDate || pickerValue, nextMode); diff --git a/src/NewPicker/hooks/useSyncState.ts b/src/NewPicker/hooks/useSyncState.ts index dee37d9db..c75ea63d7 100644 --- a/src/NewPicker/hooks/useSyncState.ts +++ b/src/NewPicker/hooks/useSyncState.ts @@ -20,5 +20,5 @@ export default function useSyncState( forceUpdate({}); }; - return [getter, setter, getter()]; + return [getter, setter, getter(true)]; } From 3c4c9fbc4eb0303ae45454db72c7c8b5831777fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 12 Dec 2023 14:32:46 +0800 Subject: [PATCH 280/380] chore: add comment --- src/NewPicker/PickerInput/RangePicker.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index d7b51d3e5..2aa4a7916 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -109,6 +109,7 @@ export interface RangePickerProps // Mode mode?: [startMode: PanelMode, endMode: PanelMode]; + /** Trigger on each `mode` or `pickerValue` changed. */ onPanelChange?: ( values: RangeValueType, modes: [startMode: PanelMode, endMode: PanelMode], From b4f5b049c818a69964e2e12138bb93986f830446 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 12 Dec 2023 14:48:11 +0800 Subject: [PATCH 281/380] chore: all trigger panelChange --- docs/examples/debug.tsx | 7 +++++-- src/NewPicker/PickerPanel/index.tsx | 23 +++++++++++++++++++---- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 82bfe5060..7c2511e03 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -178,8 +178,11 @@ export default () => { value={value} multiple={true as boolean} onChange={setSingleValue} - onPickerValueChange={(pickerValue, info) => { - console.log('๐ŸŽผ PickerValue Change:', pickerValue, info); + // onPickerValueChange={(pickerValue) => { + // console.log('๐ŸŽผ PickerValue Change:', pickerValue); + // }} + onPanelChange={(panelValue, mode) => { + console.log('๐ŸŽฒ PanelValue Change:', panelValue, mode); }} /> {/* ( }, ); - const setPickerValue = (nextPickerValue: DateType) => { + // Both trigger when manually pickerValue or mode change + const triggerPanelChange = (viewDate?: DateType, nextMode?: PanelMode) => { + if (onPanelChange) { + onPanelChange?.(viewDate || pickerValue, nextMode || mergedMode); + } + }; + + const setPickerValue = (nextPickerValue: DateType, triggerPanelEvent = false) => { setInternalPickerValue(nextPickerValue); onPickerValueChange?.(nextPickerValue); + + if (triggerPanelEvent) { + triggerPanelChange(nextPickerValue); + } }; const triggerModeChange = (nextMode: PanelMode, viewDate?: DateType) => { @@ -268,7 +279,7 @@ function PickerPanel( setPickerValue(viewDate); } - onPanelChange?.(viewDate || pickerValue, nextMode); + triggerPanelChange(viewDate, nextMode); }; const onPanelValueSelect = (nextValue: DateType) => { @@ -316,7 +327,9 @@ function PickerPanel( }, [hoverValue, generateConfig]); // ======================= Components ======================= - const PanelComponent = components[internalMode] || DefaultComponents[internalMode] || DatePanel; + const PanelComponent = (components[internalMode] || + DefaultComponents[internalMode] || + DatePanel) as typeof DatePanel; // ========================= Render ========================= return ( @@ -334,7 +347,9 @@ function PickerPanel( onModeChange={triggerModeChange} // Value pickerValue={mergedPickerValue} - onPickerValueChange={setPickerValue} + onPickerValueChange={(nextPickerValue) => { + setPickerValue(nextPickerValue, true); + }} value={mergedValue[0]} onSelect={onPanelValueSelect} values={mergedValue} From 30accbd8ec326ebd0e5915968ff324a0ea86a5aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 12 Dec 2023 14:51:43 +0800 Subject: [PATCH 282/380] chore: fix decade format --- src/NewPicker/PickerPanel/DecadePanel/index.tsx | 2 +- tests/picker.spec.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx index 3d4301b5b..3ff0ea9f8 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -39,7 +39,7 @@ export default function DecadePanel(props: SharedPanelProps { diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index e01c6615e..70507795e 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -434,6 +434,8 @@ describe('Picker.Basic', () => { fireEvent.click(document.querySelector('.rc-picker-header-super-next-btn')); expectPanelChange('2090-09-03', 'decade'); + console.log(document.body.innerHTML); + // Select decade selectCell('2010-2019'); expectPanelChange('2010-09-03', 'year'); From e0e6ebde4af2fea4ab4aa423c15898977e1a3a78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 12 Dec 2023 15:28:50 +0800 Subject: [PATCH 283/380] chore: refactoring of OK logic --- docs/examples/debug.tsx | 9 ++-- src/NewPicker/PickerInput/Popup/Footer.tsx | 3 ++ src/NewPicker/PickerInput/SinglePicker.tsx | 38 ++++------------- src/NewPicker/PickerInput/hooks/useShowNow.ts | 2 +- src/NewPicker/interface.tsx | 13 +----- tests/picker.spec.tsx | 41 +++++++++---------- 6 files changed, 38 insertions(+), 68 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 7c2511e03..720443598 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -103,6 +103,7 @@ export default () => { // open // disabled ref={singleRef} + showToday suffixIcon="๐Ÿงถ" onChange={(val, text) => { console.log('๐Ÿ”ฅ Change:', val, text); @@ -120,7 +121,7 @@ export default () => { // needConfirm={false} />
          - { start: 'inputStart', end: 'inputEnd', }} - /> + /> */}
          - { onPanelChange={(panelValue, mode) => { console.log('๐ŸŽฒ PanelValue Change:', panelValue, mode); }} - /> + /> */} {/* { // OK onOk?: VoidFunction; + + // Now + onNow: VoidFunction; } export default function Footer(props: FooterProps) { diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 4e60e984f..6dd5c8586 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -69,27 +69,6 @@ export interface BasePickerProps extends SharedPickerPr onPanelChange?: (values: DateType, modes: PanelMode) => void; } -// export interface SinglePickerProps extends BasePickerProps { -// multiple?: false; - -// // Value -// value?: DateType; -// defaultValue?: DateType; -// onChange?: (date: DateType, dateString: string) => void; -// onCalendarChange?: (date: DateType, dateString: string, info: BaseInfo) => void; -// } - -// export interface MultiplePickerProps extends BasePickerProps { -// /** Not support `time` or `datetime` picker */ -// multiple: true; - -// // Value -// value?: DateType[]; -// defaultValue?: DateType[]; -// onChange?: (date: DateType[], dateString: string[]) => void; -// onCalendarChange?: (date: DateType[], dateString: string[], info: BaseInfo) => void; -// } - export type PickerProps = BasePickerProps & { /** Not support `time` or `datetime` picker */ multiple?: boolean; @@ -363,7 +342,7 @@ function Picker( // ======================== Submit ======================== /** * Different with RangePicker, confirm should check `multiple` logic. - * And confirm should not provide `date` value + * This will never provide `date` instead. */ const triggerConfirm = () => { // const triggerConfirm = (date?: DateType, skipFocus?: boolean) => { @@ -448,12 +427,14 @@ function Picker( // triggerOpen(false, { force: true }); // } - const nextCalendarValues = multiple ? toggleDates(getCalendarValue(), nextValue) : [nextValue]; - const passed = triggerSubmitChange(nextCalendarValues); + triggerConfirm(nextValue); - if (passed && !multiple) { - triggerOpen(false, { force: true }); - } + // const nextCalendarValues = multiple ? toggleDates(getCalendarValue(), nextValue) : [nextValue]; + // const passed = triggerSubmitChange(nextCalendarValues); + + // if (passed && !multiple) { + // triggerOpen(false, { force: true }); + // } }; // ======================== Panel ========================= @@ -482,7 +463,6 @@ function Picker( // >>> Trigger next active if !needConfirm // Fully logic check `useRangeValue` hook if (!needConfirm && !complexPicker && internalPicker === internalMode) { - // triggerConfirm(date); triggerConfirm(); } }; @@ -592,7 +572,6 @@ function Picker( const onSelectorKeyDown: SelectorProps['onKeyDown'] = (event) => { if (event.key === 'Tab') { - // triggerConfirm(null, true); triggerConfirm(); } }; @@ -626,7 +605,6 @@ function Picker( // Trade as confirm on field leave if (!mergedOpen && lastOp === 'input') { triggerOpen(false); - // triggerConfirm(null, true); triggerConfirm(); } diff --git a/src/NewPicker/PickerInput/hooks/useShowNow.ts b/src/NewPicker/PickerInput/hooks/useShowNow.ts index bfd0c606c..f46018d4f 100644 --- a/src/NewPicker/PickerInput/hooks/useShowNow.ts +++ b/src/NewPicker/PickerInput/hooks/useShowNow.ts @@ -15,7 +15,7 @@ export default function useShowNow( } // Compatible with old version `showToday` - if (picker === 'date' && showToday === false) { + if (picker === 'date' && typeof showToday === 'boolean') { return showToday; } diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 739c0a8b8..dc00c8084 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -212,23 +212,12 @@ export interface SharedPanelProps { * Or toggle `values` in multiple mode. */ onSelect: (date: DateType) => void; - // multiple?: boolean; - // /** - // * Trigger for single value change. - // * You can realize `onValuesChange` and ignore this to - // * both handle single or multiple mode if need. - // */ - // onChange: (date: DateType) => void; /** * Used for `multiple` mode. * When not `multiple`, it will be `[value]`. */ values?: DateType[]; - // /** - // * For multiple value usage. - // */ - // onValuesChange: (values: DateType[]) => void; // Mode onModeChange: (mode: PanelMode, date?: DateType) => void; @@ -479,4 +468,4 @@ export type IntRange = Exclude, export type ReplaceListType = { [P in keyof List]: Type; -}; \ No newline at end of file +}; diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 70507795e..223df9ff3 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -377,19 +377,19 @@ describe('Picker.Basic', () => { describe('full steps', () => { [ - // { - // name: 'date', - // yearBtn: '.rc-picker-year-btn', - // finalPanel: '.rc-picker-date-panel', - // finalMode: 'date', - // }, - // { - // name: 'datetime', - // yearBtn: '.rc-picker-year-btn', - // finalPanel: '.rc-picker-datetime-panel', - // finalMode: 'date', - // showTime: true, - // }, + { + name: 'date', + yearBtn: '.rc-picker-year-btn', + finalPanel: '.rc-picker-date-panel', + finalMode: 'date', + }, + { + name: 'datetime', + yearBtn: '.rc-picker-year-btn', + finalPanel: '.rc-picker-datetime-panel', + finalMode: 'date', + showTime: true, + }, { name: 'week', yearBtn: '.rc-picker-year-btn', @@ -398,7 +398,7 @@ describe('Picker.Basic', () => { picker: 'week', }, ].forEach(({ name, finalMode, yearBtn, finalPanel, picker, showTime }) => { - it.only(name, () => { + it(name, () => { const onChange = jest.fn(); const onPanelChange = jest.fn(); const { container } = render( @@ -429,7 +429,6 @@ describe('Picker.Basic', () => { fireEvent.click(document.querySelector('.rc-picker-decade-btn')); expectPanelChange('1990-09-03', 'decade'); - // Next page fireEvent.click(document.querySelector('.rc-picker-header-super-next-btn')); expectPanelChange('2090-09-03', 'decade'); @@ -489,8 +488,6 @@ describe('Picker.Basic', () => { }); }); - return; - it('renderExtraFooter', () => { const renderExtraFooter = jest.fn((mode) =>
          {mode}
          ); const { container } = render(); @@ -519,11 +516,11 @@ describe('Picker.Basic', () => { describe('showToday', () => { it('only works on date', () => { - const onSelect = jest.fn(); - const { container } = render(); + const onCalendarChange = jest.fn(); + const { container } = render(); openPicker(container); - fireEvent.click(document.querySelector('.rc-picker-today-btn')); - expect(isSame(onSelect.mock.calls[0][0], '1990-09-03')).toBeTruthy(); + fireEvent.click(document.querySelector('.rc-picker-now-btn')); + expect(isSame(onCalendarChange.mock.calls[0][0], '1990-09-03')).toBeTruthy(); }); it('disabled when in disabledDate', () => { @@ -548,6 +545,8 @@ describe('Picker.Basic', () => { }); }); + return; + it('icon', () => { expect(errorSpy).not.toHaveBeenCalled(); render( From 886cc78da1df23035f1354baec23dbd293fec396 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 12 Dec 2023 15:33:44 +0800 Subject: [PATCH 284/380] chore: add onNow btn --- docs/examples/debug.tsx | 2 +- src/NewPicker/PickerInput/Popup/Footer.tsx | 24 ++++++++++------------ src/NewPicker/PickerInput/RangePicker.tsx | 7 +++++++ src/NewPicker/PickerInput/SinglePicker.tsx | 18 ++++++++++------ 4 files changed, 31 insertions(+), 20 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 720443598..0ec65516e 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -99,7 +99,7 @@ export default () => { { } export default function Footer(props: FooterProps) { - const { mode, internalMode, renderExtraFooter, showNow, onSubmit, onOk, invalid, needConfirm } = - props; - const { - prefixCls, - locale, - generateConfig, - button: Button = 'button', - } = React.useContext(PickerContext); + mode, + internalMode, + renderExtraFooter, + showNow, + onSubmit, + onOk, + onNow, + invalid, + needConfirm, + } = props; - // ======================== Event ========================= - const onNow = () => { - const now = generateConfig.getNow(); - onSubmit(now); - }; + const { prefixCls, locale, button: Button = 'button' } = React.useContext(PickerContext); // ======================== Extra ========================= const extraNode = renderExtraFooter?.(mode); diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 2aa4a7916..d7ad11116 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -444,6 +444,11 @@ function RangePicker( } }; + const onNow = () => { + const now = generateConfig.getNow(); + triggerPartConfirm(now); + }; + // ======================== Panel ========================= const onPanelHover = (date: DateType) => { setInternalHoverValues(date ? fillCalendarValue(date, activeIndex) : null); @@ -543,6 +548,8 @@ function RangePicker( presets={presetList} onPresetHover={onPresetHover} onPresetSubmit={onPresetSubmit} + // Now + onNow={onNow} // Render cellRender={onInternalCellRender} /> diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 6dd5c8586..df6feb4c8 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -427,14 +427,19 @@ function Picker( // triggerOpen(false, { force: true }); // } - triggerConfirm(nextValue); + // triggerConfirm(nextValue); - // const nextCalendarValues = multiple ? toggleDates(getCalendarValue(), nextValue) : [nextValue]; - // const passed = triggerSubmitChange(nextCalendarValues); + const nextCalendarValues = multiple ? toggleDates(getCalendarValue(), nextValue) : [nextValue]; + const passed = triggerSubmitChange(nextCalendarValues); - // if (passed && !multiple) { - // triggerOpen(false, { force: true }); - // } + if (passed && !multiple) { + triggerOpen(false, { force: true }); + } + }; + + const onNow = () => { + const now = generateConfig.getNow(); + onPresetSubmit(now); }; // ======================== Panel ========================= @@ -532,6 +537,7 @@ function Picker( presets={presetList} onPresetHover={onPresetHover} onPresetSubmit={onPresetSubmit} + onNow={onNow} // Render cellRender={onInternalCellRender} /> From 03845ee983f158da41d1096261e02dbbe656db62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 12 Dec 2023 15:52:34 +0800 Subject: [PATCH 285/380] fix: now should block --- docs/examples/debug.tsx | 2 +- src/NewPicker/PickerInput/Popup/Footer.tsx | 34 +++++++++++++++++++--- src/NewPicker/PickerInput/RangePicker.tsx | 3 +- src/NewPicker/PickerInput/SinglePicker.tsx | 3 +- tests/picker.spec.tsx | 8 ++--- 5 files changed, 37 insertions(+), 13 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 0ec65516e..720443598 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -99,7 +99,7 @@ export default () => { { @@ -7,6 +9,8 @@ export interface FooterProps { internalMode: InternalMode; renderExtraFooter?: SharedPickerProps['renderExtraFooter']; showNow: boolean; + generateConfig: GenerateConfig; + disabledDate: DisabledDate; // Invalid /** From Footer component used only. Check if can OK button click */ @@ -20,7 +24,7 @@ export interface FooterProps { onOk?: VoidFunction; // Now - onNow: VoidFunction; + onNow: (now: DateType) => void; } export default function Footer(props: FooterProps) { @@ -34,6 +38,8 @@ export default function Footer(props: FooterProps) { onNow, invalid, needConfirm, + generateConfig, + disabledDate, } = props; const { prefixCls, locale, button: Button = 'button' } = React.useContext(PickerContext); @@ -42,14 +48,34 @@ export default function Footer(props: FooterProps) { const extraNode = renderExtraFooter?.(mode); // ======================== Ranges ======================== + // >>> Now + const now = generateConfig.getNow(); + const nowDisabled = disabledDate(now, { + type: mode, + }); + + const onInternalNow = () => { + if (!nowDisabled) { + onNow(now); + } + }; + + const nowPrefixCls = `${prefixCls}-now`; + const nowBtnPrefixCls = `${nowPrefixCls}-btn`; + const presetNode = showNow && ( -
        • - +
        • + {internalMode === 'date' ? locale.today : locale.now}
          • ); + // >>> OK const okNode = needConfirm && (
          • diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 4b66969ce..a9424a5e9 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -559,14 +559,14 @@ describe('Picker.Basic', () => { ); }); - return; - it('inputRender', () => { - render( } />); + render( } />); expect(document.querySelector('.rc-picker-input')).toMatchSnapshot(); }); + return; + describe('showNow', () => { it('datetime should display now', () => { const onSelect = jest.fn(); From 451794e4667ff4348c8affdf4d85d8b7f3b9f56a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 12 Dec 2023 16:34:15 +0800 Subject: [PATCH 288/380] test: fix test case --- docs/examples/debug.tsx | 15 ++++++--------- src/NewPicker/PickerInput/RangePicker.tsx | 2 +- src/NewPicker/PickerInput/SinglePicker.tsx | 2 +- src/NewPicker/PickerInput/hooks/useShowNow.ts | 5 +++-- tests/new-range.spec.tsx | 8 +++----- tests/picker.spec.tsx | 4 ++-- 6 files changed, 16 insertions(+), 20 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 720443598..d6a07fb2d 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -100,10 +100,9 @@ export default () => { // Shared {...sharedLocale} // multiple - // open // disabled ref={singleRef} - showToday + showTime suffixIcon="๐Ÿงถ" onChange={(val, text) => { console.log('๐Ÿ”ฅ Change:', val, text); @@ -121,13 +120,12 @@ export default () => { // needConfirm={false} />
          - {/* true} + showTime + showNow panelRender={(ori) => <>2333{ori}} placeholder={['Start', 'End']} suffixIcon="๐Ÿงถ" @@ -148,7 +146,6 @@ export default () => { console.log('๐Ÿ† Next Open:', nextOpen); }} onPickerValueChange={(val, info) => { - console.error('!'); console.log( '๐Ÿ‘ป Picker Value Change:', val, @@ -161,7 +158,7 @@ export default () => { start: 'inputStart', end: 'inputEnd', }} - /> */} + />
          ); diff --git a/src/NewPicker/hooks/useTimeConfig.ts b/src/NewPicker/hooks/useTimeConfig.ts index 5bff4eaca..64e6b98d0 100644 --- a/src/NewPicker/hooks/useTimeConfig.ts +++ b/src/NewPicker/hooks/useTimeConfig.ts @@ -61,9 +61,15 @@ export function getTimeConfig( const { showTime, picker } = componentProps; if (showTime || picker === 'time') { - return showTime && typeof showTime === 'object' - ? showTime - : (pickTimeProps(componentProps) as Config); + const timeConfig = + showTime && typeof showTime === 'object' + ? showTime + : (pickTimeProps(componentProps) as Config); + + return { + format: 'HH:mm:ss', + ...timeConfig, + }; } return null; diff --git a/src/NewPicker/hooks/useTimeInfo.ts b/src/NewPicker/hooks/useTimeInfo.ts index 713be610b..bd4508af8 100644 --- a/src/NewPicker/hooks/useTimeInfo.ts +++ b/src/NewPicker/hooks/useTimeInfo.ts @@ -48,10 +48,11 @@ function generateUnits( export default function useTimeInfo( date: DateType, generateConfig: GenerateConfig, - props: SharedTimeProps, + props: SharedTimeProps = {}, ) { const { - format, + // Fallback if `showTime` is empty + format = '', // Show showHour, @@ -72,7 +73,7 @@ export default function useTimeInfo( disabledHours, disabledMinutes, disabledSeconds, - } = props; + } = props || {}; // ========================== Show ========================== const mergedShowHour = checkShow(format, ['H', 'LT', 'LLL'], showHour); @@ -158,6 +159,9 @@ export default function useTimeInfo( }; return [ + // getValidTime + getValidTime, + // Show columns mergedShowHour, mergedShowMinute, @@ -170,8 +174,5 @@ export default function useTimeInfo( getMinuteUnits, getSecondUnits, getMillisecondUnits, - - // getValidTime - getValidTime, ] as const; } From d4991fb66feeb7d8d3ac15e169408f7b8cfc395e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 13 Dec 2023 17:39:42 +0800 Subject: [PATCH 299/380] chore: fix logic --- docs/examples/debug.tsx | 2 +- .../PickerPanel/TimePanel/TimePanelBody/util.ts | 13 ++++++++++--- tests/picker.spec.tsx | 6 ++++-- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index c4a1b3499..a6a735b3c 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -102,7 +102,7 @@ export default () => { // multiple // disabled picker="time" - minuteStep={30} + minuteStep={20} ref={singleRef} suffixIcon="๐Ÿงถ" onChange={(val, text) => { diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/util.ts b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/util.ts index dff2ba1a9..31aa913ce 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/util.ts +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/util.ts @@ -16,9 +16,16 @@ export function findValidateTime( const nextUnit = units.find((unit) => unit.value === nextValue); if (!nextUnit || nextUnit.disabled) { - const validateUnit = units.find((unit) => !unit.disabled); - nextValue = validateUnit!.value; - nextDate = generateConfig[setUnitValue](nextDate, nextValue); + // Find most closest unit + const validateUnits = units.filter((unit) => !unit.disabled); + const reverseEnabledUnits = [...validateUnits].reverse(); + const validateUnit = + reverseEnabledUnits.find((unit) => unit.value <= nextValue) || validateUnits[0]; + + if (validateUnit) { + nextValue = validateUnit.value; + nextDate = generateConfig[setUnitValue](nextDate, nextValue); + } } return nextValue; diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 4b4566340..a53cdcb07 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -620,15 +620,17 @@ describe('Picker.Basic', () => { describe('time step', () => { it('work with now', () => { - jest.setSystemTime(getDay('1990-09-03 00:09:00').valueOf()); + jest.setSystemTime(getDay('1990-09-03 00:11:00').valueOf()); const onCalendarChange = jest.fn(); const { container } = render( , ); + openPicker(container); fireEvent.click(document.querySelector('.rc-picker-now > a')); + expect( - isSame(onCalendarChange.mock.calls[0][0], '1990-09-03 00:00:59', 'second'), + isSame(onCalendarChange.mock.calls[0][0], '1990-09-03 00:10:00', 'second'), ).toBeTruthy(); jest.setSystemTime(getDay('1990-09-03 00:00:00').valueOf()); }); From 54445e8a549d4bb2a17471dec5f8ddf9f08f9ef8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 13 Dec 2023 17:57:26 +0800 Subject: [PATCH 300/380] test: fix test case --- docs/examples/debug.tsx | 2 +- src/NewPicker/hooks/useTimeInfo.ts | 18 ++++++++++++++++++ tests/picker.spec.tsx | 2 +- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index a6a735b3c..f4d1efeea 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -102,7 +102,7 @@ export default () => { // multiple // disabled picker="time" - minuteStep={20} + minuteStep={7.5} ref={singleRef} suffixIcon="๐Ÿงถ" onChange={(val, text) => { diff --git a/src/NewPicker/hooks/useTimeInfo.ts b/src/NewPicker/hooks/useTimeInfo.ts index bd4508af8..996531cdc 100644 --- a/src/NewPicker/hooks/useTimeInfo.ts +++ b/src/NewPicker/hooks/useTimeInfo.ts @@ -1,3 +1,4 @@ +import { warning } from 'rc-util'; import * as React from 'react'; import type { GenerateConfig } from '../../generate'; import { leftPad } from '../../utils/miscUtil'; @@ -75,6 +76,23 @@ export default function useTimeInfo( disabledSeconds, } = props || {}; + // ======================== Warnings ======================== + if (process.env.NODE_ENV !== 'production') { + const isHourStepValid = 24 % hourStep === 0; + const isMinuteStepValid = 60 % minuteStep === 0; + const isSecondStepValid = 60 % secondStep === 0; + + warning(isHourStepValid, `\`hourStep\` ${hourStep} is invalid. It should be a factor of 24.`); + warning( + isMinuteStepValid, + `\`minuteStep\` ${minuteStep} is invalid. It should be a factor of 60.`, + ); + warning( + isSecondStepValid, + `\`secondStep\` ${secondStep} is invalid. It should be a factor of 60.`, + ); + } + // ========================== Show ========================== const mergedShowHour = checkShow(format, ['H', 'LT', 'LLL'], showHour); const mergedShowMinute = checkShow(format, ['m', 'LT', 'LLL'], showMinute); diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index a53cdcb07..adc8065e1 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -698,7 +698,7 @@ describe('Picker.Basic', () => { openPicker(container); const column = document.querySelector( - `.rc-picker-time-panel-column:nth-child(${index + 1})`, + `.rc-picker-time-panel-column-holder:nth-child(${index + 1})`, ); expect(column).toBeTruthy(); From 4393087d508a16cb694301694c13e1e0ad2943f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 13 Dec 2023 19:44:44 +0800 Subject: [PATCH 301/380] chore: tmp of it --- docs/examples/debug.tsx | 1 + src/NewPicker/PickerInput/Selector/Input.tsx | 3 ++- src/NewPicker/PickerInput/Selector/RangeSelector.tsx | 4 +++- src/NewPicker/PickerInput/Selector/SingleSelector.tsx | 5 +++-- .../PickerInput/Selector/hooks/useInputProps.ts | 9 ++++++++- tests/picker.spec.tsx | 4 ++-- 6 files changed, 19 insertions(+), 7 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index f4d1efeea..adab7d7cc 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -101,6 +101,7 @@ export default () => { {...sharedLocale} // multiple // disabled + role="good" picker="time" minuteStep={7.5} ref={singleRef} diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 5747bbc7b..b8e586114 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -33,7 +33,8 @@ export interface InputProps extends Omit boolean; active?: boolean; - showActiveCls: boolean; + /** Used for single picker only */ + showActiveCls?: boolean; suffixIcon?: React.ReactNode; value?: string; onChange: (value: string) => void; diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 3c4ef0040..b7ba89379 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -205,7 +205,9 @@ function RangeSelector( return (
          ( // ======================== Render ======================== return (
          ( return index !== undefined ? propValue[index] : propValue; } + const pickedAttrs = pickAttrs(props, { + aria: true, + data: true, + }); + return { + ...pickedAttrs, + // ============== Shared ============== format: maskFormat, validateFormat: (text) => !!validateFormat(text), @@ -180,7 +188,6 @@ export default function useInputProps( onKeyDown?.(event); }, - // ============= By Index ============= // ============ Post Props ============ ...postProps?.({ valueTexts, diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index adc8065e1..7759d6783 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -717,14 +717,14 @@ describe('Picker.Basic', () => { }); }); - return; - it('pass data- & aria- & role', () => { const { container } = render(); expect(container).toMatchSnapshot(); }); + return; + it('support name & autoComplete prop', () => { const { container } = render(); From 913fbf4d5ab021caa7fd0288472a861da180174b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 14 Dec 2023 11:14:19 +0800 Subject: [PATCH 302/380] test: update snapshot --- tests/__snapshots__/picker.spec.tsx.snap | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap index af3498169..271daa102 100644 --- a/tests/__snapshots__/picker.spec.tsx.snap +++ b/tests/__snapshots__/picker.spec.tsx.snap @@ -67,13 +67,11 @@ exports[`Picker.Basic pass data- & aria- & role 1`] = ` class="rc-picker-input" >
          From f3338dfa9422924b9d54d5e6687e996ed15f8c8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 14 Dec 2023 15:18:19 +0800 Subject: [PATCH 303/380] chore: pick props --- .../PickerInput/Selector/RangeSelector.tsx | 9 +++++---- .../PickerInput/Selector/SingleSelector.tsx | 9 +++++---- .../PickerInput/Selector/hooks/useRootProps.ts | 17 +++++++++++++++++ tests/__snapshots__/range.spec.tsx.snap | 1 - tests/range.spec.tsx | 12 +++++------- 5 files changed, 32 insertions(+), 16 deletions(-) create mode 100644 src/NewPicker/PickerInput/Selector/hooks/useRootProps.ts diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index b7ba89379..43b35087a 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -1,11 +1,11 @@ import classNames from 'classnames'; import ResizeObserver from 'rc-resize-observer'; import { useEvent } from 'rc-util'; -import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; import type { SelectorProps, SelectorRef } from '../../interface'; import PickerContext from '../context'; import useInputProps from './hooks/useInputProps'; +import useRootProps from './hooks/useRootProps'; import Icon, { ClearIcon } from './Icon'; import Input, { type InputRef } from './Input'; @@ -144,6 +144,9 @@ function RangeSelector( }, })); + // ======================== Props ========================= + const rootProps = useRootProps(restProps); + // ===================== Placeholder ====================== const mergedPlaceholder = React.useMemo<[string, string]>( () => (Array.isArray(placeholder) ? placeholder : [placeholder, placeholder]), @@ -205,9 +208,7 @@ function RangeSelector( return (
          ( }, })); + // ======================== Props ========================= + const rootProps = useRootProps(restProps); + // ======================== Inputs ======================== const getInputProps = useInputProps(props, ({ valueTexts }) => ({ value: valueTexts[0] || '', @@ -117,9 +120,7 @@ function SingleSelector( // ======================== Render ======================== return (
          ) { + const propNames = ['onMouseEnter', 'onMouseLeave']; + + return React.useMemo(() => { + const rootProps: React.HTMLAttributes = {}; + + propNames.forEach((propName) => { + if (props[propName]) { + rootProps[propName] = props[propName]; + } + }); + + return rootProps; + }, [props]); +} diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap index a41bea928..f9e59b7a9 100644 --- a/tests/__snapshots__/range.spec.tsx.snap +++ b/tests/__snapshots__/range.spec.tsx.snap @@ -96,7 +96,6 @@ exports[`Picker.Range panelRender 1`] = `
          { cellRender={(date, info) => { range = info.range; if (typeof date !== 'number') { - return date.format('YYYY-MM-DD'); + return (date as Dayjs).format('YYYY-MM-DD'); } }} />, @@ -1598,10 +1597,9 @@ describe('Picker.Range', () => { const { container } = render( , ); - // wrapper.simulate('mouseenter'); fireEvent.mouseEnter(container.querySelector('.rc-picker')); expect(handleMouseEnter).toHaveBeenCalled(); - // wrapper.simulate('mouseleave'); + fireEvent.mouseLeave(container.querySelector('.rc-picker')); expect(handleMouseLeave).toHaveBeenCalled(); }); @@ -1609,8 +1607,8 @@ describe('Picker.Range', () => { // https://github.com/ant-design/ant-design/issues/31334 it('keyboard should not trigger on disabledDate', () => { const onCalendarChange = jest.fn(); - const now = moment(); - const disabledDate = (current: Moment) => { + const now = dayjs(); + const disabledDate = (current: Dayjs) => { return current.diff(now, 'days') > 1 || current.diff(now, 'days') < -1; }; const { container } = render( From 4b8d952df51ce9aa4fbc233baf338d2906e546ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 14 Dec 2023 15:45:47 +0800 Subject: [PATCH 304/380] chore: fix props --- src/NewPicker/PickerInput/Selector/Input.tsx | 2 +- .../Selector/hooks/useInputProps.ts | 21 ++++++++++++++++++- tests/picker.spec.tsx | 8 +++---- 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index b8e586114..bd7f14f79 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -387,6 +387,7 @@ const Input = React.forwardRef((props, ref) => { ((props, ref) => { // Value value={inputValue} onChange={onInternalChange} - autoComplete="off" /> {clearIcon} diff --git a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts index e987ac6d9..b20a03528 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts +++ b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts @@ -24,6 +24,8 @@ export default function useInputProps( | 'onKeyDown' | 'onChange' | 'activeHelp' + | 'name' + | 'autoComplete' > & { id?: string | string[]; value?: DateType[]; @@ -56,6 +58,8 @@ export default function useInputProps( onKeyDown, onChange, activeHelp, + name, + autoComplete, id, value, @@ -116,7 +120,7 @@ export default function useInputProps( data: true, }); - return { + const inputProps = { ...pickedAttrs, // ============== Shared ============== @@ -129,6 +133,10 @@ export default function useInputProps( required, 'aria-required': ariaRequired, + name, + + autoComplete, + // ============= By Index ============= id: getProp(id), @@ -193,6 +201,17 @@ export default function useInputProps( valueTexts, }), }; + + // ============= CleanEmpty ============= + const cleanProps = { ...inputProps }; + + Object.keys(cleanProps).forEach((key) => { + if (cleanProps[key] === undefined) { + delete cleanProps[key]; + } + }); + + return cleanProps; }; return getInputProps; diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 7759d6783..839021ba6 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -723,13 +723,11 @@ describe('Picker.Basic', () => { expect(container).toMatchSnapshot(); }); - return; - it('support name & autoComplete prop', () => { - const { container } = render(); + const { container } = render(); expect(container.querySelector('input')).toHaveAttribute('name', 'bamboo'); - expect(container.querySelector('input')).toHaveAttribute('autoComplete', 'off'); + expect(container.querySelector('input')).toHaveAttribute('autoComplete', 'on'); }); it('blur should reset invalidate text', () => { @@ -744,6 +742,8 @@ describe('Picker.Basic', () => { expect(document.querySelector('input').value).toEqual(''); }); + return; + it('should render correctly in rtl', () => { const { container } = render(); expect(container).toMatchSnapshot(); From 272b5995356862eccedece262d3b10f7a0b8f406 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 14 Dec 2023 16:00:11 +0800 Subject: [PATCH 305/380] fix: reset logic --- docs/examples/debug.tsx | 7 ++----- .../PickerInput/Selector/SingleSelector.tsx | 1 + .../PickerInput/Selector/hooks/useInputProps.ts | 12 +++++------- src/NewPicker/hooks/useTimeInfo.ts | 6 +++--- tests/picker.spec.tsx | 6 +++++- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index adab7d7cc..d0c87cd36 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -99,11 +99,8 @@ export default () => { { @@ -121,7 +118,7 @@ export default () => { style={{ width: 300 }} />
          - {/* true} @@ -160,7 +157,7 @@ export default () => { start: 'inputStart', end: 'inputEnd', }} - /> */} + />
          diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 7de92814b..8fa6f9a46 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -746,8 +746,6 @@ describe('Picker.Basic', () => { expect(document.querySelector('input').value).toEqual(''); }); - return; - it('should render correctly in rtl', () => { const { container } = render(); expect(container).toMatchSnapshot(); @@ -772,6 +770,8 @@ describe('Picker.Basic', () => { expect(onClick).toHaveBeenCalled(); }); + return; + it('not open when disabled', () => { const { rerender } = render(); // document.querySelector('.rc-picker').simulate('click'); From e1b903c4d2b557d0d6f5c3aba87d0f55edf721b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 14 Dec 2023 16:33:19 +0800 Subject: [PATCH 307/380] chore: fix type --- docs/examples/debug.tsx | 8 +++- src/NewPicker/PickerInput/Popup/Footer.tsx | 2 +- src/NewPicker/PickerInput/SinglePicker.tsx | 35 +++++++++-------- tests/picker.spec.tsx | 45 +++++++++++----------- 4 files changed, 48 insertions(+), 42 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index d0c87cd36..76f63c486 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -101,6 +101,10 @@ export default () => { {...sharedLocale} role="good" picker="time" + // showTime={{ + // defaultValue: dayjs('2000-01-01 01:03:05.800'), + // }} + pickerValue={dayjs('2000-01-01 01:03:05.800')} ref={singleRef} suffixIcon="๐Ÿงถ" onChange={(val, text) => { @@ -118,7 +122,7 @@ export default () => { style={{ width: 300 }} />
          - true} @@ -157,7 +161,7 @@ export default () => { start: 'inputStart', end: 'inputEnd', }} - /> + /> */}
          diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 564b6260e..bc8fa4948 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-loop-func */ import { act, createEvent, fireEvent, render } from '@testing-library/react'; -import type { Moment } from 'moment'; +import { Dayjs } from 'dayjs'; import moment from 'moment'; import 'moment/locale/zh-cn'; import KeyCode from 'rc-util/lib/KeyCode'; @@ -859,8 +859,6 @@ describe('Picker.Basic', () => { expect(container.querySelector('input').id).toEqual('light'); }); - return; - it('dateRender', () => { render( date.format('YYYY-MM-DD')} />); const tdList = document.querySelectorAll('tbody td'); @@ -884,7 +882,7 @@ describe('Picker.Basic', () => { `custom format:${val.format('YYYYMMDD')}`, 'YYYY-MM-DD']} + format={[(val: Dayjs) => `custom format:${val.format('YYYYMMDD')}`, 'YYYY-MM-DD']} />, ); expect(document.querySelector('input')).toHaveAttribute('readOnly'); @@ -926,6 +924,8 @@ describe('Picker.Basic', () => { expect(document.querySelector('.rc-picker-month-panel')).toBeTruthy(); }); + return; + describe('hover value', () => { beforeEach(() => { jest.useFakeTimers(); From 67126dae53cb58bd10548f89ad995764d917473b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 14 Dec 2023 17:42:22 +0800 Subject: [PATCH 309/380] fix: Enter should open picker --- src/NewPicker/PickerInput/RangePicker.tsx | 1 + src/NewPicker/PickerInput/Selector/Input.tsx | 2 +- .../Selector/hooks/useInputProps.ts | 11 +++++-- src/NewPicker/PickerInput/SinglePicker.tsx | 1 + src/NewPicker/interface.tsx | 1 + tests/picker.spec.tsx | 30 +++++++++---------- 6 files changed, 27 insertions(+), 19 deletions(-) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 161e58d2c..0dbf82d30 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -702,6 +702,7 @@ function RangePicker( // Disabled disabled={disabled} // Open + open={mergedOpen} onOpenChange={triggerOpen} // Click onClick={onSelectorClick} diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index bd7f14f79..103b9c968 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -117,7 +117,7 @@ const Input = React.forwardRef((props, ref) => { }, [maskFormat, focusCellIndex, helped]); // ======================== Modify ======================== - // When input modify content, trigger `onText` if is not the format + // When input modify content, trigger `onHelp` if is not the format const onModify = (text: string) => { if (text && text !== format && text !== value) { onHelp(); diff --git a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts index cf5920e12..859047ee9 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts +++ b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts @@ -26,6 +26,7 @@ export default function useInputProps( | 'activeHelp' | 'name' | 'autoComplete' + | 'open' > & { id?: string | string[]; value?: DateType[]; @@ -54,6 +55,7 @@ export default function useInputProps( onBlur, onInputChange, onInvalid, + open, onOpenChange, onKeyDown, onChange, @@ -164,7 +166,7 @@ export default function useInputProps( onSubmit, // Get validate text value - onChange: (text) => { + onChange: (text: string) => { onInputChange(); const parsed = validateFormat(text); @@ -184,13 +186,18 @@ export default function useInputProps( index, }); }, - onKeyDown: (event) => { + onKeyDown: (event: React.KeyboardEvent) => { switch (event.key) { case 'Escape': onOpenChange(false, { index, }); break; + case 'Enter': + if (!open) { + onOpenChange(true); + } + break; } onKeyDown?.(event); diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 2bab647d4..aefc61fbe 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -654,6 +654,7 @@ function Picker( // Disabled disabled={disabled} // Open + open={mergedOpen} onOpenChange={triggerOpen} // Click onClick={onSelectorClick} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index fcadfd855..269a80594 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -450,6 +450,7 @@ export interface SelectorProps extends SharedHTMLAttrs { changeOnBlur?: boolean; // Open + open: boolean; /** Trigger when need open by selector */ onOpenChange: OnOpenChange; diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index bc8fa4948..3826dea42 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -924,8 +924,6 @@ describe('Picker.Basic', () => { expect(document.querySelector('.rc-picker-month-panel')).toBeTruthy(); }); - return; - describe('hover value', () => { beforeEach(() => { jest.useFakeTimers(); @@ -975,13 +973,13 @@ describe('Picker.Basic', () => { const { container } = render(); openPicker(container); const cell = findCell(24); - // cell.simulate('mouseEnter'); fireEvent.mouseEnter(cell); jest.runAllTimers(); expect(document.querySelector('input').value).toBe('2020-07-24'); expect(document.querySelector('.rc-picker-input')).toHaveClass('rc-picker-input-placeholder'); + fireEvent.mouseLeave(cell); fireEvent.change(container.querySelector('input'), { target: { value: '2020-07-23', @@ -1003,20 +1001,17 @@ describe('Picker.Basic', () => { describe('time picker open to scroll', () => { let domMock: ReturnType; - let canBeSeen = false; let triggered = false; beforeAll(() => { domMock = spyElementPrototypes(HTMLElement, { - offsetParent: { - get: () => { - if (canBeSeen) { - return {}; - } - canBeSeen = true; - return null; + offsetTop: { + get() { + const childList = Array.from(this.parentNode?.childNodes || []); + return childList.indexOf(this) * 30; }, }, + scrollTop: { get: () => 0, set: () => { @@ -1030,12 +1025,15 @@ describe('Picker.Basic', () => { domMock.mockRestore(); }); - it('work', () => { + it('work', async () => { jest.useFakeTimers(); const { unmount } = render( , ); - jest.runAllTimers(); + + act(() => { + jest.advanceTimersByTime(1000); + }); expect(triggered).toBeTruthy(); @@ -1054,9 +1052,7 @@ describe('Picker.Basic', () => { }); it('should not open if prevent default is called', () => { - const onKeyDown = jest.fn(({ which }, preventDefault) => { - if (which === 13) preventDefault(); - }); + const onKeyDown = jest.fn(); const { container } = render(); openPicker(container); @@ -1070,6 +1066,8 @@ describe('Picker.Basic', () => { }); }); + return; + it('disabledDate should not crash', () => { const { container } = render( d.isAfter(Date.now())} />); fireEvent.change(container.querySelector('input'), { From 872432e49e16eea7c03d86a63df311b318fd3ead Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 14 Dec 2023 17:56:36 +0800 Subject: [PATCH 310/380] fix: missing onKeyDown --- docs/examples/debug.tsx | 3 +++ src/NewPicker/PickerInput/RangePicker.tsx | 3 +++ src/NewPicker/PickerInput/SinglePicker.tsx | 3 +++ tests/picker.spec.tsx | 15 ++++++++++----- 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 76f63c486..fb0429e73 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -120,6 +120,9 @@ export default () => { console.log('๐ŸŽผ Panel Change:', val, val?.format('YYYY-MM-DD'), info); }} style={{ width: 300 }} + onKeyDown={(e) => { + console.log('๐ŸŽฌ KeyDown:', e); + }} />
          {/* ( defaultValue, value, needConfirm, + onKeyDown, // Disabled disabled, @@ -593,6 +594,8 @@ function RangePicker( if (event.key === 'Tab') { triggerPartConfirm(null, true); } + + onKeyDown?.(event); }; // ======================= Context ======================== diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index aefc61fbe..85e8474da 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -117,6 +117,7 @@ function Picker( value, needConfirm, onChange, + onKeyDown, // Disabled disabled, @@ -570,6 +571,8 @@ function Picker( if (event.key === 'Tab') { triggerConfirm(); } + + onKeyDown?.(event); }; // ======================= Context ======================== diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 3826dea42..f4d478d3d 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -1052,22 +1052,26 @@ describe('Picker.Basic', () => { }); it('should not open if prevent default is called', () => { - const onKeyDown = jest.fn(); + const onKeyDown = jest.fn(({ which }, preventDefault) => { + console.log('--->>>', which, preventDefault); + }); const { container } = render(); openPicker(container); expect(isOpen()).toBeTruthy(); keyDown(KeyCode.ESC); + expect(onKeyDown).toHaveBeenCalled(); expect(isOpen()).toBeFalsy(); + onKeyDown.mockReset(); + console.log('???'); keyDown(KeyCode.ENTER); + expect(onKeyDown).toHaveBeenCalled(); expect(isOpen()).toBeFalsy(); }); }); - return; - it('disabledDate should not crash', () => { const { container } = render( d.isAfter(Date.now())} />); fireEvent.change(container.querySelector('input'), { @@ -1084,17 +1088,18 @@ describe('Picker.Basic', () => { , ); expect(document.querySelector('.rc-picker-presets li').textContent).toBe('Bamboo'); - // document.querySelector('.rc-picker-presets li').simulate('click'); fireEvent.click(document.querySelector('.rc-picker-presets li')); expect(onChange.mock.calls[0][0].format('YYYY-MM-DD')).toEqual('2000-09-03'); }); + return; + it('presets support callback', () => { const onChange = jest.fn(); const mockPresetValue = jest.fn().mockImplementationOnce(() => moment('2000-09-03')); From ffdf577f48330336c90851125a6edd1e18445b59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 14 Dec 2023 18:25:06 +0800 Subject: [PATCH 311/380] chore: move preventDefault to native event --- .../Selector/hooks/useInputProps.ts | 28 ++++++++++--------- tests/picker.spec.tsx | 9 +++--- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts index 859047ee9..9013d5e50 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts +++ b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts @@ -187,20 +187,22 @@ export default function useInputProps( }); }, onKeyDown: (event: React.KeyboardEvent) => { - switch (event.key) { - case 'Escape': - onOpenChange(false, { - index, - }); - break; - case 'Enter': - if (!open) { - onOpenChange(true); - } - break; - } - onKeyDown?.(event); + + if (!event.defaultPrevented) { + switch (event.key) { + case 'Escape': + onOpenChange(false, { + index, + }); + break; + case 'Enter': + if (!open) { + onOpenChange(true); + } + break; + } + } }, // ============ Post Props ============ diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index f4d478d3d..454abe2d0 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -1052,8 +1052,10 @@ describe('Picker.Basic', () => { }); it('should not open if prevent default is called', () => { - const onKeyDown = jest.fn(({ which }, preventDefault) => { - console.log('--->>>', which, preventDefault); + const onKeyDown = jest.fn((event: React.KeyboardEvent) => { + if (event.which === 13) { + event.preventDefault(); + } }); const { container } = render(); @@ -1063,9 +1065,8 @@ describe('Picker.Basic', () => { keyDown(KeyCode.ESC); expect(onKeyDown).toHaveBeenCalled(); expect(isOpen()).toBeFalsy(); - onKeyDown.mockReset(); + onKeyDown.mockClear(); - console.log('???'); keyDown(KeyCode.ENTER); expect(onKeyDown).toHaveBeenCalled(); expect(isOpen()).toBeFalsy(); From b8ffa3983e944b11571aa9436a9a044fac3d122a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 15 Dec 2023 10:46:17 +0800 Subject: [PATCH 312/380] test: all test --- docs/examples/debug.tsx | 12 ++++++------ tests/picker.spec.tsx | 30 +++++++++++++++++++++--------- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index fb0429e73..8d2b006bb 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -99,12 +99,12 @@ export default () => { dayjs('2000-03-02'), + }, + ]} ref={singleRef} suffixIcon="๐Ÿงถ" onChange={(val, text) => { diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 454abe2d0..7e0eaac06 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -1099,11 +1099,9 @@ describe('Picker.Basic', () => { expect(onChange.mock.calls[0][0].format('YYYY-MM-DD')).toEqual('2000-09-03'); }); - return; - it('presets support callback', () => { const onChange = jest.fn(); - const mockPresetValue = jest.fn().mockImplementationOnce(() => moment('2000-09-03')); + const mockPresetValue = jest.fn().mockImplementationOnce(() => getDay('2000-09-03')); render( { expect(mockPresetValue).toHaveBeenCalled(); expect(onChange.mock.calls[0][0].format('YYYY-MM-DD')).toEqual('2000-09-03'); - mockPresetValue.mockImplementationOnce(() => moment('2023-05-01 12:34:56')); + mockPresetValue.mockImplementationOnce(() => getDay('2023-05-01 12:34:56')); fireEvent.click(firstPreset); @@ -1151,15 +1149,29 @@ describe('Picker.Basic', () => { moment.locale('en'); }); - it('select minutes and seconds directly in dateTime mode will apply the current time', () => { - jest.setSystemTime(getDay('2023-09-04 21:49:10').valueOf()); - const ui = ; - const { container } = render(ui); + it('select time directly in dateTime to find validate time', () => { + const rangeNum = (start: number, end: number) => { + const list: number[] = []; + for (let i = start; i <= end; i += 1) { + list.push(i); + } + + return list; + }; + + const { container } = render( + rangeNum(0, 6)} + disabledSeconds={() => rangeNum(0, 20)} + />, + ); openPicker(container); + // Select minute selectColumn(1, 5); - expect(container.querySelector('input')).toHaveValue('2023-09-04 21:05:10'); + expect(container.querySelector('input')).toHaveValue('1990-09-03 07:05:21'); }); }); From cd0165ee3d41a894002a55a3d725ee4a95af91a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 15 Dec 2023 11:05:10 +0800 Subject: [PATCH 313/380] test: update blur test --- docs/examples/debug.tsx | 6 ++- tests/blur.spec.tsx | 111 +++++++++++++++------------------------- 2 files changed, 46 insertions(+), 71 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 8d2b006bb..102a86389 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -99,6 +99,7 @@ export default () => { { }} />
          - {/* true} picker="time" showTime + changeOnBlur={false} showNow panelRender={(ori) => <>2333{ori}} placeholder={['Start', 'End']} @@ -164,7 +166,7 @@ export default () => { start: 'inputStart', end: 'inputEnd', }} - /> */} + />
          - {/* { // console.log('๐ŸŽผ PickerValue Change:', pickerValue); @@ -243,7 +244,7 @@ export default () => { onPanelChange={(panelValue, mode) => { console.log('๐ŸŽฒ PanelValue Change:', panelValue, mode); }} - /> */} + /> {/* ( const triggerChange = useEvent((nextValue: DateType[] | null) => { setMergedValue(nextValue); - // TODO: compare values - if ( - onChange - // && - // !isSame( - // generateConfig, - // locale, - // mergedValue, - // nextValue, - // picker === 'date' && mergedShowTime ? 'datetime' : picker, - // ) + onChange && + (nextValue === null || + mergedValue.length !== nextValue.length || + mergedValue.some( + (ori, index) => + !isSame( + generateConfig, + locale, + ori, + nextValue[index], + picker === 'date' && mergedShowTime ? 'datetime' : picker, + ), + )) ) { onChange?.(multiple ? nextValue : nextValue[0]); } @@ -288,17 +291,21 @@ function PickerPanel( // Update mode if needed if (mergedMode !== picker) { - const queue: PanelMode[] = ['decade', 'year', 'month']; + const decadeYearQueue: PanelMode[] = ['decade', 'year']; + const decadeYearMonthQueue: PanelMode[] = [...decadeYearQueue, 'month']; + + const pickerQueue: Partial> = { + quarter: [...decadeYearQueue, 'quarter'], + week: [...decadeYearMonthQueue, 'week'], + date: [...decadeYearMonthQueue, 'date'], + }; + + const queue = pickerQueue[picker] || decadeYearMonthQueue; const index = queue.indexOf(mergedMode); const nextMode = queue[index + 1]; - if (index >= 0 && nextMode) { + + if (nextMode) { triggerModeChange(nextMode, nextValue); - } else if (mergedMode === 'month') { - if (picker === 'date') { - triggerModeChange('date', nextValue); - } else if (picker === 'week') { - triggerModeChange('week', nextValue); - } } } }; diff --git a/tests/components.spec.tsx b/tests/components.spec.tsx index 59454424b..f53965554 100644 --- a/tests/components.spec.tsx +++ b/tests/components.spec.tsx @@ -1,11 +1,11 @@ import { render } from '@testing-library/react'; import MockDate from 'mockdate'; import React from 'react'; -import { getMoment, MomentPicker, MomentPickerPanel, MomentRangePicker } from './util/commonUtil'; +import { DayPicker, DayRangePicker, getDay } from './util/commonUtil'; describe('Picker.Components', () => { beforeAll(() => { - MockDate.set(getMoment('1990-09-03 00:00:00').toDate()); + MockDate.set(getDay('1990-09-03 00:00:00').toDate()); }); afterAll(() => { @@ -13,14 +13,12 @@ describe('Picker.Components', () => { }); [ - { name: 'RangePicker', component: MomentRangePicker }, - { name: 'Picker', component: MomentPicker }, - { name: 'PickerPanel', component: MomentPickerPanel }, + { name: 'RangePicker', component: DayRangePicker }, + { name: 'Picker', component: DayPicker }, ].forEach(({ name, component }) => { it(name, () => { const Component = component as any; const Button: React.FC = (props) =>

          ; - const Item: React.FC = (props) =>

          ; render( { }} components={{ button: Button, - rangeItem: Item, }} picker="time" open diff --git a/tests/generate.spec.tsx b/tests/generate.spec.tsx index 939e76968..fc2b1d1b2 100644 --- a/tests/generate.spec.tsx +++ b/tests/generate.spec.tsx @@ -6,7 +6,7 @@ import luxonGenerateConfig from '../src/generate/luxon'; import { getMoment } from './util/commonUtil'; import 'dayjs/locale/zh-cn'; -import { GenerateConfig } from '../src/generate'; +import type { GenerateConfig } from '../src/generate'; describe('Picker.Generate', () => { beforeAll(() => { diff --git a/tests/loop.spec.tsx b/tests/loop.spec.tsx index 51c2bdbbd..88d2ca0ec 100644 --- a/tests/loop.spec.tsx +++ b/tests/loop.spec.tsx @@ -2,10 +2,8 @@ import { render } from '@testing-library/react'; import dayjs from 'dayjs'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; -import dayJsGenerate from '../src/generate/dayjs'; import zhCN from '../src/locale/zh_CN'; -import RangePicker from '../src/RangePicker'; -import { getMoment } from './util/commonUtil'; +import { DayRangePicker, getMoment } from './util/commonUtil'; describe('Picker.Loop', () => { let errorSpy; @@ -27,9 +25,7 @@ describe('Picker.Loop', () => { }); it('no loop warning', () => { - render( - , - ); + render(); expect(errorSpy).not.toHaveBeenCalled(); }); diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx index 1552bb0eb..b72c359ae 100644 --- a/tests/panel.spec.tsx +++ b/tests/panel.spec.tsx @@ -1,7 +1,7 @@ import { fireEvent, render } from '@testing-library/react'; +import dayjs from 'dayjs'; import type { Moment } from 'moment'; import moment from 'moment'; -import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; import type { PanelMode } from '../src/interface'; @@ -10,9 +10,9 @@ import zhCN from '../src/locale/zh_CN'; import { clickButton, confirmOK, - getMoment, + DayPickerPanel, + getDay, isSame, - MomentPickerPanel, selectCell, } from './util/commonUtil'; @@ -31,7 +31,7 @@ jest.mock('../src/utils/uiUtil', () => { describe('Picker.Panel', () => { beforeEach(() => { global.scrollCalled = false; - jest.useFakeTimers().setSystemTime(getMoment('1990-09-03 00:00:00').valueOf()); + jest.useFakeTimers().setSystemTime(getDay('1990-09-03 00:00:00').valueOf()); document.body.innerHTML = ''; }); @@ -42,7 +42,7 @@ describe('Picker.Panel', () => { describe('value', () => { it('defaultValue', () => { - render(); + render(); expect(document.querySelector('.rc-picker-cell-selected').textContent).toEqual('1'); }); @@ -50,27 +50,27 @@ describe('Picker.Panel', () => { it('controlled', () => { const onChange = jest.fn(); const { rerender } = render( - , + , ); selectCell(23); expect(isSame(onChange.mock.calls[0][0], '2000-01-23')).toBeTruthy(); - onChange.mockReset(); + onChange.mockClear(); // Trigger again since value is controlled selectCell(23); expect(isSame(onChange.mock.calls[0][0], '2000-01-23')).toBeTruthy(); - onChange.mockReset(); + onChange.mockClear(); // Not trigger - rerender(); + rerender(); selectCell(23); expect(onChange).not.toHaveBeenCalled(); }); it('uncontrolled', () => { const onChange = jest.fn(); - render(); + render(); selectCell(23); expect(isSame(onChange.mock.calls[0][0], '1990-09-23')).toBeTruthy(); @@ -84,7 +84,7 @@ describe('Picker.Panel', () => { describe('Panel switch by picker', () => { it('year', () => { - render(); + render(); fireEvent.click(document.querySelector('.rc-picker-decade-btn')); expect(document.querySelector('.rc-picker-decade-panel')).toBeTruthy(); @@ -100,7 +100,7 @@ describe('Picker.Panel', () => { ['quarter', 'Q3'], ].forEach(([picker, cell]) => { it(picker, () => { - const { container } = render(); + const { container } = render(); fireEvent.click(container.querySelector('.rc-picker-year-btn')); fireEvent.click(container.querySelector('.rc-picker-decade-btn')); expect(document.querySelector('.rc-picker-decade-panel')).toBeTruthy(); @@ -117,36 +117,11 @@ describe('Picker.Panel', () => { }); }); - it('time click to scroll', () => { - let scrollTop = 90; - - const domSpy = spyElementPrototypes(HTMLElement, { - scrollTop: { - get: () => scrollTop, - set: ((_: Function, value: number) => { - scrollTop = value; - }) as any, - }, - }); - - jest.useFakeTimers(); - const { container } = render(); - - // Multiple times should only one work - fireEvent.click(container.querySelector('ul').querySelectorAll('li')[3]); - - fireEvent.click(container.querySelector('ul').querySelectorAll('li')[11]); - jest.runAllTimers(); - expect(global.scrollCalled).toBeTruthy(); - - jest.useRealTimers(); - - domSpy.mockRestore(); - }); + return; describe('click button to switch', () => { it('date', () => { - render(); + render(); clickButton('prev'); expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('Aug1990'); @@ -163,7 +138,7 @@ describe('Picker.Panel', () => { ['month', 'quarter'].forEach((picker) => { it(picker, () => { - render(); + render(); clickButton('super-prev'); expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('1989'); @@ -174,7 +149,7 @@ describe('Picker.Panel', () => { }); it('year', () => { - render(); + render(); clickButton('super-prev'); expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('1980-1989'); @@ -184,7 +159,7 @@ describe('Picker.Panel', () => { }); it('decade', () => { - render(); + render(); clickButton('super-prev'); expect(document.querySelector('.rc-picker-header-view').textContent).toEqual('1800-1899'); @@ -194,44 +169,12 @@ describe('Picker.Panel', () => { }); }); - // This test is safe to remove - it('showtime', () => { - const onSelect = jest.fn(); - render( - [0, 1, 2, 3], - }} - defaultValue={getMoment('2001-01-02 01:03:07')} - value={null} - onSelect={onSelect} - />, - ); - - expect(document.querySelectorAll('.rc-picker-time-panel-column')).toHaveLength(2); - expect( - document.querySelector('.rc-picker-time-panel-column').querySelector('li').textContent, - ).toEqual('04'); - - // Click on date - selectCell(5); - expect(isSame(onSelect.mock.calls[0][0], '1990-09-05 01:03:07')).toBeTruthy(); - - // Click on time - onSelect.mockReset(); - fireEvent.click(document.querySelector('ul').querySelectorAll('li')[11]); - expect(isSame(onSelect.mock.calls[0][0], '2001-01-02 11:00:00')).toBeTruthy(); - }); - it('showTime.defaultValue only works at first render', () => { const onSelect = jest.fn(); render( - , @@ -253,7 +196,7 @@ describe('Picker.Panel', () => { }); it('should hide bottom button when switch date interval in the head', () => { - render(); + render(); fireEvent.click(document.querySelector('.rc-picker-year-btn')); expect(document.querySelector('.rc-picker-ranges')).toBeFalsy(); }); @@ -261,10 +204,10 @@ describe('Picker.Panel', () => { it('DatePicker has defaultValue and showTime.defaultValue ', () => { const onSelect = jest.fn(); render( - , @@ -279,7 +222,7 @@ describe('Picker.Panel', () => { it('time', () => { const onSelect = jest.fn(); const { container } = render( - [0]} />, + [0]} />, ); // Disabled @@ -294,7 +237,7 @@ describe('Picker.Panel', () => { it('month', () => { const onSelect = jest.fn(); render( - date.month() === 0} @@ -311,7 +254,7 @@ describe('Picker.Panel', () => { it('year', () => { const onSelect = jest.fn(); render( - date.year() === 1990} @@ -329,7 +272,7 @@ describe('Picker.Panel', () => { it('mode', () => { const onPanelChange = jest.fn(); render( - date.year() === 1900} @@ -347,7 +290,7 @@ describe('Picker.Panel', () => { it('not trigger when same panel', () => { const onPanelChange = jest.fn(); - render(); + render(); selectCell('23'); expect(onPanelChange).not.toHaveBeenCalled(); @@ -359,9 +302,9 @@ describe('Picker.Panel', () => { it('should work', () => { const onChange = jest.fn(); render( - , @@ -375,11 +318,7 @@ describe('Picker.Panel', () => { it('should display hour from 12 at AM', () => { render( - , + , ); const startHour = document @@ -390,11 +329,7 @@ describe('Picker.Panel', () => { it('should display hour from 12 at AM', () => { render( - , + , ); const startHour = document @@ -406,9 +341,9 @@ describe('Picker.Panel', () => { it('should disable AM when 00 ~ 11 is disabled', () => { render( - [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]} />, @@ -421,9 +356,9 @@ describe('Picker.Panel', () => { it('should disable PM when 12 ~ 23 is disabled', () => { render( - [12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]} />, @@ -438,7 +373,7 @@ describe('Picker.Panel', () => { describe('time disabled columns', () => { it('basic', () => { const { container } = render( - [0, 1, 2, 3, 4, 5, 6, 7]} disabledMinutes={() => [2, 4, 6, 8, 10]} @@ -454,10 +389,10 @@ describe('Picker.Panel', () => { const disabledSeconds = jest.fn(() => []); render( - , @@ -472,24 +407,24 @@ describe('Picker.Panel', () => { resetWarned(); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - const invalidateDate = moment('notValidate', 'YYYY', true); - render(); + const invalidateDate = dayjs('notValidate', 'YYYY', true); + render(); expect(errSpy).toHaveBeenCalledWith('Warning: Invalidate date pass to `value`.'); - render(); + render(); expect(errSpy).toHaveBeenCalledWith('Warning: Invalidate date pass to `defaultValue`.'); errSpy.mockRestore(); }); it('should render correctly in rtl', () => { - const { container } = render(); + const { container } = render(); expect(container).toMatchSnapshot(); }); describe('hideHeader', () => { ['decade', 'year', 'month', 'quarter', 'date', 'time'].forEach((mode) => { it(mode, () => { - render(); + render(); expect(document.querySelector('.rc-picker-header')).toBeFalsy(); }); }); @@ -497,7 +432,7 @@ describe('Picker.Panel', () => { it('onOk to trigger', () => { const onOk = jest.fn(); - const { container } = render(); + const { container } = render(); fireEvent.click( container.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[3], ); @@ -509,7 +444,7 @@ describe('Picker.Panel', () => { it('monthCellRender', () => { const { container } = render( - date.format('YYYY-MM')} />, + date.format('YYYY-MM')} />, ); expect(container.querySelector('tbody')).toMatchSnapshot(); @@ -517,7 +452,7 @@ describe('Picker.Panel', () => { it('pass dateRender when picker is month', () => { const { container } = render( - date.format('YYYY-MM')} />, + date.format('YYYY-MM')} />, ); expect(container.querySelector('tbody')).toMatchSnapshot(); @@ -530,7 +465,7 @@ describe('Picker.Panel', () => { ].forEach(({ locale, startDate }) => { it(locale.locale, () => { const { container } = render( - , + , ); expect(container.querySelector('td').textContent).toEqual(startDate); @@ -543,7 +478,7 @@ describe('Picker.Panel', () => { ].forEach(({ locale, startDate }) => { it(`another align test of ${locale.locale}`, () => { const { container } = render( - , + , ); expect(container.querySelector('td').textContent).toEqual(startDate); @@ -560,7 +495,7 @@ describe('Picker.Panel', () => { expect(defaultFirstDay).toEqual(0); const { container } = render( - , + , ); expect(container.querySelector('td').textContent).toEqual('27'); @@ -599,7 +534,7 @@ describe('Picker.Panel', () => { }; it(`override cell with cellRender when pass showTime`, () => { const App = () => ( - (
          {getCurText(info.type, current)}
          @@ -617,7 +552,7 @@ describe('Picker.Panel', () => { supportCellRenderPicker.forEach((picker) => { it(`override cell with cellRender in ${picker}`, () => { const App = () => ( - (
          {getCurText(picker, current)}
          @@ -636,12 +571,7 @@ describe('Picker.Panel', () => { resetWarned(); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - render( - , - ); + render(); expect(errSpy).toHaveBeenCalledWith( "Warning: 'defaultPickerValue' is deprecated. Please use 'defaultValue' instead.", @@ -655,7 +585,7 @@ describe('Picker.Panel', () => { const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); render( - (
          {getCurText(picker, current)}
          @@ -677,7 +607,7 @@ describe('Picker.Panel', () => { it(`append cell with cellRender in ${picker}`, () => { const App = () => ( - React.cloneElement( @@ -702,9 +632,7 @@ describe('Picker.Panel', () => { }); it('week picker current should check year', () => { - const { container } = render( - , - ); + const { container } = render(); expect( container.querySelector('.rc-picker-week-panel-row-selected td[title="1990-09-03"]'), ).toBeTruthy(); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 72cb61f76..a84f7ed69 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -116,9 +116,9 @@ export type MomentPickerPanelProps = | InjectDefaultProps> | InjectDefaultProps>; -export const MomentPickerPanel = (props: MomentPickerPanelProps) => ( - generateConfig={momentGenerateConfig} locale={enUS} {...props} /> -); +// export const MomentPickerPanel = (props: MomentPickerPanelProps) => ( +// generateConfig={momentGenerateConfig} locale={enUS} {...props} /> +// ); // Moment Range Picker export type MomentRangePickerProps = @@ -241,7 +241,7 @@ export const DayRangePicker = React.forwardRef< return ; }); -export const DayPickerPanel = (props: NewPickerPanelProps) => ( +export const DayPickerPanel = (props: Partial>) => ( generateConfig={dayGenerateConfig} locale={enUS} {...props} /> ); From 2c422e0d2919513edb9d84e37049a3da4875061e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 15 Dec 2023 16:16:43 +0800 Subject: [PATCH 325/380] fix: clear test --- docs/examples/debug.tsx | 5 ++-- src/NewPicker/PickerPanel/index.tsx | 43 ++++++++--------------------- tests/panel.spec.tsx | 26 ++++++++--------- tests/util/commonUtil.tsx | 2 ++ 4 files changed, 30 insertions(+), 46 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 6c8806ec4..4c67da001 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -235,13 +235,14 @@ export default () => { generateConfig={dayjsGenerateConfig} locale={zhCN} value={value} - multiple - picker="year" + // multiple + mode="decade" onChange={setSingleValue} // onPickerValueChange={(pickerValue) => { // console.log('๐ŸŽผ PickerValue Change:', pickerValue); // }} onPanelChange={(panelValue, mode) => { + console.error('1'); console.log('๐ŸŽฒ PanelValue Change:', panelValue, mode); }} /> diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index ce622ec16..1e8d6e10a 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -42,13 +42,15 @@ export interface PickerPanelRef { export interface BasePickerPanelProps extends Pick< - SharedPanelProps, - // MISC - | 'locale' - | 'generateConfig' - // Disabled - | 'disabledDate' - > { + SharedPanelProps, + // MISC + | 'locale' + | 'generateConfig' + // Disabled + | 'disabledDate' + >, + SharedTimeProps, + Pick, 'tabIndex'> { // Style prefixCls?: string; @@ -98,19 +100,6 @@ export interface SinglePickerPanelProps onChange?: (date: DateType) => void; } -export interface MultiplePickerPanelProps - extends BasePickerPanelProps { - /** multiple selection. Not support time or datetime picker */ - multiple: true; - - defaultValue?: DateType[] | null; - value?: DateType[] | null; - onChange?: (date: DateType[]) => void; -} - -// export type PickerPanelProps = -// | SinglePickerPanelProps -// | MultiplePickerPanelProps; export type PickerPanelProps = BasePickerPanelProps & { /** multiple selection. Not support time or datetime picker */ multiple?: boolean; @@ -120,13 +109,6 @@ export type PickerPanelProps = BasePickerPanelPro onChange?: (date: DateType | DateType[]) => void; }; -// type InternalPickerPanelProps = Omit< -// PickerPanelProps, -// 'onChange' -// > & { -// onChange?: (date: DateType | DateType[]) => void; -// }; - function PickerPanel( props: PickerPanelProps, ref: React.Ref, @@ -138,6 +120,7 @@ function PickerPanel( // Style prefixCls, + tabIndex = 0, // Value multiple, @@ -260,9 +243,7 @@ function PickerPanel( // Both trigger when manually pickerValue or mode change const triggerPanelChange = (viewDate?: DateType, nextMode?: PanelMode) => { - if (onPanelChange) { - onPanelChange?.(viewDate || pickerValue, nextMode || mergedMode); - } + onPanelChange?.(viewDate || pickerValue, nextMode || mergedMode); }; const setPickerValue = (nextPickerValue: DateType, triggerPanelEvent = false) => { @@ -340,7 +321,7 @@ function PickerPanel( // ========================= Render ========================= return ( -
          +
          { }); }); - return; - describe('click button to switch', () => { it('date', () => { render(); @@ -281,9 +277,9 @@ describe('Picker.Panel', () => { // no picker is decade, it means alway can click selectCell('1900-1909'); - expect(onPanelChange).toHaveBeenCalled(); + expect(onPanelChange).not.toHaveBeenCalled(); + onPanelChange.mockClear(); - onPanelChange.mockReset(); selectCell('1910-1919'); expect(onPanelChange).toHaveBeenCalled(); }); @@ -370,6 +366,8 @@ describe('Picker.Panel', () => { }); }); + return; + describe('time disabled columns', () => { it('basic', () => { const { container } = render( @@ -486,8 +484,8 @@ describe('Picker.Panel', () => { }); it('update firstDayOfWeek', () => { - const defaultFirstDay = moment(enUS.locale).localeData().firstDayOfWeek(); - moment.updateLocale(enUS.locale, { + const defaultFirstDay = dayjs(enUS.locale).localeData().firstDayOfWeek(); + dayjs.updateLocale(enUS.locale, { week: { dow: 5, } as any, @@ -500,7 +498,7 @@ describe('Picker.Panel', () => { expect(container.querySelector('td').textContent).toEqual('27'); - moment.updateLocale(enUS.locale, { + dayjs.updateLocale(enUS.locale, { week: { dow: defaultFirstDay, } as any, @@ -518,18 +516,18 @@ describe('Picker.Panel', () => { 'decade', ]; - const getCurText = (picker: PanelMode, current: Moment | number) => { + const getCurText = (picker: PanelMode, current: Dayjs | number | string) => { switch (picker) { case 'time': return current; case 'decade': - return (current as Moment).get('year'); + return (current as Dayjs).get('year'); case 'date': case 'year': case 'month': case 'quarter': case 'week': - return (current as Moment).get(picker); + return (current as Dayjs).get(picker as any); } }; it(`override cell with cellRender when pass showTime`, () => { @@ -562,6 +560,8 @@ describe('Picker.Panel', () => { const { container } = render(); + console.log(container.innerHTML); + expect(container.querySelector('.customWrapper')).toBeTruthy(); expect(container.querySelector(`.rc-picker-${picker}-panel`)).toBeTruthy(); expect(container).toMatchSnapshot(); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index a84f7ed69..bf3fe95ed 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -5,6 +5,7 @@ import dayjs, { isDayjs, type Dayjs } from 'dayjs'; import 'dayjs/locale/zh-cn'; import buddhistEra from 'dayjs/plugin/buddhistEra'; import localizedFormat from 'dayjs/plugin/localizedFormat'; +import weekOfYear from 'dayjs/plugin/weekOfYear'; import moment, { isMoment, type Moment } from 'moment'; import Picker, { PickerPanel, type PickerProps } from '../../src'; import dayGenerateConfig from '../../src/generate/dayjs'; @@ -34,6 +35,7 @@ import RangePicker, { dayjs.locale('zh-cn'); dayjs.extend(buddhistEra); dayjs.extend(localizedFormat); +dayjs.extend(weekOfYear); const FULL_FORMAT = 'YYYY-MM-DD HH:mm:ss'; From 3effdea8f1432cff5bea6334f79c56ac43c6b34e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 15 Dec 2023 16:18:11 +0800 Subject: [PATCH 326/380] test: update snapshot --- tests/__snapshots__/range.spec.tsx.snap | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap index f9e59b7a9..dc367d56c 100644 --- a/tests/__snapshots__/range.spec.tsx.snap +++ b/tests/__snapshots__/range.spec.tsx.snap @@ -218,6 +218,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1` >
          Date: Fri, 15 Dec 2023 16:30:51 +0800 Subject: [PATCH 327/380] test: update test case --- docs/examples/debug.tsx | 5 +++- .../TimePanel/TimePanelBody/index.tsx | 28 +++++++++---------- src/NewPicker/hooks/useTimeInfo.ts | 13 +++++++-- tests/panel.spec.tsx | 13 +++++---- 4 files changed, 36 insertions(+), 23 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 4c67da001..a1aa109ef 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -236,7 +236,10 @@ export default () => { locale={zhCN} value={value} // multiple - mode="decade" + mode="time" + disabledMinutes={() => { + console.log('good!!!'); + }} onChange={setSingleValue} // onPickerValueChange={(pickerValue) => { // console.log('๐ŸŽผ PickerValue Change:', pickerValue); diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index 4f9fb6714..8a394c02c 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -30,11 +30,11 @@ export default function TimePanelBody( const [ getValidTime, - mergedShowHour, - mergedShowMinute, - mergedShowSecond, - mergedShowMillisecond, - mergedShowMeridiem, + showHour, + showMinute, + showSecond, + showMillisecond, + showMeridiem, rowHourUnits, getMinuteUnits, @@ -62,14 +62,14 @@ export default function TimePanelBody( // ========================= Column ========================= // Hours const hourUnits = React.useMemo(() => { - if (!mergedShowMeridiem) { + if (!showMeridiem) { return rowHourUnits; } return isAM(hour) ? rowHourUnits.filter((h) => isAM(h.value as number)) : rowHourUnits.filter((h) => !isAM(h.value as number)); - }, [hour, rowHourUnits, mergedShowMeridiem]); + }, [hour, rowHourUnits, showMeridiem]); // >>> Pick Fallback const getEnabled = (units: Unit[], val: number) => { @@ -104,7 +104,7 @@ export default function TimePanelBody( // Meridiem const meridiemUnits = React.useMemo(() => { - if (!mergedShowMeridiem) { + if (!showMeridiem) { return []; } @@ -135,7 +135,7 @@ export default function TimePanelBody( disabled: rowHourUnits.every((h) => h.disabled || isAM(h.value as number)), }, ]; - }, [rowHourUnits, mergedShowMeridiem, generateConfig, locale]); + }, [rowHourUnits, showMeridiem, generateConfig, locale]); // ========================= Change ========================= /** @@ -221,7 +221,7 @@ export default function TimePanelBody( return (
          - {mergedShowHour && ( + {showHour && ( ( {...sharedColumnProps} /> )} - {mergedShowMinute && ( + {showMinute && ( ( {...sharedColumnProps} /> )} - {mergedShowSecond && ( + {showSecond && ( ( {...sharedColumnProps} /> )} - {mergedShowMillisecond && ( + {showMillisecond && ( ( {...sharedColumnProps} /> )} - {mergedShowMeridiem && ( + {showMeridiem && ( ( } // ========================== Show ========================== - const mergedShowHour = checkShow(format, ['H', 'LT', 'LLL'], showHour); - const mergedShowMinute = checkShow(format, ['m', 'LT', 'LLL'], showMinute); - const mergedShowSecond = checkShow(format, ['s', 'LTS'], showSecond); + let mergedShowHour = checkShow(format, ['H', 'LT', 'LLL'], showHour); + let mergedShowMinute = checkShow(format, ['m', 'LT', 'LLL'], showMinute); + let mergedShowSecond = checkShow(format, ['s', 'LTS'], showSecond); const mergedShowMillisecond = checkShow(format, ['SSS'], showMillisecond); const mergedShowMeridiem = checkShow(format, ['a', 'A', 'LT', 'LLL'], use12Hours); + // Fallback if all can not see + if (!mergedShowHour && !mergedShowMinute && !mergedShowSecond && !mergedShowMillisecond) { + mergedShowHour = true; + mergedShowMinute = true; + mergedShowSecond = true; + } + // ======================== Disabled ======================== const getDisabledTimes = React.useCallback( (targetDate: DateType) => { diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx index ae8ac7607..f94ea4215 100644 --- a/tests/panel.spec.tsx +++ b/tests/panel.spec.tsx @@ -366,20 +366,21 @@ describe('Picker.Panel', () => { }); }); - return; - describe('time disabled columns', () => { it('basic', () => { const { container } = render( [0, 1, 2, 3, 4, 5, 6, 7]} disabledMinutes={() => [2, 4, 6, 8, 10]} disabledSeconds={() => [10, 20, 30, 40, 50]} />, ); - expect(container).toMatchSnapshot(); + const columns = container.querySelectorAll('.rc-picker-time-panel-column'); + expect(columns[0].querySelectorAll('.rc-picker-time-panel-cell-disabled')).toHaveLength(8); + expect(columns[1].querySelectorAll('.rc-picker-time-panel-cell-disabled')).toHaveLength(5); + expect(columns[2].querySelectorAll('.rc-picker-time-panel-cell-disabled')).toHaveLength(5); }); it('use12Hour', () => { @@ -388,7 +389,7 @@ describe('Picker.Panel', () => { render( { }); }); + return; + it('warning with invalidate value', () => { resetWarned(); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); From 5991a09fd65129ee467ac5e3914cc707f3a965b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 15 Dec 2023 16:34:13 +0800 Subject: [PATCH 328/380] chore: add rtl --- src/NewPicker/PickerPanel/index.tsx | 15 ++++++++++++++- src/PickerPanel.tsx | 5 ++++- tests/panel.spec.tsx | 5 +++-- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 1e8d6e10a..dd74b49ab 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import { useEvent, useMergedState } from 'rc-util'; import * as React from 'react'; import { isSame } from '../../utils/dateUtil'; @@ -54,6 +55,8 @@ export interface BasePickerPanelProps // Style prefixCls?: string; + direction?: 'ltr' | 'rtl'; + // Value onSelect?: (date: DateType) => void; @@ -118,6 +121,8 @@ function PickerPanel( disabledDate, generateConfig, + direction, + // Style prefixCls, tabIndex = 0, @@ -320,8 +325,16 @@ function PickerPanel( DatePanel) as typeof DatePanel; // ========================= Render ========================= + const panelCls = `${mergedPrefixCls}-panel`; + return ( -
          +
          (props: PickerPanelProps) { isSecondStepValid, `\`secondStep\` ${secondStep} is invalid. It should be a factor of 60.`, ); - warning(!defaultPickerValue, `'defaultPickerValue' is deprecated. Please use 'defaultValue' instead.`); + warning( + !defaultPickerValue, + `'defaultPickerValue' is deprecated. Please use 'defaultValue' instead.`, + ); warning(!dateRender, `'dateRender' is deprecated. Please use 'cellRender' instead.`); warning(!monthCellRender, `'monthCellRender' is deprecated. Please use 'cellRender' instead.`); } diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx index f94ea4215..4da2ae9a9 100644 --- a/tests/panel.spec.tsx +++ b/tests/panel.spec.tsx @@ -402,8 +402,6 @@ describe('Picker.Panel', () => { }); }); - return; - it('warning with invalidate value', () => { resetWarned(); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); @@ -417,11 +415,14 @@ describe('Picker.Panel', () => { errSpy.mockRestore(); }); + it('should render correctly in rtl', () => { const { container } = render(); expect(container).toMatchSnapshot(); }); + return; + describe('hideHeader', () => { ['decade', 'year', 'month', 'quarter', 'date', 'time'].forEach((mode) => { it(mode, () => { From d9e2ba7265df0f5c8a2febdcef789c72f8522881 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 15 Dec 2023 16:38:44 +0800 Subject: [PATCH 329/380] chore: back of warning --- src/NewPicker/PickerPanel/index.tsx | 10 +++++++++- tests/panel.spec.tsx | 11 +++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index dd74b49ab..37ba9e551 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import { useEvent, useMergedState } from 'rc-util'; +import { useEvent, useMergedState, warning } from 'rc-util'; import * as React from 'react'; import { isSame } from '../../utils/dateUtil'; import useLocale from '../hooks/useLocale'; @@ -324,6 +324,14 @@ function PickerPanel( DefaultComponents[internalMode] || DatePanel) as typeof DatePanel; + // ======================== Warnings ======================== + if (process.env.NODE_ENV !== 'production') { + warning( + !mergedValue || mergedValue.every((val) => generateConfig.isValidate(val)), + 'Invalidate date pass to `value` or `defaultValue`.', + ); + } + // ========================= Render ========================= const panelCls = `${mergedPrefixCls}-panel`; diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx index 4da2ae9a9..b90c8c5f4 100644 --- a/tests/panel.spec.tsx +++ b/tests/panel.spec.tsx @@ -408,10 +408,17 @@ describe('Picker.Panel', () => { const invalidateDate = dayjs('notValidate', 'YYYY', true); render(); - expect(errSpy).toHaveBeenCalledWith('Warning: Invalidate date pass to `value`.'); + expect(errSpy).toHaveBeenCalledWith( + 'Warning: Invalidate date pass to `value` or `defaultValue`.', + ); + + errSpy.mockClear(); + resetWarned(); render(); - expect(errSpy).toHaveBeenCalledWith('Warning: Invalidate date pass to `defaultValue`.'); + expect(errSpy).toHaveBeenCalledWith( + 'Warning: Invalidate date pass to `value` or `defaultValue`.', + ); errSpy.mockRestore(); }); From 2f77ee37a199620c063bb5a10e26750f92dbb263 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 15 Dec 2023 16:49:36 +0800 Subject: [PATCH 330/380] test: more test case --- docs/examples/debug.tsx | 5 +- .../PickerPanel/MonthPanel/index.tsx | 8 ++- src/NewPicker/PickerPanel/index.tsx | 15 ++++- tests/__snapshots__/panel.spec.tsx.snap | 12 ++-- tests/panel.spec.tsx | 55 +++++++++---------- 5 files changed, 51 insertions(+), 44 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index a1aa109ef..383588e1a 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -236,10 +236,7 @@ export default () => { locale={zhCN} value={value} // multiple - mode="time" - disabledMinutes={() => { - console.log('good!!!'); - }} + picker="month" onChange={setSingleValue} // onPickerValueChange={(pickerValue) => { // console.log('๐ŸŽผ PickerValue Change:', pickerValue); diff --git a/src/NewPicker/PickerPanel/MonthPanel/index.tsx b/src/NewPicker/PickerPanel/MonthPanel/index.tsx index 307fe87fc..95022b036 100644 --- a/src/NewPicker/PickerPanel/MonthPanel/index.tsx +++ b/src/NewPicker/PickerPanel/MonthPanel/index.tsx @@ -5,7 +5,9 @@ import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; -export default function MonthPanel(props: SharedPanelProps) { +export default function MonthPanel( + props: SharedPanelProps, +) { const { prefixCls, locale, generateConfig, pickerValue, onPickerValueChange, onModeChange } = props; @@ -80,8 +82,8 @@ export default function MonthPanel(props: SharedPanelProps // Cell cellRender?: CellRender; + /** @deprecated use cellRender instead of dateRender */ + dateRender?: (currentDate: DateType, today: DateType) => React.ReactNode; + /** @deprecated use cellRender instead of monthCellRender */ + monthCellRender?: (currentDate: DateType, locale: Locale) => React.ReactNode; + // Hover hoverValue?: DateType | [start: DateType, end: DateType]; onHover?: (date: DateType) => void; @@ -153,6 +160,8 @@ function PickerPanel( // Cell cellRender, + dateRender, + monthCellRender, // Components components = {}, @@ -319,6 +328,10 @@ function PickerPanel( return generateConfig.isAfter(start, end) ? [end, start] : [start, end]; }, [hoverValue, generateConfig]); + // ======================= Components ======================= + // >>> cellRender + const onInternalCellRender = useCellRender(cellRender, dateRender, monthCellRender); + // ======================= Components ======================= const PanelComponent = (components[internalMode] || DefaultComponents[internalMode] || @@ -363,7 +376,7 @@ function PickerPanel( onSelect={onPanelValueSelect} values={mergedValue} // Render - cellRender={cellRender} + cellRender={onInternalCellRender} disabledDate={disabledDate} // Hover hoverValue={hoverRangeDate} diff --git a/tests/__snapshots__/panel.spec.tsx.snap b/tests/__snapshots__/panel.spec.tsx.snap index 61f74ebd9..2e7f46f93 100644 --- a/tests/__snapshots__/panel.spec.tsx.snap +++ b/tests/__snapshots__/panel.spec.tsx.snap @@ -4244,7 +4244,7 @@ exports[`Picker.Panel monthCellRender 1`] = ` 1990-08 1990-09 @@ -9366,7 +9366,7 @@ exports[`Picker.Panel pass dateRender when picker is month 1`] = `
          { const origin = jest.requireActual('../src/utils/uiUtil'); @@ -428,28 +421,28 @@ describe('Picker.Panel', () => { expect(container).toMatchSnapshot(); }); - return; - - describe('hideHeader', () => { - ['decade', 'year', 'month', 'quarter', 'date', 'time'].forEach((mode) => { - it(mode, () => { - render(); - expect(document.querySelector('.rc-picker-header')).toBeFalsy(); - }); - }); - }); - - it('onOk to trigger', () => { - const onOk = jest.fn(); - const { container } = render(); - fireEvent.click( - container.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[3], - ); - - expect(onOk).not.toHaveBeenCalled(); - confirmOK(); - expect(isSame(onOk.mock.calls[0][0], '1990-09-03 03:00:00')).toBeTruthy(); - }); + // No this prop now + // describe('hideHeader', () => { + // ['decade', 'year', 'month', 'quarter', 'date', 'time'].forEach((mode) => { + // it(mode, () => { + // render(); + // expect(document.querySelector('.rc-picker-header')).toBeFalsy(); + // }); + // }); + // }); + + // No this prop now + // it('onOk to trigger', () => { + // const onOk = jest.fn(); + // const { container } = render(); + // fireEvent.click( + // container.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[3], + // ); + + // expect(onOk).not.toHaveBeenCalled(); + // confirmOK(); + // expect(isSame(onOk.mock.calls[0][0], '1990-09-03 03:00:00')).toBeTruthy(); + // }); it('monthCellRender', () => { const { container } = render( @@ -467,6 +460,8 @@ describe('Picker.Panel', () => { expect(container.querySelector('tbody')).toMatchSnapshot(); }); + return; + describe('start weekday should be correct', () => { [ { locale: zhCN, startDate: '30' }, From 28c9a1e7ad587a87846a604d07b828bae24ddc71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 15 Dec 2023 17:05:58 +0800 Subject: [PATCH 331/380] test: more test case --- tests/panel.spec.tsx | 28 +++++++--------------------- tests/util/commonUtil.tsx | 2 ++ 2 files changed, 9 insertions(+), 21 deletions(-) diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx index b27ea6f8b..0c94e685c 100644 --- a/tests/panel.spec.tsx +++ b/tests/panel.spec.tsx @@ -460,8 +460,6 @@ describe('Picker.Panel', () => { expect(container.querySelector('tbody')).toMatchSnapshot(); }); - return; - describe('start weekday should be correct', () => { [ { locale: zhCN, startDate: '30' }, @@ -489,26 +487,12 @@ describe('Picker.Panel', () => { }); }); - it('update firstDayOfWeek', () => { - const defaultFirstDay = dayjs(enUS.locale).localeData().firstDayOfWeek(); - dayjs.updateLocale(enUS.locale, { - week: { - dow: 5, - } as any, - }); - expect(defaultFirstDay).toEqual(0); - - const { container } = render( - , - ); - - expect(container.querySelector('td').textContent).toEqual('27'); + it('correct firstDayOfWeek', () => { + const { container, rerender } = render(); + expect(container.querySelector('.rc-picker-cell-inner').textContent).toEqual('26'); - dayjs.updateLocale(enUS.locale, { - week: { - dow: defaultFirstDay, - } as any, - }); + rerender(); + expect(container.querySelector('.rc-picker-cell-inner').textContent).toEqual('27'); }); }); @@ -553,6 +537,8 @@ describe('Picker.Panel', () => { expect(container.querySelector(`.rc-picker-time-panel`)).toBeTruthy(); expect(container).toMatchSnapshot(); }); + return; + supportCellRenderPicker.forEach((picker) => { it(`override cell with cellRender in ${picker}`, () => { const App = () => ( diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index bf3fe95ed..fe2f4c1fa 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -6,6 +6,7 @@ import 'dayjs/locale/zh-cn'; import buddhistEra from 'dayjs/plugin/buddhistEra'; import localizedFormat from 'dayjs/plugin/localizedFormat'; import weekOfYear from 'dayjs/plugin/weekOfYear'; +import updateLocale from 'dayjs/plugin/updateLocale'; import moment, { isMoment, type Moment } from 'moment'; import Picker, { PickerPanel, type PickerProps } from '../../src'; import dayGenerateConfig from '../../src/generate/dayjs'; @@ -36,6 +37,7 @@ dayjs.locale('zh-cn'); dayjs.extend(buddhistEra); dayjs.extend(localizedFormat); dayjs.extend(weekOfYear); +dayjs.extend(updateLocale); const FULL_FORMAT = 'YYYY-MM-DD HH:mm:ss'; From 056f09ce0f4455c09bea403b3290ace567690638 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 15 Dec 2023 17:23:48 +0800 Subject: [PATCH 332/380] test: update snapshot --- tests/__snapshots__/panel.spec.tsx.snap | 9588 ++++++++++------------- tests/panel.spec.tsx | 4 +- 2 files changed, 4323 insertions(+), 5269 deletions(-) diff --git a/tests/__snapshots__/panel.spec.tsx.snap b/tests/__snapshots__/panel.spec.tsx.snap index 2e7f46f93..1398fa3f1 100644 --- a/tests/__snapshots__/panel.spec.tsx.snap +++ b/tests/__snapshots__/panel.spec.tsx.snap @@ -163,7 +163,7 @@ exports[`Picker.Panel append cell with cellRender in date 1`] = `
          - 1900 - - - 1999 + 1900-1999
          -
            -
          • -
            - 0 +
            + 0 +
            -
            -
            • -
          • -
            +
          • - 1 +
            + 1 +
            -
          - -
        • -
          +
        • - 2 +
          + 2 +
          -
          • - -
        • -
          +
        • - 3 +
          + 3 +
          -
          • - -
        • -
          +
        • - 4 +
          + 4 +
          -
          • - -
        • -
          +
        • - 5 +
          + 5 +
          -
          • - -
        • -
          +
        • - 6 +
          + 6 +
          -
          • - -
        • -
          +
        • - 7 +
          + 7 +
          -
          • - -
        • -
          +
        • - 8 +
          + 8 +
          -
          • - -
        • -
          +
        • - 9 +
          + 9 +
          -
          • - -
        • -
          +
        • - 10 +
          + 10 +
          -
          • - -
        • -
          +
        • - 11 +
          + 11 +
          -
          • - -
        • -
          +
        • - 12 +
          + 12 +
          -
          • - -
        • -
          +
        • - 13 +
          + 13 +
          -
          • - -
        • -
          +
        • - 14 +
          + 14 +
          -
          • - -
        • -
          +
        • - 15 +
          + 15 +
          -
          • - -
        • -
          +
        • - 16 +
          + 16 +
          -
          • - -
        • -
          +
        • - 17 +
          + 17 +
          -
          • - -
        • -
          +
        • - 18 +
          + 18 +
          -
          • - -
        • -
          +
        • - 19 +
          + 19 +
          -
          • - -
        • -
          +
        • - 20 +
          + 20 +
          -

          • - -
        • -
          +
        • - 21 +
          + 21 +
          -
          • - -
        • -
          +
        • - 22 +
          + 22 +
          -
          • - -
        • -
          +
        • - 23 +
          + 23 +
          -
          • - - -
            +
          +
          +
          -
        • -
          - 0 +
          + 0 +
          -
          -
          • -
        • -
          +
        • - 1 +
          + 1 +
          -
          • - -
        • -
          +
        • - 2 +
          + 2 +
          -
          • - -
        • -
          +
        • - 3 +
          + 3 +
          -
          • - -
        • -
          +
        • - 4 +
          + 4 +
          -
          • - -
        • -
          +
        • - 5 +
          + 5 +
          -
          • - -
        • -
          +
        • - 6 +
          + 6 +
          -
          • - -
        • -
          +
        • - 7 +
          + 7 +
          -
          • - -
        • -
          +
        • - 8 +
          + 8 +
          -
          • - -
        • -
          +
        • - 9 +
          + 9 +
          -
          • - -
        • -
          +
        • - 10 +
          + 10 +
          -
          • - -
        • -
          +
        • - 11 +
          + 11 +
          -
          • - -
        • -
          +
        • - 12 +
          + 12 +
          -
          • - -
        • -
          +
        • - 13 +
          + 13 +
          -
          • - -
        • -
          +
        • - 14 +
          + 14 +
          -
          • - -
        • -
          +
        • - 15 +
          + 15 +
          -
          • - -
        • -
          +
        • - 16 +
          + 16 +
          -
          • - -
        • -
          +
        • - 17 +
          + 17 +
          -
          • - -
        • -
          +
        • - 18 +
          + 18 +
          -
          • - -
        • -
          +
        • - 19 +
          + 19 +
          -
          • - -
        • -
          +
        • - 20 +
          + 20 +
          -
          • - -
        • -
          +
        • - 21 +
          + 21 +
          -
          • - -
        • -
          +
        • - 22 +
          + 22 +
          -
          • - -
        • -
          +
        • - 23 +
          + 23 +
          -
          • - -
        • -
          +
        • - 24 +
          + 24 +
          -
          • - -
        • -
          +
        • - 25 +
          + 25 +
          -
          • - -
        • -
          +
        • - 26 +
          + 26 +
          -
          • - -
        • -
          +
        • - 27 +
          + 27 +
          -
          • - -
        • -
          +
        • - 28 +
          + 28 +
          -
          • - -
        • -
          +
        • - 29 +
          + 29 +
          -
          • - -
        • -
          +
        • - 30 +
          + 30 +
          -
          • - -
        • -
          +
        • - 31 +
          + 31 +
          -
          • - -
        • -
          +
        • - 32 +
          + 32 +
          -
          • - -
        • -
          +
        • - 33 +
          + 33 +
          -
          • - -
        • -
          +
        • - 34 +
          + 34 +
          -
          • - -
        • -
          +
        • - 35 +
          + 35 +
          -
          • - -
        • -
          +
        • - 36 +
          + 36 +
          -
          • - -
        • -
          +
        • - 37 +
          + 37 +
          -
          • - -
        • -
          +
        • - 38 +
          + 38 +
          -
          • - -
        • -
          +
        • - 39 +
          + 39 +
          -
          • - -
        • -
          +
        • - 40 +
          + 40 +
          -
          • - -
        • -
          +
        • - 41 +
          + 41 +
          -
          • - -
        • -
          +
        • - 42 +
          + 42 +
          -
          • - -
        • -
          +
        • - 43 +
          + 43 +
          -
          • - -
        • -
          +
        • - 44 +
          + 44 +
          -
          • - -
        • -
          -
          - 45 -
          -
          -
          • -
        • -
          +
        • - 46 +
          + 45 +
          -
          • - -
        • -
          +
        • - 47 +
          + 46 +
          -
          • - -
        • -
          +
        • - 48 +
          + 47 +
          -
          • - -
        • -
          +
        • - 49 +
          + 48 +
          -
          • - -
        • -
          +
        • - 50 +
          + 49 +
          -
          • - -
        • -
          +
        • - 51 +
          + 50 +
          -
          • - -
        • -
          +
        • - 52 +
          + 51 +
          -
          • - -
        • -
          +
        • - 53 +
          + 52 +
          -
          • - -
        • -
          +
        • - 54 +
          + 53 +
          -
          • - -
        • -
          +
        • - 55 +
          + 54 +
          -
          • - -
        • -
          +
        • - 56 +
          + 55 +
          -
          • - -
        • -
          +
        • - 57 +
          + 56 +
          -
          • - -
        • -
          +
        • - 58 +
          + 57 +
          -
          • - -
        • -
          +
        • - 59 +
          + 58 +
          -
          • - - -
            -
          • -
            +
          • - 0 +
            + 59 +
            -
          - -
        • + +
          • +
          +
            -
            - 1 +
            + 0 +
            -
            - -
          • -
            +
          • - 2 +
            + 1 +
            -
          - -
        • -
          +
        • - 3 +
          + 2 +
          -
          • - -
        • -
          +
        • - 4 +
          + 3 +
          -
          • - -
        • -
          +
        • - 5 +
          + 4 +
          -
          • - -
        • -
          +
        • - 6 +
          + 5 +
          -
          • - -
        • -
          +
        • - 7 +
          + 6 +
          -
          • - -
        • -
          +
        • - 8 +
          + 7 +
          -
          • - -
        • -
          +
        • - 9 -
          -
          • - -
        • -
          -
          - 10 +
          + 8 +
          -
          -
          • -
        • -
          +
        • - 11 +
          + 9 +
          -
          • - -
        • -
          +
        • - 12 +
          + 10 +
          -
          • - -
        • -
          +
        • - 13 +
          + 11 +
          -
          • - -
        • -
          +
        • - 14 +
          + 12 +
          -
          • - -
        • -
          +
        • - 15 +
          + 13 +
          -
          • - -
        • -
          +
        • - 16 +
          + 14 +
          -
          • - -
        • -
          +
        • - 17 +
          + 15 +
          -
          • - -
        • -
          +
        • - 18 +
          + 16 +
          -
          • - -
        • -
          +
        • - 19 +
          + 17 +
          -
          • - -
        • -
          +
        • - 20 +
          + 18 +
          -
          • - -
        • -
          +
        • - 21 +
          + 19 +
          -
          • - -
        • -
          +
        • - 22 +
          + 20 +
          -
          • - -
        • -
          +
        • - 23 +
          + 21 +
          -
          • - -
        • -
          +
        • - 24 +
          + 22 +
          -
          • - -
        • -
          +
        • - 25 +
          + 23 +
          -
          • - -
        • -
          +
        • - 26 +
          + 24 +
          -
          • - -
        • -
          +
        • - 27 +
          + 25 +
          -
          • - -
        • -
          +
        • - 28 +
          + 26 +
          -
          • - -
        • -
          +
        • - 29 +
          + 27 +
          -
          • - -
        • -
          +
        • - 30 +
          + 28 +
          -
          • - -
        • -
          +
        • - 31 +
          + 29 +
          -
          • - -
        • -
          +
        • - 32 +
          + 30 +
          -
          • - -
        • -
          +
        • - 33 +
          + 31 +
          -
          • - -
        • -
          +
        • - 34 +
          + 32 +
          -
          • - -
        • -
          +
        • - 35 +
          + 33 +
          -
          • - -
        • -
          +
        • - 36 +
          + 34 +
          -
          • - -
        • -
          +
        • - 37 +
          + 35 +
          -
          • - -
        • -
          +
        • - 38 +
          + 36 +
          -
          • - -
        • -
          +
        • - 39 +
          + 37 +
          -
          • - -
        • -
          +
        • - 40 +
          + 38 +
          -
          • - -
        • -
          +
        • - 41 +
          + 39 +
          -
          • - -
        • -
          +
        • - 42 +
          + 40 +
          -
          • - -
        • -
          +
        • - 43 +
          + 41 +
          -
          • - -
        • -
          +
        • - 44 +
          + 42 +
          -
          • - -
        • -
          +
        • - 45 +
          + 43 +
          -
          • - -
        • -
          +
        • - 46 +
          + 44 +
          -
          • - -
        • -
          +
        • - 47 +
          + 45 +
          -
          • - -
        • -
          +
        • - 48 +
          + 46 +
          -
          • - -
        • -
          +
        • - 49 +
          + 47 +
          -
          • - -
        • -
          +
        • - 50 +
          + 48 +
          -
          • - -
        • -
          +
        • - 51 +
          + 49 +
          -
          • - -
        • -
          +
        • - 52 +
          + 50 +
          -
          • - -
        • -
          +
        • - 53 +
          + 51 +
          -
          • - -
        • -
          +
        • - 54 +
          + 52 +
          -
          • - -
        • -
          +
        • - 55 +
          + 53 +
          -
          • - -
        • -
          +
        • - 56 +
          + 54 +
          -
          • - -
        • -
          +
        • - 57 +
          + 55 +
          -
          • - -
        • -
          -
          +
        • +
          - 58 +
          + 56 +
          -
          • - -
        • -
          +
        • - 59 +
          + 57 +
          +
          +
          • +
        • +
          +
          + 58 +
          -
          • - - + +
        • +
          +
          + 59 +
          +
          +
          • + +
          -
          - -
          `; @@ -3306,7 +3435,7 @@ exports[`Picker.Panel append cell with cellRender in week 1`] = `
          - 35 + 34
          @@ -3367,7 +3496,7 @@ exports[`Picker.Panel append cell with cellRender in week 1`] = `
          - 36 + 35
          - 37 + 36
          @@ -3639,7 +3768,7 @@ exports[`Picker.Panel append cell with cellRender in week 1`] = `
          - 38 + 37
          @@ -3750,7 +3879,7 @@ exports[`Picker.Panel append cell with cellRender in week 1`] = `
          - 39 + 38
          @@ -3852,7 +3981,7 @@ exports[`Picker.Panel append cell with cellRender in week 1`] = `
          - 40 + 39
          -
            -
          • -
            - 0 -
            -
            • -
          • -
            - 1 -
            -
            • -
          • -
            - 2 -
            -
            • -
          • -
            - 3 -
            -
            • -
          • -
            - 4 -
            -
            • -
          • -
            - 5 -
            -
            • -
          • -
            - 6 -
            -
            • -
          • -
            - 7 -
            -
            • -
          • -
            - 8 -
            -
            • -
          • -
            - 9 -
            -
            • -
          • -
            - 10 -
            -
            • -
          • -
            - 11 -
            -
            • -
          • -
            - 12 -
            -
            • -
          • -
            - 13 -
            -
            • -
          • -
            - 14 -
            -
            • -
          • -
            - 15 -
            -
            • -
          • -
            - 16 -
            -
            • -
          • -
            - 17 -
            -
            • -
          • -
            - 18 -
            -
            • -
          • -
            - 19 -
            -
            • -
          • -
            - 20 -
            -
            • -
          • -
            - 21 -
            -
            • -
          • -
            - 22 -
            -
            • -
          • -
            - 23 -
            -
            • -
          -
            -
          • -
            - 0 -
            -
            • -
          • -
            - 1 -
            -
            • -
          • -
            - 2 -
            -
            • -
          • -
            - 3 -
            -
            • -
          • -
            - 4 -
            -
            • -
          • -
            - 5 -
            -
            • -
          • -
            - 6 -
            -
            • -
          • -
            - 7 -
            -
            • -
          • -
            - 8 -
            -
            • -
          • -
            - 9 -
            -
            • -
          • -
            - 10 -
            -
            • -
          • -
            - 11 -
            -
            • -
          • -
            - 12 -
            -
            • -
          • -
            - 13 -
            -
            • -
          • -
            - 14 -
            -
            • -
          • -
            - 15 -
            -
            • -
          • -
            - 16 -
            -
            • -
          • -
            - 17 -
            -
            • -
          • -
            - 18 -
            -
            • -
          • -
            - 19 -
            -
            • -
          • -
            - 20 -
            -
            • -
          • -
            - 21 -
            -
            • -
          • -
            - 22 -
            -
            • -
          • -
            - 23 -
            -
            • -
          • -
            - 24 -
            -
            • -
          • -
            - 25 -
            -
            • -
          • -
            - 26 -
            -
            • -
          • -
            - 27 -
            -
            • -
          • -
            - 28 -
            -
            • -
          • -
            - 29 -
            -
            • -
          • -
            - 30 -
            -
            • -
          • -
            - 31 -
            -
            • -
          • -
            - 32 -
            -
            • -
          • -
            - 33 -
            -
            • -
          • -
            - 34 -
            -
            • -
          • -
            - 35 -
            -
            • -
          • -
            - 36 -
            -
            • -
          • -
            - 37 -
            -
            • -
          • -
            - 38 -
            -
            • -
          • -
            - 39 -
            -
            • -
          • -
            - 40 -
            -
            • -
          • -
            - 41 -
            -
            • -
          • -
            - 42 -
            -
            • -
          • -
            - 43 -
            -
            • -
          • -
            - 44 -
            -
            • -
          • -
            - 45 -
            -
            • -
          • -
            - 46 -
            -
            • -
          • -
            - 47 -
            -
            • -
          • -
            - 48 -
            -
            • -
          • -
            - 49 -
            -
            • -
          • -
            - 50 -
            -
            • -
          • -
            - 51 -
            -
            • -
          • -
            - 52 -
            -
            • -
          • -
            - 53 -
            -
            • -
          • -
            - 54 -
            -
            • -
          • -
            - 55 -
            -
            • -
          • -
            - 56 -
            -
            • -
          • -
            - 57 -
            -
            • -
          • -
            - 58 -
            -
            • -
          • -
            - 59 -
            -
            • -
          -
            -
          • -
            - 0 -
            -
            • -
          • -
            - 1 -
            -
            • -
          • -
            - 2 -
            -
            • -
          • -
            - 3 -
            -
            • -
          • -
            - 4 -
            -
            • -
          • -
            - 5 -
            -
            • -
          • -
            - 6 -
            -
            • -
          • -
            - 7 -
            -
            • -
          • -
            - 8 -
            -
            • -
          • -
            - 9 -
            -
            • -
          • -
            - 10 -
            -
            • -
          • -
            - 11 -
            -
            • -
          • -
            - 12 -
            -
            • -
          • -
            - 13 -
            -
            • -
          • -
            - 14 -
            -
            • -
          • -
            - 15 -
            -
            • -
          • -
            - 16 -
            -
            • -
          • -
            - 17 -
            -
            • -
          • -
            - 18 -
            -
            • -
          • -
            - 19 -
            -
            • -
          • -
            - 20 -
            -
            • -
          • -
            - 21 -
            -
            • -
          • -
            - 22 -
            -
            • -
          • -
            - 23 -
            -
            • -
          • -
            - 24 -
            -
            • -
          • -
            - 25 -
            -
            • -
          • -
            - 26 -
            -
            • -
          • -
            - 27 -
            -
            • -
          • -
            - 28 -
            -
            • -
          • -
            - 29 -
            -
            • -
          • -
            - 30 -
            -
            • -
          • -
            - 31 -
            -
            • -
          • -
            - 32 -
            -
            • -
          • -
            - 33 -
            -
            • -
          • -
            - 34 -
            -
            • -
          • -
            - 35 -
            -
            • -
          • -
            - 36 -
            -
            • -
          • -
            - 37 -
            -
            • -
          • -
            - 38 -
            -
            • -
          • -
            - 39 -
            -
            • -
          • -
            - 40 -
            -
            • -
          • -
            - 41 -
            -
            • -
          • -
            - 42 -
            -
            • -
          • -
            - 43 -
            -
            • -
          • -
            - 44 -
            -
            • -
          • -
            - 45 -
            -
            • -
          • -
            - 46 -
            -
            • -
          • -
            - 47 -
            -
            • -
          • -
            - 48 -
            -
            • -
          • -
            - 49 -
            -
            • -
          • -
            - 50 -
            -
            • -
          • -
            - 51 -
            -
            • -
          • -
            - 52 -
            -
            • -
          • -
            - 53 -
            -
            • -
          • -
            - 54 -
            -
            • -
          • -
            - 55 -
            -
            • -
          • -
            - 56 -
            -
            • -
          • -
            - 57 -
            -
            • -
          • -
            - 58 -
            -
            • -
          • -
            - 59 -
            -
            • -
          -
          -
          -
          - -
          -
          -
          -`; - -exports[`Picker.Panel override cell with cellRender in week 1`] = ` -
          -
          + 0 +
          + +
        • +
          + 1 +
          +
          • +
        • +
          + 2 +
          +
          • +
        • +
          + 3 +
          +
          • +
        • +
          + 4 +
          +
          • +
        • +
          + 5 +
          +
          • +
        • +
          + 6 +
          +
          • +
        • +
          + 7 +
          +
          • +
        • +
          + 8 +
          +
          • +
        • +
          + 9 +
          +
          • +
        • +
          + 10 +
          +
          • +
        • +
          + 11 +
          +
          • +
        • +
          + 12 +
          +
          • +
        • +
          + 13 +
          +
          • +
        • +
          + 14 +
          +
          • +
        • +
          + 15 +
          +
          • +
        • +
          + 16 +
          +
          • +
        • +
          + 17 +
          +
          • +
        • +
          + 18 +
          +
          • +
        • +
          + 19 +
          +
          • +
        • +
          + 20 +
          +
          • +
        • +
          + 21 +
          +
          • +
        • +
          + 22 +
          +
          • +
        • +
          + 23 +
          +
          • + +
          +
          +
            +
          • +
            + 0 +
            +
            • +
          • +
            + 1 +
            +
            • +
          • +
            + 2 +
            +
            • +
          • +
            + 3 +
            +
            • +
          • +
            + 4 +
            +
            • +
          • +
            + 5 +
            +
            • +
          • +
            + 6 +
            +
            • +
          • +
            + 7 +
            +
            • +
          • +
            + 8 +
            +
            • +
          • +
            + 9 +
            +
            • +
          • +
            + 10 +
            +
            • +
          • +
            + 11 +
            +
            • +
          • +
            + 12 +
            +
            • +
          • +
            + 13 +
            +
            • +
          • +
            + 14 +
            +
            • +
          • +
            + 15 +
            +
            • +
          • +
            + 16 +
            +
            • +
          • +
            + 17 +
            +
            • +
          • +
            + 18 +
            +
            • +
          • +
            + 19 +
            +
            • +
          • +
            + 20 +
            +
            • +
          • +
            + 21 +
            +
            • +
          • +
            + 22 +
            +
            • +
          • +
            + 23 +
            +
            • +
          • +
            + 24 +
            +
            • +
          • +
            + 25 +
            +
            • +
          • +
            + 26 +
            +
            • +
          • +
            + 27 +
            +
            • +
          • +
            + 28 +
            +
            • +
          • +
            + 29 +
            +
            • +
          • +
            + 30 +
            +
            • +
          • +
            + 31 +
            +
            • +
          • +
            + 32 +
            +
            • +
          • +
            + 33 +
            +
            • +
          • +
            + 34 +
            +
            • +
          • +
            + 35 +
            +
            • +
          • +
            + 36 +
            +
            • +
          • +
            + 37 +
            +
            • +
          • +
            + 38 +
            +
            • +
          • +
            + 39 +
            +
            • +
          • +
            + 40 +
            +
            • +
          • +
            + 41 +
            +
            • +
          • +
            + 42 +
            +
            • +
          • +
            + 43 +
            +
            • +
          • +
            + 44 +
            +
            • +
          • +
            + 45 +
            +
            • +
          • +
            + 46 +
            +
            • +
          • +
            + 47 +
            +
            • +
          • +
            + 48 +
            +
            • +
          • +
            + 49 +
            +
            • +
          • +
            + 50 +
            +
            • +
          • +
            + 51 +
            +
            • +
          • +
            + 52 +
            +
            • +
          • +
            + 53 +
            +
            • +
          • +
            + 54 +
            +
            • +
          • +
            + 55 +
            +
            • +
          • +
            + 56 +
            +
            • +
          • +
            + 57 +
            +
            • +
          • +
            + 58 +
            +
            • +
          • +
            + 59 +
            +
            • +
          +
          +
          +
            +
          • +
            + 0 +
            +
            • +
          • +
            + 1 +
            +
            • +
          • +
            + 2 +
            +
            • +
          • +
            + 3 +
            +
            • +
          • +
            + 4 +
            +
            • +
          • +
            + 5 +
            +
            • +
          • +
            + 6 +
            +
            • +
          • +
            + 7 +
            +
            • +
          • +
            + 8 +
            +
            • +
          • +
            + 9 +
            +
            • +
          • +
            + 10 +
            +
            • +
          • +
            + 11 +
            +
            • +
          • +
            + 12 +
            +
            • +
          • +
            + 13 +
            +
            • +
          • +
            + 14 +
            +
            • +
          • +
            + 15 +
            +
            • +
          • +
            + 16 +
            +
            • +
          • +
            + 17 +
            +
            • +
          • +
            + 18 +
            +
            • +
          • +
            + 19 +
            +
            • +
          • +
            + 20 +
            +
            • +
          • +
            + 21 +
            +
            • +
          • +
            + 22 +
            +
            • +
          • +
            + 23 +
            +
            • +
          • +
            + 24 +
            +
            • +
          • +
            + 25 +
            +
            • +
          • +
            + 26 +
            +
            • +
          • +
            + 27 +
            +
            • +
          • +
            + 28 +
            +
            • +
          • +
            + 29 +
            +
            • +
          • +
            + 30 +
            +
            • +
          • +
            + 31 +
            +
            • +
          • +
            + 32 +
            +
            • +
          • +
            + 33 +
            +
            • +
          • +
            + 34 +
            +
            • +
          • +
            + 35 +
            +
            • +
          • +
            + 36 +
            +
            • +
          • +
            + 37 +
            +
            • +
          • +
            + 38 +
            +
            • +
          • +
            + 39 +
            +
            • +
          • +
            + 40 +
            +
            • +
          • +
            + 41 +
            +
            • +
          • +
            + 42 +
            +
            • +
          • +
            + 43 +
            +
            • +
          • +
            + 44 +
            +
            • +
          • +
            + 45 +
            +
            • +
          • +
            + 46 +
            +
            • +
          • +
            + 47 +
            +
            • +
          • +
            + 48 +
            +
            • +
          • +
            + 49 +
            +
            • +
          • +
            + 50 +
            +
            • +
          • +
            + 51 +
            +
            • +
          • +
            + 52 +
            +
            • +
          • +
            + 53 +
            +
            • +
          • +
            + 54 +
            +
            • +
          • +
            + 55 +
            +
            • +
          • +
            + 56 +
            +
            • +
          • +
            + 57 +
            +
            • +
          • +
            + 58 +
            +
            • +
          • +
            + 59 +
            +
            • +
          +
          +
          +
          +
          +
          +`; + +exports[`Picker.Panel override cell with cellRender in week 1`] = ` +
          +
          - 35 + 34
          - 36 + 35
          - 37 + 36
          - 38 + 37
          - 39 + 38
          - 40 + 39
          - -
        • -
          + 9 +
          +
          • +
        • - 13 -
          • - -
        • -
          + 10 +
          +
          • +
        • - 14 -
          • - -
        • -
          + 11 +
          +
          • +
        • - 15 -
          • - -
        • -
          + 12 +
          +
          • +
        • - 16 -
          • - -
        • -
          + 13 +
          +
          • +
        • - 17 -
          • - -
        • -
          + 14 +
          +
          • +
        • - 18 -
          • - -
        • -
          + 15 +
          +
          • +
        • - 19 -
          • - -
        • -
          + 16 +
          +
          • +
        • - 20 -
          • - -
        • -
          + 17 +
          +
          • +
        • - 21 -
          • - -
        • -
          + 18 +
          +
          • +
        • - 22 - -
          • -
        • -
          + 19 +
          +
          • +
        • - 23 - -
          • - -
            -
          • -
            + 20 +
            +
            • +
          • - 0 - -
            • -
          • -
            + 21 +
            +
            • +
          • - 1 - -
            • -
          • -
            + 22 +
            +
            • +
          • - 2 - -
            • -
          • + 23 + +
            • +
          + +
          +
            -
            - 3 -
            - -
          • -
            + 0 +
            +
            • +
          • - 4 -
          - -
        • -
          + 1 +
          +
          • +
        • - 5 - -
          • -
        • -
          + 2 +
          +
          • +
        • - 6 - -
          • -
        • -
          + 3 +
          +
          • +
        • - 7 - -
          • -
        • -
          + 4 +
          +
          • +
        • - 8 - -
          • -
        • -
          + 5 +
          +
          • +
        • - 9 - -
          • -
        • -
          + 6 +
          +
          • +
        • - 10 - -
          • -
        • -
          + 7 +
          +
          • +
        • - 11 - -
          • -
        • -
          + 8 +
          +
          • +
        • - 12 - -
          • -
        • -
          + 9 +
          +
          • +
        • - 13 - -
          • -
        • -
          + 10 +
          +
          • +
        • +
          + 11 +
          +
          • +
        • - 14 - -
          • -
        • -
          + 12 +
          +
          • +
        • - 15 - -
          • -
        • -
          + 13 +
          +
          • +
        • - 16 - -
          • -
        • -
          + 14 +
          +
          • +
        • - 17 - -
          • -
        • -
          + 15 +
          +
          • +
        • - 18 - -
          • -
        • -
          + 16 +
          +
          • +
        • - 19 - -
          • -
        • -
          + 17 +
          +
          • +
        • - 20 - -
          • -
        • -
          + 18 +
          +
          • +
        • - 21 - -
          • -
        • -
          + 19 +
          +
          • +
        • - 22 - -
          • -
        • -
          + 20 +
          +
          • +
        • - 23 - -
          • -
        • -
          + 21 +
          +
          • +
        • - 24 - -
          • -
        • -
          + 22 +
          +
          • +
        • - 25 - -
          • -
        • -
          + 23 +
          +
          • +
        • - 26 - -
          • -
        • -
          + 24 +
          +
          • +
        • - 27 - -
          • -
        • -
          + 25 +
          +
          • +
        • - 28 - -
          • -
        • -
          + 26 +
          +
          • +
        • - 29 - -
          • -
        • -
          + 27 +
          +
          • +
        • - 30 - -
          • -
        • -
          + 28 +
          +
          • +
        • - 31 - -
          • -
        • -
          + 29 +
          +
          • +
        • - 32 - -
          • -
        • -
          + 30 +
          +
          • +
        • +
          + 31 +
          +
          • +
        • - 33 - -
          • -
        • -
          + 32 +
          +
          • +
        • - 34 - -
          • -
        • -
          + 33 +
          +
          • +
        • - 35 - -
          • -
        • -
          + 34 +
          +
          • +
        • - 36 - -
          • -
        • -
          + 35 +
          +
          • +
        • - 37 - -
          • -
        • -
          + 36 +
          +
          • +
        • - 38 - -
          • -
        • -
          + 37 +
          +
          • +
        • - 39 - -
          • -
        • -
          + 38 +
          +
          • +
        • - 40 - -
          • -
        • -
          + 39 +
          +
          • +
        • - 41 - -
          • -
        • -
          + 40 +
          +
          • +
        • - 42 - -
          • -
        • -
          + 41 +
          +
          • +
        • - 43 - -
          • -
        • -
          + 42 +
          +
          • +
        • - 44 - -
          • -
        • -
          + 43 +
          +
          • +
        • - 45 - -
          • -
        • -
          + 44 +
          +
          • +
        • - 46 - -
          • -
        • -
          + 45 +
          +
          • +
        • - 47 - -
          • -
        • -
          + 46 +
          +
          • +
        • - 48 - -
          • -
        • -
          + 47 +
          +
          • +
        • - 49 - -
          • -
        • -
          + 48 +
          +
          • +
        • - 50 - -
          • -
        • -
          + 49 +
          +
          • +
        • - 51 - -
          • -
        • -
          + 50 +
          +
          • +
        • - 52 - -
          • -
        • -
          + 51 +
          +
          • +
        • - 53 - -
          • -
        • -
          + 52 +
          +
          • +
        • - 54 - -
          • -
        • -
          + 53 +
          +
          • +
        • - 55 - -
          • -
        • -
          + 54 +
          +
          • +
        • - 56 - -
          • -
        • -
          + 55 +
          +
          • +
        • - 57 - -
          • -
        • -
          + 56 +
          +
          • +
        • - 58 - -
          • -
        • -
          + 57 +
          +
          • +
        • - 59 - -
          • - -
            -
          • -
            + 58 +
            +
            • +
          • - 0 - -
            • -
          • + 59 + +
            • +
          + +
          +
            -
            - 1 -
            - -
          • -
            + 0 +
            +
            • +
          • - 2 -
          - -
        • -
          + 1 +
          +
          • +
        • - 3 - -
          • -
        • -
          + 2 +
          +
          • +
        • - 4 - -
          • -
        • -
          + 3 +
          +
          • +
        • - 5 - -
          • -
        • -
          + 4 +
          +
          • +
        • - 6 - -
          • -
        • -
          + 5 +
          +
          • +
        • - 7 - -
          • -
        • -
          + 6 +
          +
          • +
        • - 8 - -
          • -
        • -
          + 7 +
          +
          • +
        • - 9 - -
          • -
        • -
          + 8 +
          +
          • +
        • - 10 - -
          • -
        • -
          + 9 +
          +
          • +
        • - 11 - -
          • -
        • -
          + 10 +
          +
          • +
        • - 12 - -
          • -
        • -
          + 11 +
          +
          • +
        • - 13 - -
          • -
        • -
          + 12 +
          +
          • +
        • - 14 - -
          • -
        • -
          + 13 +
          +
          • +
        • - 15 - -
          • -
        • -
          + 14 +
          +
          • +
        • - 16 - -
          • -
        • -
          + 15 +
          +
          • +
        • - 17 - -
          • -
        • -
          + 16 +
          +
          • +
        • - 18 - -
          • -
        • -
          + 17 +
          +
          • +
        • - 19 - -
          • -
        • -
          + 18 +
          +
          • +
        • - 20 - -
          • -
        • -
          + 19 +
          +
          • +
        • - 21 - -
          • -
        • -
          + 20 +
          +
          • +
        • - 22 - -
          • -
        • -
          + 21 +
          +
          • +
        • - 23 - -
          • -
        • -
          + 22 +
          +
          • +
        • - 24 - -
          • -
        • -
          + 23 +
          +
          • +
        • - 25 - -
          • -
        • -
          + 24 +
          +
          • +
        • - 26 - -
          • -
        • -
          + 25 +
          +
          • +
        • - 27 - -
          • -
        • -
          + 26 +
          +
          • +
        • - 28 - -
          • -
        • -
          + 27 +
          +
          • +
        • - 29 - -
          • -
        • -
          + 28 +
          +
          • +
        • - 30 - -
          • -
        • -
          + 29 +
          +
          • +
        • - 31 - -
          • -
        • -
          + 30 +
          +
          • +
        • - 32 - -
          • -
        • -
          + 31 +
          +
          • +
        • +
          + 32 +
          +
          • +
        • - 33 - -
          • -
        • -
          + 33 +
          +
          • +
        • - 34 - -
          • -
        • -
          + 34 +
          +
          • +
        • - 35 - -
          • -
        • -
          + 35 +
          +
          • +
        • - 36 - -
          • -
        • -
          + 36 +
          +
          • +
        • - 37 - -
          • -
        • -
          + 37 +
          +
          • +
        • - 38 - -
          • -
        • -
          + 38 +
          +
          • +
        • - 39 - -
          • -
        • -
          + 39 +
          +
          • +
        • - 40 - -
          • -
        • -
          + 40 +
          +
          • +
        • - 41 - -
          • -
        • -
          + 41 +
          +
          • +
        • - 42 - -
          • -
        • -
          + 42 +
          +
          • +
        • - 43 - -
          • -
        • -
          + 43 +
          +
          • +
        • - 44 - -
          • -
        • -
          + 44 +
          +
          • +
        • - 45 - -
          • -
        • -
          + 45 +
          +
          • +
        • - 46 - -
          • -
        • -
          + 46 +
          +
          • +
        • - 47 - -
          • -
        • -
          + 47 +
          +
          • +
        • - 48 - -
          • -
        • -
          + 48 +
          +
          • +
        • - 49 - -
          • -
        • -
          + 49 +
          +
          • +
        • - 50 - -
          • -
        • -
          + 50 +
          +
          • +
        • - 51 - -
          • -
        • -
          + 51 +
          +
          • +
        • - 52 - -
          • -
        • -
          + 52 +
          +
          • +
        • - 53 - -
          • -
        • -
          + 53 +
          +
          • +
        • - 54 - -
          • -
        • -
          + 54 +
          +
          • +
        • - 55 - -
          • -
        • -
          + 55 +
          +
          • +
        • - 56 - -
          • -
        • -
          + 56 +
          +
          • +
        • - 57 - -
          • -
        • -
          + 57 +
          +
          • +
        • - 58 - -
          • -
        • -
          + 58 +
          +
          • +
        • - 59 - -
          • - +
          + 59 +
          + + + -
          - -
          `; @@ -9941,1341 +10331,3 @@ exports[`Picker.Panel should render correctly in rtl 1`] = ` `; - -exports[`Picker.Panel time disabled columns basic 1`] = ` -
          -
          -
          -
          -
          - ย  -
          -
          -
          -
            -
          • -
            - 00 -
            -
            • -
          • -
            - 01 -
            -
            • -
          • -
            - 02 -
            -
            • -
          • -
            - 03 -
            -
            • -
          • -
            - 04 -
            -
            • -
          • -
            - 05 -
            -
            • -
          • -
            - 06 -
            -
            • -
          • -
            - 07 -
            -
            • -
          • -
            - 08 -
            -
            • -
          • -
            - 09 -
            -
            • -
          • -
            - 10 -
            -
            • -
          • -
            - 11 -
            -
            • -
          • -
            - 12 -
            -
            • -
          • -
            - 13 -
            -
            • -
          • -
            - 14 -
            -
            • -
          • -
            - 15 -
            -
            • -
          • -
            - 16 -
            -
            • -
          • -
            - 17 -
            -
            • -
          • -
            - 18 -
            -
            • -
          • -
            - 19 -
            -
            • -
          • -
            - 20 -
            -
            • -
          • -
            - 21 -
            -
            • -
          • -
            - 22 -
            -
            • -
          • -
            - 23 -
            -
            • -
          -
            -
          • -
            - 00 -
            -
            • -
          • -
            - 01 -
            -
            • -
          • -
            - 02 -
            -
            • -
          • -
            - 03 -
            -
            • -
          • -
            - 04 -
            -
            • -
          • -
            - 05 -
            -
            • -
          • -
            - 06 -
            -
            • -
          • -
            - 07 -
            -
            • -
          • -
            - 08 -
            -
            • -
          • -
            - 09 -
            -
            • -
          • -
            - 10 -
            -
            • -
          • -
            - 11 -
            -
            • -
          • -
            - 12 -
            -
            • -
          • -
            - 13 -
            -
            • -
          • -
            - 14 -
            -
            • -
          • -
            - 15 -
            -
            • -
          • -
            - 16 -
            -
            • -
          • -
            - 17 -
            -
            • -
          • -
            - 18 -
            -
            • -
          • -
            - 19 -
            -
            • -
          • -
            - 20 -
            -
            • -
          • -
            - 21 -
            -
            • -
          • -
            - 22 -
            -
            • -
          • -
            - 23 -
            -
            • -
          • -
            - 24 -
            -
            • -
          • -
            - 25 -
            -
            • -
          • -
            - 26 -
            -
            • -
          • -
            - 27 -
            -
            • -
          • -
            - 28 -
            -
            • -
          • -
            - 29 -
            -
            • -
          • -
            - 30 -
            -
            • -
          • -
            - 31 -
            -
            • -
          • -
            - 32 -
            -
            • -
          • -
            - 33 -
            -
            • -
          • -
            - 34 -
            -
            • -
          • -
            - 35 -
            -
            • -
          • -
            - 36 -
            -
            • -
          • -
            - 37 -
            -
            • -
          • -
            - 38 -
            -
            • -
          • -
            - 39 -
            -
            • -
          • -
            - 40 -
            -
            • -
          • -
            - 41 -
            -
            • -
          • -
            - 42 -
            -
            • -
          • -
            - 43 -
            -
            • -
          • -
            - 44 -
            -
            • -
          • -
            - 45 -
            -
            • -
          • -
            - 46 -
            -
            • -
          • -
            - 47 -
            -
            • -
          • -
            - 48 -
            -
            • -
          • -
            - 49 -
            -
            • -
          • -
            - 50 -
            -
            • -
          • -
            - 51 -
            -
            • -
          • -
            - 52 -
            -
            • -
          • -
            - 53 -
            -
            • -
          • -
            - 54 -
            -
            • -
          • -
            - 55 -
            -
            • -
          • -
            - 56 -
            -
            • -
          • -
            - 57 -
            -
            • -
          • -
            - 58 -
            -
            • -
          • -
            - 59 -
            -
            • -
          -
            -
          • -
            - 00 -
            -
            • -
          • -
            - 01 -
            -
            • -
          • -
            - 02 -
            -
            • -
          • -
            - 03 -
            -
            • -
          • -
            - 04 -
            -
            • -
          • -
            - 05 -
            -
            • -
          • -
            - 06 -
            -
            • -
          • -
            - 07 -
            -
            • -
          • -
            - 08 -
            -
            • -
          • -
            - 09 -
            -
            • -
          • -
            - 10 -
            -
            • -
          • -
            - 11 -
            -
            • -
          • -
            - 12 -
            -
            • -
          • -
            - 13 -
            -
            • -
          • -
            - 14 -
            -
            • -
          • -
            - 15 -
            -
            • -
          • -
            - 16 -
            -
            • -
          • -
            - 17 -
            -
            • -
          • -
            - 18 -
            -
            • -
          • -
            - 19 -
            -
            • -
          • -
            - 20 -
            -
            • -
          • -
            - 21 -
            -
            • -
          • -
            - 22 -
            -
            • -
          • -
            - 23 -
            -
            • -
          • -
            - 24 -
            -
            • -
          • -
            - 25 -
            -
            • -
          • -
            - 26 -
            -
            • -
          • -
            - 27 -
            -
            • -
          • -
            - 28 -
            -
            • -
          • -
            - 29 -
            -
            • -
          • -
            - 30 -
            -
            • -
          • -
            - 31 -
            -
            • -
          • -
            - 32 -
            -
            • -
          • -
            - 33 -
            -
            • -
          • -
            - 34 -
            -
            • -
          • -
            - 35 -
            -
            • -
          • -
            - 36 -
            -
            • -
          • -
            - 37 -
            -
            • -
          • -
            - 38 -
            -
            • -
          • -
            - 39 -
            -
            • -
          • -
            - 40 -
            -
            • -
          • -
            - 41 -
            -
            • -
          • -
            - 42 -
            -
            • -
          • -
            - 43 -
            -
            • -
          • -
            - 44 -
            -
            • -
          • -
            - 45 -
            -
            • -
          • -
            - 46 -
            -
            • -
          • -
            - 47 -
            -
            • -
          • -
            - 48 -
            -
            • -
          • -
            - 49 -
            -
            • -
          • -
            - 50 -
            -
            • -
          • -
            - 51 -
            -
            • -
          • -
            - 52 -
            -
            • -
          • -
            - 53 -
            -
            • -
          • -
            - 54 -
            -
            • -
          • -
            - 55 -
            -
            • -
          • -
            - 56 -
            -
            • -
          • -
            - 57 -
            -
            • -
          • -
            - 58 -
            -
            • -
          • -
            - 59 -
            -
            • -
          -
          -
          -
          -
          -`; diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx index 0c94e685c..a929bebe2 100644 --- a/tests/panel.spec.tsx +++ b/tests/panel.spec.tsx @@ -520,6 +520,7 @@ describe('Picker.Panel', () => { return (current as Dayjs).get(picker as any); } }; + it(`override cell with cellRender when pass showTime`, () => { const App = () => ( { expect(container.querySelector(`.rc-picker-time-panel`)).toBeTruthy(); expect(container).toMatchSnapshot(); }); - return; supportCellRenderPicker.forEach((picker) => { it(`override cell with cellRender in ${picker}`, () => { @@ -623,6 +623,8 @@ describe('Picker.Panel', () => { }); }); + return; + it('week picker current should check year', () => { const { container } = render(); expect( From bb5903851fc432ed095405c8c9dcdcda15b4cb56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 15 Dec 2023 17:34:00 +0800 Subject: [PATCH 333/380] test: find --- src/NewPicker/PickerInput/hooks/useCellRender.ts | 12 ++++++++++-- tests/__snapshots__/panel.spec.tsx.snap | 6 ++++-- tests/panel.spec.tsx | 15 --------------- tests/util/commonUtil.tsx | 2 ++ 4 files changed, 16 insertions(+), 19 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useCellRender.ts b/src/NewPicker/PickerInput/hooks/useCellRender.ts index 742427967..ce8a22fd0 100644 --- a/src/NewPicker/PickerInput/hooks/useCellRender.ts +++ b/src/NewPicker/PickerInput/hooks/useCellRender.ts @@ -1,12 +1,20 @@ +import { warning } from 'rc-util'; import * as React from 'react'; import type { CellRender, CellRenderInfo, SharedPickerProps } from '../../interface'; export default function useCellRender( cellRender: SharedPickerProps['cellRender'], - dateRender: SharedPickerProps['dateRender'], - monthCellRender: SharedPickerProps['monthCellRender'], + dateRender?: SharedPickerProps['dateRender'], + monthCellRender?: SharedPickerProps['monthCellRender'], range?: CellRenderInfo['range'], ) { + // ========================= Warn ========================= + if (process.env.NODE_ENV !== 'production') { + warning(!dateRender, `'dateRender' is deprecated. Please use 'cellRender' instead.`); + warning(!monthCellRender, `'monthCellRender' is deprecated. Please use 'cellRender' instead.`); + } + + // ======================== Render ======================== // Merged render const mergedCellRender = React.useMemo(() => { if (cellRender) { diff --git a/tests/__snapshots__/panel.spec.tsx.snap b/tests/__snapshots__/panel.spec.tsx.snap index 1398fa3f1..0d004b7e2 100644 --- a/tests/__snapshots__/panel.spec.tsx.snap +++ b/tests/__snapshots__/panel.spec.tsx.snap @@ -1163,6 +1163,7 @@ exports[`Picker.Panel append cell with cellRender in quarter 1`] = ` >
          - { console.error('1'); console.log('๐ŸŽฒ PanelValue Change:', panelValue, mode); }} - /> + /> */} {/* ( }); const mergedValue = React.useMemo(() => { - const values = toArray(innerValue); + // Clean up `[null]` + const values = toArray(innerValue).filter((val) => val); return multiple ? values : values.slice(0, 1); }, [innerValue, multiple]); diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap index dc367d56c..2f44ce382 100644 --- a/tests/__snapshots__/range.spec.tsx.snap +++ b/tests/__snapshots__/range.spec.tsx.snap @@ -1331,6 +1331,8 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1 3
          + + - - + + - - + + + + - - + + - - + + { it('disabledTime', () => { /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ const disabledTime = jest.fn((_: Dayjs | null, __: 'start' | 'end') => { - if (__ === 'start') { - console.trace('f'); - } return { disabledHours: () => [11], }; diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx index 62e8d4630..81d8f9b1a 100644 --- a/tests/panel.spec.tsx +++ b/tests/panel.spec.tsx @@ -552,8 +552,6 @@ describe('Picker.Panel', () => { const { container } = render(); - console.log(container.innerHTML); - expect(container.querySelector('.customWrapper')).toBeTruthy(); expect(container.querySelector(`.rc-picker-${picker}-panel`)).toBeTruthy(); expect(container).toMatchSnapshot(); From 5de6a07e7ee9a6ffc9658ef98aec40ab02d90a2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 10:40:20 +0800 Subject: [PATCH 335/380] chore: tmp of it --- assets/index.less | 21 +++++ docs/examples/debug.tsx | 8 ++ .../PickerInput/Selector/RangeSelector.tsx | 2 +- .../Selector/SingleSelector/MultipleDates.tsx | 80 +++++++++++++++++++ .../index.tsx} | 57 +++++++++---- .../Selector/hooks/useInputProps.ts | 4 +- src/NewPicker/PickerInput/SinglePicker.tsx | 4 +- 7 files changed, 156 insertions(+), 20 deletions(-) create mode 100644 src/NewPicker/PickerInput/Selector/SingleSelector/MultipleDates.tsx rename src/NewPicker/PickerInput/Selector/{SingleSelector.tsx => SingleSelector/index.tsx} (67%) diff --git a/assets/index.less b/assets/index.less index 9258b4755..b1a5ad470 100644 --- a/assets/index.less +++ b/assets/index.less @@ -24,6 +24,7 @@ } .@{prefix-cls} { + position: relative; display: inline-flex; &-rtl { @@ -528,4 +529,24 @@ 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%; + } + } } diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 6cb253611..71196cfd8 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -153,6 +153,14 @@ export default () => { // showTime={{ // disabledHours: () => [0, 1, 2, 3, 4, 5], // }} + multiple + defaultValue={[ + dayjs('2000-01-01'), + dayjs('2000-01-03'), + dayjs('2000-01-05'), + dayjs('2000-01-07'), + dayjs('2000-01-09'), + ]} presets={[ { label: 'Good', diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 155a3bb48..10a02b2a6 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -154,7 +154,7 @@ function RangeSelector( ); // ======================== Inputs ======================== - const getInputProps = useInputProps({ + const [getInputProps] = useInputProps({ ...props, id: ids, placeholder: mergedPlaceholder, diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector/MultipleDates.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector/MultipleDates.tsx new file mode 100644 index 000000000..356bbaca3 --- /dev/null +++ b/src/NewPicker/PickerInput/Selector/SingleSelector/MultipleDates.tsx @@ -0,0 +1,80 @@ +import classNames from 'classnames'; +import Overflow from 'rc-overflow'; +import * as React from 'react'; +import type { PickerProps } from '../../SinglePicker'; + +export interface MultipleDatesProps + extends Pick { + prefixCls: string; + value: DateType[]; + onRemove: (value: DateType) => void; + removeIcon?: React.ReactNode; + formatDate: (date: DateType) => string; + disabled?: boolean; +} + +export default function MultipleDates( + props: MultipleDatesProps, +) { + const { prefixCls, value, onRemove, removeIcon = 'ร—', formatDate, disabled, maxTagCount } = props; + + const selectorCls = `${prefixCls}-selector`; + const selectionCls = `${prefixCls}-selection`; + const overflowCls = `${selectionCls}-overflow`; + + // ========================= Item ========================= + function renderSelector(content: React.ReactNode, onClose?: React.MouseEventHandler) { + return ( + + {content} + {!disabled && onClose && ( + { + e.preventDefault(); + }} + onClick={onClose} + className={`${selectionCls}-item-remove`} + > + {removeIcon} + + )} + + ); + } + + function renderItem(date: DateType) { + const displayLabel: React.ReactNode = formatDate(date); + + const onClose = (event?: React.MouseEvent) => { + if (event) event.stopPropagation(); + onRemove(date); + }; + + return renderSelector(displayLabel, onClose); + } + + // ========================= Rest ========================= + function renderRest(omittedValues: DateType[]) { + const content = `+ ${omittedValues.length} ...`; + + return renderSelector(content); + } + + // ======================== Render ======================== + return ( +
          + formatDate(date)} + maxCount={maxTagCount} + /> +
          + ); +} diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx similarity index 67% rename from src/NewPicker/PickerInput/Selector/SingleSelector.tsx rename to src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx index 2c37b93da..0f441658e 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx @@ -1,14 +1,17 @@ import classNames from 'classnames'; import * as React from 'react'; -import type { SelectorProps, SelectorRef } from '../../interface'; -import PickerContext from '../context'; -import useInputProps from './hooks/useInputProps'; -import useRootProps from './hooks/useRootProps'; -import { ClearIcon } from './Icon'; -import Input, { type InputRef } from './Input'; +import type { SelectorProps, SelectorRef } from '../../../interface'; +import PickerContext from '../../context'; +import type { PickerProps } from '../../SinglePicker'; +import useInputProps from '../hooks/useInputProps'; +import useRootProps from '../hooks/useRootProps'; +import Icon, { ClearIcon } from '../Icon'; +import Input, { type InputRef } from '../Input'; +import MultipleDates from './MultipleDates'; export interface SingleSelectorProps - extends SelectorProps { + extends SelectorProps, + Pick { id?: string; value?: DateType[]; @@ -59,6 +62,8 @@ function SingleSelector( onChange, onSubmit, onInputChange, + multiple, + maxTagCount, // Valid format, @@ -110,7 +115,7 @@ function SingleSelector( const rootProps = useRootProps(restProps); // ======================== Inputs ======================== - const getInputProps = useInputProps(props, ({ valueTexts }) => ({ + const [getInputProps, getText] = useInputProps(props, ({ valueTexts }) => ({ value: valueTexts[0] || '', active: focused, })); @@ -118,6 +123,32 @@ function SingleSelector( // ======================== Clear ========================= const showClear = !!(clearIcon && value.length && !disabled); + // ======================= Multiple ======================= + const selectorNode = multiple ? ( + <> + { + console.log('Remove:', date); + }} + formatDate={getText} + maxTagCount={maxTagCount} + disabled={disabled} + /> + + {showClear && } + + ) : ( + } + showActiveCls={false} + /> + ); + // ======================== Render ======================== return (
          ( // Not lose current input focus onMouseDown={(e) => { const { target } = e; - if (target !== inputRef.current.inputElement) { + if (target !== inputRef.current?.inputElement) { e.preventDefault(); } onMouseDown?.(e); }} > - } - showActiveCls={false} - /> + {selectorNode}
          ); } diff --git a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts index 0f7e37eed..21de6f64e 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts +++ b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts @@ -127,7 +127,7 @@ export default function useInputProps( // ============== Shared ============== format: maskFormat, - validateFormat: (text) => !!validateFormat(text), + validateFormat: (text: string) => !!validateFormat(text), preserveInvalidOnBlur, readOnly: inputReadOnly, @@ -221,5 +221,5 @@ export default function useInputProps( return inputProps; }; - return getInputProps; + return [getInputProps, getText] as const; } diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index f9719bd08..07f14bb82 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -40,6 +40,8 @@ export interface PickerProps /** Not support `time` or `datetime` picker */ multiple?: boolean; + /** Only work when `multiple` is in used */ + maxTagCount?: number | 'responsive'; // Value value?: DateType | DateType[]; @@ -390,7 +392,7 @@ function Picker( return internalHoverValue ? [internalHoverValue] : calendarValue; } - return [...calendarValue, internalHoverValue]; + return [...calendarValue, internalHoverValue].filter((date) => date); }, [calendarValue, internalHoverValue, multiple]); // Clean up `internalHoverValues` when closed From 3ab6af41ccf71947f42f1169702af0bbb915b028 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 10:58:52 +0800 Subject: [PATCH 336/380] chore: selection --- .../PickerInput/Selector/RangeSelector.tsx | 2 + .../Selector/SingleSelector/index.tsx | 38 +++++++++++++++---- .../Selector/hooks/useInputProps.ts | 2 +- src/NewPicker/PickerInput/SinglePicker.tsx | 5 ++- src/NewPicker/interface.tsx | 1 - 5 files changed, 36 insertions(+), 12 deletions(-) diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index 10a02b2a6..b1edf9416 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -24,6 +24,8 @@ export interface RangeSelectorProps extends SelectorProps void; + disabled: [boolean, boolean]; /** All the field show as `placeholder` */ diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx index 0f441658e..2fe38f492 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; -import type { SelectorProps, SelectorRef } from '../../../interface'; +import { isSame } from '../../../../utils/dateUtil'; +import type { InternalMode, SelectorProps, SelectorRef } from '../../../interface'; import PickerContext from '../../context'; import type { PickerProps } from '../../SinglePicker'; import useInputProps from '../hooks/useInputProps'; @@ -15,6 +16,10 @@ export interface SingleSelectorProps id?: string; value?: DateType[]; + onChange: (date: DateType[]) => void; + + internalPicker: InternalMode; + disabled: boolean; /** All the field show as `placeholder` */ @@ -58,6 +63,7 @@ function SingleSelector( onClear, // Change + internalPicker, value, onChange, onSubmit, @@ -114,11 +120,29 @@ function SingleSelector( // ======================== Props ========================= const rootProps = useRootProps(restProps); + // ======================== Change ======================== + const onSingleChange = (date: DateType) => { + onChange([date]); + }; + + const onMultipleRemove = (date: DateType) => { + const nextValues = value.filter( + (oriDate) => oriDate && !isSame(generateConfig, locale, oriDate, date, internalPicker), + ); + onChange(nextValues); + }; + // ======================== Inputs ======================== - const [getInputProps, getText] = useInputProps(props, ({ valueTexts }) => ({ - value: valueTexts[0] || '', - active: focused, - })); + const [getInputProps, getText] = useInputProps( + { + ...props, + onChange: onSingleChange, + }, + ({ valueTexts }) => ({ + value: valueTexts[0] || '', + active: focused, + }), + ); // ======================== Clear ========================= const showClear = !!(clearIcon && value.length && !disabled); @@ -129,9 +153,7 @@ function SingleSelector( { - console.log('Remove:', date); - }} + onRemove={onMultipleRemove} formatDate={getText} maxTagCount={maxTagCount} disabled={disabled} diff --git a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts index 21de6f64e..da87b0323 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts +++ b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts @@ -22,7 +22,6 @@ export default function useInputProps( | 'onInvalid' | 'onOpenChange' | 'onKeyDown' - | 'onChange' | 'activeHelp' | 'name' | 'autoComplete' @@ -33,6 +32,7 @@ export default function useInputProps( invalid?: boolean | [boolean, boolean]; placeholder?: string | [string, string]; disabled?: boolean | [boolean, boolean]; + onChange: (value: DateType | null, index?: number) => void; // RangePicker only allHelp: boolean; diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 07f14bb82..e68b7be6e 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -544,8 +544,8 @@ function Picker( // ======================== Change ======================== // TODO: support multiple mode - const onSelectorChange = (date: DateType) => { - triggerCalendarChange([date]); + const onSelectorChange = (date: DateType[]) => { + triggerCalendarChange(date); }; const onSelectorInputChange = () => { @@ -655,6 +655,7 @@ function Picker( maskFormat={maskFormat} onChange={onSelectorChange} onInputChange={onSelectorInputChange} + internalPicker={internalPicker} // Format format={formatList} inputReadOnly={inputReadOnly} diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 95081434d..3b0d9f626 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -447,7 +447,6 @@ export interface SelectorProps extends SharedHTMLAttrs { * This will force align the input with template mask. */ maskFormat?: string; - onChange: (date: DateType, index?: number) => void; onInputChange: VoidFunction; onInvalid: (valid: boolean, index?: number) => void; /** When user input invalidate date, keep it in the input field */ From 09ce5165650b5cdf5d04b2e2051c363e52c6db09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 11:13:19 +0800 Subject: [PATCH 337/380] chore: multiple values --- docs/examples/debug.tsx | 17 ++++++++++------- .../Selector/SingleSelector/MultipleDates.tsx | 1 + .../Selector/SingleSelector/index.tsx | 1 + src/NewPicker/PickerInput/SinglePicker.tsx | 16 +++++++++++++++- 4 files changed, 27 insertions(+), 8 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 71196cfd8..cb41f7713 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -154,13 +154,16 @@ export default () => { // disabledHours: () => [0, 1, 2, 3, 4, 5], // }} multiple - defaultValue={[ - dayjs('2000-01-01'), - dayjs('2000-01-03'), - dayjs('2000-01-05'), - dayjs('2000-01-07'), - dayjs('2000-01-09'), - ]} + maxTagCount="responsive" + defaultValue={ + [ + // dayjs('2000-01-01'), + // dayjs('2000-01-03'), + // dayjs('2000-01-05'), + // dayjs('2000-01-07'), + // dayjs('2000-01-09'), + ] + } presets={[ { label: 'Good', diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector/MultipleDates.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector/MultipleDates.tsx index 356bbaca3..47cbd2a8e 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector/MultipleDates.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector/MultipleDates.tsx @@ -64,6 +64,7 @@ export default function MultipleDates( } // ======================== Render ======================== + return (
          ( (oriDate) => oriDate && !isSame(generateConfig, locale, oriDate, date, internalPicker), ); onChange(nextValues); + onSubmit(); }; // ======================== Inputs ======================== diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index e68b7be6e..a1395021e 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -392,7 +392,19 @@ function Picker( return internalHoverValue ? [internalHoverValue] : calendarValue; } - return [...calendarValue, internalHoverValue].filter((date) => date); + return calendarValue.filter((date) => date); + + // const nextValues = [...calendarValue].filter((date) => date); + // if ( + // internalHoverValue && + // nextValues.every( + // (date) => !isSame(generateConfig, locale, date, internalHoverValue, internalPicker), + // ) + // ) { + // nextValues.push(internalHoverValue); + // } + + // return nextValues; }, [calendarValue, internalHoverValue, multiple]); // Clean up `internalHoverValues` when closed @@ -453,7 +465,9 @@ function Picker( const onPanelSelect = (date: DateType) => { lastOperation('panel'); + console.log('1 =>', getCalendarValue()); const nextValues = multiple ? toggleDates(getCalendarValue(), date) : [date]; + console.log('2 =>', nextValues); // const clone: DateType = fillIndex(calendarValue, activeIndex, date); From 458d82d335c40093806bfe76531a1503587720ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 11:17:47 +0800 Subject: [PATCH 338/380] chore: multiple style --- assets/index.less | 4 ++++ docs/examples/debug.tsx | 2 +- src/NewPicker/PickerInput/SinglePicker.tsx | 12 ------------ 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/assets/index.less b/assets/index.less index b1a5ad470..721a648b9 100644 --- a/assets/index.less +++ b/assets/index.less @@ -549,4 +549,8 @@ max-width: 100%; } } + + &-selection-item { + border: 1px solid blue; + } } diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index cb41f7713..8707d083c 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -157,7 +157,7 @@ export default () => { maxTagCount="responsive" defaultValue={ [ - // dayjs('2000-01-01'), + dayjs('2000-01-01'), // dayjs('2000-01-03'), // dayjs('2000-01-05'), // dayjs('2000-01-07'), diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index a1395021e..6ee923ae5 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -393,18 +393,6 @@ function Picker( } return calendarValue.filter((date) => date); - - // const nextValues = [...calendarValue].filter((date) => date); - // if ( - // internalHoverValue && - // nextValues.every( - // (date) => !isSame(generateConfig, locale, date, internalHoverValue, internalPicker), - // ) - // ) { - // nextValues.push(internalHoverValue); - // } - - // return nextValues; }, [calendarValue, internalHoverValue, multiple]); // Clean up `internalHoverValues` when closed From d9ffa306904df73c1f5f6c2a1d9da2329b14e97b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 11:25:29 +0800 Subject: [PATCH 339/380] chore: not trigger change when opened --- .../PickerInput/Selector/SingleSelector/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx index 1478048e2..0f4db9982 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx @@ -39,6 +39,8 @@ function SingleSelector( const { id, + open, + clearIcon, suffixIcon, activeHelp, @@ -130,7 +132,11 @@ function SingleSelector( (oriDate) => oriDate && !isSame(generateConfig, locale, oriDate, date, internalPicker), ); onChange(nextValues); - onSubmit(); + + // When `open`, it means user is operating the + if (!open) { + onSubmit(); + } }; // ======================== Inputs ======================== From 4b9d69322bc52ca8d3db353bfa61175de1a1bd62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 14:16:21 +0800 Subject: [PATCH 340/380] test: add test case --- assets/index.less | 5 ++ .../Selector/SingleSelector/index.tsx | 6 +++ src/NewPicker/PickerInput/SinglePicker.tsx | 4 -- tests/multiple.spec.tsx | 48 +++++++++++++++++++ 4 files changed, 59 insertions(+), 4 deletions(-) create mode 100644 tests/multiple.spec.tsx diff --git a/assets/index.less b/assets/index.less index 721a648b9..fcc097c3e 100644 --- a/assets/index.less +++ b/assets/index.less @@ -553,4 +553,9 @@ &-selection-item { border: 1px solid blue; } + + &-multiple-input { + width: 10px; + opacity: 0.1; + } } diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx index 0f4db9982..fe3a1e935 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx @@ -165,6 +165,12 @@ function SingleSelector( maxTagCount={maxTagCount} disabled={disabled} /> + {showClear && } diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 6ee923ae5..c638a7479 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -453,11 +453,7 @@ function Picker( const onPanelSelect = (date: DateType) => { lastOperation('panel'); - console.log('1 =>', getCalendarValue()); const nextValues = multiple ? toggleDates(getCalendarValue(), date) : [date]; - console.log('2 =>', nextValues); - - // const clone: DateType = fillIndex(calendarValue, activeIndex, date); // Only trigger calendar event but not update internal `calendarValue` state triggerCalendarChange(nextValues); diff --git a/tests/multiple.spec.tsx b/tests/multiple.spec.tsx new file mode 100644 index 000000000..c674e0e2f --- /dev/null +++ b/tests/multiple.spec.tsx @@ -0,0 +1,48 @@ +/* eslint-disable @typescript-eslint/no-loop-func */ +import { fireEvent, render } from '@testing-library/react'; +import { resetWarned } from 'rc-util/lib/warning'; +import React from 'react'; +import { DayPicker, getDay, isOpen, openPicker, selectCell } from './util/commonUtil'; + +const fakeTime = getDay('1990-09-03 00:00:00').valueOf(); + +describe('Picker.Multiple', () => { + // let errorSpy: ReturnType; + + beforeAll(() => { + // errorSpy = jest.spyOn(console, 'error').mockImplementation(() => null); + }); + + beforeEach(() => { + jest.useFakeTimers().setSystemTime(fakeTime); + // errorSpy.mockReset(); + resetWarned(); + }); + afterAll(() => { + jest.clearAllTimers(); + jest.useRealTimers(); + }); + + it('onChange', () => { + const onChange = jest.fn(); + const { container } = render(); + + openPicker(container); + selectCell(1); + selectCell(3); + selectCell(5); + + expect(onChange).not.toHaveBeenCalled(); + expect(isOpen()).toBeTruthy(); + + // Confirm + fireEvent.click(document.querySelector('.rc-picker-ok button')); + expect(onChange).toHaveBeenCalledWith(expect.anything(), [ + '1990-09-01', + '1990-09-03', + '1990-09-05', + ]); + + expect(onChange.mock.calls[0][0]).toHaveLength(3); + }); +}); From e5ad1b7c7201ee18cdf27cfc4c8541e02025e67c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 14:31:10 +0800 Subject: [PATCH 341/380] test: add test case --- tests/multiple.spec.tsx | 52 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/tests/multiple.spec.tsx b/tests/multiple.spec.tsx index c674e0e2f..8ef3831ad 100644 --- a/tests/multiple.spec.tsx +++ b/tests/multiple.spec.tsx @@ -45,4 +45,56 @@ describe('Picker.Multiple', () => { expect(onChange.mock.calls[0][0]).toHaveLength(3); }); + + it('panel click to remove', () => { + const onChange = jest.fn(); + const { container } = render(); + + openPicker(container); + selectCell(1); + selectCell(3); + selectCell(5); + selectCell(3); + + // Confirm + fireEvent.click(document.querySelector('.rc-picker-ok button')); + expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-01', '1990-09-05']); + }); + + it('selector remove', () => { + const onChange = jest.fn(); + const { container } = render( + , + ); + + // Click remove icon + fireEvent.click(container.querySelector('.rc-picker-selection-item-remove')); + expect(onChange).toHaveBeenCalledWith(expect.anything(), ['2000-01-28']); + }); + + it('open to remove selector should not trigger onChange', () => { + const onChange = jest.fn(); + const { container } = render( + , + ); + + openPicker(container); + expect(container.querySelectorAll('.rc-picker-selection-item')).toHaveLength(2); + + fireEvent.click(container.querySelector('.rc-picker-selection-item-remove')); + expect(onChange).not.toHaveBeenCalled(); + expect(container.querySelectorAll('.rc-picker-selection-item')).toHaveLength(1); + + // Confirm + fireEvent.click(document.querySelector('.rc-picker-ok button')); + expect(onChange).toHaveBeenCalledWith(expect.anything(), ['2000-01-28']); + }); }); From 5c9de42ca6151d0b6dd86407a1254148294a973f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 14:46:22 +0800 Subject: [PATCH 342/380] chore: clean types --- src/NewPicker/interface.tsx | 2 + src/PanelContext.tsx | 28 - src/Picker.tsx | 645 ----------- src/PickerPanel.tsx | 647 ----------- src/PickerTrigger.tsx | 104 -- src/PresetPanel.tsx | 35 - src/RangeContext.tsx | 17 - src/RangePicker.tsx | 1270 --------------------- src/hooks/useCellClassName.ts | 109 -- src/hooks/useCellRender.ts | 30 - src/hooks/useHoverValue.ts | 44 - src/hooks/usePickerInput.ts | 171 --- src/hooks/usePresets.ts | 25 - src/hooks/useRangeDisabled.ts | 113 -- src/hooks/useRangeOpen.ts | 124 -- src/hooks/useRangeViewDates.ts | 121 -- src/hooks/useTextValueMapping.ts | 32 - src/hooks/useTimeSelection.ts | 63 - src/hooks/useValueTexts.ts | 51 - src/index.tsx | 12 - src/interface.ts | 103 -- src/panels/DatePanel/DateBody.tsx | 117 -- src/panels/DatePanel/DateHeader.tsx | 102 -- src/panels/DatePanel/index.tsx | 114 -- src/panels/DatetimePanel/index.tsx | 187 --- src/panels/DecadePanel/DecadeBody.tsx | 78 -- src/panels/DecadePanel/DecadeHeader.tsx | 48 - src/panels/DecadePanel/constant.ts | 2 - src/panels/DecadePanel/index.tsx | 96 -- src/panels/Header.tsx | 94 -- src/panels/MonthPanel/MonthBody.tsx | 90 -- src/panels/MonthPanel/MonthHeader.tsx | 54 - src/panels/MonthPanel/index.tsx | 81 -- src/panels/PanelBody.tsx | 134 --- src/panels/QuarterPanel/QuarterBody.tsx | 81 -- src/panels/QuarterPanel/QuarterHeader.tsx | 53 - src/panels/QuarterPanel/index.tsx | 74 -- src/panels/TimePanel/TimeBody.tsx | 283 ----- src/panels/TimePanel/TimeHeader.tsx | 38 - src/panels/TimePanel/TimeUnitColumn.tsx | 106 -- src/panels/TimePanel/index.tsx | 104 -- src/panels/WeekPanel/index.tsx | 95 -- src/panels/YearPanel/YearBody.tsx | 88 -- src/panels/YearPanel/YearHeader.tsx | 45 - src/panels/YearPanel/constant.ts | 1 - src/panels/YearPanel/index.tsx | 92 -- src/utils/dateUtil.ts | 100 +- 47 files changed, 9 insertions(+), 6094 deletions(-) delete mode 100644 src/PanelContext.tsx delete mode 100644 src/Picker.tsx delete mode 100644 src/PickerPanel.tsx delete mode 100644 src/PickerTrigger.tsx delete mode 100644 src/PresetPanel.tsx delete mode 100644 src/RangeContext.tsx delete mode 100644 src/RangePicker.tsx delete mode 100644 src/hooks/useCellClassName.ts delete mode 100644 src/hooks/useCellRender.ts delete mode 100644 src/hooks/useHoverValue.ts delete mode 100644 src/hooks/usePickerInput.ts delete mode 100644 src/hooks/usePresets.ts delete mode 100644 src/hooks/useRangeDisabled.ts delete mode 100644 src/hooks/useRangeOpen.ts delete mode 100644 src/hooks/useRangeViewDates.ts delete mode 100644 src/hooks/useTextValueMapping.ts delete mode 100644 src/hooks/useTimeSelection.ts delete mode 100644 src/hooks/useValueTexts.ts delete mode 100644 src/index.tsx delete mode 100644 src/interface.ts delete mode 100644 src/panels/DatePanel/DateBody.tsx delete mode 100644 src/panels/DatePanel/DateHeader.tsx delete mode 100644 src/panels/DatePanel/index.tsx delete mode 100644 src/panels/DatetimePanel/index.tsx delete mode 100644 src/panels/DecadePanel/DecadeBody.tsx delete mode 100644 src/panels/DecadePanel/DecadeHeader.tsx delete mode 100644 src/panels/DecadePanel/constant.ts delete mode 100644 src/panels/DecadePanel/index.tsx delete mode 100644 src/panels/Header.tsx delete mode 100644 src/panels/MonthPanel/MonthBody.tsx delete mode 100644 src/panels/MonthPanel/MonthHeader.tsx delete mode 100644 src/panels/MonthPanel/index.tsx delete mode 100644 src/panels/PanelBody.tsx delete mode 100644 src/panels/QuarterPanel/QuarterBody.tsx delete mode 100644 src/panels/QuarterPanel/QuarterHeader.tsx delete mode 100644 src/panels/QuarterPanel/index.tsx delete mode 100644 src/panels/TimePanel/TimeBody.tsx delete mode 100644 src/panels/TimePanel/TimeHeader.tsx delete mode 100644 src/panels/TimePanel/TimeUnitColumn.tsx delete mode 100644 src/panels/TimePanel/index.tsx delete mode 100644 src/panels/WeekPanel/index.tsx delete mode 100644 src/panels/YearPanel/YearBody.tsx delete mode 100644 src/panels/YearPanel/YearHeader.tsx delete mode 100644 src/panels/YearPanel/constant.ts delete mode 100644 src/panels/YearPanel/index.tsx diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx index 3b0d9f626..b38d03f14 100644 --- a/src/NewPicker/interface.tsx +++ b/src/NewPicker/interface.tsx @@ -1,6 +1,8 @@ import type { AlignType } from '@rc-component/trigger'; import type { GenerateConfig } from '../generate'; +export type NullableDateType = DateType | null | undefined; + export type Locale = { locale: string; diff --git a/src/PanelContext.tsx b/src/PanelContext.tsx deleted file mode 100644 index 96bc423b6..000000000 --- a/src/PanelContext.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import type { OnSelect, PanelMode } from './interface'; - -export type ContextOperationRefProps = { - onKeyDown?: (e: React.KeyboardEvent) => boolean; - onClose?: () => void; -}; - -export type PanelContextProps = { - operationRef?: React.MutableRefObject; - /** Only work with time panel */ - hideHeader?: boolean; - hidePrevBtn?: boolean; - hideNextBtn?: boolean; - onDateMouseEnter?: (date: any) => void; - onDateMouseLeave?: (date: any) => void; - onSelect?: OnSelect; - hideRanges?: boolean; - open?: boolean; - mode?: PanelMode; - - /** Only used for TimePicker and this is a deprecated prop */ - defaultOpenValue?: any; -}; - -const PanelContext = React.createContext({}); - -export default PanelContext; diff --git a/src/Picker.tsx b/src/Picker.tsx deleted file mode 100644 index 514d6088e..000000000 --- a/src/Picker.tsx +++ /dev/null @@ -1,645 +0,0 @@ -/** - * Removed: - * - getCalendarContainer: use `getPopupContainer` instead - * - onOk - * - * New Feature: - * - picker - * - allowEmpty - * - selectable - * - * Tips: Should add faq about `datetime` mode with `defaultValue` - */ - -import type { AlignType } from '@rc-component/trigger/lib/interface'; -import classNames from 'classnames'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; -import warning from 'rc-util/lib/warning'; -import pickAttrs from 'rc-util/lib/pickAttrs'; -import * as React from 'react'; -import useHoverValue from './hooks/useHoverValue'; -import usePickerInput from './hooks/usePickerInput'; -import usePresets from './hooks/usePresets'; -import useTextValueMapping from './hooks/useTextValueMapping'; -import useValueTexts from './hooks/useValueTexts'; -import type { CustomFormat, PickerMode, PresetDate } from './interface'; -import type { ContextOperationRefProps } from './PanelContext'; -import PanelContext from './PanelContext'; -import type { - PickerPanelBaseProps, - PickerPanelDateProps, - PickerPanelTimeProps, -} from './PickerPanel'; -import PickerPanel from './PickerPanel'; -import PickerTrigger from './PickerTrigger'; -import PresetPanel from './PresetPanel'; -import { formatValue, isEqual, parseValue } from './utils/dateUtil'; -import { toArray } from './utils/miscUtil'; -import { elementsContains, getDefaultFormat, getInputSize } from './utils/uiUtil'; -import { legacyPropsWarning } from './utils/warnUtil'; -import { getClearIcon } from './utils/getClearIcon'; - -export type PickerRefConfig = { - focus: () => void; - blur: () => void; -}; - -export type PickerSharedProps = { - dropdownClassName?: string; - dropdownAlign?: AlignType; - popupStyle?: React.CSSProperties; - transitionName?: string; - placeholder?: string; - allowClear?: boolean | { clearIcon?: React.ReactNode }; - autoFocus?: boolean; - disabled?: boolean; - tabIndex?: number; - open?: boolean; - defaultOpen?: boolean; - /** Make input readOnly to avoid popup keyboard in mobile */ - inputReadOnly?: boolean; - id?: string; - - presets?: PresetDate[]; - - // Value - format?: string | CustomFormat | (string | CustomFormat)[]; - - // Render - suffixIcon?: React.ReactNode; - /** - * Clear all icon - * @deprecated Please use `allowClear` instead - **/ - clearIcon?: React.ReactNode; - prevIcon?: React.ReactNode; - nextIcon?: React.ReactNode; - superPrevIcon?: React.ReactNode; - superNextIcon?: React.ReactNode; - getPopupContainer?: (node: HTMLElement) => HTMLElement; - panelRender?: (originPanel: React.ReactNode) => React.ReactNode; - inputRender?: (props: React.InputHTMLAttributes) => React.ReactNode; - - // Events - onChange?: (value: DateType | null, dateString: string) => void; - onOpenChange?: (open: boolean) => void; - onFocus?: React.FocusEventHandler; - onBlur?: React.FocusEventHandler; - onMouseDown?: React.MouseEventHandler; - onMouseUp?: React.MouseEventHandler; - onMouseEnter?: React.MouseEventHandler; - onMouseLeave?: React.MouseEventHandler; - onClick?: React.MouseEventHandler; - onContextMenu?: React.MouseEventHandler; - onKeyDown?: (event: React.KeyboardEvent, preventDefault: () => void) => void; - - /** - * Trigger `onChange` event when blur. - * If you don't want to user click `confirm` to trigger change, can use this. - */ - changeOnBlur?: boolean; - - // Internal - /** @private Internal usage, do not use in production mode!!! */ - pickerRef?: React.MutableRefObject; - - // WAI-ARIA - role?: string; - name?: string; - - autoComplete?: string; - direction?: 'ltr' | 'rtl'; -} & React.AriaAttributes; - -type OmitPanelProps = Omit< - Props, - 'onChange' | 'hideHeader' | 'pickerValue' | 'onPickerValueChange' ->; - -export type PickerBaseProps = {} & PickerSharedProps & - OmitPanelProps>; - -export type PickerDateProps = {} & PickerSharedProps & - OmitPanelProps>; - -export type PickerTimeProps = { - picker: 'time'; - /** - * @deprecated Please use `defaultValue` directly instead - * since `defaultOpenValue` will confuse user of current value status - */ - defaultOpenValue?: DateType; -} & PickerSharedProps & - Omit>, 'format'>; - -export type PickerProps = - | PickerBaseProps - | PickerDateProps - | PickerTimeProps; - -// TMP type to fit for ts 3.9.2 -type OmitType = Omit, 'picker'> & - Omit, 'picker'> & - Omit, 'picker'>; -type MergedPickerProps = { - picker?: PickerMode; -} & OmitType; - -function InnerPicker(props: PickerProps) { - const { - prefixCls = 'rc-picker', - id, - name, - tabIndex, - style, - className, - dropdownClassName, - dropdownAlign, - popupStyle, - transitionName, - generateConfig, - locale, - inputReadOnly, - allowClear, - autoFocus, - showTime, - picker = 'date', - format, - use12Hours, - value, - defaultValue, - presets, - open, - defaultOpen, - defaultOpenValue, - suffixIcon, - clearIcon, - disabled, - disabledDate, - placeholder, - getPopupContainer, - pickerRef, - panelRender, - onChange, - onOpenChange, - onFocus, - onBlur, - onMouseDown, - onMouseUp, - onMouseEnter, - onMouseLeave, - onContextMenu, - onClick, - onKeyDown, - onSelect, - direction, - autoComplete = 'off', - inputRender, - changeOnBlur, - } = props as MergedPickerProps; - - const inputRef = React.useRef(null); - - const needConfirmButton: boolean = (picker === 'date' && !!showTime) || picker === 'time'; - - const presetList = usePresets(presets); - - // ============================ Warning ============================ - if (process.env.NODE_ENV !== 'production') { - legacyPropsWarning(props); - } - - // ============================= State ============================= - const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours)); - - // Panel ref - const panelDivRef = React.useRef(null); - const inputDivRef = React.useRef(null); - const containerRef = React.useRef(null); - - // Real value - const [mergedValue, setInnerValue] = useMergedState(null, { - value, - defaultValue, - }); - - // Selected value - const [selectedValue, setSelectedValue] = React.useState(mergedValue); - - // Operation ref - const operationRef: React.MutableRefObject = - React.useRef(null); - - // Open - const [mergedOpen, triggerInnerOpen] = useMergedState(false, { - value: open, - defaultValue: defaultOpen, - postState: (postOpen) => (disabled ? false : postOpen), - onChange: (newOpen) => { - if (onOpenChange) { - onOpenChange(newOpen); - } - - if (!newOpen && operationRef.current && operationRef.current.onClose) { - operationRef.current.onClose(); - } - }, - }); - - // ============================= Text ============================== - const [valueTexts, firstValueText] = useValueTexts(selectedValue, { - formatList, - generateConfig, - locale, - }); - - const [text, triggerTextChange, resetText] = useTextValueMapping({ - valueTexts, - onTextChange: (newText) => { - const inputDate = parseValue(newText, { - locale, - formatList, - generateConfig, - }); - if (inputDate && (!disabledDate || !disabledDate(inputDate))) { - setSelectedValue(inputDate); - } - }, - }); - - // ============================ Trigger ============================ - const triggerChange = (newValue: DateType | null) => { - setSelectedValue(newValue); - setInnerValue(newValue); - - if (onChange && !isEqual(generateConfig, mergedValue, newValue)) { - onChange( - newValue, - newValue ? formatValue(newValue, { generateConfig, locale, format: formatList[0] }) : '', - ); - } - }; - - const triggerOpen = (newOpen: boolean) => { - if (disabled && newOpen) { - return; - } - - triggerInnerOpen(newOpen); - }; - - const forwardKeyDown = (e: React.KeyboardEvent) => { - if (mergedOpen && operationRef.current && operationRef.current.onKeyDown) { - // Let popup panel handle keyboard - return operationRef.current.onKeyDown(e); - } - - /* istanbul ignore next */ - /* eslint-disable no-lone-blocks */ - { - warning( - false, - 'Picker not correct forward KeyDown operation. Please help to fire issue about this.', - ); - return false; - } - }; - - const onInternalClick: React.MouseEventHandler = (...args) => { - onClick?.(...args); - - if (inputRef.current) { - inputRef.current.focus(); - triggerOpen(true); - } - }; - - // ============================= Input ============================= - const onInternalBlur: React.FocusEventHandler = (e) => { - if (changeOnBlur) { - triggerChange(selectedValue); - } - - onBlur?.(e); - }; - - const [inputProps, { focused, typing }] = usePickerInput({ - blurToCancel: needConfirmButton, - changeOnBlur, - open: mergedOpen, - value: text, - triggerOpen, - forwardKeyDown, - isClickOutside: (target) => - !elementsContains( - [panelDivRef.current, inputDivRef.current, containerRef.current], - target as HTMLElement, - ), - onSubmit: () => { - if ( - // When user typing disabledDate with keyboard and enter, this value will be empty - !selectedValue || - // Normal disabled check - (disabledDate && disabledDate(selectedValue)) - ) { - return false; - } - - triggerChange(selectedValue); - triggerOpen(false); - resetText(); - return true; - }, - onCancel: () => { - triggerOpen(false); - setSelectedValue(mergedValue); - resetText(); - }, - onKeyDown: (e, preventDefault) => { - onKeyDown?.(e, preventDefault); - }, - onFocus, - onBlur: onInternalBlur, - }); - - // ============================= Sync ============================== - // Close should sync back with text value - React.useEffect(() => { - if (!mergedOpen) { - setSelectedValue(mergedValue); - - if (!valueTexts.length || valueTexts[0] === '') { - triggerTextChange(''); - } else if (firstValueText !== text) { - resetText(); - } - } - }, [mergedOpen, valueTexts]); - - // Change picker should sync back with text value - React.useEffect(() => { - if (!mergedOpen) { - resetText(); - } - }, [picker]); - - // Sync innerValue with control mode - React.useEffect(() => { - // Sync select value - setSelectedValue(mergedValue); - }, [mergedValue]); - - // ============================ Private ============================ - if (pickerRef) { - pickerRef.current = { - focus: () => { - inputRef.current?.focus(); - }, - blur: () => { - inputRef.current?.blur(); - }, - }; - } - - const [hoverValue, onEnter, onLeave] = useHoverValue(text, { - formatList, - generateConfig, - locale, - }); - - // ============================= Panel ============================= - const panelProps = { - // Remove `picker` & `format` here since TimePicker is little different with other panel - ...(props as Omit, 'picker' | 'format'>), - className: undefined, - style: undefined, - pickerValue: undefined, - onPickerValueChange: undefined, - onChange: null, - }; - - let panelNode: React.ReactNode = ( -
          - { - triggerChange(nextValue); - triggerOpen(false); - }} - /> - - {...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); - }} - /> -
          - ); - - if (panelRender) { - panelNode = panelRender(panelNode); - } - - const panel = ( -
          { - e.preventDefault(); - }} - > - {panelNode} -
          - ); - - let suffixNode: React.ReactNode; - if (suffixIcon) { - suffixNode = ( - { - // Not lost focus - e.preventDefault(); - }} - > - {suffixIcon} - - ); - } - - // ============================ Clear ============================ - if (process.env.NODE_ENV !== 'production') { - warning( - !props.clearIcon, - '`clearIcon` will be removed in future. Please use `allowClear` instead.', - ); - } - - const mergedClearIcon: React.ReactNode = getClearIcon( - prefixCls, - allowClear, - clearIcon, - ); - - const clearNode: React.ReactNode = ( - { - e.preventDefault(); - e.stopPropagation(); - }} - onMouseUp={(e) => { - e.preventDefault(); - e.stopPropagation(); - triggerChange(null); - triggerOpen(false); - }} - className={`${prefixCls}-clear`} - role="button" - > - {mergedClearIcon} - - ); - - const mergedAllowClear = !!allowClear && mergedValue && !disabled; - - const mergedInputProps: React.InputHTMLAttributes & { ref: React.MutableRefObject } = { - id, - tabIndex, - disabled, - readOnly: inputReadOnly || typeof formatList[0] === 'function' || !typing, - value: hoverValue || text, - onChange: (e) => { - triggerTextChange(e.target.value); - }, - autoFocus, - placeholder, - ref: inputRef, - title: text, - ...inputProps, - size: getInputSize(picker, formatList[0], generateConfig), - name, - ...pickAttrs(props, { aria: true, data: true }), - autoComplete, - }; - - const inputNode: React.ReactNode = inputRender ? ( - inputRender(mergedInputProps) - ) : ( - - ); - - // ============================ Warning ============================ - if (process.env.NODE_ENV !== 'production') { - warning( - !defaultOpenValue, - '`defaultOpenValue` may confuse user for the current value status. Please use `defaultValue` instead.', - ); - } - - // ============================ Return ============================= - const onContextSelect = (date: DateType, type: 'key' | 'mouse' | 'submit') => { - if (type === 'submit' || (type !== 'key' && !needConfirmButton)) { - // triggerChange will also update selected values - triggerChange(date); - triggerOpen(false); - } - }; - const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - - return ( - - -
          -
          - {inputNode} - {suffixNode} - {mergedAllowClear && clearNode} -
          -
          -           -           - ); -} - -// Wrap with class component to enable pass generic with instance method -class Picker extends React.Component> { - pickerRef = React.createRef(); - - focus = () => { - if (this.pickerRef.current) { - this.pickerRef.current.focus(); - } - }; - - blur = () => { - if (this.pickerRef.current) { - this.pickerRef.current.blur(); - } - }; - - render() { - return ( - - {...this.props} - pickerRef={this.pickerRef as React.MutableRefObject} - /> - ); - } -} - -export default Picker; diff --git a/src/PickerPanel.tsx b/src/PickerPanel.tsx deleted file mode 100644 index 12ff7cea2..000000000 --- a/src/PickerPanel.tsx +++ /dev/null @@ -1,647 +0,0 @@ -/** - * Logic: - * When `mode` === `picker`, - * click will trigger `onSelect` (if value changed trigger `onChange` also). - * Panel change will not trigger `onSelect` but trigger `onPanelChange` - */ - -import classNames from 'classnames'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; -import KeyCode from 'rc-util/lib/KeyCode'; -import warning from 'rc-util/lib/warning'; -import * as React from 'react'; -import type { GenerateConfig } from './generate'; -import { useCellRender } from './hooks/useCellRender'; -import type { - CellRender, - Components, - DisabledTime, - Locale, - OnPanelChange, - PanelMode, - PanelRefProps, - PickerMode, -} from './interface'; -import PanelContext from './PanelContext'; -import DatePanel from './panels/DatePanel'; -import type { DateRender } from './panels/DatePanel/DateBody'; -import DatetimePanel from './panels/DatetimePanel'; -import DecadePanel from './panels/DecadePanel'; -import MonthPanel from './panels/MonthPanel'; -import { MONTH_COL_COUNT, type MonthCellRender } from './panels/MonthPanel/MonthBody'; -import QuarterPanel from './panels/QuarterPanel'; -import type { SharedTimeProps } from './panels/TimePanel'; -import TimePanel from './panels/TimePanel'; -import WeekPanel from './panels/WeekPanel'; -import YearPanel from './panels/YearPanel'; -import RangeContext from './RangeContext'; -import { isEqual, WEEK_DAY_COUNT } from './utils/dateUtil'; -import getExtraFooter from './utils/getExtraFooter'; -import getRanges from './utils/getRanges'; -import { getLowerBoundTime, setDateTime, setTime } from './utils/timeUtil'; -import { PickerModeMap } from './utils/uiUtil'; - -export type PickerPanelSharedProps = { - prefixCls?: string; - className?: string; - style?: React.CSSProperties; - /** @deprecated Will be removed in next big version. Please use `picker` instead */ - mode?: PanelMode; - tabIndex?: number; - - // Locale - locale: Locale; - generateConfig: GenerateConfig; - - // Value - value?: DateType | null; - defaultValue?: DateType; - /** [Legacy] Set default display picker view date */ - pickerValue?: DateType; - /** - * @deprecated please use `defaultValue` instead. - * Set default display picker view date - */ - defaultPickerValue?: DateType; - - // Date - disabledDate?: (date: DateType) => boolean; - - // Render - /** @deprecated use cellRender instead of dateRender */ - dateRender?: DateRender; - /** @deprecated use cellRender instead of monthCellRender */ - monthCellRender?: MonthCellRender; - renderExtraFooter?: (mode: PanelMode) => React.ReactNode; - - // Event - onSelect?: (value: DateType) => void; - onChange?: (value: DateType) => void; - onPanelChange?: OnPanelChange; - onMouseDown?: React.MouseEventHandler; - onOk?: (date: DateType) => void; - - direction?: 'ltr' | 'rtl'; - - /** @private This is internal usage. Do not use in your production env */ - hideHeader?: boolean; - /** @private This is internal usage. Do not use in your production env */ - onPickerValueChange?: (date: DateType) => void; - - /** @private Internal usage. Do not use in your production env */ - components?: Components; - cellRender?: CellRender; -}; - -export type PickerPanelBaseProps = { - picker: Exclude; - cellRender?: CellRender; -} & PickerPanelSharedProps; - -export type PickerPanelDateProps = { - picker?: 'date'; - showToday?: boolean; - showNow?: boolean; - - // Time - showTime?: boolean | SharedTimeProps; - disabledTime?: DisabledTime; - cellRender?: CellRender; -} & PickerPanelSharedProps; - -export type PickerPanelTimeProps = { - picker: 'time'; - cellRender?: CellRender; -} & PickerPanelSharedProps & - SharedTimeProps; - -export type PickerPanelProps = - | PickerPanelBaseProps - | PickerPanelDateProps - | PickerPanelTimeProps; - -// TMP type to fit for ts 3.9.2 -type OmitType = Omit, 'picker'> & - Omit, 'picker'> & - Omit, 'picker'>; -type MergedPickerPanelProps = { - picker?: PickerMode; -} & OmitType; - -// Calendar picker type -const CALENDAR_PANEL_MODE: PanelMode[] = ['date', 'month']; - -function PickerPanel(props: PickerPanelProps) { - const { - prefixCls = 'rc-picker', - className, - style, - locale, - generateConfig, - value, - defaultValue, - pickerValue, - defaultPickerValue, - disabledDate, - mode, - picker = 'date', - tabIndex = 0, - showNow, - showTime, - showToday, - renderExtraFooter, - hideHeader, - onSelect, - onChange, - onPanelChange, - onMouseDown, - onPickerValueChange, - onOk, - components, - direction, - hourStep = 1, - minuteStep = 1, - secondStep = 1, - dateRender, - monthCellRender, - cellRender, - } = props as MergedPickerPanelProps; - - const needConfirmButton: boolean = (picker === 'date' && !!showTime) || picker === 'time'; - - const isHourStepValid = 24 % hourStep === 0; - const isMinuteStepValid = 60 % minuteStep === 0; - const isSecondStepValid = 60 % secondStep === 0; - - // ============================ Warning ============================ - if (process.env.NODE_ENV !== 'production') { - warning(!value || generateConfig.isValidate(value), 'Invalidate date pass to `value`.'); - warning(!value || generateConfig.isValidate(value), 'Invalidate date pass to `defaultValue`.'); - warning(isHourStepValid, `\`hourStep\` ${hourStep} is invalid. It should be a factor of 24.`); - warning( - isMinuteStepValid, - `\`minuteStep\` ${minuteStep} is invalid. It should be a factor of 60.`, - ); - warning( - isSecondStepValid, - `\`secondStep\` ${secondStep} is invalid. It should be a factor of 60.`, - ); - warning( - !defaultPickerValue, - `'defaultPickerValue' is deprecated. Please use 'defaultValue' instead.`, - ); - warning(!dateRender, `'dateRender' is deprecated. Please use 'cellRender' instead.`); - warning(!monthCellRender, `'monthCellRender' is deprecated. Please use 'cellRender' instead.`); - } - - // ============================ State ============================= - - const panelContext = React.useContext(PanelContext); - const { operationRef, onSelect: onContextSelect, hideRanges, defaultOpenValue } = panelContext; - - const { inRange, panelPosition, rangedValue, hoverRangedValue } = React.useContext(RangeContext); - const panelRef = React.useRef({}); - - // Handle init logic - const initRef = React.useRef(true); - - // Value - const [mergedValue, setInnerValue] = useMergedState(null, { - value, - defaultValue, - postState: (val) => { - if (!val && defaultOpenValue && picker === 'time') { - return defaultOpenValue; - } - return val; - }, - }); - - // View date control - const [viewDate, setInnerViewDate] = useMergedState(null, { - value: pickerValue, - defaultValue: defaultPickerValue || mergedValue, - postState: (date) => { - const now = generateConfig.getNow(); - if (!date) { - return now; - } - // When value is null and set showTime - if (!mergedValue && showTime) { - const defaultDateObject = - typeof showTime === 'object' ? showTime.defaultValue : defaultValue; - return setDateTime( - generateConfig, - Array.isArray(date) ? date[0] : date, - defaultDateObject || now, - ); - } - return Array.isArray(date) ? date[0] : date; - }, - }); - - const setViewDate = (date: DateType) => { - setInnerViewDate(date); - if (onPickerValueChange) { - onPickerValueChange(date); - } - }; - - // Panel control - const getInternalNextMode = (nextMode: PanelMode): PanelMode => { - const getNextMode = PickerModeMap[picker!]; - if (getNextMode) { - return getNextMode(nextMode); - } - - return nextMode; - }; - - // Save panel is changed from which panel - const [mergedMode, setInnerMode] = useMergedState( - () => { - if (picker === 'time') { - return 'time'; - } - return getInternalNextMode('date'); - }, - { - value: mode, - }, - ); - - React.useEffect(() => { - setInnerMode(picker); - }, [picker]); - - const [sourceMode, setSourceMode] = React.useState(() => mergedMode); - - const onInternalPanelChange = (newMode: PanelMode | null, viewValue: DateType) => { - const nextMode = getInternalNextMode(newMode || mergedMode); - setSourceMode(mergedMode); - setInnerMode(nextMode); - - if (onPanelChange && (mergedMode !== nextMode || isEqual(generateConfig, viewDate, viewDate))) { - onPanelChange(viewValue, nextMode); - } - }; - - const triggerSelect = ( - date: DateType, - type: 'key' | 'mouse' | 'submit', - forceTriggerSelect: boolean = false, - ) => { - if (mergedMode === picker || forceTriggerSelect) { - setInnerValue(date); - - if (onSelect) { - onSelect(date); - } - - if (onContextSelect) { - onContextSelect(date, type); - } - - if (onChange && !isEqual(generateConfig, date, mergedValue) && !disabledDate?.(date)) { - onChange(date); - } - } - }; - - const isSelectable = (key) => { - if (CALENDAR_PANEL_MODE.includes(mergedMode)) { - let date; - let operationFnc; - const isDateMode = mergedMode === 'date'; - if (key === KeyCode.PAGE_UP || key === KeyCode.PAGE_DOWN) { - operationFnc = isDateMode ? generateConfig.addMonth : generateConfig.addYear; - } else { - operationFnc = isDateMode ? generateConfig.addDate : generateConfig.addMonth; - } - - switch (key) { - case KeyCode.LEFT: - case KeyCode.PAGE_UP: - date = operationFnc(viewDate, -1); - break; - case KeyCode.RIGHT: - case KeyCode.PAGE_DOWN: - date = operationFnc(viewDate, 1); - break; - case KeyCode.UP: - case KeyCode.DOWN: - date = operationFnc( - viewDate, - Number( - `${key === KeyCode.UP ? '-' : ''}${isDateMode ? WEEK_DAY_COUNT : MONTH_COL_COUNT}`, - ), - ); - break; - } - - if (date) { - return !disabledDate?.(date); - } - } - return true; - }; - - // ========================= Interactive ========================== - const onInternalKeyDown = (e: React.KeyboardEvent) => { - if (panelRef.current && panelRef.current.onKeyDown) { - let selectable = true; - const { which } = e; - if ( - [ - KeyCode.LEFT, - KeyCode.RIGHT, - KeyCode.UP, - KeyCode.DOWN, - KeyCode.PAGE_UP, - KeyCode.PAGE_DOWN, - KeyCode.ENTER, - ].includes(which) - ) { - e.preventDefault(); - if (which !== KeyCode.ENTER && tabIndex === 0) { - selectable = isSelectable(which); - } - } - - // Cannot use keyboard to select disabled date - if (selectable) { - return panelRef.current.onKeyDown(e); - } - } - - /* istanbul ignore next */ - /* eslint-disable no-lone-blocks */ - { - warning( - false, - 'Panel not correct handle keyDown event. Please help to fire issue about this.', - ); - return false; - } - /* eslint-enable no-lone-blocks */ - }; - - const onInternalBlur: React.FocusEventHandler = (e) => { - if (panelRef.current && panelRef.current.onBlur) { - panelRef.current.onBlur(e); - } - }; - - if (operationRef && panelPosition !== 'right') { - operationRef.current = { - onKeyDown: onInternalKeyDown, - onClose: () => { - if (panelRef.current && panelRef.current.onClose) { - panelRef.current.onClose(); - } - }, - }; - } - - // ============================ Effect ============================ - React.useEffect(() => { - if (value && !initRef.current) { - setInnerViewDate(value); - } - }, [value]); - - React.useEffect(() => { - initRef.current = false; - }, []); - - // ============================ Panels ============================ - let panelNode: React.ReactNode; - - const mergedCellRender = useCellRender({ - cellRender, - monthCellRender, - dateRender, - }); - const pickerProps = { - ...(props as MergedPickerPanelProps), - cellRender: mergedCellRender, - operationRef: panelRef, - prefixCls, - viewDate, - value: mergedValue, - onViewDateChange: setViewDate, - sourceMode, - onPanelChange: onInternalPanelChange, - disabledDate, - }; - delete pickerProps.onChange; - delete pickerProps.onSelect; - - switch (mergedMode) { - case 'decade': - panelNode = ( - - {...pickerProps} - onSelect={(date, type) => { - setViewDate(date); - triggerSelect(date, type); - }} - /> - ); - break; - - case 'year': - panelNode = ( - - {...pickerProps} - onSelect={(date, type) => { - setViewDate(date); - triggerSelect(date, type); - }} - /> - ); - break; - - case 'month': - panelNode = ( - - {...pickerProps} - onSelect={(date, type) => { - setViewDate(date); - triggerSelect(date, type); - }} - /> - ); - break; - - case 'quarter': - panelNode = ( - - {...pickerProps} - onSelect={(date, type) => { - setViewDate(date); - triggerSelect(date, type); - }} - /> - ); - break; - - case 'week': - panelNode = ( - - {...pickerProps} - onSelect={(date, type) => { - setViewDate(date); - triggerSelect(date, type); - }} - /> - ); - break; - - case 'time': - delete pickerProps.showTime; - panelNode = ( - - {...pickerProps} - {...(typeof showTime === 'object' ? showTime : null)} - onSelect={(date, type) => { - setViewDate(date); - triggerSelect(date, type); - }} - /> - ); - break; - - default: - if (showTime) { - panelNode = ( - - {...pickerProps} - onSelect={(date, type) => { - setViewDate(date); - triggerSelect(date, type); - }} - /> - ); - } else { - panelNode = ( - - {...pickerProps} - onSelect={(date, type) => { - setViewDate(date); - triggerSelect(date, type); - }} - /> - ); - } - } - - // ============================ Footer ============================ - let extraFooter: React.ReactNode; - let rangesNode: React.ReactNode; - - const onNow = () => { - const now = generateConfig.getNow(); - const lowerBoundTime = getLowerBoundTime( - generateConfig.getHour(now), - generateConfig.getMinute(now), - generateConfig.getSecond(now), - isHourStepValid ? hourStep : 1, - isMinuteStepValid ? minuteStep : 1, - isSecondStepValid ? secondStep : 1, - ); - const adjustedNow = setTime( - generateConfig, - now, - lowerBoundTime[0], // hour - lowerBoundTime[1], // minute - lowerBoundTime[2], // second - ); - triggerSelect(adjustedNow, 'submit'); - }; - - if (!hideRanges) { - extraFooter = getExtraFooter(prefixCls, mergedMode, renderExtraFooter); - - // This content is not displayed when the header switches year and month - if (showTime && mergedMode !== 'date') { - rangesNode = null; - } else { - rangesNode = getRanges({ - prefixCls, - components, - needConfirmButton, - okDisabled: !mergedValue || (disabledDate && disabledDate(mergedValue)), - locale, - showNow, - onNow: needConfirmButton && onNow, - onOk: () => { - if (mergedValue) { - triggerSelect(mergedValue, 'submit', true); - if (onOk) { - onOk(mergedValue); - } - } - }, - }); - } - } - - let todayNode: React.ReactNode; - if (showToday && mergedMode === 'date' && picker === 'date' && !showTime) { - const now = generateConfig.getNow(); - const todayCls = `${prefixCls}-today-btn`; - const disabled = disabledDate && disabledDate(now); - todayNode = ( - { - if (!disabled) { - triggerSelect(now, 'mouse', true); - } - }} - > - {locale.today} - - ); - } - - return ( - -
          - {panelNode} - {extraFooter || rangesNode || todayNode ? ( -
          - {extraFooter} - {rangesNode} - {todayNode} -
          - ) : null} -
          -           - ); -} - -export default PickerPanel; -/* eslint-enable */ diff --git a/src/PickerTrigger.tsx b/src/PickerTrigger.tsx deleted file mode 100644 index 37d328333..000000000 --- a/src/PickerTrigger.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import * as React from 'react'; -import classNames from 'classnames'; -import Trigger from '@rc-component/trigger'; -import type { AlignType } from '@rc-component/trigger/lib/interface'; - -const BUILT_IN_PLACEMENTS = { - bottomLeft: { - points: ['tl', 'bl'], - offset: [0, 4], - overflow: { - adjustX: 1, - adjustY: 1, - }, - }, - bottomRight: { - points: ['tr', 'br'], - offset: [0, 4], - overflow: { - adjustX: 1, - adjustY: 1, - }, - }, - topLeft: { - points: ['bl', 'tl'], - offset: [0, -4], - overflow: { - adjustX: 0, - adjustY: 1, - }, - }, - topRight: { - points: ['br', 'tr'], - offset: [0, -4], - overflow: { - adjustX: 0, - adjustY: 1, - }, - }, -}; - -type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; - -export type PickerTriggerProps = { - prefixCls: string; - visible: boolean; - popupElement: React.ReactElement; - popupStyle?: React.CSSProperties; - children: React.ReactElement; - dropdownClassName?: string; - transitionName?: string; - getPopupContainer?: (node: HTMLElement) => HTMLElement; - dropdownAlign?: AlignType; - range?: boolean; - popupPlacement?: Placement; - direction?: 'ltr' | 'rtl'; -}; - -function PickerTrigger({ - prefixCls, - popupElement, - popupStyle, - visible, - dropdownClassName, - dropdownAlign, - transitionName, - getPopupContainer, - children, - range, - popupPlacement, - direction, -}: PickerTriggerProps) { - const dropdownPrefixCls = `${prefixCls}-dropdown`; - - const getPopupPlacement = () => { - if (popupPlacement !== undefined) { - return popupPlacement; - } - return direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - }; - - return ( - - {children} - - ); -} - -export default PickerTrigger; diff --git a/src/PresetPanel.tsx b/src/PresetPanel.tsx deleted file mode 100644 index 8665aa837..000000000 --- a/src/PresetPanel.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import type { PresetDate } from './interface'; -import { executeValue } from './utils/miscUtil'; - -export interface PresetPanelProps { - prefixCls: string; - presets: PresetDate[]; - onClick: (value: T) => void; - onHover?: (value: T) => void; -} - -export default function PresetPanel(props: PresetPanelProps) { - const { prefixCls, presets, onClick, onHover } = props; - - if (!presets.length) { - return null; - } - - return ( -
          -
            - {presets.map(({ label, value }, index) => ( -
          • onClick?.(executeValue(value))} - onMouseEnter={() => onHover?.(executeValue(value))} - onMouseLeave={() => onHover?.(null)} - > - {label} -
            • - ))} -
          -
          - ); -} diff --git a/src/RangeContext.tsx b/src/RangeContext.tsx deleted file mode 100644 index f3747de38..000000000 --- a/src/RangeContext.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import type { NullableDateType, RangeValue } from './interface'; - -export type RangeContextProps = { - /** - * Set displayed range value style. - * Panel only has one value, this is only style effect. - */ - rangedValue?: [NullableDateType, NullableDateType] | null; - hoverRangedValue?: RangeValue; - inRange?: boolean; - panelPosition?: 'left' | 'right' | false; -}; - -const RangeContext = React.createContext({}); - -export default RangeContext; diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx deleted file mode 100644 index 01cae0def..000000000 --- a/src/RangePicker.tsx +++ /dev/null @@ -1,1270 +0,0 @@ -import classNames from 'classnames'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; -import pickAttrs from 'rc-util/lib/pickAttrs'; -import raf from 'rc-util/lib/raf'; -import warning from 'rc-util/lib/warning'; -import * as React from 'react'; -import { useEffect, useRef, useState } from 'react'; -import type { PickerPanelProps } from '.'; -import type { GenerateConfig } from './generate'; -import { useCellRender } from './hooks/useCellRender'; -import useHoverValue from './hooks/useHoverValue'; -import usePickerInput from './hooks/usePickerInput'; -import usePresets from './hooks/usePresets'; -import useRangeDisabled from './hooks/useRangeDisabled'; -import useRangeOpen from './hooks/useRangeOpen'; -import useRangeViewDates from './hooks/useRangeViewDates'; -import useTextValueMapping from './hooks/useTextValueMapping'; -import useValueTexts from './hooks/useValueTexts'; -import type { - CellRender, - CellRenderInfo, - DisabledTimes, - EventValue, - PanelMode, - PickerMode, - PresetDate, - RangeValue, -} from './interface'; -import type { ContextOperationRefProps } from './PanelContext'; -import PanelContext from './PanelContext'; -import type { SharedTimeProps } from './panels/TimePanel'; -import type { PickerBaseProps, PickerDateProps, PickerRefConfig, PickerTimeProps } from './Picker'; -import PickerPanel from './PickerPanel'; -import PickerTrigger from './PickerTrigger'; -import PresetPanel from './PresetPanel'; -import RangeContext from './RangeContext'; -import { - formatValue, - getClosingViewDate, - isEqual, - isSameDate, - isSameQuarter, - isSameWeek, - parseValue, -} from './utils/dateUtil'; -import { getClearIcon } from './utils/getClearIcon'; -import getExtraFooter from './utils/getExtraFooter'; -import getRanges from './utils/getRanges'; -import { getValue, toArray, updateValues } from './utils/miscUtil'; -import { elementsContains, getDefaultFormat, getInputSize } from './utils/uiUtil'; -import { legacyPropsWarning } from './utils/warnUtil'; - -function reorderValues( - values: RangeValue, - generateConfig: GenerateConfig, -): RangeValue { - if (values && values[0] && values[1] && generateConfig.isAfter(values[0], values[1])) { - return [values[1], values[0]]; - } - - return values; -} - -function canValueTrigger( - value: EventValue, - index: number, - disabled: [boolean, boolean], - allowEmpty?: [boolean, boolean] | null, -): boolean { - if (value) { - return true; - } - - if (allowEmpty && allowEmpty[index]) { - return true; - } - - if (disabled[(index + 1) % 2]) { - return true; - } - - return false; -} - -export type RangeType = 'start' | 'end'; - -export type RangeInfo = { - range: RangeType; -}; - -export type RangeDateRender = ( - currentDate: DateType, - today: DateType, - info: RangeInfo, -) => React.ReactNode; - -export type RangePickerSharedProps = { - id?: string; - value?: RangeValue; - defaultValue?: RangeValue; - /** - * @deprecated please use `defaultValue` instead. - * Set default display picker view date - */ - defaultPickerValue?: [DateType, DateType]; - placeholder?: [string, string]; - disabled?: boolean | [boolean, boolean]; - disabledTime?: (date: EventValue, type: RangeType) => DisabledTimes; - presets?: PresetDate, null>>[]; - /** @deprecated Please use `presets` instead */ - ranges?: Record< - string, - Exclude, null> | (() => Exclude, null>) - >; - separator?: React.ReactNode; - allowEmpty?: [boolean, boolean]; - mode?: [PanelMode, PanelMode]; - onChange?: (values: RangeValue, formatString: [string, string]) => void; - onCalendarChange?: ( - values: RangeValue, - formatString: [string, string], - info: RangeInfo, - ) => void; - onPanelChange?: (values: RangeValue, modes: [PanelMode, PanelMode]) => void; - onFocus?: React.FocusEventHandler; - onBlur?: React.FocusEventHandler; - onMouseDown?: React.MouseEventHandler; - onMouseUp?: React.MouseEventHandler; - onMouseEnter?: React.MouseEventHandler; - onMouseLeave?: React.MouseEventHandler; - onClick?: React.MouseEventHandler; - onOk?: (dates: RangeValue) => void; - direction?: 'ltr' | 'rtl'; - autoComplete?: string; - /** @private Internal control of active picker. Do not use since it's private usage */ - activePickerIndex?: 0 | 1; - /** @deprecated use cellRender instead of dateRender */ - dateRender?: RangeDateRender; - cellRender?: CellRender; - panelRender?: (originPanel: React.ReactNode) => React.ReactNode; - /** - * Trigger `onChange` event when blur. - * If you don't want to user click `confirm` to trigger change, can use this. - */ - changeOnBlur?: boolean; -}; - -type OmitPickerProps = Omit< - Props, - | 'value' - | 'defaultValue' - | 'defaultPickerValue' - | 'placeholder' - | 'disabled' - | 'disabledTime' - | 'showToday' - | 'showTime' - | 'mode' - | 'onChange' - | 'onSelect' - | 'onPanelChange' - | 'pickerValue' - | 'onPickerValueChange' - | 'onOk' - | 'cellRender' - | 'presets' ->; - -type RangeShowTimeObject = Omit, 'defaultValue'> & { - defaultValue?: DateType[]; -}; - -export type RangePickerBaseProps = {} & RangePickerSharedProps & - OmitPickerProps>; - -export type RangePickerDateProps = { - showTime?: boolean | RangeShowTimeObject; -} & RangePickerSharedProps & - OmitPickerProps>; - -export type RangePickerTimeProps = { - order?: boolean; -} & RangePickerSharedProps & - OmitPickerProps>; - -export type RangePickerProps = - | RangePickerBaseProps - | RangePickerDateProps - | RangePickerTimeProps; - -// TMP type to fit for ts 3.9.2 -type OmitType = Omit, 'picker' | 'presets'> & - Omit, 'picker'> & - Omit, 'picker'>; - -type MergedRangePickerProps = { - picker?: PickerMode; -} & OmitType; - -function InnerRangePicker(props: RangePickerProps) { - const { - prefixCls = 'rc-picker', - id, - style, - className, - popupStyle, - dropdownClassName, - transitionName, - dropdownAlign, - getPopupContainer, - generateConfig, - locale, - placeholder, - autoFocus, - disabled, - format, - picker = 'date', - showTime, - use12Hours, - separator = '~', - value, - defaultValue, - defaultPickerValue, - open, - defaultOpen, - disabledDate, - disabledTime, - dateRender, - monthCellRender, - cellRender, - panelRender, - presets, - ranges, - allowEmpty, - allowClear, - suffixIcon, - clearIcon, - pickerRef, - inputReadOnly, - mode, - renderExtraFooter, - onChange, - onOpenChange, - onPanelChange, - onCalendarChange, - onFocus, - onBlur, - onMouseDown, - onMouseUp, - onMouseEnter, - onMouseLeave, - onClick, - onOk, - onKeyDown, - components, - order, - direction, - activePickerIndex, - autoComplete = 'off', - changeOnBlur, - } = props as MergedRangePickerProps; - - const needConfirmButton: boolean = (picker === 'date' && !!showTime) || picker === 'time'; - - const containerRef = useRef(null); - const panelDivRef = useRef(null); - const startInputDivRef = useRef(null); - const endInputDivRef = useRef(null); - const separatorRef = useRef(null); - const startInputRef = useRef(null); - const endInputRef = useRef(null); - const arrowRef = useRef(null); - - // ============================ Warning ============================ - if (process.env.NODE_ENV !== 'production') { - legacyPropsWarning(props); - } - - // ============================= Misc ============================== - const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours)); - - const formatDateValue = (values: RangeValue, index: 0 | 1) => - values && values[index] - ? formatValue(values[index], { generateConfig, locale, format: formatList[0] }) - : ''; - - // Operation ref - const operationRef: React.MutableRefObject = - useRef(null); - - const mergedDisabled = React.useMemo<[boolean, boolean]>(() => { - if (Array.isArray(disabled)) { - return disabled; - } - - return [disabled || false, disabled || false]; - }, [disabled]); - - // ============================= Value ============================= - const [mergedValue, setInnerValue] = useMergedState>(null, { - value, - defaultValue, - postState: (values) => - picker === 'time' && !order ? values : reorderValues(values, generateConfig), - }); - - // =========================== View Date =========================== - // Config view panel - const [getViewDate, setViewDate] = useRangeViewDates({ - values: mergedValue, - picker, - defaultDates: defaultPickerValue, - generateConfig, - }); - - // ========================= Select Values ========================= - const [selectedValue, setSelectedValue] = useMergedState(mergedValue, { - postState: (values) => { - let postValues = values; - - if (mergedDisabled[0] && mergedDisabled[1]) { - return postValues; - } - - // Fill disabled unit - for (let i = 0; i < 2; i += 1) { - if ( - mergedDisabled[i] && - !postValues && - !getValue(postValues, i) && - !getValue(allowEmpty, i) - ) { - postValues = updateValues(postValues, generateConfig.getNow(), i); - } - } - return postValues; - }, - }); - - // ============================= Modes ============================= - const [mergedModes, setInnerModes] = useMergedState<[PanelMode, PanelMode]>([picker, picker], { - value: mode, - }); - - useEffect(() => { - setInnerModes([picker, picker]); - }, [picker]); - - const triggerModesChange = (modes: [PanelMode, PanelMode], values: RangeValue) => { - setInnerModes(modes); - - if (onPanelChange) { - onPanelChange(values, modes); - } - }; - - // ============================= Open ============================== - const [mergedOpen, mergedActivePickerIndex, firstTimeOpen, triggerOpen] = useRangeOpen( - defaultOpen, - open, - activePickerIndex, - changeOnBlur, - needConfirmButton, - startInputRef, - endInputRef, - getValue(selectedValue, 0), - getValue(selectedValue, 1), - mergedDisabled, - onOpenChange, - ); - - const startOpen = mergedOpen && mergedActivePickerIndex === 0; - const endOpen = mergedOpen && mergedActivePickerIndex === 1; - - // ========================= Disable Date ========================== - const [disabledStartDate, disabledEndDate] = useRangeDisabled( - { - picker, - selectedValue, - locale, - disabled: mergedDisabled, - disabledDate, - generateConfig, - }, - !mergedOpen || firstTimeOpen, - ); - - // ============================= Popup ============================= - // Popup min width - const [popupMinWidth, setPopupMinWidth] = useState(0); - useEffect(() => { - if (!mergedOpen && containerRef.current) { - setPopupMinWidth(containerRef.current.offsetWidth); - } - }, [mergedOpen]); - - // ============================ Trigger ============================ - function triggerOpenAndFocus(index: 0 | 1) { - triggerOpen(true, index, 'open'); - // Use setTimeout to make sure panel DOM exists - raf(() => { - const inputRef = [startInputRef, endInputRef][index]; - inputRef.current?.focus(); - }, 0); - } - - function triggerChange( - newValue: RangeValue, - sourceIndex: 0 | 1, - triggerCalendarChangeOnly?: boolean, - ) { - let values = newValue; - let startValue = getValue(values, 0); - let endValue = getValue(values, 1); - - // >>>>> Format start & end values - if (startValue && endValue && generateConfig.isAfter(startValue, endValue)) { - if ( - // WeekPicker only compare week - (picker === 'week' && !isSameWeek(generateConfig, locale.locale, startValue, endValue)) || - // QuotaPicker only compare week - (picker === 'quarter' && !isSameQuarter(generateConfig, startValue, endValue)) || - // Other non-TimePicker compare date - (picker !== 'week' && - picker !== 'quarter' && - picker !== 'time' && - !isSameDate(generateConfig, startValue, endValue)) - ) { - // Clean up end date when start date is after end date - if (sourceIndex === 0) { - values = [startValue, null]; - endValue = null; - } else { - startValue = null; - values = [null, endValue]; - } - } else if (picker !== 'time' || order !== false) { - // Reorder when in same date - values = reorderValues(values, generateConfig); - } - } - - setSelectedValue(values); - - const startStr = formatDateValue(values, 0); - const endStr = formatDateValue(values, 1); - - if (onCalendarChange) { - const info: RangeInfo = { range: sourceIndex === 0 ? 'start' : 'end' }; - - onCalendarChange(values, [startStr, endStr], info); - } - - if (!triggerCalendarChangeOnly) { - // >>>>> Trigger `onChange` event - const canStartValueTrigger = canValueTrigger(startValue, 0, mergedDisabled, allowEmpty); - const canEndValueTrigger = canValueTrigger(endValue, 1, mergedDisabled, allowEmpty); - const canTrigger = values === null || (canStartValueTrigger && canEndValueTrigger); - if (canTrigger) { - // Trigger onChange only when value is validate - setInnerValue(values); - if ( - onChange && - (!isEqual(generateConfig, getValue(mergedValue, 0), startValue) || - !isEqual(generateConfig, getValue(mergedValue, 1), endValue)) - ) { - onChange(values, [startStr, endStr]); - } - } - } - } - - const forwardKeyDown = (e: React.KeyboardEvent) => { - if (mergedOpen && operationRef.current && operationRef.current.onKeyDown) { - // Let popup panel handle keyboard - return operationRef.current.onKeyDown(e); - } - - /* istanbul ignore next */ - /* eslint-disable no-lone-blocks */ - { - warning( - false, - 'Picker not correct forward KeyDown operation. Please help to fire issue about this.', - ); - return false; - } - }; - - // ============================= Text ============================== - const sharedTextHooksProps = { - formatList, - generateConfig, - locale, - }; - - const [startValueTexts, firstStartValueText] = useValueTexts( - getValue(selectedValue, 0), - sharedTextHooksProps, - ); - - const [endValueTexts, firstEndValueText] = useValueTexts( - getValue(selectedValue, 1), - sharedTextHooksProps, - ); - - const onTextChange = (newText: string, index: 0 | 1) => { - const inputDate = parseValue(newText, { - locale, - formatList, - generateConfig, - }); - - const disabledFunc = index === 0 ? disabledStartDate : disabledEndDate; - - if (inputDate && !disabledFunc(inputDate)) { - setSelectedValue(updateValues(selectedValue, inputDate, index)); - setViewDate(inputDate, index); - } - }; - - const [startText, triggerStartTextChange, resetStartText] = useTextValueMapping({ - valueTexts: startValueTexts, - onTextChange: (newText) => onTextChange(newText, 0), - }); - - const [endText, triggerEndTextChange, resetEndText] = useTextValueMapping({ - valueTexts: endValueTexts, - onTextChange: (newText) => onTextChange(newText, 1), - }); - - const [rangeHoverValue, setRangeHoverValue] = useState>(null); - - // ========================== Hover Range ========================== - const [hoverRangedValue, setHoverRangedValue] = useState>(null); - - const [startHoverValue, onStartEnter, onStartLeave] = useHoverValue(startText, { - formatList, - generateConfig, - locale, - }); - - const [endHoverValue, onEndEnter, onEndLeave] = useHoverValue(endText, { - formatList, - generateConfig, - locale, - }); - - const onDateMouseEnter = (date: DateType) => { - setHoverRangedValue(updateValues(selectedValue, date, mergedActivePickerIndex)); - if (mergedActivePickerIndex === 0) { - onStartEnter(date); - } else { - onEndEnter(date); - } - }; - - const onDateMouseLeave = () => { - setHoverRangedValue(updateValues(selectedValue, null, mergedActivePickerIndex)); - if (mergedActivePickerIndex === 0) { - onStartLeave(); - } else { - onEndLeave(); - } - }; - - // ============================= Input ============================= - // We call effect to update `delayOpen` here since - // when popup closed and input focused, should not trigger change when click another input - const [delayOpen, setDelayOpen] = React.useState(mergedOpen); - React.useEffect(() => { - setDelayOpen(mergedOpen); - }, [mergedOpen]); - - const onInternalBlur: React.FocusEventHandler = (e) => { - if (delayOpen) { - if (needConfirmButton) { - // when in dateTime mode, switching between two date input fields will trigger onCalendarChange. - // when onBlur is triggered, the input field has already switched, - // so it's necessary to obtain the value of the previous input field here. - const needTriggerIndex = mergedActivePickerIndex ? 0 : 1; - const selectedIndexValue = getValue(selectedValue, needTriggerIndex); - - if (selectedIndexValue) { - triggerChange(selectedValue, needTriggerIndex, true); - } - } else if (changeOnBlur) { - const selectedIndexValue = getValue(selectedValue, mergedActivePickerIndex); - - if (selectedIndexValue) { - triggerChange(selectedValue, mergedActivePickerIndex); - } - } - } - - return onBlur?.(e); - }; - - const getSharedInputHookProps = (index: 0 | 1, resetText: () => void) => ({ - blurToCancel: !changeOnBlur && needConfirmButton, - changeOnBlur, - forwardKeyDown, - onBlur: onInternalBlur, - isClickOutside: (target: EventTarget | null) => { - const elementsRefs = [startInputDivRef.current, endInputDivRef.current, containerRef.current]; - return !elementsContains( - [ - // Filter the ref of the currently selected input to trigger the onBlur event of another input. - ...(needConfirmButton ? [elementsRefs[mergedActivePickerIndex]] : elementsRefs), - panelDivRef.current, - ], - target as HTMLElement, - ); - }, - onFocus: (e: React.FocusEvent) => { - if (onFocus) { - onFocus(e); - } - }, - triggerOpen: (newOpen: boolean) => { - if (newOpen) { - triggerOpen(newOpen, index, 'open'); - } else { - triggerOpen( - newOpen, - // Close directly if no selected value provided - getValue(selectedValue, index) ? index : false, - 'blur', - ); - } - }, - onSubmit: () => { - if ( - // When user typing disabledDate with keyboard and enter, this value will be empty - !selectedValue || - // Normal disabled check - (disabledDate && disabledDate(selectedValue[index])) - ) { - return false; - } - - triggerChange(selectedValue, index); - resetText(); - - // Switch - triggerOpen(false, mergedActivePickerIndex, 'confirm'); - }, - onCancel: () => { - triggerOpen(false, index, 'cancel'); - setSelectedValue(mergedValue); - resetText(); - }, - }); - - const sharedPickerInput = { - onKeyDown: (e, preventDefault) => { - onKeyDown?.(e, preventDefault); - }, - }; - - const [startInputProps, { focused: startFocused, typing: startTyping }] = usePickerInput({ - ...getSharedInputHookProps(0, resetStartText), - open: startOpen, - value: startText, - ...sharedPickerInput, - }); - - const [endInputProps, { focused: endFocused, typing: endTyping }] = usePickerInput({ - ...getSharedInputHookProps(1, resetEndText), - open: endOpen, - value: endText, - ...sharedPickerInput, - }); - - // ========================== Click Picker ========================== - const onPickerClick = (e: React.MouseEvent) => { - // When click inside the picker & outside the picker's input elements - // the panel should still be opened - if (onClick) { - onClick(e); - } - if ( - !mergedOpen && - !startInputRef.current.contains(e.target as Node) && - !endInputRef.current.contains(e.target as Node) - ) { - if (!mergedDisabled[0]) { - triggerOpenAndFocus(0); - } else if (!mergedDisabled[1]) { - triggerOpenAndFocus(1); - } - } - }; - - const onPickerMouseDown = (e: React.MouseEvent) => { - // shouldn't affect input elements if picker is active - if (onMouseDown) { - onMouseDown(e); - } - if ( - mergedOpen && - (startFocused || endFocused) && - !startInputRef.current.contains(e.target as Node) && - !endInputRef.current.contains(e.target as Node) - ) { - e.preventDefault(); - } - }; - - // ============================= Sync ============================== - // Close should sync back with text value - const startStr = - mergedValue && mergedValue[0] - ? formatValue(mergedValue[0], { - locale, - format: 'YYYYMMDDHHmmss', - generateConfig, - }) - : ''; - const endStr = - mergedValue && mergedValue[1] - ? formatValue(mergedValue[1], { - locale, - format: 'YYYYMMDDHHmmss', - generateConfig, - }) - : ''; - - useEffect(() => { - if (!mergedOpen) { - setSelectedValue(mergedValue); - - if (!startValueTexts.length || startValueTexts[0] === '') { - triggerStartTextChange(''); - } else if (firstStartValueText !== startText) { - resetStartText(); - } - if (!endValueTexts.length || endValueTexts[0] === '') { - triggerEndTextChange(''); - } else if (firstEndValueText !== endText) { - resetEndText(); - } - } - }, [mergedOpen, startValueTexts, endValueTexts]); - - // Sync innerValue with control mode - useEffect(() => { - setSelectedValue(mergedValue); - }, [startStr, endStr]); - - const mergedCellRender: CellRender = useCellRender({ - cellRender, - monthCellRender, - dateRender, - }); - - const panelDateRender = React.useMemo(() => { - if (!mergedCellRender) return undefined; - return (date: DateType, info: CellRenderInfo) => - mergedCellRender(date, { ...info, range: mergedActivePickerIndex ? 'end' : 'start' }); - }, [mergedActivePickerIndex, mergedCellRender]); - - // ============================ Warning ============================ - if (process.env.NODE_ENV !== 'production') { - if ( - value && - Array.isArray(disabled) && - ((getValue(disabled, 0) && !getValue(value, 0)) || - (getValue(disabled, 1) && !getValue(value, 1))) - ) { - warning( - false, - '`disabled` should not set with empty `value`. You should set `allowEmpty` or `value` instead.', - ); - } - warning(!dateRender, `'dateRender' is deprecated. Please use 'cellRender' instead.`); - warning(!monthCellRender, `'monthCellRender' is deprecated. Please use 'cellRender' instead.`); - warning(!clearIcon, '`clearIcon` will be removed in future. Please use `allowClear` instead.'); - } - - // ============================ Private ============================ - if (pickerRef) { - pickerRef.current = { - focus: () => { - if (startInputRef.current) { - startInputRef.current.focus(); - } - }, - blur: () => { - if (startInputRef.current) { - startInputRef.current.blur(); - } - if (endInputRef.current) { - endInputRef.current.blur(); - } - }, - }; - } - - // ============================ Ranges ============================= - const presetList = usePresets(presets, ranges); - - // ============================= Panel ============================= - function renderPanel( - panelPosition: 'left' | 'right' | false = false, - panelProps: Partial> = {}, - ) { - let panelHoverRangedValue: RangeValue = null; - if ( - mergedOpen && - hoverRangedValue && - hoverRangedValue[0] && - hoverRangedValue[1] && - generateConfig.isAfter(hoverRangedValue[1], hoverRangedValue[0]) - ) { - panelHoverRangedValue = hoverRangedValue; - } - - let panelShowTime: boolean | SharedTimeProps | undefined = - showTime as SharedTimeProps; - if (showTime && typeof showTime === 'object' && showTime.defaultValue) { - const timeDefaultValues: DateType[] = showTime.defaultValue!; - panelShowTime = { - ...showTime, - defaultValue: getValue(timeDefaultValues, mergedActivePickerIndex) || undefined, - }; - } - - return ( - - - {...(props as any)} - {...panelProps} - cellRender={panelDateRender} - showTime={panelShowTime} - mode={mergedModes[mergedActivePickerIndex]} - generateConfig={generateConfig} - style={undefined} - direction={direction} - disabledDate={mergedActivePickerIndex === 0 ? disabledStartDate : disabledEndDate} - disabledTime={(date) => { - if (disabledTime) { - return disabledTime(date, mergedActivePickerIndex === 0 ? 'start' : 'end'); - } - return false; - }} - className={classNames({ - [`${prefixCls}-panel-focused`]: - mergedActivePickerIndex === 0 ? !startTyping : !endTyping, - })} - value={getValue(selectedValue, mergedActivePickerIndex)} - locale={locale} - tabIndex={-1} - onPanelChange={(date, newMode) => { - // clear hover value when panel change - if (mergedActivePickerIndex === 0) { - onStartLeave(true); - } - if (mergedActivePickerIndex === 1) { - onEndLeave(true); - } - triggerModesChange( - updateValues(mergedModes, newMode, mergedActivePickerIndex), - updateValues(selectedValue, date, mergedActivePickerIndex), - ); - - let viewDate = date; - if (panelPosition === 'right' && mergedModes[mergedActivePickerIndex] === newMode) { - viewDate = getClosingViewDate(viewDate, newMode as any, generateConfig, -1); - } - setViewDate(viewDate, mergedActivePickerIndex); - }} - onOk={null} - onSelect={undefined} - onChange={undefined} - defaultValue={ - mergedActivePickerIndex === 0 ? getValue(selectedValue, 1) : getValue(selectedValue, 0) - } - // defaultPickerValue={undefined} - /> - - ); - } - - let arrowLeft: number = 0; - let panelLeft: number = 0; - if ( - mergedActivePickerIndex && - startInputDivRef.current && - separatorRef.current && - panelDivRef.current && - arrowRef.current - ) { - // Arrow offset - arrowLeft = startInputDivRef.current.offsetWidth + separatorRef.current.offsetWidth; - - // If panelWidth - arrowWidth - arrowMarginLeft < arrowLeft, panel should move to right side. - // If arrowOffsetLeft > arrowLeft, arrowMarginLeft = arrowOffsetLeft - arrowLeft - const arrowMarginLeft = - arrowRef.current.offsetLeft > arrowLeft - ? arrowRef.current.offsetLeft - arrowLeft - : arrowRef.current.offsetLeft; - - const panelWidth = panelDivRef.current.offsetWidth; - const arrowWidth = arrowRef.current.offsetWidth; - - if ( - panelWidth && - arrowWidth && - arrowLeft > panelWidth - arrowWidth - (direction === 'rtl' ? 0 : arrowMarginLeft) - ) { - panelLeft = arrowLeft; - } - } - - const arrowPositionStyle = direction === 'rtl' ? { right: arrowLeft } : { left: arrowLeft }; - - function renderPanels() { - let panels: React.ReactNode; - const extraNode = getExtraFooter( - prefixCls, - mergedModes[mergedActivePickerIndex], - renderExtraFooter, - ); - - const rangesNode = getRanges({ - prefixCls, - components, - needConfirmButton, - okDisabled: - !getValue(selectedValue, mergedActivePickerIndex) || - (disabledDate && disabledDate(selectedValue[mergedActivePickerIndex])), - locale, - // rangeList, - onOk: () => { - const selectedIndexValue = getValue(selectedValue, mergedActivePickerIndex); - if (selectedIndexValue) { - triggerChange(selectedValue, mergedActivePickerIndex); - onOk?.(selectedValue); - - // Switch - triggerOpen(false, mergedActivePickerIndex, 'confirm'); - } - }, - }); - - if (picker !== 'time' && !showTime) { - const viewDate = getViewDate(mergedActivePickerIndex); - const nextViewDate = getClosingViewDate(viewDate, picker, generateConfig); - const currentMode = mergedModes[mergedActivePickerIndex]; - - const showDoublePanel = currentMode === picker; - const leftPanel = renderPanel(showDoublePanel ? 'left' : false, { - pickerValue: viewDate, - onPickerValueChange: (newViewDate) => { - setViewDate(newViewDate, mergedActivePickerIndex); - }, - }); - const rightPanel = renderPanel('right', { - pickerValue: nextViewDate, - onPickerValueChange: (newViewDate) => { - setViewDate( - getClosingViewDate(newViewDate, picker, generateConfig, -1), - mergedActivePickerIndex, - ); - }, - }); - - if (direction === 'rtl') { - panels = ( - <> - {rightPanel} - {showDoublePanel && leftPanel} - - ); - } else { - panels = ( - <> - {leftPanel} - {showDoublePanel && rightPanel} - - ); - } - } else { - panels = renderPanel(); - } - - let mergedNodes: React.ReactNode = ( -
          - { - triggerChange(nextValue, null); - triggerOpen(false, mergedActivePickerIndex, 'preset'); - }} - onHover={(hoverValue) => { - setRangeHoverValue(hoverValue); - }} - /> -
          -
          {panels}
          - {(extraNode || rangesNode) && ( -
          - {extraNode} - {rangesNode} -
          - )} -
          -
          - ); - - if (panelRender) { - mergedNodes = panelRender(mergedNodes); - } - - return ( -
          { - e.preventDefault(); - }} - > - {mergedNodes} -
          - ); - } - - const rangePanel = ( -
          -
          - - {renderPanels()} -
          - ); - - // ============================= Icons ============================= - let suffixNode: React.ReactNode; - if (suffixIcon) { - suffixNode = ( - { - // Not lost focus - e.preventDefault(); - }} - > - {suffixIcon} - - ); - } - - const mergedClearIcon: React.ReactNode = getClearIcon(prefixCls, allowClear, clearIcon); - - const clearNode: React.ReactNode = ( - { - e.preventDefault(); - e.stopPropagation(); - }} - onMouseUp={(e) => { - e.preventDefault(); - e.stopPropagation(); - let values = mergedValue; - - if (!mergedDisabled[0]) { - values = updateValues(values, null, 0); - } - if (!mergedDisabled[1]) { - values = updateValues(values, null, 1); - } - - triggerChange(values, null); - triggerOpen(false, mergedActivePickerIndex, 'clear'); - }} - className={`${prefixCls}-clear`} - role="button" - > - {mergedClearIcon} - - ); - - const mergedAllowClear = - allowClear && - ((getValue(mergedValue as RangeValue, 0) && !mergedDisabled[0]) || - (getValue(mergedValue as RangeValue, 1) && !mergedDisabled[1])); - - const inputSharedProps = { - size: getInputSize(picker, formatList[0], generateConfig), - }; - - let activeBarLeft: number = 0; - let activeBarWidth: number = 0; - if (startInputDivRef.current && endInputDivRef.current && separatorRef.current) { - if (mergedActivePickerIndex === 0) { - activeBarWidth = startInputDivRef.current.offsetWidth; - } else { - activeBarLeft = arrowLeft; - activeBarWidth = endInputDivRef.current.offsetWidth; - } - } - const activeBarPositionStyle = - direction === 'rtl' ? { right: activeBarLeft } : { left: activeBarLeft }; - // ============================ Return ============================= - const onContextSelect = (date: DateType, type: 'key' | 'mouse' | 'submit') => { - const values = updateValues(selectedValue, date, mergedActivePickerIndex); - - if (type === 'submit' || (type !== 'key' && !needConfirmButton)) { - // triggerChange will also update selected values - triggerChange(values, mergedActivePickerIndex); - // clear hover value style - if (mergedActivePickerIndex === 0) { - onStartLeave(); - } else { - onEndLeave(); - } - - // Switch - const nextActivePickerIndex = mergedActivePickerIndex === 0 ? 1 : 0; - if (mergedDisabled[nextActivePickerIndex]) { - triggerOpen(false, false, 'confirm'); - } else { - triggerOpen(false, mergedActivePickerIndex, 'confirm'); - } - } else { - setSelectedValue(values); - } - }; - - return ( - - -
          -
          - { - triggerStartTextChange(e.target.value); - }} - autoFocus={autoFocus} - placeholder={getValue(placeholder, 0) || ''} - ref={startInputRef} - {...startInputProps} - {...inputSharedProps} - autoComplete={autoComplete} - /> -
          -
          - {separator} -
          -
          - { - triggerEndTextChange(e.target.value); - }} - placeholder={getValue(placeholder, 1) || ''} - ref={endInputRef} - {...endInputProps} - {...inputSharedProps} - autoComplete={autoComplete} - /> -
          -
          - {suffixNode} - {mergedAllowClear && clearNode} -
          - - - ); -} - -// Wrap with class component to enable pass generic with instance method -class RangePicker extends React.Component> { - pickerRef = React.createRef(); - - focus = () => { - if (this.pickerRef.current) { - this.pickerRef.current.focus(); - } - }; - - blur = () => { - if (this.pickerRef.current) { - this.pickerRef.current.blur(); - } - }; - - render() { - return ( - - {...this.props} - pickerRef={this.pickerRef as React.MutableRefObject} - /> - ); - } -} - -export default RangePicker; diff --git a/src/hooks/useCellClassName.ts b/src/hooks/useCellClassName.ts deleted file mode 100644 index 7aeb2b5f7..000000000 --- a/src/hooks/useCellClassName.ts +++ /dev/null @@ -1,109 +0,0 @@ -import { isInRange } from '../utils/dateUtil'; -import type { GenerateConfig } from '../generate'; -import type { RangeValue, NullableDateType } from '../interface'; -import { getValue } from '../utils/miscUtil'; - -export default function useCellClassName({ - cellPrefixCls, - generateConfig, - rangedValue, - hoverRangedValue, - isInView, - isSameCell, - offsetCell, - today, - value, -}: { - cellPrefixCls: string; - generateConfig: GenerateConfig; - isSameCell: ( - current: NullableDateType, - target: NullableDateType, - ) => boolean; - offsetCell: (date: DateType, offset: number) => DateType; - isInView: (date: DateType) => boolean; - rangedValue?: RangeValue; - hoverRangedValue?: RangeValue; - today?: NullableDateType; - value?: NullableDateType; -}) { - function getClassName(currentDate: DateType) { - const prevDate = offsetCell(currentDate, -1); - const nextDate = offsetCell(currentDate, 1); - - const rangeStart = getValue(rangedValue, 0); - const rangeEnd = getValue(rangedValue, 1); - - const hoverStart = getValue(hoverRangedValue, 0); - const hoverEnd = getValue(hoverRangedValue, 1); - - const isRangeHovered = isInRange( - generateConfig, - hoverStart, - hoverEnd, - currentDate, - ); - - function isRangeStart(date: DateType) { - return isSameCell(rangeStart, date); - } - function isRangeEnd(date: DateType) { - return isSameCell(rangeEnd, date); - } - const isHoverStart = isSameCell(hoverStart, currentDate); - const isHoverEnd = isSameCell(hoverEnd, currentDate); - - const isHoverEdgeStart = - (isRangeHovered || isHoverEnd) && - (!isInView(prevDate) || isRangeEnd(prevDate)); - const isHoverEdgeEnd = - (isRangeHovered || isHoverStart) && - (!isInView(nextDate) || isRangeStart(nextDate)); - - return { - // In view - [`${cellPrefixCls}-in-view`]: isInView(currentDate), - - // Range - [`${cellPrefixCls}-in-range`]: isInRange( - generateConfig, - rangeStart, - rangeEnd, - currentDate, - ), - [`${cellPrefixCls}-range-start`]: isRangeStart(currentDate), - [`${cellPrefixCls}-range-end`]: isRangeEnd(currentDate), - [`${cellPrefixCls}-range-start-single`]: - isRangeStart(currentDate) && !rangeEnd, - [`${cellPrefixCls}-range-end-single`]: - isRangeEnd(currentDate) && !rangeStart, - [`${cellPrefixCls}-range-start-near-hover`]: - isRangeStart(currentDate) && - (isSameCell(prevDate, hoverStart) || - isInRange(generateConfig, hoverStart, hoverEnd, prevDate)), - [`${cellPrefixCls}-range-end-near-hover`]: - isRangeEnd(currentDate) && - (isSameCell(nextDate, hoverEnd) || - isInRange(generateConfig, hoverStart, hoverEnd, nextDate)), - - // Range Hover - [`${cellPrefixCls}-range-hover`]: isRangeHovered, - [`${cellPrefixCls}-range-hover-start`]: isHoverStart, - [`${cellPrefixCls}-range-hover-end`]: isHoverEnd, - - // Range Edge - [`${cellPrefixCls}-range-hover-edge-start`]: isHoverEdgeStart, - [`${cellPrefixCls}-range-hover-edge-end`]: isHoverEdgeEnd, - [`${cellPrefixCls}-range-hover-edge-start-near-range`]: - isHoverEdgeStart && isSameCell(prevDate, rangeEnd), - [`${cellPrefixCls}-range-hover-edge-end-near-range`]: - isHoverEdgeEnd && isSameCell(nextDate, rangeStart), - - // Others - [`${cellPrefixCls}-today`]: isSameCell(today, currentDate), - [`${cellPrefixCls}-selected`]: isSameCell(value, currentDate), - }; - } - - return getClassName; -} diff --git a/src/hooks/useCellRender.ts b/src/hooks/useCellRender.ts deleted file mode 100644 index 35587f784..000000000 --- a/src/hooks/useCellRender.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { CellRenderInfo } from '../interface'; -import type { PickerPanelProps } from '../PickerPanel'; -import type { RangePickerProps } from '../RangePicker'; -import React from 'react'; - -export type UseCellRenderOption = - | Pick, 'cellRender' | 'monthCellRender' | 'dateRender'> - | Pick, 'cellRender' | 'monthCellRender' | 'dateRender'>; - -export function useCellRender({ - cellRender, - monthCellRender, - dateRender, -}: UseCellRenderOption) { - const mergedCellRender = React.useMemo(() => { - if (cellRender) return cellRender; - if (!monthCellRender && !dateRender) return undefined; - return (current: DateType | number, info: CellRenderInfo) => { - const date = current as DateType; - if (dateRender && info.type === 'date') { - return dateRender(date, info.today); - } - if (monthCellRender && info.type === 'month') { - return monthCellRender(date, info.locale); - } - return info.originNode; - }; - }, [cellRender, monthCellRender, dateRender]); - return mergedCellRender; -} diff --git a/src/hooks/useHoverValue.ts b/src/hooks/useHoverValue.ts deleted file mode 100644 index e24cda03e..000000000 --- a/src/hooks/useHoverValue.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { useState, useEffect, useRef } from 'react'; -import type { ValueTextConfig } from './useValueTexts'; -import useValueTexts from './useValueTexts'; - -export default function useHoverValue( - valueText: string, - { formatList, generateConfig, locale }: ValueTextConfig, -): [string, (date: DateType) => void, (immediately?: boolean) => void] { - const [value, internalSetValue] = useState(null); - const raf = useRef(null); - - function setValue(val: DateType, immediately: boolean = false) { - cancelAnimationFrame(raf.current); - if (immediately) { - internalSetValue(val); - return; - } - raf.current = requestAnimationFrame(() => { - internalSetValue(val); - }); - } - - const [, firstText] = useValueTexts(value, { - formatList, - generateConfig, - locale, - }); - - function onEnter(date: DateType) { - setValue(date); - } - - function onLeave(immediately: boolean = false) { - setValue(null, immediately); - } - - useEffect(() => { - onLeave(true); - }, [valueText]); - - useEffect(() => () => cancelAnimationFrame(raf.current), []); - - return [firstText, onEnter, onLeave]; -} diff --git a/src/hooks/usePickerInput.ts b/src/hooks/usePickerInput.ts deleted file mode 100644 index 0f3f119c2..000000000 --- a/src/hooks/usePickerInput.ts +++ /dev/null @@ -1,171 +0,0 @@ -import KeyCode from 'rc-util/lib/KeyCode'; -import raf from 'rc-util/lib/raf'; -import type * as React from 'react'; -import { useEffect, useRef, useState } from 'react'; -import { addGlobalMouseDownEvent, getTargetFromEvent } from '../utils/uiUtil'; - -export default function usePickerInput({ - open, - value, - isClickOutside, - triggerOpen, - forwardKeyDown, - onKeyDown, - blurToCancel, - changeOnBlur, - onSubmit, - onCancel, - onFocus, - onBlur, -}: { - open: boolean; - value: string; - isClickOutside: (clickElement: EventTarget | null) => boolean; - triggerOpen: (open: boolean) => void; - forwardKeyDown: (e: React.KeyboardEvent) => boolean; - onKeyDown: (e: React.KeyboardEvent, preventDefault: () => void) => void; - blurToCancel?: boolean; - changeOnBlur?: boolean - onSubmit: () => void | boolean; - onCancel: () => void; - onFocus?: React.FocusEventHandler; - onBlur?: React.FocusEventHandler; -}): [React.DOMAttributes, { focused: boolean; typing: boolean }] { - const [typing, setTyping] = useState(false); - const [focused, setFocused] = useState(false); - - /** - * We will prevent blur to handle open event when user click outside, - * since this will repeat trigger `onOpenChange` event. - */ - const preventBlurRef = useRef(false); - - const valueChangedRef = useRef(false); - - const preventDefaultRef = useRef(false); - - const inputProps: React.DOMAttributes = { - onMouseDown: () => { - setTyping(true); - triggerOpen(true); - }, - onKeyDown: (e) => { - const preventDefault = (): void => { - preventDefaultRef.current = true; - }; - - onKeyDown(e, preventDefault); - - if (preventDefaultRef.current) return; - - switch (e.which) { - case KeyCode.ENTER: { - if (!open) { - triggerOpen(true); - } else if (onSubmit() !== false) { - setTyping(true); - } - - e.preventDefault(); - return; - } - - case KeyCode.TAB: { - if (typing && open && !e.shiftKey) { - setTyping(false); - e.preventDefault(); - } else if (!typing && open) { - if (!forwardKeyDown(e) && e.shiftKey) { - setTyping(true); - e.preventDefault(); - } - } - return; - } - - case KeyCode.ESC: { - setTyping(true); - onCancel(); - return; - } - } - - if (!open && ![KeyCode.SHIFT].includes(e.which)) { - triggerOpen(true); - } else if (!typing) { - // Let popup panel handle keyboard - forwardKeyDown(e); - } - }, - - onFocus: (e) => { - setTyping(true); - setFocused(true); - - if (onFocus) { - onFocus(e); - } - }, - - onBlur: (e) => { - if (preventBlurRef.current || !isClickOutside(document.activeElement)) { - preventBlurRef.current = false; - return; - } - - if (blurToCancel) { - setTimeout(() => { - let { activeElement } = document; - while (activeElement && activeElement.shadowRoot) { - activeElement = activeElement.shadowRoot.activeElement; - } - - if (isClickOutside(activeElement)) { - onCancel(); - } - }, 0); - } else if (open) { - triggerOpen(false); - - if (valueChangedRef.current) { - onSubmit(); - } - } - setFocused(false); - - onBlur?.(e); - }, - }; - - // check if value changed - useEffect(() => { - valueChangedRef.current = false; - }, [open]); - - useEffect(() => { - valueChangedRef.current = true; - }, [value]); - - // Global click handler - useEffect(() => - addGlobalMouseDownEvent((e: MouseEvent) => { - const target = getTargetFromEvent(e); - const clickedOutside = isClickOutside(target); - - if (open) { - if (!clickedOutside) { - preventBlurRef.current = true; - - // Always set back in case `onBlur` prevented by user - raf(() => { - preventBlurRef.current = false; - }); - } else if (!changeOnBlur && !blurToCancel && (!focused || clickedOutside)) { - triggerOpen(false); - } - } - }), - ); - - return [inputProps, { focused, typing }]; -} diff --git a/src/hooks/usePresets.ts b/src/hooks/usePresets.ts deleted file mode 100644 index cacc08b2a..000000000 --- a/src/hooks/usePresets.ts +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import warning from 'rc-util/lib/warning'; -import type { PresetDate } from '../interface'; - -export default function usePresets( - presets?: PresetDate[], - legacyRanges?: Record T)>, -): PresetDate[] { - return React.useMemo(() => { - if (presets) { - return presets; - } - - if (legacyRanges) { - warning(false, '`ranges` is deprecated. Please use `presets` instead.'); - - return Object.entries(legacyRanges).map(([label, value]) => ({ - label, - value, - })); - } - - return []; - }, [presets, legacyRanges]); -} diff --git a/src/hooks/useRangeDisabled.ts b/src/hooks/useRangeDisabled.ts deleted file mode 100644 index c42a93c56..000000000 --- a/src/hooks/useRangeDisabled.ts +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from 'react'; -import type { GenerateConfig } from '../generate'; -import type { Locale, PickerMode, RangeValue } from '../interface'; -import { getQuarter, isSameDate } from '../utils/dateUtil'; -import { getValue } from '../utils/miscUtil'; - -export default function useRangeDisabled( - { - picker, - locale, - selectedValue, - disabledDate, - disabled, - generateConfig, - }: { - picker: PickerMode; - selectedValue: RangeValue; - disabledDate?: (date: DateType) => boolean; - disabled: [boolean, boolean]; - locale: Locale; - generateConfig: GenerateConfig; - }, - firstTimeOpen: boolean, -) { - const startDate = getValue(selectedValue, 0); - const endDate = getValue(selectedValue, 1); - - function weekFirstDate(date: DateType) { - return generateConfig.locale.getWeekFirstDate(locale.locale, date); - } - - function monthNumber(date: DateType) { - const year = generateConfig.getYear(date); - const month = generateConfig.getMonth(date); - return year * 100 + month; - } - - function quarterNumber(date: DateType) { - const year = generateConfig.getYear(date); - const quarter = getQuarter(generateConfig, date); - return year * 10 + quarter; - } - - const disabledStartDate = React.useCallback( - (date: DateType) => { - if (disabled[0] || (disabledDate && disabledDate(date))) { - return true; - } - - // Disabled range - if (disabled[1] && endDate) { - return !isSameDate(generateConfig, date, endDate) && generateConfig.isAfter(date, endDate); - } - - // Disabled part - if (!firstTimeOpen && endDate) { - switch (picker) { - case 'quarter': - return quarterNumber(date) > quarterNumber(endDate); - case 'month': - return monthNumber(date) > monthNumber(endDate); - case 'week': - return weekFirstDate(date) > weekFirstDate(endDate); - default: - return ( - !isSameDate(generateConfig, date, endDate) && generateConfig.isAfter(date, endDate) - ); - } - } - - return false; - }, - [disabledDate, disabled[1], endDate, firstTimeOpen], - ); - - const disabledEndDate = React.useCallback( - (date: DateType) => { - - if (disabled[1] || (disabledDate && disabledDate(date))) { - return true; - } - - // Disabled range - if (disabled[0] && startDate) { - return ( - !isSameDate(generateConfig, date, endDate) && generateConfig.isAfter(startDate, date) - ); - } - - // Disabled part - if (!firstTimeOpen && startDate) { - switch (picker) { - case 'quarter': - return quarterNumber(date) < quarterNumber(startDate); - case 'month': - return monthNumber(date) < monthNumber(startDate); - case 'week': - return weekFirstDate(date) < weekFirstDate(startDate); - default: - return ( - !isSameDate(generateConfig, date, startDate) && - generateConfig.isAfter(startDate, date) - ); - } - } - - return false; - }, - [disabledDate, disabled[0], startDate, firstTimeOpen], - ); - - return [disabledStartDate, disabledEndDate]; -} diff --git a/src/hooks/useRangeOpen.ts b/src/hooks/useRangeOpen.ts deleted file mode 100644 index 65a6e4f12..000000000 --- a/src/hooks/useRangeOpen.ts +++ /dev/null @@ -1,124 +0,0 @@ -import { useMergedState } from 'rc-util'; -import useEvent from 'rc-util/lib/hooks/useEvent'; -import raf from 'rc-util/lib/raf'; -import * as React from 'react'; - -/** - * 1. Click input to show picker - * 2. Calculate next open index - * - * If click `confirm`: - * 3. Hide current picker - * 4. Open next index picker if exist - * - * If not `changeOnBlur` and click outside: - * 3. Hide picker - * - * If `changeOnBlur` and click outside: - * 3. Hide current picker - * 4. Open next index picker if exist - */ - -export type SourceType = 'open' | 'blur' | 'confirm' | 'cancel' | 'clear' | 'preset'; - -/** - * Auto control of open state - */ -export default function useRangeOpen( - defaultOpen: boolean, - open: boolean, - activePickerIndex: 0 | 1 | undefined, - changeOnBlur: boolean, - needConfirmButton: boolean, - startInputRef: React.RefObject, - endInputRef: React.RefObject, - startSelectedValue: any, - endSelectedValue: any, - disabled: [boolean, boolean], - onOpenChange?: (open: boolean) => void, -): [ - open: boolean, - activeIndex: 0 | 1, - firstTimeOpen: boolean, - triggerOpen: (open: boolean, activeIndex: 0 | 1 | false, source: SourceType) => void, -] { - const [firstTimeOpen, setFirstTimeOpen] = React.useState(false); - - const [afferentOpen, setAfferentOpen] = useMergedState(defaultOpen || false, { - value: open, - }); - - const [mergedOpen, setMergedOpen] = useMergedState(defaultOpen || false, { - value: open, - onChange: (nextOpen) => { - onOpenChange?.(nextOpen); - }, - }); - - const [mergedActivePickerIndex, setMergedActivePickerIndex] = useMergedState<0 | 1>(0, { - value: activePickerIndex, - }); - - const [nextActiveIndex, setNextActiveIndex] = React.useState<0 | 1>(null); - - React.useEffect(() => { - if (mergedOpen) { - setFirstTimeOpen(true); - } - }, [mergedOpen]); - - const queryNextIndex = (index: number) => (index === 0 ? 1 : 0); - - const triggerOpen = useEvent((nextOpen: boolean, index: 0 | 1 | false, source: SourceType) => { - if (index === false) { - // Only when `nextOpen` is false and no need open to next index - setMergedOpen(nextOpen); - } else if (nextOpen) { - setMergedActivePickerIndex(index); - setMergedOpen(nextOpen); - - const nextIndex = queryNextIndex(index); - - // Record next open index - if ( - !mergedOpen || - // Also set next index if next is empty - ![startSelectedValue, endSelectedValue][nextIndex] - ) { - setNextActiveIndex(nextIndex); - } else { - setFirstTimeOpen(false); - - if (nextActiveIndex !== null) { - setNextActiveIndex(null); - } - } - } else if (source === 'confirm' || (source === 'blur' && changeOnBlur)) { - // dateTime mode does not need help getting the index - const customNextActiveIndex = - afferentOpen && !needConfirmButton ? queryNextIndex(index) : nextActiveIndex; - - if (customNextActiveIndex !== null) { - setFirstTimeOpen(false); - setMergedActivePickerIndex(customNextActiveIndex); - } - - setNextActiveIndex(null); - - // Focus back - if (customNextActiveIndex !== null && !disabled[customNextActiveIndex]) { - raf(() => { - const ref = [startInputRef, endInputRef][customNextActiveIndex]; - ref.current?.focus(); - }); - } else { - setMergedOpen(false); - } - } else { - setMergedOpen(false); - setAfferentOpen(false); - } - }); - - return [mergedOpen, mergedActivePickerIndex, firstTimeOpen, triggerOpen]; -} diff --git a/src/hooks/useRangeViewDates.ts b/src/hooks/useRangeViewDates.ts deleted file mode 100644 index df6e63453..000000000 --- a/src/hooks/useRangeViewDates.ts +++ /dev/null @@ -1,121 +0,0 @@ -import * as React from 'react'; -import type { RangeValue, PickerMode } from '../interface'; -import type { GenerateConfig } from '../generate'; -import { getValue, updateValues } from '../utils/miscUtil'; -import { getClosingViewDate, isSameYear, isSameMonth, isSameDecade } from '../utils/dateUtil'; - -function getStartEndDistance( - startDate: DateType, - endDate: DateType, - picker: PickerMode, - generateConfig: GenerateConfig, -): 'same' | 'closing' | 'far' { - const startNext = getClosingViewDate(startDate, picker, generateConfig, 1); - - function getDistance(compareFunc: (start: DateType | null, end: DateType | null) => boolean) { - if (compareFunc(startDate, endDate)) { - return 'same'; - } - if (compareFunc(startNext, endDate)) { - return 'closing'; - } - return 'far'; - } - - switch (picker) { - case 'year': - return getDistance((start, end) => isSameDecade(generateConfig, start, end)); - case 'quarter': - case 'month': - return getDistance((start, end) => isSameYear(generateConfig, start, end)); - default: - return getDistance((start, end) => isSameMonth(generateConfig, start, end)); - } -} - -function getRangeViewDate( - values: RangeValue, - index: 0 | 1, - picker: PickerMode, - generateConfig: GenerateConfig, -): DateType | null { - const startDate = getValue(values, 0); - const endDate = getValue(values, 1); - - if (index === 0) { - return startDate; - } - - if (startDate && endDate) { - const distance = getStartEndDistance(startDate, endDate, picker, generateConfig); - switch (distance) { - case 'same': - return startDate; - case 'closing': - return startDate; - default: - return getClosingViewDate(endDate, picker, generateConfig, -1); - } - } - - return startDate; -} - -export default function useRangeViewDates({ - values, - picker, - defaultDates, - generateConfig, -}: { - values: RangeValue; - picker: PickerMode; - defaultDates: RangeValue | undefined; - generateConfig: GenerateConfig; -}): [(activePickerIndex: 0 | 1) => DateType, (viewDate: DateType | null, index: 0 | 1) => void] { - const [defaultViewDates, setDefaultViewDates] = React.useState< - [DateType | null, DateType | null] - >(() => [getValue(defaultDates, 0), getValue(defaultDates, 1)]); - const [viewDates, setInternalViewDates] = React.useState>(null); - - const startDate = getValue(values, 0); - const endDate = getValue(values, 1); - - function getViewDate(index: 0 | 1): DateType { - // If set default view date, use it - if (defaultViewDates[index]) { - return defaultViewDates[index]!; - } - - return ( - getValue(viewDates, index) || - getRangeViewDate(values, index, picker, generateConfig) || - startDate || - endDate || - generateConfig.getNow() - ); - } - - function setViewDate(viewDate: DateType | null, index: 0 | 1) { - if (viewDate) { - let newViewDates = updateValues(viewDates, viewDate, index); - // Set view date will clean up default one - setDefaultViewDates( - // Should always be an array - updateValues(defaultViewDates, null, index) || [null, null], - ); - - // Reset another one when not have value - const anotherIndex = (index + 1) % 2; - if (!getValue(values, anotherIndex)) { - newViewDates = updateValues(newViewDates, viewDate, anotherIndex); - } - - setInternalViewDates(newViewDates); - } else if (startDate || endDate) { - // Reset all when has values when `viewDate` is `null` which means from open trigger - setInternalViewDates(null); - } - } - - return [getViewDate, setViewDate]; -} diff --git a/src/hooks/useTextValueMapping.ts b/src/hooks/useTextValueMapping.ts deleted file mode 100644 index b73bf4ab8..000000000 --- a/src/hooks/useTextValueMapping.ts +++ /dev/null @@ -1,32 +0,0 @@ -import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; -import * as React from 'react'; - -export default function useTextValueMapping({ - valueTexts, - onTextChange, -}: { - /** Must useMemo, to assume that `valueTexts` only match on the first change */ - valueTexts: string[]; - onTextChange: (text: string) => void; -}): [string, (text: string) => void, () => void] { - const [text, setInnerText] = React.useState(''); - const valueTextsRef = React.useRef([]); - valueTextsRef.current = valueTexts; - - function triggerTextChange(value: string) { - setInnerText(value); - onTextChange(value); - } - - function resetText() { - setInnerText(valueTextsRef.current[0]); - } - - useLayoutEffect(() => { - if (valueTexts.every((valText) => valText !== text)) { - resetText(); - } - }, [valueTexts.join('||')]); - - return [text, triggerTextChange, resetText]; -} diff --git a/src/hooks/useTimeSelection.ts b/src/hooks/useTimeSelection.ts deleted file mode 100644 index 512865cfd..000000000 --- a/src/hooks/useTimeSelection.ts +++ /dev/null @@ -1,63 +0,0 @@ -import type { GenerateConfig } from '../generate'; -import type { Unit } from '../panels/TimePanel/TimeUnitColumn'; -import { setTime as utilSetTime } from '../utils/timeUtil'; - -export default function useTimeSelection({ - value, - generateConfig, - disabledMinutes, - disabledSeconds, - minutes, - seconds, - use12Hours, -}: { - value: DateType; - generateConfig: GenerateConfig; - disabledMinutes: (hour: number) => number[]; - disabledSeconds: (hour: number, minute: number) => number[]; - minutes: Unit[]; - seconds: Unit[]; - use12Hours: boolean; -}) { - const setTime = ( - isNewPM: boolean | undefined, - newHour: number, - newMinute: number, - newSecond: number, - ) => { - const now = generateConfig.getNow(); - let newDate = value || now; - - const newFormattedHour = !use12Hours || !isNewPM ? newHour : newHour + 12; - const mergedHour = newHour < 0 ? generateConfig.getHour(now) : newFormattedHour; - let mergedMinute = newMinute < 0 ? generateConfig.getMinute(now) : newMinute; - let mergedSecond = newSecond < 0 ? generateConfig.getSecond(now) : newSecond; - - const newDisabledMinutes = disabledMinutes && disabledMinutes(mergedHour); - if (newDisabledMinutes?.includes(mergedMinute)) { - // find the first available minute in minutes - const availableMinute = minutes.find((i) => !newDisabledMinutes.includes(i.value)); - if (availableMinute) { - mergedMinute = availableMinute.value; - } else { - return null; - } - } - const newDisabledSeconds = disabledSeconds && disabledSeconds(mergedHour, mergedMinute); - if (newDisabledSeconds?.includes(mergedSecond)) { - // find the first available second in seconds - const availableSecond = seconds.find((i) => !newDisabledSeconds.includes(i.value)); - if (availableSecond) { - mergedSecond = availableSecond.value; - } else { - return null; - } - } - - newDate = utilSetTime(generateConfig, newDate, mergedHour, mergedMinute, mergedSecond); - - return newDate; - }; - - return setTime; -} diff --git a/src/hooks/useValueTexts.ts b/src/hooks/useValueTexts.ts deleted file mode 100644 index 52de6ce92..000000000 --- a/src/hooks/useValueTexts.ts +++ /dev/null @@ -1,51 +0,0 @@ -import useMemo from 'rc-util/lib/hooks/useMemo'; -import shallowEqual from 'rc-util/lib/isEqual'; -import * as React from 'react'; -import type { GenerateConfig } from '../generate'; -import type { CustomFormat, Locale } from '../interface'; -import { formatValue, isEqual } from '../utils/dateUtil'; - -export type ValueTextConfig = { - formatList: (string | CustomFormat)[]; - generateConfig: GenerateConfig; - locale: Locale; -}; - -export default function useValueTexts( - value: DateType | null, - { formatList, generateConfig, locale }: ValueTextConfig, -): [valueTexts: string[], firstValueText: string] { - const [texts, text] = useMemo<[string[], string]>( - () => { - if (!value) { - return [[''], '']; - } - - // We will convert data format back to first format - let firstValueText: string = ''; - const fullValueTexts: string[] = []; - - for (let i = 0; i < formatList.length; i += 1) { - const format = formatList[i]; - const formatStr = formatValue(value, { generateConfig, locale, format }); - fullValueTexts.push(formatStr); - - if (i === 0) { - firstValueText = formatStr; - } - } - - return [fullValueTexts, firstValueText]; - }, - [value, formatList, locale], - (prev, next) => - // Not Same Date - !isEqual(generateConfig, prev[0], next[0]) || - // Not Same format - !shallowEqual(prev[1], next[1], true) || - // Not Same locale - !shallowEqual(prev[2], next[2], true), - ); - - return React.useMemo(() => [texts, text], [texts.join(''), text]); -} diff --git a/src/index.tsx b/src/index.tsx deleted file mode 100644 index 348e5e3c5..000000000 --- a/src/index.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import Picker from './Picker'; -import PickerPanel from './PickerPanel'; -import RangePicker from './RangePicker'; -import type { PickerProps } from './Picker'; -import type { PickerPanelProps } from './PickerPanel'; -import type { RangePickerProps } from './RangePicker'; - -export { PickerPanel, RangePicker }; - -export type { PickerProps, PickerPanelProps, RangePickerProps }; - -export default Picker; diff --git a/src/interface.ts b/src/interface.ts deleted file mode 100644 index 3dc6a8ae2..000000000 --- a/src/interface.ts +++ /dev/null @@ -1,103 +0,0 @@ -import type React from 'react'; -import type { GenerateConfig } from './generate'; -import type { Locale } from './NewPicker/interface'; - -export type { Locale }; - -export type PanelMode = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year' | 'decade'; - -export type PickerMode = Exclude; - -export type CellRenderInfo = { - // The cell wrapper element - originNode: React.ReactElement; - today: DateType; - // mask current cell as start or end when range picker - range?: 'start' | 'end'; - type: PanelMode; - locale?: Locale; - subType?: 'hour' | 'minute' | 'second' | 'meridiem'; -}; - -export type CellRender = ( - current: CurrentType, - info: CellRenderInfo, -) => React.ReactNode; - -export type PanelRefProps = { - onKeyDown?: (e: React.KeyboardEvent) => boolean; - onBlur?: React.FocusEventHandler; - onClose?: () => void; -}; - -export type NullableDateType = DateType | null | undefined; - -export type OnSelect = (value: DateType, type: 'key' | 'mouse' | 'submit') => void; - -export type PanelSharedProps = { - prefixCls: string; - generateConfig: GenerateConfig; - value?: NullableDateType; - viewDate: DateType; - /** - * @deprecated please use `defaultValue` instead. - * Set default display picker view date - */ - defaultPickerValue?: DateType; - locale: Locale; - disabledDate?: (date: DateType) => boolean; - - prevIcon?: React.ReactNode; - nextIcon?: React.ReactNode; - superPrevIcon?: React.ReactNode; - superNextIcon?: React.ReactNode; - - /** - * Typescript can not handle generic type so we can not use `forwardRef` here. - * Thus, move ref into operationRef. - * This is little hack which should refactor after typescript support. - */ - operationRef: React.MutableRefObject; - - onSelect: OnSelect; - onViewDateChange: (value: DateType) => void; - onPanelChange: (mode: PanelMode | null, viewValue: DateType) => void; -}; - -export type DisabledTimes = { - disabledHours?: () => number[]; - disabledMinutes?: (hour: number) => number[]; - disabledSeconds?: (hour: number, minute: number) => number[]; -}; - -export type DisabledTime = (date: DateType | null) => DisabledTimes; - -export type OnPanelChange = (value: DateType, mode: PanelMode) => void; - -export type EventValue = DateType | null; -export type RangeValue = [EventValue, EventValue] | null; - -export type Components = { - button?: React.ComponentType | string; -}; - -export type RangeList = { - label: React.ReactNode; - onClick: () => void; - onMouseEnter: () => void; - onMouseLeave: () => void; -}[]; - -export type CustomFormat = (value: DateType) => string; - -export interface PresetDate { - label: React.ReactNode; - value: T | (() => T); -} - -// https://stackoverflow.com/a/39495173; need TypeScript >= 4.5 -type Enumerate = Acc['length'] extends N - ? Acc[number] - : Enumerate; - -export type IntRange = Exclude, Enumerate>; diff --git a/src/panels/DatePanel/DateBody.tsx b/src/panels/DatePanel/DateBody.tsx deleted file mode 100644 index 69ccf233d..000000000 --- a/src/panels/DatePanel/DateBody.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import * as React from 'react'; -import type { GenerateConfig } from '../../generate'; -import useCellClassName from '../../hooks/useCellClassName'; -import type { CellRender, Locale } from '../../interface'; -import RangeContext from '../../RangeContext'; -import { - formatValue, - getWeekStartDate, - isSameDate, - isSameMonth, - WEEK_DAY_COUNT, -} from '../../utils/dateUtil'; -import PanelBody from '../PanelBody'; - -export type DateRender = (currentDate: DateType, today: DateType) => React.ReactNode; - -export type DateBodyPassProps = { - cellRender?: CellRender; - disabledDate?: (date: DateType) => boolean; - - // Used for week panel - prefixColumn?: (date: DateType) => React.ReactNode; - rowClassName?: (date: DateType) => string; - isSameCell?: (current: DateType, target: DateType) => boolean; -}; - -export type DateBodyProps = { - prefixCls: string; - generateConfig: GenerateConfig; - value?: DateType | null; - viewDate: DateType; - locale: Locale; - rowCount: number; - onSelect: (value: DateType) => void; -} & DateBodyPassProps; - -function DateBody(props: DateBodyProps) { - const { - prefixCls, - generateConfig, - prefixColumn, - locale, - rowCount, - viewDate, - value, - cellRender, - isSameCell, - } = props; - - const { rangedValue, hoverRangedValue } = React.useContext(RangeContext); - - const baseDate = getWeekStartDate(locale.locale, generateConfig, viewDate); - const cellPrefixCls = `${prefixCls}-cell`; - const weekFirstDay = generateConfig.locale.getWeekFirstDay(locale.locale); - const today = generateConfig.getNow(); - - // ============================== Header ============================== - const headerCells: React.ReactNode[] = []; - const weekDaysLocale: string[] = - locale.shortWeekDays || - (generateConfig.locale.getShortWeekDays - ? generateConfig.locale.getShortWeekDays(locale.locale) - : []); - - if (prefixColumn) { - headerCells.push(); - } - for (let i = 0; i < WEEK_DAY_COUNT; i += 1) { - headerCells.push({weekDaysLocale[(i + weekFirstDay) % WEEK_DAY_COUNT]}); - } - - // =============================== Body =============================== - const getCellClassName = useCellClassName({ - cellPrefixCls, - today, - value, - generateConfig, - rangedValue: prefixColumn ? null : rangedValue, - hoverRangedValue: prefixColumn ? null : hoverRangedValue, - isSameCell: isSameCell || ((current, target) => isSameDate(generateConfig, current, target)), - isInView: (date) => isSameMonth(generateConfig, date, viewDate), - offsetCell: (date, offset) => generateConfig.addDate(date, offset), - }); - - const getCellNode = cellRender - ? (date: DateType, wrapperNode: React.ReactElement) => - cellRender(date, { - originNode: wrapperNode, - today, - type: 'date', - locale - }) - : undefined; - - return ( - - formatValue(date, { - locale, - format: 'YYYY-MM-DD', - generateConfig, - }) - } - headerCells={headerCells} - /> - ); -} - -export default DateBody; diff --git a/src/panels/DatePanel/DateHeader.tsx b/src/panels/DatePanel/DateHeader.tsx deleted file mode 100644 index efe91f1f0..000000000 --- a/src/panels/DatePanel/DateHeader.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import * as React from 'react'; -import Header from '../Header'; -import type { Locale } from '../../interface'; -import type { GenerateConfig } from '../../generate'; -import PanelContext from '../../PanelContext'; -import { formatValue } from '../../utils/dateUtil'; - -export type DateHeaderProps = { - prefixCls: string; - viewDate: DateType; - value?: DateType | null; - locale: Locale; - generateConfig: GenerateConfig; - - onPrevYear: () => void; - onNextYear: () => void; - onPrevMonth: () => void; - onNextMonth: () => void; - onYearClick: () => void; - onMonthClick: () => void; -}; - -function DateHeader(props: DateHeaderProps) { - const { - prefixCls, - generateConfig, - locale, - viewDate, - onNextMonth, - onPrevMonth, - onNextYear, - onPrevYear, - onYearClick, - onMonthClick, - } = props; - - const { hideHeader } = React.useContext(PanelContext); - if (hideHeader) { - return null; - } - - const headerPrefixCls = `${prefixCls}-header`; - - const monthsLocale: string[] = - locale.shortMonths || - (generateConfig.locale.getShortMonths - ? generateConfig.locale.getShortMonths(locale.locale) - : []); - - const month = generateConfig.getMonth(viewDate); - - // =================== Month & Year =================== - const yearNode: React.ReactNode = ( - - ); - const monthNode: React.ReactNode = ( - - ); - - const monthYearNodes = locale.monthBeforeYear ? [monthNode, yearNode] : [yearNode, monthNode]; - - return ( -
          - {monthYearNodes} -
          - ); -} - -export default DateHeader; diff --git a/src/panels/DatePanel/index.tsx b/src/panels/DatePanel/index.tsx deleted file mode 100644 index 2e2bc72ee..000000000 --- a/src/panels/DatePanel/index.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import classNames from 'classnames'; -import * as React from 'react'; -import type { CellRender, PanelSharedProps } from '../../interface'; -import { WEEK_DAY_COUNT } from '../../utils/dateUtil'; -import type { KeyboardConfig } from '../../utils/uiUtil'; -import { createKeyDownHandler } from '../../utils/uiUtil'; -import type { DateBodyPassProps } from './DateBody'; -import DateBody from './DateBody'; -import DateHeader from './DateHeader'; - -const DATE_ROW_COUNT = 6; - -export type DatePanelProps = { - active?: boolean; - cellRender?: CellRender; - - // Used for week panel - panelName?: string; - keyboardConfig?: KeyboardConfig; -} & PanelSharedProps & - DateBodyPassProps; - -function DatePanel(props: DatePanelProps) { - const { - prefixCls, - panelName = 'date', - keyboardConfig, - active, - operationRef, - generateConfig, - value, - viewDate, - onViewDateChange, - onPanelChange, - onSelect, - } = props; - const panelPrefixCls = `${prefixCls}-${panelName}-panel`; - - // ======================= Keyboard ======================= - operationRef.current = { - onKeyDown: (event) => - createKeyDownHandler(event, { - onLeftRight: (diff) => { - onSelect(generateConfig.addDate(value || viewDate, diff), 'key'); - }, - onCtrlLeftRight: (diff) => { - onSelect(generateConfig.addYear(value || viewDate, diff), 'key'); - }, - onUpDown: (diff) => { - onSelect(generateConfig.addDate(value || viewDate, diff * WEEK_DAY_COUNT), 'key'); - }, - onPageUpDown: (diff) => { - onSelect(generateConfig.addMonth(value || viewDate, diff), 'key'); - }, - ...keyboardConfig, - }), - }; - - // ==================== View Operation ==================== - const onYearChange = (diff: number) => { - const newDate = generateConfig.addYear(viewDate, diff); - onViewDateChange(newDate); - onPanelChange(null, newDate); - }; - const onMonthChange = (diff: number) => { - const newDate = generateConfig.addMonth(viewDate, diff); - onViewDateChange(newDate); - onPanelChange(null, newDate); - }; - - return ( -
          - { - onYearChange(-1); - }} - onNextYear={() => { - onYearChange(1); - }} - onPrevMonth={() => { - onMonthChange(-1); - }} - onNextMonth={() => { - onMonthChange(1); - }} - onMonthClick={() => { - onPanelChange('month', viewDate); - }} - onYearClick={() => { - onPanelChange('year', viewDate); - }} - /> - onSelect(date, 'mouse')} - prefixCls={prefixCls} - value={value} - viewDate={viewDate} - rowCount={DATE_ROW_COUNT} - /> -
          - ); -} - -export default DatePanel; diff --git a/src/panels/DatetimePanel/index.tsx b/src/panels/DatetimePanel/index.tsx deleted file mode 100644 index 4e38286ea..000000000 --- a/src/panels/DatetimePanel/index.tsx +++ /dev/null @@ -1,187 +0,0 @@ -import classNames from 'classnames'; -import KeyCode from 'rc-util/lib/KeyCode'; -import * as React from 'react'; -import type { DisabledTime, PanelRefProps } from '../../interface'; -import { tuple } from '../../utils/miscUtil'; -import { setDateTime as setTime } from '../../utils/timeUtil'; -import type { DatePanelProps } from '../DatePanel'; -import DatePanel from '../DatePanel'; -import type { SharedTimeProps } from '../TimePanel'; -import TimePanel from '../TimePanel'; - -export type DatetimePanelProps = { - disabledTime?: DisabledTime; - showTime?: boolean | SharedTimeProps; - defaultValue?: DateType; -} & Omit, 'disabledHours' | 'disabledMinutes' | 'disabledSeconds'>; - -const ACTIVE_PANEL = tuple('date', 'time'); -type ActivePanelType = (typeof ACTIVE_PANEL)[number]; - -const findValidTime = (refValue: number, disabledRange: number[], maxValidTime: number) => { - const rangeSet = new Set(disabledRange); - if (rangeSet.has(refValue)) { - for (let i = 0; i <= maxValidTime; i++) { - if (!rangeSet.has(i) && i >= refValue) { - // first not disabled time - return i; - } - } - } - return refValue; -}; - -function DatetimePanel(props: DatetimePanelProps) { - const { - prefixCls, - operationRef, - generateConfig, - value, - defaultValue, - disabledTime, - showTime, - onSelect, - cellRender, - } = props; - const panelPrefixCls = `${prefixCls}-datetime-panel`; - const [activePanel, setActivePanel] = React.useState(null); - - const dateOperationRef = React.useRef({}); - const timeOperationRef = React.useRef({}); - - const timeProps = typeof showTime === 'object' ? { ...showTime } : {}; - - // ======================= Keyboard ======================= - function getNextActive(offset: number) { - const activeIndex = ACTIVE_PANEL.indexOf(activePanel!) + offset; - const nextActivePanel = ACTIVE_PANEL[activeIndex] || null; - return nextActivePanel; - } - - const onBlur = (e?: React.FocusEvent) => { - if (timeOperationRef.current.onBlur) { - timeOperationRef.current.onBlur(e!); - } - setActivePanel(null); - }; - - operationRef.current = { - onKeyDown: (event) => { - // Switch active panel - if (event.which === KeyCode.TAB) { - const nextActivePanel = getNextActive(event.shiftKey ? -1 : 1); - setActivePanel(nextActivePanel); - - if (nextActivePanel) { - event.preventDefault(); - } - - return true; - } - - // Operate on current active panel - if (activePanel) { - const ref = activePanel === 'date' ? dateOperationRef : timeOperationRef; - - if (ref.current && ref.current.onKeyDown) { - ref.current.onKeyDown(event); - } - - return true; - } - - // Switch first active panel if operate without panel - if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.UP, KeyCode.DOWN].includes(event.which)) { - setActivePanel('date'); - return true; - } - - return false; - }, - onBlur, - onClose: onBlur, - }; - - // ======================== Events ======================== - const onInternalSelect = (date: DateType, source: 'date' | 'time') => { - let selectedDate = date; - - if (source === 'date') { - const disabledTimes = disabledTime?.(value || timeProps.defaultValue) || {}; - const validHour = findValidTime( - generateConfig.getHour(selectedDate), - disabledTimes.disabledHours?.() || [-1], - 23, - ); - const validMinute = findValidTime( - generateConfig.getMinute(selectedDate), - disabledTimes.disabledMinutes?.(validHour) || [-1], - 59, - ); - const validSeconds = findValidTime( - generateConfig.getSecond(selectedDate), - disabledTimes.disabledSeconds?.(validHour, validMinute) || [-1], - 59, - ); - selectedDate = generateConfig.setHour(selectedDate, validHour); - selectedDate = generateConfig.setMinute(selectedDate, validMinute); - selectedDate = generateConfig.setSecond(selectedDate, validSeconds); - } else if (source === 'time' && !value && defaultValue) { - selectedDate = generateConfig.setYear(selectedDate, generateConfig.getYear(defaultValue)); - selectedDate = generateConfig.setMonth(selectedDate, generateConfig.getMonth(defaultValue)); - selectedDate = generateConfig.setDate(selectedDate, generateConfig.getDate(defaultValue)); - } - - if (onSelect) { - onSelect(selectedDate, 'mouse'); - } - }; - - // ======================== Render ======================== - const disabledTimes = disabledTime ? disabledTime(value || null) : {}; - - return ( -
          - { - onInternalSelect( - setTime( - generateConfig, - date, - !value && typeof showTime === 'object' ? showTime.defaultValue : null, - ), - 'date', - ); - }} - /> - cellRender(current as any, { ...info, type: 'time' }) - : undefined - } - format={undefined} - {...timeProps} - {...disabledTimes} - disabledTime={null} - defaultValue={undefined} - operationRef={timeOperationRef} - active={activePanel === 'time'} - onSelect={(date) => { - onInternalSelect(date, 'time'); - }} - /> -
          - ); -} - -export default DatetimePanel; diff --git a/src/panels/DecadePanel/DecadeBody.tsx b/src/panels/DecadePanel/DecadeBody.tsx deleted file mode 100644 index 733267c93..000000000 --- a/src/panels/DecadePanel/DecadeBody.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import * as React from 'react'; -import type { GenerateConfig } from '../../generate'; -import { DECADE_DISTANCE_COUNT, DECADE_UNIT_DIFF } from './constant'; -import PanelBody from '../PanelBody'; -import type { CellRender, Locale } from '../../interface'; - -export const DECADE_COL_COUNT = 3; -const DECADE_ROW_COUNT = 4; - -export type YearBodyProps = { - prefixCls: string; - generateConfig: GenerateConfig; - viewDate: DateType; - disabledDate?: (date: DateType) => boolean; - onSelect: (value: DateType) => void; - cellRender?: CellRender; - locale: Locale; -}; - -function DecadeBody(props: YearBodyProps) { - const DECADE_UNIT_DIFF_DES = DECADE_UNIT_DIFF - 1; - const { prefixCls, viewDate, generateConfig, cellRender, locale } = props; - - const cellPrefixCls = `${prefixCls}-cell`; - - const yearNumber = generateConfig.getYear(viewDate); - const decadeYearNumber = Math.floor(yearNumber / DECADE_UNIT_DIFF) * DECADE_UNIT_DIFF; - - const startDecadeYear = Math.floor(yearNumber / DECADE_DISTANCE_COUNT) * DECADE_DISTANCE_COUNT; - const endDecadeYear = startDecadeYear + DECADE_DISTANCE_COUNT - 1; - - const baseDecadeYear = generateConfig.setYear( - viewDate, - startDecadeYear - - Math.ceil( - (DECADE_COL_COUNT * DECADE_ROW_COUNT * DECADE_UNIT_DIFF - DECADE_DISTANCE_COUNT) / 2, - ), - ); - - const getCellClassName = (date: DateType) => { - const startDecadeNumber = generateConfig.getYear(date); - const endDecadeNumber = startDecadeNumber + DECADE_UNIT_DIFF_DES; - - return { - [`${cellPrefixCls}-in-view`]: - startDecadeYear <= startDecadeNumber && endDecadeNumber <= endDecadeYear, - [`${cellPrefixCls}-selected`]: startDecadeNumber === decadeYearNumber, - }; - }; - - const getCellNode = cellRender - ? (date: DateType, wrapperNode: React.ReactElement) => - cellRender(date, { - originNode: wrapperNode, - today: generateConfig.getNow(), - type: 'decade', - locale - }) - : undefined; - - return ( - { - const startDecadeNumber = generateConfig.getYear(date); - return `${startDecadeNumber}-${startDecadeNumber + DECADE_UNIT_DIFF_DES}`; - }} - getCellClassName={getCellClassName} - getCellDate={(date, offset) => generateConfig.addYear(date, offset * DECADE_UNIT_DIFF)} - /> - ); -} - -export default DecadeBody; diff --git a/src/panels/DecadePanel/DecadeHeader.tsx b/src/panels/DecadePanel/DecadeHeader.tsx deleted file mode 100644 index dcee1c2ad..000000000 --- a/src/panels/DecadePanel/DecadeHeader.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import Header from '../Header'; -import type { GenerateConfig } from '../../generate'; -import { DECADE_DISTANCE_COUNT } from './constant'; -import PanelContext from '../../PanelContext'; - -export type YearHeaderProps = { - prefixCls: string; - viewDate: DateType; - generateConfig: GenerateConfig; - - onPrevDecades: () => void; - onNextDecades: () => void; -}; - -function DecadeHeader(props: YearHeaderProps) { - const { - prefixCls, - generateConfig, - viewDate, - onPrevDecades, - onNextDecades, - } = props; - const { hideHeader } = React.useContext(PanelContext); - if (hideHeader) { - return null; - } - - const headerPrefixCls = `${prefixCls}-header`; - - const yearNumber = generateConfig.getYear(viewDate); - const startYear = - Math.floor(yearNumber / DECADE_DISTANCE_COUNT) * DECADE_DISTANCE_COUNT; - const endYear = startYear + DECADE_DISTANCE_COUNT - 1; - - return ( -
          - {startYear}-{endYear} -
          - ); -} - -export default DecadeHeader; diff --git a/src/panels/DecadePanel/constant.ts b/src/panels/DecadePanel/constant.ts deleted file mode 100644 index da3d3804d..000000000 --- a/src/panels/DecadePanel/constant.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const DECADE_UNIT_DIFF = 10; -export const DECADE_DISTANCE_COUNT = DECADE_UNIT_DIFF * 10; \ No newline at end of file diff --git a/src/panels/DecadePanel/index.tsx b/src/panels/DecadePanel/index.tsx deleted file mode 100644 index 4abf06085..000000000 --- a/src/panels/DecadePanel/index.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import * as React from 'react'; -import DecadeHeader from './DecadeHeader'; -import DecadeBody, { DECADE_COL_COUNT } from './DecadeBody'; -import type { PanelSharedProps } from '../../interface'; -import { createKeyDownHandler } from '../../utils/uiUtil'; -import { DECADE_DISTANCE_COUNT, DECADE_UNIT_DIFF } from './constant'; - -export type DecadePanelProps = PanelSharedProps; - -export { - DECADE_DISTANCE_COUNT, - DECADE_UNIT_DIFF -}; - - -function DecadePanel(props: DecadePanelProps) { - const { - prefixCls, - onViewDateChange, - generateConfig, - viewDate, - operationRef, - onSelect, - onPanelChange, - } = props; - - const panelPrefixCls = `${prefixCls}-decade-panel`; - - // ======================= Keyboard ======================= - operationRef.current = { - onKeyDown: event => - createKeyDownHandler(event, { - onLeftRight: diff => { - onSelect( - generateConfig.addYear(viewDate, diff * DECADE_UNIT_DIFF), - 'key', - ); - }, - onCtrlLeftRight: diff => { - onSelect( - generateConfig.addYear(viewDate, diff * DECADE_DISTANCE_COUNT), - 'key', - ); - }, - onUpDown: diff => { - onSelect( - generateConfig.addYear( - viewDate, - diff * DECADE_UNIT_DIFF * DECADE_COL_COUNT, - ), - 'key', - ); - }, - onEnter: () => { - onPanelChange('year', viewDate); - }, - }), - }; - - // ==================== View Operation ==================== - const onDecadesChange = (diff: number) => { - const newDate = generateConfig.addYear( - viewDate, - diff * DECADE_DISTANCE_COUNT, - ); - onViewDateChange(newDate); - onPanelChange(null, newDate); - }; - - const onInternalSelect = (date: DateType) => { - onSelect(date, 'mouse'); - onPanelChange('year', date); - }; - - return ( -
          - { - onDecadesChange(-1); - }} - onNextDecades={() => { - onDecadesChange(1); - }} - /> - -
          - ); -} - -export default DecadePanel; diff --git a/src/panels/Header.tsx b/src/panels/Header.tsx deleted file mode 100644 index 75620bc67..000000000 --- a/src/panels/Header.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import * as React from 'react'; -import PanelContext from '../PanelContext'; - -const HIDDEN_STYLE: React.CSSProperties = { - visibility: 'hidden', -}; - -export type HeaderProps = { - prefixCls: string; - - // Icons - prevIcon?: React.ReactNode; - nextIcon?: React.ReactNode; - superPrevIcon?: React.ReactNode; - superNextIcon?: React.ReactNode; - - /** Last one step */ - onPrev?: () => void; - /** Next one step */ - onNext?: () => void; - /** Last multiple steps */ - onSuperPrev?: () => void; - /** Next multiple steps */ - onSuperNext?: () => void; - - children?: React.ReactNode; -}; - -function Header({ - prefixCls, - prevIcon = '\u2039', - nextIcon = '\u203A', - superPrevIcon = '\u00AB', - superNextIcon = '\u00BB', - onSuperPrev, - onSuperNext, - onPrev, - onNext, - children, -}: HeaderProps) { - const { hideNextBtn, hidePrevBtn } = React.useContext(PanelContext); - - return ( -
          - {onSuperPrev && ( - - )} - {onPrev && ( - - )} -
          {children}
          - {onNext && ( - - )} - {onSuperNext && ( - - )} -
          - ); -} - -export default Header; diff --git a/src/panels/MonthPanel/MonthBody.tsx b/src/panels/MonthPanel/MonthBody.tsx deleted file mode 100644 index af72e9c79..000000000 --- a/src/panels/MonthPanel/MonthBody.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import * as React from 'react'; -import type { GenerateConfig } from '../../generate'; -import useCellClassName from '../../hooks/useCellClassName'; -import type { CellRender, Locale } from '../../interface'; -import RangeContext from '../../RangeContext'; -import { formatValue, isSameMonth } from '../../utils/dateUtil'; -import PanelBody from '../PanelBody'; - -export const MONTH_COL_COUNT = 3; -const MONTH_ROW_COUNT = 4; - -export type MonthCellRender = (currentDate: DateType, locale: Locale) => React.ReactNode; - -export type MonthBodyProps = { - prefixCls: string; - locale: Locale; - generateConfig: GenerateConfig; - value?: DateType | null; - viewDate: DateType; - disabledDate?: (date: DateType) => boolean; - cellRender?: CellRender; - onSelect: (value: DateType) => void; -}; - -function MonthBody(props: MonthBodyProps) { - const { prefixCls, locale, value, viewDate, generateConfig, cellRender } = props; - - const { rangedValue, hoverRangedValue } = React.useContext(RangeContext); - - const cellPrefixCls = `${prefixCls}-cell`; - - const getCellClassName = useCellClassName({ - cellPrefixCls, - value, - generateConfig, - rangedValue, - hoverRangedValue, - isSameCell: (current, target) => isSameMonth(generateConfig, current, target), - isInView: () => true, - offsetCell: (date, offset) => generateConfig.addMonth(date, offset), - }); - - const monthsLocale: string[] = - locale.shortMonths || - (generateConfig.locale.getShortMonths - ? generateConfig.locale.getShortMonths(locale.locale) - : []); - - const baseMonth = generateConfig.setMonth(viewDate, 0); - - const getCellNode = cellRender - ? (date: DateType, wrapperNode: React.ReactElement) => - cellRender(date, { - originNode: wrapperNode, - locale, - today: generateConfig.getNow(), - type: 'month', - }) - : undefined; - - return ( - - locale.monthFormat - ? formatValue(date, { - locale, - format: locale.monthFormat, - generateConfig, - }) - : monthsLocale[generateConfig.getMonth(date)] - } - getCellClassName={getCellClassName} - getCellDate={generateConfig.addMonth} - titleCell={(date) => - formatValue(date, { - locale, - format: 'YYYY-MM', - generateConfig, - }) - } - /> - ); -} - -export default MonthBody; diff --git a/src/panels/MonthPanel/MonthHeader.tsx b/src/panels/MonthPanel/MonthHeader.tsx deleted file mode 100644 index 899ff0dcf..000000000 --- a/src/panels/MonthPanel/MonthHeader.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import * as React from 'react'; -import Header from '../Header'; -import type { Locale } from '../../interface'; -import type { GenerateConfig } from '../../generate'; -import PanelContext from '../../PanelContext'; -import { formatValue } from '../../utils/dateUtil'; - -export type MonthHeaderProps = { - prefixCls: string; - viewDate: DateType; - locale: Locale; - generateConfig: GenerateConfig; - - onPrevYear: () => void; - onNextYear: () => void; - onYearClick: () => void; -}; - -function MonthHeader(props: MonthHeaderProps) { - const { - prefixCls, - generateConfig, - locale, - viewDate, - onNextYear, - onPrevYear, - onYearClick, - } = props; - const { hideHeader } = React.useContext(PanelContext); - if (hideHeader) { - return null; - } - - const headerPrefixCls = `${prefixCls}-header`; - - return ( -
          - -
          - ); -} - -export default MonthHeader; diff --git a/src/panels/MonthPanel/index.tsx b/src/panels/MonthPanel/index.tsx deleted file mode 100644 index 75136f6ad..000000000 --- a/src/panels/MonthPanel/index.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import * as React from 'react'; -import MonthHeader from './MonthHeader'; -import MonthBody, { MONTH_COL_COUNT } from './MonthBody'; -import type { CellRender, PanelSharedProps } from '../../interface'; -import { createKeyDownHandler } from '../../utils/uiUtil'; - -export type MonthPanelProps = { - cellRender?: CellRender; -} & PanelSharedProps; - -function MonthPanel(props: MonthPanelProps) { - const { - prefixCls, - operationRef, - onViewDateChange, - generateConfig, - value, - viewDate, - onPanelChange, - onSelect, - } = props; - - const panelPrefixCls = `${prefixCls}-month-panel`; - - // ======================= Keyboard ======================= - operationRef.current = { - onKeyDown: event => - createKeyDownHandler(event, { - onLeftRight: diff => { - onSelect(generateConfig.addMonth(value || viewDate, diff), 'key'); - }, - onCtrlLeftRight: diff => { - onSelect(generateConfig.addYear(value || viewDate, diff), 'key'); - }, - onUpDown: diff => { - onSelect( - generateConfig.addMonth(value || viewDate, diff * MONTH_COL_COUNT), - 'key', - ); - }, - onEnter: () => { - onPanelChange('date', value || viewDate); - }, - }), - }; - - // ==================== View Operation ==================== - const onYearChange = (diff: number) => { - const newDate = generateConfig.addYear(viewDate, diff); - onViewDateChange(newDate); - onPanelChange(null, newDate); - }; - - return ( -
          - { - onYearChange(-1); - }} - onNextYear={() => { - onYearChange(1); - }} - onYearClick={() => { - onPanelChange('year', viewDate); - }} - /> - - {...props} - prefixCls={prefixCls} - onSelect={date => { - onSelect(date, 'mouse'); - onPanelChange('date', date); - }} - /> -
          - ); -} - -export default MonthPanel; diff --git a/src/panels/PanelBody.tsx b/src/panels/PanelBody.tsx deleted file mode 100644 index ada960532..000000000 --- a/src/panels/PanelBody.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import classNames from 'classnames'; -import * as React from 'react'; -import type { GenerateConfig } from '../generate'; -import type { PanelMode } from '../interface'; -import PanelContext from '../PanelContext'; -import { getCellDateDisabled } from '../utils/dateUtil'; -import { getLastDay } from '../utils/timeUtil'; - -export type PanelBodyProps = { - prefixCls: string; - disabledDate?: (date: DateType) => boolean; - onSelect: (value: DateType) => void; - picker?: PanelMode; - - // By panel - headerCells?: React.ReactNode; - rowNum: number; - colNum: number; - baseDate: DateType; - getCellClassName: (date: DateType) => Record; - getCellDate: (date: DateType, offset: number) => DateType; - getCellText: (date: DateType) => React.ReactNode; - getCellNode?: (date: DateType, wrapperNode: React.ReactElement) => React.ReactNode; - titleCell?: (date: DateType) => string; - generateConfig: GenerateConfig; - - // Used for week panel - prefixColumn?: (date: DateType) => React.ReactNode; - rowClassName?: (date: DateType) => string; -}; - -export default function PanelBody({ - prefixCls, - disabledDate, - onSelect, - picker, - rowNum, - colNum, - prefixColumn, - rowClassName, - baseDate, - getCellClassName, - getCellText, - getCellNode, - getCellDate, - generateConfig, - titleCell, - headerCells, -}: PanelBodyProps) { - const { onDateMouseEnter, onDateMouseLeave, mode } = React.useContext(PanelContext); - - const cellPrefixCls = `${prefixCls}-cell`; - - // =============================== Body =============================== - const rows: React.ReactNode[] = []; - - for (let i = 0; i < rowNum; i += 1) { - const row: React.ReactNode[] = []; - let rowStartDate: DateType; - - for (let j = 0; j < colNum; j += 1) { - const offset = i * colNum + j; - const currentDate = getCellDate(baseDate, offset); - const disabled = getCellDateDisabled({ - cellDate: currentDate, - mode, - disabledDate, - generateConfig, - }); - - if (j === 0) { - rowStartDate = currentDate; - - if (prefixColumn) { - row.push(prefixColumn(rowStartDate)); - } - } - - const title = titleCell && titleCell(currentDate); - const inner =
          {getCellText(currentDate)}
          ; - row.push( - { - if (!disabled) { - onSelect(currentDate); - } - }} - onMouseEnter={() => { - if (!disabled && onDateMouseEnter) { - onDateMouseEnter(currentDate); - } - }} - onMouseLeave={() => { - if (!disabled && onDateMouseLeave) { - onDateMouseLeave(currentDate); - } - }} - > - {getCellNode ? getCellNode(currentDate, inner) : inner} - , - ); - } - - rows.push( - - {row} - , - ); - } - - return ( -
          - - {headerCells && ( - - {headerCells} - - )} - {rows} -
          -
          - ); -} diff --git a/src/panels/QuarterPanel/QuarterBody.tsx b/src/panels/QuarterPanel/QuarterBody.tsx deleted file mode 100644 index 81264290c..000000000 --- a/src/panels/QuarterPanel/QuarterBody.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import * as React from 'react'; -import type { GenerateConfig } from '../../generate'; -import type { CellRender, Locale } from '../../interface'; -import { formatValue, isSameQuarter } from '../../utils/dateUtil'; -import RangeContext from '../../RangeContext'; -import useCellClassName from '../../hooks/useCellClassName'; -import PanelBody from '../PanelBody'; - -export const QUARTER_COL_COUNT = 4; -const QUARTER_ROW_COUNT = 1; - -export type QuarterBodyProps = { - prefixCls: string; - locale: Locale; - generateConfig: GenerateConfig; - value?: DateType | null; - viewDate: DateType; - disabledDate?: (date: DateType) => boolean; - onSelect: (value: DateType) => void; - cellRender?: CellRender; -}; - -function QuarterBody(props: QuarterBodyProps) { - const { prefixCls, locale, value, viewDate, generateConfig, cellRender } = props; - - const { rangedValue, hoverRangedValue } = React.useContext(RangeContext); - - const cellPrefixCls = `${prefixCls}-cell`; - - const getCellClassName = useCellClassName({ - cellPrefixCls, - value, - generateConfig, - rangedValue, - hoverRangedValue, - isSameCell: (current, target) => isSameQuarter(generateConfig, current, target), - isInView: () => true, - offsetCell: (date, offset) => generateConfig.addMonth(date, offset * 3), - }); - - const baseQuarter = generateConfig.setDate(generateConfig.setMonth(viewDate, 0), 1); - - - const getCellNode = cellRender - ? (date: DateType, wrapperNode: React.ReactElement) => - cellRender(date, { - originNode: wrapperNode, - locale, - today: generateConfig.getNow(), - type: 'quarter', - }) - : undefined; - - return ( - - formatValue(date, { - locale, - format: locale.cellQuarterFormat || '[Q]Q', - generateConfig, - }) - } - getCellClassName={getCellClassName} - getCellDate={(date, offset) => generateConfig.addMonth(date, offset * 3)} - titleCell={date => - formatValue(date, { - locale, - format: 'YYYY-[Q]Q', - generateConfig, - }) - } - /> - ); -} - -export default QuarterBody; diff --git a/src/panels/QuarterPanel/QuarterHeader.tsx b/src/panels/QuarterPanel/QuarterHeader.tsx deleted file mode 100644 index aeb707815..000000000 --- a/src/panels/QuarterPanel/QuarterHeader.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react'; -import Header from '../Header'; -import type { Locale } from '../../interface'; -import type { GenerateConfig } from '../../generate'; -import PanelContext from '../../PanelContext'; -import { formatValue } from '../../utils/dateUtil'; - -export type QuarterHeaderProps = { - prefixCls: string; - viewDate: DateType; - locale: Locale; - generateConfig: GenerateConfig; - - onPrevYear: () => void; - onNextYear: () => void; - onYearClick: () => void; -}; - -function QuarterHeader(props: QuarterHeaderProps) { - const { - prefixCls, - generateConfig, - locale, - viewDate, - onNextYear, - onPrevYear, - onYearClick, - } = props; - const { hideHeader } = React.useContext(PanelContext); - if (hideHeader) { - return null; - } - - const headerPrefixCls = `${prefixCls}-header`; - return ( -
          - -
          - ); -} - -export default QuarterHeader; diff --git a/src/panels/QuarterPanel/index.tsx b/src/panels/QuarterPanel/index.tsx deleted file mode 100644 index 88dab5093..000000000 --- a/src/panels/QuarterPanel/index.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import * as React from 'react'; -import QuarterHeader from './QuarterHeader'; -import QuarterBody from './QuarterBody'; -import type { CellRender, PanelSharedProps } from '../../interface'; -import { createKeyDownHandler } from '../../utils/uiUtil'; - -export type QuarterPanelProps = { - cellRender?: CellRender; -} & PanelSharedProps; - -function QuarterPanel(props: QuarterPanelProps) { - const { - prefixCls, - operationRef, - onViewDateChange, - generateConfig, - value, - viewDate, - onPanelChange, - onSelect, - } = props; - - const panelPrefixCls = `${prefixCls}-quarter-panel`; - - // ======================= Keyboard ======================= - operationRef.current = { - onKeyDown: event => - createKeyDownHandler(event, { - onLeftRight: diff => { - onSelect(generateConfig.addMonth(value || viewDate, diff * 3), 'key'); - }, - onCtrlLeftRight: diff => { - onSelect(generateConfig.addYear(value || viewDate, diff), 'key'); - }, - onUpDown: diff => { - onSelect(generateConfig.addYear(value || viewDate, diff), 'key'); - }, - }), - }; - - // ==================== View Operation ==================== - const onYearChange = (diff: number) => { - const newDate = generateConfig.addYear(viewDate, diff); - onViewDateChange(newDate); - onPanelChange(null, newDate); - }; - - return ( -
          - { - onYearChange(-1); - }} - onNextYear={() => { - onYearChange(1); - }} - onYearClick={() => { - onPanelChange('year', viewDate); - }} - /> - - {...props} - prefixCls={prefixCls} - onSelect={date => { - onSelect(date, 'mouse'); - }} - /> -
          - ); -} - -export default QuarterPanel; diff --git a/src/panels/TimePanel/TimeBody.tsx b/src/panels/TimePanel/TimeBody.tsx deleted file mode 100644 index 15a501b0b..000000000 --- a/src/panels/TimePanel/TimeBody.tsx +++ /dev/null @@ -1,283 +0,0 @@ -import useMemo from 'rc-util/lib/hooks/useMemo'; -import * as React from 'react'; -import type { SharedTimeProps } from '.'; -import type { GenerateConfig } from '../../generate'; -import useTimeSelection from '../../hooks/useTimeSelection'; -import type { CellRender, Locale, OnSelect } from '../../interface'; -import { leftPad } from '../../utils/miscUtil'; -import type { Unit } from './TimeUnitColumn'; -import TimeUnitColumn from './TimeUnitColumn'; - -function shouldUnitsUpdate(prevUnits: Unit[], nextUnits: Unit[]) { - if (prevUnits.length !== nextUnits.length) return true; - // if any unit's disabled status is different, the units should be re-evaluted - for (let i = 0; i < prevUnits.length; i += 1) { - if (prevUnits[i].disabled !== nextUnits[i].disabled) return true; - } - return false; -} - -function generateUnits( - start: number, - end: number, - step: number, - disabledUnits: number[] | undefined, -) { - const units: Unit[] = []; - const integerStep = step >= 1 ? step | 0 : 1; - for (let i = start; i <= end; i += integerStep) { - units.push({ - label: leftPad(i, 2), - value: i, - disabled: (disabledUnits || []).includes(i), - }); - } - return units; -} - -export type BodyOperationRef = { - onUpDown: (diff: number) => void; -}; - -export type TimeBodyProps = { - prefixCls: string; - locale: Locale; - generateConfig: GenerateConfig; - value?: DateType | null; - onSelect: OnSelect; - activeColumnIndex: number; - operationRef: React.MutableRefObject; - cellRender?: CellRender; -} & SharedTimeProps; - -function TimeBody(props: TimeBodyProps) { - const { - generateConfig, - prefixCls, - operationRef, - activeColumnIndex, - value, - showHour, - showMinute, - showSecond, - use12Hours, - hourStep = 1, - minuteStep = 1, - secondStep = 1, - disabledHours, - disabledMinutes, - disabledSeconds, - disabledTime, - hideDisabledOptions, - onSelect, - cellRender, - locale, - } = props; - - // Misc - const columns: { - node: React.ReactElement; - value: number; - units: Unit[]; - onSelect: (diff: number) => void; - }[] = []; - const contentPrefixCls = `${prefixCls}-content`; - const columnPrefixCls = `${prefixCls}-time-panel`; - - let isPM: boolean | undefined; - const originHour = value ? generateConfig.getHour(value) : -1; - let hour = originHour; - const minute = value ? generateConfig.getMinute(value) : -1; - const second = value ? generateConfig.getSecond(value) : -1; - - // Disabled Time - const now = generateConfig.getNow(); - const [mergedDisabledHours, mergedDisabledMinutes, mergedDisabledSeconds] = React.useMemo(() => { - if (disabledTime) { - const disabledConfig = disabledTime(now); - return [ - disabledConfig.disabledHours, - disabledConfig.disabledMinutes, - disabledConfig.disabledSeconds, - ]; - } - - return [disabledHours, disabledMinutes, disabledSeconds]; - }, [disabledHours, disabledMinutes, disabledSeconds, disabledTime, now]); - - // ========================= Unit ========================= - const rawHours = generateUnits(0, 23, hourStep, mergedDisabledHours && mergedDisabledHours()); - - const memorizedRawHours = useMemo(() => rawHours, rawHours, shouldUnitsUpdate); - - // Should additional logic to handle 12 hours - if (use12Hours) { - isPM = hour >= 12; // -1 means should display AM - hour %= 12; - } - - const [AMDisabled, PMDisabled] = React.useMemo(() => { - if (!use12Hours) { - return [false, false]; - } - const AMPMDisabled = [true, true]; - memorizedRawHours.forEach(({ disabled, value: hourValue }) => { - if (disabled) return; - if (hourValue >= 12) { - AMPMDisabled[1] = false; - } else { - AMPMDisabled[0] = false; - } - }); - return AMPMDisabled; - }, [use12Hours, memorizedRawHours]); - - const hours = React.useMemo(() => { - if (!use12Hours) return memorizedRawHours; - return memorizedRawHours - .filter(isPM ? (hourMeta) => hourMeta.value >= 12 : (hourMeta) => hourMeta.value < 12) - .map((hourMeta) => { - const hourValue = hourMeta.value % 12; - const hourLabel = hourValue === 0 ? '12' : leftPad(hourValue, 2); - return { - ...hourMeta, - label: hourLabel, - value: hourValue, - }; - }); - }, [use12Hours, isPM, memorizedRawHours]); - - const minutes = generateUnits( - 0, - 59, - minuteStep, - mergedDisabledMinutes && mergedDisabledMinutes(originHour), - ); - - const seconds = generateUnits( - 0, - 59, - secondStep, - mergedDisabledSeconds && mergedDisabledSeconds(originHour, minute), - ); - - // Set Time - const setTime = useTimeSelection({ - value, - generateConfig, - disabledMinutes: mergedDisabledMinutes, - disabledSeconds: mergedDisabledSeconds, - minutes, - seconds, - use12Hours, - }); - - // ====================== Operations ====================== - operationRef.current = { - onUpDown: (diff) => { - const column = columns[activeColumnIndex]; - if (column) { - const valueIndex = column.units.findIndex((unit) => unit.value === column.value); - - const unitLen = column.units.length; - for (let i = 1; i < unitLen; i += 1) { - const nextUnit = column.units[(valueIndex + diff * i + unitLen) % unitLen]; - - if (nextUnit.disabled !== true) { - column.onSelect(nextUnit.value); - break; - } - } - } - }, - }; - - // ======================== Render ======================== - function addColumnNode( - condition: boolean | undefined, - node: React.ReactElement, - columnValue: number, - units: Unit[], - onColumnSelect: (diff: number) => void, - ) { - if (condition !== false) { - columns.push({ - node: React.cloneElement(node, { - prefixCls: columnPrefixCls, - value: columnValue, - active: activeColumnIndex === columns.length, - onSelect: onColumnSelect, - units, - hideDisabledOptions, - }), - onSelect: onColumnSelect, - value: columnValue, - units, - }); - } - } - - // Hour - addColumnNode( - showHour, - key="hour" type="hour" info={{ today: now, locale, cellRender }} />, - hour, - hours, - (num) => { - onSelect(setTime(isPM, num, minute, second), 'mouse'); - }, - ); - - // Minute - addColumnNode( - showMinute, - - key="minute" - type="minute" - info={{ today: now, locale, cellRender }} - />, - minute, - minutes, - (num) => { - onSelect(setTime(isPM, hour, num, second), 'mouse'); - }, - ); - - // Second - addColumnNode( - showSecond, - - key="second" - type="second" - info={{ today: now, locale, cellRender }} - />, - second, - seconds, - (num) => { - onSelect(setTime(isPM, hour, minute, num), 'mouse'); - }, - ); - - // 12 Hours - let PMIndex = -1; - if (typeof isPM === 'boolean') { - PMIndex = isPM ? 1 : 0; - } - - addColumnNode( - use12Hours === true, - , - PMIndex, - [ - { label: 'AM', value: 0, disabled: AMDisabled }, - { label: 'PM', value: 1, disabled: PMDisabled }, - ], - (num) => { - onSelect(setTime(!!num, hour, minute, second), 'mouse'); - }, - ); - - return
          {columns.map(({ node }) => node)}
          ; -} - -export default TimeBody; diff --git a/src/panels/TimePanel/TimeHeader.tsx b/src/panels/TimePanel/TimeHeader.tsx deleted file mode 100644 index d8ee90da3..000000000 --- a/src/panels/TimePanel/TimeHeader.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import * as React from 'react'; -import Header from '../Header'; -import type { Locale } from '../../interface'; -import type { GenerateConfig } from '../../generate'; -import PanelContext from '../../PanelContext'; -import { formatValue } from '../../utils/dateUtil'; - -export type TimeHeaderProps = { - prefixCls: string; - value?: DateType | null; - locale: Locale; - generateConfig: GenerateConfig; - format: string; -}; - -function TimeHeader(props: TimeHeaderProps) { - const { hideHeader } = React.useContext(PanelContext); - if (hideHeader) { - return null; - } - - const { prefixCls, generateConfig, locale, value, format } = props; - const headerPrefixCls = `${prefixCls}-header`; - - return ( -
          - {value - ? formatValue(value, { - locale, - format, - generateConfig, - }) - : '\u00A0'} -
          - ); -} - -export default TimeHeader; diff --git a/src/panels/TimePanel/TimeUnitColumn.tsx b/src/panels/TimePanel/TimeUnitColumn.tsx deleted file mode 100644 index 5ff0ea82b..000000000 --- a/src/panels/TimePanel/TimeUnitColumn.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import * as React from 'react'; -import { useRef, useLayoutEffect } from 'react'; -import classNames from 'classnames'; -import { scrollTo, waitElementReady } from '../../utils/uiUtil'; -import PanelContext from '../../PanelContext'; -import type { CellRender, Locale } from '../../interface'; - -export type Unit = { - label: React.ReactText; - value: number; - disabled: boolean; -}; - -export type TimeUnitColumnProps = { - prefixCls?: string; - units?: Unit[]; - value?: number; - active?: boolean; - hideDisabledOptions?: boolean; - onSelect?: (value: number) => void; - type: 'hour' | 'minute' | 'second' | 'meridiem'; - info: { - today: DateType, - locale: Locale, - cellRender: CellRender, - } -}; - -function TimeUnitColumn(props: TimeUnitColumnProps) { - const { prefixCls, units, onSelect, value, active, hideDisabledOptions, info, type } = props; - const cellPrefixCls = `${prefixCls}-cell`; - const { open } = React.useContext(PanelContext); - - const ulRef = useRef(null); - const liRefs = useRef>(new Map()); - const scrollRef = useRef(); - - // `useLayoutEffect` here to avoid blink by duration is 0 - useLayoutEffect(() => { - const li = liRefs.current.get(value!); - if (li && open !== false) { - scrollTo(ulRef.current!, li.offsetTop, 120); - } - }, [value]); - - useLayoutEffect(() => { - if (open) { - const li = liRefs.current.get(value!); - if (li) { - scrollRef.current = waitElementReady(li, () => { - scrollTo(ulRef.current!, li.offsetTop, 0); - }); - } - } - - return () => { - scrollRef.current?.(); - }; - }, [open]); - - return ( -
            - {units!.map((unit) => { - if (hideDisabledOptions && unit.disabled) { - return null; - } - - return ( -
          • { - liRefs.current.set(unit.value, element); - }} - className={classNames(cellPrefixCls, { - [`${cellPrefixCls}-disabled`]: unit.disabled, - [`${cellPrefixCls}-selected`]: value === unit.value, - })} - onClick={() => { - if (unit.disabled) { - return; - } - onSelect!(unit.value); - }} - > - {info.cellRender ? info.cellRender(unit.value, { - today: info.today, - locale: info.locale, - originNode:
            {unit.label}
            , - type: 'time', - subType: type - }) :
            {unit.label}
            } - -
            • - ); - })} -
          - ); -} - -export default TimeUnitColumn; diff --git a/src/panels/TimePanel/index.tsx b/src/panels/TimePanel/index.tsx deleted file mode 100644 index 2a2c3d236..000000000 --- a/src/panels/TimePanel/index.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import classNames from 'classnames'; -import * as React from 'react'; -import type { DisabledTimes, IntRange, PanelSharedProps } from '../../interface'; -import { createKeyDownHandler } from '../../utils/uiUtil'; -import type { BodyOperationRef, TimeBodyProps } from './TimeBody'; -import TimeBody from './TimeBody'; -import TimeHeader from './TimeHeader'; - -export type SharedTimeProps = { - format?: string; - showNow?: boolean; - showHour?: boolean; - showMinute?: boolean; - showSecond?: boolean; - use12Hours?: boolean; - hourStep?: IntRange<1, 23>; - minuteStep?: IntRange<1, 59>; - secondStep?: IntRange<1, 59>; - hideDisabledOptions?: boolean; - defaultValue?: DateType; - - /** @deprecated Please use `disabledTime` instead. */ - disabledHours?: DisabledTimes['disabledHours']; - /** @deprecated Please use `disabledTime` instead. */ - disabledMinutes?: DisabledTimes['disabledMinutes']; - /** @deprecated Please use `disabledTime` instead. */ - disabledSeconds?: DisabledTimes['disabledSeconds']; - - disabledTime?: (date: DateType) => DisabledTimes; -}; - -export type TimePanelProps = { - format?: string; - active?: boolean; -} & PanelSharedProps & - SharedTimeProps & - Pick, 'cellRender'>; - -const countBoolean = (boolList: (boolean | undefined)[]) => - boolList.filter((bool) => bool !== false).length; - -function TimePanel(props: TimePanelProps) { - const { - generateConfig, - format = 'HH:mm:ss', - prefixCls, - active, - operationRef, - showHour, - showMinute, - showSecond, - use12Hours = false, - onSelect, - value, - } = props; - const panelPrefixCls = `${prefixCls}-time-panel`; - const bodyOperationRef = React.useRef(); - - // ======================= Keyboard ======================= - const [activeColumnIndex, setActiveColumnIndex] = React.useState(-1); - const columnsCount = countBoolean([showHour, showMinute, showSecond, use12Hours]); - - operationRef.current = { - onKeyDown: (event) => - createKeyDownHandler(event, { - onLeftRight: (diff) => { - setActiveColumnIndex((activeColumnIndex + diff + columnsCount) % columnsCount); - }, - onUpDown: (diff) => { - if (activeColumnIndex === -1) { - setActiveColumnIndex(0); - } else if (bodyOperationRef.current) { - bodyOperationRef.current.onUpDown(diff); - } - }, - onEnter: () => { - onSelect(value || generateConfig.getNow(), 'key'); - setActiveColumnIndex(-1); - }, - }), - - onBlur: () => { - setActiveColumnIndex(-1); - }, - }; - - return ( -
          - - -
          - ); -} - -export default TimePanel; diff --git a/src/panels/WeekPanel/index.tsx b/src/panels/WeekPanel/index.tsx deleted file mode 100644 index e780a03f7..000000000 --- a/src/panels/WeekPanel/index.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import classNames from 'classnames'; -import * as React from 'react'; -import type { CellRender, PanelSharedProps } from '../../interface'; -import PanelContext from '../../PanelContext'; -import RangeContext from '../../RangeContext'; -import { getCellDateDisabled, isInRange, isSameWeek } from '../../utils/dateUtil'; -import DatePanel from '../DatePanel'; - -export type WeekPanelProps = { - cellRender?: CellRender; -} & PanelSharedProps; - -function WeekPanel(props: WeekPanelProps) { - const { prefixCls, generateConfig, locale, value, disabledDate, onSelect } = props; - - const { rangedValue, hoverRangedValue } = React.useContext(RangeContext); - const { onDateMouseEnter, onDateMouseLeave } = React.useContext(PanelContext); - - const rangeStart = hoverRangedValue?.[0] || rangedValue?.[0]; - const rangeEnd = hoverRangedValue?.[1] || rangedValue?.[1]; - - // Render additional column - const cellPrefixCls = `${prefixCls}-cell`; - - const prefixColumn = (date: DateType) => { - // >>> Additional check for disabled - const disabled = getCellDateDisabled({ - cellDate: date, - mode: 'week', - disabledDate, - generateConfig, - }); - - return ( - { - if (!disabled) { - onSelect(date, 'mouse'); - } - }} - onMouseEnter={() => { - if (!disabled && onDateMouseEnter) { - onDateMouseEnter(date); - } - }} - onMouseLeave={() => { - if (!disabled && onDateMouseLeave) { - onDateMouseLeave(date); - } - }} - > -
          - {generateConfig.locale.getWeek(locale.locale, date)} -
          - - ); - }; - - // Add row className - const rowPrefixCls = `${prefixCls}-week-panel-row`; - - const rowClassName = (date: DateType) => { - const isRangeStart = isSameWeek(generateConfig, locale.locale, rangeStart, date); - const isRangeEnd = isSameWeek(generateConfig, locale.locale, rangeEnd, date); - return classNames(rowPrefixCls, { - [`${rowPrefixCls}-selected`]: - !rangedValue && isSameWeek(generateConfig, locale.locale, value, date), - - // Patch for hover range - [`${rowPrefixCls}-range-start`]: isRangeStart, - [`${rowPrefixCls}-range-end`]: isRangeEnd, - [`${rowPrefixCls}-range-hover`]: - !isRangeStart && !isRangeEnd && isInRange(generateConfig, rangeStart, rangeEnd, date), - }); - }; - - return ( - false} - /> - ); -} - -export default WeekPanel; diff --git a/src/panels/YearPanel/YearBody.tsx b/src/panels/YearPanel/YearBody.tsx deleted file mode 100644 index 417ff5726..000000000 --- a/src/panels/YearPanel/YearBody.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import * as React from 'react'; -import type { GenerateConfig } from '../../generate'; -import { YEAR_DECADE_COUNT } from './constant'; -import type { CellRender, Locale, NullableDateType } from '../../interface'; -import useCellClassName from '../../hooks/useCellClassName'; -import { formatValue, isSameYear } from '../../utils/dateUtil'; -import RangeContext from '../../RangeContext'; -import PanelBody from '../PanelBody'; - -export const YEAR_COL_COUNT = 3; -const YEAR_ROW_COUNT = 4; - -export type YearBodyProps = { - prefixCls: string; - locale: Locale; - generateConfig: GenerateConfig; - value?: NullableDateType; - viewDate: DateType; - disabledDate?: (date: DateType) => boolean; - onSelect: (value: DateType) => void; - cellRender?: CellRender; -}; - -function YearBody(props: YearBodyProps) { - const { prefixCls, value, viewDate, locale, generateConfig, cellRender } = props; - const { rangedValue, hoverRangedValue } = React.useContext(RangeContext); - - const yearPrefixCls = `${prefixCls}-cell`; - - // =============================== Year =============================== - const yearNumber = generateConfig.getYear(viewDate); - const startYear = Math.floor(yearNumber / YEAR_DECADE_COUNT) * YEAR_DECADE_COUNT; - const endYear = startYear + YEAR_DECADE_COUNT - 1; - const baseYear = generateConfig.setYear( - viewDate, - startYear - Math.ceil((YEAR_COL_COUNT * YEAR_ROW_COUNT - YEAR_DECADE_COUNT) / 2), - ); - const today = generateConfig.getNow(); - - const isInView = (date: DateType) => { - const currentYearNumber = generateConfig.getYear(date); - return startYear <= currentYearNumber && currentYearNumber <= endYear; - }; - - const getCellClassName = useCellClassName({ - cellPrefixCls: yearPrefixCls, - value, - generateConfig, - rangedValue, - hoverRangedValue, - isSameCell: (current, target) => isSameYear(generateConfig, current, target), - isInView, - offsetCell: (date, offset) => generateConfig.addYear(date, offset), - }); - - - const getCellNode = cellRender - ? (date: DateType, wrapperNode: React.ReactElement) => - cellRender(date, { - originNode: wrapperNode, - today, - type: 'year', - locale - }) - : undefined; - - return ( - - formatValue(date, { - locale, - format: 'YYYY', - generateConfig, - }) - } - /> - ); -} - -export default YearBody; diff --git a/src/panels/YearPanel/YearHeader.tsx b/src/panels/YearPanel/YearHeader.tsx deleted file mode 100644 index a727bca13..000000000 --- a/src/panels/YearPanel/YearHeader.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Header from '../Header'; -import type { GenerateConfig } from '../../generate'; -import { YEAR_DECADE_COUNT } from './constant'; -import PanelContext from '../../PanelContext'; - -export type YearHeaderProps = { - prefixCls: string; - viewDate: DateType; - value?: DateType | null; - generateConfig: GenerateConfig; - - onPrevDecade: () => void; - onNextDecade: () => void; - onDecadeClick: () => void; -}; - -function YearHeader(props: YearHeaderProps) { - const { prefixCls, generateConfig, viewDate, onPrevDecade, onNextDecade, onDecadeClick } = props; - const { hideHeader } = React.useContext(PanelContext); - if (hideHeader) { - return null; - } - - const headerPrefixCls = `${prefixCls}-header`; - - const yearNumber = generateConfig.getYear(viewDate); - const startYear = Math.floor(yearNumber / YEAR_DECADE_COUNT) * YEAR_DECADE_COUNT; - const endYear = startYear + YEAR_DECADE_COUNT - 1; - - return ( -
          - -
          - ); -} - -export default YearHeader; diff --git a/src/panels/YearPanel/constant.ts b/src/panels/YearPanel/constant.ts deleted file mode 100644 index a63d1039d..000000000 --- a/src/panels/YearPanel/constant.ts +++ /dev/null @@ -1 +0,0 @@ -export const YEAR_DECADE_COUNT = 10; \ No newline at end of file diff --git a/src/panels/YearPanel/index.tsx b/src/panels/YearPanel/index.tsx deleted file mode 100644 index da777a745..000000000 --- a/src/panels/YearPanel/index.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import * as React from 'react'; -import YearHeader from './YearHeader'; -import YearBody, { YEAR_COL_COUNT } from './YearBody'; -import type { PanelSharedProps, PanelMode, CellRender } from '../../interface'; -import { createKeyDownHandler } from '../../utils/uiUtil'; -import { YEAR_DECADE_COUNT } from './constant'; - -export type YearPanelProps = { - sourceMode: PanelMode; - cellRender?: CellRender; -} & PanelSharedProps; - -export { YEAR_DECADE_COUNT }; - -function YearPanel(props: YearPanelProps) { - const { - prefixCls, - operationRef, - onViewDateChange, - generateConfig, - value, - viewDate, - sourceMode, - onSelect, - onPanelChange, - } = props; - - const panelPrefixCls = `${prefixCls}-year-panel`; - - // ======================= Keyboard ======================= - operationRef.current = { - onKeyDown: event => - createKeyDownHandler(event, { - onLeftRight: diff => { - onSelect(generateConfig.addYear(value || viewDate, diff), 'key'); - }, - onCtrlLeftRight: diff => { - onSelect( - generateConfig.addYear(value || viewDate, diff * YEAR_DECADE_COUNT), - 'key', - ); - }, - onUpDown: diff => { - onSelect( - generateConfig.addYear(value || viewDate, diff * YEAR_COL_COUNT), - 'key', - ); - }, - onEnter: () => { - onPanelChange( - sourceMode === 'date' ? 'date' : 'month', - value || viewDate, - ); - }, - }), - }; - - // ==================== View Operation ==================== - const onDecadeChange = (diff: number) => { - const newDate = generateConfig.addYear(viewDate, diff * 10); - onViewDateChange(newDate); - onPanelChange(null, newDate); - }; - - return ( -
          - { - onDecadeChange(-1); - }} - onNextDecade={() => { - onDecadeChange(1); - }} - onDecadeClick={() => { - onPanelChange('decade', viewDate); - }} - /> - { - onPanelChange(sourceMode === 'date' ? 'date' : 'month', date); - onSelect(date, 'mouse'); - }} - /> -
          - ); -} - -export default YearPanel; diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts index 23bafa3c7..0080749c5 100644 --- a/src/utils/dateUtil.ts +++ b/src/utils/dateUtil.ts @@ -1,7 +1,11 @@ import type { GenerateConfig } from '../generate'; -import type { CustomFormat, Locale, NullableDateType, PanelMode, PickerMode } from '../interface'; -import type { InternalMode } from '../NewPicker/interface'; -import { DECADE_UNIT_DIFF } from '../panels/DecadePanel/constant'; +import type { + CustomFormat, + InternalMode, + Locale, + NullableDateType, + PickerMode, +} from '../NewPicker/interface'; export const WEEK_DAY_COUNT = 7; @@ -290,93 +294,3 @@ export function parseValue( return generateConfig.locale.parse(locale.locale, value, formatList as string[]); } - -// eslint-disable-next-line consistent-return -export function getCellDateDisabled({ - cellDate, - mode, - disabledDate, - generateConfig, -}: { - cellDate: DateType; - mode: Omit; - generateConfig: GenerateConfig; - disabledDate?: (date: DateType) => boolean; -}): boolean { - if (!disabledDate) return false; - // Whether cellDate is disabled in range - const getDisabledFromRange = ( - currentMode: 'date' | 'month' | 'year', - start: number, - end: number, - ) => { - let current = start; - while (current <= end) { - let date: DateType; - switch (currentMode) { - case 'date': { - date = generateConfig.setDate(cellDate, current); - if (!disabledDate(date)) { - return false; - } - break; - } - case 'month': { - date = generateConfig.setMonth(cellDate, current); - if ( - !getCellDateDisabled({ - cellDate: date, - mode: 'month', - generateConfig, - disabledDate, - }) - ) { - return false; - } - break; - } - case 'year': { - date = generateConfig.setYear(cellDate, current); - if ( - !getCellDateDisabled({ - cellDate: date, - mode: 'year', - generateConfig, - disabledDate, - }) - ) { - return false; - } - break; - } - } - current += 1; - } - return true; - }; - switch (mode) { - case 'date': - case 'week': { - return disabledDate(cellDate); - } - case 'month': { - const startDate = 1; - const endDate = generateConfig.getDate(generateConfig.getEndDate(cellDate)); - return getDisabledFromRange('date', startDate, endDate); - } - case 'quarter': { - const startMonth = Math.floor(generateConfig.getMonth(cellDate) / 3) * 3; - const endMonth = startMonth + 2; - return getDisabledFromRange('month', startMonth, endMonth); - } - case 'year': { - return getDisabledFromRange('month', 0, 11); - } - case 'decade': { - const year = generateConfig.getYear(cellDate); - const startYear = Math.floor(year / DECADE_UNIT_DIFF) * DECADE_UNIT_DIFF; - const endYear = startYear + DECADE_UNIT_DIFF - 1; - return getDisabledFromRange('year', startYear, endYear); - } - } -} From 45228645fced33a1bd92907d822763e30914d07c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 15:01:38 +0800 Subject: [PATCH 343/380] chore: clean up --- src/utils/miscUtil.ts | 27 --------------------------- 1 file changed, 27 deletions(-) diff --git a/src/utils/miscUtil.ts b/src/utils/miscUtil.ts index 0c1b7273e..bfdfe2bf3 100644 --- a/src/utils/miscUtil.ts +++ b/src/utils/miscUtil.ts @@ -18,30 +18,3 @@ export function toArray(val: T | T[]): T[] { return Array.isArray(val) ? val : [val]; } - -export function getValue(values: null | undefined | (T | null)[], index: number): T | null { - return values ? values[index] : null; -} - -type UpdateValue = (prev: T) => T; - -export function updateValues( - values: [T | null, T | null] | null, - value: T | UpdateValue, - index: number, -): R { - const newValues: [T | null, T | null] = [getValue(values, 0), getValue(values, 1)]; - - newValues[index] = - typeof value === 'function' ? (value as UpdateValue)(newValues[index]) : value; - - if (!newValues[0] && !newValues[1]) { - return null as unknown as R; - } - - return newValues as unknown as R; -} - -export function executeValue(value: T | (() => T)): T { - return typeof value === 'function' ? (value as () => T)() : value; -} From e6ff34f03a59ababcc5ea9a22da75647315f4b6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 15:03:51 +0800 Subject: [PATCH 344/380] clean up --- src/utils/timeUtil.ts | 27 --------------- tests/util.spec.tsx | 76 ------------------------------------------- 2 files changed, 103 deletions(-) delete mode 100644 tests/util.spec.tsx diff --git a/src/utils/timeUtil.ts b/src/utils/timeUtil.ts index 3b4051824..0b9e5dc61 100644 --- a/src/utils/timeUtil.ts +++ b/src/utils/timeUtil.ts @@ -1,4 +1,3 @@ -import type { NullableDateType } from '../interface'; import type { GenerateConfig } from '../generate'; export function setTime( @@ -14,32 +13,6 @@ export function setTime( return nextTime; } -export function setDateTime( - generateConfig: GenerateConfig, - date: DateType, - defaultDate: NullableDateType, -) { - if (!defaultDate) { - return date; - } - - let newDate = date; - newDate = generateConfig.setHour( - newDate, - generateConfig.getHour(defaultDate), - ); - newDate = generateConfig.setMinute( - newDate, - generateConfig.getMinute(defaultDate), - ); - newDate = generateConfig.setSecond( - newDate, - generateConfig.getSecond(defaultDate), - ); - return newDate; -} - - export function getLowerBoundTime( hour: number, minute: number, diff --git a/tests/util.spec.tsx b/tests/util.spec.tsx deleted file mode 100644 index 0348574ee..000000000 --- a/tests/util.spec.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import momentGenerateConfig from '../src/generate/moment'; -import { getLowerBoundTime, setTime, getLastDay } from '../src/utils/timeUtil'; -import { toArray } from '../src/utils/miscUtil'; -import { isSameTime, isSameDecade } from '../src/utils/dateUtil'; -import { getMoment } from './util/commonUtil'; - -describe('Picker.Util', () => { - it('toArray', () => { - expect(toArray(null)).toEqual([]); - expect(toArray(undefined)).toEqual([]); - expect(toArray([1])).toEqual([1]); - expect(toArray(1)).toEqual([1]); - }); - - // Time is only for time - it('isSameTime', () => { - expect( - isSameTime(momentGenerateConfig, getMoment('2000-01-01'), getMoment('1989-11-28')), - ).toBeTruthy(); - - expect(isSameTime(momentGenerateConfig, null, getMoment('1989-11-28'))).toBeFalsy(); - - expect(isSameTime(momentGenerateConfig, null, null)).toBeTruthy(); - }); - - it('isSameDecade', () => { - expect(isSameDecade(momentGenerateConfig, null, null)).toBeTruthy(); - expect(isSameDecade(momentGenerateConfig, getMoment('2000-01-02'), null)).toBeFalsy(); - expect( - isSameDecade(momentGenerateConfig, getMoment('1995-01-01'), getMoment('1999-01-01')), - ).toBeTruthy(); - }); - - describe('getLowerBoundTime', () => { - it('basic case', () => { - expect(getLowerBoundTime(23, 59, 59, 1, 1, 1)).toEqual([23, 59, 59]); - }); - it('case to lower hour #1', () => { - expect(getLowerBoundTime(1, 4, 5, 4, 15, 15)).toEqual([0, 45, 45]); - }); - it('case to lower hour #2', () => { - expect(getLowerBoundTime(3, 4, 5, 4, 15, 15)).toEqual([0, 45, 45]); - }); - it('case to same hour, lower minute #1', () => { - expect(getLowerBoundTime(1, 31, 5, 1, 15, 15)).toEqual([1, 30, 45]); - }); - it('case to same hour, lower minute #2', () => { - expect(getLowerBoundTime(1, 44, 5, 1, 15, 15)).toEqual([1, 30, 45]); - }); - it('case to same hour, same minute, lower second #1', () => { - expect(getLowerBoundTime(1, 44, 5, 1, 1, 15)).toEqual([1, 44, 0]); - }); - it('case to same hour, same minute, lower second #2', () => { - expect(getLowerBoundTime(1, 44, 14, 1, 1, 15)).toEqual([1, 44, 0]); - }); - }); - - describe('setTime', () => { - expect( - isSameTime( - momentGenerateConfig, - setTime(momentGenerateConfig, getMoment('1995-01-01 00:00:00'), 8, 7, 6), - getMoment('1995-01-01 08:07:06'), - ), - ).toBeTruthy(); - }); - - describe('getLastDay', () => { - expect( - getLastDay( - momentGenerateConfig, - getMoment('2020-10-01'), - ), - ).toEqual('2020-10-31'); - }); -}); From f4c78902ab4caf226e3222ea74d7db4f7a5ac70b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 15:10:42 +0800 Subject: [PATCH 345/380] clean up --- jest.config.js | 2 +- src/utils/dateUtil.ts | 52 +------------------------------ src/utils/timeUtil.ts | 43 -------------------------- tests/util/commonUtil.tsx | 65 ++++++--------------------------------- 4 files changed, 11 insertions(+), 151 deletions(-) delete mode 100644 src/utils/timeUtil.ts diff --git a/jest.config.js b/jest.config.js index 722f3535a..573194827 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,4 +1,4 @@ module.exports = { setupFiles: ['./tests/setup.js'], - coveragePathIgnorePatterns: ['src/locale/'], + coveragePathIgnorePatterns: ['src/locale/', 'tests/'], }; diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts index 0080749c5..c8e355da6 100644 --- a/src/utils/dateUtil.ts +++ b/src/utils/dateUtil.ts @@ -1,11 +1,5 @@ import type { GenerateConfig } from '../generate'; -import type { - CustomFormat, - InternalMode, - Locale, - NullableDateType, - PickerMode, -} from '../NewPicker/interface'; +import type { CustomFormat, InternalMode, Locale, NullableDateType } from '../NewPicker/interface'; export const WEEK_DAY_COUNT = 7; @@ -190,14 +184,6 @@ export function isSame( } } -export function isEqual( - generateConfig: GenerateConfig, - value1: NullableDateType, - value2: NullableDateType, -) { - return isSameDate(generateConfig, value1, value2) && isSameTime(generateConfig, value1, value2); -} - /** Between in date but not equal of date */ export function isInRange( generateConfig: GenerateConfig, @@ -238,23 +224,6 @@ export function getWeekStartDate( return alignStartDate; } -export function getClosingViewDate( - viewDate: DateType, - picker: PickerMode, - generateConfig: GenerateConfig, - offset: number = 1, -): DateType { - switch (picker) { - case 'year': - return generateConfig.addYear(viewDate, offset * 10); - case 'quarter': - case 'month': - return generateConfig.addYear(viewDate, offset); - default: - return generateConfig.addMonth(viewDate, offset); - } -} - export function formatValue( value: DateType, { @@ -275,22 +244,3 @@ export function formatValue( ? format(value) : generateConfig.locale.format(locale.locale, value, format); } - -export function parseValue( - value: string, - { - generateConfig, - locale, - formatList, - }: { - generateConfig: GenerateConfig; - locale: Locale; - formatList: (string | CustomFormat)[]; - }, -) { - if (!value || typeof formatList[0] === 'function') { - return null; - } - - return generateConfig.locale.parse(locale.locale, value, formatList as string[]); -} diff --git a/src/utils/timeUtil.ts b/src/utils/timeUtil.ts deleted file mode 100644 index 0b9e5dc61..000000000 --- a/src/utils/timeUtil.ts +++ /dev/null @@ -1,43 +0,0 @@ -import type { GenerateConfig } from '../generate'; - -export function setTime( - generateConfig: GenerateConfig, - date: DateType, - hour: number, - minute: number, - second: number, -): DateType { - let nextTime = generateConfig.setHour(date, hour); - nextTime = generateConfig.setMinute(nextTime, minute); - nextTime = generateConfig.setSecond(nextTime, second); - return nextTime; -} - -export function getLowerBoundTime( - hour: number, - minute: number, - second: number, - hourStep: number, - minuteStep: number, - secondStep: number, -): [number, number, number] { - const lowerBoundHour = Math.floor(hour / hourStep) * hourStep; - if (lowerBoundHour < hour) { - return [lowerBoundHour, 60 - minuteStep, 60 - secondStep]; - } - const lowerBoundMinute = Math.floor(minute / minuteStep) * minuteStep; - if (lowerBoundMinute < minute) { - return [lowerBoundHour, lowerBoundMinute, 60 - secondStep]; - } - const lowerBoundSecond = Math.floor(second / secondStep) * secondStep; - return [lowerBoundHour, lowerBoundMinute, lowerBoundSecond]; -} - -export function getLastDay(generateConfig: GenerateConfig, date: DateType) { - const year = generateConfig.getYear(date); - const month = generateConfig.getMonth(date) + 1; - const endDate = generateConfig.getEndDate(generateConfig.getFixedDate(`${year}-${month}-01`)); - const lastDay = generateConfig.getDate(endDate); - const monthShow = month < 10 ? `0${month}` : `${month}`; - return `${year}-${monthShow}-${lastDay}`; -} diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 0199de1da..9a3c6a7ca 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -5,30 +5,32 @@ import dayjs, { isDayjs, type Dayjs } from 'dayjs'; import 'dayjs/locale/zh-cn'; import buddhistEra from 'dayjs/plugin/buddhistEra'; import localizedFormat from 'dayjs/plugin/localizedFormat'; -import weekOfYear from 'dayjs/plugin/weekOfYear'; import quarterOfYear from 'dayjs/plugin/quarterOfYear'; import updateLocale from 'dayjs/plugin/updateLocale'; +import weekOfYear from 'dayjs/plugin/weekOfYear'; import moment, { isMoment, type Moment } from 'moment'; -import Picker, { PickerPanel, type PickerProps } from '../../src'; +import { type PickerProps } from '../../src'; import dayGenerateConfig from '../../src/generate/dayjs'; -import momentGenerateConfig from '../../src/generate/moment'; import enUS from '../../src/locale/en_US'; import zh_CN from '../../src/locale/zh_CN'; import type { + PickerPanelProps as NewPickerPanelProps, PickerProps as NewPickerProps, PickerRef, RangePickerProps, - PickerPanelProps as NewPickerPanelProps, } from '../../src/NewPicker'; -import { Picker as NewPicker, RangePicker as NewRangePicker, PickerPanel as NewPickerPanel } from '../../src/NewPicker'; +import { + Picker as NewPicker, + PickerPanel as NewPickerPanel, + RangePicker as NewRangePicker, +} from '../../src/NewPicker'; import type { PickerBaseProps, PickerDateProps, PickerTimeProps } from '../../src/Picker'; import type { PickerPanelBaseProps, PickerPanelDateProps, PickerPanelTimeProps, - } from '../../src/PickerPanel'; -import RangePicker, { +import { type RangePickerBaseProps, type RangePickerDateProps, type RangePickerTimeProps, @@ -43,21 +45,6 @@ dayjs.extend(updateLocale); const FULL_FORMAT = 'YYYY-MM-DD HH:mm:ss'; -// export type Wrapper = ReactWrapper & { -// confirmOK: () => void; -// openPicker: (index?: number) => void; -// closePicker: (index?: number) => void; -// isOpen: () => boolean; -// findCell: (text: number | string, index?: number) => Wrapper; -// selectCell: (text: number | string, index?: number) => Wrapper; -// clearValue: (index?: number) => void; -// keyDown: (which: number, info?: object, index?: number) => void; -// clickButton: (type: 'prev' | 'next' | 'super-prev' | 'super-next') => Wrapper; -// inputValue: (text: string, index?: number) => Wrapper; -// }; - -// export const mount = originMount as (...args: Parameters) => Wrapper; - export function getMoment(str: string): Moment { const formatList = [FULL_FORMAT, 'YYYY-MM-DD', 'HH:mm:ss', 'YYYY']; for (let i = 0; i < formatList.length; i += 1) { @@ -101,52 +88,18 @@ export type MomentPickerProps = | InjectDefaultProps> | InjectDefaultProps>; -// export class MomentPicker extends React.Component { -// pickerRef = React.createRef>(); - -// render() { -// return ( -// -// generateConfig={momentGenerateConfig} -// locale={enUS} -// ref={this.pickerRef} -// {...this.props} -// /> -// ); -// } -// } - // Moment Panel Picker export type MomentPickerPanelProps = | InjectDefaultProps> | InjectDefaultProps> | InjectDefaultProps>; -// export const MomentPickerPanel = (props: MomentPickerPanelProps) => ( -// generateConfig={momentGenerateConfig} locale={enUS} {...props} /> -// ); - // Moment Range Picker export type MomentRangePickerProps = | InjectDefaultProps> | InjectDefaultProps> | InjectDefaultProps>; -// export class MomentRangePicker extends React.Component { -// rangePickerRef = React.createRef>(); - -// render() { -// return ( -// -// generateConfig={momentGenerateConfig} -// locale={enUS} -// ref={this.rangePickerRef} -// {...this.props} -// /> -// ); -// } -// } - // ====================================== UTIL ====================================== export async function waitFakeTimer() { await act(async () => { From c41b2d6ea873caf420abb33cce6849193cd5cebd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 16:13:32 +0800 Subject: [PATCH 346/380] chore: merge code --- src/utils/dateUtil.ts | 194 +++++++++++++++++++++++++++--------------- 1 file changed, 125 insertions(+), 69 deletions(-) diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts index c8e355da6..6ea34db92 100644 --- a/src/utils/dateUtil.ts +++ b/src/utils/dateUtil.ts @@ -3,14 +3,32 @@ import type { CustomFormat, InternalMode, Locale, NullableDateType } from '../Ne export const WEEK_DAY_COUNT = 7; -export function isNullEqual(value1: T, value2: T): boolean | undefined { - if (!value1 && !value2) { +// export function isNullEqual(value1: T, value2: T): boolean | undefined { +// if (!value1 && !value2) { +// return true; +// } +// if (!value1 || !value2) { +// return false; +// } +// return undefined; +// } + +/** + * Wrap the compare logic. + * This will compare the each of value is empty first. + * 1. All is empty, return true. + * 2. One is empty, return false. + * 3. return customize compare logic. + */ +function nullableCompare(value1: T, value2: T, oriCompareFn: () => boolean): boolean { + if ((!value1 && !value2) || value1 === value2) { return true; } if (!value1 || !value2) { return false; } - return undefined; + + return oriCompareFn(); } export function isSameDecade( @@ -18,14 +36,11 @@ export function isSameDecade( decade1: NullableDateType, decade2: NullableDateType, ) { - const equal = isNullEqual(decade1, decade2); - if (typeof equal === 'boolean') { - return equal; - } - - const num1 = Math.floor(generateConfig.getYear(decade1!) / 10); - const num2 = Math.floor(generateConfig.getYear(decade2!) / 10); - return num1 === num2; + return nullableCompare(decade1, decade2, () => { + const num1 = Math.floor(generateConfig.getYear(decade1!) / 10); + const num2 = Math.floor(generateConfig.getYear(decade2!) / 10); + return num1 === num2; + }); } export function isSameYear( @@ -33,12 +48,11 @@ export function isSameYear( year1: NullableDateType, year2: NullableDateType, ) { - const equal = isNullEqual(year1, year2); - if (typeof equal === 'boolean') { - return equal; - } - - return generateConfig.getYear(year1!) === generateConfig.getYear(year2!); + return nullableCompare( + year1, + year2, + () => generateConfig.getYear(year1!) === generateConfig.getYear(year2!), + ); } export function getQuarter(generateConfig: GenerateConfig, date: DateType) { @@ -51,14 +65,12 @@ export function isSameQuarter( quarter1: NullableDateType, quarter2: NullableDateType, ) { - const equal = isNullEqual(quarter1, quarter2); - if (typeof equal === 'boolean') { - return equal; - } - - return ( - isSameYear(generateConfig, quarter1, quarter2) && - getQuarter(generateConfig, quarter1!) === getQuarter(generateConfig, quarter2!) + return nullableCompare( + quarter1, + quarter2, + () => + isSameYear(generateConfig, quarter1, quarter2) && + getQuarter(generateConfig, quarter1!) === getQuarter(generateConfig, quarter2!), ); } @@ -67,14 +79,22 @@ export function isSameMonth( month1: NullableDateType, month2: NullableDateType, ) { - const equal = isNullEqual(month1, month2); - if (typeof equal === 'boolean') { - return equal; - } - - return ( - isSameYear(generateConfig, month1, month2) && - generateConfig.getMonth(month1!) === generateConfig.getMonth(month2!) + // const equal = isNullEqual(month1, month2); + // if (typeof equal === 'boolean') { + // return equal; + // } + + // return ( + // isSameYear(generateConfig, month1, month2) && + // generateConfig.getMonth(month1!) === generateConfig.getMonth(month2!) + // ); + + return nullableCompare( + month1, + month2, + () => + isSameYear(generateConfig, month1, month2) && + generateConfig.getMonth(month1!) === generateConfig.getMonth(month2!), ); } @@ -83,15 +103,24 @@ export function isSameDate( date1: NullableDateType, date2: NullableDateType, ) { - const equal = isNullEqual(date1, date2); - if (typeof equal === 'boolean') { - return equal; - } - - return ( - generateConfig.getYear(date1!) === generateConfig.getYear(date2!) && - generateConfig.getMonth(date1!) === generateConfig.getMonth(date2!) && - generateConfig.getDate(date1!) === generateConfig.getDate(date2!) + // const equal = isNullEqual(date1, date2); + // if (typeof equal === 'boolean') { + // return equal; + // } + + // return ( + // generateConfig.getYear(date1!) === generateConfig.getYear(date2!) && + // generateConfig.getMonth(date1!) === generateConfig.getMonth(date2!) && + // generateConfig.getDate(date1!) === generateConfig.getDate(date2!) + // ); + + return nullableCompare( + date1, + date2, + () => + isSameYear(generateConfig, date1, date2) && + isSameMonth(generateConfig, date1, date2) && + generateConfig.getDate(date1!) === generateConfig.getDate(date2!), ); } @@ -100,15 +129,24 @@ export function isSameTime( time1: NullableDateType, time2: NullableDateType, ) { - const equal = isNullEqual(time1, time2); - if (typeof equal === 'boolean') { - return equal; - } - - return ( - generateConfig.getHour(time1!) === generateConfig.getHour(time2!) && - generateConfig.getMinute(time1!) === generateConfig.getMinute(time2!) && - generateConfig.getSecond(time1!) === generateConfig.getSecond(time2!) + // const equal = isNullEqual(time1, time2); + // if (typeof equal === 'boolean') { + // return equal; + // } + + // return ( + // generateConfig.getHour(time1!) === generateConfig.getHour(time2!) && + // generateConfig.getMinute(time1!) === generateConfig.getMinute(time2!) && + // generateConfig.getSecond(time1!) === generateConfig.getSecond(time2!) + // ); + + return nullableCompare( + time1, + time2, + () => + generateConfig.getHour(time1!) === generateConfig.getHour(time2!) && + generateConfig.getMinute(time1!) === generateConfig.getMinute(time2!) && + generateConfig.getSecond(time1!) === generateConfig.getSecond(time2!), ); } @@ -120,13 +158,22 @@ export function isSameTimestamp( time1: NullableDateType, time2: NullableDateType, ) { - return ( - // Same object - time1 === time2 || - // Date - (isSameDate(generateConfig, time1, time2) && + // return ( + // // Same object + // time1 === time2 || + // // Date + // (isSameDate(generateConfig, time1, time2) && + // isSameTime(generateConfig, time1, time2) && + // generateConfig.getMillisecond(time1) === generateConfig.getMillisecond(time2)) + // ); + + return nullableCompare( + time1, + time2, + () => + isSameDate(generateConfig, time1, time2) && isSameTime(generateConfig, time1, time2) && - generateConfig.getMillisecond(time1) === generateConfig.getMillisecond(time2)) + generateConfig.getMillisecond(time1) === generateConfig.getMillisecond(time2), ); } @@ -136,18 +183,27 @@ export function isSameWeek( date1: NullableDateType, date2: NullableDateType, ) { - const equal = isNullEqual(date1, date2); - if (typeof equal === 'boolean') { - return equal; - } - - const weekStartDate1 = getWeekStartDate(locale, generateConfig, date1); - const weekStartDate2 = getWeekStartDate(locale, generateConfig, date2); - - return ( - isSameYear(generateConfig, weekStartDate1, weekStartDate2) && - generateConfig.locale.getWeek(locale, date1) === generateConfig.locale.getWeek(locale, date2) - ); + // const equal = isNullEqual(date1, date2); + // if (typeof equal === 'boolean') { + // return equal; + // } + + // const weekStartDate1 = getWeekStartDate(locale, generateConfig, date1); + // const weekStartDate2 = getWeekStartDate(locale, generateConfig, date2); + + // return ( + // isSameYear(generateConfig, weekStartDate1, weekStartDate2) && + // generateConfig.locale.getWeek(locale, date1) === generateConfig.locale.getWeek(locale, date2) + // ); + return nullableCompare(date1, date2, () => { + const weekStartDate1 = getWeekStartDate(locale, generateConfig, date1); + const weekStartDate2 = getWeekStartDate(locale, generateConfig, date2); + + return ( + isSameYear(generateConfig, weekStartDate1, weekStartDate2) && + generateConfig.locale.getWeek(locale, date1) === generateConfig.locale.getWeek(locale, date2) + ); + }); } export function isSame( From ab776932f7f6461fc016773eb963e162fa362e19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 16:50:05 +0800 Subject: [PATCH 347/380] test: coverage --- src/utils/miscUtil.ts | 2 -- tests/new-range.spec.tsx | 11 +++++++++++ tests/util.spec.tsx | 15 +++++++++++++++ 3 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 tests/util.spec.tsx diff --git a/src/utils/miscUtil.ts b/src/utils/miscUtil.ts index bfdfe2bf3..b5c6174ab 100644 --- a/src/utils/miscUtil.ts +++ b/src/utils/miscUtil.ts @@ -6,8 +6,6 @@ export function leftPad(str: string | number, length: number, fill: string = '0' return current; } -export const tuple = (...args: T) => args; - /** * Convert `value` to array. Will provide `[]` if is null or undefined. */ diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index 54e2ff753..a98478ac2 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -1185,4 +1185,15 @@ describe('NewPicker.Range', () => { expect(document.querySelector('.rc-picker-header-view').textContent).toBe('1990ๅนด8ๆœˆ'); }); }); + + it('double click now button', () => { + const onChange = jest.fn(); + const { container } = render(); + + openPicker(container); + fireEvent.click(document.querySelector('.rc-picker-now-btn')); + fireEvent.click(document.querySelector('.rc-picker-now-btn')); + + expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-03', '1990-09-03']); + }); }); diff --git a/tests/util.spec.tsx b/tests/util.spec.tsx new file mode 100644 index 000000000..dd634116c --- /dev/null +++ b/tests/util.spec.tsx @@ -0,0 +1,15 @@ +// Note: zombieJ refactoring + +import dayjs from 'dayjs'; +import dayGenerate from '../src/generate/dayjs'; +import { isInRange } from '../src/utils/dateUtil'; + +global.error = console.error; + +describe('Picker.Util', () => { + describe('isInRange', () => { + it('not break with null', () => { + expect(isInRange(dayGenerate, null, null, dayjs())).toBeFalsy(); + }); + }); +}); From 2339f4b76466bdabf6525b501989bd92f07ac6e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 16:53:40 +0800 Subject: [PATCH 348/380] chore: refactoring --- docs/examples/debug.tsx | 2 +- src/NewPicker/PickerInput/Popup/Footer.tsx | 2 +- src/NewPicker/PickerInput/Popup/PresetPanel.tsx | 2 +- src/NewPicker/PickerInput/Popup/index.tsx | 2 +- src/NewPicker/PickerInput/RangePicker.tsx | 2 +- src/NewPicker/PickerInput/Selector/RangeSelector.tsx | 2 +- src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx | 2 +- src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts | 2 +- src/NewPicker/PickerInput/SinglePicker.tsx | 2 +- src/NewPicker/PickerInput/context.tsx | 2 +- src/NewPicker/PickerInput/hooks/useCellRender.ts | 2 +- src/NewPicker/PickerInput/hooks/useDisabledBoundary.ts | 2 +- src/NewPicker/PickerInput/hooks/useFieldFormat.ts | 2 +- src/NewPicker/PickerInput/hooks/useFilledProps.ts | 2 +- src/NewPicker/PickerInput/hooks/useInputReadOnly.ts | 2 +- src/NewPicker/PickerInput/hooks/useInvalidate.ts | 2 +- src/NewPicker/PickerInput/hooks/useOpen.ts | 2 +- src/NewPicker/PickerInput/hooks/usePickerRef.ts | 2 +- src/NewPicker/PickerInput/hooks/usePresets.ts | 2 +- src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts | 2 +- src/NewPicker/PickerInput/hooks/useRangePickerValue.ts | 2 +- src/NewPicker/PickerInput/hooks/useRangeValue.ts | 2 +- src/NewPicker/PickerInput/hooks/useShowNow.ts | 2 +- src/NewPicker/PickerPanel/DatePanel/index.tsx | 2 +- src/NewPicker/PickerPanel/DateTimePanel/index.tsx | 2 +- src/NewPicker/PickerPanel/DecadePanel/index.tsx | 2 +- src/NewPicker/PickerPanel/MonthPanel/index.tsx | 2 +- src/NewPicker/PickerPanel/QuarterPanel/index.tsx | 2 +- src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx | 2 +- src/NewPicker/PickerPanel/TimePanel/index.tsx | 2 +- src/NewPicker/PickerPanel/WeekPanel/index.tsx | 2 +- src/NewPicker/PickerPanel/YearPanel/index.tsx | 2 +- src/NewPicker/PickerPanel/context.ts | 2 +- src/NewPicker/PickerPanel/index.tsx | 2 +- src/NewPicker/hooks/useLocale.ts | 2 +- src/NewPicker/hooks/useTimeConfig.ts | 2 +- src/NewPicker/hooks/useTimeInfo.ts | 2 +- src/NewPicker/hooks/useToggleDates.ts | 2 +- src/NewPicker/index.tsx | 2 +- src/{NewPicker => }/interface.tsx | 2 +- src/utils/dateUtil.ts | 2 +- tests/picker.spec.tsx | 2 +- 42 files changed, 42 insertions(+), 42 deletions(-) rename src/{NewPicker => }/interface.tsx (99%) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 8707d083c..74e15cfe4 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import '../../assets/index.less'; -import type { Locale, PickerRef } from '../../src/NewPicker/interface'; +import type { Locale, PickerRef } from '../../src/interface'; import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; import PickerPanel from '../../src/NewPicker/PickerPanel'; diff --git a/src/NewPicker/PickerInput/Popup/Footer.tsx b/src/NewPicker/PickerInput/Popup/Footer.tsx index 29ba36b58..3597310f5 100644 --- a/src/NewPicker/PickerInput/Popup/Footer.tsx +++ b/src/NewPicker/PickerInput/Popup/Footer.tsx @@ -8,7 +8,7 @@ import type { PanelMode, RangeTimeProps, SharedPickerProps, -} from '../../interface'; +} from '../../../interface'; import PickerContext from '../context'; export interface FooterProps { diff --git a/src/NewPicker/PickerInput/Popup/PresetPanel.tsx b/src/NewPicker/PickerInput/Popup/PresetPanel.tsx index d145cdcc5..42c0c549a 100644 --- a/src/NewPicker/PickerInput/Popup/PresetPanel.tsx +++ b/src/NewPicker/PickerInput/Popup/PresetPanel.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { ValueDate } from '../../interface'; +import type { ValueDate } from '../../../interface'; export interface PresetPanelProps { prefixCls: string; diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index b92df39fe..c54fdeec8 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import ResizeObserver, { type ResizeObserverProps } from 'rc-resize-observer'; import * as React from 'react'; import { toArray } from '../../../utils/miscUtil'; -import type { SharedPickerProps, ValueDate } from '../../interface'; +import type { SharedPickerProps, ValueDate } from '../../../interface'; import PickerContext from '../context'; import Footer, { type FooterProps } from './Footer'; import PopupPanel, { type PopupPanelProps } from './PopupPanel'; diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index dcdac31c3..a047acf48 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -16,7 +16,7 @@ import type { SharedHTMLAttrs, SharedPickerProps, ValueDate, -} from '../interface'; +} from '../../interface'; import type { PickerPanelProps } from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; import { fillIndex } from '../util'; diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index b1edf9416..bafcf16dc 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import ResizeObserver from 'rc-resize-observer'; import { useEvent } from 'rc-util'; import * as React from 'react'; -import type { SelectorProps, SelectorRef } from '../../interface'; +import type { SelectorProps, SelectorRef } from '../../../interface'; import PickerContext from '../context'; import useInputProps from './hooks/useInputProps'; import useRootProps from './hooks/useRootProps'; diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx index fe3a1e935..e0102c931 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; import { isSame } from '../../../../utils/dateUtil'; -import type { InternalMode, SelectorProps, SelectorRef } from '../../../interface'; +import type { InternalMode, SelectorProps, SelectorRef } from '../../../../interface'; import PickerContext from '../../context'; import type { PickerProps } from '../../SinglePicker'; import useInputProps from '../hooks/useInputProps'; diff --git a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts index da87b0323..591ead838 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts +++ b/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts @@ -1,7 +1,7 @@ import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; import { formatValue } from '../../../../utils/dateUtil'; -import type { SelectorProps } from '../../../interface'; +import type { SelectorProps } from '../../../../interface'; import type { InputProps } from '../Input'; export default function useInputProps( diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index c638a7479..e7ab4218a 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -14,7 +14,7 @@ import type { SharedPickerProps, SharedTimeProps, ValueDate, -} from '../interface'; +} from '../../interface'; import PickerTrigger from '../PickerTrigger'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; diff --git a/src/NewPicker/PickerInput/context.tsx b/src/NewPicker/PickerInput/context.tsx index 02ee58c63..52152c515 100644 --- a/src/NewPicker/PickerInput/context.tsx +++ b/src/NewPicker/PickerInput/context.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import type { GenerateConfig } from '../../generate'; -import type { Components, Locale } from '../interface'; +import type { Components, Locale } from '../../interface'; export interface PickerContextProps { prefixCls: string; diff --git a/src/NewPicker/PickerInput/hooks/useCellRender.ts b/src/NewPicker/PickerInput/hooks/useCellRender.ts index ce8a22fd0..0c85734a8 100644 --- a/src/NewPicker/PickerInput/hooks/useCellRender.ts +++ b/src/NewPicker/PickerInput/hooks/useCellRender.ts @@ -1,6 +1,6 @@ import { warning } from 'rc-util'; import * as React from 'react'; -import type { CellRender, CellRenderInfo, SharedPickerProps } from '../../interface'; +import type { CellRender, CellRenderInfo, SharedPickerProps } from '../../../interface'; export default function useCellRender( cellRender: SharedPickerProps['cellRender'], diff --git a/src/NewPicker/PickerInput/hooks/useDisabledBoundary.ts b/src/NewPicker/PickerInput/hooks/useDisabledBoundary.ts index b46e6a7d2..f546ac36c 100644 --- a/src/NewPicker/PickerInput/hooks/useDisabledBoundary.ts +++ b/src/NewPicker/PickerInput/hooks/useDisabledBoundary.ts @@ -1,7 +1,7 @@ import { useEvent } from 'rc-util'; import type { GenerateConfig } from '../../../generate'; import { isSame } from '../../../utils/dateUtil'; -import type { DisabledDate, InternalMode, Locale } from '../../interface'; +import type { DisabledDate, InternalMode, Locale } from '../../../interface'; export type IsInvalidBoundary = ( currentDate: DateType, diff --git a/src/NewPicker/PickerInput/hooks/useFieldFormat.ts b/src/NewPicker/PickerInput/hooks/useFieldFormat.ts index eca0c1da4..be55e887c 100644 --- a/src/NewPicker/PickerInput/hooks/useFieldFormat.ts +++ b/src/NewPicker/PickerInput/hooks/useFieldFormat.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { FormatType, InternalMode, Locale, SharedPickerProps } from '../../interface'; +import type { FormatType, InternalMode, Locale, SharedPickerProps } from '../../../interface'; import { toArray } from '../../util'; function getRowFormat(picker: InternalMode, locale: Locale, format?: SharedPickerProps['format']) { diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index abcdc5c0f..07426d372 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -3,7 +3,7 @@ import * as React from 'react'; import { toArray } from '../../../utils/miscUtil'; import { fillLocale } from '../../hooks/useLocale'; import { getTimeConfig } from '../../hooks/useTimeConfig'; -import type { FormatType, InternalMode } from '../../interface'; +import type { FormatType, InternalMode } from '../../../interface'; import type { RangePickerProps } from '../RangePicker'; import { fillClearIcon } from '../Selector/hooks/useClearIcon'; import useDisabledBoundary from './useDisabledBoundary'; diff --git a/src/NewPicker/PickerInput/hooks/useInputReadOnly.ts b/src/NewPicker/PickerInput/hooks/useInputReadOnly.ts index 346ec4b6e..6c854daca 100644 --- a/src/NewPicker/PickerInput/hooks/useInputReadOnly.ts +++ b/src/NewPicker/PickerInput/hooks/useInputReadOnly.ts @@ -1,4 +1,4 @@ -import type { FormatType } from '../../interface'; +import type { FormatType } from '../../../interface'; export default function useInputReadOnly( formatList: FormatType[], diff --git a/src/NewPicker/PickerInput/hooks/useInvalidate.ts b/src/NewPicker/PickerInput/hooks/useInvalidate.ts index c4f8ccfe8..c290d5c40 100644 --- a/src/NewPicker/PickerInput/hooks/useInvalidate.ts +++ b/src/NewPicker/PickerInput/hooks/useInvalidate.ts @@ -5,7 +5,7 @@ import type { RangeTimeProps, SharedPickerProps, SharedTimeProps, -} from '../../interface'; +} from '../../../interface'; /** * Check if provided date is valid for the `disabledDate` & `showTime.disabledTime`. diff --git a/src/NewPicker/PickerInput/hooks/useOpen.ts b/src/NewPicker/PickerInput/hooks/useOpen.ts index 8c10334eb..ef22df18c 100644 --- a/src/NewPicker/PickerInput/hooks/useOpen.ts +++ b/src/NewPicker/PickerInput/hooks/useOpen.ts @@ -1,4 +1,4 @@ -import type { OpenConfig } from '../../interface'; +import type { OpenConfig } from '../../../interface'; import useDelayState from './useDelayState'; /** diff --git a/src/NewPicker/PickerInput/hooks/usePickerRef.ts b/src/NewPicker/PickerInput/hooks/usePickerRef.ts index eafc1789c..2ed82df2a 100644 --- a/src/NewPicker/PickerInput/hooks/usePickerRef.ts +++ b/src/NewPicker/PickerInput/hooks/usePickerRef.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { PickerRef, SelectorRef } from '../../interface'; +import type { PickerRef, SelectorRef } from '../../../interface'; export function usePickerRef(ref: React.Ref) { const selectorRef = React.useRef(); diff --git a/src/NewPicker/PickerInput/hooks/usePresets.ts b/src/NewPicker/PickerInput/hooks/usePresets.ts index 3b95577d0..d39854438 100644 --- a/src/NewPicker/PickerInput/hooks/usePresets.ts +++ b/src/NewPicker/PickerInput/hooks/usePresets.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import warning from 'rc-util/lib/warning'; -import type { ValueDate } from '../../interface'; +import type { ValueDate } from '../../../interface'; export default function usePresets( presets?: ValueDate[], diff --git a/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts b/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts index 1c3e04cb4..0c5ec3751 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts @@ -1,6 +1,6 @@ import type { GenerateConfig } from '../../../generate'; import { isSame } from '../../../utils/dateUtil'; -import type { DisabledDate, Locale } from '../../interface'; +import type { DisabledDate, Locale } from '../../../interface'; import type { RangeValueType } from '../RangePicker'; /** diff --git a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts index 03915f39d..3611f85fa 100644 --- a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts @@ -3,7 +3,7 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import * as React from 'react'; import type { GenerateConfig } from '../../../generate'; import { isSame } from '../../../utils/dateUtil'; -import type { InternalMode, Locale, PanelMode } from '../../interface'; +import type { InternalMode, Locale, PanelMode } from '../../../interface'; import type { RangePickerProps } from '../RangePicker'; export function offsetPanelDate( diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 8203733e2..f32aa5794 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -3,7 +3,7 @@ import * as React from 'react'; import type { GenerateConfig } from '../../../generate'; import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; import useSyncState from '../../hooks/useSyncState'; -import type { BaseInfo, FormatType, Locale, ReplaceListType } from '../../interface'; +import type { BaseInfo, FormatType, Locale, ReplaceListType } from '../../../interface'; import { fillIndex } from '../../util'; import type { RangePickerProps } from '../RangePicker'; import type { ReplacedPickerProps } from '../SinglePicker'; diff --git a/src/NewPicker/PickerInput/hooks/useShowNow.ts b/src/NewPicker/PickerInput/hooks/useShowNow.ts index 87204587a..492b5482f 100644 --- a/src/NewPicker/PickerInput/hooks/useShowNow.ts +++ b/src/NewPicker/PickerInput/hooks/useShowNow.ts @@ -1,4 +1,4 @@ -import type { InternalMode, PanelMode } from '../../interface'; +import type { InternalMode, PanelMode } from '../../../interface'; export default function useShowNow( picker: InternalMode, diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index 7952b08cc..abb62c04c 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -7,7 +7,7 @@ import { isSameMonth, WEEK_DAY_COUNT, } from '../../../utils/dateUtil'; -import type { PanelMode, SharedPanelProps } from '../../interface'; +import type { PanelMode, SharedPanelProps } from '../../../interface'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; diff --git a/src/NewPicker/PickerPanel/DateTimePanel/index.tsx b/src/NewPicker/PickerPanel/DateTimePanel/index.tsx index c924ee0f9..859a34d4b 100644 --- a/src/NewPicker/PickerPanel/DateTimePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DateTimePanel/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import useTimeInfo from '../../hooks/useTimeInfo'; -import type { SharedPanelProps } from '../../interface'; +import type { SharedPanelProps } from '../../../interface'; import DatePanel from '../DatePanel'; import TimePanel from '../TimePanel'; diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx index 3ff0ea9f8..044b8a2df 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { formatValue, isSameDecade } from '../../../utils/dateUtil'; -import type { SharedPanelProps } from '../../interface'; +import type { SharedPanelProps } from '../../../interface'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; diff --git a/src/NewPicker/PickerPanel/MonthPanel/index.tsx b/src/NewPicker/PickerPanel/MonthPanel/index.tsx index 95022b036..fac22f3f0 100644 --- a/src/NewPicker/PickerPanel/MonthPanel/index.tsx +++ b/src/NewPicker/PickerPanel/MonthPanel/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { formatValue, isSameMonth } from '../../../utils/dateUtil'; -import type { SharedPanelProps } from '../../interface'; +import type { SharedPanelProps } from '../../../interface'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; diff --git a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx index ca1fc07ba..5a1c572dd 100644 --- a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx +++ b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { formatValue, isSameQuarter } from '../../../utils/dateUtil'; -import type { SharedPanelProps } from '../../interface'; +import type { SharedPanelProps } from '../../../interface'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index 8a394c02c..a23c68b30 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { formatValue } from '../../../../utils/dateUtil'; import useTimeInfo from '../../../hooks/useTimeInfo'; -import type { SharedPanelProps, SharedTimeProps } from '../../../interface'; +import type { SharedPanelProps, SharedTimeProps } from '../../../../interface'; import { PickerHackContext, usePanelContext } from '../../context'; import TimeColumn, { type Unit } from './TimeColumn'; diff --git a/src/NewPicker/PickerPanel/TimePanel/index.tsx b/src/NewPicker/PickerPanel/TimePanel/index.tsx index c07168f1c..d25a8dbfc 100644 --- a/src/NewPicker/PickerPanel/TimePanel/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/index.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; import { formatValue } from '../../../utils/dateUtil'; -import type { SharedPanelProps } from '../../interface'; +import type { SharedPanelProps } from '../../../interface'; import { PanelContext, useInfo } from '../context'; import PanelHeader from '../PanelHeader'; import TimePanelBody from './TimePanelBody'; diff --git a/src/NewPicker/PickerPanel/WeekPanel/index.tsx b/src/NewPicker/PickerPanel/WeekPanel/index.tsx index 721f56f24..3557124ce 100644 --- a/src/NewPicker/PickerPanel/WeekPanel/index.tsx +++ b/src/NewPicker/PickerPanel/WeekPanel/index.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; import { isInRange, isSameWeek } from '../../../utils/dateUtil'; -import type { SharedPanelProps } from '../../interface'; +import type { SharedPanelProps } from '../../../interface'; import DatePanel from '../DatePanel'; export default function WeekPanel(props: SharedPanelProps) { diff --git a/src/NewPicker/PickerPanel/YearPanel/index.tsx b/src/NewPicker/PickerPanel/YearPanel/index.tsx index 0fcdaccec..42bf9888b 100644 --- a/src/NewPicker/PickerPanel/YearPanel/index.tsx +++ b/src/NewPicker/PickerPanel/YearPanel/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { formatValue, isSameYear } from '../../../utils/dateUtil'; -import type { SharedPanelProps } from '../../interface'; +import type { SharedPanelProps } from '../../../interface'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; diff --git a/src/NewPicker/PickerPanel/context.ts b/src/NewPicker/PickerPanel/context.ts index 54350072d..e76b51482 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/NewPicker/PickerPanel/context.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { PanelMode, SharedPanelProps } from '../interface'; +import type { PanelMode, SharedPanelProps } from '../../interface'; export interface PanelContextProps extends Pick< diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index fb614390a..690a83e49 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -15,7 +15,7 @@ import type { PickerMode, SharedPanelProps, SharedTimeProps, -} from '../interface'; +} from '../../interface'; import PickerContext from '../PickerInput/context'; import useCellRender from '../PickerInput/hooks/useCellRender'; import { toArray } from '../util'; diff --git a/src/NewPicker/hooks/useLocale.ts b/src/NewPicker/hooks/useLocale.ts index f7c6603a0..7f73f0e4a 100644 --- a/src/NewPicker/hooks/useLocale.ts +++ b/src/NewPicker/hooks/useLocale.ts @@ -1,5 +1,5 @@ import React from 'react'; -import type { Locale } from '../interface'; +import type { Locale } from '../../interface'; /** * Used for `useFilledProps` since it already in the React.useMemo diff --git a/src/NewPicker/hooks/useTimeConfig.ts b/src/NewPicker/hooks/useTimeConfig.ts index 64e6b98d0..df72c8552 100644 --- a/src/NewPicker/hooks/useTimeConfig.ts +++ b/src/NewPicker/hooks/useTimeConfig.ts @@ -1,4 +1,4 @@ -import type { PickerMode, SharedTimeProps } from '../interface'; +import type { PickerMode, SharedTimeProps } from '../../interface'; const showTimeKeys = [ 'format', diff --git a/src/NewPicker/hooks/useTimeInfo.ts b/src/NewPicker/hooks/useTimeInfo.ts index 2b1027c40..4bd511572 100644 --- a/src/NewPicker/hooks/useTimeInfo.ts +++ b/src/NewPicker/hooks/useTimeInfo.ts @@ -2,7 +2,7 @@ import { warning } from 'rc-util'; import * as React from 'react'; import type { GenerateConfig } from '../../generate'; import { leftPad } from '../../utils/miscUtil'; -import type { DisabledTimes, SharedTimeProps } from '../interface'; +import type { DisabledTimes, SharedTimeProps } from '../../interface'; import { findValidateTime } from '../PickerPanel/TimePanel/TimePanelBody/util'; export type Unit = { diff --git a/src/NewPicker/hooks/useToggleDates.ts b/src/NewPicker/hooks/useToggleDates.ts index f435d5896..789d5e24a 100644 --- a/src/NewPicker/hooks/useToggleDates.ts +++ b/src/NewPicker/hooks/useToggleDates.ts @@ -1,6 +1,6 @@ import type { GenerateConfig } from '../../generate'; import { isSame } from '../../utils/dateUtil'; -import type { InternalMode, Locale } from '../interface'; +import type { InternalMode, Locale } from '../../interface'; /** * Toggles the presence of a value in an array. diff --git a/src/NewPicker/index.tsx b/src/NewPicker/index.tsx index f6827aaf9..39b45fe68 100644 --- a/src/NewPicker/index.tsx +++ b/src/NewPicker/index.tsx @@ -27,7 +27,7 @@ * - [Break] RangePicker go to end field, `pickerValue` will follow the start field if not controlled. */ -import type { PickerRef } from './interface'; +import type { PickerRef } from '../interface'; import RangePicker, { type RangePickerProps } from './PickerInput/RangePicker'; import Picker, { type PickerProps } from './PickerInput/SinglePicker'; import PickerPanel, { type PickerPanelProps } from './PickerPanel'; diff --git a/src/NewPicker/interface.tsx b/src/interface.tsx similarity index 99% rename from src/NewPicker/interface.tsx rename to src/interface.tsx index b38d03f14..ddcf4201f 100644 --- a/src/NewPicker/interface.tsx +++ b/src/interface.tsx @@ -1,5 +1,5 @@ import type { AlignType } from '@rc-component/trigger'; -import type { GenerateConfig } from '../generate'; +import type { GenerateConfig } from './generate'; export type NullableDateType = DateType | null | undefined; diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts index 6ea34db92..912a280ff 100644 --- a/src/utils/dateUtil.ts +++ b/src/utils/dateUtil.ts @@ -1,5 +1,5 @@ import type { GenerateConfig } from '../generate'; -import type { CustomFormat, InternalMode, Locale, NullableDateType } from '../NewPicker/interface'; +import type { CustomFormat, InternalMode, Locale, NullableDateType } from '../interface'; export const WEEK_DAY_COUNT = 7; diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 7e0eaac06..22bf4b871 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-loop-func */ import { act, createEvent, fireEvent, render } from '@testing-library/react'; -import { Dayjs } from 'dayjs'; +import type { Dayjs } from 'dayjs'; import moment from 'moment'; import 'moment/locale/zh-cn'; import KeyCode from 'rc-util/lib/KeyCode'; From 0692d60fec0bba564148fa21ea0a4417a0c3a303 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 17:14:01 +0800 Subject: [PATCH 349/380] chore: refactoring --- .../PickerInput/hooks/useFieldFormat.ts | 2 +- .../PickerPanel/DecadePanel/index.tsx | 6 +- src/NewPicker/PickerPanel/index.tsx | 10 +-- src/NewPicker/hooks/useTimeConfig.ts | 2 +- src/NewPicker/util.ts | 8 --- src/utils/getRanges.tsx | 62 ------------------- 6 files changed, 11 insertions(+), 79 deletions(-) delete mode 100644 src/utils/getRanges.tsx diff --git a/src/NewPicker/PickerInput/hooks/useFieldFormat.ts b/src/NewPicker/PickerInput/hooks/useFieldFormat.ts index be55e887c..37b5413ef 100644 --- a/src/NewPicker/PickerInput/hooks/useFieldFormat.ts +++ b/src/NewPicker/PickerInput/hooks/useFieldFormat.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import type { FormatType, InternalMode, Locale, SharedPickerProps } from '../../../interface'; -import { toArray } from '../../util'; +import { toArray } from '../../../utils/miscUtil'; function getRowFormat(picker: InternalMode, locale: Locale, format?: SharedPickerProps['format']) { if (format) { diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx index 044b8a2df..01a13165f 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; -import { formatValue, isSameDecade } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../../interface'; +import { formatValue, isSameDecade } from '../../../utils/dateUtil'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; -export default function DecadePanel(props: SharedPanelProps) { +export default function DecadePanel( + props: SharedPanelProps, +) { const { prefixCls, locale, generateConfig, pickerValue, onPickerValueChange } = props; const panelPrefixCls = `${prefixCls}-decade-panel`; diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index 690a83e49..d00832870 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -1,10 +1,6 @@ import classNames from 'classnames'; import { useEvent, useMergedState, warning } from 'rc-util'; import * as React from 'react'; -import { isSame } from '../../utils/dateUtil'; -import useLocale from '../hooks/useLocale'; -import { getTimeConfig } from '../hooks/useTimeConfig'; -import useToggleDates from '../hooks/useToggleDates'; import type { CellRender, Components, @@ -16,9 +12,13 @@ import type { SharedPanelProps, SharedTimeProps, } from '../../interface'; +import { isSame } from '../../utils/dateUtil'; +import { toArray } from '../../utils/miscUtil'; +import useLocale from '../hooks/useLocale'; +import { getTimeConfig } from '../hooks/useTimeConfig'; +import useToggleDates from '../hooks/useToggleDates'; import PickerContext from '../PickerInput/context'; import useCellRender from '../PickerInput/hooks/useCellRender'; -import { toArray } from '../util'; import DatePanel from './DatePanel'; import DateTimePanel from './DateTimePanel'; import DecadePanel from './DecadePanel'; diff --git a/src/NewPicker/hooks/useTimeConfig.ts b/src/NewPicker/hooks/useTimeConfig.ts index df72c8552..83d5571e6 100644 --- a/src/NewPicker/hooks/useTimeConfig.ts +++ b/src/NewPicker/hooks/useTimeConfig.ts @@ -33,7 +33,7 @@ if (process.env.NODE_ENV === 'not-exist-env') { /** * Get SharedTimeProps from props. */ -function pickTimeProps(props: object): SharedTimeProps { +function pickTimeProps(props: object): SharedTimeProps { const timeProps: any = {}; showTimeKeys.forEach((key) => { if (key in props) { diff --git a/src/NewPicker/util.ts b/src/NewPicker/util.ts index 446bb16ee..4cc8edb07 100644 --- a/src/NewPicker/util.ts +++ b/src/NewPicker/util.ts @@ -1,11 +1,3 @@ -export function toArray(val: T | T[]): T[] { - if (val === null || val === undefined) { - return []; - } - - return Array.isArray(val) ? val : [val]; -} - export function fillIndex(ori: T, index: number, value: T[number]): T { const clone = [...ori] as T; clone[index] = value; diff --git a/src/utils/getRanges.tsx b/src/utils/getRanges.tsx deleted file mode 100644 index aeef5e5c1..000000000 --- a/src/utils/getRanges.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import type { Components, Locale, RangeList } from '../interface'; - -export type RangesProps = { - prefixCls: string; - rangeList?: RangeList; - components?: Components; - needConfirmButton: boolean; - onNow?: null | (() => void) | false; - onOk?: null | (() => void) | false; - okDisabled?: boolean; - showNow?: boolean; - locale: Locale; -}; - -export default function getRanges({ - prefixCls, - // rangeList = [], - components = {}, - needConfirmButton, - onNow, - onOk, - okDisabled, - showNow, - locale, -}: RangesProps) { - let presetNode: React.ReactNode; - let okNode: React.ReactNode; - - if (needConfirmButton) { - const Button = (components.button || 'button') as any; - - if (onNow && showNow !== false) { - presetNode = ( -
        • - - {locale.now} - -
          • - ); - } - - okNode = needConfirmButton && ( -
        • - -
          • - ); - } - - if (!presetNode && !okNode) { - return null; - } - - return ( -
            - {presetNode} - {okNode} -
          - ); -} From 9afa1df4a58867bb22a13b1c1c9650712d7700d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 17:18:01 +0800 Subject: [PATCH 350/380] chore: fix more ts --- src/NewPicker/PickerInput/hooks/useInvalidate.ts | 2 +- src/NewPicker/PickerPanel/QuarterPanel/index.tsx | 6 ++++-- src/NewPicker/PickerPanel/WeekPanel/index.tsx | 6 ++++-- src/NewPicker/PickerPanel/YearPanel/index.tsx | 6 ++++-- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/NewPicker/PickerInput/hooks/useInvalidate.ts b/src/NewPicker/PickerInput/hooks/useInvalidate.ts index c290d5c40..374f7d266 100644 --- a/src/NewPicker/PickerInput/hooks/useInvalidate.ts +++ b/src/NewPicker/PickerInput/hooks/useInvalidate.ts @@ -18,7 +18,7 @@ export default function useInvalidate( ) { // Check disabled date const isInvalidate = useEvent( - (date: DateType, info: { from?: DateType; activeIndex: number }) => { + (date: DateType, info?: { from?: DateType; activeIndex: number }) => { const outsideInfo = { type: picker, ...info, diff --git a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx index 5a1c572dd..ae4da2f7e 100644 --- a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx +++ b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; -import { formatValue, isSameQuarter } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../../interface'; +import { formatValue, isSameQuarter } from '../../../utils/dateUtil'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; -export default function QuarterPanel(props: SharedPanelProps) { +export default function QuarterPanel( + props: SharedPanelProps, +) { const { prefixCls, locale, generateConfig, pickerValue, onPickerValueChange, onModeChange } = props; diff --git a/src/NewPicker/PickerPanel/WeekPanel/index.tsx b/src/NewPicker/PickerPanel/WeekPanel/index.tsx index 3557124ce..efd0d6995 100644 --- a/src/NewPicker/PickerPanel/WeekPanel/index.tsx +++ b/src/NewPicker/PickerPanel/WeekPanel/index.tsx @@ -1,10 +1,12 @@ import classNames from 'classnames'; import * as React from 'react'; -import { isInRange, isSameWeek } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../../interface'; +import { isInRange, isSameWeek } from '../../../utils/dateUtil'; import DatePanel from '../DatePanel'; -export default function WeekPanel(props: SharedPanelProps) { +export default function WeekPanel( + props: SharedPanelProps, +) { const { prefixCls, generateConfig, locale, value, hoverValue } = props; // =============================== Row ================================ diff --git a/src/NewPicker/PickerPanel/YearPanel/index.tsx b/src/NewPicker/PickerPanel/YearPanel/index.tsx index 42bf9888b..34877d560 100644 --- a/src/NewPicker/PickerPanel/YearPanel/index.tsx +++ b/src/NewPicker/PickerPanel/YearPanel/index.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; -import { formatValue, isSameYear } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../../interface'; +import { formatValue, isSameYear } from '../../../utils/dateUtil'; import { PanelContext, useInfo } from '../context'; import PanelBody from '../PanelBody'; import PanelHeader from '../PanelHeader'; -export default function YearPanel(props: SharedPanelProps) { +export default function YearPanel( + props: SharedPanelProps, +) { const { prefixCls, locale, generateConfig, pickerValue, onPickerValueChange, onModeChange } = props; From 2b3d33735bcbecaafa7a2f33184b007ffd6ad6d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 17:58:51 +0800 Subject: [PATCH 351/380] chore: ts part --- src/NewPicker/PickerInput/Popup/index.tsx | 2 +- src/NewPicker/PickerInput/RangePicker.tsx | 1 + src/NewPicker/PickerInput/SinglePicker.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index c54fdeec8..9942cae69 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; import ResizeObserver, { type ResizeObserverProps } from 'rc-resize-observer'; import * as React from 'react'; -import { toArray } from '../../../utils/miscUtil'; import type { SharedPickerProps, ValueDate } from '../../../interface'; +import { toArray } from '../../../utils/miscUtil'; import PickerContext from '../context'; import Footer, { type FooterProps } from './Footer'; import PopupPanel, { type PopupPanelProps } from './PopupPanel'; diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index a047acf48..87ee5433a 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -556,6 +556,7 @@ function RangePicker( internalMode={internalMode} onPanelChange={triggerModeChange} // Value + format={maskFormat} value={panelValue} isInvalid={isPopupInvalidateDate} onChange={null} diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index e7ab4218a..3b6a4b874 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -513,6 +513,7 @@ function Picker( internalMode={internalMode} onPanelChange={triggerModeChange} // Value + format={maskFormat} value={calendarValue} isInvalid={isInvalidateDate} onChange={null} From bd77974eaa609a7678d56357e7095de1b8fa87e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 18:04:22 +0800 Subject: [PATCH 352/380] refactor: move hooks --- src/NewPicker/PickerInput/hooks/useFilledProps.ts | 2 +- src/NewPicker/PickerInput/hooks/useRangeValue.ts | 2 +- src/NewPicker/PickerPanel/index.tsx | 2 +- src/{NewPicker => }/hooks/useLocale.ts | 2 +- src/{NewPicker => }/hooks/useSyncState.ts | 0 5 files changed, 4 insertions(+), 4 deletions(-) rename src/{NewPicker => }/hooks/useLocale.ts (96%) rename src/{NewPicker => }/hooks/useSyncState.ts (100%) diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 07426d372..6a7e3a592 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -1,7 +1,7 @@ import { warning } from 'rc-util'; import * as React from 'react'; import { toArray } from '../../../utils/miscUtil'; -import { fillLocale } from '../../hooks/useLocale'; +import { fillLocale } from '../../../hooks/useLocale'; import { getTimeConfig } from '../../hooks/useTimeConfig'; import type { FormatType, InternalMode } from '../../../interface'; import type { RangePickerProps } from '../RangePicker'; diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index f32aa5794..f8ae26aa3 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -2,7 +2,7 @@ import { useEvent, useMergedState } from 'rc-util'; import * as React from 'react'; import type { GenerateConfig } from '../../../generate'; import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; -import useSyncState from '../../hooks/useSyncState'; +import useSyncState from '../../../hooks/useSyncState'; import type { BaseInfo, FormatType, Locale, ReplaceListType } from '../../../interface'; import { fillIndex } from '../../util'; import type { RangePickerProps } from '../RangePicker'; diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index d00832870..c31bd7b1f 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -14,7 +14,7 @@ import type { } from '../../interface'; import { isSame } from '../../utils/dateUtil'; import { toArray } from '../../utils/miscUtil'; -import useLocale from '../hooks/useLocale'; +import useLocale from '../../hooks/useLocale'; import { getTimeConfig } from '../hooks/useTimeConfig'; import useToggleDates from '../hooks/useToggleDates'; import PickerContext from '../PickerInput/context'; diff --git a/src/NewPicker/hooks/useLocale.ts b/src/hooks/useLocale.ts similarity index 96% rename from src/NewPicker/hooks/useLocale.ts rename to src/hooks/useLocale.ts index 7f73f0e4a..f7c6603a0 100644 --- a/src/NewPicker/hooks/useLocale.ts +++ b/src/hooks/useLocale.ts @@ -1,5 +1,5 @@ import React from 'react'; -import type { Locale } from '../../interface'; +import type { Locale } from '../interface'; /** * Used for `useFilledProps` since it already in the React.useMemo diff --git a/src/NewPicker/hooks/useSyncState.ts b/src/hooks/useSyncState.ts similarity index 100% rename from src/NewPicker/hooks/useSyncState.ts rename to src/hooks/useSyncState.ts From f221272f486d3104cf6b4bf8c4087f3aa96fb8dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 18 Dec 2023 20:20:00 +0800 Subject: [PATCH 353/380] refactor: move hooks --- src/NewPicker/PickerInput/Popup/Footer.tsx | 2 +- src/NewPicker/PickerInput/SinglePicker.tsx | 2 +- src/NewPicker/PickerInput/hooks/useFilledProps.ts | 2 +- src/NewPicker/PickerPanel/DateTimePanel/index.tsx | 2 +- .../PickerPanel/TimePanel/TimePanelBody/index.tsx | 2 +- src/NewPicker/PickerPanel/index.tsx | 4 ++-- src/{NewPicker => }/hooks/useTimeConfig.ts | 2 +- src/{NewPicker => }/hooks/useTimeInfo.ts | 8 ++++---- src/{NewPicker => }/hooks/useToggleDates.ts | 6 +++--- 9 files changed, 15 insertions(+), 15 deletions(-) rename src/{NewPicker => }/hooks/useTimeConfig.ts (96%) rename src/{NewPicker => }/hooks/useTimeInfo.ts (96%) rename src/{NewPicker => }/hooks/useToggleDates.ts (78%) diff --git a/src/NewPicker/PickerInput/Popup/Footer.tsx b/src/NewPicker/PickerInput/Popup/Footer.tsx index 3597310f5..4241d5d7b 100644 --- a/src/NewPicker/PickerInput/Popup/Footer.tsx +++ b/src/NewPicker/PickerInput/Popup/Footer.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; import type { GenerateConfig } from '../../../generate'; -import useTimeInfo from '../../hooks/useTimeInfo'; +import useTimeInfo from '../../../hooks/useTimeInfo'; import type { DisabledDate, InternalMode, diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 3b6a4b874..72abafbbe 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -3,7 +3,7 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import omit from 'rc-util/lib/omit'; import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; -import useToggleDates from '../hooks/useToggleDates'; +import useToggleDates from '../../hooks/useToggleDates'; import type { BaseInfo, InternalMode, diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index 6a7e3a592..a61294398 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -2,7 +2,7 @@ import { warning } from 'rc-util'; import * as React from 'react'; import { toArray } from '../../../utils/miscUtil'; import { fillLocale } from '../../../hooks/useLocale'; -import { getTimeConfig } from '../../hooks/useTimeConfig'; +import { getTimeConfig } from '../../../hooks/useTimeConfig'; import type { FormatType, InternalMode } from '../../../interface'; import type { RangePickerProps } from '../RangePicker'; import { fillClearIcon } from '../Selector/hooks/useClearIcon'; diff --git a/src/NewPicker/PickerPanel/DateTimePanel/index.tsx b/src/NewPicker/PickerPanel/DateTimePanel/index.tsx index 859a34d4b..b84fc26a9 100644 --- a/src/NewPicker/PickerPanel/DateTimePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DateTimePanel/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import useTimeInfo from '../../hooks/useTimeInfo'; +import useTimeInfo from '../../../hooks/useTimeInfo'; import type { SharedPanelProps } from '../../../interface'; import DatePanel from '../DatePanel'; import TimePanel from '../TimePanel'; diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index a23c68b30..7ae45f2fe 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { formatValue } from '../../../../utils/dateUtil'; -import useTimeInfo from '../../../hooks/useTimeInfo'; +import useTimeInfo from '../../../../hooks/useTimeInfo'; import type { SharedPanelProps, SharedTimeProps } from '../../../../interface'; import { PickerHackContext, usePanelContext } from '../../context'; import TimeColumn, { type Unit } from './TimeColumn'; diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/NewPicker/PickerPanel/index.tsx index c31bd7b1f..e21e3ead8 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/NewPicker/PickerPanel/index.tsx @@ -15,8 +15,8 @@ import type { import { isSame } from '../../utils/dateUtil'; import { toArray } from '../../utils/miscUtil'; import useLocale from '../../hooks/useLocale'; -import { getTimeConfig } from '../hooks/useTimeConfig'; -import useToggleDates from '../hooks/useToggleDates'; +import { getTimeConfig } from '../../hooks/useTimeConfig'; +import useToggleDates from '../../hooks/useToggleDates'; import PickerContext from '../PickerInput/context'; import useCellRender from '../PickerInput/hooks/useCellRender'; import DatePanel from './DatePanel'; diff --git a/src/NewPicker/hooks/useTimeConfig.ts b/src/hooks/useTimeConfig.ts similarity index 96% rename from src/NewPicker/hooks/useTimeConfig.ts rename to src/hooks/useTimeConfig.ts index 83d5571e6..a34cd1218 100644 --- a/src/NewPicker/hooks/useTimeConfig.ts +++ b/src/hooks/useTimeConfig.ts @@ -1,4 +1,4 @@ -import type { PickerMode, SharedTimeProps } from '../../interface'; +import type { PickerMode, SharedTimeProps } from '../interface'; const showTimeKeys = [ 'format', diff --git a/src/NewPicker/hooks/useTimeInfo.ts b/src/hooks/useTimeInfo.ts similarity index 96% rename from src/NewPicker/hooks/useTimeInfo.ts rename to src/hooks/useTimeInfo.ts index 4bd511572..22464c324 100644 --- a/src/NewPicker/hooks/useTimeInfo.ts +++ b/src/hooks/useTimeInfo.ts @@ -1,9 +1,9 @@ import { warning } from 'rc-util'; import * as React from 'react'; -import type { GenerateConfig } from '../../generate'; -import { leftPad } from '../../utils/miscUtil'; -import type { DisabledTimes, SharedTimeProps } from '../../interface'; -import { findValidateTime } from '../PickerPanel/TimePanel/TimePanelBody/util'; +import type { GenerateConfig } from '../generate'; +import { leftPad } from '../utils/miscUtil'; +import type { DisabledTimes, SharedTimeProps } from '../interface'; +import { findValidateTime } from '../NewPicker/PickerPanel/TimePanel/TimePanelBody/util'; export type Unit = { label: React.ReactText; diff --git a/src/NewPicker/hooks/useToggleDates.ts b/src/hooks/useToggleDates.ts similarity index 78% rename from src/NewPicker/hooks/useToggleDates.ts rename to src/hooks/useToggleDates.ts index 789d5e24a..15dc46d24 100644 --- a/src/NewPicker/hooks/useToggleDates.ts +++ b/src/hooks/useToggleDates.ts @@ -1,6 +1,6 @@ -import type { GenerateConfig } from '../../generate'; -import { isSame } from '../../utils/dateUtil'; -import type { InternalMode, Locale } from '../../interface'; +import type { GenerateConfig } from '../generate'; +import { isSame } from '../utils/dateUtil'; +import type { InternalMode, Locale } from '../interface'; /** * Toggles the presence of a value in an array. From c280323d8755cd1d7281b60ff28e9446909c5897 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 19 Dec 2023 10:11:13 +0800 Subject: [PATCH 354/380] refactor: move util --- src/NewPicker/PickerInput/RangePicker.tsx | 2 +- src/NewPicker/PickerInput/SinglePicker.tsx | 39 ------------------- .../PickerInput/hooks/useFieldsInvalidate.ts | 2 +- .../PickerInput/hooks/useRangeValue.ts | 4 +- src/NewPicker/util.ts | 6 --- src/utils/miscUtil.ts | 7 ++++ 6 files changed, 11 insertions(+), 49 deletions(-) delete mode 100644 src/NewPicker/util.ts diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 87ee5433a..1e0651661 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -1,3 +1,4 @@ +import { fillIndex } from '../../utils/miscUtil'; import { useEvent, useMergedState } from 'rc-util'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import omit from 'rc-util/lib/omit'; @@ -19,7 +20,6 @@ import type { } from '../../interface'; import type { PickerPanelProps } from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; -import { fillIndex } from '../util'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; import useFieldsInvalidate from './hooks/useFieldsInvalidate'; diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index 72abafbbe..a4098059b 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -330,47 +330,22 @@ function Picker( }, ); - // ======================== Change ======================== - // const fillCalendarValue = (date: DateType, index: number) => - // // Trigger change only when date changed - // fillIndex(calendarValue, index, date); - // ======================== Submit ======================== /** * Different with RangePicker, confirm should check `multiple` logic. * This will never provide `date` instead. */ const triggerConfirm = () => { - // const triggerConfirm = (date?: DateType, skipFocus?: boolean) => { - // let nextValue = calendarValue; - - // if (date) { - // nextValue = fillCalendarValue(date, activeIndex); - // } - - // Get next focus index - // const nextIndex = nextActiveIndex(nextValue); - - // Change calendar value and tell flush it - // triggerCalendarChange(nextValue); - // flushSubmit(activeIndex, nextIndex === null); triggerSubmitChange(getCalendarValue()); - // if (nextIndex === null) { triggerOpen(false, { force: true }); - // } else if (!skipFocus) { - // selectorRef.current.focus(nextIndex); - // } }; // ======================== Click ========================= const onSelectorClick: React.MouseEventHandler = (event) => { if (!disabled && !selectorRef.current.nativeElement.contains(document.activeElement)) { // Click to focus the enabled input - // const enabledIndex = disabled.findIndex((d) => !d); - // if (enabledIndex >= 0) { selectorRef.current.focus(); - // } } triggerOpen(true); @@ -405,8 +380,6 @@ function Picker( // ======================================================== // == Panels == // ======================================================== - // const [activeOffset, setActiveOffset] = React.useState(0); - // ======================= Presets ======================== const presetList = usePresets(presets); @@ -417,14 +390,6 @@ function Picker( // TODO: handle this const onPresetSubmit = (nextValue: DateType) => { - // const passed = triggerSubmitChange(nextValues); - - // if (passed) { - // triggerOpen(false, { force: true }); - // } - - // triggerConfirm(nextValue); - const nextCalendarValues = multiple ? toggleDates(getCalendarValue(), nextValue) : [nextValue]; const passed = triggerSubmitChange(nextCalendarValues); @@ -474,9 +439,6 @@ function Picker( // >>> cellRender const onInternalCellRender = useCellRender(cellRender, dateRender, monthCellRender); - // >>> Value - // const panelValue = calendarValue[activeIndex] || null; - // >>> invalid const panelProps = React.useMemo(() => { @@ -641,7 +603,6 @@ function Picker( // Icon suffixIcon={suffixIcon} // Active - // activeIndex={focused || mergedOpen ? activeIndex : null} activeHelp={!!internalHoverValue} allHelp={!!internalHoverValue && hoverSource === 'preset'} focused={focused} diff --git a/src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts b/src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts index 51c1f7db8..1e898f71d 100644 --- a/src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts +++ b/src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts @@ -1,5 +1,5 @@ +import { fillIndex } from '../../../utils/miscUtil'; import * as React from 'react'; -import { fillIndex } from '../../util'; import type useInvalidate from './useInvalidate'; /** diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index f8ae26aa3..0583dad9b 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -1,10 +1,10 @@ import { useEvent, useMergedState } from 'rc-util'; import * as React from 'react'; import type { GenerateConfig } from '../../../generate'; -import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; import useSyncState from '../../../hooks/useSyncState'; import type { BaseInfo, FormatType, Locale, ReplaceListType } from '../../../interface'; -import { fillIndex } from '../../util'; +import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; +import { fillIndex } from '../../../utils/miscUtil'; import type { RangePickerProps } from '../RangePicker'; import type { ReplacedPickerProps } from '../SinglePicker'; import useLockEffect from './useLockEffect'; diff --git a/src/NewPicker/util.ts b/src/NewPicker/util.ts deleted file mode 100644 index 4cc8edb07..000000000 --- a/src/NewPicker/util.ts +++ /dev/null @@ -1,6 +0,0 @@ -export function fillIndex(ori: T, index: number, value: T[number]): T { - const clone = [...ori] as T; - clone[index] = value; - - return clone; -} diff --git a/src/utils/miscUtil.ts b/src/utils/miscUtil.ts index b5c6174ab..b1f0ad4b0 100644 --- a/src/utils/miscUtil.ts +++ b/src/utils/miscUtil.ts @@ -16,3 +16,10 @@ export function toArray(val: T | T[]): T[] { return Array.isArray(val) ? val : [val]; } + +export function fillIndex(ori: T, index: number, value: T[number]): T { + const clone = [...ori] as T; + clone[index] = value; + + return clone; +} From c85378554b0a0745492ceb61cbc2518577ed3fb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 19 Dec 2023 10:14:18 +0800 Subject: [PATCH 355/380] refactor: move index --- src/{NewPicker => }/index.tsx | 8 ++++---- tests/new-range.spec.tsx | 2 +- tests/picker.spec.tsx | 2 +- tests/range.spec.tsx | 2 +- tests/util/commonUtil.tsx | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) rename src/{NewPicker => }/index.tsx (81%) diff --git a/src/NewPicker/index.tsx b/src/index.tsx similarity index 81% rename from src/NewPicker/index.tsx rename to src/index.tsx index 39b45fe68..ac908f478 100644 --- a/src/NewPicker/index.tsx +++ b/src/index.tsx @@ -27,10 +27,10 @@ * - [Break] RangePicker go to end field, `pickerValue` will follow the start field if not controlled. */ -import type { PickerRef } from '../interface'; -import RangePicker, { type RangePickerProps } from './PickerInput/RangePicker'; -import Picker, { type PickerProps } from './PickerInput/SinglePicker'; -import PickerPanel, { type PickerPanelProps } from './PickerPanel'; +import type { PickerRef } from './interface'; +import RangePicker, { type RangePickerProps } from './NewPicker/PickerInput/RangePicker'; +import Picker, { type PickerProps } from './NewPicker/PickerInput/SinglePicker'; +import PickerPanel, { type PickerPanelProps } from './NewPicker/PickerPanel'; export { Picker, RangePicker, PickerPanel }; export type { RangePickerProps, PickerProps, PickerPanelProps, PickerRef }; diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index a98478ac2..ab65368d1 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -6,7 +6,7 @@ import { spyElementPrototype } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; import zh_CN from '../src/locale/zh_CN'; -import type { RangePickerProps } from '../src/NewPicker'; +import type { RangePickerProps } from '../src'; import { closePicker, DayRangePicker, diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 22bf4b871..ccf839d02 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -10,7 +10,7 @@ import React from 'react'; import type { PanelMode, PickerMode } from '../src/interface'; import enUS from '../src/locale/en_US'; import zhCN from '../src/locale/zh_CN'; -import type { PickerRef } from '../src/NewPicker'; +import type { PickerRef } from '../src'; import { clearValue, closePicker, diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 24fbf47aa..6c8435f82 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -8,7 +8,7 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; import type { PickerMode } from '../src/interface'; -import type { PickerRef, RangePickerProps } from '../src/NewPicker'; +import type { PickerRef, RangePickerProps } from '../src'; import { clearValue, clickButton, diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 9a3c6a7ca..b2b3fe605 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -18,12 +18,12 @@ import type { PickerProps as NewPickerProps, PickerRef, RangePickerProps, -} from '../../src/NewPicker'; +} from '../../src'; import { Picker as NewPicker, PickerPanel as NewPickerPanel, RangePicker as NewRangePicker, -} from '../../src/NewPicker'; +} from '../../src'; import type { PickerBaseProps, PickerDateProps, PickerTimeProps } from '../../src/Picker'; import type { PickerPanelBaseProps, From ba7340d69b6ac606abcb04d0834ea0d7fa5d7920 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 19 Dec 2023 10:15:24 +0800 Subject: [PATCH 356/380] refactor: move trigger --- src/NewPicker/PickerInput/RangePicker.tsx | 2 +- src/NewPicker/PickerInput/SinglePicker.tsx | 2 +- src/{NewPicker => }/PickerTrigger/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) rename src/{NewPicker => }/PickerTrigger/index.tsx (97%) diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 1e0651661..1e9a590c4 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -19,7 +19,7 @@ import type { ValueDate, } from '../../interface'; import type { PickerPanelProps } from '../PickerPanel'; -import PickerTrigger from '../PickerTrigger'; +import PickerTrigger from '../../PickerTrigger'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; import useFieldsInvalidate from './hooks/useFieldsInvalidate'; diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/NewPicker/PickerInput/SinglePicker.tsx index a4098059b..4e9348037 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/NewPicker/PickerInput/SinglePicker.tsx @@ -15,7 +15,7 @@ import type { SharedTimeProps, ValueDate, } from '../../interface'; -import PickerTrigger from '../PickerTrigger'; +import PickerTrigger from '../../PickerTrigger'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; import useFieldsInvalidate from './hooks/useFieldsInvalidate'; diff --git a/src/NewPicker/PickerTrigger/index.tsx b/src/PickerTrigger/index.tsx similarity index 97% rename from src/NewPicker/PickerTrigger/index.tsx rename to src/PickerTrigger/index.tsx index dcabae6ea..159630c2a 100644 --- a/src/NewPicker/PickerTrigger/index.tsx +++ b/src/PickerTrigger/index.tsx @@ -2,7 +2,7 @@ import Trigger from '@rc-component/trigger'; import type { AlignType } from '@rc-component/trigger/lib/interface'; import classNames from 'classnames'; import * as React from 'react'; -import PickerContext from '../PickerInput/context'; +import PickerContext from '../NewPicker/PickerInput/context'; const BUILT_IN_PLACEMENTS = { bottomLeft: { From c291701acc208a1c6d25404841ed885a121dfe90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 19 Dec 2023 10:17:06 +0800 Subject: [PATCH 357/380] refactor: move part panels --- docs/examples/debug.tsx | 2 +- .../PickerInput/Popup/PopupPanel.tsx | 2 +- src/NewPicker/PickerInput/RangePicker.tsx | 2 +- src/NewPicker/PickerPanel/DatePanel/index.tsx | 4 +-- .../PickerPanel/DecadePanel/index.tsx | 4 +-- .../PickerPanel/MonthPanel/index.tsx | 4 +-- .../PickerPanel/QuarterPanel/index.tsx | 4 +-- src/NewPicker/PickerPanel/TimePanel/index.tsx | 2 +- src/NewPicker/PickerPanel/YearPanel/index.tsx | 4 +-- src/{NewPicker => }/PickerPanel/PanelBody.tsx | 4 +-- .../PickerPanel/PanelHeader.tsx | 2 +- src/{NewPicker => }/PickerPanel/index.tsx | 32 +++++++++---------- src/index.tsx | 2 +- 13 files changed, 34 insertions(+), 34 deletions(-) rename src/{NewPicker => }/PickerPanel/PanelBody.tsx (96%) rename src/{NewPicker => }/PickerPanel/PanelHeader.tsx (96%) rename src/{NewPicker => }/PickerPanel/index.tsx (91%) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 74e15cfe4..f28d31578 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -3,7 +3,7 @@ import '../../assets/index.less'; import type { Locale, PickerRef } from '../../src/interface'; import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; -import PickerPanel from '../../src/NewPicker/PickerPanel'; +import PickerPanel from '../../src/PickerPanel'; import dayjs, { type Dayjs } from 'dayjs'; import 'dayjs/locale/ar'; diff --git a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx index 0b1449147..e1207c6ff 100644 --- a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx +++ b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import PickerPanel, { type PickerPanelProps } from '../../PickerPanel'; +import PickerPanel, { type PickerPanelProps } from '../../../PickerPanel'; import { PickerHackContext, type PickerHackContextProps } from '../../PickerPanel/context'; import PickerContext from '../context'; import { offsetPanelDate } from '../hooks/useRangePickerValue'; diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx index 1e9a590c4..53e168aca 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/NewPicker/PickerInput/RangePicker.tsx @@ -18,7 +18,7 @@ import type { SharedPickerProps, ValueDate, } from '../../interface'; -import type { PickerPanelProps } from '../PickerPanel'; +import type { PickerPanelProps } from '../../PickerPanel'; import PickerTrigger from '../../PickerTrigger'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index abb62c04c..b33e29003 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -9,8 +9,8 @@ import { } from '../../../utils/dateUtil'; import type { PanelMode, SharedPanelProps } from '../../../interface'; import { PanelContext, useInfo } from '../context'; -import PanelBody from '../PanelBody'; -import PanelHeader from '../PanelHeader'; +import PanelBody from '../../../PickerPanel/PanelBody'; +import PanelHeader from '../../../PickerPanel/PanelHeader'; export interface DatePanelProps extends SharedPanelProps { panelName?: PanelMode; diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx index 01a13165f..6d17b3a34 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import type { SharedPanelProps } from '../../../interface'; import { formatValue, isSameDecade } from '../../../utils/dateUtil'; import { PanelContext, useInfo } from '../context'; -import PanelBody from '../PanelBody'; -import PanelHeader from '../PanelHeader'; +import PanelBody from '../../../PickerPanel/PanelBody'; +import PanelHeader from '../../../PickerPanel/PanelHeader'; export default function DecadePanel( props: SharedPanelProps, diff --git a/src/NewPicker/PickerPanel/MonthPanel/index.tsx b/src/NewPicker/PickerPanel/MonthPanel/index.tsx index fac22f3f0..44254917a 100644 --- a/src/NewPicker/PickerPanel/MonthPanel/index.tsx +++ b/src/NewPicker/PickerPanel/MonthPanel/index.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { formatValue, isSameMonth } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../../interface'; import { PanelContext, useInfo } from '../context'; -import PanelBody from '../PanelBody'; -import PanelHeader from '../PanelHeader'; +import PanelBody from '../../../PickerPanel/PanelBody'; +import PanelHeader from '../../../PickerPanel/PanelHeader'; export default function MonthPanel( props: SharedPanelProps, diff --git a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx index ae4da2f7e..72110c2bc 100644 --- a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx +++ b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import type { SharedPanelProps } from '../../../interface'; import { formatValue, isSameQuarter } from '../../../utils/dateUtil'; import { PanelContext, useInfo } from '../context'; -import PanelBody from '../PanelBody'; -import PanelHeader from '../PanelHeader'; +import PanelBody from '../../../PickerPanel/PanelBody'; +import PanelHeader from '../../../PickerPanel/PanelHeader'; export default function QuarterPanel( props: SharedPanelProps, diff --git a/src/NewPicker/PickerPanel/TimePanel/index.tsx b/src/NewPicker/PickerPanel/TimePanel/index.tsx index d25a8dbfc..1394183cc 100644 --- a/src/NewPicker/PickerPanel/TimePanel/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/index.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { formatValue } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../../interface'; import { PanelContext, useInfo } from '../context'; -import PanelHeader from '../PanelHeader'; +import PanelHeader from '../../../PickerPanel/PanelHeader'; import TimePanelBody from './TimePanelBody'; export type TimePanelProps = SharedPanelProps; diff --git a/src/NewPicker/PickerPanel/YearPanel/index.tsx b/src/NewPicker/PickerPanel/YearPanel/index.tsx index 34877d560..d90c7ad30 100644 --- a/src/NewPicker/PickerPanel/YearPanel/index.tsx +++ b/src/NewPicker/PickerPanel/YearPanel/index.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import type { SharedPanelProps } from '../../../interface'; import { formatValue, isSameYear } from '../../../utils/dateUtil'; import { PanelContext, useInfo } from '../context'; -import PanelBody from '../PanelBody'; -import PanelHeader from '../PanelHeader'; +import PanelBody from '../../../PickerPanel/PanelBody'; +import PanelHeader from '../../../PickerPanel/PanelHeader'; export default function YearPanel( props: SharedPanelProps, diff --git a/src/NewPicker/PickerPanel/PanelBody.tsx b/src/PickerPanel/PanelBody.tsx similarity index 96% rename from src/NewPicker/PickerPanel/PanelBody.tsx rename to src/PickerPanel/PanelBody.tsx index ec66dd72d..7e23cbc06 100644 --- a/src/NewPicker/PickerPanel/PanelBody.tsx +++ b/src/PickerPanel/PanelBody.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; -import { formatValue, isInRange, isSame } from '../../utils/dateUtil'; -import { PickerHackContext, usePanelContext } from './context'; +import { formatValue, isInRange, isSame } from '../utils/dateUtil'; +import { PickerHackContext, usePanelContext } from '../NewPicker/PickerPanel/context'; export interface PanelBodyProps { rowNum: number; diff --git a/src/NewPicker/PickerPanel/PanelHeader.tsx b/src/PickerPanel/PanelHeader.tsx similarity index 96% rename from src/NewPicker/PickerPanel/PanelHeader.tsx rename to src/PickerPanel/PanelHeader.tsx index 3ddb43dde..d38b0fcfb 100644 --- a/src/NewPicker/PickerPanel/PanelHeader.tsx +++ b/src/PickerPanel/PanelHeader.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { PickerHackContext, usePanelContext } from './context'; +import { PickerHackContext, usePanelContext } from '../NewPicker/PickerPanel/context'; const HIDDEN_STYLE: React.CSSProperties = { visibility: 'hidden', diff --git a/src/NewPicker/PickerPanel/index.tsx b/src/PickerPanel/index.tsx similarity index 91% rename from src/NewPicker/PickerPanel/index.tsx rename to src/PickerPanel/index.tsx index e21e3ead8..82de865d2 100644 --- a/src/NewPicker/PickerPanel/index.tsx +++ b/src/PickerPanel/index.tsx @@ -11,22 +11,22 @@ import type { PickerMode, SharedPanelProps, SharedTimeProps, -} from '../../interface'; -import { isSame } from '../../utils/dateUtil'; -import { toArray } from '../../utils/miscUtil'; -import useLocale from '../../hooks/useLocale'; -import { getTimeConfig } from '../../hooks/useTimeConfig'; -import useToggleDates from '../../hooks/useToggleDates'; -import PickerContext from '../PickerInput/context'; -import useCellRender from '../PickerInput/hooks/useCellRender'; -import DatePanel from './DatePanel'; -import DateTimePanel from './DateTimePanel'; -import DecadePanel from './DecadePanel'; -import MonthPanel from './MonthPanel'; -import QuarterPanel from './QuarterPanel'; -import TimePanel from './TimePanel'; -import WeekPanel from './WeekPanel'; -import YearPanel from './YearPanel'; +} from '../interface'; +import { isSame } from '../utils/dateUtil'; +import { toArray } from '../utils/miscUtil'; +import useLocale from '../hooks/useLocale'; +import { getTimeConfig } from '../hooks/useTimeConfig'; +import useToggleDates from '../hooks/useToggleDates'; +import PickerContext from '../NewPicker/PickerInput/context'; +import useCellRender from '../NewPicker/PickerInput/hooks/useCellRender'; +import DatePanel from '../NewPicker/PickerPanel/DatePanel'; +import DateTimePanel from '../NewPicker/PickerPanel/DateTimePanel'; +import DecadePanel from '../NewPicker/PickerPanel/DecadePanel'; +import MonthPanel from '../NewPicker/PickerPanel/MonthPanel'; +import QuarterPanel from '../NewPicker/PickerPanel/QuarterPanel'; +import TimePanel from '../NewPicker/PickerPanel/TimePanel'; +import WeekPanel from '../NewPicker/PickerPanel/WeekPanel'; +import YearPanel from '../NewPicker/PickerPanel/YearPanel'; const DefaultComponents: Components = { date: DatePanel, diff --git a/src/index.tsx b/src/index.tsx index ac908f478..842ac494b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -30,7 +30,7 @@ import type { PickerRef } from './interface'; import RangePicker, { type RangePickerProps } from './NewPicker/PickerInput/RangePicker'; import Picker, { type PickerProps } from './NewPicker/PickerInput/SinglePicker'; -import PickerPanel, { type PickerPanelProps } from './NewPicker/PickerPanel'; +import PickerPanel, { type PickerPanelProps } from './PickerPanel'; export { Picker, RangePicker, PickerPanel }; export type { RangePickerProps, PickerProps, PickerPanelProps, PickerRef }; From c9061296bf4f67d8c305c5b7bbcc9c7df07aa62a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 19 Dec 2023 10:18:49 +0800 Subject: [PATCH 358/380] refactor: move part panels --- src/NewPicker/PickerInput/Popup/PopupPanel.tsx | 2 +- src/NewPicker/PickerPanel/DatePanel/index.tsx | 2 +- src/NewPicker/PickerPanel/DecadePanel/index.tsx | 2 +- src/NewPicker/PickerPanel/MonthPanel/index.tsx | 2 +- src/NewPicker/PickerPanel/QuarterPanel/index.tsx | 2 +- .../PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx | 2 +- src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx | 2 +- src/NewPicker/PickerPanel/TimePanel/index.tsx | 2 +- src/NewPicker/PickerPanel/YearPanel/index.tsx | 2 +- src/PickerPanel/PanelBody.tsx | 2 +- src/PickerPanel/PanelHeader.tsx | 2 +- src/{NewPicker => }/PickerPanel/context.ts | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) rename src/{NewPicker => }/PickerPanel/context.ts (96%) diff --git a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx index e1207c6ff..bc083700e 100644 --- a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx +++ b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PickerPanel, { type PickerPanelProps } from '../../../PickerPanel'; -import { PickerHackContext, type PickerHackContextProps } from '../../PickerPanel/context'; +import { PickerHackContext, type PickerHackContextProps } from '../../../PickerPanel/context'; import PickerContext from '../context'; import { offsetPanelDate } from '../hooks/useRangePickerValue'; import { type FooterProps } from './Footer'; diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/NewPicker/PickerPanel/DatePanel/index.tsx index b33e29003..1c41e0c9f 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DatePanel/index.tsx @@ -8,7 +8,7 @@ import { WEEK_DAY_COUNT, } from '../../../utils/dateUtil'; import type { PanelMode, SharedPanelProps } from '../../../interface'; -import { PanelContext, useInfo } from '../context'; +import { PanelContext, useInfo } from '../../../PickerPanel/context'; import PanelBody from '../../../PickerPanel/PanelBody'; import PanelHeader from '../../../PickerPanel/PanelHeader'; diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/NewPicker/PickerPanel/DecadePanel/index.tsx index 6d17b3a34..0826cd23f 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/NewPicker/PickerPanel/DecadePanel/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { SharedPanelProps } from '../../../interface'; import { formatValue, isSameDecade } from '../../../utils/dateUtil'; -import { PanelContext, useInfo } from '../context'; +import { PanelContext, useInfo } from '../../../PickerPanel/context'; import PanelBody from '../../../PickerPanel/PanelBody'; import PanelHeader from '../../../PickerPanel/PanelHeader'; diff --git a/src/NewPicker/PickerPanel/MonthPanel/index.tsx b/src/NewPicker/PickerPanel/MonthPanel/index.tsx index 44254917a..d206ee7ef 100644 --- a/src/NewPicker/PickerPanel/MonthPanel/index.tsx +++ b/src/NewPicker/PickerPanel/MonthPanel/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { formatValue, isSameMonth } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../../interface'; -import { PanelContext, useInfo } from '../context'; +import { PanelContext, useInfo } from '../../../PickerPanel/context'; import PanelBody from '../../../PickerPanel/PanelBody'; import PanelHeader from '../../../PickerPanel/PanelHeader'; diff --git a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx index 72110c2bc..27a5c744e 100644 --- a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx +++ b/src/NewPicker/PickerPanel/QuarterPanel/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { SharedPanelProps } from '../../../interface'; import { formatValue, isSameQuarter } from '../../../utils/dateUtil'; -import { PanelContext, useInfo } from '../context'; +import { PanelContext, useInfo } from '../../../PickerPanel/context'; import PanelBody from '../../../PickerPanel/PanelBody'; import PanelHeader from '../../../PickerPanel/PanelHeader'; diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx index 38e155560..8a522076c 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import * as React from 'react'; -import { usePanelContext } from '../../context'; +import { usePanelContext } from '../../../../PickerPanel/context'; import useScrollTo from './useScrollTo'; const SCROLL_DELAY = 300; diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx index 7ae45f2fe..25b8fc275 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { formatValue } from '../../../../utils/dateUtil'; import useTimeInfo from '../../../../hooks/useTimeInfo'; import type { SharedPanelProps, SharedTimeProps } from '../../../../interface'; -import { PickerHackContext, usePanelContext } from '../../context'; +import { PickerHackContext, usePanelContext } from '../../../../PickerPanel/context'; import TimeColumn, { type Unit } from './TimeColumn'; function isAM(hour: number) { diff --git a/src/NewPicker/PickerPanel/TimePanel/index.tsx b/src/NewPicker/PickerPanel/TimePanel/index.tsx index 1394183cc..4ac56319e 100644 --- a/src/NewPicker/PickerPanel/TimePanel/index.tsx +++ b/src/NewPicker/PickerPanel/TimePanel/index.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import * as React from 'react'; import { formatValue } from '../../../utils/dateUtil'; import type { SharedPanelProps } from '../../../interface'; -import { PanelContext, useInfo } from '../context'; +import { PanelContext, useInfo } from '../../../PickerPanel/context'; import PanelHeader from '../../../PickerPanel/PanelHeader'; import TimePanelBody from './TimePanelBody'; diff --git a/src/NewPicker/PickerPanel/YearPanel/index.tsx b/src/NewPicker/PickerPanel/YearPanel/index.tsx index d90c7ad30..d8d47ee19 100644 --- a/src/NewPicker/PickerPanel/YearPanel/index.tsx +++ b/src/NewPicker/PickerPanel/YearPanel/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { SharedPanelProps } from '../../../interface'; import { formatValue, isSameYear } from '../../../utils/dateUtil'; -import { PanelContext, useInfo } from '../context'; +import { PanelContext, useInfo } from '../../../PickerPanel/context'; import PanelBody from '../../../PickerPanel/PanelBody'; import PanelHeader from '../../../PickerPanel/PanelHeader'; diff --git a/src/PickerPanel/PanelBody.tsx b/src/PickerPanel/PanelBody.tsx index 7e23cbc06..611e1896a 100644 --- a/src/PickerPanel/PanelBody.tsx +++ b/src/PickerPanel/PanelBody.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; import { formatValue, isInRange, isSame } from '../utils/dateUtil'; -import { PickerHackContext, usePanelContext } from '../NewPicker/PickerPanel/context'; +import { PickerHackContext, usePanelContext } from './context'; export interface PanelBodyProps { rowNum: number; diff --git a/src/PickerPanel/PanelHeader.tsx b/src/PickerPanel/PanelHeader.tsx index d38b0fcfb..3ddb43dde 100644 --- a/src/PickerPanel/PanelHeader.tsx +++ b/src/PickerPanel/PanelHeader.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { PickerHackContext, usePanelContext } from '../NewPicker/PickerPanel/context'; +import { PickerHackContext, usePanelContext } from './context'; const HIDDEN_STYLE: React.CSSProperties = { visibility: 'hidden', diff --git a/src/NewPicker/PickerPanel/context.ts b/src/PickerPanel/context.ts similarity index 96% rename from src/NewPicker/PickerPanel/context.ts rename to src/PickerPanel/context.ts index e76b51482..54350072d 100644 --- a/src/NewPicker/PickerPanel/context.ts +++ b/src/PickerPanel/context.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { PanelMode, SharedPanelProps } from '../../interface'; +import type { PanelMode, SharedPanelProps } from '../interface'; export interface PanelContextProps extends Pick< From 88fadfbbd64ad011d944577cd45bff85ad377c75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 19 Dec 2023 10:35:53 +0800 Subject: [PATCH 359/380] fix: link code --- .../PickerPanel/DatePanel/index.tsx | 10 +++---- .../PickerPanel/DateTimePanel/index.tsx | 4 +-- .../PickerPanel/DecadePanel/index.tsx | 10 +++---- .../PickerPanel/MonthPanel/index.tsx | 10 +++---- .../PickerPanel/QuarterPanel/index.tsx | 10 +++---- .../TimePanel/TimePanelBody/TimeColumn.tsx | 2 +- .../TimePanel/TimePanelBody/index.tsx | 8 +++--- .../TimePanel/TimePanelBody/useScrollTo.ts | 0 .../TimePanel/TimePanelBody/util.ts | 2 +- .../PickerPanel/TimePanel/index.tsx | 8 +++--- .../PickerPanel/WeekPanel/index.tsx | 4 +-- .../PickerPanel/YearPanel/index.tsx | 10 +++---- src/PickerPanel/index.tsx | 26 +++++++++---------- src/hooks/useTimeInfo.ts | 2 +- 14 files changed, 53 insertions(+), 53 deletions(-) rename src/{NewPicker => }/PickerPanel/DatePanel/index.tsx (95%) rename src/{NewPicker => }/PickerPanel/DateTimePanel/index.tsx (87%) rename src/{NewPicker => }/PickerPanel/DecadePanel/index.tsx (89%) rename src/{NewPicker => }/PickerPanel/MonthPanel/index.tsx (88%) rename src/{NewPicker => }/PickerPanel/QuarterPanel/index.tsx (87%) rename src/{NewPicker => }/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx (98%) rename src/{NewPicker => }/PickerPanel/TimePanel/TimePanelBody/index.tsx (97%) rename src/{NewPicker => }/PickerPanel/TimePanel/TimePanelBody/useScrollTo.ts (100%) rename src/{NewPicker => }/PickerPanel/TimePanel/TimePanelBody/util.ts (96%) rename src/{NewPicker => }/PickerPanel/TimePanel/index.tsx (81%) rename src/{NewPicker => }/PickerPanel/WeekPanel/index.tsx (91%) rename src/{NewPicker => }/PickerPanel/YearPanel/index.tsx (89%) diff --git a/src/NewPicker/PickerPanel/DatePanel/index.tsx b/src/PickerPanel/DatePanel/index.tsx similarity index 95% rename from src/NewPicker/PickerPanel/DatePanel/index.tsx rename to src/PickerPanel/DatePanel/index.tsx index 1c41e0c9f..b88f068c4 100644 --- a/src/NewPicker/PickerPanel/DatePanel/index.tsx +++ b/src/PickerPanel/DatePanel/index.tsx @@ -6,11 +6,11 @@ import { isSameDate, isSameMonth, WEEK_DAY_COUNT, -} from '../../../utils/dateUtil'; -import type { PanelMode, SharedPanelProps } from '../../../interface'; -import { PanelContext, useInfo } from '../../../PickerPanel/context'; -import PanelBody from '../../../PickerPanel/PanelBody'; -import PanelHeader from '../../../PickerPanel/PanelHeader'; +} from '../../utils/dateUtil'; +import type { PanelMode, SharedPanelProps } from '../../interface'; +import { PanelContext, useInfo } from '../../PickerPanel/context'; +import PanelBody from '../../PickerPanel/PanelBody'; +import PanelHeader from '../../PickerPanel/PanelHeader'; export interface DatePanelProps extends SharedPanelProps { panelName?: PanelMode; diff --git a/src/NewPicker/PickerPanel/DateTimePanel/index.tsx b/src/PickerPanel/DateTimePanel/index.tsx similarity index 87% rename from src/NewPicker/PickerPanel/DateTimePanel/index.tsx rename to src/PickerPanel/DateTimePanel/index.tsx index b84fc26a9..c924ee0f9 100644 --- a/src/NewPicker/PickerPanel/DateTimePanel/index.tsx +++ b/src/PickerPanel/DateTimePanel/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import useTimeInfo from '../../../hooks/useTimeInfo'; -import type { SharedPanelProps } from '../../../interface'; +import useTimeInfo from '../../hooks/useTimeInfo'; +import type { SharedPanelProps } from '../../interface'; import DatePanel from '../DatePanel'; import TimePanel from '../TimePanel'; diff --git a/src/NewPicker/PickerPanel/DecadePanel/index.tsx b/src/PickerPanel/DecadePanel/index.tsx similarity index 89% rename from src/NewPicker/PickerPanel/DecadePanel/index.tsx rename to src/PickerPanel/DecadePanel/index.tsx index 0826cd23f..b076ea6cb 100644 --- a/src/NewPicker/PickerPanel/DecadePanel/index.tsx +++ b/src/PickerPanel/DecadePanel/index.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import type { SharedPanelProps } from '../../../interface'; -import { formatValue, isSameDecade } from '../../../utils/dateUtil'; -import { PanelContext, useInfo } from '../../../PickerPanel/context'; -import PanelBody from '../../../PickerPanel/PanelBody'; -import PanelHeader from '../../../PickerPanel/PanelHeader'; +import type { SharedPanelProps } from '../../interface'; +import { formatValue, isSameDecade } from '../../utils/dateUtil'; +import { PanelContext, useInfo } from '../../PickerPanel/context'; +import PanelBody from '../../PickerPanel/PanelBody'; +import PanelHeader from '../../PickerPanel/PanelHeader'; export default function DecadePanel( props: SharedPanelProps, diff --git a/src/NewPicker/PickerPanel/MonthPanel/index.tsx b/src/PickerPanel/MonthPanel/index.tsx similarity index 88% rename from src/NewPicker/PickerPanel/MonthPanel/index.tsx rename to src/PickerPanel/MonthPanel/index.tsx index d206ee7ef..4bdf3c46a 100644 --- a/src/NewPicker/PickerPanel/MonthPanel/index.tsx +++ b/src/PickerPanel/MonthPanel/index.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import { formatValue, isSameMonth } from '../../../utils/dateUtil'; -import type { SharedPanelProps } from '../../../interface'; -import { PanelContext, useInfo } from '../../../PickerPanel/context'; -import PanelBody from '../../../PickerPanel/PanelBody'; -import PanelHeader from '../../../PickerPanel/PanelHeader'; +import { formatValue, isSameMonth } from '../../utils/dateUtil'; +import type { SharedPanelProps } from '../../interface'; +import { PanelContext, useInfo } from '../../PickerPanel/context'; +import PanelBody from '../../PickerPanel/PanelBody'; +import PanelHeader from '../../PickerPanel/PanelHeader'; export default function MonthPanel( props: SharedPanelProps, diff --git a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx b/src/PickerPanel/QuarterPanel/index.tsx similarity index 87% rename from src/NewPicker/PickerPanel/QuarterPanel/index.tsx rename to src/PickerPanel/QuarterPanel/index.tsx index 27a5c744e..104a876fb 100644 --- a/src/NewPicker/PickerPanel/QuarterPanel/index.tsx +++ b/src/PickerPanel/QuarterPanel/index.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import type { SharedPanelProps } from '../../../interface'; -import { formatValue, isSameQuarter } from '../../../utils/dateUtil'; -import { PanelContext, useInfo } from '../../../PickerPanel/context'; -import PanelBody from '../../../PickerPanel/PanelBody'; -import PanelHeader from '../../../PickerPanel/PanelHeader'; +import type { SharedPanelProps } from '../../interface'; +import { formatValue, isSameQuarter } from '../../utils/dateUtil'; +import { PanelContext, useInfo } from '../../PickerPanel/context'; +import PanelBody from '../../PickerPanel/PanelBody'; +import PanelHeader from '../../PickerPanel/PanelHeader'; export default function QuarterPanel( props: SharedPanelProps, diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx similarity index 98% rename from src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx rename to src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx index 8a522076c..6cd49542b 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx +++ b/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import * as React from 'react'; -import { usePanelContext } from '../../../../PickerPanel/context'; +import { usePanelContext } from '../../../PickerPanel/context'; import useScrollTo from './useScrollTo'; const SCROLL_DELAY = 300; diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/PickerPanel/TimePanel/TimePanelBody/index.tsx similarity index 97% rename from src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx rename to src/PickerPanel/TimePanel/TimePanelBody/index.tsx index 25b8fc275..41f8d4f2a 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { formatValue } from '../../../../utils/dateUtil'; -import useTimeInfo from '../../../../hooks/useTimeInfo'; -import type { SharedPanelProps, SharedTimeProps } from '../../../../interface'; -import { PickerHackContext, usePanelContext } from '../../../../PickerPanel/context'; +import { formatValue } from '../../../utils/dateUtil'; +import useTimeInfo from '../../../hooks/useTimeInfo'; +import type { SharedPanelProps, SharedTimeProps } from '../../../interface'; +import { PickerHackContext, usePanelContext } from '../../../PickerPanel/context'; import TimeColumn, { type Unit } from './TimeColumn'; function isAM(hour: number) { diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/useScrollTo.ts b/src/PickerPanel/TimePanel/TimePanelBody/useScrollTo.ts similarity index 100% rename from src/NewPicker/PickerPanel/TimePanel/TimePanelBody/useScrollTo.ts rename to src/PickerPanel/TimePanel/TimePanelBody/useScrollTo.ts diff --git a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/util.ts b/src/PickerPanel/TimePanel/TimePanelBody/util.ts similarity index 96% rename from src/NewPicker/PickerPanel/TimePanel/TimePanelBody/util.ts rename to src/PickerPanel/TimePanel/TimePanelBody/util.ts index 31aa913ce..48b28d509 100644 --- a/src/NewPicker/PickerPanel/TimePanel/TimePanelBody/util.ts +++ b/src/PickerPanel/TimePanel/TimePanelBody/util.ts @@ -1,4 +1,4 @@ -import type { GenerateConfig } from '../../../../generate'; +import type { GenerateConfig } from '../../../generate'; import type { Unit } from './TimeColumn'; export function findValidateTime( diff --git a/src/NewPicker/PickerPanel/TimePanel/index.tsx b/src/PickerPanel/TimePanel/index.tsx similarity index 81% rename from src/NewPicker/PickerPanel/TimePanel/index.tsx rename to src/PickerPanel/TimePanel/index.tsx index 4ac56319e..c93fd3f1c 100644 --- a/src/NewPicker/PickerPanel/TimePanel/index.tsx +++ b/src/PickerPanel/TimePanel/index.tsx @@ -1,9 +1,9 @@ import classNames from 'classnames'; import * as React from 'react'; -import { formatValue } from '../../../utils/dateUtil'; -import type { SharedPanelProps } from '../../../interface'; -import { PanelContext, useInfo } from '../../../PickerPanel/context'; -import PanelHeader from '../../../PickerPanel/PanelHeader'; +import { formatValue } from '../../utils/dateUtil'; +import type { SharedPanelProps } from '../../interface'; +import { PanelContext, useInfo } from '../../PickerPanel/context'; +import PanelHeader from '../../PickerPanel/PanelHeader'; import TimePanelBody from './TimePanelBody'; export type TimePanelProps = SharedPanelProps; diff --git a/src/NewPicker/PickerPanel/WeekPanel/index.tsx b/src/PickerPanel/WeekPanel/index.tsx similarity index 91% rename from src/NewPicker/PickerPanel/WeekPanel/index.tsx rename to src/PickerPanel/WeekPanel/index.tsx index efd0d6995..da531654b 100644 --- a/src/NewPicker/PickerPanel/WeekPanel/index.tsx +++ b/src/PickerPanel/WeekPanel/index.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import * as React from 'react'; -import type { SharedPanelProps } from '../../../interface'; -import { isInRange, isSameWeek } from '../../../utils/dateUtil'; +import type { SharedPanelProps } from '../../interface'; +import { isInRange, isSameWeek } from '../../utils/dateUtil'; import DatePanel from '../DatePanel'; export default function WeekPanel( diff --git a/src/NewPicker/PickerPanel/YearPanel/index.tsx b/src/PickerPanel/YearPanel/index.tsx similarity index 89% rename from src/NewPicker/PickerPanel/YearPanel/index.tsx rename to src/PickerPanel/YearPanel/index.tsx index d8d47ee19..6651bf2be 100644 --- a/src/NewPicker/PickerPanel/YearPanel/index.tsx +++ b/src/PickerPanel/YearPanel/index.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import type { SharedPanelProps } from '../../../interface'; -import { formatValue, isSameYear } from '../../../utils/dateUtil'; -import { PanelContext, useInfo } from '../../../PickerPanel/context'; -import PanelBody from '../../../PickerPanel/PanelBody'; -import PanelHeader from '../../../PickerPanel/PanelHeader'; +import type { SharedPanelProps } from '../../interface'; +import { formatValue, isSameYear } from '../../utils/dateUtil'; +import { PanelContext, useInfo } from '../../PickerPanel/context'; +import PanelBody from '../../PickerPanel/PanelBody'; +import PanelHeader from '../../PickerPanel/PanelHeader'; export default function YearPanel( props: SharedPanelProps, diff --git a/src/PickerPanel/index.tsx b/src/PickerPanel/index.tsx index 82de865d2..7e158a5e8 100644 --- a/src/PickerPanel/index.tsx +++ b/src/PickerPanel/index.tsx @@ -1,6 +1,9 @@ import classNames from 'classnames'; import { useEvent, useMergedState, warning } from 'rc-util'; import * as React from 'react'; +import useLocale from '../hooks/useLocale'; +import { getTimeConfig } from '../hooks/useTimeConfig'; +import useToggleDates from '../hooks/useToggleDates'; import type { CellRender, Components, @@ -12,21 +15,18 @@ import type { SharedPanelProps, SharedTimeProps, } from '../interface'; -import { isSame } from '../utils/dateUtil'; -import { toArray } from '../utils/miscUtil'; -import useLocale from '../hooks/useLocale'; -import { getTimeConfig } from '../hooks/useTimeConfig'; -import useToggleDates from '../hooks/useToggleDates'; import PickerContext from '../NewPicker/PickerInput/context'; import useCellRender from '../NewPicker/PickerInput/hooks/useCellRender'; -import DatePanel from '../NewPicker/PickerPanel/DatePanel'; -import DateTimePanel from '../NewPicker/PickerPanel/DateTimePanel'; -import DecadePanel from '../NewPicker/PickerPanel/DecadePanel'; -import MonthPanel from '../NewPicker/PickerPanel/MonthPanel'; -import QuarterPanel from '../NewPicker/PickerPanel/QuarterPanel'; -import TimePanel from '../NewPicker/PickerPanel/TimePanel'; -import WeekPanel from '../NewPicker/PickerPanel/WeekPanel'; -import YearPanel from '../NewPicker/PickerPanel/YearPanel'; +import { isSame } from '../utils/dateUtil'; +import { toArray } from '../utils/miscUtil'; +import DatePanel from './DatePanel'; +import DateTimePanel from './DateTimePanel'; +import DecadePanel from './DecadePanel'; +import MonthPanel from './MonthPanel'; +import QuarterPanel from './QuarterPanel'; +import TimePanel from './TimePanel'; +import WeekPanel from './WeekPanel'; +import YearPanel from './YearPanel'; const DefaultComponents: Components = { date: DatePanel, diff --git a/src/hooks/useTimeInfo.ts b/src/hooks/useTimeInfo.ts index 22464c324..4dcb4dbed 100644 --- a/src/hooks/useTimeInfo.ts +++ b/src/hooks/useTimeInfo.ts @@ -3,7 +3,7 @@ import * as React from 'react'; import type { GenerateConfig } from '../generate'; import { leftPad } from '../utils/miscUtil'; import type { DisabledTimes, SharedTimeProps } from '../interface'; -import { findValidateTime } from '../NewPicker/PickerPanel/TimePanel/TimePanelBody/util'; +import { findValidateTime } from '../PickerPanel/TimePanel/TimePanelBody/util'; export type Unit = { label: React.ReactText; From 27a127d63b5e6b8a156790c8c6e14ab0fe7d0f12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 19 Dec 2023 10:39:06 +0800 Subject: [PATCH 360/380] refactor: clean up --- src/PickerPanel/DatePanel/index.tsx | 6 +++--- src/PickerPanel/DecadePanel/index.tsx | 6 +++--- src/PickerPanel/MonthPanel/index.tsx | 6 +++--- src/PickerPanel/QuarterPanel/index.tsx | 6 +++--- src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx | 2 +- src/PickerPanel/TimePanel/TimePanelBody/index.tsx | 2 +- src/PickerPanel/TimePanel/index.tsx | 4 ++-- src/PickerPanel/YearPanel/index.tsx | 6 +++--- 8 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/PickerPanel/DatePanel/index.tsx b/src/PickerPanel/DatePanel/index.tsx index b88f068c4..d1aa7cfd2 100644 --- a/src/PickerPanel/DatePanel/index.tsx +++ b/src/PickerPanel/DatePanel/index.tsx @@ -8,9 +8,9 @@ import { WEEK_DAY_COUNT, } from '../../utils/dateUtil'; import type { PanelMode, SharedPanelProps } from '../../interface'; -import { PanelContext, useInfo } from '../../PickerPanel/context'; -import PanelBody from '../../PickerPanel/PanelBody'; -import PanelHeader from '../../PickerPanel/PanelHeader'; +import { PanelContext, useInfo } from '../context'; +import PanelBody from '../PanelBody'; +import PanelHeader from '../PanelHeader'; export interface DatePanelProps extends SharedPanelProps { panelName?: PanelMode; diff --git a/src/PickerPanel/DecadePanel/index.tsx b/src/PickerPanel/DecadePanel/index.tsx index b076ea6cb..a4444dacf 100644 --- a/src/PickerPanel/DecadePanel/index.tsx +++ b/src/PickerPanel/DecadePanel/index.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import type { SharedPanelProps } from '../../interface'; import { formatValue, isSameDecade } from '../../utils/dateUtil'; -import { PanelContext, useInfo } from '../../PickerPanel/context'; -import PanelBody from '../../PickerPanel/PanelBody'; -import PanelHeader from '../../PickerPanel/PanelHeader'; +import { PanelContext, useInfo } from '../context'; +import PanelBody from '../PanelBody'; +import PanelHeader from '../PanelHeader'; export default function DecadePanel( props: SharedPanelProps, diff --git a/src/PickerPanel/MonthPanel/index.tsx b/src/PickerPanel/MonthPanel/index.tsx index 4bdf3c46a..bcc68a121 100644 --- a/src/PickerPanel/MonthPanel/index.tsx +++ b/src/PickerPanel/MonthPanel/index.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { formatValue, isSameMonth } from '../../utils/dateUtil'; import type { SharedPanelProps } from '../../interface'; -import { PanelContext, useInfo } from '../../PickerPanel/context'; -import PanelBody from '../../PickerPanel/PanelBody'; -import PanelHeader from '../../PickerPanel/PanelHeader'; +import { PanelContext, useInfo } from '../context'; +import PanelBody from '../PanelBody'; +import PanelHeader from '../PanelHeader'; export default function MonthPanel( props: SharedPanelProps, diff --git a/src/PickerPanel/QuarterPanel/index.tsx b/src/PickerPanel/QuarterPanel/index.tsx index 104a876fb..1f13534b8 100644 --- a/src/PickerPanel/QuarterPanel/index.tsx +++ b/src/PickerPanel/QuarterPanel/index.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import type { SharedPanelProps } from '../../interface'; import { formatValue, isSameQuarter } from '../../utils/dateUtil'; -import { PanelContext, useInfo } from '../../PickerPanel/context'; -import PanelBody from '../../PickerPanel/PanelBody'; -import PanelHeader from '../../PickerPanel/PanelHeader'; +import { PanelContext, useInfo } from '../context'; +import PanelBody from '../PanelBody'; +import PanelHeader from '../PanelHeader'; export default function QuarterPanel( props: SharedPanelProps, diff --git a/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx b/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx index 6cd49542b..38e155560 100644 --- a/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx +++ b/src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import * as React from 'react'; -import { usePanelContext } from '../../../PickerPanel/context'; +import { usePanelContext } from '../../context'; import useScrollTo from './useScrollTo'; const SCROLL_DELAY = 300; diff --git a/src/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/PickerPanel/TimePanel/TimePanelBody/index.tsx index 41f8d4f2a..ddd3a2fca 100644 --- a/src/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { formatValue } from '../../../utils/dateUtil'; import useTimeInfo from '../../../hooks/useTimeInfo'; import type { SharedPanelProps, SharedTimeProps } from '../../../interface'; -import { PickerHackContext, usePanelContext } from '../../../PickerPanel/context'; +import { PickerHackContext, usePanelContext } from '../../context'; import TimeColumn, { type Unit } from './TimeColumn'; function isAM(hour: number) { diff --git a/src/PickerPanel/TimePanel/index.tsx b/src/PickerPanel/TimePanel/index.tsx index c93fd3f1c..512fa86f2 100644 --- a/src/PickerPanel/TimePanel/index.tsx +++ b/src/PickerPanel/TimePanel/index.tsx @@ -2,8 +2,8 @@ import classNames from 'classnames'; import * as React from 'react'; import { formatValue } from '../../utils/dateUtil'; import type { SharedPanelProps } from '../../interface'; -import { PanelContext, useInfo } from '../../PickerPanel/context'; -import PanelHeader from '../../PickerPanel/PanelHeader'; +import { PanelContext, useInfo } from '../context'; +import PanelHeader from '../PanelHeader'; import TimePanelBody from './TimePanelBody'; export type TimePanelProps = SharedPanelProps; diff --git a/src/PickerPanel/YearPanel/index.tsx b/src/PickerPanel/YearPanel/index.tsx index 6651bf2be..c66090c7b 100644 --- a/src/PickerPanel/YearPanel/index.tsx +++ b/src/PickerPanel/YearPanel/index.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import type { SharedPanelProps } from '../../interface'; import { formatValue, isSameYear } from '../../utils/dateUtil'; -import { PanelContext, useInfo } from '../../PickerPanel/context'; -import PanelBody from '../../PickerPanel/PanelBody'; -import PanelHeader from '../../PickerPanel/PanelHeader'; +import { PanelContext, useInfo } from '../context'; +import PanelBody from '../PanelBody'; +import PanelHeader from '../PanelHeader'; export default function YearPanel( props: SharedPanelProps, From 9d6e64b3e6022c77a2a16f1159243585bedc9657 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 19 Dec 2023 10:43:30 +0800 Subject: [PATCH 361/380] refactor: move picker --- docs/examples/debug.tsx | 4 +-- src/NewPicker/PickerInput/Popup/Footer.tsx | 2 +- .../PickerInput/Popup/PopupPanel.tsx | 2 +- src/NewPicker/PickerInput/Popup/index.tsx | 2 +- src/NewPicker/PickerInput/Selector/Icon.tsx | 2 +- src/NewPicker/PickerInput/Selector/Input.tsx | 2 +- .../PickerInput/Selector/RangeSelector.tsx | 2 +- .../Selector/SingleSelector/MultipleDates.tsx | 2 +- .../Selector/SingleSelector/index.tsx | 4 +-- .../PickerInput/hooks/useFilledProps.ts | 2 +- .../PickerInput/hooks/useRangeActive.ts | 2 +- .../PickerInput/hooks/useRangeDisabledDate.ts | 2 +- .../PickerInput/hooks/useRangePickerValue.ts | 2 +- .../PickerInput/hooks/useRangeValue.ts | 4 +-- .../PickerInput/RangePicker.tsx | 34 +++++++++---------- .../PickerInput/SinglePicker.tsx | 30 ++++++++-------- src/{NewPicker => }/PickerInput/context.tsx | 4 +-- src/PickerPanel/index.tsx | 2 +- src/PickerTrigger/index.tsx | 2 +- src/index.tsx | 4 +-- 20 files changed, 55 insertions(+), 55 deletions(-) rename src/{NewPicker => }/PickerInput/RangePicker.tsx (94%) rename src/{NewPicker => }/PickerInput/SinglePicker.tsx (94%) rename src/{NewPicker => }/PickerInput/context.tsx (76%) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index f28d31578..227ddf043 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import '../../assets/index.less'; import type { Locale, PickerRef } from '../../src/interface'; -import RangePicker from '../../src/NewPicker/PickerInput/RangePicker'; -import SinglePicker from '../../src/NewPicker/PickerInput/SinglePicker'; +import RangePicker from '../../src/PickerInput/RangePicker'; +import SinglePicker from '../../src/PickerInput/SinglePicker'; import PickerPanel from '../../src/PickerPanel'; import dayjs, { type Dayjs } from 'dayjs'; diff --git a/src/NewPicker/PickerInput/Popup/Footer.tsx b/src/NewPicker/PickerInput/Popup/Footer.tsx index 4241d5d7b..3e6efce77 100644 --- a/src/NewPicker/PickerInput/Popup/Footer.tsx +++ b/src/NewPicker/PickerInput/Popup/Footer.tsx @@ -9,7 +9,7 @@ import type { RangeTimeProps, SharedPickerProps, } from '../../../interface'; -import PickerContext from '../context'; +import PickerContext from '../../../PickerInput/context'; export interface FooterProps { mode: PanelMode; diff --git a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx index bc083700e..7b1bbde51 100644 --- a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx +++ b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PickerPanel, { type PickerPanelProps } from '../../../PickerPanel'; import { PickerHackContext, type PickerHackContextProps } from '../../../PickerPanel/context'; -import PickerContext from '../context'; +import PickerContext from '../../../PickerInput/context'; import { offsetPanelDate } from '../hooks/useRangePickerValue'; import { type FooterProps } from './Footer'; diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/NewPicker/PickerInput/Popup/index.tsx index 9942cae69..6add66f99 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/NewPicker/PickerInput/Popup/index.tsx @@ -3,7 +3,7 @@ import ResizeObserver, { type ResizeObserverProps } from 'rc-resize-observer'; import * as React from 'react'; import type { SharedPickerProps, ValueDate } from '../../../interface'; import { toArray } from '../../../utils/miscUtil'; -import PickerContext from '../context'; +import PickerContext from '../../../PickerInput/context'; import Footer, { type FooterProps } from './Footer'; import PopupPanel, { type PopupPanelProps } from './PopupPanel'; import PresetPanel from './PresetPanel'; diff --git a/src/NewPicker/PickerInput/Selector/Icon.tsx b/src/NewPicker/PickerInput/Selector/Icon.tsx index 18d55f5da..53b255575 100644 --- a/src/NewPicker/PickerInput/Selector/Icon.tsx +++ b/src/NewPicker/PickerInput/Selector/Icon.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import PickerContext from '../context'; +import PickerContext from '../../../PickerInput/context'; export interface IconProps extends React.HtmlHTMLAttributes { icon?: React.ReactNode; diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 5d4d3f8e5..90c34b15a 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -4,7 +4,7 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import raf from 'rc-util/lib/raf'; import * as React from 'react'; import { leftPad } from '../../../utils/miscUtil'; -import PickerContext from '../context'; +import PickerContext from '../../../PickerInput/context'; import useLockEffect from '../hooks/useLockEffect'; import Icon from './Icon'; import MaskFormat from './MaskFormat'; diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx index bafcf16dc..e7264da80 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx @@ -3,7 +3,7 @@ import ResizeObserver from 'rc-resize-observer'; import { useEvent } from 'rc-util'; import * as React from 'react'; import type { SelectorProps, SelectorRef } from '../../../interface'; -import PickerContext from '../context'; +import PickerContext from '../../../PickerInput/context'; import useInputProps from './hooks/useInputProps'; import useRootProps from './hooks/useRootProps'; import Icon, { ClearIcon } from './Icon'; diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector/MultipleDates.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector/MultipleDates.tsx index 47cbd2a8e..13b7dedc6 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector/MultipleDates.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector/MultipleDates.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import Overflow from 'rc-overflow'; import * as React from 'react'; -import type { PickerProps } from '../../SinglePicker'; +import type { PickerProps } from '../../../../PickerInput/SinglePicker'; export interface MultipleDatesProps extends Pick { diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx index e0102c931..69de4341a 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx @@ -2,8 +2,8 @@ import classNames from 'classnames'; import * as React from 'react'; import { isSame } from '../../../../utils/dateUtil'; import type { InternalMode, SelectorProps, SelectorRef } from '../../../../interface'; -import PickerContext from '../../context'; -import type { PickerProps } from '../../SinglePicker'; +import PickerContext from '../../../../PickerInput/context'; +import type { PickerProps } from '../../../../PickerInput/SinglePicker'; import useInputProps from '../hooks/useInputProps'; import useRootProps from '../hooks/useRootProps'; import Icon, { ClearIcon } from '../Icon'; diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/NewPicker/PickerInput/hooks/useFilledProps.ts index a61294398..fb4f4d1d5 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/NewPicker/PickerInput/hooks/useFilledProps.ts @@ -4,7 +4,7 @@ import { toArray } from '../../../utils/miscUtil'; import { fillLocale } from '../../../hooks/useLocale'; import { getTimeConfig } from '../../../hooks/useTimeConfig'; import type { FormatType, InternalMode } from '../../../interface'; -import type { RangePickerProps } from '../RangePicker'; +import type { RangePickerProps } from '../../../PickerInput/RangePicker'; import { fillClearIcon } from '../Selector/hooks/useClearIcon'; import useDisabledBoundary from './useDisabledBoundary'; import { useFieldFormat } from './useFieldFormat'; diff --git a/src/NewPicker/PickerInput/hooks/useRangeActive.ts b/src/NewPicker/PickerInput/hooks/useRangeActive.ts index a8cd80fec..a191b0c7e 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeActive.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeActive.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { RangeValueType } from '../RangePicker'; +import type { RangeValueType } from '../../../PickerInput/RangePicker'; import useLockEffect from './useLockEffect'; export type OperationType = 'input' | 'panel'; diff --git a/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts b/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts index 0c5ec3751..4386abe32 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts @@ -1,7 +1,7 @@ import type { GenerateConfig } from '../../../generate'; import { isSame } from '../../../utils/dateUtil'; import type { DisabledDate, Locale } from '../../../interface'; -import type { RangeValueType } from '../RangePicker'; +import type { RangeValueType } from '../../../PickerInput/RangePicker'; /** * RangePicker need additional logic to handle the `disabled` case. e.g. diff --git a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts index 3611f85fa..263e84e2f 100644 --- a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts @@ -4,7 +4,7 @@ import * as React from 'react'; import type { GenerateConfig } from '../../../generate'; import { isSame } from '../../../utils/dateUtil'; import type { InternalMode, Locale, PanelMode } from '../../../interface'; -import type { RangePickerProps } from '../RangePicker'; +import type { RangePickerProps } from '../../../PickerInput/RangePicker'; export function offsetPanelDate( generateConfig: GenerateConfig, diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts index 0583dad9b..4d3071857 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/NewPicker/PickerInput/hooks/useRangeValue.ts @@ -5,8 +5,8 @@ import useSyncState from '../../../hooks/useSyncState'; import type { BaseInfo, FormatType, Locale, ReplaceListType } from '../../../interface'; import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; import { fillIndex } from '../../../utils/miscUtil'; -import type { RangePickerProps } from '../RangePicker'; -import type { ReplacedPickerProps } from '../SinglePicker'; +import type { RangePickerProps } from '../../../PickerInput/RangePicker'; +import type { ReplacedPickerProps } from '../../../PickerInput/SinglePicker'; import useLockEffect from './useLockEffect'; const EMPTY_VALUE: any[] = []; diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx similarity index 94% rename from src/NewPicker/PickerInput/RangePicker.tsx rename to src/PickerInput/RangePicker.tsx index 53e168aca..78773c2c8 100644 --- a/src/NewPicker/PickerInput/RangePicker.tsx +++ b/src/PickerInput/RangePicker.tsx @@ -1,4 +1,4 @@ -import { fillIndex } from '../../utils/miscUtil'; +import { fillIndex } from '../utils/miscUtil'; import { useEvent, useMergedState } from 'rc-util'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import omit from 'rc-util/lib/omit'; @@ -17,23 +17,23 @@ import type { SharedHTMLAttrs, SharedPickerProps, ValueDate, -} from '../../interface'; -import type { PickerPanelProps } from '../../PickerPanel'; -import PickerTrigger from '../../PickerTrigger'; +} from '../interface'; +import type { PickerPanelProps } from '../PickerPanel'; +import PickerTrigger from '../PickerTrigger'; import PickerContext from './context'; -import useCellRender from './hooks/useCellRender'; -import useFieldsInvalidate from './hooks/useFieldsInvalidate'; -import useFilledProps from './hooks/useFilledProps'; -import useOpen from './hooks/useOpen'; -import { usePickerRef } from './hooks/usePickerRef'; -import usePresets from './hooks/usePresets'; -import useRangeActive from './hooks/useRangeActive'; -import useRangeDisabledDate from './hooks/useRangeDisabledDate'; -import useRangePickerValue from './hooks/useRangePickerValue'; -import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; -import useShowNow from './hooks/useShowNow'; -import Popup from './Popup'; -import RangeSelector, { type SelectorIdType } from './Selector/RangeSelector'; +import useCellRender from '../NewPicker/PickerInput/hooks/useCellRender'; +import useFieldsInvalidate from '../NewPicker/PickerInput/hooks/useFieldsInvalidate'; +import useFilledProps from '../NewPicker/PickerInput/hooks/useFilledProps'; +import useOpen from '../NewPicker/PickerInput/hooks/useOpen'; +import { usePickerRef } from '../NewPicker/PickerInput/hooks/usePickerRef'; +import usePresets from '../NewPicker/PickerInput/hooks/usePresets'; +import useRangeActive from '../NewPicker/PickerInput/hooks/useRangeActive'; +import useRangeDisabledDate from '../NewPicker/PickerInput/hooks/useRangeDisabledDate'; +import useRangePickerValue from '../NewPicker/PickerInput/hooks/useRangePickerValue'; +import useRangeValue, { useInnerValue } from '../NewPicker/PickerInput/hooks/useRangeValue'; +import useShowNow from '../NewPicker/PickerInput/hooks/useShowNow'; +import Popup from '../NewPicker/PickerInput/Popup'; +import RangeSelector, { type SelectorIdType } from '../NewPicker/PickerInput/Selector/RangeSelector'; function separateConfig(config: T | [T, T] | null | undefined, defaultConfig: T): [T, T] { const singleConfig = config ?? defaultConfig; diff --git a/src/NewPicker/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx similarity index 94% rename from src/NewPicker/PickerInput/SinglePicker.tsx rename to src/PickerInput/SinglePicker.tsx index 4e9348037..d1f470080 100644 --- a/src/NewPicker/PickerInput/SinglePicker.tsx +++ b/src/PickerInput/SinglePicker.tsx @@ -3,7 +3,7 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import omit from 'rc-util/lib/omit'; import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; -import useToggleDates from '../../hooks/useToggleDates'; +import useToggleDates from '../hooks/useToggleDates'; import type { BaseInfo, InternalMode, @@ -14,21 +14,21 @@ import type { SharedPickerProps, SharedTimeProps, ValueDate, -} from '../../interface'; -import PickerTrigger from '../../PickerTrigger'; +} from '../interface'; +import PickerTrigger from '../PickerTrigger'; import PickerContext from './context'; -import useCellRender from './hooks/useCellRender'; -import useFieldsInvalidate from './hooks/useFieldsInvalidate'; -import useFilledProps from './hooks/useFilledProps'; -import useOpen from './hooks/useOpen'; -import { usePickerRef } from './hooks/usePickerRef'; -import usePresets from './hooks/usePresets'; -import useRangeActive from './hooks/useRangeActive'; -import useRangePickerValue from './hooks/useRangePickerValue'; -import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; -import useShowNow from './hooks/useShowNow'; -import Popup from './Popup'; -import SingleSelector from './Selector/SingleSelector'; +import useCellRender from '../NewPicker/PickerInput/hooks/useCellRender'; +import useFieldsInvalidate from '../NewPicker/PickerInput/hooks/useFieldsInvalidate'; +import useFilledProps from '../NewPicker/PickerInput/hooks/useFilledProps'; +import useOpen from '../NewPicker/PickerInput/hooks/useOpen'; +import { usePickerRef } from '../NewPicker/PickerInput/hooks/usePickerRef'; +import usePresets from '../NewPicker/PickerInput/hooks/usePresets'; +import useRangeActive from '../NewPicker/PickerInput/hooks/useRangeActive'; +import useRangePickerValue from '../NewPicker/PickerInput/hooks/useRangePickerValue'; +import useRangeValue, { useInnerValue } from '../NewPicker/PickerInput/hooks/useRangeValue'; +import useShowNow from '../NewPicker/PickerInput/hooks/useShowNow'; +import Popup from '../NewPicker/PickerInput/Popup'; +import SingleSelector from '../NewPicker/PickerInput/Selector/SingleSelector'; // TODO: isInvalidateDate with showTime.disabledTime should not provide `range` prop diff --git a/src/NewPicker/PickerInput/context.tsx b/src/PickerInput/context.tsx similarity index 76% rename from src/NewPicker/PickerInput/context.tsx rename to src/PickerInput/context.tsx index 52152c515..fcbc581b5 100644 --- a/src/NewPicker/PickerInput/context.tsx +++ b/src/PickerInput/context.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import type { GenerateConfig } from '../../generate'; -import type { Components, Locale } from '../../interface'; +import type { GenerateConfig } from '../generate'; +import type { Components, Locale } from '../interface'; export interface PickerContextProps { prefixCls: string; diff --git a/src/PickerPanel/index.tsx b/src/PickerPanel/index.tsx index 7e158a5e8..80573cb58 100644 --- a/src/PickerPanel/index.tsx +++ b/src/PickerPanel/index.tsx @@ -15,7 +15,7 @@ import type { SharedPanelProps, SharedTimeProps, } from '../interface'; -import PickerContext from '../NewPicker/PickerInput/context'; +import PickerContext from '../PickerInput/context'; import useCellRender from '../NewPicker/PickerInput/hooks/useCellRender'; import { isSame } from '../utils/dateUtil'; import { toArray } from '../utils/miscUtil'; diff --git a/src/PickerTrigger/index.tsx b/src/PickerTrigger/index.tsx index 159630c2a..dcabae6ea 100644 --- a/src/PickerTrigger/index.tsx +++ b/src/PickerTrigger/index.tsx @@ -2,7 +2,7 @@ import Trigger from '@rc-component/trigger'; import type { AlignType } from '@rc-component/trigger/lib/interface'; import classNames from 'classnames'; import * as React from 'react'; -import PickerContext from '../NewPicker/PickerInput/context'; +import PickerContext from '../PickerInput/context'; const BUILT_IN_PLACEMENTS = { bottomLeft: { diff --git a/src/index.tsx b/src/index.tsx index 842ac494b..f6827aaf9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -28,8 +28,8 @@ */ import type { PickerRef } from './interface'; -import RangePicker, { type RangePickerProps } from './NewPicker/PickerInput/RangePicker'; -import Picker, { type PickerProps } from './NewPicker/PickerInput/SinglePicker'; +import RangePicker, { type RangePickerProps } from './PickerInput/RangePicker'; +import Picker, { type PickerProps } from './PickerInput/SinglePicker'; import PickerPanel, { type PickerPanelProps } from './PickerPanel'; export { Picker, RangePicker, PickerPanel }; From acf802ab55f64db1bffbe57d027d33e96c1b2887 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 19 Dec 2023 10:46:05 +0800 Subject: [PATCH 362/380] refactor: move picker hooks --- .../PickerInput/Popup/PopupPanel.tsx | 2 +- src/NewPicker/PickerInput/Selector/Input.tsx | 2 +- src/PickerInput/RangePicker.tsx | 22 +++++++++---------- src/PickerInput/SinglePicker.tsx | 20 ++++++++--------- .../PickerInput/hooks/useCellRender.ts | 2 +- .../PickerInput/hooks/useDelayState.ts | 0 .../PickerInput/hooks/useDisabledBoundary.ts | 6 ++--- .../PickerInput/hooks/useFieldFormat.ts | 4 ++-- .../PickerInput/hooks/useFieldsInvalidate.ts | 2 +- .../PickerInput/hooks/useFilledProps.ts | 12 +++++----- .../PickerInput/hooks/useInputReadOnly.ts | 2 +- .../PickerInput/hooks/useInvalidate.ts | 4 ++-- .../PickerInput/hooks/useLockEffect.ts | 0 .../PickerInput/hooks/useOpen.ts | 2 +- .../PickerInput/hooks/usePickerRef.ts | 2 +- .../PickerInput/hooks/usePresets.ts | 2 +- .../PickerInput/hooks/useRangeActive.ts | 2 +- .../PickerInput/hooks/useRangeDisabledDate.ts | 8 +++---- .../PickerInput/hooks/useRangePickerValue.ts | 8 +++---- .../PickerInput/hooks/useRangeValue.ts | 14 ++++++------ .../PickerInput/hooks/useShowNow.ts | 2 +- src/PickerPanel/index.tsx | 2 +- 22 files changed, 60 insertions(+), 60 deletions(-) rename src/{NewPicker => }/PickerInput/hooks/useCellRender.ts (98%) rename src/{NewPicker => }/PickerInput/hooks/useDelayState.ts (100%) rename src/{NewPicker => }/PickerInput/hooks/useDisabledBoundary.ts (90%) rename src/{NewPicker => }/PickerInput/hooks/useFieldFormat.ts (94%) rename src/{NewPicker => }/PickerInput/hooks/useFieldsInvalidate.ts (96%) rename src/{NewPicker => }/PickerInput/hooks/useFilledProps.ts (93%) rename src/{NewPicker => }/PickerInput/hooks/useInputReadOnly.ts (82%) rename src/{NewPicker => }/PickerInput/hooks/useInvalidate.ts (96%) rename src/{NewPicker => }/PickerInput/hooks/useLockEffect.ts (100%) rename src/{NewPicker => }/PickerInput/hooks/useOpen.ts (94%) rename src/{NewPicker => }/PickerInput/hooks/usePickerRef.ts (85%) rename src/{NewPicker => }/PickerInput/hooks/usePresets.ts (91%) rename src/{NewPicker => }/PickerInput/hooks/useRangeActive.ts (97%) rename src/{NewPicker => }/PickerInput/hooks/useRangeDisabledDate.ts (87%) rename src/{NewPicker => }/PickerInput/hooks/useRangePickerValue.ts (96%) rename src/{NewPicker => }/PickerInput/hooks/useRangeValue.ts (95%) rename src/{NewPicker => }/PickerInput/hooks/useShowNow.ts (87%) diff --git a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx index 7b1bbde51..85a05add7 100644 --- a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx +++ b/src/NewPicker/PickerInput/Popup/PopupPanel.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PickerPanel, { type PickerPanelProps } from '../../../PickerPanel'; import { PickerHackContext, type PickerHackContextProps } from '../../../PickerPanel/context'; import PickerContext from '../../../PickerInput/context'; -import { offsetPanelDate } from '../hooks/useRangePickerValue'; +import { offsetPanelDate } from '../../../PickerInput/hooks/useRangePickerValue'; import { type FooterProps } from './Footer'; export type MustProp = Required< diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx index 90c34b15a..22a82419e 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/NewPicker/PickerInput/Selector/Input.tsx @@ -5,7 +5,7 @@ import raf from 'rc-util/lib/raf'; import * as React from 'react'; import { leftPad } from '../../../utils/miscUtil'; import PickerContext from '../../../PickerInput/context'; -import useLockEffect from '../hooks/useLockEffect'; +import useLockEffect from '../../../PickerInput/hooks/useLockEffect'; import Icon from './Icon'; import MaskFormat from './MaskFormat'; import { getMaskRange } from './util'; diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx index 78773c2c8..0bf1037a1 100644 --- a/src/PickerInput/RangePicker.tsx +++ b/src/PickerInput/RangePicker.tsx @@ -21,17 +21,17 @@ import type { import type { PickerPanelProps } from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; import PickerContext from './context'; -import useCellRender from '../NewPicker/PickerInput/hooks/useCellRender'; -import useFieldsInvalidate from '../NewPicker/PickerInput/hooks/useFieldsInvalidate'; -import useFilledProps from '../NewPicker/PickerInput/hooks/useFilledProps'; -import useOpen from '../NewPicker/PickerInput/hooks/useOpen'; -import { usePickerRef } from '../NewPicker/PickerInput/hooks/usePickerRef'; -import usePresets from '../NewPicker/PickerInput/hooks/usePresets'; -import useRangeActive from '../NewPicker/PickerInput/hooks/useRangeActive'; -import useRangeDisabledDate from '../NewPicker/PickerInput/hooks/useRangeDisabledDate'; -import useRangePickerValue from '../NewPicker/PickerInput/hooks/useRangePickerValue'; -import useRangeValue, { useInnerValue } from '../NewPicker/PickerInput/hooks/useRangeValue'; -import useShowNow from '../NewPicker/PickerInput/hooks/useShowNow'; +import useCellRender from './hooks/useCellRender'; +import useFieldsInvalidate from './hooks/useFieldsInvalidate'; +import useFilledProps from './hooks/useFilledProps'; +import useOpen from './hooks/useOpen'; +import { usePickerRef } from './hooks/usePickerRef'; +import usePresets from './hooks/usePresets'; +import useRangeActive from './hooks/useRangeActive'; +import useRangeDisabledDate from './hooks/useRangeDisabledDate'; +import useRangePickerValue from './hooks/useRangePickerValue'; +import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; +import useShowNow from './hooks/useShowNow'; import Popup from '../NewPicker/PickerInput/Popup'; import RangeSelector, { type SelectorIdType } from '../NewPicker/PickerInput/Selector/RangeSelector'; diff --git a/src/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx index d1f470080..c8ca87da9 100644 --- a/src/PickerInput/SinglePicker.tsx +++ b/src/PickerInput/SinglePicker.tsx @@ -17,16 +17,16 @@ import type { } from '../interface'; import PickerTrigger from '../PickerTrigger'; import PickerContext from './context'; -import useCellRender from '../NewPicker/PickerInput/hooks/useCellRender'; -import useFieldsInvalidate from '../NewPicker/PickerInput/hooks/useFieldsInvalidate'; -import useFilledProps from '../NewPicker/PickerInput/hooks/useFilledProps'; -import useOpen from '../NewPicker/PickerInput/hooks/useOpen'; -import { usePickerRef } from '../NewPicker/PickerInput/hooks/usePickerRef'; -import usePresets from '../NewPicker/PickerInput/hooks/usePresets'; -import useRangeActive from '../NewPicker/PickerInput/hooks/useRangeActive'; -import useRangePickerValue from '../NewPicker/PickerInput/hooks/useRangePickerValue'; -import useRangeValue, { useInnerValue } from '../NewPicker/PickerInput/hooks/useRangeValue'; -import useShowNow from '../NewPicker/PickerInput/hooks/useShowNow'; +import useCellRender from './hooks/useCellRender'; +import useFieldsInvalidate from './hooks/useFieldsInvalidate'; +import useFilledProps from './hooks/useFilledProps'; +import useOpen from './hooks/useOpen'; +import { usePickerRef } from './hooks/usePickerRef'; +import usePresets from './hooks/usePresets'; +import useRangeActive from './hooks/useRangeActive'; +import useRangePickerValue from './hooks/useRangePickerValue'; +import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; +import useShowNow from './hooks/useShowNow'; import Popup from '../NewPicker/PickerInput/Popup'; import SingleSelector from '../NewPicker/PickerInput/Selector/SingleSelector'; diff --git a/src/NewPicker/PickerInput/hooks/useCellRender.ts b/src/PickerInput/hooks/useCellRender.ts similarity index 98% rename from src/NewPicker/PickerInput/hooks/useCellRender.ts rename to src/PickerInput/hooks/useCellRender.ts index 0c85734a8..ce8a22fd0 100644 --- a/src/NewPicker/PickerInput/hooks/useCellRender.ts +++ b/src/PickerInput/hooks/useCellRender.ts @@ -1,6 +1,6 @@ import { warning } from 'rc-util'; import * as React from 'react'; -import type { CellRender, CellRenderInfo, SharedPickerProps } from '../../../interface'; +import type { CellRender, CellRenderInfo, SharedPickerProps } from '../../interface'; export default function useCellRender( cellRender: SharedPickerProps['cellRender'], diff --git a/src/NewPicker/PickerInput/hooks/useDelayState.ts b/src/PickerInput/hooks/useDelayState.ts similarity index 100% rename from src/NewPicker/PickerInput/hooks/useDelayState.ts rename to src/PickerInput/hooks/useDelayState.ts diff --git a/src/NewPicker/PickerInput/hooks/useDisabledBoundary.ts b/src/PickerInput/hooks/useDisabledBoundary.ts similarity index 90% rename from src/NewPicker/PickerInput/hooks/useDisabledBoundary.ts rename to src/PickerInput/hooks/useDisabledBoundary.ts index f546ac36c..cee0a789f 100644 --- a/src/NewPicker/PickerInput/hooks/useDisabledBoundary.ts +++ b/src/PickerInput/hooks/useDisabledBoundary.ts @@ -1,7 +1,7 @@ import { useEvent } from 'rc-util'; -import type { GenerateConfig } from '../../../generate'; -import { isSame } from '../../../utils/dateUtil'; -import type { DisabledDate, InternalMode, Locale } from '../../../interface'; +import type { GenerateConfig } from '../../generate'; +import { isSame } from '../../utils/dateUtil'; +import type { DisabledDate, InternalMode, Locale } from '../../interface'; export type IsInvalidBoundary = ( currentDate: DateType, diff --git a/src/NewPicker/PickerInput/hooks/useFieldFormat.ts b/src/PickerInput/hooks/useFieldFormat.ts similarity index 94% rename from src/NewPicker/PickerInput/hooks/useFieldFormat.ts rename to src/PickerInput/hooks/useFieldFormat.ts index 37b5413ef..6927a6c2f 100644 --- a/src/NewPicker/PickerInput/hooks/useFieldFormat.ts +++ b/src/PickerInput/hooks/useFieldFormat.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import type { FormatType, InternalMode, Locale, SharedPickerProps } from '../../../interface'; -import { toArray } from '../../../utils/miscUtil'; +import type { FormatType, InternalMode, Locale, SharedPickerProps } from '../../interface'; +import { toArray } from '../../utils/miscUtil'; function getRowFormat(picker: InternalMode, locale: Locale, format?: SharedPickerProps['format']) { if (format) { diff --git a/src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts b/src/PickerInput/hooks/useFieldsInvalidate.ts similarity index 96% rename from src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts rename to src/PickerInput/hooks/useFieldsInvalidate.ts index 1e898f71d..5a525c156 100644 --- a/src/NewPicker/PickerInput/hooks/useFieldsInvalidate.ts +++ b/src/PickerInput/hooks/useFieldsInvalidate.ts @@ -1,4 +1,4 @@ -import { fillIndex } from '../../../utils/miscUtil'; +import { fillIndex } from '../../utils/miscUtil'; import * as React from 'react'; import type useInvalidate from './useInvalidate'; diff --git a/src/NewPicker/PickerInput/hooks/useFilledProps.ts b/src/PickerInput/hooks/useFilledProps.ts similarity index 93% rename from src/NewPicker/PickerInput/hooks/useFilledProps.ts rename to src/PickerInput/hooks/useFilledProps.ts index fb4f4d1d5..8aceac9a1 100644 --- a/src/NewPicker/PickerInput/hooks/useFilledProps.ts +++ b/src/PickerInput/hooks/useFilledProps.ts @@ -1,11 +1,11 @@ import { warning } from 'rc-util'; import * as React from 'react'; -import { toArray } from '../../../utils/miscUtil'; -import { fillLocale } from '../../../hooks/useLocale'; -import { getTimeConfig } from '../../../hooks/useTimeConfig'; -import type { FormatType, InternalMode } from '../../../interface'; -import type { RangePickerProps } from '../../../PickerInput/RangePicker'; -import { fillClearIcon } from '../Selector/hooks/useClearIcon'; +import { toArray } from '../../utils/miscUtil'; +import { fillLocale } from '../../hooks/useLocale'; +import { getTimeConfig } from '../../hooks/useTimeConfig'; +import type { FormatType, InternalMode } from '../../interface'; +import type { RangePickerProps } from '../RangePicker'; +import { fillClearIcon } from '../../NewPicker/PickerInput/Selector/hooks/useClearIcon'; import useDisabledBoundary from './useDisabledBoundary'; import { useFieldFormat } from './useFieldFormat'; import useInputReadOnly from './useInputReadOnly'; diff --git a/src/NewPicker/PickerInput/hooks/useInputReadOnly.ts b/src/PickerInput/hooks/useInputReadOnly.ts similarity index 82% rename from src/NewPicker/PickerInput/hooks/useInputReadOnly.ts rename to src/PickerInput/hooks/useInputReadOnly.ts index 6c854daca..346ec4b6e 100644 --- a/src/NewPicker/PickerInput/hooks/useInputReadOnly.ts +++ b/src/PickerInput/hooks/useInputReadOnly.ts @@ -1,4 +1,4 @@ -import type { FormatType } from '../../../interface'; +import type { FormatType } from '../../interface'; export default function useInputReadOnly( formatList: FormatType[], diff --git a/src/NewPicker/PickerInput/hooks/useInvalidate.ts b/src/PickerInput/hooks/useInvalidate.ts similarity index 96% rename from src/NewPicker/PickerInput/hooks/useInvalidate.ts rename to src/PickerInput/hooks/useInvalidate.ts index 374f7d266..17832aee7 100644 --- a/src/NewPicker/PickerInput/hooks/useInvalidate.ts +++ b/src/PickerInput/hooks/useInvalidate.ts @@ -1,11 +1,11 @@ import { useEvent } from 'rc-util'; -import type { GenerateConfig } from '../../../generate'; +import type { GenerateConfig } from '../../generate'; import type { PanelMode, RangeTimeProps, SharedPickerProps, SharedTimeProps, -} from '../../../interface'; +} from '../../interface'; /** * Check if provided date is valid for the `disabledDate` & `showTime.disabledTime`. diff --git a/src/NewPicker/PickerInput/hooks/useLockEffect.ts b/src/PickerInput/hooks/useLockEffect.ts similarity index 100% rename from src/NewPicker/PickerInput/hooks/useLockEffect.ts rename to src/PickerInput/hooks/useLockEffect.ts diff --git a/src/NewPicker/PickerInput/hooks/useOpen.ts b/src/PickerInput/hooks/useOpen.ts similarity index 94% rename from src/NewPicker/PickerInput/hooks/useOpen.ts rename to src/PickerInput/hooks/useOpen.ts index ef22df18c..8c10334eb 100644 --- a/src/NewPicker/PickerInput/hooks/useOpen.ts +++ b/src/PickerInput/hooks/useOpen.ts @@ -1,4 +1,4 @@ -import type { OpenConfig } from '../../../interface'; +import type { OpenConfig } from '../../interface'; import useDelayState from './useDelayState'; /** diff --git a/src/NewPicker/PickerInput/hooks/usePickerRef.ts b/src/PickerInput/hooks/usePickerRef.ts similarity index 85% rename from src/NewPicker/PickerInput/hooks/usePickerRef.ts rename to src/PickerInput/hooks/usePickerRef.ts index 2ed82df2a..eafc1789c 100644 --- a/src/NewPicker/PickerInput/hooks/usePickerRef.ts +++ b/src/PickerInput/hooks/usePickerRef.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { PickerRef, SelectorRef } from '../../../interface'; +import type { PickerRef, SelectorRef } from '../../interface'; export function usePickerRef(ref: React.Ref) { const selectorRef = React.useRef(); diff --git a/src/NewPicker/PickerInput/hooks/usePresets.ts b/src/PickerInput/hooks/usePresets.ts similarity index 91% rename from src/NewPicker/PickerInput/hooks/usePresets.ts rename to src/PickerInput/hooks/usePresets.ts index d39854438..3b95577d0 100644 --- a/src/NewPicker/PickerInput/hooks/usePresets.ts +++ b/src/PickerInput/hooks/usePresets.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import warning from 'rc-util/lib/warning'; -import type { ValueDate } from '../../../interface'; +import type { ValueDate } from '../../interface'; export default function usePresets( presets?: ValueDate[], diff --git a/src/NewPicker/PickerInput/hooks/useRangeActive.ts b/src/PickerInput/hooks/useRangeActive.ts similarity index 97% rename from src/NewPicker/PickerInput/hooks/useRangeActive.ts rename to src/PickerInput/hooks/useRangeActive.ts index a191b0c7e..a8cd80fec 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeActive.ts +++ b/src/PickerInput/hooks/useRangeActive.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { RangeValueType } from '../../../PickerInput/RangePicker'; +import type { RangeValueType } from '../RangePicker'; import useLockEffect from './useLockEffect'; export type OperationType = 'input' | 'panel'; diff --git a/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts b/src/PickerInput/hooks/useRangeDisabledDate.ts similarity index 87% rename from src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts rename to src/PickerInput/hooks/useRangeDisabledDate.ts index 4386abe32..2d722cef1 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeDisabledDate.ts +++ b/src/PickerInput/hooks/useRangeDisabledDate.ts @@ -1,7 +1,7 @@ -import type { GenerateConfig } from '../../../generate'; -import { isSame } from '../../../utils/dateUtil'; -import type { DisabledDate, Locale } from '../../../interface'; -import type { RangeValueType } from '../../../PickerInput/RangePicker'; +import type { GenerateConfig } from '../../generate'; +import { isSame } from '../../utils/dateUtil'; +import type { DisabledDate, Locale } from '../../interface'; +import type { RangeValueType } from '../RangePicker'; /** * RangePicker need additional logic to handle the `disabled` case. e.g. diff --git a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts b/src/PickerInput/hooks/useRangePickerValue.ts similarity index 96% rename from src/NewPicker/PickerInput/hooks/useRangePickerValue.ts rename to src/PickerInput/hooks/useRangePickerValue.ts index 263e84e2f..62648c319 100644 --- a/src/NewPicker/PickerInput/hooks/useRangePickerValue.ts +++ b/src/PickerInput/hooks/useRangePickerValue.ts @@ -1,10 +1,10 @@ import { useMergedState } from 'rc-util'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import * as React from 'react'; -import type { GenerateConfig } from '../../../generate'; -import { isSame } from '../../../utils/dateUtil'; -import type { InternalMode, Locale, PanelMode } from '../../../interface'; -import type { RangePickerProps } from '../../../PickerInput/RangePicker'; +import type { GenerateConfig } from '../../generate'; +import { isSame } from '../../utils/dateUtil'; +import type { InternalMode, Locale, PanelMode } from '../../interface'; +import type { RangePickerProps } from '../RangePicker'; export function offsetPanelDate( generateConfig: GenerateConfig, diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/PickerInput/hooks/useRangeValue.ts similarity index 95% rename from src/NewPicker/PickerInput/hooks/useRangeValue.ts rename to src/PickerInput/hooks/useRangeValue.ts index 4d3071857..b023bf24d 100644 --- a/src/NewPicker/PickerInput/hooks/useRangeValue.ts +++ b/src/PickerInput/hooks/useRangeValue.ts @@ -1,12 +1,12 @@ import { useEvent, useMergedState } from 'rc-util'; import * as React from 'react'; -import type { GenerateConfig } from '../../../generate'; -import useSyncState from '../../../hooks/useSyncState'; -import type { BaseInfo, FormatType, Locale, ReplaceListType } from '../../../interface'; -import { formatValue, isSame, isSameTimestamp } from '../../../utils/dateUtil'; -import { fillIndex } from '../../../utils/miscUtil'; -import type { RangePickerProps } from '../../../PickerInput/RangePicker'; -import type { ReplacedPickerProps } from '../../../PickerInput/SinglePicker'; +import type { GenerateConfig } from '../../generate'; +import useSyncState from '../../hooks/useSyncState'; +import type { BaseInfo, FormatType, Locale, ReplaceListType } from '../../interface'; +import { formatValue, isSame, isSameTimestamp } from '../../utils/dateUtil'; +import { fillIndex } from '../../utils/miscUtil'; +import type { RangePickerProps } from '../RangePicker'; +import type { ReplacedPickerProps } from '../SinglePicker'; import useLockEffect from './useLockEffect'; const EMPTY_VALUE: any[] = []; diff --git a/src/NewPicker/PickerInput/hooks/useShowNow.ts b/src/PickerInput/hooks/useShowNow.ts similarity index 87% rename from src/NewPicker/PickerInput/hooks/useShowNow.ts rename to src/PickerInput/hooks/useShowNow.ts index 492b5482f..87204587a 100644 --- a/src/NewPicker/PickerInput/hooks/useShowNow.ts +++ b/src/PickerInput/hooks/useShowNow.ts @@ -1,4 +1,4 @@ -import type { InternalMode, PanelMode } from '../../../interface'; +import type { InternalMode, PanelMode } from '../../interface'; export default function useShowNow( picker: InternalMode, diff --git a/src/PickerPanel/index.tsx b/src/PickerPanel/index.tsx index 80573cb58..21a179a35 100644 --- a/src/PickerPanel/index.tsx +++ b/src/PickerPanel/index.tsx @@ -16,7 +16,7 @@ import type { SharedTimeProps, } from '../interface'; import PickerContext from '../PickerInput/context'; -import useCellRender from '../NewPicker/PickerInput/hooks/useCellRender'; +import useCellRender from '../PickerInput/hooks/useCellRender'; import { isSame } from '../utils/dateUtil'; import { toArray } from '../utils/miscUtil'; import DatePanel from './DatePanel'; From cba9a0b111f0842cc80002fe068b22ff5c12b9a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 19 Dec 2023 10:51:47 +0800 Subject: [PATCH 363/380] refactor: move picker popup --- src/{NewPicker => }/PickerInput/Popup/Footer.tsx | 8 ++++---- src/{NewPicker => }/PickerInput/Popup/PopupPanel.tsx | 8 ++++---- src/{NewPicker => }/PickerInput/Popup/PresetPanel.tsx | 2 +- src/{NewPicker => }/PickerInput/Popup/index.tsx | 6 +++--- src/PickerInput/RangePicker.tsx | 2 +- src/PickerInput/SinglePicker.tsx | 2 +- 6 files changed, 14 insertions(+), 14 deletions(-) rename src/{NewPicker => }/PickerInput/Popup/Footer.tsx (93%) rename src/{NewPicker => }/PickerInput/Popup/PopupPanel.tsx (93%) rename src/{NewPicker => }/PickerInput/Popup/PresetPanel.tsx (95%) rename src/{NewPicker => }/PickerInput/Popup/index.tsx (96%) diff --git a/src/NewPicker/PickerInput/Popup/Footer.tsx b/src/PickerInput/Popup/Footer.tsx similarity index 93% rename from src/NewPicker/PickerInput/Popup/Footer.tsx rename to src/PickerInput/Popup/Footer.tsx index 3e6efce77..ec03375a5 100644 --- a/src/NewPicker/PickerInput/Popup/Footer.tsx +++ b/src/PickerInput/Popup/Footer.tsx @@ -1,15 +1,15 @@ import classNames from 'classnames'; import * as React from 'react'; -import type { GenerateConfig } from '../../../generate'; -import useTimeInfo from '../../../hooks/useTimeInfo'; +import type { GenerateConfig } from '../../generate'; +import useTimeInfo from '../../hooks/useTimeInfo'; import type { DisabledDate, InternalMode, PanelMode, RangeTimeProps, SharedPickerProps, -} from '../../../interface'; -import PickerContext from '../../../PickerInput/context'; +} from '../../interface'; +import PickerContext from '../context'; export interface FooterProps { mode: PanelMode; diff --git a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx b/src/PickerInput/Popup/PopupPanel.tsx similarity index 93% rename from src/NewPicker/PickerInput/Popup/PopupPanel.tsx rename to src/PickerInput/Popup/PopupPanel.tsx index 85a05add7..0b1449147 100644 --- a/src/NewPicker/PickerInput/Popup/PopupPanel.tsx +++ b/src/PickerInput/Popup/PopupPanel.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import PickerPanel, { type PickerPanelProps } from '../../../PickerPanel'; -import { PickerHackContext, type PickerHackContextProps } from '../../../PickerPanel/context'; -import PickerContext from '../../../PickerInput/context'; -import { offsetPanelDate } from '../../../PickerInput/hooks/useRangePickerValue'; +import PickerPanel, { type PickerPanelProps } from '../../PickerPanel'; +import { PickerHackContext, type PickerHackContextProps } from '../../PickerPanel/context'; +import PickerContext from '../context'; +import { offsetPanelDate } from '../hooks/useRangePickerValue'; import { type FooterProps } from './Footer'; export type MustProp = Required< diff --git a/src/NewPicker/PickerInput/Popup/PresetPanel.tsx b/src/PickerInput/Popup/PresetPanel.tsx similarity index 95% rename from src/NewPicker/PickerInput/Popup/PresetPanel.tsx rename to src/PickerInput/Popup/PresetPanel.tsx index 42c0c549a..d145cdcc5 100644 --- a/src/NewPicker/PickerInput/Popup/PresetPanel.tsx +++ b/src/PickerInput/Popup/PresetPanel.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { ValueDate } from '../../../interface'; +import type { ValueDate } from '../../interface'; export interface PresetPanelProps { prefixCls: string; diff --git a/src/NewPicker/PickerInput/Popup/index.tsx b/src/PickerInput/Popup/index.tsx similarity index 96% rename from src/NewPicker/PickerInput/Popup/index.tsx rename to src/PickerInput/Popup/index.tsx index 6add66f99..057210a04 100644 --- a/src/NewPicker/PickerInput/Popup/index.tsx +++ b/src/PickerInput/Popup/index.tsx @@ -1,9 +1,9 @@ import classNames from 'classnames'; import ResizeObserver, { type ResizeObserverProps } from 'rc-resize-observer'; import * as React from 'react'; -import type { SharedPickerProps, ValueDate } from '../../../interface'; -import { toArray } from '../../../utils/miscUtil'; -import PickerContext from '../../../PickerInput/context'; +import type { SharedPickerProps, ValueDate } from '../../interface'; +import { toArray } from '../../utils/miscUtil'; +import PickerContext from '../context'; import Footer, { type FooterProps } from './Footer'; import PopupPanel, { type PopupPanelProps } from './PopupPanel'; import PresetPanel from './PresetPanel'; diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx index 0bf1037a1..85d344cf6 100644 --- a/src/PickerInput/RangePicker.tsx +++ b/src/PickerInput/RangePicker.tsx @@ -32,7 +32,7 @@ import useRangeDisabledDate from './hooks/useRangeDisabledDate'; import useRangePickerValue from './hooks/useRangePickerValue'; import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; import useShowNow from './hooks/useShowNow'; -import Popup from '../NewPicker/PickerInput/Popup'; +import Popup from './Popup'; import RangeSelector, { type SelectorIdType } from '../NewPicker/PickerInput/Selector/RangeSelector'; function separateConfig(config: T | [T, T] | null | undefined, defaultConfig: T): [T, T] { diff --git a/src/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx index c8ca87da9..354217d6d 100644 --- a/src/PickerInput/SinglePicker.tsx +++ b/src/PickerInput/SinglePicker.tsx @@ -27,7 +27,7 @@ import useRangeActive from './hooks/useRangeActive'; import useRangePickerValue from './hooks/useRangePickerValue'; import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; import useShowNow from './hooks/useShowNow'; -import Popup from '../NewPicker/PickerInput/Popup'; +import Popup from './Popup'; import SingleSelector from '../NewPicker/PickerInput/Selector/SingleSelector'; // TODO: isInvalidateDate with showTime.disabledTime should not provide `range` prop From 10662a96f4497654d8b9c564c04df37f2bb15c15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 19 Dec 2023 10:54:27 +0800 Subject: [PATCH 364/380] refactor: move picker seletor hooks --- .../PickerInput/Selector/SingleSelector/index.tsx | 8 ++++---- src/PickerInput/RangePicker.tsx | 2 +- src/{NewPicker => }/PickerInput/Selector/Icon.tsx | 2 +- src/{NewPicker => }/PickerInput/Selector/Input.tsx | 6 +++--- src/{NewPicker => }/PickerInput/Selector/MaskFormat.ts | 0 .../PickerInput/Selector/RangeSelector.tsx | 4 ++-- .../PickerInput/Selector/hooks/useClearIcon.tsx | 0 .../PickerInput/Selector/hooks/useInputProps.ts | 4 ++-- .../PickerInput/Selector/hooks/useRootProps.ts | 0 src/{NewPicker => }/PickerInput/Selector/util.ts | 0 src/PickerInput/hooks/useFilledProps.ts | 2 +- 11 files changed, 14 insertions(+), 14 deletions(-) rename src/{NewPicker => }/PickerInput/Selector/Icon.tsx (93%) rename src/{NewPicker => }/PickerInput/Selector/Input.tsx (98%) rename src/{NewPicker => }/PickerInput/Selector/MaskFormat.ts (100%) rename src/{NewPicker => }/PickerInput/Selector/RangeSelector.tsx (97%) rename src/{NewPicker => }/PickerInput/Selector/hooks/useClearIcon.tsx (100%) rename src/{NewPicker => }/PickerInput/Selector/hooks/useInputProps.ts (97%) rename src/{NewPicker => }/PickerInput/Selector/hooks/useRootProps.ts (100%) rename src/{NewPicker => }/PickerInput/Selector/util.ts (100%) diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx index 69de4341a..39c86e11d 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx +++ b/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx @@ -4,10 +4,10 @@ import { isSame } from '../../../../utils/dateUtil'; import type { InternalMode, SelectorProps, SelectorRef } from '../../../../interface'; import PickerContext from '../../../../PickerInput/context'; import type { PickerProps } from '../../../../PickerInput/SinglePicker'; -import useInputProps from '../hooks/useInputProps'; -import useRootProps from '../hooks/useRootProps'; -import Icon, { ClearIcon } from '../Icon'; -import Input, { type InputRef } from '../Input'; +import useInputProps from '../../../../PickerInput/Selector/hooks/useInputProps'; +import useRootProps from '../../../../PickerInput/Selector/hooks/useRootProps'; +import Icon, { ClearIcon } from '../../../../PickerInput/Selector/Icon'; +import Input, { type InputRef } from '../../../../PickerInput/Selector/Input'; import MultipleDates from './MultipleDates'; export interface SingleSelectorProps diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx index 85d344cf6..627e9f9af 100644 --- a/src/PickerInput/RangePicker.tsx +++ b/src/PickerInput/RangePicker.tsx @@ -33,7 +33,7 @@ import useRangePickerValue from './hooks/useRangePickerValue'; import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; import useShowNow from './hooks/useShowNow'; import Popup from './Popup'; -import RangeSelector, { type SelectorIdType } from '../NewPicker/PickerInput/Selector/RangeSelector'; +import RangeSelector, { type SelectorIdType } from './Selector/RangeSelector'; function separateConfig(config: T | [T, T] | null | undefined, defaultConfig: T): [T, T] { const singleConfig = config ?? defaultConfig; diff --git a/src/NewPicker/PickerInput/Selector/Icon.tsx b/src/PickerInput/Selector/Icon.tsx similarity index 93% rename from src/NewPicker/PickerInput/Selector/Icon.tsx rename to src/PickerInput/Selector/Icon.tsx index 53b255575..18d55f5da 100644 --- a/src/NewPicker/PickerInput/Selector/Icon.tsx +++ b/src/PickerInput/Selector/Icon.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import PickerContext from '../../../PickerInput/context'; +import PickerContext from '../context'; export interface IconProps extends React.HtmlHTMLAttributes { icon?: React.ReactNode; diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/PickerInput/Selector/Input.tsx similarity index 98% rename from src/NewPicker/PickerInput/Selector/Input.tsx rename to src/PickerInput/Selector/Input.tsx index 22a82419e..2e36e5e97 100644 --- a/src/NewPicker/PickerInput/Selector/Input.tsx +++ b/src/PickerInput/Selector/Input.tsx @@ -3,9 +3,9 @@ import { useEvent } from 'rc-util'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import raf from 'rc-util/lib/raf'; import * as React from 'react'; -import { leftPad } from '../../../utils/miscUtil'; -import PickerContext from '../../../PickerInput/context'; -import useLockEffect from '../../../PickerInput/hooks/useLockEffect'; +import { leftPad } from '../../utils/miscUtil'; +import PickerContext from '../context'; +import useLockEffect from '../hooks/useLockEffect'; import Icon from './Icon'; import MaskFormat from './MaskFormat'; import { getMaskRange } from './util'; diff --git a/src/NewPicker/PickerInput/Selector/MaskFormat.ts b/src/PickerInput/Selector/MaskFormat.ts similarity index 100% rename from src/NewPicker/PickerInput/Selector/MaskFormat.ts rename to src/PickerInput/Selector/MaskFormat.ts diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx similarity index 97% rename from src/NewPicker/PickerInput/Selector/RangeSelector.tsx rename to src/PickerInput/Selector/RangeSelector.tsx index e7264da80..b1edf9416 100644 --- a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx +++ b/src/PickerInput/Selector/RangeSelector.tsx @@ -2,8 +2,8 @@ import classNames from 'classnames'; import ResizeObserver from 'rc-resize-observer'; import { useEvent } from 'rc-util'; import * as React from 'react'; -import type { SelectorProps, SelectorRef } from '../../../interface'; -import PickerContext from '../../../PickerInput/context'; +import type { SelectorProps, SelectorRef } from '../../interface'; +import PickerContext from '../context'; import useInputProps from './hooks/useInputProps'; import useRootProps from './hooks/useRootProps'; import Icon, { ClearIcon } from './Icon'; diff --git a/src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx b/src/PickerInput/Selector/hooks/useClearIcon.tsx similarity index 100% rename from src/NewPicker/PickerInput/Selector/hooks/useClearIcon.tsx rename to src/PickerInput/Selector/hooks/useClearIcon.tsx diff --git a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts b/src/PickerInput/Selector/hooks/useInputProps.ts similarity index 97% rename from src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts rename to src/PickerInput/Selector/hooks/useInputProps.ts index 591ead838..5c821a1fc 100644 --- a/src/NewPicker/PickerInput/Selector/hooks/useInputProps.ts +++ b/src/PickerInput/Selector/hooks/useInputProps.ts @@ -1,7 +1,7 @@ import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; -import { formatValue } from '../../../../utils/dateUtil'; -import type { SelectorProps } from '../../../../interface'; +import { formatValue } from '../../../utils/dateUtil'; +import type { SelectorProps } from '../../../interface'; import type { InputProps } from '../Input'; export default function useInputProps( diff --git a/src/NewPicker/PickerInput/Selector/hooks/useRootProps.ts b/src/PickerInput/Selector/hooks/useRootProps.ts similarity index 100% rename from src/NewPicker/PickerInput/Selector/hooks/useRootProps.ts rename to src/PickerInput/Selector/hooks/useRootProps.ts diff --git a/src/NewPicker/PickerInput/Selector/util.ts b/src/PickerInput/Selector/util.ts similarity index 100% rename from src/NewPicker/PickerInput/Selector/util.ts rename to src/PickerInput/Selector/util.ts diff --git a/src/PickerInput/hooks/useFilledProps.ts b/src/PickerInput/hooks/useFilledProps.ts index 8aceac9a1..d5aa930eb 100644 --- a/src/PickerInput/hooks/useFilledProps.ts +++ b/src/PickerInput/hooks/useFilledProps.ts @@ -5,7 +5,7 @@ import { fillLocale } from '../../hooks/useLocale'; import { getTimeConfig } from '../../hooks/useTimeConfig'; import type { FormatType, InternalMode } from '../../interface'; import type { RangePickerProps } from '../RangePicker'; -import { fillClearIcon } from '../../NewPicker/PickerInput/Selector/hooks/useClearIcon'; +import { fillClearIcon } from '../Selector/hooks/useClearIcon'; import useDisabledBoundary from './useDisabledBoundary'; import { useFieldFormat } from './useFieldFormat'; import useInputReadOnly from './useInputReadOnly'; From 9e93836b16581abb2ec7155d37730ba097bd7ef8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 19 Dec 2023 11:53:40 +0800 Subject: [PATCH 365/380] refactor: placement pass support --- src/PickerInput/RangePicker.tsx | 17 +++---------- .../Selector/SingleSelector/MultipleDates.tsx | 2 +- .../Selector/SingleSelector/index.tsx | 16 ++++++------- src/PickerInput/SinglePicker.tsx | 17 +++---------- src/PickerTrigger/index.tsx | 24 +++++++++++-------- src/PickerTrigger/util.ts | 13 ++++++++++ src/interface.tsx | 6 ++++- src/utils/miscUtil.ts | 9 +++++++ tests/picker.spec.tsx | 21 +++++++++++++++- 9 files changed, 76 insertions(+), 49 deletions(-) rename src/{NewPicker => }/PickerInput/Selector/SingleSelector/MultipleDates.tsx (96%) rename src/{NewPicker => }/PickerInput/Selector/SingleSelector/index.tsx (89%) create mode 100644 src/PickerTrigger/util.ts diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx index 627e9f9af..e49f93ad8 100644 --- a/src/PickerInput/RangePicker.tsx +++ b/src/PickerInput/RangePicker.tsx @@ -1,4 +1,3 @@ -import { fillIndex } from '../utils/miscUtil'; import { useEvent, useMergedState } from 'rc-util'; import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import omit from 'rc-util/lib/omit'; @@ -20,6 +19,8 @@ import type { } from '../interface'; import type { PickerPanelProps } from '../PickerPanel'; import PickerTrigger from '../PickerTrigger'; +import { pickTriggerProps } from '../PickerTrigger/util'; +import { fillIndex } from '../utils/miscUtil'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; import useFieldsInvalidate from './hooks/useFieldsInvalidate'; @@ -162,8 +163,6 @@ function RangePicker( defaultOpen, open, onOpenChange, - popupAlign, - getPopupContainer, // Picker locale, @@ -186,11 +185,7 @@ function RangePicker( // Format inputReadOnly, - // Motion - transitionName, - suffixIcon, - direction, // Focus onFocus, @@ -214,8 +209,6 @@ function RangePicker( const selectorRef = usePickerRef(ref); // ========================= Open ========================= - const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, disabled, onOpenChange); const triggerOpen: OnOpenChange = (nextOpen, config?: OpenConfig) => { @@ -689,14 +682,10 @@ function RangePicker( return ( extends Pick { diff --git a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx b/src/PickerInput/Selector/SingleSelector/index.tsx similarity index 89% rename from src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx rename to src/PickerInput/Selector/SingleSelector/index.tsx index 39c86e11d..49d676d46 100644 --- a/src/NewPicker/PickerInput/Selector/SingleSelector/index.tsx +++ b/src/PickerInput/Selector/SingleSelector/index.tsx @@ -1,13 +1,13 @@ import classNames from 'classnames'; import * as React from 'react'; -import { isSame } from '../../../../utils/dateUtil'; -import type { InternalMode, SelectorProps, SelectorRef } from '../../../../interface'; -import PickerContext from '../../../../PickerInput/context'; -import type { PickerProps } from '../../../../PickerInput/SinglePicker'; -import useInputProps from '../../../../PickerInput/Selector/hooks/useInputProps'; -import useRootProps from '../../../../PickerInput/Selector/hooks/useRootProps'; -import Icon, { ClearIcon } from '../../../../PickerInput/Selector/Icon'; -import Input, { type InputRef } from '../../../../PickerInput/Selector/Input'; +import { isSame } from '../../../utils/dateUtil'; +import type { InternalMode, SelectorProps, SelectorRef } from '../../../interface'; +import PickerContext from '../../context'; +import type { PickerProps } from '../../SinglePicker'; +import useInputProps from '../hooks/useInputProps'; +import useRootProps from '../hooks/useRootProps'; +import Icon, { ClearIcon } from '../Icon'; +import Input, { type InputRef } from '../Input'; import MultipleDates from './MultipleDates'; export interface SingleSelectorProps diff --git a/src/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx index 354217d6d..e98464e35 100644 --- a/src/PickerInput/SinglePicker.tsx +++ b/src/PickerInput/SinglePicker.tsx @@ -16,6 +16,7 @@ import type { ValueDate, } from '../interface'; import PickerTrigger from '../PickerTrigger'; +import { pickTriggerProps } from '../PickerTrigger/util'; import PickerContext from './context'; import useCellRender from './hooks/useCellRender'; import useFieldsInvalidate from './hooks/useFieldsInvalidate'; @@ -28,7 +29,7 @@ import useRangePickerValue from './hooks/useRangePickerValue'; import useRangeValue, { useInnerValue } from './hooks/useRangeValue'; import useShowNow from './hooks/useShowNow'; import Popup from './Popup'; -import SingleSelector from '../NewPicker/PickerInput/Selector/SingleSelector'; +import SingleSelector from './Selector/SingleSelector'; // TODO: isInvalidateDate with showTime.disabledTime should not provide `range` prop @@ -133,8 +134,6 @@ function Picker( defaultOpen, open, onOpenChange, - popupAlign, - getPopupContainer, // Picker locale, @@ -158,11 +157,7 @@ function Picker( // Format inputReadOnly, - // Motion - transitionName, - suffixIcon, - direction, // Focus onFocus, @@ -197,8 +192,6 @@ function Picker( const toggleDates = useToggleDates(generateConfig, locale, internalPicker); // ========================= Open ========================= - const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - const [mergedOpen, triggerOpen] = useOpen(open, defaultOpen, [disabled], onOpenChange); // ======================= Calendar ======================= @@ -583,14 +576,10 @@ function Picker( return ( HTMLElement; popupAlign?: AlignType; range?: boolean; - popupPlacement?: Placement; + + // Placement + popupClassName?: string; + placement?: Placement; + builtinPlacements?: BuildInPlacements; direction?: 'ltr' | 'rtl'; // Visible @@ -67,7 +70,8 @@ function PickerTrigger({ getPopupContainer, children, range, - popupPlacement, + placement, + builtinPlacements = BUILT_IN_PLACEMENTS, direction, // Visible @@ -77,19 +81,19 @@ function PickerTrigger({ const { prefixCls } = React.useContext(PickerContext); const dropdownPrefixCls = `${prefixCls}-dropdown`; - const getPopupPlacement = () => { - if (popupPlacement !== undefined) { - return popupPlacement; + const mergedPlacement = React.useMemo(() => { + if (placement !== undefined) { + return placement; } return direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - }; + }, [placement, direction]); return ( = DateType | null | undefined; @@ -351,6 +351,10 @@ export interface SharedPickerProps extends Shared popupAlign?: AlignType; getPopupContainer?: (node: HTMLElement) => HTMLElement; + // Popup + placement?: string; + builtinPlacements?: BuildInPlacements; + /** * By default. Only `time` or `datetime` show the confirm button in panel. * `true` to make every picker need confirm. diff --git a/src/utils/miscUtil.ts b/src/utils/miscUtil.ts index b1f0ad4b0..aba4fed01 100644 --- a/src/utils/miscUtil.ts +++ b/src/utils/miscUtil.ts @@ -23,3 +23,12 @@ export function fillIndex(ori: T, index: number, value: T[numbe return clone; } + +export function pickProps(props: T, keys: (keyof T)[]) { + const clone = {} as T; + keys.forEach((key) => { + clone[key] = props[key]; + }); + + return clone; +} diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index ccf839d02..e1b363024 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -7,10 +7,10 @@ import KeyCode from 'rc-util/lib/KeyCode'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; import React from 'react'; +import type { PickerRef } from '../src'; import type { PanelMode, PickerMode } from '../src/interface'; import enUS from '../src/locale/en_US'; import zhCN from '../src/locale/zh_CN'; -import type { PickerRef } from '../src'; import { clearValue, closePicker, @@ -749,6 +749,9 @@ describe('Picker.Basic', () => { it('should render correctly in rtl', () => { const { container } = render(); expect(container).toMatchSnapshot(); + + openPicker(container); + expect(document.querySelector('.rc-picker-dropdown-rtl')).toBeTruthy(); }); it('week picker show correct year', () => { @@ -1174,4 +1177,20 @@ describe('Picker.Basic', () => { expect(container.querySelector('input')).toHaveValue('1990-09-03 07:05:21'); }); + + it('customize `popupPlacement`', () => { + render( + , + ); + + expect(document.querySelector('.rc-picker-dropdown-placement-notExist')).toBeTruthy(); + }); }); From 5eb891ba73d88faf545a7ef8c617fb1d29cdab4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 20 Dec 2023 10:36:23 +0800 Subject: [PATCH 366/380] test: coverage --- docs/examples/debug.tsx | 2 +- .../Selector/hooks/useRootProps.ts | 17 ++----- src/PickerInput/hooks/useDelayState.ts | 31 ------------- src/PickerInput/hooks/useInvalidate.ts | 6 +-- src/hooks/useTimeConfig.ts | 20 ++------- src/hooks/useTimeInfo.ts | 4 +- src/interface.tsx | 2 +- src/utils/miscUtil.ts | 2 +- tests/picker.spec.tsx | 44 +++++++++++++++++++ 9 files changed, 60 insertions(+), 68 deletions(-) diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 227ddf043..00db93ad6 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -336,7 +336,7 @@ export default () => { disabledMinutes: (hour) => (hour === 6 ? [0, 1, 2, 4, 5, 6] : []), disabledSeconds: (_, minute) => (minute === 3 ? [6, 7, 8, 9] : []), disabledTime: () => ({ - disabledMilliSeconds: () => [0, 100], + disabledMilliseconds: () => [0, 100], }), showTitle: true, millisecondStep: 20, diff --git a/src/PickerInput/Selector/hooks/useRootProps.ts b/src/PickerInput/Selector/hooks/useRootProps.ts index c90e752f5..03fda2ab6 100644 --- a/src/PickerInput/Selector/hooks/useRootProps.ts +++ b/src/PickerInput/Selector/hooks/useRootProps.ts @@ -1,17 +1,8 @@ import * as React from 'react'; +import { pickProps } from '../../../utils/miscUtil'; -export default function useRootProps(props: React.HTMLAttributes) { - const propNames = ['onMouseEnter', 'onMouseLeave']; - - return React.useMemo(() => { - const rootProps: React.HTMLAttributes = {}; +const propNames = ['onMouseEnter', 'onMouseLeave'] as const; - propNames.forEach((propName) => { - if (props[propName]) { - rootProps[propName] = props[propName]; - } - }); - - return rootProps; - }, [props]); +export default function useRootProps(props: React.HTMLAttributes) { + return React.useMemo(() => pickProps(props, propNames), [props]); } diff --git a/src/PickerInput/hooks/useDelayState.ts b/src/PickerInput/hooks/useDelayState.ts index fd324bc10..1af230fae 100644 --- a/src/PickerInput/hooks/useDelayState.ts +++ b/src/PickerInput/hooks/useDelayState.ts @@ -55,34 +55,3 @@ export default function useDelayState( return [state, updateValue]; } - -const EFFECT_DELAY_TIMES = 1; - -export function useDelayEffect(condition: boolean, callback: VoidFunction) { - const [times, setTimes] = React.useState(false); - const prevConditionRef = React.useRef(condition); - - const triggerCallback = useEvent(() => { - if (prevConditionRef.current !== condition) { - prevConditionRef.current = condition; - callback(); - } - }); - - React.useEffect(() => { - if (condition) { - triggerCallback(); - setTimes(false); - } else { - setTimes(0); - } - }, [condition]); - - React.useEffect(() => { - if (times === EFFECT_DELAY_TIMES) { - triggerCallback(); - } else if (times !== false && times < EFFECT_DELAY_TIMES) { - setTimes(times + 1); - } - }, [times]); -} diff --git a/src/PickerInput/hooks/useInvalidate.ts b/src/PickerInput/hooks/useInvalidate.ts index 17832aee7..4f6913ab9 100644 --- a/src/PickerInput/hooks/useInvalidate.ts +++ b/src/PickerInput/hooks/useInvalidate.ts @@ -35,7 +35,7 @@ export default function useInvalidate( } if ((picker === 'date' || picker === 'time') && showTime) { - const { disabledHours, disabledMinutes, disabledSeconds, disabledMilliSeconds } = + const { disabledHours, disabledMinutes, disabledSeconds, disabledMilliseconds } = showTime.disabledTime?.(date, info && info.activeIndex === 1 ? 'end' : 'start') || {}; const { @@ -66,8 +66,8 @@ export default function useInvalidate( } if ( - disabledMilliSeconds && - disabledMilliSeconds(hour, minute, second).includes(millisecond) + disabledMilliseconds && + disabledMilliseconds(hour, minute, second).includes(millisecond) ) { return true; } diff --git a/src/hooks/useTimeConfig.ts b/src/hooks/useTimeConfig.ts index a34cd1218..e6ec47c87 100644 --- a/src/hooks/useTimeConfig.ts +++ b/src/hooks/useTimeConfig.ts @@ -1,4 +1,5 @@ import type { PickerMode, SharedTimeProps } from '../interface'; +import { pickProps } from '../utils/miscUtil'; const showTimeKeys = [ 'format', @@ -17,29 +18,16 @@ const showTimeKeys = [ 'disabledHours', 'disabledMinutes', 'disabledSeconds', + 'disabledMilliseconds', 'disabledTime', 'changeOnScroll', ] as const; -// Used for typescript check the props not missing. -// This will be removed by terser or uglify. -if (process.env.NODE_ENV === 'not-exist-env') { - type KeyRecord = Record<(typeof showTimeKeys)[number], boolean>; - - // eslint-disable-next-line - const checker: Record, boolean> = {} as KeyRecord; -} - /** * Get SharedTimeProps from props. */ -function pickTimeProps(props: object): SharedTimeProps { - const timeProps: any = {}; - showTimeKeys.forEach((key) => { - if (key in props) { - timeProps[key] = props[key]; - } - }); +function pickTimeProps(props: any): SharedTimeProps { + const timeProps: any = pickProps(props, showTimeKeys); if (timeProps.format) { let format = timeProps.format; diff --git a/src/hooks/useTimeInfo.ts b/src/hooks/useTimeInfo.ts index 4dcb4dbed..2af60fe19 100644 --- a/src/hooks/useTimeInfo.ts +++ b/src/hooks/useTimeInfo.ts @@ -118,7 +118,7 @@ export default function useTimeInfo( disabledConfig.disabledHours || disabledHours || emptyDisabled, disabledConfig.disabledMinutes || disabledMinutes || emptyDisabled, disabledConfig.disabledSeconds || disabledSeconds || emptyDisabled, - disabledConfig.disabledMilliSeconds || emptyDisabled, + disabledConfig.disabledMilliseconds || emptyDisabled, ] as const; }, [disabledTime, disabledHours, disabledMinutes, disabledSeconds], @@ -137,7 +137,7 @@ export default function useTimeInfo( getDisabledHours: DisabledTimes['disabledHours'], getDisabledMinutes: DisabledTimes['disabledMinutes'], getDisabledSeconds: DisabledTimes['disabledSeconds'], - getDisabledMilliseconds: DisabledTimes['disabledMilliSeconds'], + getDisabledMilliseconds: DisabledTimes['disabledMilliseconds'], ) => { const hours = generateUnits(0, 23, hourStep, hideDisabledOptions, getDisabledHours()); diff --git a/src/interface.tsx b/src/interface.tsx index c1a6dc3e7..65d7da965 100644 --- a/src/interface.tsx +++ b/src/interface.tsx @@ -130,7 +130,7 @@ export interface DisabledTimes { disabledHours?: () => number[]; disabledMinutes?: (hour: number) => number[]; disabledSeconds?: (hour: number, minute: number) => number[]; - disabledMilliSeconds?: (hour: number, minute: number, second: number) => number[]; + disabledMilliseconds?: (hour: number, minute: number, second: number) => number[]; } export interface SharedTimeProps { diff --git a/src/utils/miscUtil.ts b/src/utils/miscUtil.ts index aba4fed01..4d95093e5 100644 --- a/src/utils/miscUtil.ts +++ b/src/utils/miscUtil.ts @@ -24,7 +24,7 @@ export function fillIndex(ori: T, index: number, value: T[numbe return clone; } -export function pickProps(props: T, keys: (keyof T)[]) { +export function pickProps(props: T, keys: (keyof T)[] | readonly (keyof T)[]) { const clone = {} as T; keys.forEach((key) => { clone[key] = props[key]; diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index e1b363024..dba1c5712 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -1193,4 +1193,48 @@ describe('Picker.Basic', () => { expect(document.querySelector('.rc-picker-dropdown-placement-notExist')).toBeTruthy(); }); + + describe('disabledTime should block submit', () => { + const propsNames: string[] = [ + 'disabledHours', + 'disabledMinutes', + 'disabledSeconds', + 'disabledMilliseconds', + ]; + + propsNames.forEach((proPname) => { + it(proPname, () => { + const onChange = jest.fn(); + + const { container } = render( + ({ [proPname]: () => [0] }), + }} + format="YYYY-MM-DD HH:mm:ss.SSS" + />, + ); + const inputEle = container.querySelector('input'); + + // Invalid time + fireEvent.change(inputEle, { + target: { value: '2020-09-17 00:00:00.000' }, + }); + fireEvent.keyDown(inputEle, { + keyCode: KeyCode.ENTER, + }); + expect(onChange).not.toHaveBeenCalled(); + + // Valid time + fireEvent.change(inputEle, { + target: { value: '2020-09-17 01:01:01.001' }, + }); + fireEvent.keyDown(inputEle, { + keyCode: KeyCode.ENTER, + }); + expect(onChange).toHaveBeenCalled(); + }); + }); + }); }); From c2b3fe9d7dcb418a324c7a11c10aa97760b56459 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 20 Dec 2023 11:30:09 +0800 Subject: [PATCH 367/380] test: coverage --- docs/examples/basic.tsx | 12 ++-- docs/examples/debug.tsx | 5 +- .../TimePanel/TimePanelBody/index.tsx | 2 +- tests/panel.spec.tsx | 69 +++++++++++++++++++ 4 files changed, 79 insertions(+), 9 deletions(-) diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx index 6076e2c23..c641b2775 100644 --- a/docs/examples/basic.tsx +++ b/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(defaultValue); - const weekRef = React.useRef>(null); + const weekRef = React.useRef(null); const onSelect = (newValue: Moment) => { console.log('Select:', newValue); @@ -36,7 +36,7 @@ export default () => { { label: 'Now', value: () => moment(), - } + }, ], }; diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx index 00db93ad6..b3d661a47 100644 --- a/docs/examples/debug.tsx +++ b/docs/examples/debug.tsx @@ -153,8 +153,9 @@ export default () => { // showTime={{ // disabledHours: () => [0, 1, 2, 3, 4, 5], // }} - multiple - maxTagCount="responsive" + // multiple + picker="time" + // maxTagCount="responsive" defaultValue={ [ dayjs('2000-01-01'), diff --git a/src/PickerPanel/TimePanel/TimePanelBody/index.tsx b/src/PickerPanel/TimePanel/TimePanelBody/index.tsx index ddd3a2fca..4af5c4fb8 100644 --- a/src/PickerPanel/TimePanel/TimePanelBody/index.tsx +++ b/src/PickerPanel/TimePanel/TimePanelBody/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { formatValue } from '../../../utils/dateUtil'; import useTimeInfo from '../../../hooks/useTimeInfo'; import type { SharedPanelProps, SharedTimeProps } from '../../../interface'; +import { formatValue } from '../../../utils/dateUtil'; import { PickerHackContext, usePanelContext } from '../../context'; import TimeColumn, { type Unit } from './TimeColumn'; diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx index 81d8f9b1a..273523641 100644 --- a/tests/panel.spec.tsx +++ b/tests/panel.spec.tsx @@ -619,4 +619,73 @@ describe('Picker.Panel', () => { expect(container.querySelector('td[title="1991-09-03"]')).toBeTruthy(); expect(container.querySelector('.rc-picker-week-panel-row-selected')).toBeFalsy(); }); + + describe('TimePanel', () => { + it('not crash', () => { + const onChange = jest.fn(); + + const { container } = render( + ({ + disabledHours: () => [0], + disabledMinutes: () => [0, 1], + disabledSeconds: () => [0, 1, 2], + })} + />, + ); + + fireEvent.click(container.querySelector('.rc-picker-time-panel-column').querySelector('li')); + expect(isSame(onChange.mock.calls[0][0], '1990-09-03 01:02:03')).toBeTruthy(); + }); + + it('support milliseconds', () => { + const onChange = jest.fn(); + const { container } = render( + ({ + disabledMilliseconds: () => [0], + })} + />, + ); + + fireEvent.click( + container.querySelectorAll('.rc-picker-time-panel-column')[3].querySelector('li'), + ); + expect(onChange.mock.calls[0][0].format('SSS')).toEqual('100'); + }); + + it('meridiem', () => { + const onChange = jest.fn(); + const { container } = render( + , + ); + + // PM + fireEvent.click( + container.querySelectorAll('.rc-picker-time-panel-column')[3].querySelectorAll('li')[1], + ); + expect(onChange.mock.calls[0][0].format('HH:mm:ss')).toEqual('15:03:03'); + onChange.mockClear(); + + // AM + fireEvent.click( + container.querySelectorAll('.rc-picker-time-panel-column')[3].querySelectorAll('li')[0], + ); + expect(onChange.mock.calls[0][0].format('HH:mm:ss')).toEqual('03:03:03'); + }); + }); }); From f32d410f7166f245300562b858eda89976dad6e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 20 Dec 2023 11:44:43 +0800 Subject: [PATCH 368/380] docs: fix demo --- src/PickerInput/Selector/hooks/useInputProps.ts | 17 ++++++++++++++--- src/interface.tsx | 11 +++++++++++ 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/PickerInput/Selector/hooks/useInputProps.ts b/src/PickerInput/Selector/hooks/useInputProps.ts index 5c821a1fc..2bd2bc9e1 100644 --- a/src/PickerInput/Selector/hooks/useInputProps.ts +++ b/src/PickerInput/Selector/hooks/useInputProps.ts @@ -1,7 +1,8 @@ +import { warning } from 'rc-util'; import pickAttrs from 'rc-util/lib/pickAttrs'; import * as React from 'react'; -import { formatValue } from '../../../utils/dateUtil'; import type { SelectorProps } from '../../../interface'; +import { formatValue } from '../../../utils/dateUtil'; import type { InputProps } from '../Input'; export default function useInputProps( @@ -187,9 +188,19 @@ export default function useInputProps( }); }, onKeyDown: (event: React.KeyboardEvent) => { - onKeyDown?.(event); + let prevented = false; + + onKeyDown?.(event, () => { + if (process.env.NODE_ENV !== 'production') { + warning( + false, + '`preventDefault` callback is deprecated. Please call `event.preventDefault` directly.', + ); + } + prevented = true; + }); - if (!event.defaultPrevented) { + if (!event.defaultPrevented && !prevented) { switch (event.key) { case 'Escape': onOpenChange(false, { diff --git a/src/interface.tsx b/src/interface.tsx index 65d7da965..d587c8947 100644 --- a/src/interface.tsx +++ b/src/interface.tsx @@ -274,12 +274,19 @@ export type SharedHTMLAttrs = Omit< | 'disabled' | 'onFocus' | 'onBlur' + | 'onSelect' | 'min' | 'max' + | 'onKeyDown' >; export type PickerFocusEventHandler = (e: React.FocusEvent, info: BaseInfo) => void; +export type LegacyOnKeyDown = ( + event: React.KeyboardEvent, + preventDefault: VoidFunction, +) => void; + export interface SharedPickerProps extends SharedHTMLAttrs { // MISC direction?: 'ltr' | 'rtl'; @@ -330,6 +337,8 @@ export interface SharedPickerProps extends Shared // Active onFocus?: PickerFocusEventHandler; onBlur?: PickerFocusEventHandler; + /** `preventDefault` is deprecated which will remove from future version. */ + onKeyDown?: LegacyOnKeyDown; inputReadOnly?: boolean; @@ -434,6 +443,8 @@ export interface SelectorProps extends SharedHTMLAttrs { onBlur: (event: React.FocusEvent, index?: number) => void; /** Trigger by `enter` key */ onSubmit: VoidFunction; + /** `preventDefault` is deprecated which will remove from future version. */ + onKeyDown?: LegacyOnKeyDown; locale: Locale; generateConfig: GenerateConfig; From b7e49aa6c5816eaf49473fff994e8058a909e6cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Wed, 20 Dec 2023 14:50:43 +0800 Subject: [PATCH 369/380] refactor: fix demo --- docs/examples/calendar.tsx | 7 +++-- docs/examples/cellRender.tsx | 35 +++++++++++++++---------- docs/examples/customize.tsx | 28 +++++--------------- src/PickerInput/Popup/Footer.tsx | 4 +-- src/PickerInput/RangePicker.tsx | 27 +++++++++++-------- src/PickerInput/SinglePicker.tsx | 32 +++++++++++++++-------- src/PickerInput/hooks/useRangeValue.ts | 9 ++++++- src/PickerPanel/PanelHeader.tsx | 18 +++++-------- src/PickerPanel/context.ts | 18 +++++++++++++ src/PickerPanel/index.tsx | 36 +++++++++++++++++++------- src/PickerTrigger/index.tsx | 4 +-- src/index.tsx | 1 + src/interface.tsx | 17 +++++++++--- tests/picker.spec.tsx | 3 ++- tests/range.spec.tsx | 13 ++++------ 15 files changed, 150 insertions(+), 102 deletions(-) diff --git a/docs/examples/calendar.tsx b/docs/examples/calendar.tsx index a97774fd6..5d6376d8f 100644 --- a/docs/examples/calendar.tsx +++ b/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) { diff --git a/docs/examples/cellRender.tsx b/docs/examples/cellRender.tsx index 2b5c9c9b8..860d7cd29 100644 --- a/docs/examples/cellRender.tsx +++ b/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 () => { {...sharedProps} locale={zhCN} - cellRender={(current, info) => + cellRender={(current: Moment, info) => React.cloneElement( info.originNode, { @@ -79,7 +80,7 @@ export default () => { {...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 () => {

          Range

          -

          RangeValue: {rangeValue ? `${formatDate(rangeValue[0])} ~ ${formatDate(rangeValue[1])}` : 'null'}

          +

          + RangeValue:{' '} + {rangeValue ? `${formatDate(rangeValue[0])} ~ ${formatDate(rangeValue[1])}` : 'null'} +

          {...rangeSharedProps} locale={zhCN} allowClear showTime style={{ width: 580 }} - cellRender={(current, info) => { + cellRender={(current: Moment, info) => { return ( -
          - {info.type === "time" ? current : current.get('date')} +
          + {info.type === 'time' ? current : current.get('date')}
          ); }} diff --git a/docs/examples/customize.tsx b/docs/examples/customize.tsx index 405d08158..b6a702255 100644 --- a/docs/examples/customize.tsx +++ b/docs/examples/customize.tsx @@ -1,10 +1,9 @@ +import moment, { type Moment } from 'moment'; import * as React from 'react'; -import moment, { Moment } from 'moment'; -import Picker from '../../src'; -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 './slide.less'; interface DateRangeState { @@ -13,26 +12,13 @@ interface DateRangeState { endOpen: boolean; initValue: Moment; } -type PanelMode = - | 'time' - | 'datetime' - | 'date' - | 'week' - | 'month' - | 'year' - | 'decade'; +type PanelMode = 'time' | 'datetime' | 'date' | 'week' | 'month' | 'year' | 'decade'; const now = moment(); function disabledDate(current: Moment) { // Can not select days before today - return ( - current && - current < - moment() - .subtract(1, 'days') - .endOf('day') - ); + return current && current < moment().subtract(1, 'days').endOf('day'); } function changePanelCallBack(value: Moment, mode: PanelMode) { console.log(value, mode); @@ -165,9 +151,7 @@ class Customize extends React.Component<{}, DateRangeState> { onSelect={this.handleSelect} value={initValue} onPanelChange={changePanelCallBack} - renderExtraFooter={(mode: PanelMode) => ( -
          {mode} extra footer
          - )} + renderExtraFooter={(mode: PanelMode) =>
          {mode} extra footer
          } />
          diff --git a/src/PickerInput/Popup/Footer.tsx b/src/PickerInput/Popup/Footer.tsx index ec03375a5..1802535cc 100644 --- a/src/PickerInput/Popup/Footer.tsx +++ b/src/PickerInput/Popup/Footer.tsx @@ -29,7 +29,7 @@ export interface FooterProps { needConfirm: boolean; // OK - onOk?: VoidFunction; + onOk: VoidFunction; // Now onNow: (now: DateType) => void; @@ -94,7 +94,7 @@ export default function Footer(props: FooterProps) {