Skip to content

Commit 7050452

Browse files
author
liyuan-meng
committed
[Input]添加 borderRadiusSize 参数，支持设置圆角
1 parent 7ca3fa6 commit 7050452

8 files changed

Lines changed: 138 additions & 29 deletions

File tree

‎src/components/input/demos/borderRadius.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
order: 3
3+
title: 复合型输入框
4+
desc: 可前置或后置元素，一般为标签或按钮
5+
---
6+
7+
```jsx
8+
import React, { useEffect, useState } from 'react';
9+
import { Input, Icon, Radio } from 'cloud-react';
10+
import './styles/mix.less'
11+
12+
export default function InputDemo() {
13+
const [borderRadiusSize, setBorderRadiusSize] = useState('default');
14+
return (
15+
<div className="input-demo-mix-box">
16+
<Radio.Group value={borderRadiusSize} onChange={setBorderRadiusSize} style={{ marginBottom: 20 }}>
17+
<Radio value="default">圆角：default</Radio>
18+
<Radio value="medium">圆角：medium</Radio>
19+
<Radio value="large">圆角：large</Radio>
20+
</Radio.Group>
21+
<div className="input-demo-box" key={borderRadiusSize}>
22+
<Input borderRadiusSize={borderRadiusSize} hasClear placeholder="请输入" />
23+
<Input borderRadiusSize={borderRadiusSize} hasClear addonBefore={<span>http://</span>} placeholder="请输入" />
24+
<Input borderRadiusSize={borderRadiusSize} hasClear addonAfter=".com" placeholder="请输入" />
25+
<Input borderRadiusSize={borderRadiusSize} hasClear addonBefore={<span>http://</span>} addonAfter=".com"
26+
placeholder="请输入" />
27+
<Input borderRadiusSize={borderRadiusSize} prefix={<Icon className='input-prefix-icon' type="people" style={{ color: 'rgba(0,0,0,0.25)' }} />}
28+
placeholder="请输入" suffix="RMB" />
29+
<Input.Textarea borderRadiusSize={borderRadiusSize} placeholder="请输入文案，最多10个字符" style={{ width: 400 }} autoSize maxLength={10} hasCounter />
30+
</div>
31+
</div>
32+
);
33+
}
34+
```

‎src/components/input/demos/mix.md‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,17 @@ import { Input, Icon } from 'cloud-react';
1515
import './styles/mix.less'
1616

1717
export default function InputDemo() {
18-
return (
19-
<div className="input-demo-mix-box">
20-
<div className="input-demo-box">
21-
<Input size="large" hasClear addonBefore={<span>http://</span>} addonAfter=".com" placeholder="请输入" />
22-
<Input hasClear size="default" addonBefore={<span>http://</span>} addonAfter=".com" placeholder="请输入" />
23-
24-
<Input prefix={<Icon className='input-prefix-icon' type="people" />} placeholder="请输入" suffix="RMB" />
25-
</div>
26-
</div>
27-
);
18+
return (
19+
<div className="input-demo-mix-box">
20+
<div className="input-demo-box">
21+
<Input hasClear addonBefore={<span>http://</span>} placeholder="请输入" />
22+
<Input hasClear addonAfter=".com" placeholder="请输入" />
23+
<Input hasClear addonBefore={<span>http://</span>} addonAfter=".com"
24+
placeholder="请输入" />
25+
<Input prefix={<Icon className='input-prefix-icon' type="people" style={{ color: 'rgba(0,0,0,0.25)' }} />}
26+
placeholder="请输入" suffix="RMB" />
27+
</div>
28+
</div>
29+
);
2830
}
2931
```

‎src/components/input/index.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ class Input extends React.Component {
3434
onKeyDown: PropTypes.func,
3535
onEnter: PropTypes.func,
3636
loading: PropTypes.bool,
37+
borderRadiusSize: PropTypes.oneOf(['default', 'medium', 'large']),
3738
};
3839

3940
static defaultProps = {
@@ -55,6 +56,7 @@ class Input extends React.Component {
5556
onKeyDown: noop,
5657
onEnter: noop,
5758
loading: false,
59+
borderRadiusSize: 'default',
5860
};
5961

6062
static Textarea = Textarea;
@@ -284,6 +286,7 @@ class Input extends React.Component {
284286
addonAfter,
285287
addonBefore,
286288
prefix,
289+
borderRadiusSize,
287290
...others
288291
} = this.props;
289292
const { size: formSize } = this.context;
@@ -330,6 +333,7 @@ class Input extends React.Component {
330333

331334
// merge clearIcon & suffix
332335
const _suffix = this.renderSuffix();
336+
console.log(borderRadiusSize, 'borderRadiusSize');
333337

334338
// has addon content
335339
return (
@@ -342,6 +346,7 @@ class Input extends React.Component {
342346
className={classnames(className, mergedSize, {
343347
[`${_className}-focus`]: focused,
344348
[`${_className}-disabled`]: props.disabled,
349+
[`border-radius-${borderRadiusSize}`]: true,
345350
})}
346351
>
347352
<input
@@ -409,11 +414,11 @@ function InputWrapper(props) {
409414
style={style}
410415
>
411416
<InputWrapper>
412-
<Addon className={classnames(`${prefixCls}-input-addon`)}>
417+
<Addon className={classnames(`${prefixCls}-input-addon ${prefixCls}-input-prefix`)}>
413418
{addonBefore}
414419
</Addon>
415420
{children}
416-
<Addon className={classnames(`${prefixCls}-input-addon`)}>
421+
<Addon className={classnames(`${prefixCls}-input-addon ${prefixCls}-input-suffix`)}>
417422
{addonAfter}
418423
</Addon>
419424
</InputWrapper>

‎src/components/input/index.less‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
@input-prefix-cls: ~'@{prefix}-input';
99

1010
@border-radius: 3px;
11+
@border-medium-radius: 6px;
12+
@border-large-radius: 12px;
1113
@default-width: 250px;
1214

1315
@placeholder-color: @gray-6;
@@ -50,6 +52,16 @@
5052
border-radius: @border-radius;
5153
}
5254

55+
&-prefix {
56+
border-top-left-radius: @border-radius;
57+
border-bottom-left-radius: @border-radius;
58+
}
59+
60+
&-suffix {
61+
border-top-right-radius: @border-radius;
62+
border-bottom-right-radius: @border-radius;
63+
}
64+
5365
&-loading-spin {
5466
display: inline-block;
5567
width: 14px;
@@ -106,6 +118,38 @@
106118
}
107119
}
108120
}
121+
122+
&.border-radius-medium {
123+
.@{input-prefix-cls}-group {
124+
border-radius: @border-medium-radius;
125+
}
126+
127+
.@{input-prefix-cls}-prefix {
128+
border-top-left-radius: @border-medium-radius;
129+
border-bottom-left-radius: @border-medium-radius;
130+
}
131+
132+
.@{input-prefix-cls}-suffix {
133+
border-top-right-radius: @border-medium-radius;
134+
border-bottom-right-radius: @border-medium-radius;
135+
}
136+
}
137+
138+
&.border-radius-large {
139+
.@{input-prefix-cls}-group {
140+
border-radius: @border-large-radius;
141+
}
142+
143+
.@{input-prefix-cls}-prefix {
144+
border-top-left-radius: @border-large-radius;
145+
border-bottom-left-radius: @border-large-radius;
146+
}
147+
148+
.@{input-prefix-cls}-suffix {
149+
border-top-right-radius: @border-large-radius;
150+
border-bottom-right-radius: @border-large-radius;
151+
}
152+
}
109153
}
110154

111155
/* group */
@@ -168,6 +212,14 @@
168212
border-bottom-right-radius: 0px;
169213
}
170214
}
215+
216+
&.border-radius-medium {
217+
border-radius: @border-medium-radius;
218+
}
219+
220+
&.border-radius-large {
221+
border-radius: @border-large-radius;
222+
}
171223
}
172224

173225
&-prefix,
@@ -337,6 +389,22 @@
337389
background: @textarea-background;
338390
border-radius: @border-radius;
339391
}
392+
393+
&.border-radius-medium {
394+
border-radius: @border-medium-radius;
395+
396+
> textarea {
397+
border-radius: @border-medium-radius;
398+
}
399+
}
400+
401+
&.border-radius-large {
402+
border-radius: @border-large-radius;
403+
404+
> textarea {
405+
border-radius: @border-large-radius;
406+
}
407+
}
340408
}
341409

342410
&-textarea {

‎src/components/input/index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ group:
3434
| hasClear | 可以点击清除图标删除内容 | boolean | `false` |
3535
| onChange | 输入框内容变化时的回调 | function(event) | - |
3636
| onEnter | 按下键盘回车按键的回调 | function(event) | - |
37+
| borderRadiusSize | 边框圆角 `default` `medium` `large` | string | `default` |
3738

3839
`Input` 其他属性保持跟原生一致
3940

@@ -82,3 +83,6 @@ group:
8283

8384
### 搜索类输入框
8485
<embed src="@components/input/demos/search.md" />
86+
87+
### 圆角
88+
<embed src="@components/input/demos/borderRadius.md" />

‎src/components/input/textarea.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export default class Textarea extends React.PureComponent {
9898
onChange: PropTypes.func,
9999
onKeyDown: PropTypes.func,
100100
resize: PropTypes.bool,
101+
borderRadiusSize: PropTypes.oneOf(['default', 'medium', 'large']),
101102
};
102103

103104
static defaultProps = {
@@ -115,6 +116,7 @@ export default class Textarea extends React.PureComponent {
115116
onChange: noop,
116117
onKeyDown: noop,
117118
resize: false,
119+
borderRadiusSize: 'default',
118120
};
119121

120122
ref = createRef();
@@ -201,7 +203,7 @@ export default class Textarea extends React.PureComponent {
201203
render() {
202204
const { value, autoSizeStyle } = this.state;
203205
const {
204-
className, style, hasCounter, maxLength, resize, ...others
206+
className, style, hasCounter, maxLength, resize, borderRadiusSize, ...others
205207
} = this.props;
206208

207209
const classNames = classnames(`${prefixCls}-input-textarea`, className, {
@@ -224,7 +226,7 @@ export default class Textarea extends React.PureComponent {
224226
return (
225227
<div
226228
ref={this.ref}
227-
className={`${prefixCls}-input-textarea-wrapper`}
229+
className={`${prefixCls}-input-textarea-wrapper border-radius-${borderRadiusSize}`}
228230
style={wrapperStyle}
229231
>
230232
<textarea

‎src/components/select/demos/borderRadius.md‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ desc: 基本使用
1010
* desc: 自定义圆角
1111
*/
1212
import React, { useState } from 'react';
13-
import { Select } from 'cloud-react';
13+
import { Select, Radio } from 'cloud-react';
1414

1515
const Option = Select.Option;
1616

@@ -34,30 +34,24 @@ const dataList = [
3434
];
3535

3636
export default function SelectDemo() {
37+
const [borderRadiusSize, setBorderRadiusSize] = useState('default');
3738
const handleChange = (value, prevValue) => {
3839
console.log('select --- ' + value);
3940
console.log('prevSelect --- ' + prevValue);
4041
};
4142

4243
return (
4344
<div className="demo">
45+
<Radio.Group value={borderRadiusSize} onChange={setBorderRadiusSize} style={{ marginBottom: 20 }}>
46+
<Radio value="default">圆角：default</Radio>
47+
<Radio value="medium">圆角：medium</Radio>
48+
<Radio value="large">圆角：large</Radio>
49+
</Radio.Group>
4450
<Select
4551
onChange={handleChange}
4652
style={{ width: 328 }}
4753
dataSource={dataList}
48-
borderRadiusSize="default"
49-
/>
50-
<Select
51-
onChange={handleChange}
52-
style={{ width: 328 }}
53-
dataSource={dataList}
54-
borderRadiusSize="medium"
55-
/>
56-
<Select
57-
onChange={handleChange}
58-
style={{ width: 328 }}
59-
dataSource={dataList}
60-
borderRadiusSize="large"
54+
borderRadiusSize={borderRadiusSize}
6155
/>
6256
</div>
6357
);

‎src/components/select/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -674,7 +674,7 @@ Select.propTypes = {
674674
maxHeight: PropTypes.number,
675675
optionRender: PropTypes.func,
676676
selectAllText: PropTypes.string,
677-
borderRadiusSize: PropTypes.oneOf(['default', 'medium', 'large', 'circle']),
677+
borderRadiusSize: PropTypes.oneOf(['default', 'medium', 'large']),
678678
checkboxStyle: PropTypes.object,
679679
};
680680

0 commit comments

Comments
 (0)