1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 | import PropTypes from 'prop-types';
|
7 | import React from 'react';
|
8 | import invariant from 'invariant';
|
9 | import uncontrollable from 'uncontrollable';
|
10 |
|
11 | import chainFunction from './utils/createChainedFunction';
|
12 | import ValidChildren from './utils/ValidComponentChildren';
|
13 | import ButtonGroup from './ButtonGroup';
|
14 | import ToggleButton from './ToggleButton';
|
15 |
|
16 | var propTypes = {
|
17 | |
18 |
|
19 |
|
20 |
|
21 |
|
22 | name: PropTypes.string,
|
23 |
|
24 | |
25 |
|
26 |
|
27 |
|
28 |
|
29 | value: PropTypes.any,
|
30 |
|
31 | |
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 | onChange: PropTypes.func,
|
39 |
|
40 | |
41 |
|
42 |
|
43 |
|
44 | type: PropTypes.oneOf(['checkbox', 'radio']).isRequired
|
45 | };
|
46 |
|
47 | var defaultProps = {
|
48 | type: 'radio'
|
49 | };
|
50 |
|
51 | var ToggleButtonGroup = function (_React$Component) {
|
52 | _inherits(ToggleButtonGroup, _React$Component);
|
53 |
|
54 | function ToggleButtonGroup() {
|
55 | _classCallCheck(this, ToggleButtonGroup);
|
56 |
|
57 | return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
|
58 | }
|
59 |
|
60 | ToggleButtonGroup.prototype.getValues = function getValues() {
|
61 | var value = this.props.value;
|
62 |
|
63 | return value == null ? [] : [].concat(value);
|
64 | };
|
65 |
|
66 | ToggleButtonGroup.prototype.handleToggle = function handleToggle(value) {
|
67 | var _props = this.props,
|
68 | type = _props.type,
|
69 | onChange = _props.onChange;
|
70 |
|
71 | var values = this.getValues();
|
72 | var isActive = values.indexOf(value) !== -1;
|
73 |
|
74 | if (type === 'radio') {
|
75 | if (!isActive) {
|
76 | onChange(value);
|
77 | }
|
78 | return;
|
79 | }
|
80 |
|
81 | if (isActive) {
|
82 | onChange(values.filter(function (n) {
|
83 | return n !== value;
|
84 | }));
|
85 | } else {
|
86 | onChange([].concat(values, [value]));
|
87 | }
|
88 | };
|
89 |
|
90 | ToggleButtonGroup.prototype.render = function render() {
|
91 | var _this2 = this;
|
92 |
|
93 | var _props2 = this.props,
|
94 | children = _props2.children,
|
95 | type = _props2.type,
|
96 | name = _props2.name,
|
97 | props = _objectWithoutProperties(_props2, ['children', 'type', 'name']);
|
98 |
|
99 | var values = this.getValues();
|
100 |
|
101 | !(type !== 'radio' || !!name) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'A `name` is required to group the toggle buttons when the `type` ' + 'is set to "radio"') : invariant(false) : void 0;
|
102 |
|
103 | delete props.onChange;
|
104 | delete props.value;
|
105 |
|
106 |
|
107 | return React.createElement(
|
108 | ButtonGroup,
|
109 | _extends({}, props, { 'data-toggle': 'buttons' }),
|
110 | ValidChildren.map(children, function (child) {
|
111 | var _child$props = child.props,
|
112 | value = _child$props.value,
|
113 | onChange = _child$props.onChange;
|
114 |
|
115 | var handler = function handler() {
|
116 | return _this2.handleToggle(value);
|
117 | };
|
118 |
|
119 | return React.cloneElement(child, {
|
120 | type: type,
|
121 | name: child.name || name,
|
122 | checked: values.indexOf(value) !== -1,
|
123 | onChange: chainFunction(onChange, handler)
|
124 | });
|
125 | })
|
126 | );
|
127 | };
|
128 |
|
129 | return ToggleButtonGroup;
|
130 | }(React.Component);
|
131 |
|
132 | ToggleButtonGroup.propTypes = propTypes;
|
133 | ToggleButtonGroup.defaultProps = defaultProps;
|
134 |
|
135 | var UncontrolledToggleButtonGroup = uncontrollable(ToggleButtonGroup, {
|
136 | value: 'onChange'
|
137 | });
|
138 |
|
139 | UncontrolledToggleButtonGroup.Button = ToggleButton;
|
140 |
|
141 | export default UncontrolledToggleButtonGroup; |
\ | No newline at end of file |