diff --git a/packages/react-search-tree/README.md b/packages/react-search-tree/README.md index b1621a104d..39a2c256ed 100644 --- a/packages/react-search-tree/README.md +++ b/packages/react-search-tree/README.md @@ -139,6 +139,42 @@ const onChangeSinge=(selectd, selectedAll, isChecked)=>{ ReactDOM.render(, _mount_); ``` +### 禁用 + + +```jsx +import React, { useState, useEffect, useRef } from 'react'; +import ReactDOM from 'react-dom'; +import { SearchTree } from 'uiw'; + +const data = [ + { label: '上海市', key: 0 }, + { + label: '北京市', key: 1, + children:[ + { label: '东城区', key: 10 }, + ] + }, + { label: '成都市', key: 2 }, +] + +const Demo = () => { + + return( + + ) +} + +ReactDOM.render(, _mount_); +``` + ## 自定义空选项 diff --git a/packages/react-search-tree/src/SearchTagInput.tsx b/packages/react-search-tree/src/SearchTagInput.tsx index edc6e30f12..43375e66ed 100644 --- a/packages/react-search-tree/src/SearchTagInput.tsx +++ b/packages/react-search-tree/src/SearchTagInput.tsx @@ -136,6 +136,7 @@ function SearchTagInput(props: SearchTagInputPro setInnerIsOpen(isOpen); if (!isOpen) searchValueChange(''); }} + disabled={disabled} isOpen={innerIsOpen} menu={{newContent}} > @@ -154,6 +155,7 @@ function SearchTagInput(props: SearchTagInputPro className={`${prefixCls}-tag`} key={index} closable + disabled={disabled} color="#393E48" onClose={(e) => { e.stopPropagation(); @@ -166,7 +168,7 @@ function SearchTagInput(props: SearchTagInputPro })} (props: SearchTagInputPro placeholder={selectedOption.length ? '' : placeholder} /> - - {(selectIconType === 'close' || (selectIconType === 'loading' && loading)) && ( - - )} - + {!disabled && ( + + {(selectIconType === 'close' || (selectIconType === 'loading' && loading)) && ( + + )} + + )} diff --git a/packages/react-search-tree/src/style/index.less b/packages/react-search-tree/src/style/index.less index 81e81bc2dc..ed513df04a 100644 --- a/packages/react-search-tree/src/style/index.less +++ b/packages/react-search-tree/src/style/index.less @@ -2,6 +2,10 @@ .@{w-search-tree} { &-input-contents { + flex: 1; + min-width: 30px; + top: 1px; + input { box-shadow: none; padding: 0px;