Skip to content

Commit 6c78a20

Browse files
chetoncheton
committed
Add the dropdownToggle property that can apply styles for use in a Dropdown
1 parent 88e00fa commit 6c78a20

File tree

1 file changed

+109
-96
lines changed

1 file changed

+109
-96
lines changed

‎src/Button.jsx‎

Lines changed: 109 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,120 @@
11
import classNames from 'classnames';
2-
import React, { PropTypes } from 'react';
2+
import React, { Component, PropTypes } from 'react';
3+
import shallowCompare from 'react-addons-shallow-compare';
34
import ButtonDropdown from './ButtonDropdown';
45
import styles from './index.styl';
56

6-
const Button = (props) => {
7-
const {
8-
className,
9-
componentClass,
10-
type,
11-
btnSize,
12-
btnStyle,
13-
active,
14-
hover,
15-
focus,
16-
disabled,
17-
block,
18-
iconOnly,
19-
dropdown,
20-
...others
21-
} = props;
22-
const Component = componentClass;
7+
class Button extends Component {
8+
static propTypes = {
9+
componentClass: PropTypes.oneOfType([
10+
PropTypes.func,
11+
PropTypes.string
12+
]),
13+
type: PropTypes.oneOf([
14+
'button',
15+
'reset',
16+
'submit'
17+
]),
18+
btnSize: PropTypes.oneOf([
19+
'lg',
20+
'md',
21+
'sm',
22+
'xs',
23+
'large',
24+
'medium',
25+
'small',
26+
'extra-small'
27+
]),
28+
btnStyle: PropTypes.oneOf([
29+
'default',
30+
'primary',
31+
'danger',
32+
'emphasis', // alias of "danger"
33+
'border',
34+
'flat', // alias of "border"
35+
'link'
36+
]),
37+
active: PropTypes.bool,
38+
hover: PropTypes.bool,
39+
focus: PropTypes.bool,
40+
disabled: PropTypes.bool,
41+
block: PropTypes.bool,
42+
iconOnly: PropTypes.bool,
43+
dropdown: PropTypes.bool,
2344

24-
if (dropdown) {
25-
return <ButtonDropdown {...props} />;
45+
// Apply styles for use in a Dropdown.
46+
// This prop will be set automatically when the Button is used inside a Dropdown.
47+
dropdownToggle: PropTypes.bool
48+
};
49+
50+
static defaultProps = {
51+
componentClass: 'button',
52+
type: 'button',
53+
btnSize: 'md',
54+
btnStyle: 'default',
55+
active: false,
56+
hover: false,
57+
focus: false,
58+
disabled: false,
59+
block: false,
60+
iconOnly: false,
61+
dropdown: false,
62+
dropdownToggle: false
63+
};
64+
65+
shouldComponentUpdate(nextProps, nextState) {
66+
return shallowCompare(this, nextProps, nextState);
2667
}
68+
render() {
69+
const {
70+
className,
71+
componentClass: Component,
72+
type,
73+
btnSize,
74+
btnStyle,
75+
active,
76+
hover,
77+
focus,
78+
disabled,
79+
block,
80+
iconOnly,
81+
dropdown,
82+
dropdownToggle,
83+
...props
84+
} = this.props;
2785

28-
return (
29-
<Component
30-
{...others}
31-
type={type}
32-
className={classNames(
33-
className,
34-
styles.btn,
35-
{ [styles['btn-lg']]: btnSize === 'large' || btnSize === 'lg' },
36-
{ [styles['btn-md']]: btnSize === 'medium' || btnSize === 'md' },
37-
{ [styles['btn-sm']]: btnSize === 'small' || btnSize === 'sm' },
38-
{ [styles['btn-xs']]: btnSize === 'extra-small' || btnSize === 'xs' },
39-
{ [styles['btn-default']]: btnStyle === 'default' },
40-
{ [styles['btn-primary']]: btnStyle === 'primary' },
41-
{ [styles['btn-danger']]: btnStyle === 'danger' || btnStyle === 'emphasis' },
42-
{ [styles['btn-border']]: btnStyle === 'border' || btnStyle === 'flat' },
43-
{ [styles['btn-link']]: btnStyle === 'link' },
44-
{ [styles['btn-block']]: block },
45-
{ [styles['btn-icon-only']]: iconOnly },
46-
{ [styles.hover]: hover },
47-
{ [styles.active]: active },
48-
{ [styles.focus]: focus }
49-
)}
50-
disabled={!!disabled}
51-
/>
52-
);
53-
};
86+
if (dropdown) {
87+
return <ButtonDropdown {...this.props} />;
88+
}
5489

55-
Button.propTypes = {
56-
componentClass: PropTypes.oneOfType([
57-
PropTypes.element,
58-
PropTypes.string
59-
]),
60-
type: PropTypes.oneOf([
61-
'button',
62-
'reset',
63-
'submit'
64-
]),
65-
btnSize: PropTypes.oneOf([
66-
'lg',
67-
'md',
68-
'sm',
69-
'xs',
70-
'large',
71-
'medium',
72-
'small',
73-
'extra-small'
74-
]),
75-
btnStyle: PropTypes.oneOf([
76-
'default',
77-
'primary',
78-
'danger',
79-
'emphasis', // alias of "danger"
80-
'border',
81-
'flat', // alias of "border"
82-
'link'
83-
]),
84-
active: PropTypes.bool,
85-
hover: PropTypes.bool,
86-
focus: PropTypes.bool,
87-
disabled: PropTypes.bool,
88-
block: PropTypes.bool,
89-
iconOnly: PropTypes.bool,
90-
dropdown: PropTypes.bool
91-
};
90+
const classes = {
91+
[styles.btn]: true,
92+
[styles.btnLg]: btnSize === 'large' || btnSize === 'lg',
93+
[styles.btnMd]: btnSize === 'medium' || btnSize === 'md',
94+
[styles.btnSm]: btnSize === 'small' || btnSize === 'sm',
95+
[styles.btnXs]: btnSize === 'extra-small' || btnSize === 'xs',
96+
[styles.btnDefault]: btnStyle === 'default',
97+
[styles.btnPrimary]: btnStyle === 'primary',
98+
[styles.btnDanger]: btnStyle === 'danger' || btnStyle === 'emphasis',
99+
[styles.btnBorder]: btnStyle === 'border' || btnStyle === 'flat',
100+
[styles.btnLink]: btnStyle === 'link',
101+
[styles.btnBlock]: block,
102+
[styles.btnIconOnly]: iconOnly,
103+
[styles.hover]: hover,
104+
[styles.active]: active,
105+
[styles.focus]: focus,
106+
[styles.dropdownToggle]: dropdownToggle
107+
};
92108

93-
Button.defaultProps = {
94-
componentClass: 'button',
95-
type: 'button',
96-
btnSize: 'md',
97-
btnStyle: 'default',
98-
active: false,
99-
hover: false,
100-
focus: false,
101-
disabled: false,
102-
block: false,
103-
iconOnly: false,
104-
dropdown: false
105-
};
109+
return (
110+
<Component
111+
{...props}
112+
type={type}
113+
className={classNames(className, classes)}
114+
disabled={disabled}
115+
/>
116+
);
117+
}
118+
}
106119

107120
export default Button;

0 commit comments

Comments
 (0)