devextreme-planit-treegrid-react 1.3.0 → 1.3.2
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +34 -0
- package/dist/DxPlanitTreeGrid.js +130 -277
- package/dist/index.d.ts +1 -0
- 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
|
-
|
1
|
+
"use strict";
|
2
2
|
|
3
|
-
function _typeof(obj) {
|
4
|
-
|
5
|
-
|
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(
|
22
|
-
var _pivotGrid = _interopRequireWildcard(require(
|
23
|
-
var _excel_exporter = require(
|
24
|
-
var _exceljs = require(
|
25
|
-
var _fileSaver = _interopRequireDefault(require(
|
26
|
-
|
27
|
-
|
28
|
-
}
|
29
|
-
function _getRequireWildcardCache(nodeInterop) {
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
}
|
37
|
-
function
|
38
|
-
|
39
|
-
|
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__*/
|
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.
|
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__*/
|
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 =
|
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 =
|
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
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
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
|
-
|
434
|
-
|
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
|
-
|
672
|
-
|
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.
|
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.
|
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
|
-
|
774
|
-
|
775
|
-
|
776
|
-
|
777
|
-
|
778
|
-
|
779
|
-
|
780
|
-
|
781
|
-
);
|
782
|
-
return /*#__PURE__*/ _react.createElement(
|
783
|
-
|
784
|
-
|
785
|
-
|
786
|
-
|
787
|
-
|
788
|
-
|
789
|
-
|
790
|
-
|
791
|
-
|
792
|
-
|
793
|
-
|
794
|
-
|
795
|
-
|
796
|
-
|
797
|
-
|
798
|
-
|
799
|
-
|
800
|
-
|
801
|
-
|
802
|
-
|
803
|
-
|
804
|
-
|
805
|
-
|
806
|
-
|
807
|
-
|
808
|
-
|
809
|
-
|
810
|
-
|
811
|
-
|
812
|
-
|
813
|
-
|
814
|
-
|
815
|
-
|
816
|
-
|
817
|
-
|
818
|
-
|
819
|
-
|
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
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "devextreme-planit-treegrid-react",
|
3
|
-
"version": "1.3.
|
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": "
|
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.
|
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",
|