feat(comp: tree): expandIcon add array type (#883)

IDuxFE · May 6, 2022 · 1342e66 · 1342e66
1 parent e61940a
commit 1342e66
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 8 deletions.
diff --git a/packages/components/tree-select/__tests__/treeSelect.spec.ts b/packages/components/tree-select/__tests__/treeSelect.spec.ts
@@ -642,7 +642,28 @@ describe('TreeSelect', () => {
 
     test('expandIcon work', async () => {
       const wrapper = TreeSelectMount({
-        props: { open: true, expandIcon: 'up' },
+        props: {
+          open: true,
+          expandIcon: 'up',
+          dataSource: [
+            {
+              label: 'Node 0',
+              key: '0',
+              children: [
+                {
+                  label: 'Node 0-0',
+                  key: '0-0',
+                  children: [
+                    {
+                      label: 'Node 0-0-0',
+                      key: '0-0-0',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
       })
 
       expect(wrapper.findComponent(Content).find('.ix-tree-node-expand').find('.ix-icon-up').exists()).toBe(true)
@@ -651,6 +672,16 @@ describe('TreeSelect', () => {
 
       expect(wrapper.findComponent(Content).find('.ix-tree-node-expand').find('.ix-icon-up').exists()).toBe(false)
       expect(wrapper.findComponent(Content).find('.ix-tree-node-expand').find('.ix-icon-down').exists()).toBe(true)
+
+      await wrapper.setProps({ expandIcon: ['minus-square', 'plus-square'], expandedKeys: ['0'] })
+
+      const allNodes = wrapper.findComponent(Content).findAll('.ix-tree-node')
+
+      expect(wrapper.findComponent(Content).find('.ix-tree-node-expand').find('.ix-icon-up').exists()).toBe(false)
+      expect(wrapper.findComponent(Content).find('.ix-tree-node-expand').find('.ix-icon-down').exists()).toBe(false)
+
+      expect(allNodes[0].find('.ix-icon-minus-square').exists()).toBe(true)
+      expect(allNodes[1].find('.ix-icon-plus-square').exists()).toBe(true)
     })
 
     test('expandIcon slot work', async () => {

diff --git a/packages/components/tree-select/docs/Index.zh.md b/packages/components/tree-select/docs/Index.zh.md
@@ -35,7 +35,7 @@ order: 0
 | `draggable` | 是否允许拖拽节点 | `boolean` | `false` | - | - |
 | `droppable` | 是否允许放置节点,参见[TreeDroppable](/components/tree/zh#TreeDroppable) | `TreeDroppable` | - | - | - |
 | `empty` | 空数据时的内容 | `string \|` [EmptyProps](/components/empty/zh#EmptyProps) | - | - | - |
-| `expandIcon` | 树组件中的展开图标 | `string` | `right` | ✅ | - |
+| `expandIcon` | 树组件中的展开图标 | `string \| string[] \| #expandIcon="{key: VKey, expanded: boolean, node: TreeNode}"` | `right` | ✅ | 当为数组时表示[`展开时图标`,`未展开时图标`] |
 | `getKey` | 获取数据的唯一标识 | `string \| (record: any) => VKey` | `key` | ✅ | - |
 | `labelKey` | 替代[TreeSelectNode](#TreeSelectNode)中的`label`字段 | `string` | `label` | ✅ | -
 | `leafLineIcon` | 叶子节点的图标，用于替换默认的连接线 | `string` | - | - | 仅在 `showLine` 时生效 |

diff --git a/packages/components/tree-select/src/types.ts b/packages/components/tree-select/src/types.ts
@@ -45,7 +45,7 @@ export const treeSelectProps = {
   draggable: { type: Boolean, default: false },
   droppable: { type: Function as PropType<TreeDroppable>, default: undefined },
   empty: { type: [String, Object] as PropType<string | EmptyProps>, default: undefined },
-  expandIcon: { type: String, default: undefined },
+  expandIcon: { type: [String, Array] as PropType<string | string[]>, default: undefined },
   getKey: { type: [String, Function] as PropType<string | ((data: TreeSelectNode) => VKey)>, default: undefined },
   labelKey: { type: String, default: undefined },
   leafLineIcon: { type: String, default: undefined },

diff --git a/packages/components/tree/__tests__/tree.spec.ts b/packages/components/tree/__tests__/tree.spec.ts
@@ -634,6 +634,16 @@ describe('Tree', () => {
 
     expect(wrapper.find('.ix-tree-node-expand').find('.ix-icon-up').exists()).toBe(false)
     expect(wrapper.find('.ix-tree-node-expand').find('.ix-icon-down').exists()).toBe(true)
+
+    await wrapper.setProps({ expandIcon: ['minus-square', 'plus-square'], expandedKeys: ['0'] })
+
+    const allNodes = wrapper.findAll('.ix-tree-node')
+
+    expect(wrapper.find('.ix-tree-node-expand').find('.ix-icon-up').exists()).toBe(false)
+    expect(wrapper.find('.ix-tree-node-expand').find('.ix-icon-down').exists()).toBe(false)
+
+    expect(allNodes[0].find('.ix-icon-minus-square').exists()).toBe(true)
+    expect(allNodes[1].find('.ix-icon-plus-square').exists()).toBe(true)
   })
 
   test('expandIcon slot work', async () => {

diff --git a/packages/components/tree/docs/Index.zh.md b/packages/components/tree/docs/Index.zh.md
@@ -31,7 +31,7 @@ order: 0
 | `draggable` | 是否允许拖拽节点 | `boolean` | `false` | - | - |
 | `droppable` | 是否允许放置节点,参见[TreeDroppable](#TreeDroppable) | `TreeDroppable` | - | - | - |
 | `empty` | 空数据时的内容 | `string \| EmptyProps \| #empty` | - | - | - |
-| `expandIcon` | 展开图标 | `string \| #expandIcon="{key: VKey, expanded: boolean, node: TreeNode}"` | `right` | ✅ | - |
+| `expandIcon` | 展开图标 | `string \| string[] \| #expandIcon="{key: VKey, expanded: boolean, node: TreeNode}"` | `right` | ✅ | 当为数组时表示[`展开时图标`,`未展开时图标`] |
 | `getKey` | 获取数据的唯一标识 | `string \| (record: any) => VKey` | `key` | ✅ | - |
 | `height` | 设置虚拟滚动容器高度 | `number` | - | - | - |
 | `labelKey` | 替代[TreeNode](#TreeNode)中的`label`字段 | `string` | `label` | ✅ | -

diff --git a/packages/components/tree/src/composables/useExpandable.ts b/packages/components/tree/src/composables/useExpandable.ts
@@ -19,7 +19,7 @@ import { callChange, getParentKeys } from '../utils'
 import { convertMergeNodes, convertMergedNodeMap } from './useDataSource'
 
 export interface ExpandableContext {
-  expandIcon: ComputedRef<string>
+  expandIcon: ComputedRef<string | string[]>
   expandedKeys: WritableComputedRef<VKey[]>
   handleExpand: (key: VKey, rawNode: TreeNode) => void
   loadingKeys: Ref<VKey[]>

diff --git a/packages/components/tree/src/node/Expand.tsx b/packages/components/tree/src/node/Expand.tsx
@@ -9,6 +9,8 @@ import type { VNodeTypes } from 'vue'
 
 import { computed, defineComponent, inject, normalizeClass } from 'vue'
 
+import { isArray } from 'lodash-es'
+
 import { IxIcon } from '@idux/components/icon'
 
 import { treeToken } from '../token'
@@ -40,11 +42,19 @@ export default defineComponent({
       if (isLoading.value) {
         children = <IxIcon name="loading"></IxIcon>
       } else if (!props.isLeaf) {
+        const { expanded } = props
         if (slots.expandIcon) {
-          const { nodeKey: key, expanded, rawNode: node } = props
+          const { nodeKey: key, rawNode: node } = props
           children = slots.expandIcon({ key, expanded, node })
         } else {
-          children = <IxIcon name={expandIcon.value} rotate={props.expanded ? 90 : 0}></IxIcon>
+          const expandIconValue = expandIcon.value
+          const iconIsArray = isArray(expandIconValue)
+          children = (
+            <IxIcon
+              name={iconIsArray ? (expanded ? expandIconValue[0] : expandIconValue[1]) : expandIconValue}
+              rotate={expanded && !iconIsArray ? 90 : 0}
+            />
+          )
         }
       }
       return (

diff --git a/packages/components/tree/src/types.ts b/packages/components/tree/src/types.ts
@@ -35,7 +35,7 @@ export const treeProps = {
   draggable: IxPropTypes.bool.def(false),
   droppable: IxPropTypes.func<TreeDroppable>(),
   empty: IxPropTypes.oneOfType([String, IxPropTypes.object<EmptyProps>()]),
-  expandIcon: IxPropTypes.string,
+  expandIcon: IxPropTypes.oneOfType([String, IxPropTypes.array<string>()]),
   getKey: { type: [String, Function] as PropType<string | ((data: TreeNode) => VKey)>, default: undefined },
   height: IxPropTypes.number,
   labelKey: IxPropTypes.string,