refactor(tree-select): obtain updateSelectedData/hidePanel from baseS…

…electRef
opentiny · Jun 18, 2024 · 19a6503 · 19a6503
1 parent 464a602
commit 19a6503
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 18 deletions.
diff --git a/packages/renderless/src/tree-select/index.ts b/packages/renderless/src/tree-select/index.ts
@@ -5,10 +5,10 @@ export const filter =
   }
 
 export const nodeClick =
-  ({ props }) =>
-  (data, { updateSelectedData, hidePanel }) => {
+  ({ props, vm }) =>
+  (data) => {
     if (!props.multiple) {
-      updateSelectedData({
+      vm.$refs.baseSelectRef.updateSelectedData({
         ...data,
         currentLabel: data[props.textField],
         value: data[props.valueField],
@@ -17,15 +17,15 @@ export const nodeClick =
         }
       })
 
-      hidePanel()
+      vm.$refs.baseSelectRef.hidePanel()
     }
   }
 
 export const check =
   ({ props }) =>
-  (checkedNodes, { updateSelectedData }) => {
+  (data, { checkedNodes }) => {
     if (props.multiple) {
-      updateSelectedData(
+      vm.$refs.baseSelectRef.updateSelectedData(
         checkedNodes.map((node) => {
           return {
             ...node,

diff --git a/packages/renderless/src/tree-select/vue.ts b/packages/renderless/src/tree-select/vue.ts
@@ -13,7 +13,7 @@ export const renderless = (props, { reactive }, { vm }) => {
   Object.assign(api, {
     state,
     filter: filter({ vm }),
-    nodeClick: nodeClick({ props }),
+    nodeClick: nodeClick({ props, vm }),
     check: check({ props })
   })
 

diff --git a/packages/vue/src/tree-select/src/pc.vue b/packages/vue/src/tree-select/src/pc.vue
@@ -1,13 +1,14 @@
 <template>
   <tiny-base-select
+    ref="baseSelectRef"
     class="tiny-tree-select"
     v-model="state.value"
     :multiple="multiple"
     :filterable="filterable"
     :clearable="clearable"
     :filter-method="filter"
   >
-    <template #panel="{ methods: { updateSelectedData, hidePanel } }">
+    <template #panel>
       <tiny-tree
         ref="treeRef"
         :data="state.treeData"
@@ -18,16 +19,8 @@
         :node-key="valueField"
         :show-checkbox="multiple"
         :filter-node-method="filterMethod"
-        @node-click="
-          (data) => {
-            nodeClick(data, { updateSelectedData, hidePanel })
-          }
-        "
-        @check="
-          (data, { checkedNodes }) => {
-            check(checkedNodes, { updateSelectedData })
-          }
-        "
+        @node-click="nodeClick"
+        @check="check"
       ></tiny-tree>
     </template>
   </tiny-base-select>