chore: disabled

react-component · Nov 3, 2023 · 1d07921 · 1d07921
1 parent 72394ea
commit 1d07921
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 19 deletions.
diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx
@@ -39,6 +39,8 @@ export default () => {
       <br />
       <RangePicker
         {...sharedLocale}
+        value={[moment('2000-01-01'), null]}
+        disabled={[true, false]}
         suffixIcon="🧶"
         // onFocus={() => {
         //   console.log('🍷 Focus!');
@@ -51,8 +53,9 @@ export default () => {
           format: 'YYYY-MM-DD',
           // format: 'YYYY-MM-DD HH:mm:ss.SSS',
           //   // format: 'YYYYMMDD',
-          // align: true,
+          align: true,
         }}
+        // preserveInvalidOnBlur
         // showTime={{}}
         onChange={(val, text) => {
           console.log('🔥 Change:', val, text);
@@ -61,7 +64,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
@@ -163,7 +163,7 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
 
   // =================== Disabled & Empty ===================
   const mergedDisabled = separateConfig(disabled, false);
-  const mergedAllowEmpty = separateConfig(allowEmpty, true);
+  const mergedAllowEmpty = separateConfig(allowEmpty, false);
 
   // ======================== Value =========================
   const [mergedValue, triggerCalendarChange, triggerSubmitChange] = useRangeValue({
@@ -367,6 +367,8 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
           format={formatList}
           maskFormat={maskFormat}
           onChange={onSelectorChange}
+          // Disabled
+          disabled={mergedDisabled}
           // Open
           open={mergedOpen ? focusedIndex : null}
           onOpenChange={onSelectorOpenChange}

diff --git a/src/NewPicker/PickerInput/Selector/RangeSelector.tsx b/src/NewPicker/PickerInput/Selector/RangeSelector.tsx
@@ -9,6 +9,7 @@ export interface RangeSelectorProps<DateType = any> extends SelectorProps<DateTy
   separator?: React.ReactNode;
 
   value?: [DateType?, DateType?];
+  disabled: [boolean, boolean];
 }
 
 const RangeSelector = React.forwardRef<SelectorRef, RangeSelectorProps>((props, ref) => {
@@ -32,6 +33,9 @@ const RangeSelector = React.forwardRef<SelectorRef, RangeSelectorProps>((props,
     onSubmit,
     preserveInvalidOnBlur,
 
+    // Disabled
+    disabled,
+
     // Open
     open,
     onOpenChange,
@@ -92,6 +96,9 @@ const RangeSelector = React.forwardRef<SelectorRef, RangeSelectorProps>((props,
     value: valueTexts[index],
 
     active: activeIndex === index,
+
+    disabled: disabled[index],
+
     onFocus: (event) => {
       onFocus(event, index);
 

diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts
@@ -20,6 +20,7 @@ export default function useRangeValue<DateType = any>(
     | 'order'
     | 'onCalendarChange'
     | 'onChange'
+    | 'preserveInvalidOnBlur'
   > & {
     formatList: string[];
     focused: boolean;
@@ -40,6 +41,7 @@ export default function useRangeValue<DateType = any>(
     onCalendarChange,
     onChange,
     focused,
+    preserveInvalidOnBlur,
   } = info;
 
   // ============================ Values ============================
@@ -103,35 +105,47 @@ export default function useRangeValue<DateType = any>(
     // Sync `calendarValue`
     triggerCalendarChange(clone);
 
-    // Sync state
-    setSubmitValue(clone);
+    // Validate check
+    const startEmpty = !clone[0];
+    const endEmpty = !clone[1];
 
-    // Trigger `onChange` if needed
-    if (onChange) {
-      const [isSameSubmitDates] = isSameDates(submitValue, clone);
+    const validateDateRange =
+      // Validate start
+      (!startEmpty || allowEmpty[0]) &&
+      // Validate end
+      (!endEmpty || allowEmpty[1]);
 
-      const startEmpty = !clone[0];
-      const endEmpty = !clone[1];
+    if (validateDateRange) {
+      // Sync state
+      setSubmitValue(clone);
 
-      if (
-        !isSameSubmitDates &&
-        // Validate start
-        (!startEmpty || allowEmpty[0]) &&
-        // Validate end
-        (!endEmpty || allowEmpty[1])
-      ) {
-        onChange(clone, getDateTexts(clone));
+      // Trigger `onChange` if needed
+      if (onChange) {
+        const [isSameSubmitDates] = isSameDates(submitValue, clone);
+
+        if (!isSameSubmitDates && validateDateRange) {
+          onChange(clone, getDateTexts(clone));
+        }
       }
     }
+
+    return validateDateRange;
   });
 
+  // From the 2 active panel finished
   const triggerSubmitChange = (nextValue: RangeValueType<DateType>) => {
     triggerSubmit(nextValue);
   };
 
   useLockEffect(focused, () => {
     if (!focused) {
-      triggerSubmit();
+      const validatedSubmitValue = triggerSubmit();
+
+      // When blur & invalid, restore to empty one
+      // This is used for typed only one input
+      if (!validatedSubmitValue && !preserveInvalidOnBlur) {
+        setMergedValue([]);
+      }
     }
   });