fix(ui): fix onChange not work

DevCloudFE · Jan 1, 2022 · 16b1fdb · 16b1fdb
1 parent d9b5efb
commit 16b1fdb
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 24 deletions.
diff --git a/packages/ui/src/components/checkbox/Checkbox.tsx b/packages/ui/src/components/checkbox/Checkbox.tsx
@@ -51,9 +51,9 @@ const Checkbox: React.ForwardRefRenderFunction<DCheckboxRef, DCheckboxProps> = (
 
   const inGroup = checkboxGroupContext !== null;
 
-  const [checked, changeChecked, { validateClassName, ariaAttribute, controlDisabled }] = useTwoWayBinding(
+  const [checked, changeChecked, { validateClassName, ariaAttribute, controlDisabled }] = useTwoWayBinding<boolean | undefined, boolean>(
     false,
-    inGroup ? [checkboxGroupValue?.includes(dValue) ?? false] : dModel,
+    dModel ?? (dIndeterminate ? [undefined] : inGroup ? [checkboxGroupValue?.includes(dValue) ?? false] : undefined),
     onModelChange,
     dFormControlName ? { formControlName: dFormControlName, id: _id } : undefined
   );
@@ -66,14 +66,13 @@ const Checkbox: React.ForwardRefRenderFunction<DCheckboxRef, DCheckboxProps> = (
       onChange?.(e);
 
       if (!disabled) {
+        changeChecked(dIndeterminate ? true : !checked);
         if (inGroup) {
-          onCheckedChange?.(dValue, !checked);
-        } else {
-          changeChecked(!checked);
+          onCheckedChange?.(dValue, dIndeterminate ? true : !checked);
         }
       }
     },
-    [onChange, disabled, inGroup, onCheckedChange, dValue, checked, changeChecked]
+    [onChange, disabled, changeChecked, dIndeterminate, checked, inGroup, onCheckedChange, dValue]
   );
 
   return (

diff --git a/packages/ui/src/components/menu/Menu.tsx b/packages/ui/src/components/menu/Menu.tsx
@@ -66,7 +66,7 @@ export function DMenu(props: DMenuProps) {
   const [focusId, setFocusId] = useImmer<DMenuContextData['menuFocusId']>(null);
   const [activedescendant, setActiveDescendant] = useState<string | undefined>(undefined);
 
-  const [activeId, changeActiveId] = useTwoWayBinding<string | null>(null, dActive, onActiveChange);
+  const [activeId, changeActiveId] = useTwoWayBinding<string | null, string>(null, dActive, onActiveChange);
   const [expandIds, changeExpandIds] = useTwoWayBinding(new Set<string>(), dExpands, onExpandsChange);
 
   const expandTrigger = isUndefined(dExpandTrigger) ? (dMode === 'vertical' ? 'click' : 'hover') : dExpandTrigger;

diff --git a/packages/ui/src/components/radio/Radio.tsx b/packages/ui/src/components/radio/Radio.tsx
@@ -60,7 +60,7 @@ const Radio: React.ForwardRefRenderFunction<DRadioRef, DRadioProps> = (props, re
 
   const [checked, changeChecked, { validateClassName, ariaAttribute, controlDisabled }] = useTwoWayBinding(
     false,
-    inGroup ? [radioGroupValue === dValue] : dModel,
+    dModel ?? [radioGroupValue === dValue],
     onModelChange,
     dFormControlName ? { formControlName: dFormControlName, id: _id } : undefined
   );
@@ -73,10 +73,9 @@ const Radio: React.ForwardRefRenderFunction<DRadioRef, DRadioProps> = (props, re
       onChange?.(e);
 
       if (!disabled) {
+        changeChecked(true);
         if (inGroup) {
           onCheckedChange?.(dValue);
-        } else {
-          changeChecked(true);
         }
         if (radioEl && (radioGroupType === 'fill' || radioGroupType === 'outline')) {
           wave(radioEl, `var(--${dPrefix}color-primary)`);
@@ -104,6 +103,7 @@ const Radio: React.ForwardRefRenderFunction<DRadioRef, DRadioProps> = (props, re
           className={getClassName(`${dPrefix}radio__input`, validateClassName)}
           type="radio"
           name={radioGroupName}
+          checked={checked}
           disabled={disabled}
           aria-labelledby={`${dPrefix}radio-label-${uniqueId}`}
           aria-checked={checked}

diff --git a/packages/ui/src/hooks/two-way-binding.ts b/packages/ui/src/hooks/two-way-binding.ts
@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import type { Updater as IUpdater } from './immer';
 
 import { freeze, produce } from 'immer';
@@ -12,10 +11,10 @@ import { useStateBackflow } from './state-backflow';
 
 export type Updater<S> = (value: S) => void;
 
-export function useTwoWayBinding<T>(
+export function useTwoWayBinding<T, S = T>(
   initialValue: T | (() => T),
-  input?: [T, Updater<T>?],
-  onValueChange?: (value: any) => void,
+  input?: [T, Updater<S>?],
+  onValueChange?: (value: S) => void,
   opt?: {
     id: string;
     formControlName: string;
@@ -57,24 +56,23 @@ export function useTwoWayBinding<T>(
 
   const setValue = input?.[1];
   const [autoValue, setAutoValue] = useState<T>(initialValue);
-  const value = isUndefined(input?.[0]) ? autoValue : input![0];
+  const value = isUndefined(input) ? autoValue : input[0];
 
   const currentValue = formControl ? formControl.value : value;
 
   const changeValue = useCallback(
     (updater: any) => {
       const val = isFunction(updater) ? produce(currentValue, updater) : freeze(updater);
 
-      if (formControl) {
-        if (!Object.is(val, currentValue)) {
+      if (!Object.is(val, currentValue)) {
+        if (formControl) {
           formControl.markAsDirty(true);
           formControl.setValue(val);
-          formInstance!.updateForm();
-        }
-      } else {
-        setValue?.(val);
-        setAutoValue(val);
-        if (!Object.is(val, currentValue)) {
+          onValueChange?.(val);
+          formInstance?.updateForm();
+        } else {
+          setValue?.(val);
+          setAutoValue(val);
           onValueChange?.(val);
         }
       }
@@ -85,7 +83,7 @@ export function useTwoWayBinding<T>(
   const res = useMemo<
     [
       T,
-      IUpdater<T>,
+      IUpdater<S>,
       {
         validateClassName?: string;
         ariaAttribute?: React.HTMLAttributes<HTMLElement>;