style(SearchTree): 增加大小尺寸样式&增加示例文档 (#733)

uiwjs · Apr 1, 2022 · c89cd0c · c89cd0c
1 parent 0dd75b3
commit c89cd0c
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/packages/react-search-tree/README.md b/packages/react-search-tree/README.md
@@ -118,6 +118,47 @@ 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 {  SearchTree } from 'uiw';
+
+const Demo = () => {
+
+const data = [
+    { label: '小尺寸', key: 1 },
+    { label: '默认尺寸', key: 2 },
+    { label: '大尺寸', key: 3 },
+  ]
+
+  return(
+    <>
+      <SearchTree
+        style={{ width: 150 }}
+        value={[{ label: '小尺寸', key: 1 }]}
+        options={data}
+        size="small"
+      />
+      <SearchTree
+        style={{ width: 175, marginTop: 10 }}
+        value={[{ label: '默认尺寸', key: 2 }]}
+        options={data}
+      />
+      <SearchTree
+        style={{ width: 200, marginTop: 10 }}
+        value={[{ label: '大尺寸', key: 3 }]}
+        options={data}
+        size="large"
+      />
+    </>
+  )
+}
+
+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
@@ -8,6 +8,8 @@ import Empty from '@uiw/react-empty';
 import { IProps } from '@uiw/utils';
 import './style/index.less';
 
+const TagSize = { large: 25, default: 20, small: 17 };
+
 export interface DropContent<V> {
   values: Array<V>;
   onSelected?: (selectedAll: Array<V>, selectd: V, isChecked: boolean) => void;
@@ -146,14 +148,14 @@ function SearchTagInput<V extends SearchTagInputOption>(props: SearchTagInputPro
         onMouseOver={() => renderSelectIcon('enter')}
         onMouseLeave={() => renderSelectIcon('leave')}
         onClick={() => inputRef.current?.focus()}
-        style={{ minWidth: 200, maxWidth: 'none', ...style }}
+        style={{ minWidth: style?.width || 200, maxWidth: 'none', ...style }}
       >
-        <div className={`${prefixCls}-inner`}>
+        <div className={[`${prefixCls}-inner`, `${prefixCls}-${size}`].filter(Boolean).join(' ').trim()}>
           <div style={{ display: 'flex', flexFlow: 'wrap', width: '100%' }}>
             {selectedOption.map((item, index) => {
               return (
                 <Tag
-                  style={{ height: 20, margin: 1, display: 'flex', alignItems: 'center' }}
+                  style={{ height: TagSize[size], margin: 1, display: 'flex', alignItems: 'center' }}
                   className={`${prefixCls}-tag`}
                   key={index}
                   closable

diff --git a/packages/react-search-tree/src/style/index.less b/packages/react-search-tree/src/style/index.less
@@ -73,5 +73,24 @@
       display: flex;
       align-content: center;
     }
+
+    &-inner-small {
+      height: 20px;
+    }
+
+    &-inner-large {
+      height: 30px;
+    }
+
+    .w-input-small .w-input-inner {
+      height: 16px;
+      font-size: 10px;
+      padding: 0px;
+    }
+
+    .w-input-large .w-input-inner {
+      // line-height:0px !important;
+      height: 28px;
+    }
   }
 }