merge
This commit is contained in:
commit
c31f73979c
|
@ -70,7 +70,7 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1900;
|
z-index: 1600;
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
filter: blur(0.5px);
|
filter: blur(0.5px);
|
||||||
background-color: #fff; }
|
background-color: #fff; }
|
||||||
|
|
|
@ -37,7 +37,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function newMultiSelect(Table, Checkbox) {
|
function newMultiSelect(Table, Checkbox) {
|
||||||
var _class, _temp;
|
var _class, _temp, _initialiseProps;
|
||||||
|
|
||||||
return _temp = _class = function (_Component) {
|
return _temp = _class = function (_Component) {
|
||||||
_inherits(NewMultiSelect, _Component);
|
_inherits(NewMultiSelect, _Component);
|
||||||
|
@ -47,10 +47,76 @@ function newMultiSelect(Table, Checkbox) {
|
||||||
|
|
||||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||||
|
|
||||||
_this.onAllCheckChange = function () {
|
_initialiseProps.call(_this);
|
||||||
var _this$state = _this.state,
|
|
||||||
data = _this$state.data,
|
var checkedAll = _this.setChecked(props.data);
|
||||||
checkedAll = _this$state.checkedAll;
|
_this.state = {
|
||||||
|
checkedAll: checkedAll,
|
||||||
|
data: (0, _util.ObjectAssign)(props.data)
|
||||||
|
};
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
|
||||||
|
NewMultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||||
|
if (this.props.data != nextProps.data) {
|
||||||
|
this.setState({
|
||||||
|
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;
|
||||||
|
|
||||||
|
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
|
||||||
|
};
|
||||||
|
|
||||||
|
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 selectList = [];
|
||||||
var check = checkedAll ? false : true;
|
var check = checkedAll ? false : true;
|
||||||
|
@ -60,17 +126,17 @@ function newMultiSelect(Table, Checkbox) {
|
||||||
selectList.push(item);
|
selectList.push(item);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
_this.setState({
|
_this2.setState({
|
||||||
checkedAll: check
|
checkedAll: check
|
||||||
});
|
});
|
||||||
_this.props.getSelectedDataFunc(selectList);
|
_this2.props.getSelectedDataFunc(selectList);
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.handleClick = function () {};
|
this.handleClick = function () {};
|
||||||
|
|
||||||
_this.onCheckboxChange = function (text, record, index) {
|
this.onCheckboxChange = function (text, record, index) {
|
||||||
return function () {
|
return function () {
|
||||||
var data = _this.state.data;
|
var data = _this2.state.data;
|
||||||
|
|
||||||
var selectList = [];
|
var selectList = [];
|
||||||
record._checked = record._checked ? false : true;
|
record._checked = record._checked ? false : true;
|
||||||
|
@ -82,7 +148,7 @@ function newMultiSelect(Table, Checkbox) {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
_this.setState(_extends({}, _this.state, {
|
_this2.setState(_extends({}, _this2.state, {
|
||||||
checkedAll: checkedAll
|
checkedAll: checkedAll
|
||||||
}));
|
}));
|
||||||
data.forEach(function (da) {
|
data.forEach(function (da) {
|
||||||
|
@ -90,20 +156,20 @@ function newMultiSelect(Table, Checkbox) {
|
||||||
selectList.push(da);
|
selectList.push(da);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
_this.props.getSelectedDataFunc(selectList);
|
_this2.props.getSelectedDataFunc(selectList);
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.getDefaultColumns = function (columns) {
|
this.getDefaultColumns = function (columns) {
|
||||||
// let checkedAll = init?false:this.state.checkedAll;
|
// let checkedAll = init?false:this.state.checkedAll;
|
||||||
var checkedAll = _this.state.checkedAll;
|
var checkedAll = _this2.state.checkedAll;
|
||||||
|
|
||||||
var _defaultColumns = [{
|
var _defaultColumns = [{
|
||||||
title: _react2["default"].createElement(Checkbox, {
|
title: _react2["default"].createElement(Checkbox, {
|
||||||
className: 'table-checkbox',
|
className: 'table-checkbox',
|
||||||
checked: checkedAll
|
checked: checkedAll
|
||||||
// indeterminate={indeterminate_bool && !this.state.checkedAll}
|
// indeterminate={indeterminate_bool && !this.state.checkedAll}
|
||||||
, onChange: _this.onAllCheckChange
|
, onChange: _this2.onAllCheckChange
|
||||||
}),
|
}),
|
||||||
key: "checkbox",
|
key: "checkbox",
|
||||||
dataIndex: "checkbox",
|
dataIndex: "checkbox",
|
||||||
|
@ -117,45 +183,13 @@ function newMultiSelect(Table, Checkbox) {
|
||||||
className: 'table-checkbox'
|
className: 'table-checkbox'
|
||||||
}, attr, {
|
}, attr, {
|
||||||
checked: record._checked,
|
checked: record._checked,
|
||||||
onClick: _this.handleClick,
|
onClick: _this2.handleClick,
|
||||||
onChange: _this.onCheckboxChange(text, record, index)
|
onChange: _this2.onCheckboxChange(text, record, index)
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
}];
|
}];
|
||||||
return _defaultColumns.concat(columns);
|
return _defaultColumns.concat(columns);
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.state = {
|
|
||||||
checkedAll: false,
|
|
||||||
// columns:this.getDefaultColumns(props.columns,"init"),
|
|
||||||
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)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
NewMultiSelect.prototype.render = function render() {
|
|
||||||
var columns = this.props.columns;
|
|
||||||
var data = this.state.data;
|
|
||||||
|
|
||||||
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: this.getDefaultColumns(columns), data: data }));
|
|
||||||
};
|
|
||||||
|
|
||||||
return NewMultiSelect;
|
|
||||||
}(_react.Component), _class.defaultProps = {
|
|
||||||
prefixCls: "u-table-mult-select"
|
|
||||||
}, _temp;
|
}, _temp;
|
||||||
}
|
}
|
||||||
module.exports = exports['default'];
|
module.exports = exports['default'];
|
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
import multiSelect from "../../src/lib/multiSelect.js";
|
import multiSelect from "../../src/lib/newMultiSelect.js";
|
||||||
import Checkbox from 'bee-checkbox';
|
import Checkbox from 'bee-checkbox';
|
||||||
|
|
||||||
const columns12 = [
|
const columns12 = [
|
||||||
|
@ -39,9 +39,9 @@ const columns12 = [
|
||||||
];
|
];
|
||||||
|
|
||||||
const data12 = [
|
const data12 = [
|
||||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
|
||||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:true},
|
||||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:true}
|
||||||
];
|
];
|
||||||
//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常
|
//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常
|
||||||
let MultiSelectTable = multiSelect(Table, Checkbox);
|
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",
|
"name": "bee-table",
|
||||||
"version": "1.4.3",
|
"version": "1.4.4",
|
||||||
"description": "Table ui component for react",
|
"description": "Table ui component for react",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"react",
|
"react",
|
||||||
|
|
|
@ -18,26 +18,35 @@ export default function newMultiSelect(Table, Checkbox) {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
let checkedAll = this.setChecked(props.data);
|
||||||
this.state = {
|
this.state = {
|
||||||
checkedAll:false,
|
checkedAll,
|
||||||
// columns:this.getDefaultColumns(props.columns,"init"),
|
|
||||||
data:ObjectAssign(props.data),
|
data:ObjectAssign(props.data),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps){
|
componentWillReceiveProps(nextProps){
|
||||||
// if(this.props.columns != nextProps.columns){
|
|
||||||
// this.setState({
|
|
||||||
// columns:this.getDefaultColumns(nextProps.columns)
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
if(this.props.data != nextProps.data){
|
if(this.props.data != nextProps.data){
|
||||||
this.setState({
|
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=()=>{
|
onAllCheckChange=()=>{
|
||||||
let {data,checkedAll} = this.state;
|
let {data,checkedAll} = this.state;
|
||||||
let selectList = [];
|
let selectList = [];
|
||||||
|
|
Loading…
Reference in New Issue