devextreme-planit-treegrid-react 1.3.5 → 1.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (3) hide show
  1. package/dist/DxPlanitTreeGrid.js +210 -385
  2. package/dist/index.d.ts +3 -3
  3. package/package.json +7 -10
package/dist/DxPlanitTreeGrid.js CHANGED
@@ -1,149 +1,42 @@
1
- 'use strict';
1
+ "use strict";
2
2
 
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,
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
19
6
  });
20
7
  exports.default = void 0;
21
- var _react = require('react');
22
- var _pivotGrid = _interopRequireWildcard(require('devextreme-react/pivot-grid'));
23
- var _excel_exporter = require('devextreme/excel_exporter');
24
- var _exceljs = require('exceljs');
25
- var _fileSaver = _interopRequireDefault(require('file-saver'));
26
- var _localization = require('devextreme/localization');
27
- function _interopRequireDefault(obj) {
28
- return obj && obj.__esModule ? obj : { default: obj };
29
- }
30
- function _getRequireWildcardCache(nodeInterop) {
31
- if (typeof WeakMap !== 'function') return null;
32
- var cacheBabelInterop = new WeakMap();
33
- var cacheNodeInterop = new WeakMap();
34
- return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {
35
- return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
36
- })(nodeInterop);
37
- }
38
- function _interopRequireWildcard(obj, nodeInterop) {
39
- if (!nodeInterop && obj && obj.__esModule) {
40
- return obj;
41
- }
42
- if (obj === null || (_typeof(obj) !== 'object' && typeof obj !== 'function')) {
43
- return { default: obj };
44
- }
45
- var cache = _getRequireWildcardCache(nodeInterop);
46
- if (cache && cache.has(obj)) {
47
- return cache.get(obj);
48
- }
49
- var newObj = {};
50
- var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
51
- for (var key in obj) {
52
- if (key !== 'default' && Object.prototype.hasOwnProperty.call(obj, key)) {
53
- var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
54
- if (desc && (desc.get || desc.set)) {
55
- Object.defineProperty(newObj, key, desc);
56
- } else {
57
- newObj[key] = obj[key];
58
- }
59
- }
60
- }
61
- newObj.default = obj;
62
- if (cache) {
63
- cache.set(obj, newObj);
64
- }
65
- return newObj;
66
- }
67
- function _toConsumableArray(arr) {
68
- return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
69
- }
70
- function _nonIterableSpread() {
71
- throw new TypeError(
72
- 'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
73
- );
74
- }
75
- function _iterableToArray(iter) {
76
- if ((typeof Symbol !== 'undefined' && iter[Symbol.iterator] != null) || iter['@@iterator'] != null) return Array.from(iter);
77
- }
78
- function _arrayWithoutHoles(arr) {
79
- if (Array.isArray(arr)) return _arrayLikeToArray(arr);
80
- }
81
- function _slicedToArray(arr, i) {
82
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
83
- }
84
- function _nonIterableRest() {
85
- throw new TypeError(
86
- 'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
87
- );
88
- }
89
- function _unsupportedIterableToArray(o, minLen) {
90
- if (!o) return;
91
- if (typeof o === 'string') return _arrayLikeToArray(o, minLen);
92
- var n = Object.prototype.toString.call(o).slice(8, -1);
93
- if (n === 'Object' && o.constructor) n = o.constructor.name;
94
- if (n === 'Map' || n === 'Set') return Array.from(o);
95
- if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
96
- }
97
- function _arrayLikeToArray(arr, len) {
98
- if (len == null || len > arr.length) len = arr.length;
99
- for (var i = 0, arr2 = new Array(len); i < len; i++) {
100
- arr2[i] = arr[i];
101
- }
102
- return arr2;
103
- }
104
- function _iterableToArrayLimit(arr, i) {
105
- var _i = null == arr ? null : ('undefined' != typeof Symbol && arr[Symbol.iterator]) || arr['@@iterator'];
106
- if (null != _i) {
107
- var _s,
108
- _e,
109
- _x,
110
- _r,
111
- _arr = [],
112
- _n = !0,
113
- _d = !1;
114
- try {
115
- if (((_x = (_i = _i.call(arr)).next), 0 === i)) {
116
- if (Object(_i) !== _i) return;
117
- _n = !1;
118
- } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {}
119
- } catch (err) {
120
- (_d = !0), (_e = err);
121
- } finally {
122
- try {
123
- if (!_n && null != _i.return && ((_r = _i.return()), Object(_r) !== _r)) return;
124
- } finally {
125
- if (_d) throw _e;
126
- }
127
- }
128
- return _arr;
129
- }
130
- }
131
- function _arrayWithHoles(arr) {
132
- if (Array.isArray(arr)) return arr;
133
- }
134
- /**
135
- * devextreme pivotgrid Configrations 중 사용 불가 항목 : id, width, height, showColumnGrandTotals, showColumnTotals, showRowGrandTotals, FieldChooser. fieldPanel,
136
- * devextreme pivotgrid Configrations 중 사용 방법 변경 항목 : stateStoring, Export
137
- * onExported, onFileSaving 이벤트 사용하지 않음.
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _pivotGrid = _interopRequireWildcard(require("devextreme-react/pivot-grid"));
10
+ var _excel_exporter = require("devextreme/excel_exporter");
11
+ var _exceljs = require("exceljs");
12
+ var _fileSaver = _interopRequireDefault(require("file-saver"));
13
+ var _localization = require("devextreme/localization");
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
16
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
18
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
19
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
20
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
21
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
22
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
23
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
24
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
25
+ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
26
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
27
+ /**
28
+ * devextreme pivotgrid Configrations 중 사용 불가 항목 : id, width, height, showColumnGrandTotals, showColumnTotals, showRowGrandTotals, FieldChooser. fieldPanel,
29
+ * devextreme pivotgrid Configrations 중 사용 방법 변경 항목 : stateStoring, Export
30
+ * onExported, onFileSaving 이벤트 사용하지 않음.
138
31
  */
139
- /**
140
- * todoList:
141
- * 2) columIndex 초기화 기능이 있어야 함(column 개수 변할 때)
142
- * 3) 헤더에 테이블 삽입되면서 그리드 크기가 늘어남. height에 그리드 크기 늘어난 만큼 반영되어야 함.
32
+ /**
33
+ * todoList:
34
+ * 2) columIndex 초기화 기능이 있어야 함(column 개수 변할 때)
35
+ * 3) 헤더에 테이블 삽입되면서 그리드 크기가 늘어남. height에 그리드 크기 늘어난 만큼 반영되어야 함.
143
36
  */
144
37
 
145
38
  var grandTotalCssNm = 'data-grand-total';
146
- var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref) {
39
+ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
147
40
  var children = props.children,
148
41
  _props$id = props.id,
149
42
  id = _props$id === void 0 ? 'dx-planit-vera-pivotgrid-id' : _props$id,
@@ -167,7 +60,6 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
167
60
  _props$disabled = props.disabled,
168
61
  disabled = _props$disabled === void 0 ? false : _props$disabled,
169
62
  elementAttr = props.elementAttr,
170
- encodeHtml = props.encodeHtml,
171
63
  _props$hideEmptySumma = props.hideEmptySummaryCells,
172
64
  hideEmptySummaryCells = _props$hideEmptySumma === void 0 ? false : _props$hideEmptySumma,
173
65
  hint = props.hint,
@@ -221,8 +113,8 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
221
113
  var excelBorder = {
222
114
  style: 'thin',
223
115
  color: {
224
- argb: 'FF7E7E7E',
225
- },
116
+ argb: 'FF7E7E7E'
117
+ }
226
118
  };
227
119
  var korean = {
228
120
  'ko': {
@@ -233,13 +125,13 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
233
125
  'dxDataGrid-headerFilterOK': '확인',
234
126
  'dxDataGrid-headerFilterCancel': '취소',
235
127
  'dxList-selectAll': '모두 선택',
236
- 'Search': '검색',
237
- },
128
+ 'Search': '검색'
129
+ }
238
130
  };
239
131
 
240
- /**
241
- * devextreme 한국어 변환
242
- * @param lang 설정한 language 정보
132
+ /**
133
+ * devextreme 한국어 변환
134
+ * @param lang 설정한 language 정보
243
135
  */
244
136
  var transferLanguage = function transferLanguage(lang) {
245
137
  (0, _localization.locale)(lang);
@@ -248,9 +140,9 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
248
140
  }
249
141
  };
250
142
 
251
- /**
252
- * props.children 경고문 출력
253
- * @param child props.children
143
+ /**
144
+ * props.children 경고문 출력
145
+ * @param child props.children
254
146
  */
255
147
  var warnDisableProps = function warnDisableProps(child) {
256
148
  if (child.props.showColumnFields || child.props.showFilterFields || child.props.showDataFields) {
@@ -258,66 +150,52 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
258
150
  }
259
151
  };
260
152
 
261
- /**
262
- * props.children 중 FieldPanel 일부 기능 불능화
263
- * @param child props.children
264
- * @returns
153
+ /**
154
+ * props.children 중 FieldPanel 일부 기능 불능화
155
+ * @param child props.children
156
+ * @returns
265
157
  */
266
158
  var modifyChildren = function modifyChildren(child, index) {
267
159
  if ((child === null || child === void 0 ? void 0 : child.type.OptionName.toLowerCase()) === 'fieldpanel') {
268
160
  var _child$props$visible, _child$props$allowFie, _child$props$showRowF;
269
161
  warnDisableProps(child);
270
- return /*#__PURE__*/ _react.createElement(_pivotGrid.FieldPanel, {
162
+ return /*#__PURE__*/_react.default.createElement(_pivotGrid.FieldPanel, {
271
163
  key: 'FieldPanel' + index,
272
164
  visible: (_child$props$visible = child.props.visible) !== null && _child$props$visible !== void 0 ? _child$props$visible : false,
273
- allowFieldDragging:
274
- (_child$props$allowFie = child.props.allowFieldDragging) !== null && _child$props$allowFie !== void 0
275
- ? _child$props$allowFie
276
- : true,
165
+ allowFieldDragging: (_child$props$allowFie = child.props.allowFieldDragging) !== null && _child$props$allowFie !== void 0 ? _child$props$allowFie : true,
277
166
  showColumnFields: false,
278
167
  showFilterFields: false,
279
168
  showDataFields: false,
280
- showRowFields:
281
- (_child$props$showRowF = child.props.showRowFields) !== null && _child$props$showRowF !== void 0 ? _child$props$showRowF : true,
169
+ showRowFields: (_child$props$showRowF = child.props.showRowFields) !== null && _child$props$showRowF !== void 0 ? _child$props$showRowF : true
282
170
  });
283
171
  }
284
172
  return child;
285
173
  };
286
174
 
287
- /**
288
- * 그리드 사이즈 재조정
289
- * @returns 그리드 사이즈
175
+ /**
176
+ * 그리드 사이즈 재조정
177
+ * @returns 그리드 사이즈
290
178
  */
291
179
  var getGridSize = function getGridSize() {
292
180
  var _wrapper$clientWidth;
293
181
  var wrapper = document.querySelector('.diag-table-wrapper');
294
182
  var gap = 10;
295
- setWidth(
296
- (_wrapper$clientWidth = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null &&
297
- _wrapper$clientWidth !== void 0
298
- ? _wrapper$clientWidth
299
- : 0
300
- );
183
+ setWidth((_wrapper$clientWidth = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null && _wrapper$clientWidth !== void 0 ? _wrapper$clientWidth : 0);
301
184
  setHeight(wrapper ? wrapper.clientHeight - gap : 0);
302
185
  window.addEventListener('resize', function () {
303
186
  var _wrapper$clientWidth2;
304
- setWidth(
305
- (_wrapper$clientWidth2 = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null &&
306
- _wrapper$clientWidth2 !== void 0
307
- ? _wrapper$clientWidth2
308
- : 0
309
- );
187
+ setWidth((_wrapper$clientWidth2 = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null && _wrapper$clientWidth2 !== void 0 ? _wrapper$clientWidth2 : 0);
310
188
  setHeight(wrapper ? wrapper.clientHeight - gap : 0);
311
189
  });
312
190
  return {
313
191
  width: width,
314
- height: height,
192
+ height: height
315
193
  };
316
194
  };
317
195
 
318
- /**
319
- * 'Total' 을 한글로 변경
320
- * @param e devextreme CellPreparedEvent
196
+ /**
197
+ * 'Total' 을 한글로 변경
198
+ * @param e devextreme CellPreparedEvent
321
199
  */
322
200
  var changeTotalText = function changeTotalText(e) {
323
201
  var _e$cell;
@@ -327,13 +205,13 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
327
205
  if (((_e$cell = e.cell) === null || _e$cell === void 0 ? void 0 : _e$cell.type) === 'T') {
328
206
  var _e$cell$text;
329
207
  var text = (_e$cell$text = e.cell.text) === null || _e$cell$text === void 0 ? void 0 : _e$cell$text.replace('Total', '합계');
330
- e.cellElement.innerHTML = '<span>'.concat(text, '</span>');
208
+ e.cellElement.innerHTML = "<span>".concat(text, "</span>");
331
209
  }
332
210
  };
333
211
 
334
- /**
335
- * null값을 하이픈으로 모두 변경
336
- * @param e devextreme CellPreparedEvent
212
+ /**
213
+ * null값을 하이픈으로 모두 변경
214
+ * @param e devextreme CellPreparedEvent
337
215
  */
338
216
  var changeNullToHipen = function changeNullToHipen(e) {
339
217
  var _e$cell2;
@@ -345,30 +223,24 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
345
223
  }
346
224
  };
347
225
 
348
- /**
349
- * '0', '0.0%' 를 하이픈으로 모두 변경
350
- * @param e devextreme CellPreparedEvent
226
+ /**
227
+ * '0', '0.0%' 를 하이픈으로 모두 변경
228
+ * @param e devextreme CellPreparedEvent
351
229
  */
352
230
  var changeZeroToHipen = function changeZeroToHipen(e) {
353
231
  var _e$cell3, _e$cell4, _e$cell5;
354
232
  if (!convertZeroToHipen) {
355
233
  return;
356
234
  }
357
- if (
358
- e.area === 'data' &&
359
- (((_e$cell3 = e.cell) === null || _e$cell3 === void 0 ? void 0 : _e$cell3.text) === '0' ||
360
- ((_e$cell4 = e.cell) === null || _e$cell4 === void 0 ? void 0 : _e$cell4.text) === '0.0%' ||
361
- ((_e$cell5 = e.cell) === null || _e$cell5 === void 0 ? void 0 : _e$cell5.text) === '') &&
362
- e.cellElement
363
- ) {
235
+ if (e.area === 'data' && (((_e$cell3 = e.cell) === null || _e$cell3 === void 0 ? void 0 : _e$cell3.text) === '0' || ((_e$cell4 = e.cell) === null || _e$cell4 === void 0 ? void 0 : _e$cell4.text) === '0.0%' || ((_e$cell5 = e.cell) === null || _e$cell5 === void 0 ? void 0 : _e$cell5.text) === '') && e.cellElement) {
364
236
  e.cellElement.innerHTML = '<span class="text-color">-</span>';
365
237
  }
366
238
  };
367
239
 
368
- /**
369
- * 테이블 헤더에 colspan, rowspan 한 HTMLElement 정보 반환
370
- * @param groupField 사용자가 작성한 그룹 정보
371
- * @return
240
+ /**
241
+ * 테이블 헤더에 colspan, rowspan 한 HTMLElement 정보 반환
242
+ * @param groupField 사용자가 작성한 그룹 정보
243
+ * @return
372
244
  */
373
245
  var makeColspan = function makeColspan(group, index, isLast) {
374
246
  var _group$html;
@@ -383,33 +255,31 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
383
255
  } else if (!isLast && index === 0) {
384
256
  td.setAttribute('style', 'border-bottom: 0');
385
257
  }
386
- td.innerHTML = '<span>'.concat(text, '</span>');
258
+ td.innerHTML = "<span>".concat(text, "</span>");
387
259
  return td;
388
260
  };
389
261
 
390
- /**
391
- * 그룹 필드 데이터 유효성 검증용 데이터 생성
392
- * @param groupField
393
- * @returns
262
+ /**
263
+ * 그룹 필드 데이터 유효성 검증용 데이터 생성
264
+ * @param groupField
265
+ * @returns
394
266
  */
395
267
  var makeCheckGroupData = function makeCheckGroupData(groupField) {
396
268
  var data = {};
397
- groupField === null || groupField === void 0
398
- ? void 0
399
- : groupField.forEach(function (group) {
400
- if (data[group.depth]) {
401
- data[group.depth] += group.colspan;
402
- } else {
403
- data[group.depth] = group.colspan;
404
- }
405
- });
269
+ groupField === null || groupField === void 0 ? void 0 : groupField.forEach(function (group) {
270
+ if (data[group.depth]) {
271
+ data[group.depth] += group.colspan;
272
+ } else {
273
+ data[group.depth] = group.colspan;
274
+ }
275
+ });
406
276
  return data;
407
277
  };
408
278
 
409
- /**
410
- * GroupField 데이터 검증
411
- * @param 사용자가 설정한 그룹 필드 정보
412
- * @returns 데이터 검증 결과
279
+ /**
280
+ * GroupField 데이터 검증
281
+ * @param 사용자가 설정한 그룹 필드 정보
282
+ * @returns 데이터 검증 결과
413
283
  */
414
284
  var isCheckGroupField = function isCheckGroupField(groupField) {
415
285
  var map = makeCheckGroupData(groupField);
@@ -422,25 +292,21 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
422
292
  return true;
423
293
  };
424
294
 
425
- /**
426
- * Grand Total 셀 정보 저장
427
- * @param e
295
+ /**
296
+ * Grand Total 셀 정보 저장
297
+ * @param e
428
298
  */
429
299
  var setTotalElementInfo = function setTotalElementInfo(e) {
430
300
  var _e$cell6, _e$cell7, _e$cellElement;
431
- if (
432
- !(groupField !== null && groupField !== void 0 && groupField.length) ||
433
- ((_e$cell6 = e.cell) === null || _e$cell6 === void 0 ? void 0 : _e$cell6.type) !== 'GT' ||
434
- ((_e$cell7 = e.cell) === null || _e$cell7 === void 0 ? void 0 : _e$cell7.text) !== 'Grand Total'
435
- ) {
301
+ if (!(groupField !== null && groupField !== void 0 && groupField.length) || ((_e$cell6 = e.cell) === null || _e$cell6 === void 0 ? void 0 : _e$cell6.type) !== 'GT' || ((_e$cell7 = e.cell) === null || _e$cell7 === void 0 ? void 0 : _e$cell7.text) !== 'Grand Total') {
436
302
  return;
437
303
  }
438
304
  (_e$cellElement = e.cellElement) === null || _e$cellElement === void 0 ? void 0 : _e$cellElement.classList.add(grandTotalCssNm);
439
305
  };
440
306
 
441
- /**
442
- * cell의 columnIndex 최대값 저장
443
- * @param e
307
+ /**
308
+ * cell의 columnIndex 최대값 저장
309
+ * @param e
444
310
  */
445
311
  var setMaxColumIndex = function setMaxColumIndex(e) {
446
312
  if (!e.columnIndex) {
@@ -451,19 +317,17 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
451
317
  }
452
318
  };
453
319
 
454
- /**
455
- * groupField depth의 유니크한 배열 구하기
456
- * @param group
457
- * @param arr
458
- * @returns
320
+ /**
321
+ * groupField depth의 유니크한 배열 구하기
322
+ * @param group
323
+ * @param arr
324
+ * @returns
459
325
  */
460
326
  var getGroupDepth = function getGroupDepth(group, arr) {
461
327
  var groupData = group.slice();
462
- var set = new Set(
463
- groupData.map(function (group) {
464
- return group.depth;
465
- })
466
- );
328
+ var set = new Set(groupData.map(function (group) {
329
+ return group.depth;
330
+ }));
467
331
  return Array.from(set).sort(function compare(a, b) {
468
332
  if (a > b) {
469
333
  return arr === 'asc' ? -1 : 1;
@@ -475,11 +339,11 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
475
339
  });
476
340
  };
477
341
 
478
- /**
479
- * 현재 depth에 맞는 그룹 필드 정보 반환
480
- * @param group
481
- * @param depth
482
- * @returns
342
+ /**
343
+ * 현재 depth에 맞는 그룹 필드 정보 반환
344
+ * @param group
345
+ * @param depth
346
+ * @returns
483
347
  */
484
348
  var getCurrentGroup = function getCurrentGroup(group, depth) {
485
349
  return group.filter(function (gr) {
@@ -487,8 +351,8 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
487
351
  });
488
352
  };
489
353
 
490
- /**
491
- * 테이블 헤더(DOM)에 colspan 적용된 테이블 삽입
354
+ /**
355
+ * 테이블 헤더(DOM)에 colspan 적용된 테이블 삽입
492
356
  */
493
357
  var insertRowHeaderGroup = function insertRowHeaderGroup() {
494
358
  var _thead$previousSiblin;
@@ -508,10 +372,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
508
372
  }
509
373
  totalElement.innerHTML = '';
510
374
  totalElement.setAttribute('style', 'padding: 0; border: 0');
511
- var colgroup =
512
- (_thead$previousSiblin = thead.previousSibling) === null || _thead$previousSiblin === void 0
513
- ? void 0
514
- : _thead$previousSiblin.cloneNode(true);
375
+ var colgroup = (_thead$previousSiblin = thead.previousSibling) === null || _thead$previousSiblin === void 0 ? void 0 : _thead$previousSiblin.cloneNode(true);
515
376
  var groupData = groupField.slice();
516
377
  var depth = getGroupDepth(groupData, 'asc');
517
378
  var table = document.createElement('table');
@@ -528,10 +389,10 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
528
389
  totalElement.appendChild(table);
529
390
  };
530
391
 
531
- /**
532
- * Devextreme의 dateController columnInfo에 그룹 정보 삽입
533
- * @param group
534
- * @returns
392
+ /**
393
+ * Devextreme의 dateController columnInfo에 그룹 정보 삽입
394
+ * @param group
395
+ * @returns
535
396
  */
536
397
  var makeDataControllerColumnGroup = function makeDataControllerColumnGroup(group) {
537
398
  var groupData = group.slice();
@@ -542,21 +403,21 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
542
403
  return {
543
404
  colspan: group.colspan,
544
405
  text: group.groupCaption,
545
- type: 'GT',
406
+ type: 'GT'
546
407
  };
547
408
  });
548
409
  });
549
410
  };
550
411
 
551
- /**
552
- * 사용자가 입력한 컬러 조건을 { standard: string; condition: string } 형식으로 변경 반환
553
- * @param condition 사용자 입력 컬러 조건식 ex) '>= 100'
554
- * @returns
412
+ /**
413
+ * 사용자가 입력한 컬러 조건을 { standard: string; condition: string } 형식으로 변경 반환
414
+ * @param condition 사용자 입력 컬러 조건식 ex) '>= 100'
415
+ * @returns
555
416
  */
556
417
  var makeSplitCondtion = function makeSplitCondtion(condition) {
557
418
  var newCondition = {
558
419
  standard: '',
559
- condition: '',
420
+ condition: ''
560
421
  };
561
422
  _toConsumableArray(condition).forEach(function (cond) {
562
423
  if (Number.isNaN(parseFloat(cond))) {
@@ -568,10 +429,10 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
568
429
  return newCondition;
569
430
  };
570
431
 
571
- /**
572
- * 데이터에 색상 적용
573
- * @param e onCellPrepared 이벤트
574
- * @returns
432
+ /**
433
+ * 데이터에 색상 적용
434
+ * @param e onCellPrepared 이벤트
435
+ * @returns
575
436
  */
576
437
  var makeColorAtPercent = function makeColorAtPercent(e) {
577
438
  if (!dataColor || !e.cellElement) {
@@ -582,14 +443,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
582
443
  if (e.cell.value === null) {
583
444
  return;
584
445
  }
585
- if (
586
- ((_e$cell8 = e.cell) === null || _e$cell8 === void 0
587
- ? void 0
588
- : (_e$cell8$format = _e$cell8.format) === null || _e$cell8$format === void 0
589
- ? void 0
590
- : _e$cell8$format.type) === color.format &&
591
- !Number.isNaN(e.cell.value)
592
- ) {
446
+ if (((_e$cell8 = e.cell) === null || _e$cell8 === void 0 ? void 0 : (_e$cell8$format = _e$cell8.format) === null || _e$cell8$format === void 0 ? void 0 : _e$cell8$format.type) === color.format && !Number.isNaN(e.cell.value)) {
593
447
  var standardData = makeSplitCondtion(color.condition.replace(/(\s*)/g, ''));
594
448
  var rate = color.format === 'percent' ? 0.01 : 1;
595
449
  var condition = false;
@@ -614,15 +468,13 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
614
468
  });
615
469
  };
616
470
 
617
- /**
618
- * 그리드 데이터 정합성 체크. 데이터 잘못되어 있으면 에러 발생
619
- * @param dataSource
471
+ /**
472
+ * 그리드 데이터 정합성 체크. 데이터 잘못되어 있으면 에러 발생
473
+ * @param dataSource
620
474
  */
621
475
  var checkDataSource = function checkDataSource(dataSource) {
622
476
  if (!dataSource._fields) {
623
- throw Error(
624
- 'PivotGridDataSource 의 field 정보가 없습니다. 올바른 field 정보를 입력하세요. https://js.devexpress.com/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/'
625
- );
477
+ throw Error('PivotGridDataSource 의 field 정보가 없습니다. 올바른 field 정보를 입력하세요. https://js.devexpress.com/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/');
626
478
  }
627
479
  var isColumns = dataSource._fields.findIndex(function (field) {
628
480
  return field.area === 'column';
@@ -641,24 +493,21 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
641
493
  }
642
494
  };
643
495
 
644
- /**
645
- * 엑셀 export 명령
646
- * @param fileName 저장하고자 하는 엑셀파일명
496
+ /**
497
+ * 엑셀 export 명령
498
+ * @param fileName 저장하고자 하는 엑셀파일명
647
499
  */
648
500
  var exportToExcel = function exportToExcel(fileName) {
649
501
  setTimeout(function () {
650
502
  var _$tableRef$current;
651
- return exportToExcelAction(
652
- (_$tableRef$current = $tableRef.current) === null || _$tableRef$current === void 0 ? void 0 : _$tableRef$current.instance,
653
- fileName
654
- );
503
+ return exportToExcelAction((_$tableRef$current = $tableRef.current) === null || _$tableRef$current === void 0 ? void 0 : _$tableRef$current.instance, fileName);
655
504
  });
656
505
  };
657
506
 
658
- /**
659
- * devextreme component 정보의 dataController의 columnInfo에 사용자가 설정한 groupFIled 정보 병합
660
- * @param component devextreme component
661
- * @returns devextreme component
507
+ /**
508
+ * devextreme component 정보의 dataController의 columnInfo에 사용자가 설정한 groupFIled 정보 병합
509
+ * @param component devextreme component
510
+ * @returns devextreme component
662
511
  */
663
512
  var convertDataControllerColumnsInfo = function convertDataControllerColumnsInfo(component) {
664
513
  var arr = [];
@@ -674,9 +523,9 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
674
523
  return component;
675
524
  };
676
525
 
677
- /**
678
- * 엑셀 export
679
- * @param e
526
+ /**
527
+ * 엑셀 export
528
+ * @param e
680
529
  */
681
530
  var exportToExcelAction = function exportToExcelAction(e, fileName) {
682
531
  var newComponent = convertDataControllerColumnsInfo(e);
@@ -692,26 +541,23 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
692
541
  bottom: borderStyle,
693
542
  left: borderStyle,
694
543
  right: borderStyle,
695
- top: borderStyle,
544
+ top: borderStyle
696
545
  };
697
- },
546
+ }
698
547
  }).then(function () {
699
548
  workbook.xlsx.writeBuffer().then(function (buffer) {
700
- (0, _fileSaver.default)(
701
- new Blob([buffer], {
702
- type: 'application/octet-stream',
703
- }),
704
- fileName + '.xlsx'
705
- );
549
+ (0, _fileSaver.default)(new Blob([buffer], {
550
+ type: 'application/octet-stream'
551
+ }), fileName + '.xlsx');
706
552
  });
707
553
  });
708
554
  e.cancel = true;
709
555
  };
710
556
 
711
- /**
712
- * props.children 요소 중 일부 요소 default 설정 변경
713
- * @param child ReactNode
714
- * @returns ReatNode
557
+ /**
558
+ * props.children 요소 중 일부 요소 default 설정 변경
559
+ * @param child ReactNode
560
+ * @returns ReatNode
715
561
  */
716
562
  var convertChildren = function convertChildren(child) {
717
563
  if (Array.isArray(child)) {
@@ -723,10 +569,10 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
723
569
  }
724
570
  };
725
571
 
726
- /**
727
- * StateStoring 의 storageKey값 가져오기
728
- * @param child props.children
729
- * @returns storageKey값
572
+ /**
573
+ * StateStoring 의 storageKey값 가져오기
574
+ * @param child props.children
575
+ * @returns storageKey값
730
576
  */
731
577
  var getStateStorageKey = function getStateStorageKey(child) {
732
578
  if (Array.isArray(child)) {
@@ -743,8 +589,8 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
743
589
  return null;
744
590
  };
745
591
 
746
- /**
747
- * 그리드 펼침 정보 세션스토리지 리셋
592
+ /**
593
+ * 그리드 펼침 정보 세션스토리지 리셋
748
594
  */
749
595
  var resetSession = function resetSession() {
750
596
  var stateStoringKey = getStateStorageKey(children);
@@ -753,9 +599,9 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
753
599
  }
754
600
  };
755
601
 
756
- /**
757
- * devextreme CellPreparedEvent 이벤트 실행
758
- * @param e
602
+ /**
603
+ * devextreme CellPreparedEvent 이벤트 실행
604
+ * @param e
759
605
  */
760
606
  var onCellPreparedChild = function onCellPreparedChild(e) {
761
607
  makeColorAtPercent(e);
@@ -767,8 +613,8 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
767
613
  return onCellPrepared ? onCellPrepared(e) : undefined;
768
614
  };
769
615
 
770
- /**
771
- * devextreme Raise Event
616
+ /**
617
+ * devextreme Raise Event
772
618
  */
773
619
  var onContentReadyChild = function onContentReadyChild(e) {
774
620
  insertRowHeaderGroup();
@@ -795,80 +641,59 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
795
641
  };
796
642
  (0, _react.useImperativeHandle)(ref, function () {
797
643
  return {
798
- exportToExcel: exportToExcel,
644
+ exportToExcel: exportToExcel
799
645
  };
800
646
  });
801
- (0, _react.useEffect)(
802
- function () {
803
- if (Object.keys(dataSource).length) {
804
- if (oldDataSource && oldDataSource._fields.length !== dataSource._fields.length) {
805
- resetSession();
806
- setOldDataSource(dataSource);
807
- }
808
- setGridDataSource(dataSource);
809
- checkDataSource(dataSource);
647
+ (0, _react.useEffect)(function () {
648
+ if (Object.keys(dataSource).length) {
649
+ if (oldDataSource && oldDataSource._fields.length !== dataSource._fields.length) {
650
+ resetSession();
651
+ setOldDataSource(dataSource);
810
652
  }
811
- },
812
- [dataSource]
813
- );
814
- (0, _react.useEffect)(
815
- function () {
816
- transferLanguage(language);
817
- },
818
- [language]
819
- );
820
- return /*#__PURE__*/ _react.createElement(
821
- _react.Fragment,
822
- null,
823
- Object.keys(gridDataSource).length &&
824
- /*#__PURE__*/ _react.createElement(
825
- 'div',
826
- null,
827
- /*#__PURE__*/ _react.createElement(
828
- _pivotGrid.default,
829
- {
830
- id: id,
831
- ref: $tableRef,
832
- dataSource: gridDataSource,
833
- showColumnTotals: false,
834
- showColumnGrandTotals: true,
835
- showRowGrandTotals: false,
836
- width: width,
837
- height: height,
838
- allowExpandAll: allowExpandAll,
839
- allowFiltering: allowFiltering,
840
- allowSorting: allowSorting,
841
- allowSortingBySummary: allowSortingBySummary,
842
- dataFieldArea: dataFieldArea,
843
- disabled: disabled,
844
- elementAttr: elementAttr,
845
- encodeHtml: encodeHtml,
846
- hideEmptySummaryCells: hideEmptySummaryCells,
847
- hint: hint,
848
- rowHeaderLayout: rowHeaderLayout,
849
- rtlEnabled: rtlEnabled,
850
- showBorders: showBorders,
851
- showRowTotals: showRowTotals,
852
- showTotalsPrior: showTotalsPrior,
853
- tabIndex: tabIndex,
854
- visible: visible,
855
- wordWrapEnabled: wordWrapEnabled,
856
- onCellClick: onCellClickChild,
857
- onContentReady: onContentReadyChild,
858
- onCellPrepared: onCellPreparedChild,
859
- onContextMenuPreparing: onContextMenuPreparingChild,
860
- onDisposing: onDisposingChild,
861
- onExporting: onExportingChild,
862
- onInitialized: onInitializedChild,
863
- onOptionChanged: onOptionChangedChild,
864
- },
865
- convertChildren(children),
866
- /*#__PURE__*/ _react.createElement(_pivotGrid.FieldChooser, {
867
- enabled: false,
868
- })
869
- )
870
- )
871
- );
653
+ setGridDataSource(dataSource);
654
+ checkDataSource(dataSource);
655
+ }
656
+ }, [dataSource]);
657
+ (0, _react.useEffect)(function () {
658
+ transferLanguage(language);
659
+ }, [language]);
660
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Object.keys(gridDataSource).length && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_pivotGrid.default, {
661
+ id: id,
662
+ ref: $tableRef,
663
+ dataSource: gridDataSource,
664
+ showColumnTotals: false,
665
+ showColumnGrandTotals: true,
666
+ showRowGrandTotals: false,
667
+ width: width,
668
+ height: height,
669
+ allowExpandAll: allowExpandAll,
670
+ allowFiltering: allowFiltering,
671
+ allowSorting: allowSorting,
672
+ allowSortingBySummary: allowSortingBySummary,
673
+ dataFieldArea: dataFieldArea,
674
+ disabled: disabled,
675
+ elementAttr: elementAttr,
676
+ hideEmptySummaryCells: hideEmptySummaryCells,
677
+ hint: hint,
678
+ rowHeaderLayout: rowHeaderLayout,
679
+ rtlEnabled: rtlEnabled,
680
+ showBorders: showBorders,
681
+ showRowTotals: showRowTotals,
682
+ showTotalsPrior: showTotalsPrior,
683
+ tabIndex: tabIndex,
684
+ visible: visible,
685
+ wordWrapEnabled: wordWrapEnabled,
686
+ onCellClick: onCellClickChild,
687
+ onContentReady: onContentReadyChild,
688
+ onCellPrepared: onCellPreparedChild,
689
+ onContextMenuPreparing: onContextMenuPreparingChild,
690
+ onDisposing: onDisposingChild,
691
+ onExporting: onExportingChild,
692
+ onInitialized: onInitializedChild,
693
+ onOptionChanged: onOptionChangedChild
694
+ }, convertChildren(children), /*#__PURE__*/_react.default.createElement(_pivotGrid.FieldChooser, {
695
+ enabled: false
696
+ }))));
872
697
  });
873
698
  var _default = DxPlanitTreeGrid;
874
- exports.default = _default;
699
+ exports.default = _default;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import DevExpress from 'devextreme';
3
- import { HeaderFilter } from 'devextreme-react/pivot-grid';
3
+ // import { HeaderFilter } from 'devextreme-react/pivot-grid';
4
4
  import { Format } from 'devextreme/localization';
5
5
 
6
6
  export declare const DxPlanitTreeGrid;
@@ -27,7 +27,7 @@ export declare module TypeDxPlanit {
27
27
  condition: string;
28
28
  }
29
29
 
30
- export interface Props extends DevExpress.ui.dxPivotGrid.Properties {
30
+ export interface Props extends DevExpress.ui.dxPivotGridOptions {
31
31
  id?: string;
32
32
  dataSource?: any;
33
33
  groupField?: IGroupField[];
@@ -35,7 +35,7 @@ export declare module TypeDxPlanit {
35
35
  convertNullToHipen?: boolean;
36
36
  convertZeroToHipen?: boolean;
37
37
  customExcelButton?: boolean;
38
- HeaderFilter?: HeaderFilter;
38
+ // HeaderFilter?: HeaderFilter;
39
39
  children?: React.ReactNode;
40
40
  language?: string;
41
41
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "devextreme-planit-treegrid-react",
3
- "version": "1.3.5",
3
+ "version": "1.4.0",
4
4
  "description": "Devextreme의 DxPivotGrid를 Tree Grid처럼 보여주는 Wrapper입니다.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -42,14 +42,14 @@
42
42
  "not op_mini all"
43
43
  ],
44
44
  "dependencies": {
45
- "devextreme": "^22.1.6",
46
- "devextreme-planit-treegrid-react": "^1.3.4",
47
- "devextreme-react": "^22.1.6",
45
+ "devextreme": "^20.2.3",
46
+ "devextreme-planit-treegrid-react": "^1.3.5",
47
+ "devextreme-react": "^20.2.3",
48
48
  "exceljs": "^4.3.0",
49
49
  "file-saver": "^2.0.5",
50
- "react": "^18.2.0",
51
- "react-dom": "^18.2.0",
52
- "react-router-dom": "^6.4.3",
50
+ "react": "^16.13.1",
51
+ "react-dom": "^16.13.1",
52
+ "react-router-dom": "^5.1.2",
53
53
  "react-scripts": "^5.0.1",
54
54
  "typescript": "^4.9.3",
55
55
  "uuid": "^9.0.0",
@@ -64,9 +64,6 @@
64
64
  "@babel/preset-react": "^7.18.6",
65
65
  "@babel/preset-typescript": "^7.18.6",
66
66
  "@babel/register": "^7.18.9",
67
- "@testing-library/jest-dom": "^5.16.5",
68
- "@testing-library/react": "^13.4.0",
69
- "@testing-library/user-event": "^13.5.0",
70
67
  "@types/file-saver": "^2.0.5",
71
68
  "@types/react": "^18.0.25",
72
69
  "@types/react-dom": "^18.0.9",