devextreme-planit-treegrid-react 0.2.9 → 1.0.0
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 +357 -193
- package/package.json +2 -1
package/dist/DxPlanitTreeGrid.js
CHANGED
@@ -1,43 +1,150 @@
|
|
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
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
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
|
+
}
|
135
|
+
/**
|
136
|
+
* devextreme pivotgrid Configrations 중 사용 불가 항목 : id, width, height, showColumnGrandTotals, showColumnTotals, showRowGrandTotals, FieldChooser
|
137
|
+
* devextreme pivotgrid Configrations 중 사용 방법 변경 항목 : stateStoring, Export
|
138
|
+
* onExported, onFileSaving 이벤트 사용하지 않음.
|
32
139
|
*/
|
33
|
-
/**
|
34
|
-
* todoList:
|
35
|
-
* 2) columIndex 초기화 기능이 있어야 함(column 개수 변할 때)
|
36
|
-
* 3) 헤더에 테이블 삽입되면서 그리드 크기가 늘어남. height에 그리드 크기 늘어난 만큼 반영되어야 함.
|
140
|
+
/**
|
141
|
+
* todoList:
|
142
|
+
* 2) columIndex 초기화 기능이 있어야 함(column 개수 변할 때)
|
143
|
+
* 3) 헤더에 테이블 삽입되면서 그리드 크기가 늘어남. height에 그리드 크기 늘어난 만큼 반영되어야 함.
|
37
144
|
*/
|
38
145
|
|
39
146
|
var grandTotalCssNm = 'data-grand-total';
|
40
|
-
var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
147
|
+
var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref) {
|
41
148
|
var _props$id = props.id,
|
42
149
|
id = _props$id === void 0 ? 'dx-planit-vera-pivotgrid-id' : _props$id,
|
43
150
|
groupField = props.groupField,
|
@@ -112,39 +219,49 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
112
219
|
var excelBorder = {
|
113
220
|
style: 'thin',
|
114
221
|
color: {
|
115
|
-
argb: 'FF7E7E7E'
|
116
|
-
}
|
222
|
+
argb: 'FF7E7E7E',
|
223
|
+
},
|
117
224
|
};
|
118
225
|
(0, _react.useImperativeHandle)(ref, function () {
|
119
226
|
return {
|
120
|
-
exportToExcel: exportToExcel
|
227
|
+
exportToExcel: exportToExcel,
|
121
228
|
};
|
122
229
|
});
|
123
230
|
|
124
|
-
/**
|
125
|
-
* 그리드 사이즈 재조정
|
126
|
-
* @returns 그리드 사이즈
|
231
|
+
/**
|
232
|
+
* 그리드 사이즈 재조정
|
233
|
+
* @returns 그리드 사이즈
|
127
234
|
*/
|
128
235
|
var getGridSize = function getGridSize() {
|
129
236
|
var _wrapper$clientWidth;
|
130
237
|
var wrapper = document.querySelector('.diag-table-wrapper');
|
131
238
|
var gap = 10;
|
132
|
-
setWidth(
|
239
|
+
setWidth(
|
240
|
+
(_wrapper$clientWidth = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null &&
|
241
|
+
_wrapper$clientWidth !== void 0
|
242
|
+
? _wrapper$clientWidth
|
243
|
+
: 0
|
244
|
+
);
|
133
245
|
setHeight(wrapper ? wrapper.clientHeight - gap : 0);
|
134
246
|
window.addEventListener('resize', function () {
|
135
247
|
var _wrapper$clientWidth2;
|
136
|
-
setWidth(
|
248
|
+
setWidth(
|
249
|
+
(_wrapper$clientWidth2 = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null &&
|
250
|
+
_wrapper$clientWidth2 !== void 0
|
251
|
+
? _wrapper$clientWidth2
|
252
|
+
: 0
|
253
|
+
);
|
137
254
|
setHeight(wrapper ? wrapper.clientHeight - gap : 0);
|
138
255
|
});
|
139
256
|
return {
|
140
257
|
width: width,
|
141
|
-
height: height
|
258
|
+
height: height,
|
142
259
|
};
|
143
260
|
};
|
144
261
|
|
145
|
-
/**
|
146
|
-
* 'Total' 을 한글로 변경
|
147
|
-
* @param e devextreme CellPreparedEvent
|
262
|
+
/**
|
263
|
+
* 'Total' 을 한글로 변경
|
264
|
+
* @param e devextreme CellPreparedEvent
|
148
265
|
*/
|
149
266
|
var changeTotalText = function changeTotalText(e) {
|
150
267
|
var _e$cell;
|
@@ -154,13 +271,13 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
154
271
|
if (((_e$cell = e.cell) === null || _e$cell === void 0 ? void 0 : _e$cell.type) === 'T') {
|
155
272
|
var _e$cell$text;
|
156
273
|
var text = (_e$cell$text = e.cell.text) === null || _e$cell$text === void 0 ? void 0 : _e$cell$text.replace('Total', '합계');
|
157
|
-
e.cellElement.innerHTML =
|
274
|
+
e.cellElement.innerHTML = '<span>'.concat(text, '</span>');
|
158
275
|
}
|
159
276
|
};
|
160
277
|
|
161
|
-
/**
|
162
|
-
* null값을 하이픈으로 모두 변경
|
163
|
-
* @param e devextreme CellPreparedEvent
|
278
|
+
/**
|
279
|
+
* null값을 하이픈으로 모두 변경
|
280
|
+
* @param e devextreme CellPreparedEvent
|
164
281
|
*/
|
165
282
|
var changeNullToHipen = function changeNullToHipen(e) {
|
166
283
|
var _e$cell2;
|
@@ -172,30 +289,36 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
172
289
|
}
|
173
290
|
};
|
174
291
|
|
175
|
-
/**
|
176
|
-
* '0', '0.0%' 를 하이픈으로 모두 변경
|
177
|
-
* @param e devextreme CellPreparedEvent
|
292
|
+
/**
|
293
|
+
* '0', '0.0%' 를 하이픈으로 모두 변경
|
294
|
+
* @param e devextreme CellPreparedEvent
|
178
295
|
*/
|
179
296
|
var changeZeroToHipen = function changeZeroToHipen(e) {
|
180
297
|
var _e$cell3, _e$cell4, _e$cell5;
|
181
298
|
if (!convertZeroToHipen) {
|
182
299
|
return;
|
183
300
|
}
|
184
|
-
if (
|
301
|
+
if (
|
302
|
+
e.area === 'data' &&
|
303
|
+
(((_e$cell3 = e.cell) === null || _e$cell3 === void 0 ? void 0 : _e$cell3.text) === '0' ||
|
304
|
+
((_e$cell4 = e.cell) === null || _e$cell4 === void 0 ? void 0 : _e$cell4.text) === '0.0%' ||
|
305
|
+
((_e$cell5 = e.cell) === null || _e$cell5 === void 0 ? void 0 : _e$cell5.text) === '') &&
|
306
|
+
e.cellElement
|
307
|
+
) {
|
185
308
|
e.cellElement.innerHTML = '<span class="text-color">-</span>';
|
186
309
|
}
|
187
310
|
};
|
188
311
|
|
189
|
-
/**
|
190
|
-
* 테이블 헤더에 colspan, rowspan 한 HTMLElement 정보 반환
|
191
|
-
* @param groupField 사용자가 작성한 그룹 정보
|
192
|
-
* @return
|
312
|
+
/**
|
313
|
+
* 테이블 헤더에 colspan, rowspan 한 HTMLElement 정보 반환
|
314
|
+
* @param groupField 사용자가 작성한 그룹 정보
|
315
|
+
* @return
|
193
316
|
*/
|
194
317
|
var makeColspan = function makeColspan(group, index, isLast) {
|
195
318
|
var td = document.createElement('td');
|
196
319
|
var text = group.groupCaption;
|
197
320
|
if (group.depth === 1) {
|
198
|
-
text =
|
321
|
+
text = ''.concat(group.groupCaption);
|
199
322
|
}
|
200
323
|
td.setAttribute('colspan', group.colspan.toString());
|
201
324
|
td.setAttribute('class', 'dx-row-total dx-grand-total dx-planit-colspan');
|
@@ -206,31 +329,33 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
206
329
|
} else if (!isLast && index === 0) {
|
207
330
|
td.setAttribute('style', 'border-bottom: 0');
|
208
331
|
}
|
209
|
-
td.innerHTML =
|
332
|
+
td.innerHTML = '<div>'.concat(text, '</div>');
|
210
333
|
return td;
|
211
334
|
};
|
212
335
|
|
213
|
-
/**
|
214
|
-
* 그룹 필드 데이터 유효성 검증용 데이터 생성
|
215
|
-
* @param groupField
|
216
|
-
* @returns
|
336
|
+
/**
|
337
|
+
* 그룹 필드 데이터 유효성 검증용 데이터 생성
|
338
|
+
* @param groupField
|
339
|
+
* @returns
|
217
340
|
*/
|
218
341
|
var makeCheckGroupData = function makeCheckGroupData(groupField) {
|
219
342
|
var data = {};
|
220
|
-
groupField === null || groupField === void 0
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
343
|
+
groupField === null || groupField === void 0
|
344
|
+
? void 0
|
345
|
+
: groupField.forEach(function (group) {
|
346
|
+
if (data[group.depth]) {
|
347
|
+
data[group.depth] += group.colspan;
|
348
|
+
} else {
|
349
|
+
data[group.depth] = group.colspan;
|
350
|
+
}
|
351
|
+
});
|
227
352
|
return data;
|
228
353
|
};
|
229
354
|
|
230
|
-
/**
|
231
|
-
* GroupField 데이터 검증
|
232
|
-
* @param 사용자가 설정한 그룹 필드 정보
|
233
|
-
* @returns 데이터 검증 결과
|
355
|
+
/**
|
356
|
+
* GroupField 데이터 검증
|
357
|
+
* @param 사용자가 설정한 그룹 필드 정보
|
358
|
+
* @returns 데이터 검증 결과
|
234
359
|
*/
|
235
360
|
var isCheckGroupField = function isCheckGroupField(groupField) {
|
236
361
|
var map = makeCheckGroupData(groupField);
|
@@ -243,21 +368,25 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
243
368
|
return true;
|
244
369
|
};
|
245
370
|
|
246
|
-
/**
|
247
|
-
* Grand Total 셀 정보 저장
|
248
|
-
* @param e
|
371
|
+
/**
|
372
|
+
* Grand Total 셀 정보 저장
|
373
|
+
* @param e
|
249
374
|
*/
|
250
375
|
var setTotalElementInfo = function setTotalElementInfo(e) {
|
251
376
|
var _e$cell6, _e$cell7, _e$cellElement;
|
252
|
-
if (
|
377
|
+
if (
|
378
|
+
!(groupField !== null && groupField !== void 0 && groupField.length) ||
|
379
|
+
((_e$cell6 = e.cell) === null || _e$cell6 === void 0 ? void 0 : _e$cell6.type) !== 'GT' ||
|
380
|
+
((_e$cell7 = e.cell) === null || _e$cell7 === void 0 ? void 0 : _e$cell7.text) !== 'Grand Total'
|
381
|
+
) {
|
253
382
|
return;
|
254
383
|
}
|
255
384
|
(_e$cellElement = e.cellElement) === null || _e$cellElement === void 0 ? void 0 : _e$cellElement.classList.add(grandTotalCssNm);
|
256
385
|
};
|
257
386
|
|
258
|
-
/**
|
259
|
-
* cell의 columnIndex 최대값 저장
|
260
|
-
* @param e
|
387
|
+
/**
|
388
|
+
* cell의 columnIndex 최대값 저장
|
389
|
+
* @param e
|
261
390
|
*/
|
262
391
|
var setMaxColumIndex = function setMaxColumIndex(e) {
|
263
392
|
if (!e.columnIndex) {
|
@@ -268,17 +397,19 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
268
397
|
}
|
269
398
|
};
|
270
399
|
|
271
|
-
/**
|
272
|
-
* groupField depth의 유니크한 배열 구하기
|
273
|
-
* @param group
|
274
|
-
* @param arr
|
275
|
-
* @returns
|
400
|
+
/**
|
401
|
+
* groupField depth의 유니크한 배열 구하기
|
402
|
+
* @param group
|
403
|
+
* @param arr
|
404
|
+
* @returns
|
276
405
|
*/
|
277
406
|
var getGroupDepth = function getGroupDepth(group, arr) {
|
278
407
|
var groupData = group.slice();
|
279
|
-
var set = new Set(
|
280
|
-
|
281
|
-
|
408
|
+
var set = new Set(
|
409
|
+
groupData.map(function (group) {
|
410
|
+
return group.depth;
|
411
|
+
})
|
412
|
+
);
|
282
413
|
return Array.from(set).sort(function compare(a, b) {
|
283
414
|
if (a > b) {
|
284
415
|
return arr === 'asc' ? -1 : 1;
|
@@ -290,11 +421,11 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
290
421
|
});
|
291
422
|
};
|
292
423
|
|
293
|
-
/**
|
294
|
-
* 현재 depth에 맞는 그룹 필드 정보 반환
|
295
|
-
* @param group
|
296
|
-
* @param depth
|
297
|
-
* @returns
|
424
|
+
/**
|
425
|
+
* 현재 depth에 맞는 그룹 필드 정보 반환
|
426
|
+
* @param group
|
427
|
+
* @param depth
|
428
|
+
* @returns
|
298
429
|
*/
|
299
430
|
var getCurrentGroup = function getCurrentGroup(group, depth) {
|
300
431
|
return group.filter(function (gr) {
|
@@ -302,8 +433,8 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
302
433
|
});
|
303
434
|
};
|
304
435
|
|
305
|
-
/**
|
306
|
-
* 테이블 헤더(DOM)에 colspan 적용된 테이블 삽입
|
436
|
+
/**
|
437
|
+
* 테이블 헤더(DOM)에 colspan 적용된 테이블 삽입
|
307
438
|
*/
|
308
439
|
var insertRowHeaderGroup = function insertRowHeaderGroup() {
|
309
440
|
var _thead$previousSiblin;
|
@@ -323,7 +454,10 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
323
454
|
}
|
324
455
|
totalElement.innerHTML = '';
|
325
456
|
totalElement.setAttribute('style', 'padding: 0; border: 0');
|
326
|
-
var colgroup =
|
457
|
+
var colgroup =
|
458
|
+
(_thead$previousSiblin = thead.previousSibling) === null || _thead$previousSiblin === void 0
|
459
|
+
? void 0
|
460
|
+
: _thead$previousSiblin.cloneNode(true);
|
327
461
|
var groupData = groupField.slice();
|
328
462
|
var depth = getGroupDepth(groupData, 'asc');
|
329
463
|
var table = document.createElement('table');
|
@@ -340,10 +474,10 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
340
474
|
totalElement.appendChild(table);
|
341
475
|
};
|
342
476
|
|
343
|
-
/**
|
344
|
-
* Devextreme의 dateController columnInfo에 그룹 정보 삽입
|
345
|
-
* @param group
|
346
|
-
* @returns
|
477
|
+
/**
|
478
|
+
* Devextreme의 dateController columnInfo에 그룹 정보 삽입
|
479
|
+
* @param group
|
480
|
+
* @returns
|
347
481
|
*/
|
348
482
|
var makeDataControllerColumnGroup = function makeDataControllerColumnGroup(group) {
|
349
483
|
var groupData = group.slice();
|
@@ -354,21 +488,21 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
354
488
|
return {
|
355
489
|
colspan: group.colspan,
|
356
490
|
text: group.groupCaption,
|
357
|
-
type: 'GT'
|
491
|
+
type: 'GT',
|
358
492
|
};
|
359
493
|
});
|
360
494
|
});
|
361
495
|
};
|
362
496
|
|
363
|
-
/**
|
364
|
-
* 사용자가 입력한 컬러 조건을 { standard: string; condition: string } 형식으로 변경 반환
|
365
|
-
* @param condition 사용자 입력 컬러 조건식 ex) '>= 100'
|
366
|
-
* @returns
|
497
|
+
/**
|
498
|
+
* 사용자가 입력한 컬러 조건을 { standard: string; condition: string } 형식으로 변경 반환
|
499
|
+
* @param condition 사용자 입력 컬러 조건식 ex) '>= 100'
|
500
|
+
* @returns
|
367
501
|
*/
|
368
502
|
var makeSplitCondtion = function makeSplitCondtion(condition) {
|
369
503
|
var newCondition = {
|
370
504
|
standard: '',
|
371
|
-
condition: ''
|
505
|
+
condition: '',
|
372
506
|
};
|
373
507
|
_toConsumableArray(condition).forEach(function (cond) {
|
374
508
|
if (Number.isNaN(parseFloat(cond))) {
|
@@ -380,10 +514,10 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
380
514
|
return newCondition;
|
381
515
|
};
|
382
516
|
|
383
|
-
/**
|
384
|
-
* 데이터에 색상 적용
|
385
|
-
* @param e onCellPrepared 이벤트
|
386
|
-
* @returns
|
517
|
+
/**
|
518
|
+
* 데이터에 색상 적용
|
519
|
+
* @param e onCellPrepared 이벤트
|
520
|
+
* @returns
|
387
521
|
*/
|
388
522
|
var makeColorAtPercent = function makeColorAtPercent(e) {
|
389
523
|
if (!dataColor || !e.cellElement) {
|
@@ -394,7 +528,14 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
394
528
|
if (e.cell.value === null) {
|
395
529
|
return;
|
396
530
|
}
|
397
|
-
if (
|
531
|
+
if (
|
532
|
+
((_e$cell8 = e.cell) === null || _e$cell8 === void 0
|
533
|
+
? void 0
|
534
|
+
: (_e$cell8$format = _e$cell8.format) === null || _e$cell8$format === void 0
|
535
|
+
? void 0
|
536
|
+
: _e$cell8$format.type) === color.format &&
|
537
|
+
!Number.isNaN(e.cell.value)
|
538
|
+
) {
|
398
539
|
var standardData = makeSplitCondtion(color.condition.replace(/(\s*)/g, ''));
|
399
540
|
var rate = color.format === 'percent' ? 0.01 : 1;
|
400
541
|
var condition = false;
|
@@ -419,9 +560,9 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
419
560
|
});
|
420
561
|
};
|
421
562
|
|
422
|
-
/**
|
423
|
-
* 그리드 데이터 정합성 체크. 데이터 잘못되어 있으면 에러 발생
|
424
|
-
* @param dataSource
|
563
|
+
/**
|
564
|
+
* 그리드 데이터 정합성 체크. 데이터 잘못되어 있으면 에러 발생
|
565
|
+
* @param dataSource
|
425
566
|
*/
|
426
567
|
var checkDataSource = function checkDataSource(dataSource) {
|
427
568
|
var isColumns = dataSource._fields.findIndex(function (field) {
|
@@ -441,28 +582,31 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
441
582
|
}
|
442
583
|
};
|
443
584
|
|
444
|
-
/**
|
445
|
-
* 그리드 펼침 정보 세션스토리지 리셋
|
585
|
+
/**
|
586
|
+
* 그리드 펼침 정보 세션스토리지 리셋
|
446
587
|
*/
|
447
588
|
var resetSession = function resetSession() {
|
448
589
|
sessionStorage.removeItem('dx-vera-pivotgrid-storing');
|
449
590
|
};
|
450
591
|
|
451
|
-
/**
|
452
|
-
* 엑셀 export 명령
|
453
|
-
* @param fileName 저장하고자 하는 엑셀파일명
|
592
|
+
/**
|
593
|
+
* 엑셀 export 명령
|
594
|
+
* @param fileName 저장하고자 하는 엑셀파일명
|
454
595
|
*/
|
455
596
|
var exportToExcel = function exportToExcel(fileName) {
|
456
597
|
setTimeout(function () {
|
457
598
|
var _$tableRef$current;
|
458
|
-
return exportToExcelAction(
|
599
|
+
return exportToExcelAction(
|
600
|
+
(_$tableRef$current = $tableRef.current) === null || _$tableRef$current === void 0 ? void 0 : _$tableRef$current.instance,
|
601
|
+
fileName
|
602
|
+
);
|
459
603
|
});
|
460
604
|
};
|
461
605
|
|
462
|
-
/**
|
463
|
-
* devextreme component 정보의 dataController의 columnInfo에 사용자가 설정한 groupFIled 정보 병합
|
464
|
-
* @param component devextreme component
|
465
|
-
* @returns devextreme component
|
606
|
+
/**
|
607
|
+
* devextreme component 정보의 dataController의 columnInfo에 사용자가 설정한 groupFIled 정보 병합
|
608
|
+
* @param component devextreme component
|
609
|
+
* @returns devextreme component
|
466
610
|
*/
|
467
611
|
var convertDataControllerColumnsInfo = function convertDataControllerColumnsInfo(component) {
|
468
612
|
var arr = [];
|
@@ -478,9 +622,9 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
478
622
|
return component;
|
479
623
|
};
|
480
624
|
|
481
|
-
/**
|
482
|
-
* 엑셀 export
|
483
|
-
* @param e
|
625
|
+
/**
|
626
|
+
* 엑셀 export
|
627
|
+
* @param e
|
484
628
|
*/
|
485
629
|
var exportToExcelAction = function exportToExcelAction(e, fileName) {
|
486
630
|
var newComponent = convertDataControllerColumnsInfo(e);
|
@@ -496,22 +640,25 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
496
640
|
bottom: borderStyle,
|
497
641
|
left: borderStyle,
|
498
642
|
right: borderStyle,
|
499
|
-
top: borderStyle
|
643
|
+
top: borderStyle,
|
500
644
|
};
|
501
|
-
}
|
645
|
+
},
|
502
646
|
}).then(function () {
|
503
647
|
workbook.xlsx.writeBuffer().then(function (buffer) {
|
504
|
-
(0, _fileSaver.default)(
|
505
|
-
|
506
|
-
|
648
|
+
(0, _fileSaver.default)(
|
649
|
+
new Blob([buffer], {
|
650
|
+
type: 'application/octet-stream',
|
651
|
+
}),
|
652
|
+
fileName + '.xlsx'
|
653
|
+
);
|
507
654
|
});
|
508
655
|
});
|
509
656
|
e.cancel = true;
|
510
657
|
};
|
511
658
|
|
512
|
-
/**
|
513
|
-
* devextreme CellPreparedEvent 이벤트 실행
|
514
|
-
* @param e
|
659
|
+
/**
|
660
|
+
* devextreme CellPreparedEvent 이벤트 실행
|
661
|
+
* @param e
|
515
662
|
*/
|
516
663
|
var onCellPreparedChild = function onCellPreparedChild(e) {
|
517
664
|
makeColorAtPercent(e);
|
@@ -523,8 +670,8 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
523
670
|
return onCellPrepared ? onCellPrepared(e) : undefined;
|
524
671
|
};
|
525
672
|
|
526
|
-
/**
|
527
|
-
* devextreme Raise Event
|
673
|
+
/**
|
674
|
+
* devextreme Raise Event
|
528
675
|
*/
|
529
676
|
var onContentReadyChild = function onContentReadyChild(e) {
|
530
677
|
setTimeout(function () {
|
@@ -551,60 +698,77 @@ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
551
698
|
var onOptionChangedChild = function onOptionChangedChild(e) {
|
552
699
|
return onOptionChanged ? onOptionChanged(e) : undefined;
|
553
700
|
};
|
554
|
-
(0, _react.useEffect)(
|
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
|
-
|
592
|
-
|
593
|
-
|
594
|
-
|
595
|
-
|
596
|
-
|
597
|
-
|
598
|
-
|
599
|
-
|
600
|
-
|
601
|
-
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
701
|
+
(0, _react.useEffect)(
|
702
|
+
function () {
|
703
|
+
if (customExcelButton) {
|
704
|
+
}
|
705
|
+
},
|
706
|
+
[customExcelButton]
|
707
|
+
);
|
708
|
+
(0, _react.useEffect)(
|
709
|
+
function () {
|
710
|
+
setGridDataSource(dataSource);
|
711
|
+
checkDataSource(dataSource);
|
712
|
+
resetSession();
|
713
|
+
},
|
714
|
+
[dataSource]
|
715
|
+
);
|
716
|
+
return /*#__PURE__*/ _react.createElement(
|
717
|
+
'div',
|
718
|
+
null,
|
719
|
+
/*#__PURE__*/ _react.createElement(_loadPanel.LoadPanel, {
|
720
|
+
position: {
|
721
|
+
of: id,
|
722
|
+
},
|
723
|
+
}),
|
724
|
+
/*#__PURE__*/ _react.createElement(
|
725
|
+
_pivotGrid.default,
|
726
|
+
{
|
727
|
+
id: id,
|
728
|
+
ref: $tableRef,
|
729
|
+
dataSource: gridDataSource,
|
730
|
+
showColumnTotals: false,
|
731
|
+
showColumnGrandTotals: true,
|
732
|
+
showRowGrandTotals: false,
|
733
|
+
width: width,
|
734
|
+
height: height,
|
735
|
+
allowExpandAll: allowExpandAll,
|
736
|
+
allowFiltering: allowFiltering,
|
737
|
+
allowSorting: allowSorting,
|
738
|
+
allowSortingBySummary: allowSortingBySummary,
|
739
|
+
dataFieldArea: dataFieldArea,
|
740
|
+
disabled: disabled,
|
741
|
+
elementAttr: elementAttr,
|
742
|
+
encodeHtml: encodeHtml,
|
743
|
+
hideEmptySummaryCells: hideEmptySummaryCells,
|
744
|
+
hint: hint,
|
745
|
+
rowHeaderLayout: rowHeaderLayout,
|
746
|
+
rtlEnabled: rtlEnabled,
|
747
|
+
showBorders: showBorders,
|
748
|
+
showRowTotals: showRowTotals,
|
749
|
+
showTotalsPrior: showTotalsPrior,
|
750
|
+
tabIndex: tabIndex,
|
751
|
+
visible: visible,
|
752
|
+
wordWrapEnabled: wordWrapEnabled,
|
753
|
+
onCellClick: onCellClickChild,
|
754
|
+
onContentReady: onContentReadyChild,
|
755
|
+
onCellPrepared: onCellPreparedChild,
|
756
|
+
onContextMenuPreparing: onContextMenuPreparingChild,
|
757
|
+
onDisposing: onDisposingChild,
|
758
|
+
onExporting: onExportingChild,
|
759
|
+
onInitialized: onInitializedChild,
|
760
|
+
onOptionChanged: onOptionChangedChild,
|
761
|
+
},
|
762
|
+
/*#__PURE__*/ _react.createElement(_dataGrid.StateStoring, {
|
763
|
+
enabled: stateStoringKey === null || stateStoringKey === void 0 ? void 0 : stateStoringKey.length,
|
764
|
+
type: 'sessionStorage',
|
765
|
+
storageKey: stateStoringKey,
|
766
|
+
}),
|
767
|
+
/*#__PURE__*/ _react.createElement(_pivotGrid.FieldChooser, {
|
768
|
+
enabled: false,
|
769
|
+
})
|
770
|
+
)
|
771
|
+
);
|
608
772
|
});
|
609
773
|
var _default = DxPlanitTreeGrid;
|
610
|
-
exports.default = _default;
|
774
|
+
exports.default = _default;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "devextreme-planit-treegrid-react",
|
3
|
-
"version": "0.
|
3
|
+
"version": "1.0.0",
|
4
4
|
"description": "Devextreme의 DxPivotGrid를 Tree Grid처럼 보여주는 Wrapper입니다.",
|
5
5
|
"main": "dist/index.js",
|
6
6
|
"files": [
|
@@ -39,6 +39,7 @@
|
|
39
39
|
],
|
40
40
|
"dependencies": {
|
41
41
|
"devextreme": "^22.1.6",
|
42
|
+
"devextreme-planit-treegrid-react": "^0.3.0",
|
42
43
|
"devextreme-react": "^22.1.6",
|
43
44
|
"exceljs": "^4.3.0",
|
44
45
|
"file-saver": "^2.0.5",
|