fix(multiSelect.js): fix initCheckedObj will change selIds
This commit is contained in:
parent
b33c0365bd
commit
cf109500e7
|
@ -35,8 +35,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|||
* 使用全选时得注意,data中的key值一定要是唯一值
|
||||
*/
|
||||
function multiSelect(Table) {
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
Array.prototype.indexOf = function (val) {
|
||||
for (var i = 0; i < this.length; i++) {
|
||||
if (this[i] == val) return i;
|
||||
|
@ -49,7 +47,7 @@ function multiSelect(Table) {
|
|||
this.splice(index, 1);
|
||||
}
|
||||
};
|
||||
return _temp = _class = function (_Component) {
|
||||
return function (_Component) {
|
||||
_inherits(multiSelect, _Component);
|
||||
|
||||
function multiSelect(props) {
|
||||
|
@ -57,20 +55,121 @@ function multiSelect(Table) {
|
|||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_initialiseProps.call(_this);
|
||||
_this.getRowKey = function (record, index) {
|
||||
var rowKey = _this.props.rowKey || 'key';
|
||||
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
|
||||
return key;
|
||||
};
|
||||
|
||||
var data = props.data,
|
||||
checkedObj = _this.initCheckedObj(props);
|
||||
_this.initCheckedObj = function () {
|
||||
var checkedObj = {},
|
||||
_this$props = _this.props,
|
||||
selectDisabled = _this$props.selectDisabled,
|
||||
selectedRow = _this$props.selectedRow,
|
||||
data = _this$props.data,
|
||||
selIds_ = _this.state.selIds;
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var bool = selectDisabled && selectDisabled(data[i], i) || false;
|
||||
var rowKey = data[i]["key"] ? data[i]["key"] : _this.getRowKey(data[i], i);
|
||||
if (!bool) {
|
||||
if (selectedRow && selectedRow(data[i], i)) {
|
||||
selIds_.push(data[i]);
|
||||
checkedObj[rowKey] = true;
|
||||
} else {
|
||||
checkedObj[rowKey] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds_
|
||||
};
|
||||
};
|
||||
|
||||
_this.onAllCheckChange = function () {
|
||||
var self = _this;
|
||||
var listData = self.state.data.concat();
|
||||
var checkedObj = _extends({}, self.state.checkedObj);
|
||||
var data = self.props.data;
|
||||
|
||||
var selIds = [];
|
||||
var id = self.props.multiSelect.param;
|
||||
if (self.state.checkedAll) {
|
||||
selIds = [];
|
||||
} else {
|
||||
for (var i = 0; i < listData.length; i++) {
|
||||
if (id) {
|
||||
selIds[i] = listData[i][id];
|
||||
} else {
|
||||
selIds[i] = listData[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var rowKey = data[i]["key"] ? data[i]["key"] : _this.getRowKey(data[i], i);
|
||||
var bool = checkedObj.hasOwnProperty(rowKey);
|
||||
if (!bool) {
|
||||
selIds.splice(i, 1);
|
||||
} else {
|
||||
checkedObj[rowKey] = !self.state.checkedAll;
|
||||
}
|
||||
}
|
||||
self.setState({
|
||||
checkedAll: !self.state.checkedAll,
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds
|
||||
});
|
||||
self.props.getSelectedDataFunc(selIds);
|
||||
};
|
||||
|
||||
_this.onCheckboxChange = function (text, record, index) {
|
||||
var self = _this;
|
||||
var allFlag = false;
|
||||
var selIds = self.state.selIds;
|
||||
var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
|
||||
var checkedObj = _extends({}, self.state.checkedObj);
|
||||
var checkedArray = Object.keys(checkedObj);
|
||||
var getSelectedDataFunc = self.props.getSelectedDataFunc;
|
||||
|
||||
var rowKey = record["key"] ? record["key"] : _this.getRowKey(record, i);
|
||||
if (checkedObj[rowKey]) {
|
||||
selIds.remove(id);
|
||||
} else {
|
||||
selIds.push(id);
|
||||
}
|
||||
checkedObj[rowKey] = !checkedObj[rowKey];
|
||||
for (var i = 0; i < checkedArray.length; i++) {
|
||||
if (!checkedObj[checkedArray[i]]) {
|
||||
allFlag = false;
|
||||
break;
|
||||
} else {
|
||||
allFlag = true;
|
||||
}
|
||||
}
|
||||
self.setState({
|
||||
checkedAll: allFlag,
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds
|
||||
});
|
||||
if (typeof getSelectedDataFunc === "function") {
|
||||
getSelectedDataFunc(selIds);
|
||||
}
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
checkedAll: false,
|
||||
checkedObj: checkedObj,
|
||||
checkedObj: {},
|
||||
selIds: [],
|
||||
data: _this.props.data
|
||||
data: props.data
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
multiSelect.prototype.componentDidMount = function componentDidMount() {
|
||||
this.setState(this.initCheckedObj());
|
||||
};
|
||||
|
||||
multiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
var props = this.props,
|
||||
selectDisabled = props.selectDisabled,
|
||||
|
@ -79,7 +178,7 @@ function multiSelect(Table) {
|
|||
checkedObj = {};
|
||||
|
||||
if (nextProps.data !== data || nextProps.selectDisabled !== selectDisabled || nextProps.selectedRow !== selectedRow) {
|
||||
checkedObj = this.initCheckedObj(nextProps);
|
||||
checkedObj = this.initCheckedObj(nextProps).checkedObj;
|
||||
this.setState({
|
||||
checkedAll: false,
|
||||
checkedObj: checkedObj,
|
||||
|
@ -147,100 +246,6 @@ function multiSelect(Table) {
|
|||
};
|
||||
|
||||
return multiSelect;
|
||||
}(_react.Component), _initialiseProps = function _initialiseProps() {
|
||||
var _this4 = this;
|
||||
|
||||
this.getRowKey = function (record, index) {
|
||||
var rowKey = _this4.props.rowKey || 'key';
|
||||
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
|
||||
return key;
|
||||
};
|
||||
|
||||
this.initCheckedObj = function (props) {
|
||||
var checkedObj = {},
|
||||
selectDisabled = props.selectDisabled,
|
||||
selectedRow = props.selectedRow,
|
||||
data = props.data;
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var bool = selectDisabled && selectDisabled(data[i], i) || false;
|
||||
var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
|
||||
if (!bool) {
|
||||
checkedObj[rowKey] = selectedRow && selectedRow(data[i], i) || false;
|
||||
}
|
||||
}
|
||||
return checkedObj;
|
||||
};
|
||||
|
||||
this.onAllCheckChange = function () {
|
||||
var self = _this4;
|
||||
var listData = self.state.data.concat();
|
||||
var checkedObj = _extends({}, self.state.checkedObj);
|
||||
var data = self.props.data;
|
||||
|
||||
var selIds = [];
|
||||
var id = self.props.multiSelect.param;
|
||||
if (self.state.checkedAll) {
|
||||
selIds = [];
|
||||
} else {
|
||||
for (var i = 0; i < listData.length; i++) {
|
||||
if (id) {
|
||||
selIds[i] = listData[i][id];
|
||||
} else {
|
||||
selIds[i] = listData[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
|
||||
var bool = checkedObj.hasOwnProperty(rowKey);
|
||||
if (!bool) {
|
||||
selIds.splice(i, 1);
|
||||
} else {
|
||||
checkedObj[rowKey] = !self.state.checkedAll;
|
||||
}
|
||||
}
|
||||
self.setState({
|
||||
checkedAll: !self.state.checkedAll,
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds
|
||||
});
|
||||
self.props.getSelectedDataFunc(selIds);
|
||||
};
|
||||
|
||||
this.onCheckboxChange = function (text, record, index) {
|
||||
var self = _this4;
|
||||
var allFlag = false;
|
||||
var selIds = self.state.selIds;
|
||||
var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
|
||||
var checkedObj = _extends({}, self.state.checkedObj);
|
||||
var checkedArray = Object.keys(checkedObj);
|
||||
var getSelectedDataFunc = self.props.getSelectedDataFunc;
|
||||
|
||||
var rowKey = record["key"] ? record["key"] : _this4.getRowKey(record, i);
|
||||
if (checkedObj[rowKey]) {
|
||||
selIds.remove(id);
|
||||
} else {
|
||||
selIds.push(id);
|
||||
}
|
||||
checkedObj[rowKey] = !checkedObj[rowKey];
|
||||
for (var i = 0; i < checkedArray.length; i++) {
|
||||
if (!checkedObj[checkedArray[i]]) {
|
||||
allFlag = false;
|
||||
break;
|
||||
} else {
|
||||
allFlag = true;
|
||||
}
|
||||
}
|
||||
self.setState({
|
||||
checkedAll: allFlag,
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds
|
||||
});
|
||||
if (typeof getSelectedDataFunc === "function") {
|
||||
getSelectedDataFunc(selIds);
|
||||
}
|
||||
};
|
||||
}, _temp;
|
||||
}(_react.Component);
|
||||
}
|
||||
module.exports = exports["default"];
|
|
@ -9969,8 +9969,6 @@
|
|||
* 使用全选时得注意,data中的key值一定要是唯一值
|
||||
*/
|
||||
function multiSelect(Table) {
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
Array.prototype.indexOf = function (val) {
|
||||
for (var i = 0; i < this.length; i++) {
|
||||
if (this[i] == val) return i;
|
||||
|
@ -9983,7 +9981,7 @@
|
|||
this.splice(index, 1);
|
||||
}
|
||||
};
|
||||
return _temp = _class = function (_Component) {
|
||||
return function (_Component) {
|
||||
_inherits(multiSelect, _Component);
|
||||
|
||||
function multiSelect(props) {
|
||||
|
@ -9991,20 +9989,121 @@
|
|||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_initialiseProps.call(_this);
|
||||
_this.getRowKey = function (record, index) {
|
||||
var rowKey = _this.props.rowKey || 'key';
|
||||
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
|
||||
return key;
|
||||
};
|
||||
|
||||
var data = props.data,
|
||||
checkedObj = _this.initCheckedObj(props);
|
||||
_this.initCheckedObj = function () {
|
||||
var checkedObj = {},
|
||||
_this$props = _this.props,
|
||||
selectDisabled = _this$props.selectDisabled,
|
||||
selectedRow = _this$props.selectedRow,
|
||||
data = _this$props.data,
|
||||
selIds_ = _this.state.selIds;
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var bool = selectDisabled && selectDisabled(data[i], i) || false;
|
||||
var rowKey = data[i]["key"] ? data[i]["key"] : _this.getRowKey(data[i], i);
|
||||
if (!bool) {
|
||||
if (selectedRow && selectedRow(data[i], i)) {
|
||||
selIds_.push(data[i]);
|
||||
checkedObj[rowKey] = true;
|
||||
} else {
|
||||
checkedObj[rowKey] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds_
|
||||
};
|
||||
};
|
||||
|
||||
_this.onAllCheckChange = function () {
|
||||
var self = _this;
|
||||
var listData = self.state.data.concat();
|
||||
var checkedObj = _extends({}, self.state.checkedObj);
|
||||
var data = self.props.data;
|
||||
|
||||
var selIds = [];
|
||||
var id = self.props.multiSelect.param;
|
||||
if (self.state.checkedAll) {
|
||||
selIds = [];
|
||||
} else {
|
||||
for (var i = 0; i < listData.length; i++) {
|
||||
if (id) {
|
||||
selIds[i] = listData[i][id];
|
||||
} else {
|
||||
selIds[i] = listData[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var rowKey = data[i]["key"] ? data[i]["key"] : _this.getRowKey(data[i], i);
|
||||
var bool = checkedObj.hasOwnProperty(rowKey);
|
||||
if (!bool) {
|
||||
selIds.splice(i, 1);
|
||||
} else {
|
||||
checkedObj[rowKey] = !self.state.checkedAll;
|
||||
}
|
||||
}
|
||||
self.setState({
|
||||
checkedAll: !self.state.checkedAll,
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds
|
||||
});
|
||||
self.props.getSelectedDataFunc(selIds);
|
||||
};
|
||||
|
||||
_this.onCheckboxChange = function (text, record, index) {
|
||||
var self = _this;
|
||||
var allFlag = false;
|
||||
var selIds = self.state.selIds;
|
||||
var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
|
||||
var checkedObj = _extends({}, self.state.checkedObj);
|
||||
var checkedArray = Object.keys(checkedObj);
|
||||
var getSelectedDataFunc = self.props.getSelectedDataFunc;
|
||||
|
||||
var rowKey = record["key"] ? record["key"] : _this.getRowKey(record, i);
|
||||
if (checkedObj[rowKey]) {
|
||||
selIds.remove(id);
|
||||
} else {
|
||||
selIds.push(id);
|
||||
}
|
||||
checkedObj[rowKey] = !checkedObj[rowKey];
|
||||
for (var i = 0; i < checkedArray.length; i++) {
|
||||
if (!checkedObj[checkedArray[i]]) {
|
||||
allFlag = false;
|
||||
break;
|
||||
} else {
|
||||
allFlag = true;
|
||||
}
|
||||
}
|
||||
self.setState({
|
||||
checkedAll: allFlag,
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds
|
||||
});
|
||||
if (typeof getSelectedDataFunc === "function") {
|
||||
getSelectedDataFunc(selIds);
|
||||
}
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
checkedAll: false,
|
||||
checkedObj: checkedObj,
|
||||
checkedObj: {},
|
||||
selIds: [],
|
||||
data: _this.props.data
|
||||
data: props.data
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
multiSelect.prototype.componentDidMount = function componentDidMount() {
|
||||
this.setState(this.initCheckedObj());
|
||||
};
|
||||
|
||||
multiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
var props = this.props,
|
||||
selectDisabled = props.selectDisabled,
|
||||
|
@ -10013,7 +10112,7 @@
|
|||
checkedObj = {};
|
||||
|
||||
if (nextProps.data !== data || nextProps.selectDisabled !== selectDisabled || nextProps.selectedRow !== selectedRow) {
|
||||
checkedObj = this.initCheckedObj(nextProps);
|
||||
checkedObj = this.initCheckedObj(nextProps).checkedObj;
|
||||
this.setState({
|
||||
checkedAll: false,
|
||||
checkedObj: checkedObj,
|
||||
|
@ -10081,101 +10180,7 @@
|
|||
};
|
||||
|
||||
return multiSelect;
|
||||
}(_react.Component), _initialiseProps = function _initialiseProps() {
|
||||
var _this4 = this;
|
||||
|
||||
this.getRowKey = function (record, index) {
|
||||
var rowKey = _this4.props.rowKey || 'key';
|
||||
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
|
||||
return key;
|
||||
};
|
||||
|
||||
this.initCheckedObj = function (props) {
|
||||
var checkedObj = {},
|
||||
selectDisabled = props.selectDisabled,
|
||||
selectedRow = props.selectedRow,
|
||||
data = props.data;
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var bool = selectDisabled && selectDisabled(data[i], i) || false;
|
||||
var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
|
||||
if (!bool) {
|
||||
checkedObj[rowKey] = selectedRow && selectedRow(data[i], i) || false;
|
||||
}
|
||||
}
|
||||
return checkedObj;
|
||||
};
|
||||
|
||||
this.onAllCheckChange = function () {
|
||||
var self = _this4;
|
||||
var listData = self.state.data.concat();
|
||||
var checkedObj = _extends({}, self.state.checkedObj);
|
||||
var data = self.props.data;
|
||||
|
||||
var selIds = [];
|
||||
var id = self.props.multiSelect.param;
|
||||
if (self.state.checkedAll) {
|
||||
selIds = [];
|
||||
} else {
|
||||
for (var i = 0; i < listData.length; i++) {
|
||||
if (id) {
|
||||
selIds[i] = listData[i][id];
|
||||
} else {
|
||||
selIds[i] = listData[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
|
||||
var bool = checkedObj.hasOwnProperty(rowKey);
|
||||
if (!bool) {
|
||||
selIds.splice(i, 1);
|
||||
} else {
|
||||
checkedObj[rowKey] = !self.state.checkedAll;
|
||||
}
|
||||
}
|
||||
self.setState({
|
||||
checkedAll: !self.state.checkedAll,
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds
|
||||
});
|
||||
self.props.getSelectedDataFunc(selIds);
|
||||
};
|
||||
|
||||
this.onCheckboxChange = function (text, record, index) {
|
||||
var self = _this4;
|
||||
var allFlag = false;
|
||||
var selIds = self.state.selIds;
|
||||
var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
|
||||
var checkedObj = _extends({}, self.state.checkedObj);
|
||||
var checkedArray = Object.keys(checkedObj);
|
||||
var getSelectedDataFunc = self.props.getSelectedDataFunc;
|
||||
|
||||
var rowKey = record["key"] ? record["key"] : _this4.getRowKey(record, i);
|
||||
if (checkedObj[rowKey]) {
|
||||
selIds.remove(id);
|
||||
} else {
|
||||
selIds.push(id);
|
||||
}
|
||||
checkedObj[rowKey] = !checkedObj[rowKey];
|
||||
for (var i = 0; i < checkedArray.length; i++) {
|
||||
if (!checkedObj[checkedArray[i]]) {
|
||||
allFlag = false;
|
||||
break;
|
||||
} else {
|
||||
allFlag = true;
|
||||
}
|
||||
}
|
||||
self.setState({
|
||||
checkedAll: allFlag,
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds
|
||||
});
|
||||
if (typeof getSelectedDataFunc === "function") {
|
||||
getSelectedDataFunc(selIds);
|
||||
}
|
||||
};
|
||||
}, _temp;
|
||||
}(_react.Component);
|
||||
}
|
||||
module.exports = exports["default"];
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.0.13",
|
||||
"version": "1.0.14",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
@ -24,15 +24,16 @@ export default function multiSelect(Table) {
|
|||
return class multiSelect extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
let { data } = props,
|
||||
checkedObj = this.initCheckedObj(props);
|
||||
this.state = {
|
||||
checkedAll: false,
|
||||
checkedObj: checkedObj,
|
||||
checkedObj: {},
|
||||
selIds: [],
|
||||
data: this.props.data
|
||||
data: props.data
|
||||
};
|
||||
}
|
||||
componentDidMount(){
|
||||
this.setState(this.initCheckedObj());
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
let props = this.props,
|
||||
{ selectDisabled, selectedRow, data } = props,
|
||||
|
@ -42,7 +43,7 @@ export default function multiSelect(Table) {
|
|||
nextProps.selectDisabled !== selectDisabled ||
|
||||
nextProps.selectedRow !== selectedRow
|
||||
) {
|
||||
checkedObj = this.initCheckedObj(nextProps);
|
||||
checkedObj = this.initCheckedObj(nextProps).checkedObj;
|
||||
this.setState({
|
||||
checkedAll: false,
|
||||
checkedObj: checkedObj,
|
||||
|
@ -57,18 +58,26 @@ export default function multiSelect(Table) {
|
|||
rowKey(record, index) : record[rowKey];
|
||||
return key;
|
||||
}
|
||||
initCheckedObj = props => {
|
||||
initCheckedObj = () => {
|
||||
let checkedObj = {},
|
||||
{ selectDisabled, selectedRow, data } = props;
|
||||
{ selectDisabled, selectedRow, data } = this.props,
|
||||
selIds_ = this.state.selIds;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
let bool = (selectDisabled && selectDisabled(data[i], i)) || false;
|
||||
let rowKey = data[i]["key"] ? data[i]["key"] : this.getRowKey(data[i],i);
|
||||
if (!bool) {
|
||||
checkedObj[rowKey] =
|
||||
(selectedRow && selectedRow(data[i], i)) || false;
|
||||
if(selectedRow && selectedRow(data[i], i)){
|
||||
selIds_.push(data[i]);
|
||||
checkedObj[rowKey] = true;
|
||||
}else{
|
||||
checkedObj[rowKey] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return checkedObj;
|
||||
return {
|
||||
checkedObj:checkedObj,
|
||||
selIds:selIds_
|
||||
};
|
||||
};
|
||||
onAllCheckChange = () => {
|
||||
let self = this;
|
||||
|
|
Loading…
Reference in New Issue