Skip to content

Commit 59f6912

Browse files
thomasJangthomasJang
committed
refactoring preformance
1 parent ca86b85 commit 59f6912

18 files changed

+379
-121
lines changed

‎dist/commonjs/components/CellEditor.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { IDataGrid } from '../common/@types';
44
interface IProps extends IDataGridStore {
55
col: IDataGrid.ICol;
66
li: number;
7+
value: any;
78
}
8-
declare const _default: React.ComponentClass<Pick<IProps, "col" | "li">, any>;
9+
declare const _default: React.ComponentClass<Pick<IProps, "col" | "li" | "value">, any>;
910
export default _default;

‎dist/commonjs/components/CellEditor.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ var __extends = (this && this.__extends) || (function () {
1515
Object.defineProperty(exports, "__esModule", { value: true });
1616
var React = require("react");
1717
var hoc_1 = require("../hoc");
18-
var _enums_1 = require("axui-datagrid/common/@enums");
18+
var _enums_1 = require("../common/@enums");
1919
var CellEditor = /** @class */ (function (_super) {
2020
__extends(CellEditor, _super);
2121
function CellEditor(props) {
@@ -134,8 +134,14 @@ var CellEditor = /** @class */ (function (_super) {
134134
}
135135
};
136136
CellEditor.prototype.shouldComponentUpdate = function (nextProps) {
137-
return (this.props.data !== nextProps.data ||
138-
this.props.colGroup !== this.props.colGroup);
137+
var li = nextProps.li, colIndex = nextProps.col.colIndex;
138+
if (this.props.focusedRow === nextProps.focusedRow &&
139+
nextProps.focusedRow === li &&
140+
this.props.focusedCol === nextProps.focusedCol &&
141+
nextProps.focusedCol === colIndex) {
142+
return true;
143+
}
144+
return this.props.value !== nextProps.value;
139145
};
140146
CellEditor.prototype.render = function () {
141147
var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, col = _a.col, li = _a.li;

‎dist/commonjs/components/DataGridBody.js

+26-4
Original file line numberDiff line numberDiff line change
@@ -370,10 +370,32 @@ var DataGridBody = /** @class */ (function (_super) {
370370
};
371371
return _this;
372372
}
373+
DataGridBody.prototype.shouldComponentUpdate = function (pProps) {
374+
var _a = this.props, _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, _c = _a.scrollTop, scrollTop = _c === void 0 ? 0 : _c, _d = _a.options, _e = _d === void 0 ? {} : _d, _f = _e.frozenRowIndex, frozenRowIndex = _f === void 0 ? 0 : _f, _g = _e.bodyLoaderHeight, bodyLoaderHeight = _g === void 0 ? 0 : _g, _h = _a.styles, _j = _h === void 0 ? {} : _h, _k = _j.elWidth, elWidth = _k === void 0 ? 0 : _k, _l = _j.bodyHeight, bodyHeight = _l === void 0 ? 0 : _l, _m = _j.bodyTrHeight, bodyTrHeight = _m === void 0 ? 1 : _m, _o = _j.asidePanelWidth, asidePanelWidth = _o === void 0 ? 0 : _o, _p = _j.frozenPanelWidth, frozenPanelWidth = _p === void 0 ? 0 : _p, _q = _j.frozenPanelHeight, frozenPanelHeight = _q === void 0 ? 0 : _q, _r = _j.rightPanelWidth, rightPanelWidth = _r === void 0 ? 0 : _r, _s = _j.footSumHeight, footSumHeight = _s === void 0 ? 0 : _s, _t = _a.loadingData, loadingData = _t === void 0 ? false : _t, _u = _a.data, data = _u === void 0 ? [] : _u, _v = _a.colGroup, colGroup = _v === void 0 ? [] : _v;
375+
var _w = pProps.scrollLeft, _scrollLeft = _w === void 0 ? 0 : _w, _x = pProps.scrollTop, _scrollTop = _x === void 0 ? 0 : _x, _y = pProps.options, _z = _y === void 0 ? {} : _y, _0 = _z.frozenRowIndex, _frozenRowIndex = _0 === void 0 ? 0 : _0, _1 = _z.bodyLoaderHeight, _bodyLoaderHeight = _1 === void 0 ? 0 : _1, _2 = pProps.styles, _3 = _2 === void 0 ? {} : _2, _4 = _3.elWidth, _elWidth = _4 === void 0 ? 0 : _4, _5 = _3.bodyHeight, _bodyHeight = _5 === void 0 ? 0 : _5, _6 = _3.bodyTrHeight, _bodyTrHeight = _6 === void 0 ? 1 : _6, _7 = _3.asidePanelWidth, _asidePanelWidth = _7 === void 0 ? 0 : _7, _8 = _3.frozenPanelWidth, _frozenPanelWidth = _8 === void 0 ? 0 : _8, _9 = _3.frozenPanelHeight, _frozenPanelHeight = _9 === void 0 ? 0 : _9, _10 = _3.rightPanelWidth, _rightPanelWidth = _10 === void 0 ? 0 : _10, _11 = _3.footSumHeight, _footSumHeight = _11 === void 0 ? 0 : _11, _12 = pProps.loadingData, _loadingData = _12 === void 0 ? false : _12, _13 = pProps.data, _data = _13 === void 0 ? [] : _13, _14 = pProps.colGroup, _colGroup = _14 === void 0 ? [] : _14;
376+
if (data !== _data || colGroup !== _colGroup) {
377+
return true;
378+
}
379+
if (scrollTop !== _scrollTop || scrollLeft !== _scrollLeft) {
380+
return true;
381+
}
382+
if (frozenRowIndex !== _frozenRowIndex ||
383+
bodyLoaderHeight !== _bodyLoaderHeight ||
384+
elWidth !== _elWidth ||
385+
bodyHeight !== _bodyHeight ||
386+
bodyTrHeight !== _bodyTrHeight ||
387+
asidePanelWidth !== _asidePanelWidth ||
388+
frozenPanelWidth !== _frozenPanelWidth ||
389+
frozenPanelHeight !== _frozenPanelHeight ||
390+
rightPanelWidth !== _rightPanelWidth ||
391+
footSumHeight !== _footSumHeight ||
392+
loadingData !== _loadingData) {
393+
return true;
394+
}
395+
return false;
396+
};
373397
DataGridBody.prototype.render = function () {
374-
var _a = this.props, _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, _c = _a.scrollTop, scrollTop = _c === void 0 ? 0 : _c, _d = _a.options, options = _d === void 0 ? {} : _d, _e = _a.styles, styles = _e === void 0 ? {} : _e, _f = _a.loadingData, loadingData = _f === void 0 ? false : _f;
375-
var _g = options.frozenRowIndex, frozenRowIndex = _g === void 0 ? 0 : _g, _h = options.bodyLoaderHeight, bodyLoaderHeight = _h === void 0 ? 0 : _h;
376-
var _j = styles.elWidth, elWidth = _j === void 0 ? 0 : _j, _k = styles.bodyHeight, bodyHeight = _k === void 0 ? 0 : _k, _l = styles.bodyTrHeight, bodyTrHeight = _l === void 0 ? 1 : _l, _m = styles.asidePanelWidth, asidePanelWidth = _m === void 0 ? 0 : _m, _o = styles.frozenPanelWidth, frozenPanelWidth = _o === void 0 ? 0 : _o, _p = styles.frozenPanelHeight, frozenPanelHeight = _p === void 0 ? 0 : _p, _q = styles.rightPanelWidth, rightPanelWidth = _q === void 0 ? 0 : _q, _r = styles.footSumHeight, footSumHeight = _r === void 0 ? 0 : _r;
398+
var _a = this.props, _b = _a.scrollLeft, scrollLeft = _b === void 0 ? 0 : _b, _c = _a.scrollTop, scrollTop = _c === void 0 ? 0 : _c, _d = _a.options, _e = _d === void 0 ? {} : _d, _f = _e.frozenRowIndex, frozenRowIndex = _f === void 0 ? 0 : _f, _g = _e.bodyLoaderHeight, bodyLoaderHeight = _g === void 0 ? 0 : _g, _h = _a.styles, _j = _h === void 0 ? {} : _h, _k = _j.elWidth, elWidth = _k === void 0 ? 0 : _k, _l = _j.bodyHeight, bodyHeight = _l === void 0 ? 0 : _l, _m = _j.bodyTrHeight, bodyTrHeight = _m === void 0 ? 1 : _m, _o = _j.asidePanelWidth, asidePanelWidth = _o === void 0 ? 0 : _o, _p = _j.frozenPanelWidth, frozenPanelWidth = _p === void 0 ? 0 : _p, _q = _j.frozenPanelHeight, frozenPanelHeight = _q === void 0 ? 0 : _q, _r = _j.rightPanelWidth, rightPanelWidth = _r === void 0 ? 0 : _r, _s = _j.footSumHeight, footSumHeight = _s === void 0 ? 0 : _s, _t = _a.loadingData, loadingData = _t === void 0 ? false : _t;
377399
var sRowIndex = Math.floor(-scrollTop / (bodyTrHeight || 1)) + frozenRowIndex;
378400
var loadingDataHeight = loadingData ? bodyLoaderHeight : 0;
379401
var scrollPanelRightMargin = 0; // 필요하면 verticalScrollerWidth 대입
@@ -453,7 +475,7 @@ var DataGridBody = /** @class */ (function (_super) {
453475
top: bodyHeight - footSumHeight - 1,
454476
height: footSumHeight,
455477
};
456-
return (React.createElement("div", { className: 'axui-datagrid-body', style: { height: styles.bodyHeight }, onMouseDown: this.onMouseDownBody },
478+
return (React.createElement("div", { className: 'axui-datagrid-body', style: { height: bodyHeight }, onMouseDown: this.onMouseDownBody },
457479
React.createElement(DataGridBodyPanel_1.default, { panelName: "top-aside-body-scroll", containerStyle: topAsideBodyPanelStyle, panelScrollConfig: topBodyScrollConfig }),
458480
React.createElement(DataGridBodyPanel_1.default, { panelName: "top-left-body-scroll", containerStyle: topLeftBodyPanelStyle, panelScrollConfig: topBodyScrollConfig }),
459481
React.createElement(DataGridBodyPanel_1.default, { panelName: "top-body-scroll", containerStyle: topBodyPanelStyle, panelScrollConfig: topBodyScrollConfig, panelLeft: scrollLeft }),

‎dist/commonjs/components/DataGridBodyCell.js

+43-1
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,52 @@ var DataGridBodyCell = /** @class */ (function (_super) {
3838
};
3939
return _this;
4040
}
41+
DataGridBodyCell.prototype.shouldComponentUpdate = function (nextProps) {
42+
var _a = this.props, li = _a.li, _b = _a.col, col = _b === void 0 ? {} : _b, _c = _a.selectionRows, selectionRows = _c === void 0 ? [] : _c, _d = _a.selectionCols, selectionCols = _d === void 0 ? [] : _d, _e = _a.inlineEditingCell, inlineEditingCell = _e === void 0 ? {} : _e, _f = _a.data, data = _f === void 0 ? [] : _f;
43+
var _g = col.colIndex, colIndex = _g === void 0 ? 0 : _g;
44+
var editRowIndex = inlineEditingCell.rowIndex, editColIndex = inlineEditingCell.colIndex;
45+
var _h = nextProps.selectionRows, _selectionRows = _h === void 0 ? [] : _h, _j = nextProps.selectionCols, _selectionCols = _j === void 0 ? [] : _j, _k = nextProps.inlineEditingCell, _inlineEditingCell = _k === void 0 ? {} : _k, _l = nextProps.data, _data = _l === void 0 ? [] : _l;
46+
var _editRowIndex = _inlineEditingCell.rowIndex, _editColIndex = _inlineEditingCell.colIndex;
47+
if (this.props.data !== nextProps.data ||
48+
this.props.colGroup !== nextProps.colGroup) {
49+
return true;
50+
}
51+
if (_selectionRows[li] !== selectionRows[li] ||
52+
selectionCols[colIndex] !== _selectionCols[colIndex]) {
53+
return true;
54+
}
55+
if (this.props.isInlineEditing !== nextProps.isInlineEditing &&
56+
((editRowIndex === li && editColIndex === colIndex) ||
57+
(_editRowIndex === li && _editColIndex === colIndex))) {
58+
return true;
59+
}
60+
if (this.props.scrollTop !== nextProps.scrollTop ||
61+
this.props.scrollLeft !== nextProps.scrollLeft) {
62+
return true;
63+
}
64+
// if (li === 5 && colIndex === 6) {
65+
// console.log(
66+
// data[li][col.key || ''],
67+
// nextProps.data![li][col.key || ''],
68+
// col,
69+
// );
70+
// }
71+
// if (data[li][col.key || ''] !== nextProps.data![li][col.key || '']) {
72+
// return true;
73+
// }
74+
// return (
75+
// ((this.props.isInlineEditing !== nextProps.isInlineEditing &&
76+
// this.props.inlineEditingCell &&
77+
// this.props.inlineEditingCell.rowIndex === li) ||
78+
// this.props.inlineEditingCell.colIndex === li)
79+
// );
80+
return false;
81+
};
4182
DataGridBodyCell.prototype.render = function () {
4283
var _this = this;
4384
var _a;
4485
var _b = this.props, _c = _b.data, data = _c === void 0 ? [] : _c, focusedRow = _b.focusedRow, focusedCol = _b.focusedCol, _d = _b.selectionRows, selectionRows = _d === void 0 ? [] : _d, _e = _b.selectionCols, selectionCols = _e === void 0 ? [] : _e, li = _b.li, _f = _b.col, col = _f === void 0 ? {} : _f, ci = _b.ci, _g = _b.options, options = _g === void 0 ? {} : _g, _h = _b.isInlineEditing, isInlineEditing = _h === void 0 ? false : _h, _j = _b.inlineEditingCell, inlineEditingCell = _j === void 0 ? {} : _j, _k = _b.predefinedFormatter, predefinedFormatter = _k === void 0 ? {} : _k;
86+
// console.log('render');
4587
var _l = options.body, optionsBody = _l === void 0 ? {} : _l;
4688
var _m = optionsBody.columnHeight, columnHeight = _m === void 0 ? 0 : _m, _o = optionsBody.columnPadding, columnPadding = _o === void 0 ? 0 : _o, _p = optionsBody.columnBorderWidth, columnBorderWidth = _p === void 0 ? 0 : _p, _q = optionsBody.align, bodyAlign = _q === void 0 ? 'left' : _q;
4789
var _r = col.rowSpan, rowSpan = _r === void 0 ? 0 : _r, _s = col.colSpan, colSpan = _s === void 0 ? 0 : _s, _t = col.colIndex, colIndex = _t === void 0 ? 0 : _t, _u = col.rowIndex, rowIndex = _u === void 0 ? 0 : _u, _v = col.align, colAlign = _v === void 0 ? bodyAlign : _v, _w = col.columnAttr, columnAttr = _w === void 0 ? '' : _w, editor = col.editor;
@@ -81,7 +123,7 @@ var DataGridBodyCell = /** @class */ (function (_super) {
81123
if (!inlineEditingActive) {
82124
_this.onDoubleClickCell(e, col, li);
83125
}
84-
} }, inlineEditingActiveAlways || inlineEditingActive ? (React.createElement(CellEditor_1.default, { col: col, li: li })) : (React.createElement(CellLabel_1.default, { columnHeight: columnHeight, lineHeight: lineHeight, columnBorderWidth: columnBorderWidth, colAlign: colAlign, col: col, list: data, li: li, predefinedFormatter: predefinedFormatter }))));
126+
} }, inlineEditingActiveAlways || inlineEditingActive ? (React.createElement(CellEditor_1.default, { col: col, li: li, value: data[li][col.key || ''] })) : (React.createElement(CellLabel_1.default, { columnHeight: columnHeight, lineHeight: lineHeight, columnBorderWidth: columnBorderWidth, colAlign: colAlign, col: col, list: data, li: li, predefinedFormatter: predefinedFormatter }))));
85127
};
86128
return DataGridBodyCell;
87129
}(React.Component));

0 commit comments

Comments
 (0)