chore: disabled logic

react-component · Nov 3, 2023 · 8449a8d · 8449a8d
1 parent febdfaa
commit 8449a8d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx
@@ -32,14 +32,19 @@ export default () => {
   const singleRef = React.useRef<PickerRef>(null);
 
   const [value, setValue] = React.useState<Moment>(null);
+  const [rangeValue, setRangeValue] = React.useState<[Moment?, Moment?]>([
+    moment('2000-01-01'),
+    null,
+  ]);
 
   return (
     <div>
       {/* <SinglePicker ref={singleRef} suffixIcon="🧶" /> */}
       <br />
       <RangePicker
         {...sharedLocale}
-        value={[moment('2000-01-01'), null]}
+        // value={[moment('2000-01-01'), null]}
+        value={rangeValue}
         disabled={[true, false]}
         suffixIcon="🧶"
         // onFocus={() => {
@@ -59,6 +64,7 @@ export default () => {
         // showTime={{}}
         onChange={(val, text) => {
           console.log('🔥 Change:', val, text);
+          setRangeValue(val);
         }}
         onCalendarChange={(val, text, info) => {
           console.log('🎉 Calendar Change:', val, text, info);

diff --git a/src/NewPicker/PickerInput/RangePicker.tsx b/src/NewPicker/PickerInput/RangePicker.tsx
@@ -261,7 +261,10 @@ export default function Picker<DateType = any>(props: RangePickerProps<DateType>
   // ======================== Click =========================
   const onSelectorClick: React.MouseEventHandler<HTMLDivElement> = () => {
     if (focusedIndex === null) {
-      selectorRef.current.focus(0);
+      const enabledIndex = mergedDisabled.findIndex((d) => !d);
+      if (enabledIndex >= 0) {
+        selectorRef.current.focus(enabledIndex);
+      }
     }
 
     setMergeOpen(true);

diff --git a/src/NewPicker/PickerInput/hooks/useRangeValue.ts b/src/NewPicker/PickerInput/hooks/useRangeValue.ts
@@ -59,9 +59,11 @@ export default function useRangeValue<DateType = any>(
   const mergedOrder = disabled.some((d) => d) ? false : order;
 
   // ============================ Values ============================
+  const [cachedDefaultValue] = React.useState(defaultValue);
+
   // Used for internal value management.
   // It should always use `mergedValue` in render logic
-  const [internalCalendarValue, setCalendarValue] = React.useState(defaultValue || value);
+  const [internalCalendarValue, setCalendarValue] = React.useState(cachedDefaultValue || value);
   const calendarValue = internalCalendarValue || [null, null];
 
   useLayoutUpdateEffect(() => {
@@ -133,8 +135,8 @@ export default function useRangeValue<DateType = any>(
       (!endEmpty || allowEmpty[1]);
 
     if (validateDateRange) {
-      // // Sync calendar value with current value
-      // setCalendarValue(value);
+      // Sync calendar value with current value
+      setCalendarValue(cachedDefaultValue || value);
 
       // Sync submit value to not to trigger `onChange` again
       setSubmitValue(clone);