refactor(base-select): remove tree/grid code from base-select (#2522)

Author: kagol

examples/sites/demos/pc/app/base-select/size.spec.ts

@@ -54,5 +54,5 @@ test('mini 尺寸', async ({ page }) => {
 
   await expect(input).toHaveClass(/tiny-input-mini/)
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--mini tiny-tag--light/)
-  expect(height).toBeCloseTo(27, 1)
+  expect(height).toBeCloseTo(28, 1)
 })

packages/renderless/src/base-select/index.ts

@@ -61,51 +61,6 @@ export const showTip =
     }
   }
 
-export const gridOnQueryChange =
-  ({ props, vm, constants, state }) =>
-  (value) => {
-    const { multiple, valueField, filterMethod, filterable, remote, remoteMethod } = props
-
-    if (filterable && typeof filterMethod === 'function') {
-      const table = vm.$refs.selectGrid.$refs.tinyTable
-      const fullData = table.afterFullData
-
-      vm.$refs.selectGrid.scrollTo(null, 0)
-
-      table.afterFullData = filterMethod(value, fullData) || []
-
-      vm.$refs.selectGrid
-        .handleTableData(!value)
-        .then(() => state.selectEmitter.emit(constants.EVENT_NAME.updatePopper))
-
-      state.previousQuery = value
-    } else if (remote && typeof remoteMethod === 'function') {
-      state.previousQuery = value
-      remoteMethod(value, props.extraQueryParams).then((data) => {
-        // 多选时取远端数据与当前已选数据的并集
-        if (multiple) {
-          const selectedIds = state.selected.map((sel) => sel[valueField])
-          vm.$refs.selectGrid.clearSelection()
-          vm.$refs.selectGrid.setSelection(
-            data.filter((row) => ~selectedIds.indexOf(row[valueField])),
-            true
-          )
-          state.remoteData = data.filter((row) => !~selectedIds.indexOf(row[valueField])).concat(state.selected)
-        } else {
-          vm.$refs.selectGrid.clearRadioRow()
-          vm.$refs.selectGrid.setRadioRow(find(data, (item) => props.modelValue === item[props.valueField]))
-          state.remoteData = data
-        }
-
-        vm.$refs.selectGrid.$refs.tinyTable.lastScrollTop = 0
-        vm.$refs.selectGrid.loadData(data)
-        vm.$refs.selectGrid
-          .handleTableData(!value)
-          .then(() => state.selectEmitter.emit(constants.EVENT_NAME.updatePopper))
-      })
-    }
-  }
-
 export const defaultOnQueryChange =
   ({ props, state, constants, api, nextTick }) =>
   (value, isInput) => {
@@ -365,7 +320,6 @@ export const setSelected =
         state.selected = result
       }
 
-      vm.$refs.selectTree && vm.$refs.selectTree.setCheckedNodes && vm.$refs.selectTree.setCheckedNodes(state.selected)
       state.tips = state.selected.map((item) => (item.state ? item.state.currentLabel : item.currentLabel)).join(',')
 
       setFilteredSelectCls(nextTick, state, props)
@@ -1246,10 +1200,6 @@ export const toVisible =
       if (vm.$refs.input && vm.$refs.input.value === '' && state.selected.length === 0) {
         state.currentPlaceholder = state.cachedPlaceHolder
       }
-
-      if (vm.$refs.selectGrid) {
-        vm.$refs.selectGrid.clearScroll()
-      }
     })
 
     postOperOfToVisible({ props, state, constants })
@@ -1283,31 +1233,6 @@ export const toHide =
         }
       }
     }
-
-    if (vm.$refs.selectGrid) {
-      let { fullData } = vm.$refs.selectGrid.getTableData()
-      if (multiple) {
-        const selectedIds = state.selected.map((sel) => sel[valueField])
-        vm.$refs.selectGrid.clearSelection()
-        vm.$refs.selectGrid.setSelection(
-          fullData.filter((row) => ~selectedIds.indexOf(row[valueField])),
-          true
-        )
-      } else {
-        vm.$refs.selectGrid.clearRadioRow()
-        vm.$refs.selectGrid.setRadioRow(find(fullData, (item) => props.modelValue === item[valueField]))
-      }
-
-      if (filterable && typeof props.filterMethod === 'function') {
-        vm.$refs.selectGrid.handleTableData(true)
-      } else if (
-        filterable &&
-        remote &&
-        (typeof props.remoteMethod === 'function' || typeof props.initQuery === 'function')
-      ) {
-        vm.$refs.selectGrid.handleTableData()
-      }
-    }
   }
 
 export const watchVisible =
@@ -1425,23 +1350,6 @@ export const handleCopyClick =
     parent.$el.removeChild(input)
   }
 
-export const getcheckedData =
-  ({ props, state }) =>
-  () => {
-    const checkedKey = []
-
-    if (!Array.isArray(state.selected)) {
-      return props.modelValue ? [props.modelValue] : [state.selected[props.valueField]]
-    } else {
-      state.selected.length > 0 &&
-        state.selected.forEach((item) => {
-          checkedKey.push(item[props.valueField])
-        })
-
-      return checkedKey
-    }
-  }
-
 export const debouncRquest = ({ api, state, props }) =>
   debounce(props.delay, () => {
     if (props.filterable && state.query !== state.selectedLabel) {
@@ -1667,14 +1575,12 @@ export const initQuery =
         return new Promise((resolve) => {
           initData.then((selected) => {
             state.remoteData = selected
-            vm.$refs.selectGrid.loadData(selected)
             resolve(selected)
           })
         })
       }
       selected = initData
       state.remoteData = selected
-      vm.$refs.selectGrid.loadData(selected)
     }
 
     return Promise.resolve(selected)
@@ -1683,7 +1589,6 @@ export const initQuery =
 export const mounted =
   ({ api, parent, state, props, vm, designConfig }) =>
   () => {
-    state.defaultCheckedKeys = state.gridCheckedData
     const parentEl = parent.$el
     const inputEl = parentEl.querySelector('input[data-tag="tiny-input-inner"]')
 

packages/renderless/src/base-select/vue.ts

@@ -1,7 +1,6 @@
 import {
   debouncRquest,
   getChildValue,
-  getcheckedData,
   calcOverFlow,
   toggleCheckAll,
   handleCopyClick,
@@ -55,7 +54,6 @@ import {
   onMouseenterNative,
   onMouseleaveNative,
   onCopying,
-  gridOnQueryChange,
   defaultOnQueryChange,
   queryChange,
   toVisible,
@@ -259,8 +257,6 @@ const initStateAdd = ({ computed, props, api, parent }) => {
     initialInputHeight: 0,
     currentPlaceholder: props.placeholder,
     filteredOptionsCount: 0,
-    gridData: [],
-    treeData: [],
     remoteData: [],
     currentKey: props.modelValue,
     updateId: '',
@@ -271,12 +267,10 @@ const initStateAdd = ({ computed, props, api, parent }) => {
     formItemSize: computed(() => (parent.formItem || { state: {} }).state.formItemSize),
     selectDisabled: computed(() => api.computedSelectDisabled()),
     isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
-    gridCheckedData: computed(() => api.getcheckedData()),
     searchSingleCopy: computed(() => props.allowCopy && !props.multiple && props.filterable),
     childrenName: computed(() => 'children'),
     tooltipContent: {},
     isHidden: false,
-    defaultCheckedKeys: [],
     optionIndexArr: [],
     showCollapseTag: false,
     exceedMaxVisibleRow: false, // 是否超出默认最大显示行数
@@ -317,7 +311,6 @@ const initApi = ({
     showTip: showTip({ props, state, vm }),
     onOptionDestroy: onOptionDestroy(state),
     setSoftFocus: setSoftFocus({ vm, state }),
-    getcheckedData: getcheckedData({ props, state }),
     resetInputWidth: resetInputWidth({ vm, state }),
     resetHoverIndex: resetHoverIndex({ props, state }),
     resetDatas: resetDatas({ props, state }),
@@ -338,7 +331,6 @@ const initApi = ({
     onMouseenterNative: onMouseenterNative({ state }),
     onMouseleaveNative: onMouseleaveNative({ state }),
     onCopying: onCopying({ state, vm }),
-    gridOnQueryChange: gridOnQueryChange({ props, vm, constants, state }),
     watchHoverIndex: watchHoverIndex({ state }),
     computeOptimizeOpts: computeOptimizeOpts({ props, designConfig }),
     computeCollapseTags: computeCollapseTags(props),