You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
6.1 KiB
199 lines
6.1 KiB
import _extends from "@babel/runtime/helpers/extends";
|
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
|
|
var __rest = this && this.__rest || function (s, e) {
|
|
var t = {};
|
|
|
|
for (var p in s) {
|
|
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
}
|
|
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
};
|
|
|
|
import * as React from 'react';
|
|
import classNames from 'classnames';
|
|
import omit from 'omit.js';
|
|
import Checkbox from './Checkbox';
|
|
import { ConfigConsumer } from '../config-provider';
|
|
export var GroupContext = /*#__PURE__*/React.createContext(null);
|
|
|
|
var CheckboxGroup = /*#__PURE__*/function (_React$PureComponent) {
|
|
_inherits(CheckboxGroup, _React$PureComponent);
|
|
|
|
var _super = _createSuper(CheckboxGroup);
|
|
|
|
function CheckboxGroup(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, CheckboxGroup);
|
|
|
|
_this = _super.call(this, props);
|
|
|
|
_this.cancelValue = function (value) {
|
|
_this.setState(function (_ref) {
|
|
var registeredValues = _ref.registeredValues;
|
|
return {
|
|
registeredValues: registeredValues.filter(function (val) {
|
|
return val !== value;
|
|
})
|
|
};
|
|
});
|
|
};
|
|
|
|
_this.registerValue = function (value) {
|
|
_this.setState(function (_ref2) {
|
|
var registeredValues = _ref2.registeredValues;
|
|
return {
|
|
registeredValues: [].concat(_toConsumableArray(registeredValues), [value])
|
|
};
|
|
});
|
|
};
|
|
|
|
_this.toggleOption = function (option) {
|
|
var registeredValues = _this.state.registeredValues;
|
|
|
|
var optionIndex = _this.state.value.indexOf(option.value);
|
|
|
|
var value = _toConsumableArray(_this.state.value);
|
|
|
|
if (optionIndex === -1) {
|
|
value.push(option.value);
|
|
} else {
|
|
value.splice(optionIndex, 1);
|
|
}
|
|
|
|
if (!('value' in _this.props)) {
|
|
_this.setState({
|
|
value: value
|
|
});
|
|
}
|
|
|
|
var onChange = _this.props.onChange;
|
|
|
|
if (onChange) {
|
|
var options = _this.getOptions();
|
|
|
|
onChange(value.filter(function (val) {
|
|
return registeredValues.indexOf(val) !== -1;
|
|
}).sort(function (a, b) {
|
|
var indexA = options.findIndex(function (opt) {
|
|
return opt.value === a;
|
|
});
|
|
var indexB = options.findIndex(function (opt) {
|
|
return opt.value === b;
|
|
});
|
|
return indexA - indexB;
|
|
}));
|
|
}
|
|
};
|
|
|
|
_this.renderGroup = function (_ref3) {
|
|
var getPrefixCls = _ref3.getPrefixCls,
|
|
direction = _ref3.direction;
|
|
|
|
var _assertThisInitialize = _assertThisInitialized(_this),
|
|
props = _assertThisInitialize.props,
|
|
state = _assertThisInitialize.state;
|
|
|
|
var customizePrefixCls = props.prefixCls,
|
|
className = props.className,
|
|
style = props.style,
|
|
options = props.options,
|
|
restProps = __rest(props, ["prefixCls", "className", "style", "options"]);
|
|
|
|
var prefixCls = getPrefixCls('checkbox', customizePrefixCls);
|
|
var groupPrefixCls = "".concat(prefixCls, "-group");
|
|
var domProps = omit(restProps, ['children', 'defaultValue', 'value', 'onChange', 'disabled']);
|
|
var children = props.children;
|
|
|
|
if (options && options.length > 0) {
|
|
children = _this.getOptions().map(function (option) {
|
|
return /*#__PURE__*/React.createElement(Checkbox, {
|
|
prefixCls: prefixCls,
|
|
key: option.value.toString(),
|
|
disabled: 'disabled' in option ? option.disabled : props.disabled,
|
|
value: option.value,
|
|
checked: state.value.indexOf(option.value) !== -1,
|
|
onChange: option.onChange,
|
|
className: "".concat(groupPrefixCls, "-item"),
|
|
style: option.style
|
|
}, option.label);
|
|
});
|
|
}
|
|
|
|
var context = {
|
|
toggleOption: _this.toggleOption,
|
|
value: _this.state.value,
|
|
disabled: _this.props.disabled,
|
|
name: _this.props.name,
|
|
// https://github.com/ant-design/ant-design/issues/16376
|
|
registerValue: _this.registerValue,
|
|
cancelValue: _this.cancelValue
|
|
};
|
|
var classString = classNames(groupPrefixCls, className, _defineProperty({}, "".concat(groupPrefixCls, "-rtl"), direction === 'rtl'));
|
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
className: classString,
|
|
style: style
|
|
}, domProps), /*#__PURE__*/React.createElement(GroupContext.Provider, {
|
|
value: context
|
|
}, children));
|
|
};
|
|
|
|
_this.state = {
|
|
value: props.value || props.defaultValue || [],
|
|
registeredValues: []
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
_createClass(CheckboxGroup, [{
|
|
key: "getOptions",
|
|
value: function getOptions() {
|
|
var options = this.props.options; // https://github.com/Microsoft/TypeScript/issues/7960
|
|
|
|
return options.map(function (option) {
|
|
if (typeof option === 'string') {
|
|
return {
|
|
label: option,
|
|
value: option
|
|
};
|
|
}
|
|
|
|
return option;
|
|
});
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
return /*#__PURE__*/React.createElement(ConfigConsumer, null, this.renderGroup);
|
|
}
|
|
}], [{
|
|
key: "getDerivedStateFromProps",
|
|
value: function getDerivedStateFromProps(nextProps) {
|
|
if ('value' in nextProps) {
|
|
return {
|
|
value: nextProps.value || []
|
|
};
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}]);
|
|
|
|
return CheckboxGroup;
|
|
}(React.PureComponent);
|
|
|
|
CheckboxGroup.defaultProps = {
|
|
options: []
|
|
};
|
|
export default CheckboxGroup; |