@clake/react-bootstrap4-window 0.7.4 → 0.7.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react-bootstrap4-window.js +3 -3
- package/lib/CTable.js +154 -128
- package/lib/CTable.js.map +3 -3
- package/lib/CTableInput.js +2 -2
- package/lib/CTableInput.js.map +2 -2
- package/lib/Drag.js +2 -2
- package/lib/Drag.js.map +2 -2
- package/lib/IconButton.js +2 -2
- package/lib/IconButton.js.map +2 -2
- package/lib/PageBar.js +2 -2
- package/lib/PageBar.js.map +2 -2
- package/lib/TopMenu.js +2 -2
- package/lib/TopMenu.js.map +2 -2
- package/lib/WCalendar.js +2 -2
- package/lib/WCalendar.js.map +2 -2
- package/lib/WCombo.js +2 -2
- package/lib/WCombo.js.map +2 -2
- package/lib/WModal.js +2 -2
- package/lib/WModal.js.map +3 -3
- package/lib/Window.js +2 -2
- package/lib/Window.js.map +2 -2
- package/lib/WindowGroup.js +2 -2
- package/lib/WindowGroup.js.map +2 -2
- package/lib/css/CTable.less +6 -0
- package/lib/i18n/CTable.js +2 -2
- package/lib/i18n/CTable.js.map +2 -2
- package/lib/index.js +2 -2
- package/lib/index.js.map +2 -2
- package/package.json +1 -1
package/lib/CTable.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/* @clake/react-bootstrap4-window v0.7.
|
|
1
|
+
/* @clake/react-bootstrap4-window v0.7.6 | by Clake
|
|
2
2
|
* Copyright (c) 2024 Clake,
|
|
3
|
-
* 2024-03-
|
|
3
|
+
* 2024-03-15T15:50:10+0800
|
|
4
4
|
*/
|
|
5
5
|
"use strict";
|
|
6
6
|
|
|
@@ -61,6 +61,10 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
|
|
|
61
61
|
|
|
62
62
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
63
63
|
|
|
64
|
+
/**
|
|
65
|
+
* data Grid class
|
|
66
|
+
* @extends React.Component
|
|
67
|
+
*/
|
|
64
68
|
var CTable =
|
|
65
69
|
/*#__PURE__*/
|
|
66
70
|
function (_React$Component) {
|
|
@@ -86,11 +90,7 @@ function (_React$Component) {
|
|
|
86
90
|
});
|
|
87
91
|
|
|
88
92
|
_defineProperty(_assertThisInitialized(_this), "selectAll", function (checked) {
|
|
89
|
-
_this.select_all = checked;
|
|
90
|
-
// item.setChecked(this.select_all);
|
|
91
|
-
// this.setRowCheck(this.select_all,idx);
|
|
92
|
-
// });
|
|
93
|
-
|
|
93
|
+
_this.select_all = checked;
|
|
94
94
|
var selectRows = [];
|
|
95
95
|
|
|
96
96
|
if (checked) {
|
|
@@ -103,6 +103,10 @@ function (_React$Component) {
|
|
|
103
103
|
selectRows: selectRows,
|
|
104
104
|
selectAll: checked,
|
|
105
105
|
selectHalf: false
|
|
106
|
+
}, function () {
|
|
107
|
+
if (typeof _this.props.onCheckAll === 'function') {
|
|
108
|
+
_this.props.onCheckAll(_this.state.selectAll, _this.state.data);
|
|
109
|
+
}
|
|
106
110
|
});
|
|
107
111
|
});
|
|
108
112
|
|
|
@@ -219,8 +223,13 @@ function (_React$Component) {
|
|
|
219
223
|
contain: ''
|
|
220
224
|
},
|
|
221
225
|
selectAll: false,
|
|
226
|
+
//选中全部状态
|
|
222
227
|
selectHalf: false,
|
|
223
|
-
|
|
228
|
+
//半选中状态
|
|
229
|
+
selectRows: [],
|
|
230
|
+
//选中的数据列表
|
|
231
|
+
focus: -1 //当前显示焦点
|
|
232
|
+
|
|
224
233
|
};
|
|
225
234
|
_this.originalData = _this.state.data.slice(0);
|
|
226
235
|
_this.domId = 'table-' + _reactBootstrap.Common.RandomString(16);
|
|
@@ -298,7 +307,8 @@ function (_React$Component) {
|
|
|
298
307
|
total: nextProps.total,
|
|
299
308
|
selectRows: selectRows,
|
|
300
309
|
selectHalf: isHalf,
|
|
301
|
-
selectAll: allchk
|
|
310
|
+
selectAll: allchk,
|
|
311
|
+
focus: -1
|
|
302
312
|
});
|
|
303
313
|
}
|
|
304
314
|
}
|
|
@@ -317,6 +327,10 @@ function (_React$Component) {
|
|
|
317
327
|
return true;
|
|
318
328
|
}
|
|
319
329
|
|
|
330
|
+
if (this.props.focus && nextState.focus !== this.state.focus) {
|
|
331
|
+
return true;
|
|
332
|
+
}
|
|
333
|
+
|
|
320
334
|
return nextState.data !== this.state.data;
|
|
321
335
|
}
|
|
322
336
|
}, {
|
|
@@ -461,22 +475,17 @@ function (_React$Component) {
|
|
|
461
475
|
}, {
|
|
462
476
|
key: "setRowCheck",
|
|
463
477
|
value: function setRowCheck(checked, rowIdx) {
|
|
464
|
-
// let row = this.refs['row_'+rowIdx];
|
|
465
478
|
var selectRows = this.props.selectOnce ? [] : this.state.selectRows.slice();
|
|
466
|
-
console.log(checked, rowIdx, selectRows);
|
|
467
479
|
|
|
468
480
|
if (checked) {
|
|
469
481
|
if (!selectRows.includes(rowIdx)) {
|
|
470
482
|
selectRows.push(rowIdx);
|
|
471
|
-
}
|
|
472
|
-
|
|
483
|
+
}
|
|
473
484
|
} else {
|
|
474
485
|
if (selectRows.includes(rowIdx)) {
|
|
475
486
|
selectRows.splice(selectRows.indexOf(rowIdx), 1);
|
|
476
|
-
}
|
|
477
|
-
|
|
478
|
-
} // this.setState({selectRows: selectRows});
|
|
479
|
-
|
|
487
|
+
}
|
|
488
|
+
}
|
|
480
489
|
|
|
481
490
|
return selectRows;
|
|
482
491
|
}
|
|
@@ -490,13 +499,19 @@ function (_React$Component) {
|
|
|
490
499
|
_this6.props.onClick(row, i);
|
|
491
500
|
}
|
|
492
501
|
|
|
493
|
-
if (_this6.props.select) {
|
|
502
|
+
if (_this6.props.select && _this6.props.rowCheck) {
|
|
494
503
|
var _row = _this6.refs['row_' + i];
|
|
495
504
|
|
|
496
505
|
_row.changeHandler(null); // this.setRowCheck(!row.getChecked(),i);
|
|
497
506
|
// this.checkAllCheckHalf();
|
|
498
507
|
|
|
499
508
|
}
|
|
509
|
+
|
|
510
|
+
if (_this6.props.focus) {
|
|
511
|
+
_this6.setState({
|
|
512
|
+
focus: i === _this6.state.focus ? -1 : i
|
|
513
|
+
});
|
|
514
|
+
}
|
|
500
515
|
};
|
|
501
516
|
}
|
|
502
517
|
/**
|
|
@@ -803,33 +818,31 @@ function (_React$Component) {
|
|
|
803
818
|
value: function getSelectRows() {
|
|
804
819
|
var _this10 = this;
|
|
805
820
|
|
|
806
|
-
return this.selectRows.map(function (item) {
|
|
821
|
+
return this.state.selectRows.map(function (item) {
|
|
807
822
|
return _this10.state.data[item];
|
|
808
823
|
});
|
|
809
824
|
}
|
|
810
825
|
/**
|
|
811
826
|
* 设置选中的行
|
|
812
|
-
* @param key 对应行数据的KEY值
|
|
813
|
-
* @param list 要选中的数据值
|
|
827
|
+
* @param {string} key 对应行数据的KEY值
|
|
828
|
+
* @param {array} list 要选中的数据值
|
|
814
829
|
*/
|
|
815
830
|
|
|
816
831
|
}, {
|
|
817
832
|
key: "setSelectRows",
|
|
818
833
|
value: function setSelectRows(key, list) {
|
|
819
|
-
var
|
|
820
|
-
|
|
834
|
+
var selectRows = [];
|
|
821
835
|
this.state.data.forEach(function (row, i) {
|
|
822
|
-
if (list.
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
_this11.setRowCheck(true, i);
|
|
826
|
-
} else {
|
|
827
|
-
_this11.refs['row_' + i].setChecked(false);
|
|
828
|
-
|
|
829
|
-
_this11.setRowCheck(false, i);
|
|
836
|
+
if (list.includes(row[key])) {
|
|
837
|
+
selectRows.push(i);
|
|
830
838
|
}
|
|
831
839
|
});
|
|
832
|
-
this.
|
|
840
|
+
var selectAll = selectRows.length > 1 && selectRows.length === this.state.data.length;
|
|
841
|
+
this.setState({
|
|
842
|
+
selectRows: selectRows,
|
|
843
|
+
selectHalf: !selectAll,
|
|
844
|
+
selectAll: selectAll
|
|
845
|
+
});
|
|
833
846
|
}
|
|
834
847
|
/**
|
|
835
848
|
* binding column split
|
|
@@ -838,50 +851,50 @@ function (_React$Component) {
|
|
|
838
851
|
}, {
|
|
839
852
|
key: "bindSplit",
|
|
840
853
|
value: function bindSplit() {
|
|
841
|
-
var
|
|
854
|
+
var _this11 = this;
|
|
842
855
|
|
|
843
856
|
if (this.props.move) {
|
|
844
857
|
this.headerSplits.forEach(function (split) {
|
|
845
|
-
if (!
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
858
|
+
if (!_this11.drag) {
|
|
859
|
+
_this11.dragColumnLeft = 0;
|
|
860
|
+
_this11.dragWidth = 0;
|
|
861
|
+
_this11.drag = new _Drag["default"](_this11.split, split, {
|
|
849
862
|
start: function start(dragDom, eventDom) {
|
|
850
|
-
var xy = _reactBootstrap.Common.GetDomXY(eventDom,
|
|
863
|
+
var xy = _reactBootstrap.Common.GetDomXY(eventDom, _this11.mainDom);
|
|
851
864
|
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
dragDom.style.left =
|
|
865
|
+
_this11.dragWidth = parseInt(eventDom.parentNode.style.width);
|
|
866
|
+
_this11.dragColumnLeft = xy.left - _this11.table_rows.scrollLeft;
|
|
867
|
+
dragDom.style.left = _this11.dragColumnLeft + 'px';
|
|
855
868
|
dragDom.classList.remove('d-none');
|
|
856
869
|
return true;
|
|
857
870
|
},
|
|
858
871
|
move: function move(_move, dragDom, eventDom) {
|
|
859
|
-
if (
|
|
860
|
-
_move.x =
|
|
872
|
+
if (_this11.dragWidth + (_move.x - _this11.dragColumnLeft) < 50) {
|
|
873
|
+
_move.x = _this11.dragColumnLeft - _this11.dragWidth + 50;
|
|
861
874
|
}
|
|
862
875
|
},
|
|
863
876
|
end: function end(dragDom, eventDom) {
|
|
864
877
|
dragDom.classList.add('d-none');
|
|
865
878
|
var column_key = eventDom.dataset.key;
|
|
866
879
|
|
|
867
|
-
var diff = parseInt(dragDom.style.left) -
|
|
880
|
+
var diff = parseInt(dragDom.style.left) - _this11.dragColumnLeft;
|
|
868
881
|
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
882
|
+
_this11.width = parseInt(_this11.width) + diff + 'px';
|
|
883
|
+
_this11.table_head.style.width = _this11.width;
|
|
884
|
+
_this11.table_body.style.width = _this11.width;
|
|
872
885
|
|
|
873
|
-
if (
|
|
874
|
-
|
|
886
|
+
if (_this11.table_total) {
|
|
887
|
+
_this11.table_total.style.width = _this11.width;
|
|
875
888
|
}
|
|
876
889
|
|
|
877
890
|
document.querySelectorAll("#".concat(column_key)).forEach(function (item) {
|
|
878
|
-
item.style.width = "".concat(
|
|
891
|
+
item.style.width = "".concat(_this11.dragWidth + diff, "px");
|
|
879
892
|
});
|
|
880
893
|
return true;
|
|
881
894
|
}
|
|
882
895
|
});
|
|
883
896
|
} else {
|
|
884
|
-
|
|
897
|
+
_this11.drag.setEventDom(split);
|
|
885
898
|
}
|
|
886
899
|
});
|
|
887
900
|
}
|
|
@@ -1020,20 +1033,20 @@ function (_React$Component) {
|
|
|
1020
1033
|
}, {
|
|
1021
1034
|
key: "calcLocalTotal",
|
|
1022
1035
|
value: function calcLocalTotal(field) {
|
|
1023
|
-
var
|
|
1036
|
+
var _this12 = this;
|
|
1024
1037
|
|
|
1025
1038
|
return function (e) {
|
|
1026
|
-
var list =
|
|
1039
|
+
var list = _this12.state.data;
|
|
1027
1040
|
var total = 0;
|
|
1028
1041
|
list.forEach(function (item) {
|
|
1029
1042
|
if (!!parseFloat(item[field])) {
|
|
1030
1043
|
total += parseFloat(item[field]);
|
|
1031
1044
|
}
|
|
1032
1045
|
});
|
|
1033
|
-
var totalData = Object.assign({},
|
|
1046
|
+
var totalData = Object.assign({}, _this12.state.total);
|
|
1034
1047
|
totalData[field] = total.toFixed(2);
|
|
1035
1048
|
|
|
1036
|
-
|
|
1049
|
+
_this12.setState({
|
|
1037
1050
|
total: totalData
|
|
1038
1051
|
});
|
|
1039
1052
|
};
|
|
@@ -1041,11 +1054,11 @@ function (_React$Component) {
|
|
|
1041
1054
|
}, {
|
|
1042
1055
|
key: "render",
|
|
1043
1056
|
value: function render() {
|
|
1044
|
-
var
|
|
1057
|
+
var _this13 = this;
|
|
1045
1058
|
|
|
1046
1059
|
return _react["default"].createElement("div", {
|
|
1047
1060
|
ref: function ref(c) {
|
|
1048
|
-
return
|
|
1061
|
+
return _this13.mainDom = c;
|
|
1049
1062
|
},
|
|
1050
1063
|
className: this.getMainClasses(),
|
|
1051
1064
|
style: this.getStyles()
|
|
@@ -1057,7 +1070,7 @@ function (_React$Component) {
|
|
|
1057
1070
|
selector: "#table-body-com-".concat(this.domId)
|
|
1058
1071
|
})), this.renderFoot(), _react["default"].createElement("div", {
|
|
1059
1072
|
ref: function ref(c) {
|
|
1060
|
-
return
|
|
1073
|
+
return _this13.split = c;
|
|
1061
1074
|
},
|
|
1062
1075
|
className: "ck-split d-none"
|
|
1063
1076
|
}));
|
|
@@ -1065,15 +1078,15 @@ function (_React$Component) {
|
|
|
1065
1078
|
}, {
|
|
1066
1079
|
key: "renderHeader",
|
|
1067
1080
|
value: function renderHeader() {
|
|
1068
|
-
var
|
|
1081
|
+
var _this14 = this;
|
|
1069
1082
|
|
|
1070
1083
|
return _react["default"].createElement("div", {
|
|
1071
1084
|
ref: function ref(c) {
|
|
1072
|
-
return
|
|
1085
|
+
return _this14.tableHeader = c;
|
|
1073
1086
|
}
|
|
1074
1087
|
}, _react["default"].createElement("table", {
|
|
1075
1088
|
ref: function ref(c) {
|
|
1076
|
-
return
|
|
1089
|
+
return _this14.table_head = c;
|
|
1077
1090
|
},
|
|
1078
1091
|
id: "table-head-".concat(this.domId),
|
|
1079
1092
|
className: this.getClasses(),
|
|
@@ -1089,13 +1102,13 @@ function (_React$Component) {
|
|
|
1089
1102
|
icon: "list"
|
|
1090
1103
|
}) : _react["default"].createElement(_reactBootstrap.CCheckbox, {
|
|
1091
1104
|
ref: function ref(c) {
|
|
1092
|
-
return
|
|
1105
|
+
return _this14.allchk = c;
|
|
1093
1106
|
},
|
|
1094
1107
|
onChange: this.selectAll,
|
|
1095
1108
|
checked: this.state.selectAll,
|
|
1096
1109
|
half: this.state.selectHalf
|
|
1097
1110
|
})) : null, _react["default"].Children.map(this.props.children, function (item, key) {
|
|
1098
|
-
|
|
1111
|
+
_this14.cacheRow[item.props.field] = '';
|
|
1099
1112
|
|
|
1100
1113
|
if (!item || item.props.hide) {
|
|
1101
1114
|
return null;
|
|
@@ -1112,28 +1125,28 @@ function (_React$Component) {
|
|
|
1112
1125
|
|
|
1113
1126
|
var sort_icon = '';
|
|
1114
1127
|
|
|
1115
|
-
if (
|
|
1116
|
-
sort_icon = 'sort-alpha-' + (
|
|
1128
|
+
if (_this14.sortList[item.props.field]) {
|
|
1129
|
+
sort_icon = 'sort-alpha-' + (_this14.sortList[item.props.field] === 'asc' ? 'down' : 'up');
|
|
1117
1130
|
}
|
|
1118
1131
|
|
|
1119
1132
|
return _react["default"].createElement("th", {
|
|
1120
|
-
onContextMenu:
|
|
1121
|
-
id:
|
|
1133
|
+
onContextMenu: _this14.menuContextHandler,
|
|
1134
|
+
id: _this14.domId + '-' + key,
|
|
1122
1135
|
"data-key": 'head_' + key,
|
|
1123
1136
|
style: style
|
|
1124
|
-
},
|
|
1137
|
+
}, _this14.is_sort ? _react["default"].createElement("a", {
|
|
1125
1138
|
className: "ck-ctable-sort",
|
|
1126
1139
|
href: "javascript://",
|
|
1127
|
-
id: "".concat(
|
|
1140
|
+
id: "".concat(_this14.domId, "-sort-").concat(item.props.field),
|
|
1128
1141
|
"data-field": item.props.field,
|
|
1129
|
-
onClick:
|
|
1142
|
+
onClick: _this14.sortHandler
|
|
1130
1143
|
}, item.props.text, " ", _react["default"].createElement(_reactBootstrap.Icon, {
|
|
1131
1144
|
icon: sort_icon
|
|
1132
|
-
})) : item.props.text,
|
|
1145
|
+
})) : item.props.text, _this14.props.move ? _react["default"].createElement("span", {
|
|
1133
1146
|
ref: function ref(c) {
|
|
1134
|
-
return
|
|
1147
|
+
return _this14.headerSplits.push(c);
|
|
1135
1148
|
},
|
|
1136
|
-
"data-key":
|
|
1149
|
+
"data-key": _this14.domId + '-' + key,
|
|
1137
1150
|
className: "ck-column-split"
|
|
1138
1151
|
}) : null);
|
|
1139
1152
|
})))));
|
|
@@ -1141,38 +1154,40 @@ function (_React$Component) {
|
|
|
1141
1154
|
}, {
|
|
1142
1155
|
key: "renderRows",
|
|
1143
1156
|
value: function renderRows() {
|
|
1144
|
-
var
|
|
1157
|
+
var _this15 = this;
|
|
1145
1158
|
|
|
1146
1159
|
return _react["default"].createElement("div", {
|
|
1147
1160
|
ref: function ref(c) {
|
|
1148
|
-
return
|
|
1161
|
+
return _this15.table_rows = c;
|
|
1149
1162
|
},
|
|
1150
1163
|
id: "table-body-com-".concat(this.domId),
|
|
1151
1164
|
className: "flex-grow-1 rows",
|
|
1152
1165
|
onScroll: this.scrollHandler
|
|
1153
1166
|
}, _react["default"].createElement("table", {
|
|
1154
1167
|
ref: function ref(c) {
|
|
1155
|
-
return
|
|
1168
|
+
return _this15.table_body = c;
|
|
1156
1169
|
},
|
|
1157
1170
|
id: "table-body-".concat(this.domId),
|
|
1158
1171
|
className: this.getClasses(),
|
|
1159
1172
|
style: this.getTableStyles()
|
|
1160
1173
|
}, _react["default"].createElement("tbody", null, this.state.data.map(function (row, i) {
|
|
1161
|
-
if (
|
|
1162
|
-
return
|
|
1174
|
+
if (_this15.props.edit) {
|
|
1175
|
+
return _this15.renderEditRow(row, i);
|
|
1163
1176
|
}
|
|
1164
1177
|
|
|
1165
|
-
return
|
|
1178
|
+
return _this15.renderRow(row, i);
|
|
1166
1179
|
}), this.props.edit ? this.renderEditAddRow() : null)), this.props.menu ? this.renderMenu() : null, this.props.menu ? this.renderNumberMenu() : null);
|
|
1167
1180
|
}
|
|
1168
1181
|
}, {
|
|
1169
1182
|
key: "renderRow",
|
|
1170
1183
|
value: function renderRow(row, i, parentRow) {
|
|
1171
|
-
var
|
|
1184
|
+
var _this16 = this;
|
|
1172
1185
|
|
|
1173
1186
|
var checked = this.state.selectRows.indexOf(i) !== -1;
|
|
1187
|
+
var focus = i === this.state.focus && this.props.focus;
|
|
1188
|
+
var rowClass = focus ? 'ck-table-focus' : checked ? 'ck-table-selected' : null;
|
|
1174
1189
|
return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("tr", {
|
|
1175
|
-
className:
|
|
1190
|
+
className: rowClass,
|
|
1176
1191
|
onClick: this.clickHandler(row, i)
|
|
1177
1192
|
}, this.state.select ? _react["default"].createElement("th", {
|
|
1178
1193
|
style: {
|
|
@@ -1189,9 +1204,9 @@ function (_React$Component) {
|
|
|
1189
1204
|
} //set style
|
|
1190
1205
|
|
|
1191
1206
|
|
|
1192
|
-
var style = _objectSpread({},
|
|
1207
|
+
var style = _objectSpread({}, _this16.props.columnStyle);
|
|
1193
1208
|
|
|
1194
|
-
style.textAlign = item.props.align ||
|
|
1209
|
+
style.textAlign = item.props.align || _this16.props.align;
|
|
1195
1210
|
|
|
1196
1211
|
if (item.props.width) {
|
|
1197
1212
|
style.width = item.props.width;
|
|
@@ -1214,8 +1229,8 @@ function (_React$Component) {
|
|
|
1214
1229
|
|
|
1215
1230
|
if (item.props.children) {
|
|
1216
1231
|
return _react["default"].createElement("td", {
|
|
1217
|
-
onContextMenu:
|
|
1218
|
-
id:
|
|
1232
|
+
onContextMenu: _this16.menuContextHandler(dataType),
|
|
1233
|
+
id: _this16.domId + '-' + key,
|
|
1219
1234
|
"data-row": "".concat(i),
|
|
1220
1235
|
"data-field": item.props.field,
|
|
1221
1236
|
className: item.props.className,
|
|
@@ -1234,8 +1249,8 @@ function (_React$Component) {
|
|
|
1234
1249
|
}
|
|
1235
1250
|
|
|
1236
1251
|
return _react["default"].createElement("td", {
|
|
1237
|
-
onContextMenu:
|
|
1238
|
-
id:
|
|
1252
|
+
onContextMenu: _this16.menuContextHandler(dataType),
|
|
1253
|
+
id: _this16.domId + '-' + key,
|
|
1239
1254
|
"data-field": item.props.field,
|
|
1240
1255
|
style: style,
|
|
1241
1256
|
onClick: function onClick(e) {
|
|
@@ -1249,14 +1264,14 @@ function (_React$Component) {
|
|
|
1249
1264
|
}
|
|
1250
1265
|
},
|
|
1251
1266
|
"data-row": "".concat(i)
|
|
1252
|
-
}, item.props.type ?
|
|
1267
|
+
}, item.props.type ? _this16.renderEditComponent(item.props, row, i) : item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field]);
|
|
1253
1268
|
}
|
|
1254
1269
|
})));
|
|
1255
1270
|
}
|
|
1256
1271
|
}, {
|
|
1257
1272
|
key: "renderEditRow",
|
|
1258
1273
|
value: function renderEditRow(row, i) {
|
|
1259
|
-
var
|
|
1274
|
+
var _this17 = this;
|
|
1260
1275
|
|
|
1261
1276
|
return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("tr", {
|
|
1262
1277
|
className: this.props.onClick ? 'click-row' : null,
|
|
@@ -1276,9 +1291,9 @@ function (_React$Component) {
|
|
|
1276
1291
|
} //set style
|
|
1277
1292
|
|
|
1278
1293
|
|
|
1279
|
-
var style = _objectSpread({},
|
|
1294
|
+
var style = _objectSpread({}, _this17.props.columnStyle);
|
|
1280
1295
|
|
|
1281
|
-
style.textAlign = item.props.align ||
|
|
1296
|
+
style.textAlign = item.props.align || _this17.props.align;
|
|
1282
1297
|
|
|
1283
1298
|
if (item.props.width) {
|
|
1284
1299
|
style.width = item.props.width;
|
|
@@ -1286,9 +1301,9 @@ function (_React$Component) {
|
|
|
1286
1301
|
|
|
1287
1302
|
var dataType = 'text';
|
|
1288
1303
|
return _react["default"].createElement("td", {
|
|
1289
|
-
onContextMenu:
|
|
1304
|
+
onContextMenu: _this17.menuContextHandler(dataType),
|
|
1290
1305
|
className: item.props.disabled ? 'disabled' : '',
|
|
1291
|
-
id:
|
|
1306
|
+
id: _this17.domId + '-' + key,
|
|
1292
1307
|
"data-field": item.props.field,
|
|
1293
1308
|
style: style,
|
|
1294
1309
|
onClick: function onClick(e) {
|
|
@@ -1302,13 +1317,13 @@ function (_React$Component) {
|
|
|
1302
1317
|
}
|
|
1303
1318
|
},
|
|
1304
1319
|
"data-row": "".concat(i)
|
|
1305
|
-
}, item.props.disabled ? item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field] :
|
|
1320
|
+
}, item.props.disabled ? item.props.onFormat ? item.props.onFormat(row[item.props.field], row, item.props.field) : row[item.props.field] : _this17.renderEditComponent(item.props, row, i));
|
|
1306
1321
|
})));
|
|
1307
1322
|
}
|
|
1308
1323
|
}, {
|
|
1309
1324
|
key: "renderEditAddRow",
|
|
1310
1325
|
value: function renderEditAddRow() {
|
|
1311
|
-
var
|
|
1326
|
+
var _this18 = this;
|
|
1312
1327
|
|
|
1313
1328
|
return _react["default"].createElement("tr", {
|
|
1314
1329
|
id: this.domId + '-edit'
|
|
@@ -1330,14 +1345,14 @@ function (_React$Component) {
|
|
|
1330
1345
|
return _react["default"].createElement("td", {
|
|
1331
1346
|
style: style
|
|
1332
1347
|
}, _react["default"].createElement(_CTableInput["default"], {
|
|
1333
|
-
onFocus:
|
|
1348
|
+
onFocus: _this18.addNewHandler
|
|
1334
1349
|
}));
|
|
1335
1350
|
}));
|
|
1336
1351
|
}
|
|
1337
1352
|
}, {
|
|
1338
1353
|
key: "renderEditComponent",
|
|
1339
1354
|
value: function renderEditComponent(item, row, i) {
|
|
1340
|
-
var
|
|
1355
|
+
var _this19 = this;
|
|
1341
1356
|
|
|
1342
1357
|
switch (item.type) {
|
|
1343
1358
|
case "combo":
|
|
@@ -1369,7 +1384,7 @@ function (_React$Component) {
|
|
|
1369
1384
|
className: "d-inline",
|
|
1370
1385
|
width: "20px",
|
|
1371
1386
|
onChange: function onChange(chk, e) {
|
|
1372
|
-
|
|
1387
|
+
_this19.editHandler(e, chk, 'chk');
|
|
1373
1388
|
},
|
|
1374
1389
|
"data-row": i,
|
|
1375
1390
|
"data-field": item.field,
|
|
@@ -1409,7 +1424,7 @@ function (_React$Component) {
|
|
|
1409
1424
|
}, {
|
|
1410
1425
|
key: "renderTotal",
|
|
1411
1426
|
value: function renderTotal() {
|
|
1412
|
-
var
|
|
1427
|
+
var _this20 = this;
|
|
1413
1428
|
|
|
1414
1429
|
if (!this.state.total) {
|
|
1415
1430
|
return null;
|
|
@@ -1418,12 +1433,12 @@ function (_React$Component) {
|
|
|
1418
1433
|
var total = this.state.total;
|
|
1419
1434
|
return _react["default"].createElement("div", {
|
|
1420
1435
|
ref: function ref(c) {
|
|
1421
|
-
return
|
|
1436
|
+
return _this20.tableTotal = c;
|
|
1422
1437
|
},
|
|
1423
1438
|
className: "ck-ctable-total"
|
|
1424
1439
|
}, _react["default"].createElement("table", {
|
|
1425
1440
|
ref: function ref(c) {
|
|
1426
|
-
return
|
|
1441
|
+
return _this20.table_total = c;
|
|
1427
1442
|
},
|
|
1428
1443
|
id: "table-total-".concat(this.domId),
|
|
1429
1444
|
className: this.getClasses(),
|
|
@@ -1437,7 +1452,7 @@ function (_React$Component) {
|
|
|
1437
1452
|
return null;
|
|
1438
1453
|
}
|
|
1439
1454
|
|
|
1440
|
-
var align = item.props.align ||
|
|
1455
|
+
var align = item.props.align || _this20.props.align;
|
|
1441
1456
|
var style = {
|
|
1442
1457
|
'textAlign': align
|
|
1443
1458
|
};
|
|
@@ -1447,7 +1462,7 @@ function (_React$Component) {
|
|
|
1447
1462
|
}
|
|
1448
1463
|
|
|
1449
1464
|
return _react["default"].createElement("td", {
|
|
1450
|
-
id:
|
|
1465
|
+
id: _this20.domId + '-' + key,
|
|
1451
1466
|
"data-field": item.props.field,
|
|
1452
1467
|
style: style
|
|
1453
1468
|
}, item.props.onFormat ? item.props.onFormat(total[item.props.field], total, item.props.field) : total[item.props.field]);
|
|
@@ -1456,7 +1471,7 @@ function (_React$Component) {
|
|
|
1456
1471
|
}, {
|
|
1457
1472
|
key: "renderMenu",
|
|
1458
1473
|
value: function renderMenu() {
|
|
1459
|
-
var
|
|
1474
|
+
var _this21 = this;
|
|
1460
1475
|
|
|
1461
1476
|
var lang;
|
|
1462
1477
|
|
|
@@ -1475,7 +1490,7 @@ function (_React$Component) {
|
|
|
1475
1490
|
|
|
1476
1491
|
return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactBootstrap.Menu, {
|
|
1477
1492
|
ref: function ref(c) {
|
|
1478
|
-
return
|
|
1493
|
+
return _this21.mainMenu = c;
|
|
1479
1494
|
},
|
|
1480
1495
|
onClick: this.menuClickHandler
|
|
1481
1496
|
}, _react["default"].createElement(_reactBootstrap.Menu.Item, {
|
|
@@ -1493,7 +1508,7 @@ function (_React$Component) {
|
|
|
1493
1508
|
onClick: function onClick(e, field, data) {
|
|
1494
1509
|
var select = document.getSelection();
|
|
1495
1510
|
|
|
1496
|
-
|
|
1511
|
+
_this21.filterHandler(select.toString(), data.field, 'contain');
|
|
1497
1512
|
}
|
|
1498
1513
|
}, _react["default"].createElement(_reactBootstrap.Icon, {
|
|
1499
1514
|
className: "me-1",
|
|
@@ -1503,7 +1518,7 @@ function (_React$Component) {
|
|
|
1503
1518
|
onClick: function onClick(e, field, data) {
|
|
1504
1519
|
var select = document.getSelection();
|
|
1505
1520
|
|
|
1506
|
-
|
|
1521
|
+
_this21.filterHandler(select.toString(), data.field, 'exclude');
|
|
1507
1522
|
}
|
|
1508
1523
|
}, _react["default"].createElement(_reactBootstrap.Icon, {
|
|
1509
1524
|
className: "me-1",
|
|
@@ -1511,7 +1526,7 @@ function (_React$Component) {
|
|
|
1511
1526
|
}), lang['Filter Excluding Selection']) : null, this.is_filter || this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
|
|
1512
1527
|
field: "clear_filter",
|
|
1513
1528
|
onClick: function onClick() {
|
|
1514
|
-
|
|
1529
|
+
_this21.clearFilter();
|
|
1515
1530
|
}
|
|
1516
1531
|
}, _react["default"].createElement("span", {
|
|
1517
1532
|
className: "text-danger"
|
|
@@ -1533,13 +1548,13 @@ function (_React$Component) {
|
|
|
1533
1548
|
onChange: this.filterChangeHandler('equal'),
|
|
1534
1549
|
onMouseDown: stopEvent,
|
|
1535
1550
|
onEnter: function onEnter() {
|
|
1536
|
-
|
|
1551
|
+
_this21.filterHandler(_this21.state.filter.equal, _this21.mainMenu.data.field, 'equal');
|
|
1537
1552
|
}
|
|
1538
1553
|
}), _react["default"].createElement(_reactBootstrap.Button, {
|
|
1539
1554
|
size: "xs",
|
|
1540
1555
|
onMouseDown: stopEvent,
|
|
1541
1556
|
onClick: function onClick(e) {
|
|
1542
|
-
|
|
1557
|
+
_this21.filterHandler(_this21.state.filter.equal, _this21.mainMenu.data.field, 'equal');
|
|
1543
1558
|
},
|
|
1544
1559
|
icon: "search"
|
|
1545
1560
|
})) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
|
|
@@ -1555,13 +1570,13 @@ function (_React$Component) {
|
|
|
1555
1570
|
onChange: this.filterChangeHandler('start'),
|
|
1556
1571
|
onMouseDown: stopEvent,
|
|
1557
1572
|
onEnter: function onEnter() {
|
|
1558
|
-
|
|
1573
|
+
_this21.filterHandler(_this21.state.filter.start, _this21.mainMenu.data.field, 'start');
|
|
1559
1574
|
}
|
|
1560
1575
|
}), _react["default"].createElement(_reactBootstrap.Button, {
|
|
1561
1576
|
size: "xs",
|
|
1562
1577
|
onMouseDown: stopEvent,
|
|
1563
1578
|
onClick: function onClick(e) {
|
|
1564
|
-
|
|
1579
|
+
_this21.filterHandler(_this21.state.filter.start, _this21.mainMenu.data.field, 'start');
|
|
1565
1580
|
},
|
|
1566
1581
|
icon: "search"
|
|
1567
1582
|
})) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
|
|
@@ -1577,13 +1592,13 @@ function (_React$Component) {
|
|
|
1577
1592
|
onChange: this.filterChangeHandler('end'),
|
|
1578
1593
|
onMouseDown: stopEvent,
|
|
1579
1594
|
onEnter: function onEnter() {
|
|
1580
|
-
|
|
1595
|
+
_this21.filterHandler(_this21.state.filter.end, _this21.mainMenu.data.field, 'end');
|
|
1581
1596
|
}
|
|
1582
1597
|
}), _react["default"].createElement(_reactBootstrap.Button, {
|
|
1583
1598
|
size: "xs",
|
|
1584
1599
|
onMouseDown: stopEvent,
|
|
1585
1600
|
onClick: function onClick(e) {
|
|
1586
|
-
|
|
1601
|
+
_this21.filterHandler(_this21.state.filter.end, _this21.mainMenu.data.field, 'end');
|
|
1587
1602
|
},
|
|
1588
1603
|
icon: "search"
|
|
1589
1604
|
})) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
|
|
@@ -1599,13 +1614,13 @@ function (_React$Component) {
|
|
|
1599
1614
|
onChange: this.filterChangeHandler('contain'),
|
|
1600
1615
|
onMouseDown: stopEvent,
|
|
1601
1616
|
onEnter: function onEnter() {
|
|
1602
|
-
|
|
1617
|
+
_this21.filterHandler(_this21.state.filter.contain, _this21.mainMenu.data.field, 'contain');
|
|
1603
1618
|
}
|
|
1604
1619
|
}), _react["default"].createElement(_reactBootstrap.Button, {
|
|
1605
1620
|
size: "xs",
|
|
1606
1621
|
onMouseDown: stopEvent,
|
|
1607
1622
|
onClick: function onClick(e) {
|
|
1608
|
-
|
|
1623
|
+
_this21.filterHandler(_this21.state.filter.contain, _this21.mainMenu.data.field, 'contain');
|
|
1609
1624
|
},
|
|
1610
1625
|
icon: "search"
|
|
1611
1626
|
})) : null, this.is_filter ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
|
|
@@ -1622,7 +1637,7 @@ function (_React$Component) {
|
|
|
1622
1637
|
onChange: this.filterChangeHandler('condition'),
|
|
1623
1638
|
onMouseDown: stopEvent,
|
|
1624
1639
|
onEnter: function onEnter() {
|
|
1625
|
-
|
|
1640
|
+
_this21.filterHandler(_this21.state.filter.condition, _this21.mainMenu.data.field, 'condition');
|
|
1626
1641
|
}
|
|
1627
1642
|
})) : null, this.props.edit ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
|
|
1628
1643
|
step: true
|
|
@@ -1633,13 +1648,13 @@ function (_React$Component) {
|
|
|
1633
1648
|
}, lang['Clone Row']) : null, this.props.customMenu ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
|
|
1634
1649
|
step: true
|
|
1635
1650
|
}) : null, this.props.customMenu ? this.props.customMenu.map(function (menu) {
|
|
1636
|
-
return
|
|
1651
|
+
return _this21.explainCustomMenu(menu);
|
|
1637
1652
|
}) : null));
|
|
1638
1653
|
}
|
|
1639
1654
|
}, {
|
|
1640
1655
|
key: "renderNumberMenu",
|
|
1641
1656
|
value: function renderNumberMenu() {
|
|
1642
|
-
var
|
|
1657
|
+
var _this22 = this;
|
|
1643
1658
|
|
|
1644
1659
|
var lang;
|
|
1645
1660
|
|
|
@@ -1658,7 +1673,7 @@ function (_React$Component) {
|
|
|
1658
1673
|
|
|
1659
1674
|
return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactBootstrap.Menu, {
|
|
1660
1675
|
ref: function ref(c) {
|
|
1661
|
-
return
|
|
1676
|
+
return _this22.numMenu = c;
|
|
1662
1677
|
},
|
|
1663
1678
|
onClick: this.menuClickHandler
|
|
1664
1679
|
}, _react["default"].createElement(_reactBootstrap.Menu.Item, {
|
|
@@ -1676,7 +1691,7 @@ function (_React$Component) {
|
|
|
1676
1691
|
onClick: function onClick(e, field, data) {
|
|
1677
1692
|
var select = document.getSelection();
|
|
1678
1693
|
|
|
1679
|
-
|
|
1694
|
+
_this22.filterHandler(select.toString(), data.field, 'contain');
|
|
1680
1695
|
}
|
|
1681
1696
|
}, _react["default"].createElement(_reactBootstrap.Icon, {
|
|
1682
1697
|
className: "me-1",
|
|
@@ -1686,7 +1701,7 @@ function (_React$Component) {
|
|
|
1686
1701
|
onClick: function onClick(e, field, data) {
|
|
1687
1702
|
var select = document.getSelection();
|
|
1688
1703
|
|
|
1689
|
-
|
|
1704
|
+
_this22.filterHandler(select.toString(), data.field, 'exclude');
|
|
1690
1705
|
}
|
|
1691
1706
|
}, _react["default"].createElement(_reactBootstrap.Icon, {
|
|
1692
1707
|
className: "me-1",
|
|
@@ -1694,7 +1709,7 @@ function (_React$Component) {
|
|
|
1694
1709
|
}), lang['Filter Excluding Selection']) : null, this.is_filter || this.is_sort ? _react["default"].createElement(_reactBootstrap.Menu.Item, {
|
|
1695
1710
|
field: "clear_filter",
|
|
1696
1711
|
onClick: function onClick() {
|
|
1697
|
-
|
|
1712
|
+
_this22.clearFilter();
|
|
1698
1713
|
}
|
|
1699
1714
|
}, _react["default"].createElement("span", {
|
|
1700
1715
|
className: "text-danger"
|
|
@@ -1715,14 +1730,14 @@ function (_React$Component) {
|
|
|
1715
1730
|
onChange: this.filterChangeHandler('condition'),
|
|
1716
1731
|
onMouseDown: stopEvent,
|
|
1717
1732
|
onEnter: function onEnter() {
|
|
1718
|
-
|
|
1733
|
+
_this22.filterHandler(_this22.state.filter.condition, _this22.numMenu.data.field, 'condition');
|
|
1719
1734
|
}
|
|
1720
1735
|
}), _react["default"].createElement("div", null, "and,or,between,>,>=,<,<=,=")) : null));
|
|
1721
1736
|
}
|
|
1722
1737
|
}, {
|
|
1723
1738
|
key: "explainCustomMenu",
|
|
1724
1739
|
value: function explainCustomMenu(menu) {
|
|
1725
|
-
var
|
|
1740
|
+
var _this23 = this;
|
|
1726
1741
|
|
|
1727
1742
|
if (menu.children && menu.children instanceof Array) {
|
|
1728
1743
|
return _react["default"].createElement(_reactBootstrap.Menu.Item, {
|
|
@@ -1730,7 +1745,7 @@ function (_React$Component) {
|
|
|
1730
1745
|
text: menu.text,
|
|
1731
1746
|
child: true
|
|
1732
1747
|
}, menu.children.map(function (item) {
|
|
1733
|
-
return
|
|
1748
|
+
return _this23.explainCustomMenu(item);
|
|
1734
1749
|
}));
|
|
1735
1750
|
} else {
|
|
1736
1751
|
return _react["default"].createElement(_reactBootstrap.Menu.Item, {
|
|
@@ -1796,6 +1811,8 @@ CTable.propTypes = {
|
|
|
1796
1811
|
onClick: _propTypes["default"].func,
|
|
1797
1812
|
//选择事件
|
|
1798
1813
|
onCheck: _propTypes["default"].func,
|
|
1814
|
+
//选择所有
|
|
1815
|
+
onCheckAll: _propTypes["default"].func,
|
|
1799
1816
|
//过滤事件
|
|
1800
1817
|
onFilter: _propTypes["default"].func,
|
|
1801
1818
|
//排序事件
|
|
@@ -1846,7 +1863,13 @@ CTable.propTypes = {
|
|
|
1846
1863
|
//自定义显示语言
|
|
1847
1864
|
lang: _propTypes["default"].object,
|
|
1848
1865
|
source: _propTypes["default"].string,
|
|
1849
|
-
sourceFunc: _propTypes["default"].func
|
|
1866
|
+
sourceFunc: _propTypes["default"].func,
|
|
1867
|
+
//是否显示全部选取
|
|
1868
|
+
allSelect: _propTypes["default"].bool,
|
|
1869
|
+
//focus 是否显示焦点
|
|
1870
|
+
focus: _propTypes["default"].bool,
|
|
1871
|
+
//是否全行点选
|
|
1872
|
+
rowCheck: _propTypes["default"].bool
|
|
1850
1873
|
};
|
|
1851
1874
|
CTable.defaultProps = {
|
|
1852
1875
|
data: [],
|
|
@@ -1869,7 +1892,10 @@ CTable.defaultProps = {
|
|
|
1869
1892
|
showPages: 10,
|
|
1870
1893
|
source: null,
|
|
1871
1894
|
total: null,
|
|
1872
|
-
lang: 'en'
|
|
1895
|
+
lang: 'en',
|
|
1896
|
+
allSelect: true,
|
|
1897
|
+
rowCheck: false,
|
|
1898
|
+
focus: true
|
|
1873
1899
|
};
|
|
1874
1900
|
var _default = CTable;
|
|
1875
1901
|
exports["default"] = _default;
|