merge
This commit is contained in:
commit
c31f73979c
|
@ -70,7 +70,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1900;
|
||||
z-index: 1600;
|
||||
opacity: .7;
|
||||
filter: blur(0.5px);
|
||||
background-color: #fff; }
|
||||
|
|
|
@ -37,7 +37,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|||
*/
|
||||
|
||||
function newMultiSelect(Table, Checkbox) {
|
||||
var _class, _temp;
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
return _temp = _class = function (_Component) {
|
||||
_inherits(NewMultiSelect, _Component);
|
||||
|
@ -47,105 +47,59 @@ function newMultiSelect(Table, Checkbox) {
|
|||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.onAllCheckChange = function () {
|
||||
var _this$state = _this.state,
|
||||
data = _this$state.data,
|
||||
checkedAll = _this$state.checkedAll;
|
||||
|
||||
var selectList = [];
|
||||
var check = checkedAll ? false : true;
|
||||
data.forEach(function (item) {
|
||||
item._checked = check;
|
||||
if (item._checked) {
|
||||
selectList.push(item);
|
||||
}
|
||||
});
|
||||
_this.setState({
|
||||
checkedAll: check
|
||||
});
|
||||
_this.props.getSelectedDataFunc(selectList);
|
||||
};
|
||||
|
||||
_this.handleClick = function () {};
|
||||
|
||||
_this.onCheckboxChange = function (text, record, index) {
|
||||
return function () {
|
||||
var data = _this.state.data;
|
||||
|
||||
var selectList = [];
|
||||
record._checked = record._checked ? false : true;
|
||||
var checkedAll = true;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var item = data[i];
|
||||
if (!item._checked || item._checked == false) {
|
||||
checkedAll = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
_this.setState(_extends({}, _this.state, {
|
||||
checkedAll: checkedAll
|
||||
}));
|
||||
data.forEach(function (da) {
|
||||
if (da._checked) {
|
||||
selectList.push(da);
|
||||
}
|
||||
});
|
||||
_this.props.getSelectedDataFunc(selectList);
|
||||
};
|
||||
};
|
||||
|
||||
_this.getDefaultColumns = function (columns) {
|
||||
// let checkedAll = init?false:this.state.checkedAll;
|
||||
var checkedAll = _this.state.checkedAll;
|
||||
|
||||
var _defaultColumns = [{
|
||||
title: _react2["default"].createElement(Checkbox, {
|
||||
className: 'table-checkbox',
|
||||
checked: checkedAll
|
||||
// indeterminate={indeterminate_bool && !this.state.checkedAll}
|
||||
, onChange: _this.onAllCheckChange
|
||||
}),
|
||||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
fixed: "left",
|
||||
width: 50,
|
||||
render: function render(text, record, index) {
|
||||
var attr = {};
|
||||
record._disabled ? attr.disabled = record._disabled : "";
|
||||
return _react2["default"].createElement(Checkbox, _extends({
|
||||
key: index,
|
||||
className: 'table-checkbox'
|
||||
}, attr, {
|
||||
checked: record._checked,
|
||||
onClick: _this.handleClick,
|
||||
onChange: _this.onCheckboxChange(text, record, index)
|
||||
}));
|
||||
}
|
||||
}];
|
||||
return _defaultColumns.concat(columns);
|
||||
};
|
||||
_initialiseProps.call(_this);
|
||||
|
||||
var checkedAll = _this.setChecked(props.data);
|
||||
_this.state = {
|
||||
checkedAll: false,
|
||||
// columns:this.getDefaultColumns(props.columns,"init"),
|
||||
checkedAll: checkedAll,
|
||||
data: (0, _util.ObjectAssign)(props.data)
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
// if(this.props.columns != nextProps.columns){
|
||||
// this.setState({
|
||||
// columns:this.getDefaultColumns(nextProps.columns)
|
||||
// })
|
||||
// }
|
||||
if (this.props.data != nextProps.data) {
|
||||
this.setState({
|
||||
data: (0, _util.ObjectAssign)(nextProps.data)
|
||||
data: (0, _util.ObjectAssign)(nextProps.data),
|
||||
checkedAll: this.setChecked(nextProps.data)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
NewMultiSelect.prototype.setChecked = function setChecked(data) {
|
||||
var allCheck = true;
|
||||
if (data) {
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var da = _step.value;
|
||||
|
||||
if (!da._checked) {
|
||||
allCheck = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator["return"]) {
|
||||
_iterator["return"]();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return allCheck;
|
||||
};
|
||||
|
||||
NewMultiSelect.prototype.render = function render() {
|
||||
var columns = this.props.columns;
|
||||
var data = this.state.data;
|
||||
|
@ -156,6 +110,86 @@ function newMultiSelect(Table, Checkbox) {
|
|||
return NewMultiSelect;
|
||||
}(_react.Component), _class.defaultProps = {
|
||||
prefixCls: "u-table-mult-select"
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this2 = this;
|
||||
|
||||
this.onAllCheckChange = function () {
|
||||
var _state = _this2.state,
|
||||
data = _state.data,
|
||||
checkedAll = _state.checkedAll;
|
||||
|
||||
var selectList = [];
|
||||
var check = checkedAll ? false : true;
|
||||
data.forEach(function (item) {
|
||||
item._checked = check;
|
||||
if (item._checked) {
|
||||
selectList.push(item);
|
||||
}
|
||||
});
|
||||
_this2.setState({
|
||||
checkedAll: check
|
||||
});
|
||||
_this2.props.getSelectedDataFunc(selectList);
|
||||
};
|
||||
|
||||
this.handleClick = function () {};
|
||||
|
||||
this.onCheckboxChange = function (text, record, index) {
|
||||
return function () {
|
||||
var data = _this2.state.data;
|
||||
|
||||
var selectList = [];
|
||||
record._checked = record._checked ? false : true;
|
||||
var checkedAll = true;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var item = data[i];
|
||||
if (!item._checked || item._checked == false) {
|
||||
checkedAll = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
_this2.setState(_extends({}, _this2.state, {
|
||||
checkedAll: checkedAll
|
||||
}));
|
||||
data.forEach(function (da) {
|
||||
if (da._checked) {
|
||||
selectList.push(da);
|
||||
}
|
||||
});
|
||||
_this2.props.getSelectedDataFunc(selectList);
|
||||
};
|
||||
};
|
||||
|
||||
this.getDefaultColumns = function (columns) {
|
||||
// let checkedAll = init?false:this.state.checkedAll;
|
||||
var checkedAll = _this2.state.checkedAll;
|
||||
|
||||
var _defaultColumns = [{
|
||||
title: _react2["default"].createElement(Checkbox, {
|
||||
className: 'table-checkbox',
|
||||
checked: checkedAll
|
||||
// indeterminate={indeterminate_bool && !this.state.checkedAll}
|
||||
, onChange: _this2.onAllCheckChange
|
||||
}),
|
||||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
fixed: "left",
|
||||
width: 50,
|
||||
render: function render(text, record, index) {
|
||||
var attr = {};
|
||||
record._disabled ? attr.disabled = record._disabled : "";
|
||||
return _react2["default"].createElement(Checkbox, _extends({
|
||||
key: index,
|
||||
className: 'table-checkbox'
|
||||
}, attr, {
|
||||
checked: record._checked,
|
||||
onClick: _this2.handleClick,
|
||||
onChange: _this2.onCheckboxChange(text, record, index)
|
||||
}));
|
||||
}
|
||||
}];
|
||||
return _defaultColumns.concat(columns);
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports['default'];
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
import multiSelect from "../../src/lib/newMultiSelect.js";
|
||||
import Checkbox from 'bee-checkbox';
|
||||
|
||||
const columns12 = [
|
||||
|
@ -39,9 +39,9 @@ const columns12 = [
|
|||
];
|
||||
|
||||
const data12 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:true},
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:true}
|
||||
];
|
||||
//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常
|
||||
let MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.4.3",
|
||||
"version": "1.4.4",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
@ -18,26 +18,35 @@ export default function newMultiSelect(Table, Checkbox) {
|
|||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
let checkedAll = this.setChecked(props.data);
|
||||
this.state = {
|
||||
checkedAll:false,
|
||||
// columns:this.getDefaultColumns(props.columns,"init"),
|
||||
checkedAll,
|
||||
data:ObjectAssign(props.data),
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps){
|
||||
// if(this.props.columns != nextProps.columns){
|
||||
// this.setState({
|
||||
// columns:this.getDefaultColumns(nextProps.columns)
|
||||
// })
|
||||
// }
|
||||
if(this.props.data != nextProps.data){
|
||||
this.setState({
|
||||
data:ObjectAssign(nextProps.data)
|
||||
data:ObjectAssign(nextProps.data),
|
||||
checkedAll:this.setChecked(nextProps.data),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
setChecked(data){
|
||||
let allCheck = true;
|
||||
if(data){
|
||||
for (const da of data) {
|
||||
if(!da._checked){
|
||||
allCheck = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return allCheck;
|
||||
}
|
||||
|
||||
onAllCheckChange=()=>{
|
||||
let {data,checkedAll} = this.state;
|
||||
let selectList = [];
|
||||
|
|
Loading…
Reference in New Issue