chore: use one change

react-component · Nov 1, 2023 · 139748f · 139748f
1 parent c75eef3
commit 139748f
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 39 deletions.
diff --git 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
@@ -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
@@ -64,6 +64,7 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
     defaultValue,
     onChange,
     onCalendarChange,
+    changeOnBlur,
 
     order = true,
 
@@ -210,30 +211,30 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
       }
     }
 
-    // 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<DateType = any>(props: RangePickerProps<DateType>
   };
 
   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<DateType = any>(props: RangePickerProps<DateType>
 
   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<DateType = any>(props: RangePickerProps<DateType>
     let nextValue = mergedValue;
 
     if (date) {
-      nextValue = fillValue(date, activeIndex);
+      nextValue = fillMergedValue(date, activeIndex);
     }
 
     triggerChange(nextValue, 'submit');
@@ -311,6 +314,15 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
     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<DateType = any>(props: RangePickerProps<DateType>
   return (
     <PickerContext.Provider value={context}>
       <PickerTrigger
-        visible={mergedOpen}
         popupElement={panel}
         popupStyle={styles.popup}
         popupClassName={classNames.popup}
@@ -361,6 +372,9 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
         transitionName={transitionName}
         popupPlacement={popupPlacement}
         direction={direction}
+        // Visible
+        visible={mergedOpen}
+        onClose={onPopupClose}
       >
         <RangeSelector
           // Shared

diff --git a/src/NewPicker/PickerInput/Selector/Input.tsx b/src/NewPicker/PickerInput/Selector/Input.tsx
@@ -167,8 +167,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((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
@@ -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 (
     <Trigger
       showAction={[]}
-      hideAction={[]}
+      hideAction={['click']}
       popupPlacement={getPopupPlacement()}
       builtinPlacements={BUILT_IN_PLACEMENTS}
       prefixCls={dropdownPrefixCls}
@@ -95,6 +101,11 @@ function PickerTrigger({
       })}
       popupStyle={popupStyle}
       getPopupContainer={getPopupContainer}
+      onPopupVisibleChange={(nextVisible) => {
+        if (!nextVisible) {
+          onClose();
+        }
+      }}
     >
       {children}
     </Trigger>

diff --git a/src/NewPicker/interface.tsx b/src/NewPicker/interface.tsx
@@ -252,6 +252,12 @@ export interface SharedPickerProps<DateType = any> {
   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<DateType = any> {
   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 */