fix(SearchTree): 修复禁用失效问题 (#699)

uiwjs · Mar 22, 2022 · 4eae674 · 4eae674
1 parent c3f50bb
commit 4eae674
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 6 deletions.
diff --git 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(<Demo />, _mount_);
 ```
 
+### 禁用
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```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(
+    <SearchTree
+      disabled={true}
+      style={{ width:300 }}
+      allowClear={true}
+      value={[{ label: '东城区', key: 10 },{ label: '成都市',  key: 2 }]}
+      options={data}
+      placeholder="请输入选择"
+    />
+  )
+}
+
+ReactDOM.render(<Demo />, _mount_);
+```
+
 ## 自定义空选项
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->

diff --git a/packages/react-search-tree/src/SearchTagInput.tsx b/packages/react-search-tree/src/SearchTagInput.tsx
@@ -136,6 +136,7 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
         setInnerIsOpen(isOpen);
         if (!isOpen) searchValueChange('');
       }}
+      disabled={disabled}
       isOpen={innerIsOpen}
       menu={<Card bodyStyle={emptyOption === true ? { padding: 0 } : undefined}>{newContent}</Card>}
     >
@@ -154,6 +155,7 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
                   className={`${prefixCls}-tag`}
                   key={index}
                   closable
+                  disabled={disabled}
                   color="#393E48"
                   onClose={(e) => {
                     e.stopPropagation();
@@ -166,7 +168,7 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
             })}
             <Input
               ref={inputRef}
-              style={{ flex: 1, minWidth: 30 }}
+              style={{}}
               className={`${prefixCls}-input-contents`}
               size={size}
               disabled={disabled}
@@ -176,11 +178,17 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
               placeholder={selectedOption.length ? '' : placeholder}
             />
           </div>
-          <span style={{ height: 25, width: 14 }} className={`${prefixCls}-close-tag-contents`}>
-            {(selectIconType === 'close' || (selectIconType === 'loading' && loading)) && (
-              <Icon type={selectIconType} spin={loading && selectIconType === 'loading'} onClick={resetSelectedValue} />
-            )}
-          </span>
+          {!disabled && (
+            <span style={{ height: 25, width: 14 }} className={`${prefixCls}-close-tag-contents`}>
+              {(selectIconType === 'close' || (selectIconType === 'loading' && loading)) && (
+                <Icon
+                  type={selectIconType}
+                  spin={loading && selectIconType === 'loading'}
+                  onClick={resetSelectedValue}
+                />
+              )}
+            </span>
+          )}
         </div>
       </div>
     </Dropdown>

diff --git 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;