devextreme-planit-treegrid-react 1.1.2 → 1.1.4

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/README.md CHANGED
@@ -74,7 +74,9 @@ value가 0 | '0' | '0%' 인 데이터를 하이픈('-')으로 보여줍니다.
74
74
  groupField는 그리드 상단에 colspan 된 새로운 column을 생성합니다. 자세한 사용법은 github의 demo 폴더를 확인하십시오.
75
75
 
76
76
  ```
77
- export const TreeDataGroup: IGroupField[] = [
77
+ import { TypeDxPlanit } from 'devextreme-planit-treegrid-react';
78
+
79
+ export const TreeDataGroup: TypeDxPlanit.IGroupField[] = [
78
80
  {
79
81
  groupCaption: '진료 수입 (백만원)',
80
82
  groupName: 'mediIncome',
@@ -1,139 +1,43 @@
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 _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
- }
8
+ var _react = require("react");
9
+ var _loadPanel = require("devextreme-react/load-panel");
10
+ var _pivotGrid = _interopRequireWildcard(require("devextreme-react/pivot-grid"));
11
+ var _dataGrid = require("devextreme-react/data-grid");
12
+ var _excel_exporter = require("devextreme/excel_exporter");
13
+ var _exceljs = require("exceljs");
14
+ var _fileSaver = _interopRequireDefault(require("file-saver"));
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
+ 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); }
17
+ 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; }
18
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
19
+ 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."); }
20
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
21
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
22
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
23
+ 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."); }
24
+ 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); }
25
+ 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; }
26
+ 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; } }
27
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
28
+ /**
29
+ * devextreme pivotgrid Configrations 중 사용 불가 항목 : id, width, height, showColumnGrandTotals, showColumnTotals, showRowGrandTotals, FieldChooser
30
+ * devextreme pivotgrid Configrations 사용 방법 변경 항목 : stateStoring, Export
31
+ * onExported, onFileSaving 이벤트 사용하지 않음.
32
+ */
33
+ /**
34
+ * todoList:
35
+ * 2) columIndex 초기화 기능이 있어야 함(column 개수 변할 때)
36
+ * 3) 헤더에 테이블 삽입되면서 그리드 크기가 늘어남. height에 그리드 크기 늘어난 만큼 반영되어야 함.
37
+ */
38
+
135
39
  var grandTotalCssNm = 'data-grand-total';
136
- var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref) {
40
+ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
137
41
  var _props$id = props.id,
138
42
  id = _props$id === void 0 ? 'dx-planit-vera-pivotgrid-id' : _props$id,
139
43
  groupField = props.groupField,
@@ -208,49 +112,39 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
208
112
  var excelBorder = {
209
113
  style: 'thin',
210
114
  color: {
211
- argb: 'FF7E7E7E',
212
- },
115
+ argb: 'FF7E7E7E'
116
+ }
213
117
  };
214
118
  (0, _react.useImperativeHandle)(ref, function () {
215
119
  return {
216
- exportToExcel: exportToExcel,
120
+ exportToExcel: exportToExcel
217
121
  };
218
122
  });
219
123
 
220
- /**
221
- * 그리드 사이즈 재조정
222
- * @returns 그리드 사이즈
124
+ /**
125
+ * 그리드 사이즈 재조정
126
+ * @returns 그리드 사이즈
223
127
  */
224
128
  var getGridSize = function getGridSize() {
225
129
  var _wrapper$clientWidth;
226
130
  var wrapper = document.querySelector('.diag-table-wrapper');
227
131
  var gap = 10;
228
- setWidth(
229
- (_wrapper$clientWidth = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null &&
230
- _wrapper$clientWidth !== void 0
231
- ? _wrapper$clientWidth
232
- : 0
233
- );
132
+ setWidth((_wrapper$clientWidth = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null && _wrapper$clientWidth !== void 0 ? _wrapper$clientWidth : 0);
234
133
  setHeight(wrapper ? wrapper.clientHeight - gap : 0);
235
134
  window.addEventListener('resize', function () {
236
135
  var _wrapper$clientWidth2;
237
- setWidth(
238
- (_wrapper$clientWidth2 = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null &&
239
- _wrapper$clientWidth2 !== void 0
240
- ? _wrapper$clientWidth2
241
- : 0
242
- );
136
+ setWidth((_wrapper$clientWidth2 = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null && _wrapper$clientWidth2 !== void 0 ? _wrapper$clientWidth2 : 0);
243
137
  setHeight(wrapper ? wrapper.clientHeight - gap : 0);
244
138
  });
245
139
  return {
246
140
  width: width,
247
- height: height,
141
+ height: height
248
142
  };
249
143
  };
250
144
 
251
- /**
252
- * 'Total' 을 한글로 변경
253
- * @param e devextreme CellPreparedEvent
145
+ /**
146
+ * 'Total' 을 한글로 변경
147
+ * @param e devextreme CellPreparedEvent
254
148
  */
255
149
  var changeTotalText = function changeTotalText(e) {
256
150
  var _e$cell;
@@ -260,13 +154,13 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
260
154
  if (((_e$cell = e.cell) === null || _e$cell === void 0 ? void 0 : _e$cell.type) === 'T') {
261
155
  var _e$cell$text;
262
156
  var text = (_e$cell$text = e.cell.text) === null || _e$cell$text === void 0 ? void 0 : _e$cell$text.replace('Total', '합계');
263
- e.cellElement.innerHTML = '<span>'.concat(text, '</span>');
157
+ e.cellElement.innerHTML = "<span>".concat(text, "</span>");
264
158
  }
265
159
  };
266
160
 
267
- /**
268
- * null값을 하이픈으로 모두 변경
269
- * @param e devextreme CellPreparedEvent
161
+ /**
162
+ * null값을 하이픈으로 모두 변경
163
+ * @param e devextreme CellPreparedEvent
270
164
  */
271
165
  var changeNullToHipen = function changeNullToHipen(e) {
272
166
  var _e$cell2;
@@ -278,30 +172,24 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
278
172
  }
279
173
  };
280
174
 
281
- /**
282
- * '0', '0.0%' 를 하이픈으로 모두 변경
283
- * @param e devextreme CellPreparedEvent
175
+ /**
176
+ * '0', '0.0%' 를 하이픈으로 모두 변경
177
+ * @param e devextreme CellPreparedEvent
284
178
  */
285
179
  var changeZeroToHipen = function changeZeroToHipen(e) {
286
180
  var _e$cell3, _e$cell4, _e$cell5;
287
181
  if (!convertZeroToHipen) {
288
182
  return;
289
183
  }
290
- if (
291
- e.area === 'data' &&
292
- (((_e$cell3 = e.cell) === null || _e$cell3 === void 0 ? void 0 : _e$cell3.text) === '0' ||
293
- ((_e$cell4 = e.cell) === null || _e$cell4 === void 0 ? void 0 : _e$cell4.text) === '0.0%' ||
294
- ((_e$cell5 = e.cell) === null || _e$cell5 === void 0 ? void 0 : _e$cell5.text) === '') &&
295
- e.cellElement
296
- ) {
184
+ 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) {
297
185
  e.cellElement.innerHTML = '<span class="text-color">-</span>';
298
186
  }
299
187
  };
300
188
 
301
- /**
302
- * 테이블 헤더에 colspan, rowspan 한 HTMLElement 정보 반환
303
- * @param groupField 사용자가 작성한 그룹 정보
304
- * @return
189
+ /**
190
+ * 테이블 헤더에 colspan, rowspan 한 HTMLElement 정보 반환
191
+ * @param groupField 사용자가 작성한 그룹 정보
192
+ * @return
305
193
  */
306
194
  var makeColspan = function makeColspan(group, index, isLast) {
307
195
  var _group$html;
@@ -316,33 +204,31 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
316
204
  } else if (!isLast && index === 0) {
317
205
  td.setAttribute('style', 'border-bottom: 0');
318
206
  }
319
- td.innerHTML = '<span>'.concat(text, '</span>');
207
+ td.innerHTML = "<span>".concat(text, "</span>");
320
208
  return td;
321
209
  };
322
210
 
323
- /**
324
- * 그룹 필드 데이터 유효성 검증용 데이터 생성
325
- * @param groupField
326
- * @returns
211
+ /**
212
+ * 그룹 필드 데이터 유효성 검증용 데이터 생성
213
+ * @param groupField
214
+ * @returns
327
215
  */
328
216
  var makeCheckGroupData = function makeCheckGroupData(groupField) {
329
217
  var data = {};
330
- groupField === null || groupField === void 0
331
- ? void 0
332
- : groupField.forEach(function (group) {
333
- if (data[group.depth]) {
334
- data[group.depth] += group.colspan;
335
- } else {
336
- data[group.depth] = group.colspan;
337
- }
338
- });
218
+ groupField === null || groupField === void 0 ? void 0 : groupField.forEach(function (group) {
219
+ if (data[group.depth]) {
220
+ data[group.depth] += group.colspan;
221
+ } else {
222
+ data[group.depth] = group.colspan;
223
+ }
224
+ });
339
225
  return data;
340
226
  };
341
227
 
342
- /**
343
- * GroupField 데이터 검증
344
- * @param 사용자가 설정한 그룹 필드 정보
345
- * @returns 데이터 검증 결과
228
+ /**
229
+ * GroupField 데이터 검증
230
+ * @param 사용자가 설정한 그룹 필드 정보
231
+ * @returns 데이터 검증 결과
346
232
  */
347
233
  var isCheckGroupField = function isCheckGroupField(groupField) {
348
234
  var map = makeCheckGroupData(groupField);
@@ -355,25 +241,21 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
355
241
  return true;
356
242
  };
357
243
 
358
- /**
359
- * Grand Total 셀 정보 저장
360
- * @param e
244
+ /**
245
+ * Grand Total 셀 정보 저장
246
+ * @param e
361
247
  */
362
248
  var setTotalElementInfo = function setTotalElementInfo(e) {
363
249
  var _e$cell6, _e$cell7, _e$cellElement;
364
- if (
365
- !(groupField !== null && groupField !== void 0 && groupField.length) ||
366
- ((_e$cell6 = e.cell) === null || _e$cell6 === void 0 ? void 0 : _e$cell6.type) !== 'GT' ||
367
- ((_e$cell7 = e.cell) === null || _e$cell7 === void 0 ? void 0 : _e$cell7.text) !== 'Grand Total'
368
- ) {
250
+ 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') {
369
251
  return;
370
252
  }
371
253
  (_e$cellElement = e.cellElement) === null || _e$cellElement === void 0 ? void 0 : _e$cellElement.classList.add(grandTotalCssNm);
372
254
  };
373
255
 
374
- /**
375
- * cell의 columnIndex 최대값 저장
376
- * @param e
256
+ /**
257
+ * cell의 columnIndex 최대값 저장
258
+ * @param e
377
259
  */
378
260
  var setMaxColumIndex = function setMaxColumIndex(e) {
379
261
  if (!e.columnIndex) {
@@ -384,19 +266,17 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
384
266
  }
385
267
  };
386
268
 
387
- /**
388
- * groupField depth의 유니크한 배열 구하기
389
- * @param group
390
- * @param arr
391
- * @returns
269
+ /**
270
+ * groupField depth의 유니크한 배열 구하기
271
+ * @param group
272
+ * @param arr
273
+ * @returns
392
274
  */
393
275
  var getGroupDepth = function getGroupDepth(group, arr) {
394
276
  var groupData = group.slice();
395
- var set = new Set(
396
- groupData.map(function (group) {
397
- return group.depth;
398
- })
399
- );
277
+ var set = new Set(groupData.map(function (group) {
278
+ return group.depth;
279
+ }));
400
280
  return Array.from(set).sort(function compare(a, b) {
401
281
  if (a > b) {
402
282
  return arr === 'asc' ? -1 : 1;
@@ -408,11 +288,11 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
408
288
  });
409
289
  };
410
290
 
411
- /**
412
- * 현재 depth에 맞는 그룹 필드 정보 반환
413
- * @param group
414
- * @param depth
415
- * @returns
291
+ /**
292
+ * 현재 depth에 맞는 그룹 필드 정보 반환
293
+ * @param group
294
+ * @param depth
295
+ * @returns
416
296
  */
417
297
  var getCurrentGroup = function getCurrentGroup(group, depth) {
418
298
  return group.filter(function (gr) {
@@ -420,8 +300,8 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
420
300
  });
421
301
  };
422
302
 
423
- /**
424
- * 테이블 헤더(DOM)에 colspan 적용된 테이블 삽입
303
+ /**
304
+ * 테이블 헤더(DOM)에 colspan 적용된 테이블 삽입
425
305
  */
426
306
  var insertRowHeaderGroup = function insertRowHeaderGroup() {
427
307
  var _thead$previousSiblin;
@@ -441,10 +321,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
441
321
  }
442
322
  totalElement.innerHTML = '';
443
323
  totalElement.setAttribute('style', 'padding: 0; border: 0');
444
- var colgroup =
445
- (_thead$previousSiblin = thead.previousSibling) === null || _thead$previousSiblin === void 0
446
- ? void 0
447
- : _thead$previousSiblin.cloneNode(true);
324
+ var colgroup = (_thead$previousSiblin = thead.previousSibling) === null || _thead$previousSiblin === void 0 ? void 0 : _thead$previousSiblin.cloneNode(true);
448
325
  var groupData = groupField.slice();
449
326
  var depth = getGroupDepth(groupData, 'asc');
450
327
  var table = document.createElement('table');
@@ -461,10 +338,10 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
461
338
  totalElement.appendChild(table);
462
339
  };
463
340
 
464
- /**
465
- * Devextreme의 dateController columnInfo에 그룹 정보 삽입
466
- * @param group
467
- * @returns
341
+ /**
342
+ * Devextreme의 dateController columnInfo에 그룹 정보 삽입
343
+ * @param group
344
+ * @returns
468
345
  */
469
346
  var makeDataControllerColumnGroup = function makeDataControllerColumnGroup(group) {
470
347
  var groupData = group.slice();
@@ -475,21 +352,21 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
475
352
  return {
476
353
  colspan: group.colspan,
477
354
  text: group.groupCaption,
478
- type: 'GT',
355
+ type: 'GT'
479
356
  };
480
357
  });
481
358
  });
482
359
  };
483
360
 
484
- /**
485
- * 사용자가 입력한 컬러 조건을 { standard: string; condition: string } 형식으로 변경 반환
486
- * @param condition 사용자 입력 컬러 조건식 ex) '>= 100'
487
- * @returns
361
+ /**
362
+ * 사용자가 입력한 컬러 조건을 { standard: string; condition: string } 형식으로 변경 반환
363
+ * @param condition 사용자 입력 컬러 조건식 ex) '>= 100'
364
+ * @returns
488
365
  */
489
366
  var makeSplitCondtion = function makeSplitCondtion(condition) {
490
367
  var newCondition = {
491
368
  standard: '',
492
- condition: '',
369
+ condition: ''
493
370
  };
494
371
  _toConsumableArray(condition).forEach(function (cond) {
495
372
  if (Number.isNaN(parseFloat(cond))) {
@@ -501,10 +378,10 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
501
378
  return newCondition;
502
379
  };
503
380
 
504
- /**
505
- * 데이터에 색상 적용
506
- * @param e onCellPrepared 이벤트
507
- * @returns
381
+ /**
382
+ * 데이터에 색상 적용
383
+ * @param e onCellPrepared 이벤트
384
+ * @returns
508
385
  */
509
386
  var makeColorAtPercent = function makeColorAtPercent(e) {
510
387
  if (!dataColor || !e.cellElement) {
@@ -515,14 +392,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
515
392
  if (e.cell.value === null) {
516
393
  return;
517
394
  }
518
- if (
519
- ((_e$cell8 = e.cell) === null || _e$cell8 === void 0
520
- ? void 0
521
- : (_e$cell8$format = _e$cell8.format) === null || _e$cell8$format === void 0
522
- ? void 0
523
- : _e$cell8$format.type) === color.format &&
524
- !Number.isNaN(e.cell.value)
525
- ) {
395
+ 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)) {
526
396
  var standardData = makeSplitCondtion(color.condition.replace(/(\s*)/g, ''));
527
397
  var rate = color.format === 'percent' ? 0.01 : 1;
528
398
  var condition = false;
@@ -547,9 +417,9 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
547
417
  });
548
418
  };
549
419
 
550
- /**
551
- * 그리드 데이터 정합성 체크. 데이터 잘못되어 있으면 에러 발생
552
- * @param dataSource
420
+ /**
421
+ * 그리드 데이터 정합성 체크. 데이터 잘못되어 있으면 에러 발생
422
+ * @param dataSource
553
423
  */
554
424
  var checkDataSource = function checkDataSource(dataSource) {
555
425
  var isColumns = dataSource._fields.findIndex(function (field) {
@@ -569,31 +439,28 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
569
439
  }
570
440
  };
571
441
 
572
- /**
573
- * 그리드 펼침 정보 세션스토리지 리셋
442
+ /**
443
+ * 그리드 펼침 정보 세션스토리지 리셋
574
444
  */
575
445
  var resetSession = function resetSession() {
576
446
  sessionStorage.removeItem('dx-vera-pivotgrid-storing');
577
447
  };
578
448
 
579
- /**
580
- * 엑셀 export 명령
581
- * @param fileName 저장하고자 하는 엑셀파일명
449
+ /**
450
+ * 엑셀 export 명령
451
+ * @param fileName 저장하고자 하는 엑셀파일명
582
452
  */
583
453
  var exportToExcel = function exportToExcel(fileName) {
584
454
  setTimeout(function () {
585
455
  var _$tableRef$current;
586
- return exportToExcelAction(
587
- (_$tableRef$current = $tableRef.current) === null || _$tableRef$current === void 0 ? void 0 : _$tableRef$current.instance,
588
- fileName
589
- );
456
+ return exportToExcelAction((_$tableRef$current = $tableRef.current) === null || _$tableRef$current === void 0 ? void 0 : _$tableRef$current.instance, fileName);
590
457
  });
591
458
  };
592
459
 
593
- /**
594
- * devextreme component 정보의 dataController의 columnInfo에 사용자가 설정한 groupFIled 정보 병합
595
- * @param component devextreme component
596
- * @returns devextreme component
460
+ /**
461
+ * devextreme component 정보의 dataController의 columnInfo에 사용자가 설정한 groupFIled 정보 병합
462
+ * @param component devextreme component
463
+ * @returns devextreme component
597
464
  */
598
465
  var convertDataControllerColumnsInfo = function convertDataControllerColumnsInfo(component) {
599
466
  var arr = [];
@@ -609,9 +476,9 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
609
476
  return component;
610
477
  };
611
478
 
612
- /**
613
- * 엑셀 export
614
- * @param e
479
+ /**
480
+ * 엑셀 export
481
+ * @param e
615
482
  */
616
483
  var exportToExcelAction = function exportToExcelAction(e, fileName) {
617
484
  var newComponent = convertDataControllerColumnsInfo(e);
@@ -627,25 +494,22 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
627
494
  bottom: borderStyle,
628
495
  left: borderStyle,
629
496
  right: borderStyle,
630
- top: borderStyle,
497
+ top: borderStyle
631
498
  };
632
- },
499
+ }
633
500
  }).then(function () {
634
501
  workbook.xlsx.writeBuffer().then(function (buffer) {
635
- (0, _fileSaver.default)(
636
- new Blob([buffer], {
637
- type: 'application/octet-stream',
638
- }),
639
- fileName + '.xlsx'
640
- );
502
+ (0, _fileSaver.default)(new Blob([buffer], {
503
+ type: 'application/octet-stream'
504
+ }), fileName + '.xlsx');
641
505
  });
642
506
  });
643
507
  e.cancel = true;
644
508
  };
645
509
 
646
- /**
647
- * devextreme CellPreparedEvent 이벤트 실행
648
- * @param e
510
+ /**
511
+ * devextreme CellPreparedEvent 이벤트 실행
512
+ * @param e
649
513
  */
650
514
  var onCellPreparedChild = function onCellPreparedChild(e) {
651
515
  makeColorAtPercent(e);
@@ -657,8 +521,8 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
657
521
  return onCellPrepared ? onCellPrepared(e) : undefined;
658
522
  };
659
523
 
660
- /**
661
- * devextreme Raise Event
524
+ /**
525
+ * devextreme Raise Event
662
526
  */
663
527
  var onContentReadyChild = function onContentReadyChild(e) {
664
528
  setTimeout(function () {
@@ -685,70 +549,57 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
685
549
  var onOptionChangedChild = function onOptionChangedChild(e) {
686
550
  return onOptionChanged ? onOptionChanged(e) : undefined;
687
551
  };
688
- (0, _react.useEffect)(
689
- function () {
690
- setGridDataSource(dataSource);
691
- checkDataSource(dataSource);
692
- resetSession();
693
- },
694
- [dataSource]
695
- );
696
- return /*#__PURE__*/ _react.createElement(
697
- 'div',
698
- null,
699
- /*#__PURE__*/ _react.createElement(_loadPanel.LoadPanel, {
700
- position: {
701
- of: id,
702
- },
703
- }),
704
- /*#__PURE__*/ _react.createElement(
705
- _pivotGrid.default,
706
- {
707
- id: id,
708
- ref: $tableRef,
709
- dataSource: gridDataSource,
710
- showColumnTotals: false,
711
- showColumnGrandTotals: true,
712
- showRowGrandTotals: false,
713
- width: width,
714
- height: height,
715
- allowExpandAll: allowExpandAll,
716
- allowFiltering: allowFiltering,
717
- allowSorting: allowSorting,
718
- allowSortingBySummary: allowSortingBySummary,
719
- dataFieldArea: dataFieldArea,
720
- disabled: disabled,
721
- elementAttr: elementAttr,
722
- encodeHtml: encodeHtml,
723
- hideEmptySummaryCells: hideEmptySummaryCells,
724
- hint: hint,
725
- rowHeaderLayout: rowHeaderLayout,
726
- rtlEnabled: rtlEnabled,
727
- showBorders: showBorders,
728
- showRowTotals: showRowTotals,
729
- showTotalsPrior: showTotalsPrior,
730
- tabIndex: tabIndex,
731
- visible: visible,
732
- wordWrapEnabled: wordWrapEnabled,
733
- onCellClick: onCellClickChild,
734
- onContentReady: onContentReadyChild,
735
- onCellPrepared: onCellPreparedChild,
736
- onContextMenuPreparing: onContextMenuPreparingChild,
737
- onDisposing: onDisposingChild,
738
- onExporting: onExportingChild,
739
- onInitialized: onInitializedChild,
740
- onOptionChanged: onOptionChangedChild,
741
- },
742
- /*#__PURE__*/ _react.createElement(_dataGrid.StateStoring, {
743
- enabled: stateStoringKey === null || stateStoringKey === void 0 ? void 0 : stateStoringKey.length,
744
- type: 'sessionStorage',
745
- storageKey: stateStoringKey,
746
- }),
747
- /*#__PURE__*/ _react.createElement(_pivotGrid.FieldChooser, {
748
- enabled: false,
749
- })
750
- )
751
- );
552
+ (0, _react.useEffect)(function () {
553
+ setGridDataSource(dataSource);
554
+ checkDataSource(dataSource);
555
+ resetSession();
556
+ }, [dataSource]);
557
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_loadPanel.LoadPanel, {
558
+ position: {
559
+ of: id
560
+ }
561
+ }), /*#__PURE__*/React.createElement(_pivotGrid.default, {
562
+ id: id,
563
+ ref: $tableRef,
564
+ dataSource: gridDataSource,
565
+ showColumnTotals: false,
566
+ showColumnGrandTotals: true,
567
+ showRowGrandTotals: false,
568
+ width: width,
569
+ height: height,
570
+ allowExpandAll: allowExpandAll,
571
+ allowFiltering: allowFiltering,
572
+ allowSorting: allowSorting,
573
+ allowSortingBySummary: allowSortingBySummary,
574
+ dataFieldArea: dataFieldArea,
575
+ disabled: disabled,
576
+ elementAttr: elementAttr,
577
+ encodeHtml: encodeHtml,
578
+ hideEmptySummaryCells: hideEmptySummaryCells,
579
+ hint: hint,
580
+ rowHeaderLayout: rowHeaderLayout,
581
+ rtlEnabled: rtlEnabled,
582
+ showBorders: showBorders,
583
+ showRowTotals: showRowTotals,
584
+ showTotalsPrior: showTotalsPrior,
585
+ tabIndex: tabIndex,
586
+ visible: visible,
587
+ wordWrapEnabled: wordWrapEnabled,
588
+ onCellClick: onCellClickChild,
589
+ onContentReady: onContentReadyChild,
590
+ onCellPrepared: onCellPreparedChild,
591
+ onContextMenuPreparing: onContextMenuPreparingChild,
592
+ onDisposing: onDisposingChild,
593
+ onExporting: onExportingChild,
594
+ onInitialized: onInitializedChild,
595
+ onOptionChanged: onOptionChangedChild
596
+ }, /*#__PURE__*/React.createElement(_dataGrid.StateStoring, {
597
+ enabled: stateStoringKey === null || stateStoringKey === void 0 ? void 0 : stateStoringKey.length,
598
+ type: "sessionStorage",
599
+ storageKey: stateStoringKey
600
+ }), /*#__PURE__*/React.createElement(_pivotGrid.FieldChooser, {
601
+ enabled: false
602
+ })));
752
603
  });
753
604
  var _default = DxPlanitTreeGrid;
754
- exports.default = _default;
605
+ exports.default = _default;
package/dist/index.d.ts CHANGED
@@ -1,23 +1,38 @@
1
- export declare const DxPlanitTreeGrid;
2
- export default DxPlanitTreeGrid;
3
-
4
- export declare module DxPlanit {
5
- export interface IGroupField {
6
- groupCaption: string;
7
- groupName?: string;
8
- html?: string;
9
- depth: number;
10
- colspan: number;
11
- }
12
-
13
- export interface Props extends DevExpress.ui.dxPivotGrid.Properties {
14
- id?: string;
15
- dataSource?: any;
16
- groupField?: IGroupField[];
17
- dataColor?: IColorInfo[];
18
- convertNullToHipen?: boolean;
19
- convertZeroToHipen?: boolean;
20
- stateStoringKey?: string;
21
- customExcelButton?: boolean;
22
- }
23
- }
1
+ import DevExpress from 'devextreme';
2
+ import { Format } from 'devextreme/localization';
3
+
4
+ export declare const DxPlanitTreeGrid;
5
+ export default DxPlanitTreeGrid;
6
+
7
+ export declare module TypeDxPlanit {
8
+ export interface IGroupField {
9
+ groupCaption: string;
10
+ groupName?: string;
11
+ html?: string;
12
+ depth: number;
13
+ colspan: number;
14
+ }
15
+
16
+ export interface ColumnField {
17
+ colspan: number;
18
+ text: string;
19
+ type: string;
20
+ }
21
+
22
+ export interface IColorInfo {
23
+ format: Format;
24
+ color: string;
25
+ condition: string;
26
+ }
27
+
28
+ export interface Props extends DevExpress.ui.dxPivotGrid.Properties {
29
+ id?: string;
30
+ dataSource?: any;
31
+ groupField?: IGroupField[];
32
+ dataColor?: IColorInfo[];
33
+ convertNullToHipen?: boolean;
34
+ convertZeroToHipen?: boolean;
35
+ stateStoringKey?: string;
36
+ customExcelButton?: boolean;
37
+ }
38
+ }
package/package.json CHANGED
@@ -1,9 +1,15 @@
1
1
  {
2
2
  "name": "devextreme-planit-treegrid-react",
3
- "version": "1.1.2",
3
+ "version": "1.1.4",
4
4
  "description": "Devextreme의 DxPivotGrid를 Tree Grid처럼 보여주는 Wrapper입니다.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
+ "files": [
8
+ "dist/DxPlanitTreeGrid.js",
9
+ "dist/index.d.ts",
10
+ "dist/index.js",
11
+ "README.md"
12
+ ],
7
13
  "repository": "https://github.com/hsquare-analytics/ui-tree-grid.git",
8
14
  "author": "bcahn <antonio1926@gmail.com>",
9
15
  "license": "MIT",
@@ -36,7 +42,7 @@
36
42
  ],
37
43
  "dependencies": {
38
44
  "devextreme": "^22.1.6",
39
- "devextreme-planit-treegrid-react": "^1.1.1",
45
+ "devextreme-planit-treegrid-react": "^1.1.0",
40
46
  "devextreme-react": "^22.1.6",
41
47
  "exceljs": "^4.3.0",
42
48
  "file-saver": "^2.0.5",
package/.idea/modules.xml DELETED
@@ -1,8 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="ProjectModuleManager">
4
- <modules>
5
- <module fileurl="file://$PROJECT_DIR$/.idea/ui-tree-grid.iml" filepath="$PROJECT_DIR$/.idea/ui-tree-grid.iml" />
6
- </modules>
7
- </component>
8
- </project>
@@ -1,9 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <module type="JAVA_MODULE" version="4">
3
- <component name="NewModuleRootManager" inherit-compiler-output="true">
4
- <exclude-output />
5
- <content url="file://$MODULE_DIR$" />
6
- <orderEntry type="inheritedJdk" />
7
- <orderEntry type="sourceFolder" forTests="false" />
8
- </component>
9
- </module>
package/.idea/vcs.xml DELETED
@@ -1,6 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="VcsDirectoryMappings">
4
- <mapping directory="" vcs="Git" />
5
- </component>
6
- </project>
package/.prettierrc DELETED
@@ -1,12 +0,0 @@
1
- # Prettier configuration
2
-
3
- printWidth: 140
4
- singleQuote: true
5
- tabWidth: 2
6
- useTabs: false
7
-
8
- # js and ts rules:
9
- arrowParens: avoid
10
-
11
- # jsx and tsx rules:
12
- jsxBracketSameLine: false
@@ -1,3 +0,0 @@
1
- {
2
- "typescript.tsdk": "node_modules\\typescript\\lib"
3
- }
package/babel.config.js DELETED
@@ -1,11 +0,0 @@
1
- module.exports = function (api) {
2
- api.cache(true);
3
-
4
- const presets = ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }], '@babel/preset-typescript'];
5
- const plugins = ['macros'];
6
-
7
- return {
8
- presets,
9
- plugins,
10
- };
11
- };
package/dist/type.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
Binary file
package/public/index.html DELETED
@@ -1,43 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <meta name="theme-color" content="#000000" />
8
- <meta
9
- name="description"
10
- content="Web site created using create-react-app"
11
- />
12
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13
- <!--
14
- manifest.json provides metadata used when your web app is installed on a
15
- user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16
- -->
17
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18
- <!--
19
- Notice the use of %PUBLIC_URL% in the tags above.
20
- It will be replaced with the URL of the `public` folder during the build.
21
- Only files inside the `public` folder can be referenced from the HTML.
22
-
23
- Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24
- work correctly both with client-side routing and a non-root public URL.
25
- Learn how to configure a non-root public URL by running `npm run build`.
26
- -->
27
- <title>React App</title>
28
- </head>
29
- <body>
30
- <noscript>You need to enable JavaScript to run this app.</noscript>
31
- <div id="root"></div>
32
- <!--
33
- This HTML file is a template.
34
- If you open it directly in the browser, you will see an empty page.
35
-
36
- You can add webfonts, meta tags, or analytics to this file.
37
- The build step will place the bundled scripts into the <body> tag.
38
-
39
- To begin the development, run `npm start` or `yarn start`.
40
- To create a production bundle, use `npm run build` or `yarn build`.
41
- -->
42
- </body>
43
- </html>
Binary file
Binary file
@@ -1,25 +0,0 @@
1
- {
2
- "short_name": "React App",
3
- "name": "Create React App Sample",
4
- "icons": [
5
- {
6
- "src": "favicon.ico",
7
- "sizes": "64x64 32x32 24x24 16x16",
8
- "type": "image/x-icon"
9
- },
10
- {
11
- "src": "logo192.png",
12
- "type": "image/png",
13
- "sizes": "192x192"
14
- },
15
- {
16
- "src": "logo512.png",
17
- "type": "image/png",
18
- "sizes": "512x512"
19
- }
20
- ],
21
- "start_url": ".",
22
- "display": "standalone",
23
- "theme_color": "#000000",
24
- "background_color": "#ffffff"
25
- }
package/public/robots.txt DELETED
@@ -1,3 +0,0 @@
1
- # https://www.robotstxt.org/robotstxt.html
2
- User-agent: *
3
- Disallow:
package/webpack.config.js DELETED
@@ -1,27 +0,0 @@
1
- module.exports = {
2
- entry: './server.js',
3
- output: {
4
- filename: 'compiled.js',
5
- },
6
- resolve: {
7
- extensions: ['ts', 'tsx'],
8
- },
9
- module: {
10
- rules: [
11
- {
12
- test: /\.(ts|tsx)$/,
13
- exclude: /(node_modules)/,
14
- use: {
15
- loader: 'babel-loader',
16
- },
17
- query: {
18
- presets: ['react'],
19
- },
20
- },
21
- {
22
- test: /\.css$/i,
23
- use: ['style-loader', 'css-loader'],
24
- },
25
- ],
26
- },
27
- };