hy-checkbox
Version:
checkbox & radio ui components for react
311 lines (281 loc) • 12.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _CheckBox = require('../CheckBox');
var _CheckBox2 = _interopRequireDefault(_CheckBox);
var _Button = require('../Button');
var _Button2 = _interopRequireDefault(_Button);
require('./transfer.less');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /*
* @Author: SiMeiyu
* @Date: 2017-07-04 10:08:02
*/
var CheckboxGroup = _CheckBox2.default.CheckboxGroup;
var Checkbox = _CheckBox2.default.CheckBox;
var Transfer = function (_React$Component) {
_inherits(Transfer, _React$Component);
function Transfer(props) {
_classCallCheck(this, Transfer);
var _this = _possibleConstructorReturn(this, (Transfer.__proto__ || Object.getPrototypeOf(Transfer)).call(this, props));
_this.state = {
options: props.options || [],
selectableCheckedValue: [],
selectionCheckedValue: [],
isAllSelectableChecked: false,
isAllSelectionChecked: false
};
_this.onSelectableChange = _this.onSelectableChange.bind(_this);
_this.onSelectionChange = _this.onSelectionChange.bind(_this);
_this.handleCheckedSelectable = _this.handleCheckedSelectable.bind(_this);
_this.handleCheckedSelection = _this.handleCheckedSelection.bind(_this);
_this.selectableAllChecked = _this.selectableAllChecked.bind(_this);
_this.selectionAllChecked = _this.selectionAllChecked.bind(_this);
return _this;
}
_createClass(Transfer, [{
key: 'getSelectedValues',
value: function getSelectedValues(options) {
return options.filter(function (option) {
return option.isChecked;
}).map(function (opt) {
return opt.name;
});
}
}, {
key: 'handleCheckedSelectable',
value: function handleCheckedSelectable() {
var options = this.state.options;
options = options.map(function (option) {
if (option.marked && !option.isChecked) {
return _extends({}, option, {
marked: false,
isChecked: true
});
}
return option;
});
this.setState({
options: options,
selectableCheckedValue: [],
isAllSelectableChecked: false
});
if ("onChange" in this.props) {
var selectedOption = this.getSelectedValues(options);
this.props.onChange(selectedOption);
}
}
}, {
key: 'handleCheckedSelection',
value: function handleCheckedSelection() {
var options = this.state.options;
options = options.map(function (option) {
if (option.marked && option.isChecked) {
return _extends({}, option, {
marked: false,
isChecked: false
});
}
return option;
});
this.setState({
options: options,
selectionCheckedValue: [],
isAllSelectionChecked: false
});
if ("onChange" in this.props) {
var selectedOption = this.getSelectedValues(options);
this.props.onChange(selectedOption);
}
}
}, {
key: 'handleChange',
value: function handleChange(value) {
var options = this.state.options;
options = options.map(function (option) {
var checked = value.find(function (v) {
return v == option.name;
});
if (checked) {
return _extends({}, option, {
marked: true
});
}
return _extends({}, option, {
marked: false
});
});
this.setState({
options: options
});
}
}, {
key: 'onSelectableChange',
value: function onSelectableChange(value) {
this.setState({
selectableCheckedValue: value
});
this.handleChange(value);
}
}, {
key: 'onSelectionChange',
value: function onSelectionChange(value) {
this.setState({
selectionCheckedValue: value
});
this.handleChange(value);
}
}, {
key: 'selectableAllChecked',
value: function selectableAllChecked() {
var options = this.state.options;
var items = options.filter(function (option) {
return !option.isChecked;
});
var selectableCheckedValue = items.map(function (item) {
return item.name;
});
this.setState({
selectableCheckedValue: selectableCheckedValue,
isAllSelectableChecked: true
});
this.handleChange(selectableCheckedValue);
}
}, {
key: 'selectionAllChecked',
value: function selectionAllChecked() {
var options = this.state.options;
var items = options.filter(function (option) {
return option.isChecked;
});
var selectionCheckedValue = items.map(function (item) {
return item.name;
});
this.setState({
selectionCheckedValue: selectionCheckedValue,
isAllSelectionChecked: true
});
this.handleChange(selectionCheckedValue);
}
}, {
key: 'renderSelectable',
value: function renderSelectable() {
var options = this.state.options;
var items = options.filter(function (option) {
return !option.isChecked;
});
items = items.map(function (item) {
return {
title: item.name,
value: item.name
};
});
if (items.length == 0) {
return _react2.default.createElement(
'span',
{ className: this.props.prefixCls + '-transfer-noData' },
'\u6682\u65E0\u6570\u636E'
);
}
return _react2.default.createElement(CheckboxGroup, { name: 'selectableItem', items: items, value: this.state.selectableCheckedValue, onChange: this.onSelectableChange });
}
}, {
key: 'renderSelection',
value: function renderSelection() {
var options = this.state.options;
var items = options.filter(function (option) {
return option.isChecked;
});
items = items.map(function (item) {
return {
title: item.name,
value: item.name
};
});
if (items.length == 0) {
return _react2.default.createElement(
'span',
{ className: this.props.prefixCls + '-transfer-noData' },
'\u6682\u65E0\u6570\u636E'
);
}
return _react2.default.createElement(CheckboxGroup, { name: 'selectionItem', items: items, value: this.state.selectionCheckedValue, onChange: this.onSelectionChange });
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
prefixCls = _props.prefixCls,
className = _props.className,
caption = _props.caption;
var _state = this.state,
selectableCheckedValue = _state.selectableCheckedValue,
selectionCheckedValue = _state.selectionCheckedValue,
isAllSelectableChecked = _state.isAllSelectableChecked,
isAllSelectionChecked = _state.isAllSelectionChecked;
var isSelectableChecked = selectableCheckedValue.length == 0;
var isSelectionChecked = selectionCheckedValue.length == 0;
var classes = (0, _classnames2.default)(prefixCls + '-transfer', className);
return _react2.default.createElement(
'div',
{ className: classes },
_react2.default.createElement(
'div',
{ className: prefixCls + '-transfer-panel' },
_react2.default.createElement(
'div',
{ className: prefixCls + '-transfer-header' },
_react2.default.createElement(Checkbox, { name: 'selectable', value: 'checkedAllSelectable', checked: isAllSelectableChecked, title: '\u53EF\u9009' + caption, onChange: this.selectableAllChecked })
),
_react2.default.createElement(
'div',
{ className: prefixCls + '-transfer-body' },
this.renderSelectable()
)
),
_react2.default.createElement(
'div',
{ className: prefixCls + '-transfer-button' },
_react2.default.createElement(_Button2.default, { icon: 'left', onClick: this.handleCheckedSelection, disabled: isSelectionChecked, block: true }),
_react2.default.createElement(_Button2.default, { icon: 'right', onClick: this.handleCheckedSelectable, disabled: isSelectableChecked, block: true })
),
_react2.default.createElement(
'div',
{ className: prefixCls + '-transfer-panel' },
_react2.default.createElement(
'div',
{ className: prefixCls + '-transfer-header' },
_react2.default.createElement(Checkbox, { name: 'selectable', value: 'checkedAllSelection', checked: isAllSelectionChecked, title: '\u5DF2\u9009' + (caption || 项), onChange: this.selectionAllChecked })
),
_react2.default.createElement(
'div',
{ className: prefixCls + '-transfer-body' },
this.renderSelection()
)
)
);
}
}]);
return Transfer;
}(_react2.default.Component);
Transfer.propTypes = {
prefixCls: _react2.default.PropTypes.string,
className: _react2.default.PropTypes.string,
caption: _react2.default.PropTypes.string,
options: _react2.default.PropTypes.array,
onChange: _react2.default.PropTypes.func
};
Transfer.defaultProps = {
prefixCls: "ult",
caption: "项"
};
exports.default = Transfer;