devextreme-planit-treegrid-react 1.3.0 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +34 -0
  2. package/dist/DxPlanitTreeGrid.js +130 -277
  3. package/dist/index.d.ts +1 -0
  4. package/package.json +4 -3
package/README.md CHANGED
@@ -3,6 +3,10 @@
3
3
  DevExtreme Planit Tree Grid는 Devextreme의 PivotGrid에 Colspan과 컬러 지정 기능 등의 몇 가지 추가 기능을 설정한 React Wrapper입니다.
4
4
  코드는 React와 typescript로 작성되었으며, DevExtreme 22.1 버전에서 테스트 되었습니다.
5
5
 
6
+ ## Demo
7
+
8
+ [DEMO](https://bcahn.github.io/dxTreeGrid/)
9
+
6
10
  ## Dependecies
7
11
 
8
12
  엑셀 다운로드 기능을 위해 아래의 두 의존성을 반드시 설치해야 합니다.
@@ -46,6 +50,7 @@ import DxPlanitTreeGrid from 'devextreme-planit-treegrid-react'
46
50
  allowSortingBySummary={true}
47
51
  allowFiltering={true}
48
52
  allowSorting={true}
53
+ language={'ko'} // 'ko' | 'en'
49
54
  ...
50
55
  >
51
56
  <HeaderFilter allowSearch={true} showRelevantValues={true} />
@@ -63,6 +68,13 @@ DevExtreme PivotGrid에 몇몇 기능이 추가되었습니다. 추가된 기능
63
68
 
64
69
  ### 1. dataColor
65
70
 
71
+ > type: {
72
+ > format: [Format](https://js.devexpress.com/Documentation/ApiReference/Common/Object_Structures/Format/);
73
+ > color: string;
74
+ > condition: string;
75
+ > } <br />
76
+ > default value: null
77
+
66
78
  특정 조건 데이터의 컬러를 직접 지정하실 수 있습니다.
67
79
 
68
80
  1. format: [DevExtreme PivotGrid Data Format](https://js.devexpress.com/Documentation/ApiReference/Common/Object_Structures/Format/) 타입을 사용하실 수 있습니다.
@@ -73,14 +85,36 @@ DevExtreme PivotGrid에 몇몇 기능이 추가되었습니다. 추가된 기능
73
85
 
74
86
  value가 null 인 데이터를 하이픈('-')으로 보여줍니다.
75
87
 
88
+ > type: boolean <br />
89
+ > default value: true
90
+
76
91
  ### 3. convertZeroToHipen
77
92
 
78
93
  value가 0 | '0' | '0%' 인 데이터를 하이픈('-')으로 보여줍니다.
79
94
 
95
+ > type: boolean<br />
96
+ > default value: true
97
+
80
98
  ### 4. groupField
81
99
 
82
100
  groupField는 그리드 상단에 colspan 된 새로운 column을 생성합니다. 자세한 사용법은 github의 demo 폴더를 확인하십시오.
83
101
 
102
+ > type: {
103
+ > groupCaption: string;
104
+ > groupName?: string;
105
+ > html?: string;
106
+ > depth: number;
107
+ > colspan: number;
108
+ > }[]<br />
109
+ > default value: null
110
+
111
+ ### 5. language
112
+
113
+ > type: 'ko' | 'en' <br />
114
+ > default value: 'en'
115
+
116
+ 한국어 설정을 할 수 있습니다.
117
+
84
118
  ```
85
119
  import { TypeDxPlanit } from 'devextreme-planit-treegrid-react';
86
120
 
package/dist/DxPlanitTreeGrid.js CHANGED
@@ -1,135 +1,29 @@
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
- function _interopRequireDefault(obj) {
27
- return obj && obj.__esModule ? obj : { default: obj };
28
- }
29
- function _getRequireWildcardCache(nodeInterop) {
30
- if (typeof WeakMap !== 'function') return null;
31
- var cacheBabelInterop = new WeakMap();
32
- var cacheNodeInterop = new WeakMap();
33
- return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {
34
- return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
35
- })(nodeInterop);
36
- }
37
- function _interopRequireWildcard(obj, nodeInterop) {
38
- if (!nodeInterop && obj && obj.__esModule) {
39
- return obj;
40
- }
41
- if (obj === null || (_typeof(obj) !== 'object' && typeof obj !== 'function')) {
42
- return { default: obj };
43
- }
44
- var cache = _getRequireWildcardCache(nodeInterop);
45
- if (cache && cache.has(obj)) {
46
- return cache.get(obj);
47
- }
48
- var newObj = {};
49
- var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
50
- for (var key in obj) {
51
- if (key !== 'default' && Object.prototype.hasOwnProperty.call(obj, key)) {
52
- var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
53
- if (desc && (desc.get || desc.set)) {
54
- Object.defineProperty(newObj, key, desc);
55
- } else {
56
- newObj[key] = obj[key];
57
- }
58
- }
59
- }
60
- newObj.default = obj;
61
- if (cache) {
62
- cache.set(obj, newObj);
63
- }
64
- return newObj;
65
- }
66
- function _toConsumableArray(arr) {
67
- return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
68
- }
69
- function _nonIterableSpread() {
70
- throw new TypeError(
71
- 'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
72
- );
73
- }
74
- function _iterableToArray(iter) {
75
- if ((typeof Symbol !== 'undefined' && iter[Symbol.iterator] != null) || iter['@@iterator'] != null) return Array.from(iter);
76
- }
77
- function _arrayWithoutHoles(arr) {
78
- if (Array.isArray(arr)) return _arrayLikeToArray(arr);
79
- }
80
- function _slicedToArray(arr, i) {
81
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
82
- }
83
- function _nonIterableRest() {
84
- throw new TypeError(
85
- 'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
86
- );
87
- }
88
- function _unsupportedIterableToArray(o, minLen) {
89
- if (!o) return;
90
- if (typeof o === 'string') return _arrayLikeToArray(o, minLen);
91
- var n = Object.prototype.toString.call(o).slice(8, -1);
92
- if (n === 'Object' && o.constructor) n = o.constructor.name;
93
- if (n === 'Map' || n === 'Set') return Array.from(o);
94
- if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
95
- }
96
- function _arrayLikeToArray(arr, len) {
97
- if (len == null || len > arr.length) len = arr.length;
98
- for (var i = 0, arr2 = new Array(len); i < len; i++) {
99
- arr2[i] = arr[i];
100
- }
101
- return arr2;
102
- }
103
- function _iterableToArrayLimit(arr, i) {
104
- var _i = null == arr ? null : ('undefined' != typeof Symbol && arr[Symbol.iterator]) || arr['@@iterator'];
105
- if (null != _i) {
106
- var _s,
107
- _e,
108
- _x,
109
- _r,
110
- _arr = [],
111
- _n = !0,
112
- _d = !1;
113
- try {
114
- if (((_x = (_i = _i.call(arr)).next), 0 === i)) {
115
- if (Object(_i) !== _i) return;
116
- _n = !1;
117
- } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {}
118
- } catch (err) {
119
- (_d = !0), (_e = err);
120
- } finally {
121
- try {
122
- if (!_n && null != _i.return && ((_r = _i.return()), Object(_r) !== _r)) return;
123
- } finally {
124
- if (_d) throw _e;
125
- }
126
- }
127
- return _arr;
128
- }
129
- }
130
- function _arrayWithHoles(arr) {
131
- if (Array.isArray(arr)) return arr;
132
- }
8
+ var _react = 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; }
133
27
  /**
134
28
  * devextreme pivotgrid Configrations 중 사용 불가 항목 : id, width, height, showColumnGrandTotals, showColumnTotals, showRowGrandTotals, FieldChooser. fieldPanel,
135
29
  * devextreme pivotgrid Configrations 중 사용 방법 변경 항목 : stateStoring, Export
@@ -142,7 +36,7 @@ function _arrayWithHoles(arr) {
142
36
  */
143
37
 
144
38
  var grandTotalCssNm = 'data-grand-total';
145
- var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref) {
39
+ var DxPlanitTreeGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
146
40
  var children = props.children,
147
41
  _props$id = props.id,
148
42
  id = _props$id === void 0 ? 'dx-planit-vera-pivotgrid-id' : _props$id,
@@ -186,6 +80,8 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
186
80
  visible = _props$visible === void 0 ? true : _props$visible,
187
81
  _props$wordWrapEnable = props.wordWrapEnabled,
188
82
  wordWrapEnabled = _props$wordWrapEnable === void 0 ? false : _props$wordWrapEnable,
83
+ _props$language = props.language,
84
+ language = _props$language === void 0 ? 'en' : _props$language,
189
85
  onCellClick = props.onCellClick,
190
86
  onCellPrepared = props.onCellPrepared,
191
87
  onContentReady = props.onContentReady,
@@ -214,8 +110,25 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
214
110
  var excelBorder = {
215
111
  style: 'thin',
216
112
  color: {
217
- argb: 'FF7E7E7E',
218
- },
113
+ argb: 'FF7E7E7E'
114
+ }
115
+ };
116
+ var transferLanguage = function transferLanguage(lang) {
117
+ (0, _localization.locale)(lang);
118
+ if (lang === 'ko' || lang === 'ko-KR') {
119
+ (0, _localization.loadMessages)({
120
+ ko: {
121
+ 'dxPivotGrid-sortColumnBySummary': '"{0}" 을(를) 선택한 열 기준으로 정렬',
122
+ 'dxPivotGrid-removeAllSorting': '정렬기능 모두 제거',
123
+ 'dxPivotGrid-expandAll': '모두 펼치기',
124
+ 'dxPivotGrid-collapseAll': '모두 접기',
125
+ 'dxDataGrid-headerFilterOK': '확인',
126
+ 'dxDataGrid-headerFilterCancel': '취소',
127
+ 'dxList-selectAll': '모두 선택',
128
+ 'Search': '검색'
129
+ }
130
+ });
131
+ }
219
132
  };
220
133
 
221
134
  /**
@@ -234,21 +147,17 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
234
147
  * @returns
235
148
  */
236
149
  var modifyChildren = function modifyChildren(child, index) {
237
- if (child.type.name === 'FieldPanel') {
150
+ if (child.type.OptionName.toLowerCase() === 'fieldpanel') {
238
151
  var _child$props$visible, _child$props$allowFie, _child$props$showRowF;
239
152
  warnDisableProps(child);
240
- return /*#__PURE__*/ _react.createElement(_pivotGrid.FieldPanel, {
153
+ return /*#__PURE__*/_react.createElement(_pivotGrid.FieldPanel, {
241
154
  key: 'FieldPanel' + index,
242
155
  visible: (_child$props$visible = child.props.visible) !== null && _child$props$visible !== void 0 ? _child$props$visible : false,
243
- allowFieldDragging:
244
- (_child$props$allowFie = child.props.allowFieldDragging) !== null && _child$props$allowFie !== void 0
245
- ? _child$props$allowFie
246
- : true,
156
+ allowFieldDragging: (_child$props$allowFie = child.props.allowFieldDragging) !== null && _child$props$allowFie !== void 0 ? _child$props$allowFie : true,
247
157
  showColumnFields: false,
248
158
  showFilterFields: false,
249
159
  showDataFields: false,
250
- showRowFields:
251
- (_child$props$showRowF = child.props.showRowFields) !== null && _child$props$showRowF !== void 0 ? _child$props$showRowF : true,
160
+ showRowFields: (_child$props$showRowF = child.props.showRowFields) !== null && _child$props$showRowF !== void 0 ? _child$props$showRowF : true
252
161
  });
253
162
  }
254
163
  return child;
@@ -262,26 +171,16 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
262
171
  var _wrapper$clientWidth;
263
172
  var wrapper = document.querySelector('.diag-table-wrapper');
264
173
  var gap = 10;
265
- setWidth(
266
- (_wrapper$clientWidth = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null &&
267
- _wrapper$clientWidth !== void 0
268
- ? _wrapper$clientWidth
269
- : 0
270
- );
174
+ setWidth((_wrapper$clientWidth = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null && _wrapper$clientWidth !== void 0 ? _wrapper$clientWidth : 0);
271
175
  setHeight(wrapper ? wrapper.clientHeight - gap : 0);
272
176
  window.addEventListener('resize', function () {
273
177
  var _wrapper$clientWidth2;
274
- setWidth(
275
- (_wrapper$clientWidth2 = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null &&
276
- _wrapper$clientWidth2 !== void 0
277
- ? _wrapper$clientWidth2
278
- : 0
279
- );
178
+ setWidth((_wrapper$clientWidth2 = wrapper === null || wrapper === void 0 ? void 0 : wrapper.clientWidth) !== null && _wrapper$clientWidth2 !== void 0 ? _wrapper$clientWidth2 : 0);
280
179
  setHeight(wrapper ? wrapper.clientHeight - gap : 0);
281
180
  });
282
181
  return {
283
182
  width: width,
284
- height: height,
183
+ height: height
285
184
  };
286
185
  };
287
186
 
@@ -291,13 +190,13 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
291
190
  */
292
191
  var changeTotalText = function changeTotalText(e) {
293
192
  var _e$cell;
294
- if (!e.cellElement) {
193
+ if (!e.cellElement || !(language === 'ko' || language === 'ko-KR')) {
295
194
  return;
296
195
  }
297
196
  if (((_e$cell = e.cell) === null || _e$cell === void 0 ? void 0 : _e$cell.type) === 'T') {
298
197
  var _e$cell$text;
299
198
  var text = (_e$cell$text = e.cell.text) === null || _e$cell$text === void 0 ? void 0 : _e$cell$text.replace('Total', '합계');
300
- e.cellElement.innerHTML = '<span>'.concat(text, '</span>');
199
+ e.cellElement.innerHTML = "<span>".concat(text, "</span>");
301
200
  }
302
201
  };
303
202
 
@@ -324,13 +223,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
324
223
  if (!convertZeroToHipen) {
325
224
  return;
326
225
  }
327
- if (
328
- e.area === 'data' &&
329
- (((_e$cell3 = e.cell) === null || _e$cell3 === void 0 ? void 0 : _e$cell3.text) === '0' ||
330
- ((_e$cell4 = e.cell) === null || _e$cell4 === void 0 ? void 0 : _e$cell4.text) === '0.0%' ||
331
- ((_e$cell5 = e.cell) === null || _e$cell5 === void 0 ? void 0 : _e$cell5.text) === '') &&
332
- e.cellElement
333
- ) {
226
+ 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) {
334
227
  e.cellElement.innerHTML = '<span class="text-color">-</span>';
335
228
  }
336
229
  };
@@ -353,7 +246,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
353
246
  } else if (!isLast && index === 0) {
354
247
  td.setAttribute('style', 'border-bottom: 0');
355
248
  }
356
- td.innerHTML = '<span>'.concat(text, '</span>');
249
+ td.innerHTML = "<span>".concat(text, "</span>");
357
250
  return td;
358
251
  };
359
252
 
@@ -364,15 +257,13 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
364
257
  */
365
258
  var makeCheckGroupData = function makeCheckGroupData(groupField) {
366
259
  var data = {};
367
- groupField === null || groupField === void 0
368
- ? void 0
369
- : groupField.forEach(function (group) {
370
- if (data[group.depth]) {
371
- data[group.depth] += group.colspan;
372
- } else {
373
- data[group.depth] = group.colspan;
374
- }
375
- });
260
+ groupField === null || groupField === void 0 ? void 0 : groupField.forEach(function (group) {
261
+ if (data[group.depth]) {
262
+ data[group.depth] += group.colspan;
263
+ } else {
264
+ data[group.depth] = group.colspan;
265
+ }
266
+ });
376
267
  return data;
377
268
  };
378
269
 
@@ -398,11 +289,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
398
289
  */
399
290
  var setTotalElementInfo = function setTotalElementInfo(e) {
400
291
  var _e$cell6, _e$cell7, _e$cellElement;
401
- if (
402
- !(groupField !== null && groupField !== void 0 && groupField.length) ||
403
- ((_e$cell6 = e.cell) === null || _e$cell6 === void 0 ? void 0 : _e$cell6.type) !== 'GT' ||
404
- ((_e$cell7 = e.cell) === null || _e$cell7 === void 0 ? void 0 : _e$cell7.text) !== 'Grand Total'
405
- ) {
292
+ 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') {
406
293
  return;
407
294
  }
408
295
  (_e$cellElement = e.cellElement) === null || _e$cellElement === void 0 ? void 0 : _e$cellElement.classList.add(grandTotalCssNm);
@@ -429,11 +316,9 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
429
316
  */
430
317
  var getGroupDepth = function getGroupDepth(group, arr) {
431
318
  var groupData = group.slice();
432
- var set = new Set(
433
- groupData.map(function (group) {
434
- return group.depth;
435
- })
436
- );
319
+ var set = new Set(groupData.map(function (group) {
320
+ return group.depth;
321
+ }));
437
322
  return Array.from(set).sort(function compare(a, b) {
438
323
  if (a > b) {
439
324
  return arr === 'asc' ? -1 : 1;
@@ -478,10 +363,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
478
363
  }
479
364
  totalElement.innerHTML = '';
480
365
  totalElement.setAttribute('style', 'padding: 0; border: 0');
481
- var colgroup =
482
- (_thead$previousSiblin = thead.previousSibling) === null || _thead$previousSiblin === void 0
483
- ? void 0
484
- : _thead$previousSiblin.cloneNode(true);
366
+ var colgroup = (_thead$previousSiblin = thead.previousSibling) === null || _thead$previousSiblin === void 0 ? void 0 : _thead$previousSiblin.cloneNode(true);
485
367
  var groupData = groupField.slice();
486
368
  var depth = getGroupDepth(groupData, 'asc');
487
369
  var table = document.createElement('table');
@@ -512,7 +394,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
512
394
  return {
513
395
  colspan: group.colspan,
514
396
  text: group.groupCaption,
515
- type: 'GT',
397
+ type: 'GT'
516
398
  };
517
399
  });
518
400
  });
@@ -526,7 +408,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
526
408
  var makeSplitCondtion = function makeSplitCondtion(condition) {
527
409
  var newCondition = {
528
410
  standard: '',
529
- condition: '',
411
+ condition: ''
530
412
  };
531
413
  _toConsumableArray(condition).forEach(function (cond) {
532
414
  if (Number.isNaN(parseFloat(cond))) {
@@ -552,14 +434,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
552
434
  if (e.cell.value === null) {
553
435
  return;
554
436
  }
555
- if (
556
- ((_e$cell8 = e.cell) === null || _e$cell8 === void 0
557
- ? void 0
558
- : (_e$cell8$format = _e$cell8.format) === null || _e$cell8$format === void 0
559
- ? void 0
560
- : _e$cell8$format.type) === color.format &&
561
- !Number.isNaN(e.cell.value)
562
- ) {
437
+ 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)) {
563
438
  var standardData = makeSplitCondtion(color.condition.replace(/(\s*)/g, ''));
564
439
  var rate = color.format === 'percent' ? 0.01 : 1;
565
440
  var condition = false;
@@ -590,9 +465,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
590
465
  */
591
466
  var checkDataSource = function checkDataSource(dataSource) {
592
467
  if (!dataSource._fields) {
593
- throw Error(
594
- 'PivotGridDataSource 의 field 정보가 없습니다. 올바른 field 정보를 입력하세요. https://js.devexpress.com/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/'
595
- );
468
+ throw Error('PivotGridDataSource 의 field 정보가 없습니다. 올바른 field 정보를 입력하세요. https://js.devexpress.com/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/');
596
469
  }
597
470
  var isColumns = dataSource._fields.findIndex(function (field) {
598
471
  return field.area === 'column';
@@ -618,10 +491,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
618
491
  var exportToExcel = function exportToExcel(fileName) {
619
492
  setTimeout(function () {
620
493
  var _$tableRef$current;
621
- return exportToExcelAction(
622
- (_$tableRef$current = $tableRef.current) === null || _$tableRef$current === void 0 ? void 0 : _$tableRef$current.instance,
623
- fileName
624
- );
494
+ return exportToExcelAction((_$tableRef$current = $tableRef.current) === null || _$tableRef$current === void 0 ? void 0 : _$tableRef$current.instance, fileName);
625
495
  });
626
496
  };
627
497
 
@@ -662,17 +532,14 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
662
532
  bottom: borderStyle,
663
533
  left: borderStyle,
664
534
  right: borderStyle,
665
- top: borderStyle,
535
+ top: borderStyle
666
536
  };
667
- },
537
+ }
668
538
  }).then(function () {
669
539
  workbook.xlsx.writeBuffer().then(function (buffer) {
670
- (0, _fileSaver.default)(
671
- new Blob([buffer], {
672
- type: 'application/octet-stream',
673
- }),
674
- fileName + '.xlsx'
675
- );
540
+ (0, _fileSaver.default)(new Blob([buffer], {
541
+ type: 'application/octet-stream'
542
+ }), fileName + '.xlsx');
676
543
  });
677
544
  });
678
545
  e.cancel = true;
@@ -701,13 +568,13 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
701
568
  var getStateStorageKey = function getStateStorageKey(child) {
702
569
  if (Array.isArray(child)) {
703
570
  var stateStoring = child.filter(function (node) {
704
- return node.type.name === 'StateStoring';
571
+ return node.type.OptionName.toLowerCase() === 'statestoring';
705
572
  });
706
573
  if (stateStoring !== null && stateStoring !== void 0 && stateStoring.length) {
707
574
  return stateStoring[0].props.storageKey;
708
575
  }
709
576
  return null;
710
- } else if (child.type.name === 'StateStoring') {
577
+ } else if (child.type.OptionName.toLowerCase() === 'statestoring') {
711
578
  return child.props.storageKey;
712
579
  }
713
580
  return null;
@@ -766,71 +633,57 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
766
633
  };
767
634
  (0, _react.useImperativeHandle)(ref, function () {
768
635
  return {
769
- exportToExcel: exportToExcel,
636
+ exportToExcel: exportToExcel
770
637
  };
771
638
  });
772
- (0, _react.useEffect)(
773
- function () {
774
- if (Object.keys(dataSource).length) {
775
- resetSession();
776
- setGridDataSource(dataSource);
777
- checkDataSource(dataSource);
778
- }
779
- },
780
- [dataSource]
781
- );
782
- return /*#__PURE__*/ _react.createElement(
783
- _react.Fragment,
784
- null,
785
- Object.keys(gridDataSource).length &&
786
- /*#__PURE__*/ _react.createElement(
787
- 'div',
788
- null,
789
- /*#__PURE__*/ _react.createElement(
790
- _pivotGrid.default,
791
- {
792
- id: id,
793
- ref: $tableRef,
794
- dataSource: gridDataSource,
795
- showColumnTotals: false,
796
- showColumnGrandTotals: true,
797
- showRowGrandTotals: false,
798
- width: width,
799
- height: height,
800
- allowExpandAll: allowExpandAll,
801
- allowFiltering: allowFiltering,
802
- allowSorting: allowSorting,
803
- allowSortingBySummary: allowSortingBySummary,
804
- dataFieldArea: dataFieldArea,
805
- disabled: disabled,
806
- elementAttr: elementAttr,
807
- encodeHtml: encodeHtml,
808
- hideEmptySummaryCells: hideEmptySummaryCells,
809
- hint: hint,
810
- rowHeaderLayout: rowHeaderLayout,
811
- rtlEnabled: rtlEnabled,
812
- showBorders: showBorders,
813
- showRowTotals: showRowTotals,
814
- showTotalsPrior: showTotalsPrior,
815
- tabIndex: tabIndex,
816
- visible: visible,
817
- wordWrapEnabled: wordWrapEnabled,
818
- onCellClick: onCellClickChild,
819
- onContentReady: onContentReadyChild,
820
- onCellPrepared: onCellPreparedChild,
821
- onContextMenuPreparing: onContextMenuPreparingChild,
822
- onDisposing: onDisposingChild,
823
- onExporting: onExportingChild,
824
- onInitialized: onInitializedChild,
825
- onOptionChanged: onOptionChangedChild,
826
- },
827
- convertChildren(children),
828
- /*#__PURE__*/ _react.createElement(_pivotGrid.FieldChooser, {
829
- enabled: false,
830
- })
831
- )
832
- )
833
- );
639
+ (0, _react.useEffect)(function () {
640
+ if (Object.keys(dataSource).length) {
641
+ resetSession();
642
+ setGridDataSource(dataSource);
643
+ checkDataSource(dataSource);
644
+ }
645
+ }, [dataSource]);
646
+ (0, _react.useEffect)(function () {
647
+ transferLanguage(language);
648
+ }, [language]);
649
+ return /*#__PURE__*/_react.createElement(_react.Fragment, null, Object.keys(gridDataSource).length && /*#__PURE__*/_react.createElement("div", null, /*#__PURE__*/_react.createElement(_pivotGrid.default, {
650
+ id: id,
651
+ ref: $tableRef,
652
+ dataSource: gridDataSource,
653
+ showColumnTotals: false,
654
+ showColumnGrandTotals: true,
655
+ showRowGrandTotals: false,
656
+ width: width,
657
+ height: height,
658
+ allowExpandAll: allowExpandAll,
659
+ allowFiltering: allowFiltering,
660
+ allowSorting: allowSorting,
661
+ allowSortingBySummary: allowSortingBySummary,
662
+ dataFieldArea: dataFieldArea,
663
+ disabled: disabled,
664
+ elementAttr: elementAttr,
665
+ encodeHtml: encodeHtml,
666
+ hideEmptySummaryCells: hideEmptySummaryCells,
667
+ hint: hint,
668
+ rowHeaderLayout: rowHeaderLayout,
669
+ rtlEnabled: rtlEnabled,
670
+ showBorders: showBorders,
671
+ showRowTotals: showRowTotals,
672
+ showTotalsPrior: showTotalsPrior,
673
+ tabIndex: tabIndex,
674
+ visible: visible,
675
+ wordWrapEnabled: wordWrapEnabled,
676
+ onCellClick: onCellClickChild,
677
+ onContentReady: onContentReadyChild,
678
+ onCellPrepared: onCellPreparedChild,
679
+ onContextMenuPreparing: onContextMenuPreparingChild,
680
+ onDisposing: onDisposingChild,
681
+ onExporting: onExportingChild,
682
+ onInitialized: onInitializedChild,
683
+ onOptionChanged: onOptionChangedChild
684
+ }, convertChildren(children), /*#__PURE__*/_react.createElement(_pivotGrid.FieldChooser, {
685
+ enabled: false
686
+ }))));
834
687
  });
835
688
  var _default = DxPlanitTreeGrid;
836
- exports.default = _default;
689
+ exports.default = _default;
package/dist/index.d.ts CHANGED
@@ -37,5 +37,6 @@ export declare module TypeDxPlanit {
37
37
  customExcelButton?: boolean;
38
38
  HeaderFilter?: HeaderFilter;
39
39
  children?: React.ReactNode;
40
+ language?: string;
40
41
  }
41
42
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "devextreme-planit-treegrid-react",
3
- "version": "1.3.0",
3
+ "version": "1.3.2",
4
4
  "description": "Devextreme의 DxPivotGrid를 Tree Grid처럼 보여주는 Wrapper입니다.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -18,12 +18,13 @@
18
18
  },
19
19
  "scripts": {
20
20
  "start": "react-scripts start",
21
- "build": "tsc",
21
+ "build": "react-scripts build",
22
22
  "test": "react-scripts test",
23
23
  "eject": "react-scripts eject",
24
24
  "clean": "rimraf dist",
25
25
  "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files --extensions .ts,.tsx"
26
26
  },
27
+ "homepage": "/dxTreeGrid",
27
28
  "babel": {
28
29
  "presets": [
29
30
  "@babel/preset-react"
@@ -42,7 +43,7 @@
42
43
  ],
43
44
  "dependencies": {
44
45
  "devextreme": "^22.1.6",
45
- "devextreme-planit-treegrid-react": "^1.2.9",
46
+ "devextreme-planit-treegrid-react": "^1.3.1",
46
47
  "devextreme-react": "^22.1.6",
47
48
  "exceljs": "^4.3.0",
48
49
  "file-saver": "^2.0.5",