feat(comp: tree-select): add tree-select comp

packages/components/config/src/defaultConfig.ts

@@ -53,6 +53,7 @@ import type {
   TimeRangePickerConfig,
   TooltipConfig,
   TreeConfig,
+  TreeSelectConfig,
 } from './types'
 
 import { numFormatter } from './numFormatter'
@@ -190,6 +191,14 @@ const timeRangePicker: TimeRangePickerConfig = {
   format: 'HH:mm:ss',
 }
 
+const treeSelect: TreeSelectConfig = {
+  size: 'md',
+  suffix: 'down',
+  childrenKey: 'children',
+  labelKey: 'label',
+  nodeKey: 'key',
+}
+
 // --------------------- Data Display ---------------------
 const avatar: AvatarConfig = {
   gap: 4,
@@ -385,6 +394,7 @@ export const defaultConfig: GlobalConfig = {
   textarea,
   timePicker,
   timeRangePicker,
+  treeSelect,
   // Data Display
   avatar,
   badge,

packages/components/config/src/types.ts

@@ -167,6 +167,15 @@ export interface SelectConfig {
   valueKey: string
 }
 
+export interface TreeSelectConfig {
+  size: FormSize
+  suffix: string
+  childrenKey: string
+  labelKey: string
+  nodeKey: string
+  target?: PortalTargetType
+}
+
 export interface TimePickerConfig {
   borderless: boolean
   clearable: boolean
@@ -407,6 +416,7 @@ export interface GlobalConfig {
   radio: RadioConfig
   rate: RateConfig
   select: SelectConfig
+  treeSelect: TreeSelectConfig
   timePicker: TimePickerConfig
   timeRangePicker: TimeRangePickerConfig
   // Data Display

packages/components/default.less

@@ -56,4 +56,5 @@
 @import './timeline/style/themes/default.less';
 @import './tooltip/style/themes/default.less';
 @import './tree/style/themes/default.less';
+@import './tree-select/style/themes/default.less';
 @import './typography/style/themes/default.less';

packages/components/icon/demo/all.ts

@@ -171,6 +171,8 @@ export const allIcons = [
   'thunderbolt',
   'tool',
   'transmit',
+  'tree-expand',
+  'tree-unexpand',
   'unexpand',
   'unlock',
   'up',

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"><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>',
@@ -865,6 +865,16 @@ export const Transmit = {
   svg: '<svg viewBox="64 64 896 896"><path d="M922.624 80.256a44.608 44.608 0 0 1 57.408 49.344l-1.536 6.656-262.4 830.976a33.152 33.152 0 0 1-51.456 16.512l-3.648-3.072-252.16-252.16 45.056-45.056 216.576 216.576 236.288-748.16-750.208 234.176L322.56 552.064l-45.056 45.12L75.712 395.392a33.152 33.152 0 0 1 9.856-53.568l3.712-1.536L922.624 80.256z"/><path d="M961.088 102.208a35.072 35.072 0 0 0-49.024-7.68l-644.16 468.8v259.136a38.272 38.272 0 0 0 66.88 25.408l624.128-701.824a35.072 35.072 0 0 0 2.176-43.904zM734.4 302.592 331.648 755.52V595.776L734.4 302.592z"/></svg>',
 }
 
+export const TreeExpand = {
+  name: 'tree-expand',
+  svg: '<svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.8 3c.11 0 .2.09.2.2V4h.8c.11 0 .2.09.2.2v.6a.2.2 0 0 1-.2.2H3v3h2.8c.11 0 .2.09.2.2v.6a.2.2 0 0 1-.2.2H5v3h1.8c.11 0 .2.09.2.2v.6a.2.2 0 0 1-.2.2H4.2a.2.2 0 0 1-.2-.2V9H2.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.2H8.2a.2.2 0 0 1-.2-.2v-.6c0-.11.09-.2.2-.2h5.6Zm-1-4c.11 0 .2.09.2.2v.6a.2.2 0 0 1-.2.2H7.2a.2.2 0 0 1-.2-.2v-.6c0-.11.09-.2.2-.2h5.6Zm-1-4c.11 0 .2.09.2.2v.6a.2.2 0 0 1-.2.2H5.2a.2.2 0 0 1-.2-.2v-.6c0-.11.09-.2.2-.2h6.6Z"/></svg>',
+}
+
+export const TreeUnexpand = {
+  name: 'tree-unexpand',
+  svg: '<svg viewBox="0 0 16 16"><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 Unexpand = {
   name: 'unexpand',
   svg: '<svg viewBox="64 64 896 896"><path d="M1018.645 531.298c8.635-18.61 4.601-41.42-11.442-55.864l-205.108-184.68c-19.7-17.739-50.05-16.148-67.789 3.552-17.738 19.7-16.148 50.051 3.553 67.79l166.28 149.718-167.28 150.62c-19.7 17.738-21.291 48.088-3.553 67.789 17.739 19.7 48.089 21.291 67.79 3.553l205.107-184.68a47.805 47.805 0 0 0 12.442-17.798zM119.947 511.39l166.28-149.719c19.7-17.738 21.29-48.088 3.552-67.789-17.738-19.7-48.088-21.291-67.789-3.553L16.882 475.01C.84 489.456-3.194 512.264 5.44 530.874a47.805 47.805 0 0 0 12.442 17.798l205.108 184.68c19.7 17.739 50.05 16.148 67.79-3.552 17.738-19.7 16.147-50.051-3.553-67.79l-167.28-150.62zm529.545-377.146c24.911 9.066 37.755 36.61 28.688 61.522L436.03 861.068c-9.067 24.911-36.611 37.755-61.522 28.688-24.911-9.066-37.755-36.61-28.688-61.522l242.15-665.302c9.067-24.911 36.611-37.755 61.522-28.688z"/></svg>',

packages/components/icon/src/dependencies.ts

@@ -41,6 +41,8 @@ import {
   RotateRight,
   Search,
   StarFilled,
+  TreeExpand,
+  TreeUnexpand,
   User,
   VerticalAlignTop,
   ZoomIn,
@@ -82,6 +84,8 @@ export const IDUX_ICON_DEPENDENCIES: IconDefinition[] = [
   Search, // Select
   StarFilled, // Rate
   User, // Avatar
+  TreeExpand, // TreeSelect
+  TreeUnexpand, // TreeSelect
   VerticalAlignTop, // BackTop
   ZoomIn, // Image
   ZoomOut, // Image

packages/components/index.ts

@@ -58,6 +58,7 @@ import { IxTimePicker, IxTimeRangePicker } from '@idux/components/time-picker'
 import { IxTimeline, IxTimelineItem } from '@idux/components/timeline'
 import { IxTooltip } from '@idux/components/tooltip'
 import { IxTree } from '@idux/components/tree'
+import { IxTreeSelect } from '@idux/components/tree-select'
 import { IxTypography } from '@idux/components/typography'
 import { version } from '@idux/components/version'
 
@@ -141,6 +142,7 @@ const components = [
   IxTimelineItem,
   IxTooltip,
   IxTree,
+  IxTreeSelect,
 ]
 
 const directives: Record<string, Directive> = {

packages/components/style/variable/prefix.less

@@ -61,6 +61,8 @@
 @textarea-prefix: ~'@{idux-prefix}-textarea';
 @time-picker-prefix: ~'@{idux-prefix}-time-picker';
 @time-range-picker-prefix: ~'@{idux-prefix}-time-range-picker';
+@tree-select-prefix: ~'@{idux-prefix}-tree-select';
+@tree-select-option-prefix: ~'@{idux-prefix}-tree-select-option';
 
 // Feedback
 @alert-prefix: ~'@{idux-prefix}-alert';

packages/components/tree-select/__tests__/__snapshots__/treeSelect.spec.ts.snap

@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TreeSelect multiple work render work 1`] = `
+"<div class=\\"ix-tree-select ix-tree-select-opened ix-tree-select-single ix-tree-select-with-suffix ix-tree-select-md\\">
+  <!----><label class=\\"ix-tree-select-selector\\">
+    <div class=\\"ix-tree-select-selector-item\\"><span class=\\"ix-tree-select-selector-item-label\\">Node 0</span>
+      <!---->
+    </div>
+    <div class=\\"ix-tree-select-selector-input\\"><input class=\\"ix-tree-select-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+      <!---->
+    </div>
+    <!---->
+    <div class=\\"ix-tree-select-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
+    <!---->
+  </label>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`TreeSelect single work custom keys work 1`] = `
+"<div class=\\"ix-tree-select ix-tree-select-opened ix-tree-select-single ix-tree-select-with-suffix ix-tree-select-md\\">
+  <!----><label class=\\"ix-tree-select-selector\\">
+    <div class=\\"ix-tree-select-selector-item\\"><span class=\\"ix-tree-select-selector-item-label\\">Node 0</span>
+      <!---->
+    </div>
+    <div class=\\"ix-tree-select-selector-input\\"><input class=\\"ix-tree-select-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+      <!---->
+    </div>
+    <!---->
+    <div class=\\"ix-tree-select-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
+    <!---->
+  </label>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`TreeSelect single work render work 1`] = `
+"<div class=\\"ix-tree-select ix-tree-select-opened ix-tree-select-single ix-tree-select-with-suffix ix-tree-select-md\\">
+  <!----><label class=\\"ix-tree-select-selector\\">
+    <div class=\\"ix-tree-select-selector-item\\"><span class=\\"ix-tree-select-selector-item-label\\">Node 0</span>
+      <!---->
+    </div>
+    <div class=\\"ix-tree-select-selector-input\\"><input class=\\"ix-tree-select-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+      <!---->
+    </div>
+    <!---->
+    <div class=\\"ix-tree-select-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
+    <!---->
+  </label>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`TreeSelect single work searchFn work 1`] = `
+"<div class=\\"ix-tree-select ix-tree-select-single ix-tree-select-with-suffix ix-tree-select-md\\" searchvalue=\\"node\\">
+  <!----><label class=\\"ix-tree-select-selector\\">
+    <div class=\\"ix-tree-select-selector-item\\"><span class=\\"ix-tree-select-selector-item-label\\">Node 0</span>
+      <!---->
+    </div>
+    <div class=\\"ix-tree-select-selector-input\\"><input class=\\"ix-tree-select-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+      <!---->
+    </div>
+    <!---->
+    <div class=\\"ix-tree-select-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
+    <!---->
+  </label>
+</div>
+<!---->"
+`;
+
+exports[`TreeSelect single work searchFn work 2`] = `
+"<div class=\\"ix-tree-select ix-tree-select-single ix-tree-select-with-suffix ix-tree-select-md\\" searchvalue=\\"node\\">
+  <!----><label class=\\"ix-tree-select-selector\\">
+    <div class=\\"ix-tree-select-selector-item\\"><span class=\\"ix-tree-select-selector-item-label\\">Node 0</span>
+      <!---->
+    </div>
+    <div class=\\"ix-tree-select-selector-input\\"><input class=\\"ix-tree-select-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+      <!---->
+    </div>
+    <!---->
+    <div class=\\"ix-tree-select-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" aria-label=\\"down\\"><svg viewBox=\\"64 64 896 896\\" width=\\"1em\\" height=\\"1em\\" focusable=\\"false\\" fill=\\"currentColor\\" aria-hidden=\\"true\\" data-icon=\\"down\\">
+          <path d=\\"m502.976 728.896-388.544-388.48a12.8 12.8 0 0 1 0-18.176l27.136-27.136a12.8 12.8 0 0 1 18.112 0L502.976 638.4a12.8 12.8 0 0 0 18.048 0L864.32 295.104a12.8 12.8 0 0 1 18.112 0l27.136 27.136a12.8 12.8 0 0 1 0 18.112l-388.48 388.48a12.8 12.8 0 0 1-18.112 0z\\"></path>
+        </svg></i></div>
+    <!---->
+  </label>
+</div>
+<!---->"
+`;
+
+exports[`TreeSelect single work searchFn work 3`] = `
+"<div class=\\"ix-tree-select ix-tree-select-single ix-tree-select-with-suffix ix-tree-select-md\\" searchvalue=\\"node\\">
+  <!----><label class=\\"ix-tree-select-selector\\">
+    <div class=\\"ix-tree-select-selector-item\\"><span class=\\"ix-tree-select-selector-item-label\\">Node 0</span>
+      <!---->
+    </div>
+    <div class=\\"ix-tree-select-selector-input\\"><input class=\\"ix-tree-select-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+      <!---->
+    </div>
+    <!---->
+    <div class=\\"ix-tree-select-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" aria-label=\\"down\\"><svg viewBox=\\"64 64 896 896\\" width=\\"1em\\" height=\\"1em\\" focusable=\\"false\\" fill=\\"currentColor\\" aria-hidden=\\"true\\" data-icon=\\"down\\">
+          <path d=\\"m502.976 728.896-388.544-388.48a12.8 12.8 0 0 1 0-18.176l27.136-27.136a12.8 12.8 0 0 1 18.112 0L502.976 638.4a12.8 12.8 0 0 0 18.048 0L864.32 295.104a12.8 12.8 0 0 1 18.112 0l27.136 27.136a12.8 12.8 0 0 1 0 18.112l-388.48 388.48a12.8 12.8 0 0 1-18.112 0z\\"></path>
+        </svg></i></div>
+    <!---->
+  </label>
+</div>
+<!---->"
+`;
+
+exports[`TreeSelect single work searchable work 1`] = `
+"<div class=\\"ix-tree-select ix-tree-select-opened ix-tree-select-single ix-tree-select-searchable ix-tree-select-with-suffix ix-tree-select-md\\">
+  <!----><label class=\\"ix-tree-select-selector\\">
+    <div class=\\"ix-tree-select-selector-item\\"><span class=\\"ix-tree-select-selector-item-label\\">Node 0</span>
+      <!---->
+    </div>
+    <div class=\\"ix-tree-select-selector-input\\"><input class=\\"ix-tree-select-selector-input-inner\\" autocomplete=\\"off\\">
+      <!---->
+    </div>
+    <!---->
+    <div class=\\"ix-tree-select-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
+    <!---->
+  </label>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`TreeSelect single work searchable work 2`] = `
+"<div class=\\"ix-tree-select ix-tree-select-opened ix-tree-select-single ix-tree-select-with-suffix ix-tree-select-md\\">
+  <!----><label class=\\"ix-tree-select-selector\\">
+    <!---->
+    <div class=\\"ix-tree-select-selector-input\\"><input class=\\"ix-tree-select-selector-input-inner\\" autocomplete=\\"off\\" style=\\"opacity: 0;\\">
+      <!---->
+    </div>
+    <!---->
+    <div class=\\"ix-tree-select-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" aria-label=\\"down\\"><svg viewBox=\\"64 64 896 896\\" width=\\"1em\\" height=\\"1em\\" focusable=\\"false\\" fill=\\"currentColor\\" aria-hidden=\\"true\\" data-icon=\\"down\\">
+          <path d=\\"m502.976 728.896-388.544-388.48a12.8 12.8 0 0 1 0-18.176l27.136-27.136a12.8 12.8 0 0 1 18.112 0L502.976 638.4a12.8 12.8 0 0 0 18.048 0L864.32 295.104a12.8 12.8 0 0 1 18.112 0l27.136 27.136a12.8 12.8 0 0 1 0 18.112l-388.48 388.48a12.8 12.8 0 0 1-18.112 0z\\"></path>
+        </svg></i></div>
+    <!---->
+  </label>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;