feat(pro:search): add custom icon renderer for treeSelect and cascader

add `customExpandIcon` for treeSelect field add `customDragableIcon` for treeSelect field add `customExpandIcon` for cascader field
IDuxFE · May 17, 2023 · 9e66882 · 9e66882
1 parent 05fdb30
commit 9e66882
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 8 deletions.
diff --git a/packages/pro/search/docs/Api.zh.md b/packages/pro/search/docs/Api.zh.md
@@ -130,6 +130,9 @@ TreeSelectSearchFieldConfig
 | `cascaderStrategy` | 级联策略 | `CascaderStrategy` | - | - | 详情参考[Tree](/components/tree/zh) |
 | `draggable` | 是否可拖拽 | `boolean` | - | - | 详情参考[Tree](/components/tree/zh) |
 | `draggableIcon` | 拖拽图标 | `string` | - | - | 详情参考[Tree](/components/tree/zh) |
+| `customDraggableIcon` | 拖拽图标自定义渲染 | `string \| () => VNodeChild` | - | - | 值为string时为对应名称的插槽 |
+| `expandIcon` | 展开收起图标 | `string \| [string, string]` | - | - | 详情参考[Tree](/components/tree/zh) |
+| `customExpandIcon` | 展开收起图标自定义渲染 | `string \| (options: { key: VKey, expanded: boolean, node: TreeSelectPanelData }) => VNodeChild` | - | - | 值为string时为对应名称的插槽 |
 | `showLine` | 是否展示连线 | `boolean` | - | - | 详情参考[Tree](/components/tree/zh) |
 | `searchable` | 是否支持筛选 | `boolean` | `false` | - | 默认不支持 |
 | `searchFn` | 搜索函数 | `(node: TreeSelectPanelData, searchValue?: string) => boolean` | - | - | 默认模糊匹配 |

diff --git a/packages/pro/search/src/panel/CascaderPanel.tsx b/packages/pro/search/src/panel/CascaderPanel.tsx
@@ -16,7 +16,7 @@ import { proSearchCascaderPanelProps } from '../types'
 
 export default defineComponent({
   props: proSearchCascaderPanelProps,
-  setup(props) {
+  setup(props, { slots }) {
     const { mergedPrefixCls, locale } = inject(proSearchContext)!
 
     watch(
@@ -101,7 +101,7 @@ export default defineComponent({
 
       return (
         <div class={prefixCls} tabindex={-1} onMousedown={evt => evt.preventDefault()}>
-          <IxCascaderPanel {...panelProps} />
+          <IxCascaderPanel {...panelProps} v-slots={slots} />
           {renderFooter()}
         </div>
       )

diff --git a/packages/pro/search/src/panel/TreeSelectPanel.tsx b/packages/pro/search/src/panel/TreeSelectPanel.tsx
@@ -18,7 +18,7 @@ import { type ProSearchTreeSelectPanelProps, type TreeSelectPanelData, proSearch
 
 export default defineComponent({
   props: proSearchTreeSelectPanelProps,
-  setup(props) {
+  setup(props, { slots }) {
     const { mergedPrefixCls, locale } = inject(proSearchContext)!
 
     const mergedCheckable = computed(() => props.multiple && props.checkable)
@@ -161,7 +161,7 @@ export default defineComponent({
 
       return (
         <div class={classes} tabindex={-1} onMousedown={evt => evt.preventDefault()}>
-          <IxTree class={`${prefixCls}-body`} {...treeProps} />
+          <IxTree class={`${prefixCls}-body`} {...treeProps} v-slots={slots} />
           {renderFooter()}
         </div>
       )

diff --git a/packages/pro/search/src/segments/CreateCascaderSegment.tsx b/packages/pro/search/src/segments/CreateCascaderSegment.tsx
@@ -9,7 +9,7 @@ import type { CascaderPanelData, CascaderSearchField, PanelRenderContext, Segmen
 
 import { ref } from 'vue'
 
-import { isNil, toString } from 'lodash-es'
+import { isNil, isString, toString } from 'lodash-es'
 
 import { type VKey, convertArray, traverseTree } from '@idux/cdk/utils'
 import { type TreeCheckStateResolver, useTreeCheckStateResolver } from '@idux/components/utils'
@@ -31,6 +31,7 @@ export function createCascaderSegment(
       dataSource,
       cascaderStrategy,
       expandIcon,
+      customExpandIcon,
       expandTrigger,
       fullPath,
       pathSeparator,
@@ -73,16 +74,20 @@ export function createCascaderSegment(
   )
 
   const panelRenderer = (context: PanelRenderContext<VKey | (VKey | VKey[])[] | undefined>) => {
-    const { ok, cancel, renderLocation } = context
+    const { ok, cancel, slots, renderLocation } = context
     const { panelValue, searchInput, handleChange } = getSelectableCommonParams<VKey | VKey[]>(
       context,
       !!multiple,
       renderLocation === 'individual' ? separator ?? defaultSeparator : undefined,
       !multiple || renderLocation === 'quick-select-panel',
     )
+    const cascaderPanelSlots = {
+      expandIcon: isString(customExpandIcon) ? slots[customExpandIcon] : customExpandIcon,
+    }
 
     return (
       <CascaderPanel
+        v-slots={cascaderPanelSlots}
         value={panelValue}
         searchValue={searchable && searchInput ? searchInput : undefined}
         dataSource={dataSource}

diff --git a/packages/pro/search/src/segments/CreateTreeSelectSegment.tsx b/packages/pro/search/src/segments/CreateTreeSelectSegment.tsx
@@ -7,7 +7,7 @@
 
 import type { PanelRenderContext, Segment, TreeSelectPanelData, TreeSelectSearchField } from '../types'
 
-import { isNil, toString } from 'lodash-es'
+import { isNil, isString, toString } from 'lodash-es'
 
 import { type VKey, convertArray, traverseTree } from '@idux/cdk/utils'
 
@@ -27,6 +27,9 @@ export function createTreeSelectSegment(
       cascaderStrategy,
       draggable,
       draggableIcon,
+      customDraggableIcon,
+      expandIcon,
+      customExpandIcon,
       separator,
       showLine,
       searchable,
@@ -58,16 +61,22 @@ export function createTreeSelectSegment(
   })
 
   const panelRenderer = (context: PanelRenderContext<VKey | VKey[] | undefined>) => {
-    const { ok, cancel, renderLocation } = context
+    const { ok, cancel, slots, renderLocation } = context
     const { panelValue, searchInput, handleChange } = getSelectableCommonParams(
       context,
       !!multiple,
       renderLocation === 'individual' ? separator ?? defaultSeparator : undefined,
       !multiple || renderLocation === 'quick-select-panel',
     )
 
+    const treeSelectPanelSlots = {
+      draggableIcon: isString(customDraggableIcon) ? slots[customDraggableIcon] : customDraggableIcon,
+      expandIcon: isString(customExpandIcon) ? slots[customExpandIcon] : customExpandIcon,
+    }
+
     return (
       <TreeSelectPanel
+        v-slots={treeSelectPanelSlots}
         value={panelValue}
         searchValue={searchable && searchInput ? searchInput : undefined}
         autoHeight={renderLocation === 'quick-select-panel'}
@@ -76,6 +85,7 @@ export function createTreeSelectSegment(
         draggableIcon={draggableIcon}
         checkable={checkable}
         cascaderStrategy={cascaderStrategy}
+        expandIcon={expandIcon}
         multiple={multiple}
         virtual={virtual}
         showLine={showLine}

diff --git a/packages/pro/search/src/types/searchFields.ts b/packages/pro/search/src/types/searchFields.ts
@@ -65,6 +65,9 @@ interface TreeSelectSearchFieldBase {
     cascaderStrategy: CascaderStrategy
     draggable?: boolean
     draggableIcon?: string
+    customDraggableIcon?: string | (() => VNodeChild)
+    expandIcon?: string | [string, string]
+    customExpandIcon?: string | ((options: { key: VKey; expanded: boolean; node: TreeSelectPanelData }) => VNodeChild)
     showLine?: boolean
     searchable?: boolean
     separator?: string
@@ -95,6 +98,7 @@ interface CascaderSearchFieldBase {
     multiple?: boolean
     disableData?: (data: CascaderPanelData) => boolean
     expandIcon?: string
+    customExpandIcon?: string | ((options: { key: VKey; expanded: boolean; data: CascaderPanelData }) => VNodeChild)
     expandTrigger?: CascaderExpandTrigger
     fullPath?: boolean
     pathSeparator?: string