1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _typeof from 'babel-runtime/helpers/typeof';
|
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 |
|
7 | var _class, _temp;
|
8 |
|
9 | import React, { Component } from 'react';
|
10 | import PropTypes from 'prop-types';
|
11 | import classnames from 'classnames';
|
12 | import { polyfill } from 'react-lifecycles-compat';
|
13 | import { obj } from '../util';
|
14 | import Checkbox from './checkbox';
|
15 |
|
16 | var pickOthers = obj.pickOthers;
|
17 |
|
18 |
|
19 |
|
20 | var CheckboxGroup = (_temp = _class = function (_Component) {
|
21 | _inherits(CheckboxGroup, _Component);
|
22 |
|
23 | function CheckboxGroup(props) {
|
24 | _classCallCheck(this, CheckboxGroup);
|
25 |
|
26 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
27 |
|
28 | var value = [];
|
29 | if ('value' in props) {
|
30 | value = props.value;
|
31 | } else if ('defaultValue' in props) {
|
32 | value = props.defaultValue;
|
33 | }
|
34 | if (!Array.isArray(value)) {
|
35 | if (value === null || value === undefined) {
|
36 | value = [];
|
37 | } else {
|
38 | value = [value];
|
39 | }
|
40 | }
|
41 | _this.state = {
|
42 | value: [].concat(value)
|
43 | };
|
44 |
|
45 | _this.onChange = _this.onChange.bind(_this);
|
46 | return _this;
|
47 | }
|
48 |
|
49 | CheckboxGroup.prototype.getChildContext = function getChildContext() {
|
50 | return {
|
51 | __group__: true,
|
52 | onChange: this.onChange,
|
53 | selectedValue: this.state.value,
|
54 | disabled: this.props.disabled
|
55 | };
|
56 | };
|
57 |
|
58 | CheckboxGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) {
|
59 | if ('value' in nextProps) {
|
60 | var value = nextProps.value;
|
61 |
|
62 | if (!Array.isArray(value)) {
|
63 | if (value === null || value === undefined) {
|
64 | value = [];
|
65 | } else {
|
66 | value = [value];
|
67 | }
|
68 | }
|
69 |
|
70 | return { value: value };
|
71 | }
|
72 |
|
73 | return null;
|
74 | };
|
75 |
|
76 | CheckboxGroup.prototype.onChange = function onChange(currentValue, e) {
|
77 | var value = this.state.value;
|
78 |
|
79 | var index = value.indexOf(currentValue);
|
80 | var valTemp = [].concat(value);
|
81 |
|
82 | if (index === -1) {
|
83 | valTemp.push(currentValue);
|
84 | } else {
|
85 | valTemp.splice(index, 1);
|
86 | }
|
87 |
|
88 | if (!('value' in this.props)) {
|
89 | this.setState({ value: valTemp });
|
90 | }
|
91 | this.props.onChange(valTemp, e);
|
92 | };
|
93 |
|
94 | CheckboxGroup.prototype.render = function render() {
|
95 | var _this2 = this,
|
96 | _classnames;
|
97 |
|
98 | var _props = this.props,
|
99 | className = _props.className,
|
100 | style = _props.style,
|
101 | prefix = _props.prefix,
|
102 | disabled = _props.disabled,
|
103 | direction = _props.direction,
|
104 | rtl = _props.rtl,
|
105 | isPreview = _props.isPreview,
|
106 | renderPreview = _props.renderPreview;
|
107 |
|
108 | var others = pickOthers(CheckboxGroup.propTypes, this.props);
|
109 |
|
110 |
|
111 | var children = void 0;
|
112 | var previewed = [];
|
113 | if (this.props.children) {
|
114 | children = React.Children.map(this.props.children, function (child) {
|
115 | if (!React.isValidElement(child)) {
|
116 | return child;
|
117 | }
|
118 | var checked = _this2.state.value && _this2.state.value.indexOf(child.props.value) > -1;
|
119 |
|
120 | if (checked) {
|
121 | previewed.push({
|
122 | label: child.props.children,
|
123 | value: child.props.value
|
124 | });
|
125 | }
|
126 |
|
127 | return React.cloneElement(child, child.props.rtl === undefined ? { rtl: rtl } : null);
|
128 | });
|
129 | } else {
|
130 | children = this.props.dataSource.map(function (item, index) {
|
131 | var option = item;
|
132 | if ((typeof item === 'undefined' ? 'undefined' : _typeof(item)) !== 'object') {
|
133 | option = {
|
134 | label: item,
|
135 | value: item,
|
136 | disabled: disabled
|
137 | };
|
138 | }
|
139 | var checked = _this2.state.value && _this2.state.value.indexOf(option.value) > -1;
|
140 |
|
141 | if (checked) {
|
142 | previewed.push({
|
143 | label: option.label,
|
144 | value: option.value
|
145 | });
|
146 | }
|
147 |
|
148 | return React.createElement(Checkbox, {
|
149 | key: index,
|
150 | value: option.value,
|
151 | checked: checked,
|
152 | rtl: rtl,
|
153 | disabled: disabled || option.disabled,
|
154 | label: option.label
|
155 | });
|
156 | });
|
157 | }
|
158 |
|
159 | if (isPreview) {
|
160 | var previewCls = classnames(className, prefix + 'form-preview');
|
161 |
|
162 | if ('renderPreview' in this.props) {
|
163 | return React.createElement(
|
164 | 'div',
|
165 | _extends({}, others, { dir: rtl ? 'rtl' : undefined, className: previewCls }),
|
166 | renderPreview(previewed, this.props)
|
167 | );
|
168 | }
|
169 |
|
170 | return React.createElement(
|
171 | 'p',
|
172 | _extends({}, others, { dir: rtl ? 'rtl' : undefined, className: previewCls }),
|
173 | previewed.map(function (item) {
|
174 | return item.label;
|
175 | }).join(', ')
|
176 | );
|
177 | }
|
178 |
|
179 | var cls = classnames((_classnames = {}, _classnames[prefix + 'checkbox-group'] = true, _classnames[prefix + 'checkbox-group-' + direction] = true, _classnames[className] = !!className, _classnames.disabled = disabled, _classnames));
|
180 |
|
181 | return React.createElement(
|
182 | 'span',
|
183 | _extends({ dir: rtl ? 'rtl' : undefined }, others, { className: cls, style: style }),
|
184 | children
|
185 | );
|
186 | };
|
187 |
|
188 | return CheckboxGroup;
|
189 | }(Component), _class.propTypes = {
|
190 | prefix: PropTypes.string,
|
191 | rtl: PropTypes.bool,
|
192 | |
193 |
|
194 |
|
195 | className: PropTypes.string,
|
196 | |
197 |
|
198 |
|
199 | style: PropTypes.object,
|
200 | |
201 |
|
202 |
|
203 | disabled: PropTypes.bool,
|
204 | |
205 |
|
206 |
|
207 | dataSource: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)]),
|
208 | |
209 |
|
210 |
|
211 | value: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.number]),
|
212 | |
213 |
|
214 |
|
215 | defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.number]),
|
216 | |
217 |
|
218 |
|
219 | children: PropTypes.arrayOf(PropTypes.element),
|
220 | |
221 |
|
222 |
|
223 |
|
224 |
|
225 | onChange: PropTypes.func,
|
226 |
|
227 | |
228 |
|
229 |
|
230 |
|
231 |
|
232 | direction: PropTypes.oneOf(['hoz', 'ver']),
|
233 | |
234 |
|
235 |
|
236 |
|
237 | isPreview: PropTypes.bool,
|
238 | |
239 |
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
|
245 | renderPreview: PropTypes.func
|
246 | }, _class.defaultProps = {
|
247 | dataSource: [],
|
248 | onChange: function onChange() {},
|
249 | prefix: 'next-',
|
250 | direction: 'hoz',
|
251 | isPreview: false
|
252 | }, _class.childContextTypes = {
|
253 | onChange: PropTypes.func,
|
254 | __group__: PropTypes.bool,
|
255 | selectedValue: PropTypes.array,
|
256 | disabled: PropTypes.bool
|
257 | }, _temp);
|
258 | CheckboxGroup.displayName = 'CheckboxGroup';
|
259 |
|
260 |
|
261 | export default polyfill(CheckboxGroup); |
\ | No newline at end of file |