devextreme-planit-treegrid-react 0.2.7 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/DxPlanitTreeGrid.js +357 -193
- package/dist/index.d.ts +2 -0
- package/package.json +2 -2
- package/dist/index.d.js +0 -5
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/dist/index.d.ts
ADDED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "devextreme-planit-treegrid-react",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.3.0",
|
4
4
|
"description": "Devextreme의 DxPivotGrid를 Tree Grid처럼 보여주는 Wrapper입니다.",
|
5
5
|
"main": "dist/index.js",
|
6
6
|
"files": [
|
@@ -39,7 +39,7 @@
|
|
39
39
|
],
|
40
40
|
"dependencies": {
|
41
41
|
"devextreme": "^22.1.6",
|
42
|
-
"devextreme-planit-treegrid-react": "^0.2.
|
42
|
+
"devextreme-planit-treegrid-react": "^0.2.9",
|
43
43
|
"devextreme-react": "^22.1.6",
|
44
44
|
"exceljs": "^4.3.0",
|
45
45
|
"file-saver": "^2.0.5",
|