fix(checkbox): async options state (Tencent#2706)

KMethod · Aug 25, 2023 · bf92226 · bf92226
1 parent ed0a4e3
commit bf92226
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git a/src/checkbox/checkbox.tsx b/src/checkbox/checkbox.tsx
@@ -37,7 +37,7 @@ export default defineComponent({
     const checkboxGroupExist = ref(false);
 
     const {
-      checked, indeterminate, disabled, value, lazyLoad,
+      checked, indeterminate, disabled, value, lazyLoad, label, data,
     } = toRefs(props);
     const [innerChecked, setInnerChecked] = useVModel(
       checked,
@@ -154,6 +154,10 @@ export default defineComponent({
 
     subscribeParentData(props.checkAll ? 'CHECK_ALL' : value.value);
 
+    watch([data, label], () => {
+      subscribeParentData(props.checkAll ? 'CHECK_ALL' : value.value);
+    });
+
     onBeforeUnmount(() => {
       checkboxStore.unSubscribe(props.checkAll ? 'CHECK_ALL' : value.value);
     });

diff --git a/src/checkbox/group.tsx b/src/checkbox/group.tsx
@@ -40,7 +40,9 @@ export default defineComponent({
     checkboxStore.init();
 
     const { isArray } = Array;
-    const { value, disabled, name } = toRefs(props);
+    const {
+      value, disabled, name, options,
+    } = toRefs(props);
     const [innerValue, setInnerValue] = useVModel(value, props.defaultValue, props.onChange);
 
     const optionList = ref<Array<CheckboxOptionObj>>([]);
@@ -68,6 +70,16 @@ export default defineComponent({
       checkboxStore.updateCheckbox({ disabled, maxExceeded, checkboxName });
     });
 
+    watch([options], () => {
+      nextTick(() => {
+        checkboxStore.updateCheckbox({
+          disabled: disabled.value,
+          maxExceeded: maxExceeded.value,
+          checkboxName: name.value,
+        });
+      });
+    });
+
     onMounted(() => {
       checkboxStore.updateCheckbox({
         disabled: disabled.value,
@@ -163,20 +175,28 @@ export default defineComponent({
     );
 
     watch(
-      [innerValue, isCheckAll, indeterminate],
-      ([val, isCheckAll, indeterminate], [oldValue]) => {
+      [innerValue],
+      ([val], [oldValue]) => {
         nextTick(() => {
           checkboxStore.updateChecked({
             checked: val,
             oldChecked: oldValue,
-            isCheckAll,
-            indeterminate,
+            isCheckAll: isCheckAll.value,
+            indeterminate: indeterminate.value,
           });
         });
       },
       { immediate: true },
     );
 
+    watch([isCheckAll, indeterminate, options], ([isCheckAll, indeterminate]) => {
+      checkboxStore.updateChecked({
+        checked: innerValue.value,
+        isCheckAll,
+        indeterminate,
+      });
+    });
+
     const addStoreKeyToCheckbox = (nodes: VNode[]) => {
       if (!nodes) return;
       for (let i = 0, len = nodes.length; i < len; i++) {

diff --git a/src/checkbox/store.ts b/src/checkbox/store.ts
@@ -12,7 +12,7 @@ type ObserverMap = {
 
 export interface UpdateCheckedData {
   checked: CheckboxStoreData['checked'];
-  oldChecked: CheckboxStoreData['checked'];
+  oldChecked?: CheckboxStoreData['checked'];
   isCheckAll: boolean;
   indeterminate: boolean;
 }
@@ -45,7 +45,7 @@ class CheckboxStore {
   updateChecked({
     checked, isCheckAll, oldChecked, indeterminate,
   }: UpdateCheckedData) {
-    const changedChecked = getChangedChecked(checked, oldChecked);
+    const changedChecked = oldChecked ? getChangedChecked(checked, oldChecked) : checked;
     const checkedParams: ObserverListenerParams = {
       parentChecked: checked,
       parentIsCheckAll: isCheckAll,