shineout 1.11.1 → 1.12.0-rc.1
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/css/Scroll/Scroll.js +43 -4
- package/css/Table/SeperateTable.js +47 -6
- package/css/Table/SimpleTable.js +67 -18
- package/css/Table/Tfoot.js +105 -0
- package/css/Table/index.d.ts +11 -0
- package/css/Table/styles/table.css +32 -4
- package/css/index.d.ts +3 -2
- package/css/index.js +1 -1
- package/dist/shineout.js +6964 -4217
- package/dist/shineout.js.map +1 -1
- package/dist/shineout.min.js +1 -1
- package/dist/theme.antd.css +1 -1
- package/dist/theme.antd2.css +1 -1
- package/dist/theme.default.css +1 -1
- package/dist/theme.shineout.css +1 -1
- package/es/Scroll/Scroll.js +43 -4
- package/es/Table/SeperateTable.js +44 -6
- package/es/Table/SimpleTable.js +63 -19
- package/es/Table/Tfoot.js +93 -0
- package/es/Table/index.d.ts +11 -0
- package/es/Table/styles/table.less +23 -1
- package/es/index.d.ts +3 -2
- package/es/index.js +1 -1
- package/lib/Scroll/Scroll.js +43 -4
- package/lib/Table/SeperateTable.js +47 -6
- package/lib/Table/SimpleTable.js +67 -18
- package/lib/Table/Tfoot.js +105 -0
- package/lib/Table/index.d.ts +11 -0
- package/lib/Table/styles/table.less +23 -1
- package/lib/index.d.ts +3 -2
- package/lib/index.js +1 -1
- package/package.json +1 -1
package/css/Scroll/Scroll.js
CHANGED
|
@@ -59,6 +59,7 @@ function (_PureComponent) {
|
|
|
59
59
|
_this.cacheHeight = 0;
|
|
60
60
|
_this.bindInner = _this.bindInner.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
61
61
|
_this.bindWheel = _this.bindWheel.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
62
|
+
_this.bindFooter = _this.bindFooter.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
62
63
|
_this.setRect = _this.setRect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
63
64
|
_this.handleScrollX = _this.handleScrollX.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
64
65
|
_this.handleScrollY = _this.handleScrollY.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
@@ -106,6 +107,12 @@ function (_PureComponent) {
|
|
|
106
107
|
this.wheelElement.removeEventListener('touchmove', this.handleTouchMove);
|
|
107
108
|
this.inner.removeEventListener('scroll', this.handleInnerScroll);
|
|
108
109
|
this.wheelElement.removeEventListener('scroll', this.handleInnerScroll);
|
|
110
|
+
|
|
111
|
+
if (this.footerElement) {
|
|
112
|
+
this.footerElement.removeEventListener('wheel', this.handleWheel);
|
|
113
|
+
this.footerElement.removeEventListener('touchstart', this.handleTouchStart);
|
|
114
|
+
this.footerElement.removeEventListener('touchmove', this.handleTouchMove);
|
|
115
|
+
}
|
|
109
116
|
};
|
|
110
117
|
|
|
111
118
|
_proto.getWheelRect = function getWheelRect() {
|
|
@@ -173,6 +180,28 @@ function (_PureComponent) {
|
|
|
173
180
|
this.wheelElement = el;
|
|
174
181
|
};
|
|
175
182
|
|
|
183
|
+
_proto.bindFooter = function bindFooter(el) {
|
|
184
|
+
if (this.footerElement) {
|
|
185
|
+
this.footerElement.removeEventListener('wheel', this.handleWheel);
|
|
186
|
+
this.footerElement.removeEventListener('touchstart', this.handleTouchStart);
|
|
187
|
+
this.footerElement.removeEventListener('touchmove', this.handleTouchMove);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
if (el) {
|
|
191
|
+
el.addEventListener('wheel', this.handleWheel, {
|
|
192
|
+
passive: false
|
|
193
|
+
});
|
|
194
|
+
el.addEventListener('touchstart', this.handleTouchStart, {
|
|
195
|
+
passive: true
|
|
196
|
+
});
|
|
197
|
+
el.addEventListener('touchmove', this.handleTouchMove, {
|
|
198
|
+
passive: false
|
|
199
|
+
});
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
this.footerElement = el;
|
|
203
|
+
};
|
|
204
|
+
|
|
176
205
|
_proto.boundleScroll = function boundleScroll() {
|
|
177
206
|
/*
|
|
178
207
|
this.locked = true
|
|
@@ -225,11 +254,17 @@ function (_PureComponent) {
|
|
|
225
254
|
}
|
|
226
255
|
|
|
227
256
|
var target = (0, _element.getParent)(event.target, "." + (0, _styles.scrollClass)('_'));
|
|
228
|
-
|
|
257
|
+
var inFooter = false;
|
|
258
|
+
|
|
259
|
+
if (this.footerElement) {
|
|
260
|
+
inFooter = this.footerElement === event.target || this.footerElement.contains(event.target);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
if (target !== this.wheelElement && !inFooter) return;
|
|
229
264
|
var wheel = (0, _normalizeWheel.default)(event);
|
|
230
265
|
this.setBaseScrollHeightRatio(wheel.pixelY);
|
|
231
266
|
if (scrollX) this.pixelX = (0, _config.isRTL)() ? this.pixelX - wheel.pixelX : this.pixelX + wheel.pixelX;
|
|
232
|
-
if (scrollY) this.pixelY += wheel.pixelY * this.baseScrollRatio;
|
|
267
|
+
if (scrollY && !inFooter) this.pixelY += wheel.pixelY * this.baseScrollRatio;
|
|
233
268
|
|
|
234
269
|
if (Math.abs(wheel.pixelX) > Math.abs(wheel.pixelY)) {
|
|
235
270
|
event.preventDefault();
|
|
@@ -335,7 +370,7 @@ function (_PureComponent) {
|
|
|
335
370
|
var yLength = scrollHeight < height ? scrollHeight : height;
|
|
336
371
|
this.wheelY = scrollY && Math.ceil(scrollHeight) > Math.ceil(yLength);
|
|
337
372
|
this.wheelX = scrollX && Math.ceil(scrollWidth) > Math.ceil(width);
|
|
338
|
-
return _react.default.createElement("div", {
|
|
373
|
+
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
|
|
339
374
|
style: style,
|
|
340
375
|
ref: this.bindWheel,
|
|
341
376
|
className: className
|
|
@@ -368,7 +403,10 @@ function (_PureComponent) {
|
|
|
368
403
|
scrollLength: scrollWidth,
|
|
369
404
|
offset: left,
|
|
370
405
|
onScroll: this.handleScrollX
|
|
371
|
-
}))
|
|
406
|
+
})), this.props.footer && _react.default.createElement("div", {
|
|
407
|
+
ref: this.bindFooter,
|
|
408
|
+
className: (0, _styles.scrollClass)('footer')
|
|
409
|
+
}, this.props.footer));
|
|
372
410
|
};
|
|
373
411
|
|
|
374
412
|
return Scroll;
|
|
@@ -384,6 +422,7 @@ Scroll.propTypes = (0, _objectSpread2.default)({}, (0, _proptypes.getProps)(_pro
|
|
|
384
422
|
scrollX: _propTypes.default.bool.isRequired,
|
|
385
423
|
scrollY: _propTypes.default.bool.isRequired,
|
|
386
424
|
stable: _propTypes.default.bool,
|
|
425
|
+
footer: _propTypes.default.node,
|
|
387
426
|
innerScrollAttr: _propTypes.default.arrayOf(_propTypes.default.string)
|
|
388
427
|
});
|
|
389
428
|
Scroll.defaultProps = (0, _objectSpread2.default)({}, _proptypes.defaultProps, {
|
|
@@ -45,6 +45,8 @@ var _Thead = _interopRequireDefault(require("./Thead"));
|
|
|
45
45
|
|
|
46
46
|
var _Tbody = _interopRequireDefault(require("./Tbody"));
|
|
47
47
|
|
|
48
|
+
var _Tfoot = _interopRequireDefault(require("./Tfoot"));
|
|
49
|
+
|
|
48
50
|
var _is = require("../utils/is");
|
|
49
51
|
|
|
50
52
|
var _context = require("./context");
|
|
@@ -73,6 +75,7 @@ function (_PureComponent) {
|
|
|
73
75
|
_this.bindRealTbody = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'realTbody');
|
|
74
76
|
_this.bindThead = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'thead');
|
|
75
77
|
_this.bindHeadWrapper = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'headWrapper');
|
|
78
|
+
_this.bindFoot = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'tfoot');
|
|
76
79
|
_this.setRowHeight = _this.setRowHeight.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
77
80
|
_this.handleColgroup = _this.handleColgroup.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
78
81
|
_this.handleScroll = _this.handleScroll.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
@@ -412,8 +415,12 @@ function (_PureComponent) {
|
|
|
412
415
|
(0, _translate.setTranslate)(this.thead, "-" + left + "px", '0');
|
|
413
416
|
}
|
|
414
417
|
|
|
418
|
+
if (this.tfoot) {
|
|
419
|
+
(0, _translate.setTranslate)(this.tfoot, "-" + left + "px", '0');
|
|
420
|
+
}
|
|
421
|
+
|
|
415
422
|
;
|
|
416
|
-
[this.thead, this.tbody].forEach(function (el) {
|
|
423
|
+
[this.thead, this.tbody, this.tfoot].forEach(function (el) {
|
|
417
424
|
if (!el) return;
|
|
418
425
|
[].forEach.call(el.parentNode.querySelectorAll('td, th'), function (cell) {
|
|
419
426
|
if (cell.classList.contains((0, _styles.tableClass)(_Td.CLASS_FIXED_LEFT))) {
|
|
@@ -666,7 +673,8 @@ function (_PureComponent) {
|
|
|
666
673
|
scrollWidth: contentWidth,
|
|
667
674
|
onScroll: this.handleScroll,
|
|
668
675
|
className: _styles.tableClass.apply(void 0, ['body'].concat(floatClass)),
|
|
669
|
-
innerScrollAttr: innerScrollAttr
|
|
676
|
+
innerScrollAttr: innerScrollAttr,
|
|
677
|
+
footer: this.renderFooter(floatClass)
|
|
670
678
|
}, _react.default.createElement("div", {
|
|
671
679
|
ref: this.bindTbody,
|
|
672
680
|
className: (0, _styles.tableClass)('scroll-inner'),
|
|
@@ -747,10 +755,42 @@ function (_PureComponent) {
|
|
|
747
755
|
return header;
|
|
748
756
|
};
|
|
749
757
|
|
|
750
|
-
_proto.
|
|
758
|
+
_proto.renderFooter = function renderFooter(floatClass) {
|
|
751
759
|
var _this$props9 = this.props,
|
|
752
|
-
|
|
753
|
-
|
|
760
|
+
columns = _this$props9.columns,
|
|
761
|
+
width = _this$props9.width,
|
|
762
|
+
columnResizable = _this$props9.columnResizable,
|
|
763
|
+
bordered = _this$props9.bordered,
|
|
764
|
+
summary = _this$props9.summary,
|
|
765
|
+
data = _this$props9.data,
|
|
766
|
+
fixed = _this$props9.fixed;
|
|
767
|
+
var colgroup = this.state.colgroup;
|
|
768
|
+
if (!(data && data.length)) return null;
|
|
769
|
+
if (!(summary && summary.length)) return null;
|
|
770
|
+
var scrollX = fixed === 'x' || fixed === 'both';
|
|
771
|
+
|
|
772
|
+
var footer = _react.default.createElement("div", {
|
|
773
|
+
key: "foot",
|
|
774
|
+
className: _styles.tableClass.apply(void 0, ['foot'].concat(floatClass, [scrollX && 'foot-scroll-x']))
|
|
775
|
+
}, _react.default.createElement("table", {
|
|
776
|
+
ref: this.bindFoot,
|
|
777
|
+
style: {
|
|
778
|
+
width: width
|
|
779
|
+
},
|
|
780
|
+
className: (0, _styles.tableClass)(bordered && 'table-bordered')
|
|
781
|
+
}, _react.default.createElement(_Colgroup.default, {
|
|
782
|
+
colgroup: colgroup,
|
|
783
|
+
columns: columns,
|
|
784
|
+
resizable: columnResizable && this.lastScrollArgs[4]
|
|
785
|
+
}), _react.default.createElement(_Tfoot.default, this.props)));
|
|
786
|
+
|
|
787
|
+
return footer;
|
|
788
|
+
};
|
|
789
|
+
|
|
790
|
+
_proto.render = function render() {
|
|
791
|
+
var _this$props10 = this.props,
|
|
792
|
+
fixed = _this$props10.fixed,
|
|
793
|
+
hideHeader = _this$props10.hideHeader;
|
|
754
794
|
var _this$state3 = this.state,
|
|
755
795
|
scrollLeft = _this$state3.scrollLeft,
|
|
756
796
|
floatFixed = _this$state3.floatFixed;
|
|
@@ -792,7 +832,8 @@ SeperateTable.propTypes = (0, _objectSpread2.default)({}, (0, _proptypes.getProp
|
|
|
792
832
|
onResize: _propTypes.default.func,
|
|
793
833
|
innerScrollAttr: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
794
834
|
sticky: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
|
|
795
|
-
hideHeader: _propTypes.default.bool
|
|
835
|
+
hideHeader: _propTypes.default.bool,
|
|
836
|
+
summary: _propTypes.default.array
|
|
796
837
|
});
|
|
797
838
|
SeperateTable.defaultProps = {
|
|
798
839
|
data: undefined,
|
package/css/Table/SimpleTable.js
CHANGED
|
@@ -29,6 +29,8 @@ var _Tbody = _interopRequireDefault(require("./Tbody"));
|
|
|
29
29
|
|
|
30
30
|
var _Thead = _interopRequireDefault(require("./Thead"));
|
|
31
31
|
|
|
32
|
+
var _Tfoot = _interopRequireDefault(require("./Tfoot"));
|
|
33
|
+
|
|
32
34
|
var _shallowEqual = require("../utils/shallowEqual");
|
|
33
35
|
|
|
34
36
|
var _Sticky = _interopRequireDefault(require("../Sticky"));
|
|
@@ -50,12 +52,14 @@ function (_PureComponent) {
|
|
|
50
52
|
_this = _PureComponent.call(this, props) || this;
|
|
51
53
|
_this.state = {
|
|
52
54
|
colgroup: undefined,
|
|
53
|
-
|
|
55
|
+
overHeight: false,
|
|
56
|
+
overWidth: false,
|
|
54
57
|
resize: false
|
|
55
58
|
};
|
|
56
59
|
_this.handleSortChange = _this.handleSortChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
57
60
|
_this.bindHeader = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'header');
|
|
58
61
|
_this.bindBody = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'body');
|
|
62
|
+
_this.bindFooter = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'footer');
|
|
59
63
|
_this.handleScroll = _this.handleScroll.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
60
64
|
_this.handleColgroup = _this.handleColgroup.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
61
65
|
_this.resetColGroup = _this.resetColGroup.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
|
@@ -112,11 +116,14 @@ function (_PureComponent) {
|
|
|
112
116
|
};
|
|
113
117
|
|
|
114
118
|
_proto.scrollCheck = function scrollCheck() {
|
|
115
|
-
var scrollAble = this.state.scrollAble;
|
|
116
119
|
if (!this.body) return;
|
|
117
120
|
var overHeight = this.body.scrollHeight > this.body.clientHeight;
|
|
118
|
-
|
|
119
|
-
|
|
121
|
+
var overWidth = this.body.scrollWidth > this.body.clientWidth;
|
|
122
|
+
if (overWidth !== this.state.overWidth) this.setState({
|
|
123
|
+
overWidth: overWidth
|
|
124
|
+
});
|
|
125
|
+
if (overHeight !== this.state.overHeight) this.setState({
|
|
126
|
+
overHeight: overHeight
|
|
120
127
|
});
|
|
121
128
|
};
|
|
122
129
|
|
|
@@ -164,6 +171,7 @@ function (_PureComponent) {
|
|
|
164
171
|
var scrollLeft = currentTarget.scrollLeft;
|
|
165
172
|
setScrollLeft(this.header, scrollLeft);
|
|
166
173
|
setScrollLeft(this.body, scrollLeft);
|
|
174
|
+
setScrollLeft(this.footer, scrollLeft);
|
|
167
175
|
};
|
|
168
176
|
|
|
169
177
|
_proto.renderHeader = function renderHeader() {
|
|
@@ -177,7 +185,7 @@ function (_PureComponent) {
|
|
|
177
185
|
bordered = _this$props2.bordered;
|
|
178
186
|
var _this$state = this.state,
|
|
179
187
|
colgroup = _this$state.colgroup,
|
|
180
|
-
|
|
188
|
+
overHeight = _this$state.overHeight;
|
|
181
189
|
|
|
182
190
|
var inner = _react.default.createElement("table", {
|
|
183
191
|
style: {
|
|
@@ -196,7 +204,7 @@ function (_PureComponent) {
|
|
|
196
204
|
|
|
197
205
|
var empty = data.length === 0;
|
|
198
206
|
var headerStyle = {};
|
|
199
|
-
if (!empty) headerStyle.overflowY =
|
|
207
|
+
if (!empty) headerStyle.overflowY = overHeight ? 'scroll' : 'hidden';
|
|
200
208
|
|
|
201
209
|
var header = _react.default.createElement("div", {
|
|
202
210
|
key: "head",
|
|
@@ -217,17 +225,57 @@ function (_PureComponent) {
|
|
|
217
225
|
return header;
|
|
218
226
|
};
|
|
219
227
|
|
|
220
|
-
_proto.
|
|
228
|
+
_proto.renderFooter = function renderFooter() {
|
|
221
229
|
var _this$props3 = this.props,
|
|
222
230
|
columns = _this$props3.columns,
|
|
223
231
|
width = _this$props3.width,
|
|
224
|
-
|
|
232
|
+
data = _this$props3.data,
|
|
225
233
|
columnResizable = _this$props3.columnResizable,
|
|
226
234
|
bordered = _this$props3.bordered,
|
|
227
|
-
|
|
235
|
+
summary = _this$props3.summary;
|
|
228
236
|
var _this$state2 = this.state,
|
|
229
237
|
colgroup = _this$state2.colgroup,
|
|
230
|
-
|
|
238
|
+
overHeight = _this$state2.overHeight,
|
|
239
|
+
overWidth = _this$state2.overWidth;
|
|
240
|
+
if (!(data && data.length)) return null;
|
|
241
|
+
if (!(summary && summary.length)) return null;
|
|
242
|
+
|
|
243
|
+
var inner = _react.default.createElement("table", {
|
|
244
|
+
style: {
|
|
245
|
+
width: width
|
|
246
|
+
},
|
|
247
|
+
className: (0, _styles.tableClass)(bordered && 'table-bordered')
|
|
248
|
+
}, _react.default.createElement(_Colgroup.default, {
|
|
249
|
+
colgroup: colgroup || this.lastColGroup,
|
|
250
|
+
columns: columns,
|
|
251
|
+
resizable: columnResizable
|
|
252
|
+
}), _react.default.createElement(_Tfoot.default, this.props));
|
|
253
|
+
|
|
254
|
+
var footStyle = {};
|
|
255
|
+
footStyle.overflowY = overHeight ? 'scroll' : 'hidden';
|
|
256
|
+
|
|
257
|
+
var footer = _react.default.createElement("div", {
|
|
258
|
+
key: "foot",
|
|
259
|
+
style: footStyle,
|
|
260
|
+
className: (0, _styles.tableClass)('foot', overWidth && 'foot-scroll-x', 'simple-foot'),
|
|
261
|
+
ref: this.bindFooter,
|
|
262
|
+
onScroll: this.handleScroll
|
|
263
|
+
}, inner);
|
|
264
|
+
|
|
265
|
+
return footer;
|
|
266
|
+
};
|
|
267
|
+
|
|
268
|
+
_proto.renderBody = function renderBody() {
|
|
269
|
+
var _this$props4 = this.props,
|
|
270
|
+
columns = _this$props4.columns,
|
|
271
|
+
width = _this$props4.width,
|
|
272
|
+
fixed = _this$props4.fixed,
|
|
273
|
+
columnResizable = _this$props4.columnResizable,
|
|
274
|
+
bordered = _this$props4.bordered,
|
|
275
|
+
others = (0, _objectWithoutPropertiesLoose2.default)(_this$props4, ["columns", "width", "fixed", "columnResizable", "bordered"]);
|
|
276
|
+
var _this$state3 = this.state,
|
|
277
|
+
colgroup = _this$state3.colgroup,
|
|
278
|
+
resize = _this$state3.resize;
|
|
231
279
|
var minWidthSup = columns.find(function (d) {
|
|
232
280
|
return d.minWidth;
|
|
233
281
|
});
|
|
@@ -257,19 +305,19 @@ function (_PureComponent) {
|
|
|
257
305
|
};
|
|
258
306
|
|
|
259
307
|
_proto.render = function render() {
|
|
260
|
-
var _this$
|
|
261
|
-
columns = _this$
|
|
262
|
-
width = _this$
|
|
263
|
-
children = _this$
|
|
264
|
-
hideHeader = _this$
|
|
265
|
-
bordered = _this$
|
|
308
|
+
var _this$props5 = this.props,
|
|
309
|
+
columns = _this$props5.columns,
|
|
310
|
+
width = _this$props5.width,
|
|
311
|
+
children = _this$props5.children,
|
|
312
|
+
hideHeader = _this$props5.hideHeader,
|
|
313
|
+
bordered = _this$props5.bordered;
|
|
266
314
|
if (!columns || columns.length === 0) return _react.default.createElement("table", {
|
|
267
315
|
style: {
|
|
268
316
|
width: width
|
|
269
317
|
},
|
|
270
318
|
className: (0, _styles.tableClass)(bordered && 'table-bordered')
|
|
271
319
|
}, children);
|
|
272
|
-
return [hideHeader ? null : this.renderHeader(), this.renderBody(), children];
|
|
320
|
+
return [hideHeader ? null : this.renderHeader(), this.renderBody(), this.renderFooter(), children];
|
|
273
321
|
};
|
|
274
322
|
|
|
275
323
|
return SimpleTable;
|
|
@@ -287,7 +335,8 @@ SimpleTable.propTypes = {
|
|
|
287
335
|
columnResizable: _propTypes.default.bool,
|
|
288
336
|
sticky: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
|
|
289
337
|
hideHeader: _propTypes.default.bool,
|
|
290
|
-
bordered: _propTypes.default.bool
|
|
338
|
+
bordered: _propTypes.default.bool,
|
|
339
|
+
summary: _propTypes.default.array
|
|
291
340
|
};
|
|
292
341
|
SimpleTable.defaultProps = {
|
|
293
342
|
data: undefined,
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
exports.__esModule = true;
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _index = require("./styles/index");
|
|
15
|
+
|
|
16
|
+
var _is = require("../utils/is");
|
|
17
|
+
|
|
18
|
+
var Tfoot =
|
|
19
|
+
/*#__PURE__*/
|
|
20
|
+
function (_React$PureComponent) {
|
|
21
|
+
(0, _inheritsLoose2.default)(Tfoot, _React$PureComponent);
|
|
22
|
+
|
|
23
|
+
function Tfoot() {
|
|
24
|
+
return _React$PureComponent.apply(this, arguments) || this;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
var _proto = Tfoot.prototype;
|
|
28
|
+
|
|
29
|
+
_proto.getTrs = function getTrs() {
|
|
30
|
+
var _this$props$summary = this.props.summary,
|
|
31
|
+
summary = _this$props$summary === void 0 ? [] : _this$props$summary;
|
|
32
|
+
|
|
33
|
+
if (!(0, _is.isArray)(summary[0])) {
|
|
34
|
+
summary = [summary];
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
var trs = [];
|
|
38
|
+
|
|
39
|
+
for (var i = 0; i < summary.length; i++) {
|
|
40
|
+
var row = summary[i];
|
|
41
|
+
trs[i] = [];
|
|
42
|
+
var index = 0;
|
|
43
|
+
|
|
44
|
+
for (var j = 0; j < row.length; j++) {
|
|
45
|
+
var item = row[j];
|
|
46
|
+
var nextIndex = index + (item.colSpan || 1);
|
|
47
|
+
trs[i].push(this.renderTd(item, index));
|
|
48
|
+
index = nextIndex;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
return trs;
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
_proto.renderTd = function renderTd(item, index) {
|
|
56
|
+
var render = item.render,
|
|
57
|
+
_item$colSpan = item.colSpan,
|
|
58
|
+
colSpan = _item$colSpan === void 0 ? 1 : _item$colSpan;
|
|
59
|
+
var columns = this.props.columns;
|
|
60
|
+
var content = render();
|
|
61
|
+
var fixed = {};
|
|
62
|
+
var isLast = index + colSpan - 1 >= columns.length - 1;
|
|
63
|
+
|
|
64
|
+
for (var i = 0; i < colSpan; i++) {
|
|
65
|
+
var col = columns[index + i] || {};
|
|
66
|
+
|
|
67
|
+
if (col.fixed) {
|
|
68
|
+
fixed["fixed-" + col.fixed] = true;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
if (col.firstFixed) {
|
|
72
|
+
fixed['fixed-first'] = true;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if (col.lastFixed) {
|
|
76
|
+
fixed['fixed-last'] = true;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
return _react.default.createElement("td", {
|
|
81
|
+
key: index,
|
|
82
|
+
colSpan: colSpan,
|
|
83
|
+
className: _index.tableClass.apply(void 0, Object.keys(fixed).concat([isLast && 'ignore-right-border']))
|
|
84
|
+
}, content);
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
_proto.render = function render() {
|
|
88
|
+
var trs = this.getTrs();
|
|
89
|
+
return _react.default.createElement("tfoot", null, trs.map(function (tr, index) {
|
|
90
|
+
return _react.default.createElement("tr", {
|
|
91
|
+
key: index,
|
|
92
|
+
className: (0, _index.tableClass)('normal')
|
|
93
|
+
}, tr);
|
|
94
|
+
}));
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
return Tfoot;
|
|
98
|
+
}(_react.default.PureComponent);
|
|
99
|
+
|
|
100
|
+
Tfoot.propTypes = {
|
|
101
|
+
summary: _propTypes.default.array,
|
|
102
|
+
columns: _propTypes.default.array
|
|
103
|
+
};
|
|
104
|
+
var _default = Tfoot;
|
|
105
|
+
exports.default = _default;
|
package/css/Table/index.d.ts
CHANGED
|
@@ -206,6 +206,8 @@ export interface CheckColumn<T> extends SomeColumn<T>{
|
|
|
206
206
|
|
|
207
207
|
export type ColumnItem<T> = CommonColumn<T> | CheckColumn<T>
|
|
208
208
|
|
|
209
|
+
export interface summaryItem {render: ()=> ReactNode, colSpan?: number, rowSpan?: number}
|
|
210
|
+
|
|
209
211
|
|
|
210
212
|
export interface RowEvents {
|
|
211
213
|
[propName: string]: any
|
|
@@ -617,6 +619,15 @@ export interface TableProps<TRD, Value> extends StandardProps, ListItemStandardP
|
|
|
617
619
|
*/
|
|
618
620
|
cellSelectable?: boolean
|
|
619
621
|
|
|
622
|
+
/**
|
|
623
|
+
* Footer information can be used to summarize
|
|
624
|
+
*
|
|
625
|
+
* 底部信息可用于总结
|
|
626
|
+
*
|
|
627
|
+
* default: -
|
|
628
|
+
*/
|
|
629
|
+
summary?: summaryItem[][] | summaryItem[]
|
|
630
|
+
|
|
620
631
|
}
|
|
621
632
|
|
|
622
633
|
declare class Table<TRD = TableRowData, Value = any> extends React.Component<TableProps<TRD, Value>, {}> {
|
|
@@ -370,6 +370,30 @@ table > tbody > tr.so-table-odd > td {
|
|
|
370
370
|
.so-table-empty-head {
|
|
371
371
|
overflow: visible;
|
|
372
372
|
}
|
|
373
|
+
.so-table-foot {
|
|
374
|
+
position: relative;
|
|
375
|
+
scrollbar-width: none;
|
|
376
|
+
-ms-overflow-style: none;
|
|
377
|
+
/* IE 11 */
|
|
378
|
+
overflow: hidden;
|
|
379
|
+
-webkit-box-flex: 0;
|
|
380
|
+
-ms-flex: 0 0 auto;
|
|
381
|
+
flex: 0 0 auto;
|
|
382
|
+
min-width: 0;
|
|
383
|
+
background: var(--table-head-bg, #e8ebf0);
|
|
384
|
+
}
|
|
385
|
+
.so-table-foot::-webkit-scrollbar {
|
|
386
|
+
display: none;
|
|
387
|
+
}
|
|
388
|
+
.so-table-foot > table td {
|
|
389
|
+
background: var(--table-head-bg, #e8ebf0);
|
|
390
|
+
}
|
|
391
|
+
.so-table-foot-scroll-x {
|
|
392
|
+
border-top: 2px solid var(--table-border-color, #ddd);
|
|
393
|
+
}
|
|
394
|
+
.so-table-simple-foot {
|
|
395
|
+
overflow: auto;
|
|
396
|
+
}
|
|
373
397
|
.so-table .so-table-icon-tree-expand {
|
|
374
398
|
margin-right: var(--table-tree-expand-icon-margin-right, 8px);
|
|
375
399
|
display: inline-block;
|
|
@@ -450,14 +474,17 @@ table > tbody > tr.so-table-odd > td {
|
|
|
450
474
|
right: 6px;
|
|
451
475
|
border-width: 0 0 0 1px;
|
|
452
476
|
}
|
|
453
|
-
.so-table-scroll-y.so-table-head
|
|
477
|
+
.so-table-scroll-y.so-table-head,
|
|
478
|
+
.so-table-scroll-y.so-table-foot {
|
|
454
479
|
padding-right: 16px;
|
|
455
480
|
}
|
|
456
|
-
.so-table-rtl .so-table-scroll-y.so-table-head
|
|
481
|
+
.so-table-rtl .so-table-scroll-y.so-table-head,
|
|
482
|
+
.so-table-rtl .so-table-scroll-y.so-table-foot {
|
|
457
483
|
padding-left: 16px;
|
|
458
484
|
padding-right: 0;
|
|
459
485
|
}
|
|
460
|
-
.so-table-scroll-y.so-table-head:after
|
|
486
|
+
.so-table-scroll-y.so-table-head:after,
|
|
487
|
+
.so-table-scroll-y.so-table-foot:after {
|
|
461
488
|
position: absolute;
|
|
462
489
|
top: 0;
|
|
463
490
|
right: 0;
|
|
@@ -467,7 +494,8 @@ table > tbody > tr.so-table-odd > td {
|
|
|
467
494
|
background-color: var(--table-head-bg, #fafafa);
|
|
468
495
|
content: ' ';
|
|
469
496
|
}
|
|
470
|
-
.so-table-rtl .so-table-scroll-y.so-table-head:after
|
|
497
|
+
.so-table-rtl .so-table-scroll-y.so-table-head:after,
|
|
498
|
+
.so-table-rtl .so-table-scroll-y.so-table-foot:after {
|
|
471
499
|
right: auto;
|
|
472
500
|
left: 0;
|
|
473
501
|
}
|
package/css/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import * as utils from './utils'
|
|
|
3
3
|
|
|
4
4
|
declare const __default: {
|
|
5
5
|
utils: typeof utils,
|
|
6
|
-
version: '1.
|
|
6
|
+
version: '1.12.0-rc.1'
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
export default __default
|
|
@@ -125,7 +125,7 @@ export { default as Switch } from './Switch'
|
|
|
125
125
|
import { SwitchProps as __SwitchProps , } from './Switch'
|
|
126
126
|
|
|
127
127
|
export { default as Table } from './Table'
|
|
128
|
-
import { TableProps as __TableProps , TableRef as __TableRef,RowEvents as __RowEvents,CheckColumn as __CheckColumn,renderSorterParam as __renderSorterParam , ColumnFix as __ColumnFix,ColumnType as __ColumnType,ColumnOrder as __ColumnOrder,ColumnItem as __ColumnItem } from './Table'
|
|
128
|
+
import { TableProps as __TableProps , TableRef as __TableRef,RowEvents as __RowEvents,summaryItem as __summaryItem,CheckColumn as __CheckColumn,renderSorterParam as __renderSorterParam , ColumnFix as __ColumnFix,ColumnType as __ColumnType,ColumnOrder as __ColumnOrder,ColumnItem as __ColumnItem } from './Table'
|
|
129
129
|
|
|
130
130
|
export { default as Tabs } from './Tabs'
|
|
131
131
|
import { TabsProps as __TabsProps , TabsLinkProps as __TabsLinkProps,TabsPanelProps as __TabsPanelProps , } from './Tabs'
|
|
@@ -314,6 +314,7 @@ export namespace TYPE {
|
|
|
314
314
|
export type Props<TRD, Value> = __TableProps<TRD, Value>
|
|
315
315
|
export type Ref = __TableRef
|
|
316
316
|
export type RowEvents = __RowEvents
|
|
317
|
+
export type summaryItem = __summaryItem
|
|
317
318
|
export type CheckColumn<T> = __CheckColumn<T>
|
|
318
319
|
export type renderSorterParam = __renderSorterParam
|
|
319
320
|
export type ColumnFix = __ColumnFix
|