Skip to content

Commit c229cf4

Browse files
author
Tina C Lin (RD-TW)
committed
Adjust buttons style of examples. Dropdown buttons add “noOptionsText” property for displaying the placeholder when there are no any options.
1 parent 1c95193 commit c229cf4

File tree

8 files changed

+183
-60
lines changed

8 files changed

+183
-60
lines changed

‎README.md‎

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -173,19 +173,17 @@ npm install --save @trendmicro/react-buttons
173173

174174
### Dropdown Buttons
175175

176-
const options = [
177-
{ label: 'Action', value: 'v1' },
178-
{ label: 'Another action', value: 'v2' },
179-
{ label: 'Something else here', value: 'v3' }
180-
];
181-
182176
#### Single
183177

184178
```js
185179
<Button
186180
dropdown
187181
placeholder="Select..."
188-
options={options}
182+
options={[
183+
{ label: 'Action', value: 'v1' },
184+
{ label: 'Another action', value: 'v2' },
185+
{ label: 'Something else here', value: 'v3' }
186+
]}
189187
onChange={(selectedOption) => {
190188
if (selectedOption) {
191189
console.log('label =' + selectedOption.label + ', value = ' + selectedOption.value);
@@ -201,7 +199,26 @@ const options = [
201199
dropdown
202200
dropdownStyle="split"
203201
placeholder="Select..."
204-
options={options}
202+
options={[
203+
{ label: 'Action', value: 'v1' },
204+
{ label: 'Another action', value: 'v2' },
205+
{ label: 'Something else here', value: 'v3' }
206+
]}
207+
/>
208+
```
209+
210+
#### Fixed width
211+
```js
212+
<Button
213+
dropdown
214+
placeholder="Select..."
215+
options={[
216+
{ label: 'Action', value: 'v1' },
217+
{ label: 'Another action', value: 'v2' },
218+
{ label: 'Something else here', value: 'v3' }
219+
]}
220+
value="v1"
221+
fixedWidth={true}
205222
/>
206223
```
207224

@@ -211,7 +228,11 @@ const options = [
211228
<Button
212229
dropdown
213230
dropdownStyle="text"
214-
options={options}
231+
options={[
232+
{ label: 'Action', value: 'v1' },
233+
{ label: 'Another action', value: 'v2' },
234+
{ label: 'Something else here', value: 'v3' }
235+
]}
215236
>
216237
All Devices
217238
</Button>
@@ -223,7 +244,11 @@ const options = [
223244
<Button
224245
dropdown
225246
dropdownStyle="text"
226-
options={options}
247+
options={[
248+
{ label: 'Action', value: 'v1' },
249+
{ label: 'Another action', value: 'v2' },
250+
{ label: 'Something else here', value: 'v3' }
251+
]}
227252
customedValueRenderer={(option) => {
228253
return (
229254
<div>

‎examples/DropdownButtons.jsx‎

Lines changed: 47 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@ import React from 'react';
22
import { Button } from '../src';
33

44
export default () => {
5-
const options = [
6-
{ label: 'Action', value: 'v1' },
7-
{ label: 'Another action', value: 'v2' },
8-
{ label: 'Something else here', value: 'v3' }
9-
];
105
return (
116
<div>
127
<h4>Drop-down Buttons</h4>
@@ -16,40 +11,73 @@ export default () => {
1611
<Button
1712
dropdown
1813
placeholder="Select..."
19-
options={options}
14+
options={[
15+
{ label: 'Action', value: 'v1' },
16+
{ label: 'Another action', value: 'v2' },
17+
{ label: 'Something else here', value: 'v3' }
18+
]}
2019
onChange={(selectedOption) => {
2120
if (selectedOption) {
2221
console.log('label =' + selectedOption.label + ', value = ' + selectedOption.value);
2322
}
2423
}}
2524
/>
26-
<br /><br />
27-
25+
</div>
26+
<div>
2827
<p><strong>Split</strong></p>
2928
<Button
3029
dropdown
3130
dropdownStyle="split"
3231
placeholder="Select..."
33-
options={options}
32+
options={[
33+
{ label: 'Action', value: 'v1' },
34+
{ label: 'Another action', value: 'v2' },
35+
{ label: 'Something else here', value: 'v3' }
36+
]}
3437
value="v1"
3538
/>
36-
<br /><br />
37-
39+
</div>
40+
<br /><br />
41+
<div>
42+
<p><strong>Fixed width</strong></p>
43+
<Button
44+
dropdown
45+
placeholder="Select..."
46+
options={[
47+
{ label: 'Action', value: 'v1' },
48+
{ label: 'Another action', value: 'v2' },
49+
{ label: 'Something else here', value: 'v3' }
50+
]}
51+
value="v1"
52+
fixedWidth={true}
53+
/>
54+
</div>
55+
<br /><br />
56+
<div>
3857
<p><strong>Text</strong></p>
3958
<Button
4059
dropdown
4160
dropdownStyle="text"
42-
options={options}
61+
options={[
62+
{ label: 'Action', value: 'v1' },
63+
{ label: 'Another action', value: 'v2' },
64+
{ label: 'Something else here', value: 'v3' }
65+
]}
4366
>
4467
All Devices
4568
</Button>
46-
<br /><br />
47-
69+
</div>
70+
<div>
4871
<p><strong>Icon</strong></p>
4972
<Button
5073
dropdown
5174
dropdownStyle="text"
52-
options={options}
75+
options={[
76+
{ label: 'Action', value: 'v1' },
77+
{ label: 'Another action', value: 'v2' },
78+
{ label: 'Something else here', value: 'v3' }
79+
]}
80+
value="v1"
5381
customedValueRenderer={(option) => {
5482
return (
5583
<div>
@@ -58,10 +86,10 @@ export default () => {
5886
</div>
5987
);
6088
}}
61-
>
62-
All Devices
63-
</Button>
64-
89+
/>
90+
</div>
91+
<br /><br />
92+
<div>
6593
<p><strong>Sizes</strong></p>
6694
<Button btnSize="large" dropdown>Large</Button>
6795
<Button btnSize="medium" dropdown>Default</Button>

‎examples/index.html‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,6 @@
2525
text-align: left;
2626
margin: 10px;
2727
}
28-
#container > div > div > div {
29-
border: 1px solid #d8d8d8;
30-
padding: 0 16px 16px 16px;
31-
background-color: #fff;
32-
margin-top: 10px;
33-
}
34-
#container h4 {
35-
line-height: 52px;
36-
}
3728
</style>
3829
</head>
3930
<body>

‎examples/index.jsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3+
import classNames from 'classnames';
34
import ButtonStyles from './ButtonStyles';
45
import ButtonSizes from './ButtonSizes';
56
import FullWidthButtons from './FullWidthButtons';
67
import ButtonStates from './ButtonStates';
78
import ButtonGroup from './ButtonGroups';
89
import IconButtons from './IconButtons';
910
import DropdownButtons from './DropdownButtons';
11+
import styles from './index.styl';
1012

1113
class App extends React.Component {
1214
render() {
1315
return (
14-
<div className="row">
16+
<div
17+
className={classNames(
18+
'row',
19+
styles.container
20+
)}
21+
>
1522
<div className="col-sm-12">
1623
<ButtonStyles />
1724
</div>
18-
<div className="col-sm-12 col-md-6 col-lg-4">
25+
<div
26+
className={classNames(
27+
'col-sm-12 col-md-6 col-lg-4',
28+
styles['button-sizes']
29+
)}
30+
>
1931
<ButtonSizes />
2032
</div>
2133
<div className="col-sm-12 col-md-6 col-lg-4">
@@ -30,7 +42,12 @@ class App extends React.Component {
3042
<div className="col-sm-12 col-md-6 col-lg-4">
3143
<IconButtons />
3244
</div>
33-
<div className="col-sm-12 col-md-6 col-lg-4">
45+
<div
46+
className={classNames(
47+
'col-sm-12 col-md-6 col-lg-4',
48+
styles['dropdown-buttons']
49+
)}
50+
>
3451
<DropdownButtons />
3552
</div>
3653
</div>

‎examples/index.styl‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.container {
2+
> div > div {
3+
border: 1px solid #d8d8d8;
4+
padding: 0 16px 16px 16px;
5+
background-color: #fff;
6+
margin-top: 10px;
7+
}
8+
h4 {
9+
line-height: 52px;
10+
}
11+
}
12+
13+
.button-sizes {
14+
button {
15+
width: 90px;
16+
}
17+
}
18+
19+
.dropdown-buttons {
20+
> div > div {
21+
display: inline-block;
22+
margin-right: 20px;
23+
}
24+
}

‎src/Button.jsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,7 @@ Button.defaultProps = {
119119
dropdown: false,
120120
iconOnly: false,
121121
btnSize: 'md',
122-
btnStyle: 'default',
123-
dropdownStyle: 'single',
124-
fixedWidth: false
122+
btnStyle: 'default'
125123
};
126124

127125
export default Button;

‎src/ButtonDropdown.jsx‎

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -293,18 +293,34 @@ class ButtonDropdown extends Component {
293293
if (!this.props.dropdown || this.props.disabled) {
294294
return null;
295295
}
296-
const { isReady } = this.state;
297-
return (
298-
<ul
299-
ref="menu"
300-
className={classNames(
301-
styles['dropdown-menu'],
302-
{ [styles.ready]: isReady }
303-
)}
304-
>
305-
{this.renderMenuOptions()}
306-
</ul>
307-
);
296+
const { isReady, options } = this.state;
297+
if (options && options.length) {
298+
return (
299+
<ul
300+
ref="menu"
301+
className={classNames(
302+
styles['dropdown-menu'],
303+
{ [styles.ready]: isReady }
304+
)}
305+
>
306+
{this.renderMenuOptions()}
307+
</ul>
308+
);
309+
} else if (this.props.noOptionsText) {
310+
return (
311+
<div
312+
ref="menu"
313+
className={classNames(
314+
styles['dropdown-nooptions'],
315+
{ [styles.ready]: isReady }
316+
)}
317+
>
318+
{this.props.noOptionsText}
319+
</div>
320+
);
321+
} else {
322+
return null;
323+
}
308324
}
309325

310326
renderValue () {
@@ -437,11 +453,25 @@ ButtonDropdown.propTypes = {
437453
value: PropTypes.any, // initial field value
438454
options: PropTypes.array, // array of options
439455
placeholder: PropTypes.string, // field placeholder, displayed when there's no value
456+
noOptionsText: PropTypes.stringOrNode, // text displayed when there are no any options
440457
fixedWidth: PropTypes.bool, // the width of dropdown and menu are consistent
441458
customedValueRenderer: React.PropTypes.func, // customedValueRenderer: function (option) {}
442459
customedOptionRenderer: React.PropTypes.func, // renders a custom menu with options
443460
onChange: PropTypes.func // onChange handler: function (newValue) {}
444461
};
445-
462+
ButtonDropdown.defaultProps = {
463+
hover: false,
464+
active: false,
465+
focus: false,
466+
disabled: false,
467+
block: false,
468+
dropdown: true,
469+
iconOnly: false,
470+
btnSize: 'md',
471+
btnStyle: 'default',
472+
dropdownStyle: 'single',
473+
fixedWidth: false,
474+
noOptionsText: 'No options found'
475+
};
446476

447477
export default ButtonDropdown;

‎src/index.styl‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -671,7 +671,8 @@ input[type="button"] {
671671
}
672672
}
673673

674-
.dropdown-menu {
674+
.dropdown-menu,
675+
.dropdown-nooptions {
675676
position: absolute;
676677
top: 100%;
677678
left: 0;
@@ -713,9 +714,18 @@ input[type="button"] {
713714
}
714715
}
715716

717+
.dropdown-nooptions {
718+
white-space: nowrap;
719+
padding: 8px;
720+
color: #999;
721+
}
722+
716723
&.dropup {
717-
.dropdown-menu.ready {
718-
display: block;
724+
.dropdown-menu,
725+
.dropdown-nooptions {
726+
&.ready {
727+
display: block;
728+
}
719729
}
720730
}
721731

0 commit comments

Comments
 (0)