Skip to content

Commit 0dd75b3

Browse files
authoredApr 1, 2022
style(SearchSelect): 增加大小尺寸样式 (#732)
1 parent d05ec7e commit 0dd75b3

File tree

4 files changed

+110
-14
lines changed

4 files changed

+110
-14
lines changed
 

‎packages/react-search-select/README.md

+62
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,68 @@ const Demo = () => {
6868
ReactDOM.render(<Demo />, _mount_);
6969
```
7070

71+
## 尺寸
72+
73+
通过 size 属性设置选择器的尺寸,提供三个尺寸参数设置。
74+
75+
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
76+
```jsx
77+
import ReactDOM from 'react-dom';
78+
import { SearchSelect,Row,Col } from 'uiw';
79+
80+
const Demo = () => {
81+
const option=[
82+
{ label: '小尺寸', value: 1 },
83+
{ label: '默认尺寸', value: 2 },
84+
{ label: '大尺寸', value: 3 },
85+
]
86+
87+
return(
88+
<Row style={{ flexDirection: 'column' }}>
89+
<Col>
90+
<Row>
91+
<SearchSelect
92+
mode="multiple"
93+
style={{ width: 150 }}
94+
option={option}
95+
value={[1]}
96+
showSearch={true}
97+
placeholder="请输入选择"
98+
size={'small'}
99+
/>
100+
</Row>
101+
</Col>
102+
<Col style={{ margin:'10px 0px' }}>
103+
<Row>
104+
<SearchSelect
105+
mode="multiple"
106+
style={{ width: 175 }}
107+
option={option}
108+
value={[2]}
109+
showSearch={true}
110+
placeholder="请输入选择"
111+
/>
112+
</Row>
113+
</Col>
114+
<Col >
115+
<Row>
116+
<SearchSelect
117+
mode="multiple"
118+
style={{ width: 200 }}
119+
option={option}
120+
value={[3]}
121+
showSearch={true}
122+
placeholder="请输入选择"
123+
size={'large'}
124+
/>
125+
</Row>
126+
</Col>
127+
</Row>
128+
);
129+
};
130+
ReactDOM.render(<Demo />, _mount_);
131+
```
132+
71133
## 不同的value类型
72134

73135
`labelInValue`参数控制value类型和onChange时间返回参数的类型,设置为`true`时,`value``onChange`回调返回的值类型从[..., value]变成[..., { label, value}]

‎packages/react-search-select/src/index.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import { useEffect } from 'react';
1111
import './style/index.less';
1212

1313
type ValueType = string | number;
14+
15+
const TagSize = { large: 25, default: 20, small: 17 };
16+
1417
export interface SearchSelectProps extends IProps, DropdownProps {
1518
mode?: 'single' | 'multiple';
1619
size?: 'large' | 'default' | 'small';
@@ -262,14 +265,19 @@ export default function SearchSelect(props: SearchSelectProps) {
262265
style={{ width: '100%', maxWidth: 'none', ...style }}
263266
>
264267
{isMultiple ? (
265-
<div className={`${prefixCls}-inner`}>
268+
<div className={[`${prefixCls}-inner`, `${prefixCls}-${size}`].filter(Boolean).join(' ').trim()}>
266269
<div style={{ display: 'flex', flexFlow: 'wrap', width: '100%' }}>
267270
{isMultiple &&
268271
selectedValue.slice(0, maxTagCount).map((item, index) => {
269272
return (
270273
<Tag
271-
style={{ height: 20, margin: 1, display: 'flex', alignItems: 'center', ...tagProps.style }}
272-
className={`${prefixCls}-tag`}
274+
style={{
275+
height: TagSize[size],
276+
margin: 1,
277+
display: 'flex',
278+
alignItems: 'center',
279+
...tagProps.style,
280+
}}
273281
key={index}
274282
color="#393E48"
275283
{...tagProps}

‎packages/react-search-select/src/style/index.less

+21-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
inset 0 1px 1px rgba(16, 22, 26, 0.2);
4141
box-sizing: border-box;
4242
background: #fff;
43-
min-height: 30px;
4443
margin: 0 !important;
4544
padding: 3px 10px 3px 10px;
4645
vertical-align: middle;
@@ -71,11 +70,32 @@
7170
cursor: not-allowed;
7271
resize: none;
7372
}
73+
74+
&-inner-small {
75+
height: 20px;
76+
}
77+
78+
&-inner-large {
79+
height: 30px;
80+
}
81+
82+
.w-input-small .w-input-inner {
83+
height: 16px;
84+
font-size: 10px;
85+
padding: 0px;
86+
}
87+
88+
.w-input-large .w-input-inner {
89+
// line-height:0px !important;
90+
height: 28px;
91+
}
7492
}
93+
7594
&-multiple-colse {
7695
left: 7px;
7796
font-size: 15px;
7897
}
98+
7999
&-singe-colse {
80100
font-size: 15px;
81101
}

‎packages/react-transfer/README.md

+16-10
Original file line numberDiff line numberDiff line change
@@ -43,21 +43,22 @@ function Demo() {
4343
ReactDOM.render(<Demo />, _mount_);
4444
```
4545

46-
## 全部选择
46+
## 树形节点
47+
48+
使用 [Tree](https://uiwjs.github.io/#/components/tree) 结构作为选项节点
4749

4850
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
4951
```jsx
5052
import React from 'react';
5153
import { Transfer } from 'uiw';
5254

5355
function Demo() {
54-
55-
const options = [
56+
const options = [
5657
{
5758
label: '武汉市',
5859
key: 1,
5960
children: [
60-
{ label: '新洲区', key: 2 },
61+
{ label: '新洲区', key: 2, disabled: true },
6162
{ label: '武昌区', key: 3 },
6263
{
6364
label: '汉南区',
@@ -72,13 +73,12 @@ function Demo() {
7273
}
7374
];
7475

75-
const [value,valueSet] = React.useState([{ label: '武昌区', key: 3 }, { label: '汉南区1', key: 5 }])
76+
const [value,valueSet] = React.useState([{ label: '汉南区1', key: 5 }])
7677

7778
return (
7879
<Row style={{ flexDirection:'column' }} >
7980
<Transfer
8081
options={options}
81-
selectedAll={true}
8282
value={value}
8383
onChange={(transfer,option)=>{
8484
valueSet(option)
@@ -91,20 +91,23 @@ function Demo() {
9191
ReactDOM.render(<Demo />, _mount_);
9292
```
9393

94-
## 树形节点
94+
## 全部选择
95+
96+
`selectedAll`设置为`true`,启用全部勾选功能
9597

9698
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
9799
```jsx
98100
import React from 'react';
99101
import { Transfer } from 'uiw';
100102

101103
function Demo() {
102-
const options = [
104+
105+
const options = [
103106
{
104107
label: '武汉市',
105108
key: 1,
106109
children: [
107-
{ label: '新洲区', key: 2, disabled: true },
110+
{ label: '新洲区', key: 2 },
108111
{ label: '武昌区', key: 3 },
109112
{
110113
label: '汉南区',
@@ -119,12 +122,13 @@ const options = [
119122
}
120123
];
121124

122-
const [value,valueSet] = React.useState([{ label: '武汉市', key: 1 }])
125+
const [value,valueSet] = React.useState([{ label: '武昌区', key: 3 }, { label: '汉南区1', key: 5 }])
123126

124127
return (
125128
<Row style={{ flexDirection:'column' }} >
126129
<Transfer
127130
options={options}
131+
selectedAll={true}
128132
value={value}
129133
onChange={(transfer,option)=>{
130134
valueSet(option)
@@ -139,6 +143,8 @@ ReactDOM.render(<Demo />, _mount_);
139143

140144
## 搜索选项
141145

146+
`showSearch`设置为`true`,启用选项搜索框
147+
142148
<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
143149
```jsx
144150
import React from 'react';

0 commit comments

Comments
 (0)
Please sign in to comment.