From cf6460f6c7e4d246f5fb0c26ec309d25ee6541ef Mon Sep 17 00:00:00 2001 From: liyuan-meng Date: Thu, 30 Nov 2023 17:30:35 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:[TreeSelect]=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=BC=B9=E5=87=BA=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/tree-select/demos/position.md | 199 +++++++++++++++++++ src/components/tree-select/index.js | 63 +++--- src/components/tree-select/index.md | 9 +- 3 files changed, 240 insertions(+), 31 deletions(-) create mode 100644 src/components/tree-select/demos/position.md diff --git a/src/components/tree-select/demos/position.md b/src/components/tree-select/demos/position.md new file mode 100644 index 000000000..820ac7ae8 --- /dev/null +++ b/src/components/tree-select/demos/position.md @@ -0,0 +1,199 @@ +--- +order: 2 +title: 多层单选与多选 +desc: 与Tree结合的树下拉 +--- + +```jsx +import React from 'react'; +import { TreeSelect } from 'cloud-react'; + +class TreeSelectDemo extends React.Component { + treeData = [ + { + id: 11, + name: '禁止删除节点', + pId: 1, + disableRemove: true, + children: [ + { + id: 113, + name: '删除三个', + pId: 11, + children: [ + { + id: 1131, + name: '禁止删除节点31', + pId: 113, + children: [] + }, + { + id: 1132, + name: '禁止删除节点32', + pId: 113, + children: [ + { + id: 11321, + name: '禁止删除节点321', + pId: 1132, + children: [] + } + ] + } + ] + }, + { + id: 114, + name: '禁止删除节点4', + pId: 11, + children: [] + } + ] + }, + { + id: 14, + name: '未分类', + pId: 1, + disableRemove: true, + disableAdd: true, + disableRename: true, + children: [] + } + ]; + + constructor(props) { + super(props); + + this.state = { + selectedNodes: [ + { + id: 11321, + name: '禁止删除节点321', + pId: 1132, + children: [] + } + ], + confirmNodes: [], + singleNodes: [ + { + id: 11321, + name: '禁止删除节点321', + pId: 1132, + children: [] + } + ] + }; + setTimeout(() => { + this.setState({ + confirmNodes: [this.treeData[0]] + }); + }, 1000); + + } + + handleChange = (node, selectedNodes) => { + console.log(node, selectedNodes); + + this.setState({ + selectedNodes + }); + }; + + handleConfirmChange = (node, selectedNodes) => { + console.log(node, selectedNodes); + + this.setState({ + confirmNodes: selectedNodes + }); + }; + + onOk = (node, selectedNodes) => { + console.log(node, selectedNodes); + + this.setState({ + confirmNodes: selectedNodes + }); + }; + + onChangeSingle = (node, selectedNodes) => { + console.log(node, selectedNodes); + + this.setState({ + singleNodes: selectedNodes + }); + }; + + render() { + return ( +
+
+
左上
+ +
+
+
左下
+ +
+
+
右上
+ +
+
+
右下
+ +
+
+ ); + } +} + +export default TreeSelectDemo; +``` diff --git a/src/components/tree-select/index.js b/src/components/tree-select/index.js index e91ebad87..0c01f99e7 100644 --- a/src/components/tree-select/index.js +++ b/src/components/tree-select/index.js @@ -149,33 +149,30 @@ class TreeSelect extends Component { } positionPop = () => { - const { - props: { isAppendToBody, position }, - selectedContainerStyle: { left, top, bottom, height }, - optionsNodeStyle: { height: optionsHeight }, - } = this; - const isBottomDistanceEnough = - bottom + optionsHeight < this.document.documentElement.clientHeight; - const isLocationTop = - optionsHeight < top && !isBottomDistanceEnough && position === 'auto'; - const borderTop = isLocationTop ? '1px solid #d9d9d9' : null; - if (isAppendToBody) { - this.setState({ - style: { - position: 'fixed', - left: `${left}px`, - top: isLocationTop ? `${top - optionsHeight}px` : `${bottom}px`, - borderTop, - }, - }); - } else { - this.setState({ - style: { - top: isLocationTop ? `${-optionsHeight - 4}px` : `${height + 4}px`, - borderTop, - }, - }); - } + setTimeout(() => { + const { + props: { isAppendToBody, position }, + selectedContainerStyle: { left, top, bottom, height }, + optionsNodeStyle: { height: optionsHeight }, + } = this; + const isBottomDistanceEnough = bottom + optionsHeight < this.document.documentElement.clientHeight; + const isLocationTop = position === 'top' || optionsHeight < top && !isBottomDistanceEnough && position === 'auto'; + if (isAppendToBody) { + this.setState({ + style: { + position: 'fixed', + left: `${left}px`, + top: isLocationTop ? `${top - optionsHeight}px` : `${bottom + 4}px`, + }, + }); + } else { + this.setState({ + style: { + top: isLocationTop ? `${-optionsHeight - 4}px` : `${height + 4}px`, + }, + }); + } + }); }; handleClick = (e) => { @@ -345,6 +342,8 @@ class TreeSelect extends Component { allowClear, style, className, + dropdownStyle, + dropdownClassName, isAppendToBody, searchable, } = this.props; @@ -358,9 +357,9 @@ class TreeSelect extends Component { ); const treeOptionsContainer = open ? (
{this.renderTreeNode()}
@@ -423,6 +422,9 @@ TreeSelect.propTypes = { onReset: PropTypes.func, searchInBox: PropTypes.bool, maxTagCount: PropTypes.number, + dropdownStyle: PropTypes.object, + dropdownClassName: PropTypes.string, + position: PropTypes.oneOf(['top', 'bottom', 'auto']), }; TreeSelect.defaultProps = { @@ -450,6 +452,9 @@ TreeSelect.defaultProps = { onReset: noop, searchInBox: false, maxTagCount: undefined, + dropdownStyle: {}, + dropdownClassName: '', + position: 'bottom', }; export default TreeSelect; diff --git a/src/components/tree-select/index.md b/src/components/tree-select/index.md index ec6177293..4006efe05 100644 --- a/src/components/tree-select/index.md +++ b/src/components/tree-select/index.md @@ -39,6 +39,9 @@ group: | onSelectClose | 下拉选择框关闭的时候回调此函数 | function | - | | searchInBox | 搜索框在外侧 | boolean | false | | maxTagCount | 多选下拉最多显示多少个tag | number | - | +| position | 下拉框定位：`top` `bottom` `auto`（是否启用自动定位，如需使用可设置为`auto`） | string | `bottom` | +| dropdownClassName | 下拉框类名 | string | - | +| dropdownStyle | 下拉框样式 | object | {} | #### `single = true`，单选下拉树时候支持的配置 | 属性 | 说明 | 类型 | 默认值 | @@ -61,7 +64,6 @@ group: | onReset | 重置回调 | function | - | | containParentNode | 结果是否包含各个父节点 | boolean | false | - 树的更多属性配置可参考 **Tree** 组件 ### 代码演示 @@ -73,5 +75,8 @@ group: ### 不与Tree结合的树下拉 - + + +### 弹出位置 +