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