From 19ad390c3b65a59b0f2bbfc7b8471f1a5db8f4f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 27 May 2021 14:48:48 +0800 Subject: [PATCH] feat: TreeSelect support treeLine (#30705) * feat: TreeSelect support treeline * docs: Update doc * tests: Update snapshot * docs: rm onlt * fix: TS definition --- .../__tests__/__snapshots__/demo.test.js.snap | 108 ++++++++++++++++++ components/tree-select/demo/async.md | 1 + components/tree-select/demo/treeLine.md | 56 +++++++++ components/tree-select/index.en-US.md | 9 +- components/tree-select/index.tsx | 12 +- components/tree-select/index.zh-CN.md | 29 ++--- components/tree-select/style/index.less | 4 +- components/tree/style/mixin.less | 17 ++- site/bisheng.config.js | 4 - 9 files changed, 204 insertions(+), 36 deletions(-) create mode 100644 components/tree-select/demo/treeLine.md diff --git a/components/tree-select/__tests__/__snapshots__/demo.test.js.snap b/components/tree-select/__tests__/__snapshots__/demo.test.js.snap index ec3fd447e2..ed526d3ef8 100644 --- 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`] = ` `; + +exports[`renders ./components/tree-select/demo/treeLine.md correctly 1`] = ` +
+
+ +
+
+ +
+
+
+
+ + + + +
+ +
+
+
+`; diff --git a/components/tree-select/demo/async.md b/components/tree-select/demo/async.md index a670e59694..b9db90f5c5 100644 --- 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(); diff --git a/components/tree-select/demo/treeLine.md b/components/tree-select/demo/treeLine.md new file mode 100644 index 0000000000..dfbf7dac6f --- /dev/null +++ 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 ( + + setTreeLine(!treeLine)} + /> + setShowLeafIcon(!showLeafIcon)} + /> + + + + + + + + + + + + + ); +}; + +ReactDOM.render(, mountNode); +``` diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md index 480b48634e..7fe711cef6 100644 --- 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\[] | - | | @@ -62,10 +63,10 @@ Tree selection control. ### Tree Methods -| Name | Description | Version | -| --- | --- | --- | -| blur() | Remove focus | | -| focus() | Get focus | | +| Name | Description | Version | +| ------- | ------------ | ------- | +| blur() | Remove focus | | +| focus() | Get focus | | ### TreeNode props diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index de31c68179..2ed5c9471b 100644 --- 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 extends Omit< RcTreeSelectProps, - '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 = ( treeCheckable={ treeCheckable ? : treeCheckable } + treeLine={!!treeLine} inputIcon={suffixIcon} multiple={multiple} removeIcon={removeIcon} diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index 31c8549ed8..379965ca89 100644 --- 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\[] | - | | @@ -63,25 +64,25 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg ### Tree 方法 -| 名称 | 描述 | 版本 | -| --- | --- | --- | -| blur() | 移除焦点 | | -| focus() | 获取焦点 | | +| 名称 | 描述 | 版本 | +| ------- | -------- | ---- | +| blur() | 移除焦点 | | +| focus() | 获取焦点 | | ### TreeNode props > 建议使用 treeData 来代替 TreeNode，免去手工构造麻烦 -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| checkable | 当树为 Checkbox 时，设置独立节点是否展示 Checkbox | boolean | - | | -| disableCheckbox | 禁掉 Checkbox | boolean | false | | -| disabled | 是否禁用 | boolean | false | | -| isLeaf | 是否是叶子节点 | boolean | false | | -| key | 此项必须设置（其值在整个树范围内唯一） | string | - | | -| selectable | 是否可选 | boolean | true | | -| title | 树节点显示的内容 | ReactNode | `---` | | -| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --------------- | -------------------------------------------------- | --------- | ------ | ---- | +| checkable | 当树为 Checkbox 时，设置独立节点是否展示 Checkbox | boolean | - | | +| disableCheckbox | 禁掉 Checkbox | boolean | false | | +| disabled | 是否禁用 | boolean | false | | +| isLeaf | 是否是叶子节点 | boolean | false | | +| key | 此项必须设置（其值在整个树范围内唯一） | string | - | | +| selectable | 是否可选 | boolean | true | | +| title | 树节点显示的内容 | ReactNode | `---` | | +| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - | | ## FAQ diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index e6672b5872..b2cf719f36 100644 --- 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; } diff --git a/components/tree/style/mixin.less b/components/tree/style/mixin.less index 197c206625..b8030a77db 100644 --- 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,15 +258,15 @@ } } } -} -.@{tree-node-prefix-cls}-leaf-last { - .@{tree-prefix-cls}-switcher { - &-leaf-line { - &::before { - top: auto !important; - bottom: auto !important; - height: @tree-title-height - 10px !important; + .@{custom-tree-node-prefix-cls}-leaf-last { + .@{custom-tree-prefix-cls}-switcher { + &-leaf-line { + &::before { + top: auto !important; + bottom: auto !important; + height: @tree-title-height - 10px !important; + } } } } diff --git a/site/bisheng.config.js b/site/bisheng.config.js index d9609f0df8..05583ab76c 100644 --- 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'),