devextreme-planit-treegrid-react 1.1.1 → 1.1.2
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/DxPlanitTreeGrid.js +341 -181
- package/package.json +2 -2
package/dist/DxPlanitTreeGrid.js
CHANGED
|
@@ -1,32 +1,139 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) {
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
function _typeof(obj) {
|
|
4
|
+
'@babel/helpers - typeof';
|
|
5
|
+
return (
|
|
6
|
+
(_typeof =
|
|
7
|
+
'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator
|
|
8
|
+
? function (obj) {
|
|
9
|
+
return typeof obj;
|
|
10
|
+
}
|
|
11
|
+
: function (obj) {
|
|
12
|
+
return obj && 'function' == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;
|
|
13
|
+
}),
|
|
14
|
+
_typeof(obj)
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
Object.defineProperty(exports, '__esModule', {
|
|
18
|
+
value: true,
|
|
6
19
|
});
|
|
7
20
|
exports.default = void 0;
|
|
8
|
-
var _react = require(
|
|
9
|
-
var _loadPanel = require(
|
|
10
|
-
var _pivotGrid = _interopRequireWildcard(require(
|
|
11
|
-
var _dataGrid = require(
|
|
12
|
-
var _excel_exporter = require(
|
|
13
|
-
var _exceljs = require(
|
|
14
|
-
var _fileSaver = _interopRequireDefault(require(
|
|
15
|
-
function _interopRequireDefault(obj) {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
function
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
function
|
|
27
|
-
|
|
21
|
+
var _react = require('react');
|
|
22
|
+
var _loadPanel = require('devextreme-react/load-panel');
|
|
23
|
+
var _pivotGrid = _interopRequireWildcard(require('devextreme-react/pivot-grid'));
|
|
24
|
+
var _dataGrid = require('devextreme-react/data-grid');
|
|
25
|
+
var _excel_exporter = require('devextreme/excel_exporter');
|
|
26
|
+
var _exceljs = require('exceljs');
|
|
27
|
+
var _fileSaver = _interopRequireDefault(require('file-saver'));
|
|
28
|
+
function _interopRequireDefault(obj) {
|
|
29
|
+
return obj && obj.__esModule ? obj : { default: obj };
|
|
30
|
+
}
|
|
31
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
32
|
+
if (typeof WeakMap !== 'function') return null;
|
|
33
|
+
var cacheBabelInterop = new WeakMap();
|
|
34
|
+
var cacheNodeInterop = new WeakMap();
|
|
35
|
+
return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {
|
|
36
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
37
|
+
})(nodeInterop);
|
|
38
|
+
}
|
|
39
|
+
function _interopRequireWildcard(obj, nodeInterop) {
|
|
40
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
41
|
+
return obj;
|
|
42
|
+
}
|
|
43
|
+
if (obj === null || (_typeof(obj) !== 'object' && typeof obj !== 'function')) {
|
|
44
|
+
return { default: obj };
|
|
45
|
+
}
|
|
46
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
47
|
+
if (cache && cache.has(obj)) {
|
|
48
|
+
return cache.get(obj);
|
|
49
|
+
}
|
|
50
|
+
var newObj = {};
|
|
51
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
52
|
+
for (var key in obj) {
|
|
53
|
+
if (key !== 'default' && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
54
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
55
|
+
if (desc && (desc.get || desc.set)) {
|
|
56
|
+
Object.defineProperty(newObj, key, desc);
|
|
57
|
+
} else {
|
|
58
|
+
newObj[key] = obj[key];
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
newObj.default = obj;
|
|
63
|
+
if (cache) {
|
|
64
|
+
cache.set(obj, newObj);
|
|
65
|
+
}
|
|
66
|
+
return newObj;
|
|
67
|
+
}
|
|
68
|
+
function _toConsumableArray(arr) {
|
|
69
|
+
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
|
70
|
+
}
|
|
71
|
+
function _nonIterableSpread() {
|
|
72
|
+
throw new TypeError(
|
|
73
|
+
'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
function _iterableToArray(iter) {
|
|
77
|
+
if ((typeof Symbol !== 'undefined' && iter[Symbol.iterator] != null) || iter['@@iterator'] != null) return Array.from(iter);
|
|
78
|
+
}
|
|
79
|
+
function _arrayWithoutHoles(arr) {
|
|
80
|
+
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
|
81
|
+
}
|
|
82
|
+
function _slicedToArray(arr, i) {
|
|
83
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
84
|
+
}
|
|
85
|
+
function _nonIterableRest() {
|
|
86
|
+
throw new TypeError(
|
|
87
|
+
'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
91
|
+
if (!o) return;
|
|
92
|
+
if (typeof o === 'string') return _arrayLikeToArray(o, minLen);
|
|
93
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
94
|
+
if (n === 'Object' && o.constructor) n = o.constructor.name;
|
|
95
|
+
if (n === 'Map' || n === 'Set') return Array.from(o);
|
|
96
|
+
if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
97
|
+
}
|
|
98
|
+
function _arrayLikeToArray(arr, len) {
|
|
99
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
100
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) {
|
|
101
|
+
arr2[i] = arr[i];
|
|
102
|
+
}
|
|
103
|
+
return arr2;
|
|
104
|
+
}
|
|
105
|
+
function _iterableToArrayLimit(arr, i) {
|
|
106
|
+
var _i = null == arr ? null : ('undefined' != typeof Symbol && arr[Symbol.iterator]) || arr['@@iterator'];
|
|
107
|
+
if (null != _i) {
|
|
108
|
+
var _s,
|
|
109
|
+
_e,
|
|
110
|
+
_x,
|
|
111
|
+
_r,
|
|
112
|
+
_arr = [],
|
|
113
|
+
_n = !0,
|
|
114
|
+
_d = !1;
|
|
115
|
+
try {
|
|
116
|
+
if (((_x = (_i = _i.call(arr)).next), 0 === i)) {
|
|
117
|
+
if (Object(_i) !== _i) return;
|
|
118
|
+
_n = !1;
|
|
119
|
+
} else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {}
|
|
120
|
+
} catch (err) {
|
|
121
|
+
(_d = !0), (_e = err);
|
|
122
|
+
} finally {
|
|
123
|
+
try {
|
|
124
|
+
if (!_n && null != _i.return && ((_r = _i.return()), Object(_r) !== _r)) return;
|
|
125
|
+
} finally {
|
|
126
|
+
if (_d) throw _e;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
return _arr;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
function _arrayWithHoles(arr) {
|
|
133
|
+
if (Array.isArray(arr)) return arr;
|
|
134
|
+
}
|
|
28
135
|
var grandTotalCssNm = 'data-grand-total';
|
|
29
|
-
var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
136
|
+
var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref) {
|
|
30
137
|
var _props$id = props.id,
|
|
31
138
|
id = _props$id === void 0 ? 'dx-planit-vera-pivotgrid-id' : _props$id,
|
|
32
139
|
groupField = props.groupField,
|
|
@@ -101,39 +208,49 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
101
208
|
var excelBorder = {
|
|
102
209
|
style: 'thin',
|
|
103
210
|
color: {
|
|
104
|
-
argb: 'FF7E7E7E'
|
|
105
|
-
}
|
|
211
|
+
argb: 'FF7E7E7E',
|
|
212
|
+
},
|
|
106
213
|
};
|
|
107
214
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
108
215
|
return {
|
|
109
|
-
exportToExcel: exportToExcel
|
|
216
|
+
exportToExcel: exportToExcel,
|
|
110
217
|
};
|
|
111
218
|
});
|
|
112
219
|
|
|
113
|
-
/**
|
|
114
|
-
* 그리드 사이즈 재조정
|
|
115
|
-
* @returns 그리드 사이즈
|
|
220
|
+
/**
|
|
221
|
+
* 그리드 사이즈 재조정
|
|
222
|
+
* @returns 그리드 사이즈
|
|
116
223
|
*/
|
|
117
224
|
var getGridSize = function getGridSize() {
|
|
118
225
|
var _wrapper$clientWidth;
|
|
119
226
|
var wrapper = document.querySelector('.diag-table-wrapper');
|
|
120
227
|
var gap = 10;
|
|
121
|
-
setWidth(
|
|
228
|
+
setWidth(
|
|
229
|
+
(_wrapper$clientWidth = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null &&
|
|
230
|
+
_wrapper$clientWidth !== void 0
|
|
231
|
+
? _wrapper$clientWidth
|
|
232
|
+
: 0
|
|
233
|
+
);
|
|
122
234
|
setHeight(wrapper ? wrapper.clientHeight - gap : 0);
|
|
123
235
|
window.addEventListener('resize', function () {
|
|
124
236
|
var _wrapper$clientWidth2;
|
|
125
|
-
setWidth(
|
|
237
|
+
setWidth(
|
|
238
|
+
(_wrapper$clientWidth2 = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null &&
|
|
239
|
+
_wrapper$clientWidth2 !== void 0
|
|
240
|
+
? _wrapper$clientWidth2
|
|
241
|
+
: 0
|
|
242
|
+
);
|
|
126
243
|
setHeight(wrapper ? wrapper.clientHeight - gap : 0);
|
|
127
244
|
});
|
|
128
245
|
return {
|
|
129
246
|
width: width,
|
|
130
|
-
height: height
|
|
247
|
+
height: height,
|
|
131
248
|
};
|
|
132
249
|
};
|
|
133
250
|
|
|
134
|
-
/**
|
|
135
|
-
* 'Total' 을 한글로 변경
|
|
136
|
-
* @param e devextreme CellPreparedEvent
|
|
251
|
+
/**
|
|
252
|
+
* 'Total' 을 한글로 변경
|
|
253
|
+
* @param e devextreme CellPreparedEvent
|
|
137
254
|
*/
|
|
138
255
|
var changeTotalText = function changeTotalText(e) {
|
|
139
256
|
var _e$cell;
|
|
@@ -143,13 +260,13 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
143
260
|
if (((_e$cell = e.cell) === null || _e$cell === void 0 ? void 0 : _e$cell.type) === 'T') {
|
|
144
261
|
var _e$cell$text;
|
|
145
262
|
var text = (_e$cell$text = e.cell.text) === null || _e$cell$text === void 0 ? void 0 : _e$cell$text.replace('Total', '합계');
|
|
146
|
-
e.cellElement.innerHTML =
|
|
263
|
+
e.cellElement.innerHTML = '<span>'.concat(text, '</span>');
|
|
147
264
|
}
|
|
148
265
|
};
|
|
149
266
|
|
|
150
|
-
/**
|
|
151
|
-
* null값을 하이픈으로 모두 변경
|
|
152
|
-
* @param e devextreme CellPreparedEvent
|
|
267
|
+
/**
|
|
268
|
+
* null값을 하이픈으로 모두 변경
|
|
269
|
+
* @param e devextreme CellPreparedEvent
|
|
153
270
|
*/
|
|
154
271
|
var changeNullToHipen = function changeNullToHipen(e) {
|
|
155
272
|
var _e$cell2;
|
|
@@ -161,24 +278,30 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
161
278
|
}
|
|
162
279
|
};
|
|
163
280
|
|
|
164
|
-
/**
|
|
165
|
-
* '0', '0.0%' 를 하이픈으로 모두 변경
|
|
166
|
-
* @param e devextreme CellPreparedEvent
|
|
281
|
+
/**
|
|
282
|
+
* '0', '0.0%' 를 하이픈으로 모두 변경
|
|
283
|
+
* @param e devextreme CellPreparedEvent
|
|
167
284
|
*/
|
|
168
285
|
var changeZeroToHipen = function changeZeroToHipen(e) {
|
|
169
286
|
var _e$cell3, _e$cell4, _e$cell5;
|
|
170
287
|
if (!convertZeroToHipen) {
|
|
171
288
|
return;
|
|
172
289
|
}
|
|
173
|
-
if (
|
|
290
|
+
if (
|
|
291
|
+
e.area === 'data' &&
|
|
292
|
+
(((_e$cell3 = e.cell) === null || _e$cell3 === void 0 ? void 0 : _e$cell3.text) === '0' ||
|
|
293
|
+
((_e$cell4 = e.cell) === null || _e$cell4 === void 0 ? void 0 : _e$cell4.text) === '0.0%' ||
|
|
294
|
+
((_e$cell5 = e.cell) === null || _e$cell5 === void 0 ? void 0 : _e$cell5.text) === '') &&
|
|
295
|
+
e.cellElement
|
|
296
|
+
) {
|
|
174
297
|
e.cellElement.innerHTML = '<span class="text-color">-</span>';
|
|
175
298
|
}
|
|
176
299
|
};
|
|
177
300
|
|
|
178
|
-
/**
|
|
179
|
-
* 테이블 헤더에 colspan, rowspan 한 HTMLElement 정보 반환
|
|
180
|
-
* @param groupField 사용자가 작성한 그룹 정보
|
|
181
|
-
* @return
|
|
301
|
+
/**
|
|
302
|
+
* 테이블 헤더에 colspan, rowspan 한 HTMLElement 정보 반환
|
|
303
|
+
* @param groupField 사용자가 작성한 그룹 정보
|
|
304
|
+
* @return
|
|
182
305
|
*/
|
|
183
306
|
var makeColspan = function makeColspan(group, index, isLast) {
|
|
184
307
|
var _group$html;
|
|
@@ -193,31 +316,33 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
193
316
|
} else if (!isLast && index === 0) {
|
|
194
317
|
td.setAttribute('style', 'border-bottom: 0');
|
|
195
318
|
}
|
|
196
|
-
td.innerHTML =
|
|
319
|
+
td.innerHTML = '<span>'.concat(text, '</span>');
|
|
197
320
|
return td;
|
|
198
321
|
};
|
|
199
322
|
|
|
200
|
-
/**
|
|
201
|
-
* 그룹 필드 데이터 유효성 검증용 데이터 생성
|
|
202
|
-
* @param groupField
|
|
203
|
-
* @returns
|
|
323
|
+
/**
|
|
324
|
+
* 그룹 필드 데이터 유효성 검증용 데이터 생성
|
|
325
|
+
* @param groupField
|
|
326
|
+
* @returns
|
|
204
327
|
*/
|
|
205
328
|
var makeCheckGroupData = function makeCheckGroupData(groupField) {
|
|
206
329
|
var data = {};
|
|
207
|
-
groupField === null || groupField === void 0
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
330
|
+
groupField === null || groupField === void 0
|
|
331
|
+
? void 0
|
|
332
|
+
: groupField.forEach(function (group) {
|
|
333
|
+
if (data[group.depth]) {
|
|
334
|
+
data[group.depth] += group.colspan;
|
|
335
|
+
} else {
|
|
336
|
+
data[group.depth] = group.colspan;
|
|
337
|
+
}
|
|
338
|
+
});
|
|
214
339
|
return data;
|
|
215
340
|
};
|
|
216
341
|
|
|
217
|
-
/**
|
|
218
|
-
* GroupField 데이터 검증
|
|
219
|
-
* @param 사용자가 설정한 그룹 필드 정보
|
|
220
|
-
* @returns 데이터 검증 결과
|
|
342
|
+
/**
|
|
343
|
+
* GroupField 데이터 검증
|
|
344
|
+
* @param 사용자가 설정한 그룹 필드 정보
|
|
345
|
+
* @returns 데이터 검증 결과
|
|
221
346
|
*/
|
|
222
347
|
var isCheckGroupField = function isCheckGroupField(groupField) {
|
|
223
348
|
var map = makeCheckGroupData(groupField);
|
|
@@ -230,21 +355,25 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
230
355
|
return true;
|
|
231
356
|
};
|
|
232
357
|
|
|
233
|
-
/**
|
|
234
|
-
* Grand Total 셀 정보 저장
|
|
235
|
-
* @param e
|
|
358
|
+
/**
|
|
359
|
+
* Grand Total 셀 정보 저장
|
|
360
|
+
* @param e
|
|
236
361
|
*/
|
|
237
362
|
var setTotalElementInfo = function setTotalElementInfo(e) {
|
|
238
363
|
var _e$cell6, _e$cell7, _e$cellElement;
|
|
239
|
-
if (
|
|
364
|
+
if (
|
|
365
|
+
!(groupField !== null && groupField !== void 0 && groupField.length) ||
|
|
366
|
+
((_e$cell6 = e.cell) === null || _e$cell6 === void 0 ? void 0 : _e$cell6.type) !== 'GT' ||
|
|
367
|
+
((_e$cell7 = e.cell) === null || _e$cell7 === void 0 ? void 0 : _e$cell7.text) !== 'Grand Total'
|
|
368
|
+
) {
|
|
240
369
|
return;
|
|
241
370
|
}
|
|
242
371
|
(_e$cellElement = e.cellElement) === null || _e$cellElement === void 0 ? void 0 : _e$cellElement.classList.add(grandTotalCssNm);
|
|
243
372
|
};
|
|
244
373
|
|
|
245
|
-
/**
|
|
246
|
-
* cell의 columnIndex 최대값 저장
|
|
247
|
-
* @param e
|
|
374
|
+
/**
|
|
375
|
+
* cell의 columnIndex 최대값 저장
|
|
376
|
+
* @param e
|
|
248
377
|
*/
|
|
249
378
|
var setMaxColumIndex = function setMaxColumIndex(e) {
|
|
250
379
|
if (!e.columnIndex) {
|
|
@@ -255,17 +384,19 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
255
384
|
}
|
|
256
385
|
};
|
|
257
386
|
|
|
258
|
-
/**
|
|
259
|
-
* groupField depth의 유니크한 배열 구하기
|
|
260
|
-
* @param group
|
|
261
|
-
* @param arr
|
|
262
|
-
* @returns
|
|
387
|
+
/**
|
|
388
|
+
* groupField depth의 유니크한 배열 구하기
|
|
389
|
+
* @param group
|
|
390
|
+
* @param arr
|
|
391
|
+
* @returns
|
|
263
392
|
*/
|
|
264
393
|
var getGroupDepth = function getGroupDepth(group, arr) {
|
|
265
394
|
var groupData = group.slice();
|
|
266
|
-
var set = new Set(
|
|
267
|
-
|
|
268
|
-
|
|
395
|
+
var set = new Set(
|
|
396
|
+
groupData.map(function (group) {
|
|
397
|
+
return group.depth;
|
|
398
|
+
})
|
|
399
|
+
);
|
|
269
400
|
return Array.from(set).sort(function compare(a, b) {
|
|
270
401
|
if (a > b) {
|
|
271
402
|
return arr === 'asc' ? -1 : 1;
|
|
@@ -277,11 +408,11 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
277
408
|
});
|
|
278
409
|
};
|
|
279
410
|
|
|
280
|
-
/**
|
|
281
|
-
* 현재 depth에 맞는 그룹 필드 정보 반환
|
|
282
|
-
* @param group
|
|
283
|
-
* @param depth
|
|
284
|
-
* @returns
|
|
411
|
+
/**
|
|
412
|
+
* 현재 depth에 맞는 그룹 필드 정보 반환
|
|
413
|
+
* @param group
|
|
414
|
+
* @param depth
|
|
415
|
+
* @returns
|
|
285
416
|
*/
|
|
286
417
|
var getCurrentGroup = function getCurrentGroup(group, depth) {
|
|
287
418
|
return group.filter(function (gr) {
|
|
@@ -289,8 +420,8 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
289
420
|
});
|
|
290
421
|
};
|
|
291
422
|
|
|
292
|
-
/**
|
|
293
|
-
* 테이블 헤더(DOM)에 colspan 적용된 테이블 삽입
|
|
423
|
+
/**
|
|
424
|
+
* 테이블 헤더(DOM)에 colspan 적용된 테이블 삽입
|
|
294
425
|
*/
|
|
295
426
|
var insertRowHeaderGroup = function insertRowHeaderGroup() {
|
|
296
427
|
var _thead$previousSiblin;
|
|
@@ -310,7 +441,10 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
310
441
|
}
|
|
311
442
|
totalElement.innerHTML = '';
|
|
312
443
|
totalElement.setAttribute('style', 'padding: 0; border: 0');
|
|
313
|
-
var colgroup =
|
|
444
|
+
var colgroup =
|
|
445
|
+
(_thead$previousSiblin = thead.previousSibling) === null || _thead$previousSiblin === void 0
|
|
446
|
+
? void 0
|
|
447
|
+
: _thead$previousSiblin.cloneNode(true);
|
|
314
448
|
var groupData = groupField.slice();
|
|
315
449
|
var depth = getGroupDepth(groupData, 'asc');
|
|
316
450
|
var table = document.createElement('table');
|
|
@@ -327,10 +461,10 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
327
461
|
totalElement.appendChild(table);
|
|
328
462
|
};
|
|
329
463
|
|
|
330
|
-
/**
|
|
331
|
-
* Devextreme의 dateController columnInfo에 그룹 정보 삽입
|
|
332
|
-
* @param group
|
|
333
|
-
* @returns
|
|
464
|
+
/**
|
|
465
|
+
* Devextreme의 dateController columnInfo에 그룹 정보 삽입
|
|
466
|
+
* @param group
|
|
467
|
+
* @returns
|
|
334
468
|
*/
|
|
335
469
|
var makeDataControllerColumnGroup = function makeDataControllerColumnGroup(group) {
|
|
336
470
|
var groupData = group.slice();
|
|
@@ -341,21 +475,21 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
341
475
|
return {
|
|
342
476
|
colspan: group.colspan,
|
|
343
477
|
text: group.groupCaption,
|
|
344
|
-
type: 'GT'
|
|
478
|
+
type: 'GT',
|
|
345
479
|
};
|
|
346
480
|
});
|
|
347
481
|
});
|
|
348
482
|
};
|
|
349
483
|
|
|
350
|
-
/**
|
|
351
|
-
* 사용자가 입력한 컬러 조건을 { standard: string; condition: string } 형식으로 변경 반환
|
|
352
|
-
* @param condition 사용자 입력 컬러 조건식 ex) '>= 100'
|
|
353
|
-
* @returns
|
|
484
|
+
/**
|
|
485
|
+
* 사용자가 입력한 컬러 조건을 { standard: string; condition: string } 형식으로 변경 반환
|
|
486
|
+
* @param condition 사용자 입력 컬러 조건식 ex) '>= 100'
|
|
487
|
+
* @returns
|
|
354
488
|
*/
|
|
355
489
|
var makeSplitCondtion = function makeSplitCondtion(condition) {
|
|
356
490
|
var newCondition = {
|
|
357
491
|
standard: '',
|
|
358
|
-
condition: ''
|
|
492
|
+
condition: '',
|
|
359
493
|
};
|
|
360
494
|
_toConsumableArray(condition).forEach(function (cond) {
|
|
361
495
|
if (Number.isNaN(parseFloat(cond))) {
|
|
@@ -367,10 +501,10 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
367
501
|
return newCondition;
|
|
368
502
|
};
|
|
369
503
|
|
|
370
|
-
/**
|
|
371
|
-
* 데이터에 색상 적용
|
|
372
|
-
* @param e onCellPrepared 이벤트
|
|
373
|
-
* @returns
|
|
504
|
+
/**
|
|
505
|
+
* 데이터에 색상 적용
|
|
506
|
+
* @param e onCellPrepared 이벤트
|
|
507
|
+
* @returns
|
|
374
508
|
*/
|
|
375
509
|
var makeColorAtPercent = function makeColorAtPercent(e) {
|
|
376
510
|
if (!dataColor || !e.cellElement) {
|
|
@@ -381,7 +515,14 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
381
515
|
if (e.cell.value === null) {
|
|
382
516
|
return;
|
|
383
517
|
}
|
|
384
|
-
if (
|
|
518
|
+
if (
|
|
519
|
+
((_e$cell8 = e.cell) === null || _e$cell8 === void 0
|
|
520
|
+
? void 0
|
|
521
|
+
: (_e$cell8$format = _e$cell8.format) === null || _e$cell8$format === void 0
|
|
522
|
+
? void 0
|
|
523
|
+
: _e$cell8$format.type) === color.format &&
|
|
524
|
+
!Number.isNaN(e.cell.value)
|
|
525
|
+
) {
|
|
385
526
|
var standardData = makeSplitCondtion(color.condition.replace(/(\s*)/g, ''));
|
|
386
527
|
var rate = color.format === 'percent' ? 0.01 : 1;
|
|
387
528
|
var condition = false;
|
|
@@ -406,9 +547,9 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
406
547
|
});
|
|
407
548
|
};
|
|
408
549
|
|
|
409
|
-
/**
|
|
410
|
-
* 그리드 데이터 정합성 체크. 데이터 잘못되어 있으면 에러 발생
|
|
411
|
-
* @param dataSource
|
|
550
|
+
/**
|
|
551
|
+
* 그리드 데이터 정합성 체크. 데이터 잘못되어 있으면 에러 발생
|
|
552
|
+
* @param dataSource
|
|
412
553
|
*/
|
|
413
554
|
var checkDataSource = function checkDataSource(dataSource) {
|
|
414
555
|
var isColumns = dataSource._fields.findIndex(function (field) {
|
|
@@ -428,28 +569,31 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
428
569
|
}
|
|
429
570
|
};
|
|
430
571
|
|
|
431
|
-
/**
|
|
432
|
-
* 그리드 펼침 정보 세션스토리지 리셋
|
|
572
|
+
/**
|
|
573
|
+
* 그리드 펼침 정보 세션스토리지 리셋
|
|
433
574
|
*/
|
|
434
575
|
var resetSession = function resetSession() {
|
|
435
576
|
sessionStorage.removeItem('dx-vera-pivotgrid-storing');
|
|
436
577
|
};
|
|
437
578
|
|
|
438
|
-
/**
|
|
439
|
-
* 엑셀 export 명령
|
|
440
|
-
* @param fileName 저장하고자 하는 엑셀파일명
|
|
579
|
+
/**
|
|
580
|
+
* 엑셀 export 명령
|
|
581
|
+
* @param fileName 저장하고자 하는 엑셀파일명
|
|
441
582
|
*/
|
|
442
583
|
var exportToExcel = function exportToExcel(fileName) {
|
|
443
584
|
setTimeout(function () {
|
|
444
585
|
var _$tableRef$current;
|
|
445
|
-
return exportToExcelAction(
|
|
586
|
+
return exportToExcelAction(
|
|
587
|
+
(_$tableRef$current = $tableRef.current) === null || _$tableRef$current === void 0 ? void 0 : _$tableRef$current.instance,
|
|
588
|
+
fileName
|
|
589
|
+
);
|
|
446
590
|
});
|
|
447
591
|
};
|
|
448
592
|
|
|
449
|
-
/**
|
|
450
|
-
* devextreme component 정보의 dataController의 columnInfo에 사용자가 설정한 groupFIled 정보 병합
|
|
451
|
-
* @param component devextreme component
|
|
452
|
-
* @returns devextreme component
|
|
593
|
+
/**
|
|
594
|
+
* devextreme component 정보의 dataController의 columnInfo에 사용자가 설정한 groupFIled 정보 병합
|
|
595
|
+
* @param component devextreme component
|
|
596
|
+
* @returns devextreme component
|
|
453
597
|
*/
|
|
454
598
|
var convertDataControllerColumnsInfo = function convertDataControllerColumnsInfo(component) {
|
|
455
599
|
var arr = [];
|
|
@@ -465,9 +609,9 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
465
609
|
return component;
|
|
466
610
|
};
|
|
467
611
|
|
|
468
|
-
/**
|
|
469
|
-
* 엑셀 export
|
|
470
|
-
* @param e
|
|
612
|
+
/**
|
|
613
|
+
* 엑셀 export
|
|
614
|
+
* @param e
|
|
471
615
|
*/
|
|
472
616
|
var exportToExcelAction = function exportToExcelAction(e, fileName) {
|
|
473
617
|
var newComponent = convertDataControllerColumnsInfo(e);
|
|
@@ -483,22 +627,25 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
483
627
|
bottom: borderStyle,
|
|
484
628
|
left: borderStyle,
|
|
485
629
|
right: borderStyle,
|
|
486
|
-
top: borderStyle
|
|
630
|
+
top: borderStyle,
|
|
487
631
|
};
|
|
488
|
-
}
|
|
632
|
+
},
|
|
489
633
|
}).then(function () {
|
|
490
634
|
workbook.xlsx.writeBuffer().then(function (buffer) {
|
|
491
|
-
(0, _fileSaver.default)(
|
|
492
|
-
|
|
493
|
-
|
|
635
|
+
(0, _fileSaver.default)(
|
|
636
|
+
new Blob([buffer], {
|
|
637
|
+
type: 'application/octet-stream',
|
|
638
|
+
}),
|
|
639
|
+
fileName + '.xlsx'
|
|
640
|
+
);
|
|
494
641
|
});
|
|
495
642
|
});
|
|
496
643
|
e.cancel = true;
|
|
497
644
|
};
|
|
498
645
|
|
|
499
|
-
/**
|
|
500
|
-
* devextreme CellPreparedEvent 이벤트 실행
|
|
501
|
-
* @param e
|
|
646
|
+
/**
|
|
647
|
+
* devextreme CellPreparedEvent 이벤트 실행
|
|
648
|
+
* @param e
|
|
502
649
|
*/
|
|
503
650
|
var onCellPreparedChild = function onCellPreparedChild(e) {
|
|
504
651
|
makeColorAtPercent(e);
|
|
@@ -510,8 +657,8 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
510
657
|
return onCellPrepared ? onCellPrepared(e) : undefined;
|
|
511
658
|
};
|
|
512
659
|
|
|
513
|
-
/**
|
|
514
|
-
* devextreme Raise Event
|
|
660
|
+
/**
|
|
661
|
+
* devextreme Raise Event
|
|
515
662
|
*/
|
|
516
663
|
var onContentReadyChild = function onContentReadyChild(e) {
|
|
517
664
|
setTimeout(function () {
|
|
@@ -538,57 +685,70 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
|
538
685
|
var onOptionChangedChild = function onOptionChangedChild(e) {
|
|
539
686
|
return onOptionChanged ? onOptionChanged(e) : undefined;
|
|
540
687
|
};
|
|
541
|
-
(0, _react.useEffect)(
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
688
|
+
(0, _react.useEffect)(
|
|
689
|
+
function () {
|
|
690
|
+
setGridDataSource(dataSource);
|
|
691
|
+
checkDataSource(dataSource);
|
|
692
|
+
resetSession();
|
|
693
|
+
},
|
|
694
|
+
[dataSource]
|
|
695
|
+
);
|
|
696
|
+
return /*#__PURE__*/ _react.createElement(
|
|
697
|
+
'div',
|
|
698
|
+
null,
|
|
699
|
+
/*#__PURE__*/ _react.createElement(_loadPanel.LoadPanel, {
|
|
700
|
+
position: {
|
|
701
|
+
of: id,
|
|
702
|
+
},
|
|
703
|
+
}),
|
|
704
|
+
/*#__PURE__*/ _react.createElement(
|
|
705
|
+
_pivotGrid.default,
|
|
706
|
+
{
|
|
707
|
+
id: id,
|
|
708
|
+
ref: $tableRef,
|
|
709
|
+
dataSource: gridDataSource,
|
|
710
|
+
showColumnTotals: false,
|
|
711
|
+
showColumnGrandTotals: true,
|
|
712
|
+
showRowGrandTotals: false,
|
|
713
|
+
width: width,
|
|
714
|
+
height: height,
|
|
715
|
+
allowExpandAll: allowExpandAll,
|
|
716
|
+
allowFiltering: allowFiltering,
|
|
717
|
+
allowSorting: allowSorting,
|
|
718
|
+
allowSortingBySummary: allowSortingBySummary,
|
|
719
|
+
dataFieldArea: dataFieldArea,
|
|
720
|
+
disabled: disabled,
|
|
721
|
+
elementAttr: elementAttr,
|
|
722
|
+
encodeHtml: encodeHtml,
|
|
723
|
+
hideEmptySummaryCells: hideEmptySummaryCells,
|
|
724
|
+
hint: hint,
|
|
725
|
+
rowHeaderLayout: rowHeaderLayout,
|
|
726
|
+
rtlEnabled: rtlEnabled,
|
|
727
|
+
showBorders: showBorders,
|
|
728
|
+
showRowTotals: showRowTotals,
|
|
729
|
+
showTotalsPrior: showTotalsPrior,
|
|
730
|
+
tabIndex: tabIndex,
|
|
731
|
+
visible: visible,
|
|
732
|
+
wordWrapEnabled: wordWrapEnabled,
|
|
733
|
+
onCellClick: onCellClickChild,
|
|
734
|
+
onContentReady: onContentReadyChild,
|
|
735
|
+
onCellPrepared: onCellPreparedChild,
|
|
736
|
+
onContextMenuPreparing: onContextMenuPreparingChild,
|
|
737
|
+
onDisposing: onDisposingChild,
|
|
738
|
+
onExporting: onExportingChild,
|
|
739
|
+
onInitialized: onInitializedChild,
|
|
740
|
+
onOptionChanged: onOptionChangedChild,
|
|
741
|
+
},
|
|
742
|
+
/*#__PURE__*/ _react.createElement(_dataGrid.StateStoring, {
|
|
743
|
+
enabled: stateStoringKey === null || stateStoringKey === void 0 ? void 0 : stateStoringKey.length,
|
|
744
|
+
type: 'sessionStorage',
|
|
745
|
+
storageKey: stateStoringKey,
|
|
746
|
+
}),
|
|
747
|
+
/*#__PURE__*/ _react.createElement(_pivotGrid.FieldChooser, {
|
|
748
|
+
enabled: false,
|
|
749
|
+
})
|
|
750
|
+
)
|
|
751
|
+
);
|
|
592
752
|
});
|
|
593
753
|
var _default = DxPlanitTreeGrid;
|
|
594
|
-
exports.default = _default;
|
|
754
|
+
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "devextreme-planit-treegrid-react",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "Devextreme의 DxPivotGrid를 Tree Grid처럼 보여주는 Wrapper입니다.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"devextreme": "^22.1.6",
|
|
39
|
-
"devextreme-planit-treegrid-react": "^1.1.
|
|
39
|
+
"devextreme-planit-treegrid-react": "^1.1.1",
|
|
40
40
|
"devextreme-react": "^22.1.6",
|
|
41
41
|
"exceljs": "^4.3.0",
|
|
42
42
|
"file-saver": "^2.0.5",
|