style(SearchSelect): 增加大小尺寸样式 (#732)

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

Hide file tree

Showing 4 changed files with 110 additions and 14 deletions.
diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md
@@ -68,6 +68,68 @@ const Demo = () => {
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+## 尺寸
+
+通过 size 属性设置选择器的尺寸，提供三个尺寸参数设置。
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import ReactDOM from 'react-dom';
+import { SearchSelect,Row,Col } from 'uiw';
+
+const Demo = () => {
+  const option=[
+    { label: '小尺寸', value: 1 },
+    { label: '默认尺寸', value: 2 },
+    { label: '大尺寸', value: 3 },
+  ]
+
+  return(
+    <Row style={{ flexDirection: 'column' }}>
+      <Col>
+        <Row>
+          <SearchSelect
+            mode="multiple"
+            style={{ width: 150 }}
+            option={option}
+            value={[1]}
+            showSearch={true}
+            placeholder="请输入选择"
+            size={'small'}
+          />
+        </Row>
+      </Col>
+      <Col style={{ margin:'10px 0px' }}>
+        <Row>
+          <SearchSelect
+            mode="multiple"
+            style={{ width: 175 }}
+            option={option}
+            value={[2]}
+            showSearch={true}
+            placeholder="请输入选择"
+          />
+        </Row>
+      </Col>
+      <Col  >
+        <Row>
+          <SearchSelect
+            mode="multiple"
+            style={{ width: 200 }}
+            option={option}
+            value={[3]}
+            showSearch={true}
+            placeholder="请输入选择"
+            size={'large'}
+          />
+        </Row>
+      </Col>
+    </Row>
+  );
+};
+ReactDOM.render(<Demo />, _mount_);
+```
+
 ## 不同的value类型
 
 通`labelInValue`参数控制value类型和onChange时间返回参数的类型，设置为`true`时，`value`和`onChange`回调返回的值类型从[..., value]变成[..., { label, value}]

diff --git a/packages/react-search-select/src/index.tsx b/packages/react-search-select/src/index.tsx
@@ -11,6 +11,9 @@ import { useEffect } from 'react';
 import './style/index.less';
 
 type ValueType = string | number;
+
+const TagSize = { large: 25, default: 20, small: 17 };
+
 export interface SearchSelectProps extends IProps, DropdownProps {
   mode?: 'single' | 'multiple';
   size?: 'large' | 'default' | 'small';
@@ -262,14 +265,19 @@ export default function SearchSelect(props: SearchSelectProps) {
         style={{ width: '100%', maxWidth: 'none', ...style }}
       >
         {isMultiple ? (
-          <div className={`${prefixCls}-inner`}>
+          <div className={[`${prefixCls}-inner`, `${prefixCls}-${size}`].filter(Boolean).join(' ').trim()}>
             <div style={{ display: 'flex', flexFlow: 'wrap', width: '100%' }}>
               {isMultiple &&
                 selectedValue.slice(0, maxTagCount).map((item, index) => {
                   return (
                     <Tag
-                      style={{ height: 20, margin: 1, display: 'flex', alignItems: 'center', ...tagProps.style }}
-                      className={`${prefixCls}-tag`}
+                      style={{
+                        height: TagSize[size],
+                        margin: 1,
+                        display: 'flex',
+                        alignItems: 'center',
+                        ...tagProps.style,
+                      }}
                       key={index}
                       color="#393E48"
                       {...tagProps}

diff --git a/packages/react-search-select/src/style/index.less b/packages/react-search-select/src/style/index.less
@@ -40,7 +40,6 @@
       inset 0 1px 1px rgba(16, 22, 26, 0.2);
     box-sizing: border-box;
     background: #fff;
-    min-height: 30px;
     margin: 0 !important;
     padding: 3px 10px 3px 10px;
     vertical-align: middle;
@@ -71,11 +70,32 @@
       cursor: not-allowed;
       resize: none;
     }
+
+    &-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;
+    }
   }
+
   &-multiple-colse {
     left: 7px;
     font-size: 15px;
   }
+
   &-singe-colse {
     font-size: 15px;
   }

diff --git a/packages/react-transfer/README.md b/packages/react-transfer/README.md
@@ -43,21 +43,22 @@ function Demo() {
 ReactDOM.render(<Demo />, _mount_);
 ```
 
-## 全部选择
+## 树形节点
+
+使用 [Tree](https://uiwjs.github.io/#/components/tree) 结构作为选项节点
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx
 import React from 'react';
 import { Transfer } from 'uiw';
 
 function Demo() {
-
-  const options = [
+const options = [
     {
       label: '武汉市',
       key: 1,
       children: [
-        { label: '新洲区', key: 2 },
+        { label: '新洲区', key: 2, disabled: true },
         { label: '武昌区', key: 3 },
         {
           label: '汉南区',
@@ -72,13 +73,12 @@ function Demo() {
     }
   ];
 
-  const [value,valueSet] = React.useState([{ label: '武昌区', key: 3 }, { label: '汉南区1', key: 5 }])
+  const [value,valueSet] = React.useState([{ label: '汉南区1', key: 5 }])
 
   return (
     <Row style={{ flexDirection:'column' }} >
       <Transfer
         options={options}
-        selectedAll={true}
         value={value}
         onChange={(transfer,option)=>{
           valueSet(option)
@@ -91,20 +91,23 @@ function Demo() {
 ReactDOM.render(<Demo />, _mount_);
 ```
 
-## 树形节点
+## 全部选择
+
+将`selectedAll`设置为`true`,启用全部勾选功能
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx
 import React from 'react';
 import { Transfer } from 'uiw';
 
 function Demo() {
-const options = [
+
+  const options = [
     {
       label: '武汉市',
       key: 1,
       children: [
-        { label: '新洲区', key: 2, disabled: true },
+        { label: '新洲区', key: 2 },
         { label: '武昌区', key: 3 },
         {
           label: '汉南区',
@@ -119,12 +122,13 @@ const options = [
     }
   ];
 
-  const [value,valueSet] = React.useState([{ label: '武汉市',  key: 1 }])
+  const [value,valueSet] = React.useState([{ label: '武昌区', key: 3 }, { label: '汉南区1', key: 5 }])
 
   return (
     <Row style={{ flexDirection:'column' }} >
       <Transfer
         options={options}
+        selectedAll={true}
         value={value}
         onChange={(transfer,option)=>{
           valueSet(option)
@@ -139,6 +143,8 @@ ReactDOM.render(<Demo />, _mount_);
 
 ## 搜索选项
 
+将`showSearch`设置为`true`，启用选项搜索框
+
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx
 import React from 'react';