feat(pro: tree): add collapseIcon prop (#900)

IDuxFE · May 11, 2022 · e9bb42b · e9bb42b
1 parent ff75f3e
commit e9bb42b
Show file tree

Hide file tree

Showing 29 changed files with 673 additions and 114 deletions.
diff --git a/.ls-lint.yml b/.ls-lint.yml
@@ -28,4 +28,5 @@ ignore:
   - packages/site/node_modules
   - packages/cdk/forms/src/messages
   - packages/components/locales/src/langs
+  - packages/pro/locales/src/langs
   - packages/site/components.d.ts
diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -509,7 +509,7 @@ export interface TooltipConfig {
 export interface TreeConfig {
   blocked: boolean
   childrenKey: string
-  expandIcon: string
+  expandIcon: string | [string, string]
   getKey: string | ((data: TreeNode) => VKey)
   labelKey: string
   /**

diff --git a/packages/components/icon/demo/all.ts b/packages/components/icon/demo/all.ts
@@ -40,6 +40,7 @@ export const allIcons = [
   'cloud',
   'cluster',
   'code',
+  'collapse',
   'collect',
   'comment',
   'control',
@@ -187,6 +188,7 @@ export const allIcons = [
   'transmit',
   'tree-expand',
   'tree-unexpand',
+  'uncollapse',
   'unexpand',
   'unlock',
   'up',

diff --git a/packages/components/icon/src/definitions.ts b/packages/components/icon/src/definitions.ts
@@ -1,10 +1,10 @@
-/**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
- */
-
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
 export const Alert = {
   name: 'alert',
   svg: '<svg viewBox="64 64 896 896" focusable="false"><path d="M593.536 64c7.04 0 12.8 5.76 12.8 12.8v131.072A288.128 288.128 0 0 1 799.872 480v178.752l151.424 151.424A12.8 12.8 0 0 1 942.272 832H668.8a159.808 159.808 0 0 1-313.216 0H80.32a12.8 12.8 0 0 1-8.896-22.016l152.448-147.136V480c0-124.8 79.36-231.04 190.4-271.04V76.8c0-7.04 5.76-12.8 12.8-12.8h166.4zm9.472 768H421.952a96 96 0 0 0 181.056 0zm-91.136-576a224 224 0 0 0-224 224v210.112L207.104 768h611.52l-82.752-82.752V480a224 224 0 0 0-224-224zm32.384-128h-64.128v65.728c6.016-.64 12.096-1.152 18.176-1.408l13.568-.32c10.624 0 21.12.576 31.424 1.664l.96-65.664z"/></svg>',
@@ -210,6 +210,11 @@ export const Code = {
   svg: '<svg viewBox="64 64 896 896" focusable="false"><path d="M896 140.8v742.4a12.8 12.8 0 0 1-12.8 12.8H140.8a12.8 12.8 0 0 1-12.8-12.8V140.8c0-7.04 5.76-12.8 12.8-12.8h742.4c7.04 0 12.8 5.76 12.8 12.8zM832 192H192v640h640V192z"/><path d="M256 264.704 503.296 512 256 759.232v-90.56l156.736-156.736L256 355.2v-90.496zM460.8 704h230.4q12.8 0 12.8 12.8v38.4q0 12.8-12.8 12.8H460.8q-12.8 0-12.8-12.8v-38.4q0-12.8 12.8-12.8Z"/></svg>',
 }
 
+export const Collapse = {
+  name: 'collapse',
+  svg: '<svg viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M12.8 2c.11 0 .2.09.2.2v11.6a.2.2 0 0 1-.2.2h-.6a.2.2 0 0 1-.2-.2V2.2c0-.11.09-.2.2-.2h.6ZM8.641 3.191l.425.425a.2.2 0 0 1 0 .283l-4.102 4.1 4.102 4.102a.2.2 0 0 1 0 .283l-.425.424a.2.2 0 0 1-.282 0L3.692 8.141a.2.2 0 0 1 0-.283l4.667-4.667a.2.2 0 0 1 .282 0Z"/></svg>',
+}
+
 export const Collect = {
   name: 'collect',
   svg: '<svg viewBox="64 64 896 896" focusable="false"><path d="M883.2 192c7.04 0 12.8 5.76 12.8 12.8V448h-64V256H128v512l256-.064V832H76.8A12.8 12.8 0 0 1 64 819.2V192h819.2z"/><path d="m621.248 256-192-192H128a64 64 0 0 0-64 64v128h557.248zM402.752 128l64 64H128v-64h274.752zM651.52 343.232l79.552 161.28a12.8 12.8 0 0 0 9.6 7.04l177.984 25.856a12.8 12.8 0 0 1 7.104 21.76L796.992 684.8a12.8 12.8 0 0 0-3.712 11.328l30.4 177.28a12.8 12.8 0 0 1-18.56 13.44L645.952 803.2a12.8 12.8 0 0 0-11.904 0L474.88 886.848a12.8 12.8 0 0 1-18.56-13.504l30.4-177.28a12.8 12.8 0 0 0-3.712-11.328L354.24 559.232a12.8 12.8 0 0 1 7.04-21.824l177.984-25.856a12.8 12.8 0 0 0 9.664-7.04l79.616-161.28a12.8 12.8 0 0 1 22.912 0zm40 225.792L640 464.64l-51.52 104.448-115.264 16.768 83.392 81.28-19.776 114.752L640 727.68l103.104 54.144-19.712-114.752 83.328-81.28-115.2-16.768z"/></svg>',
@@ -945,6 +950,11 @@ export const TreeUnexpand = {
   svg: '<svg viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M2.8 3c.11 0 .2.09.2.2V4h1.8c.11 0 .2.09.2.2v.6a.2.2 0 0 1-.2.2H3v3h1.8c.11 0 .2.09.2.2v.6a.2.2 0 0 1-.2.2H3v3h1.8c.11 0 .2.09.2.2v.6a.2.2 0 0 1-.2.2H2.2a.2.2 0 0 1-.2-.2V3.2c0-.11.09-.2.2-.2h.6Zm11 9c.11 0 .2.09.2.2v.6a.2.2 0 0 1-.2.2H6.2a.2.2 0 0 1-.2-.2v-.6c0-.11.09-.2.2-.2h7.6Zm0-4c.11 0 .2.09.2.2v.6a.2.2 0 0 1-.2.2H6.2a.2.2 0 0 1-.2-.2v-.6c0-.11.09-.2.2-.2h7.6Zm0-4c.11 0 .2.09.2.2v.6a.2.2 0 0 1-.2.2H6.2a.2.2 0 0 1-.2-.2v-.6c0-.11.09-.2.2-.2h7.6Z"/></svg>',
 }
 
+export const Uncollapse = {
+  name: 'uncollapse',
+  svg: '<svg viewBox="0 0 16 16" focusable="false"><path fill-rule="evenodd" d="M3.2 2a.2.2 0 0 0-.2.2v11.6c0 .11.09.2.2.2h.6a.2.2 0 0 0 .2-.2V2.2a.2.2 0 0 0-.2-.2h-.6Zm4.159 1.191-.425.425a.2.2 0 0 0 0 .283l4.102 4.1-4.102 4.102a.2.2 0 0 0 0 .283l.425.424a.2.2 0 0 0 .282 0l4.667-4.667a.2.2 0 0 0 0-.283L7.641 3.191a.2.2 0 0 0-.282 0Z"/></svg>',
+}
+
 export const Unexpand = {
   name: 'unexpand',
   svg: '<svg viewBox="64 64 896 896" focusable="false"><path d="m344 744.512-24.448 24.448a15.68 15.68 0 0 1-22.528 0L68.8 540.8a15.68 15.68 0 0 1 0-22.592l228.16-228.16a15.68 15.68 0 0 1 22.528 0l24.448 24.448a15.68 15.68 0 0 1 0 22.528L151.552 529.536 344 721.984a15.68 15.68 0 0 1 0 22.528zm289.472-522.56-182.72 632.256a15.552 15.552 0 0 1-19.072 10.752l-30.4-8.32a15.872 15.872 0 0 1-10.752-19.584L573.184 204.8a15.552 15.552 0 0 1 19.072-10.752l30.4 8.32c8.32 2.496 13.184 11.264 10.816 19.648zM955.2 540.8 726.976 768.96a15.68 15.68 0 0 1-22.528 0L680 744.512a15.68 15.68 0 0 1 0-22.528l192.448-192.512L680 337.024a15.68 15.68 0 0 1 0-22.528l24.448-24.512a15.68 15.68 0 0 1 22.528 0L955.2 518.208a15.68 15.68 0 0 1 0 22.528z"/></svg>',

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 \| string[] \| #expandIcon="{key: VKey, expanded: boolean, node: TreeNode}"` | `right` | ✅ | 当为数组时表示[`展开时图标`,`未展开时图标`] |
+| `expandIcon` | 树组件中的展开图标 | `string \| [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, Array] as PropType<string | string[]>, default: undefined },
+  expandIcon: { type: [String, Array] as PropType<string | [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 },