feat: TreeSelect support treeLine (#30705)

* feat: TreeSelect support treeline * docs: Update doc * tests: Update snapshot * docs: rm onlt * fix: TS definition
2024-11-24 11:10:01 +08:00 · 2021-05-27 14:48:48 +08:00 · 2021-05-27 14:48:48 +08:00 · 19ad390c3b
commit 19ad390c3b
parent 772bdd8ada
9 changed files with 204 additions and 36 deletions
--- a/components/tree-select/tests/snapshots/demo.test.js.snap
+++ b/components/tree-select/tests/snapshots/demo.test.js.snap
@ -381,3 +381,111 @@ exports[`renders ./components/tree-select/demo/treeData.md correctly 1`] = `
  </span>
 </div>
 `;
+
+exports[`renders ./components/tree-select/demo/treeLine.md correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <button
+      aria-checked="true"
+      class="ant-switch ant-switch-checked"
+      role="switch"
+      type="button"
+    >
+      <div
+        class="ant-switch-handle"
+      />
+      <span
+        class="ant-switch-inner"
+      >
+        treeLine
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <button
+      aria-checked="false"
+      class="ant-switch"
+      role="switch"
+      type="button"
+    >
+      <div
+        class="ant-switch-handle"
+      />
+      <span
+        class="ant-switch-inner"
+      >
+        showLeafIcon
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
+      style="width:300px"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-activedescendant="undefined_list_0"
+            aria-autocomplete="list"
+            aria-controls="undefined_list"
+            aria-haspopup="listbox"
+            aria-owns="undefined_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            readonly=""
+            role="combobox"
+            style="opacity:0"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-placeholder"
+        />
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;
--- a/components/tree-select/demo/async.md
+++ b/components/tree-select/demo/async.md
@ -45,6 +45,7 @@ class Demo extends React.Component {
          treeData: this.state.treeData.concat([
            this.genTreeNode(id, false),
            this.genTreeNode(id, true),
+            this.genTreeNode(id, true),
          ]),
        });
        resolve();
--- a/components/tree-select/demo/treeLine.md
+++ b/components/tree-select/demo/treeLine.md
@ -0,0 +1,56 @@
+---
+order: 6
+title:
+  zh-CN: 线性样式
+  en-US: Show Tree Line
+---
+
+## zh-CN
+
+通过 `treeLine` 配置线性样式。
+
+## en-US
+
+Use `treeLine` to show the line style.
+
+```tsx
+import { TreeSelect, Switch, Space } from 'antd';
+
+const { TreeNode } = TreeSelect;
+
+const Demo = () => {
+  const [treeLine, setTreeLine] = React.useState(true);
+  const [showLeafIcon, setShowLeafIcon] = React.useState(false);
+
+  return (
+    <Space direction="vertical">
+      <Switch
+        checkedChildren="treeLine"
+        unCheckedChildren="treeLine"
+        checked={treeLine}
+        onChange={() => setTreeLine(!treeLine)}
+      />
+      <Switch
+        disabled={!treeLine}
+        checkedChildren="showLeafIcon"
+        unCheckedChildren="showLeafIcon"
+        checked={showLeafIcon}
+        onChange={() => setShowLeafIcon(!showLeafIcon)}
+      />
+      <TreeSelect treeLine={treeLine && { showLeafIcon }} style={{ width: 300 }}>
+        <TreeNode value="parent 1" title="parent 1">
+          <TreeNode value="parent 1-0" title="parent 1-0">
+            <TreeNode value="leaf1" title="my leaf" />
+            <TreeNode value="leaf2" title="your leaf" />
+          </TreeNode>
+          <TreeNode value="parent 1-1" title="parent 1-1">
+            <TreeNode value="sss" title="sss" />
+          </TreeNode>
+        </TreeNode>
+      </TreeSelect>
+    </Space>
+  );
+};
+
+ReactDOM.render(<Demo />, mountNode);
+```
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@ -50,6 +50,7 @@ Tree selection control.
 | treeDefaultExpandedKeys | Default expanded treeNodes | string\[] | - |  |
 | treeExpandedKeys | Set expanded keys | string\[] | - |  |
 | treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |  |
+| treeLine | Show the line. Ref [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 4.17.0 |
 | treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | `value` |  |
 | treeNodeLabelProp | Will render as content of select | string | `title` |  |
 | value | To set the current selected treeNode(s) | string \| string\[] | - |  |
@ -63,7 +64,7 @@ Tree selection control.
 ### Tree Methods

 | Name    | Description  | Version |
-| --- | --- | --- |
+| ------- | ------------ | ------- |
 | blur()  | Remove focus |         |
 | focus() | Get focus    |         |

--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@ -11,7 +11,7 @@ import omit from 'rc-util/lib/omit';
 import { DefaultValueType } from 'rc-tree-select/lib/interface';
 import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
-import { AntTreeNodeProps } from '../tree';
+import { AntTreeNodeProps, TreeProps } from '../tree';
 import getIcons from '../select/utils/iconUtil';
 import renderSwitcherIcon from '../tree/utils/iconUtil';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
@ -30,11 +30,18 @@ export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[];
 export interface TreeSelectProps<T>
  extends Omit<
    RcTreeSelectProps<T>,
-    'showTreeIcon' | 'treeMotion' | 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'
+    | 'showTreeIcon'
+    | 'treeMotion'
+    | 'inputIcon'
+    | 'mode'
+    | 'getInputElement'
+    | 'backfill'
+    | 'treeLine'
  > {
  suffixIcon?: React.ReactNode;
  size?: SizeType;
  bordered?: boolean;
+  treeLine?: TreeProps['showLine'];
 }

 export interface RefTreeSelectProps {
@ -140,6 +147,7 @@ const InternalTreeSelect = <T extends DefaultValueType>(
      treeCheckable={
        treeCheckable ? <span className={`${prefixCls}-tree-checkbox-inner`} /> : treeCheckable
      }
+      treeLine={!!treeLine}
      inputIcon={suffixIcon}
      multiple={multiple}
      removeIcon={removeIcon}
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@ -51,6 +51,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | treeDefaultExpandedKeys | 默认展开的树节点 | string\[] | - |  |
 | treeExpandedKeys | 设置展开的树节点 | string\[] | - |  |
 | treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |  |
+| treeLine | 是否展示线条样式，请参考 [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 4.17.0 |
 | treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` |  |
 | treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` |  |
 | value | 指定当前选中的条目 | string \| string\[] | - |  |
@ -64,7 +65,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 ### Tree 方法

 | 名称    | 描述     | 版本 |
-| --- | --- | --- |
+| ------- | -------- | ---- |
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |

@ -73,7 +74,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 > 建议使用 treeData 来代替 TreeNode，免去手工构造麻烦

 | 参数            | 说明                                               | 类型      | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
+| --------------- | -------------------------------------------------- | --------- | ------ | ---- |
 | checkable       | 当树为 Checkbox 时，设置独立节点是否展示 Checkbox  | boolean   | -      |      |
 | disableCheckbox | 禁掉 Checkbox                                      | boolean   | false  |      |
 | disabled        | 是否禁用                                           | boolean   | false  |      |
--- a/components/tree-select/style/index.less
+++ b/components/tree-select/style/index.less
@ -11,7 +11,7 @@
 .@{tree-select-prefix-cls} {
  // ======================= Dropdown =======================
  &-dropdown {
-    padding: @padding-xs (@padding-xs / 2) 0;
+    padding: @padding-xs (@padding-xs / 2);

    &-rtl {
      direction: rtl;
@ -24,8 +24,6 @@
        align-items: stretch;

        .@{select-tree-prefix-cls}-treenode {
-          padding-bottom: @padding-xs;
-
          .@{select-tree-prefix-cls}-node-content-wrapper {
            flex: auto;
          }
--- a/components/tree/style/mixin.less
+++ b/components/tree/style/mixin.less
@ -1,7 +1,6 @@
@import '../../style/mixins/index';

@tree-prefix-cls: ~'@{ant-prefix}-tree';
-@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
@tree-motion: ~'@{ant-prefix}-motion-collapse';
@tree-node-padding: (@padding-xs / 2);
@ -259,10 +258,9 @@
      }
    }
  }
-}

-.@{tree-node-prefix-cls}-leaf-last {
-  .@{tree-prefix-cls}-switcher {
+  .@{custom-tree-node-prefix-cls}-leaf-last {
+    .@{custom-tree-prefix-cls}-switcher {
      &-leaf-line {
        &::before {
          top: auto !important;
@ -272,3 +270,4 @@
      }
    }
  }
+}
--- a/site/bisheng.config.js
+++ b/site/bisheng.config.js
@ -59,10 +59,6 @@ module.exports = {
    javascriptEnabled: true,
  },
  webpackConfig(config) {
-    config.cache = {
-      type: 'filesystem',
-    };
-
    config.resolve.alias = {
      'antd/lib': path.join(process.cwd(), 'components'),
      'antd/es': path.join(process.cwd(), 'components'),