devextreme-planit-treegrid-react 1.1.9 → 1.2.9
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +26 -27
- package/dist/DxPlanitTreeGrid.js +91 -31
- package/dist/index.d.ts +4 -1
- package/package.json +6 -6
package/README.md
CHANGED
@@ -30,21 +30,29 @@ npm install devextreme-planit-treegrid-react
|
|
30
30
|
```
|
31
31
|
import DxPlanitTreeGrid from 'devextreme-planit-treegrid-react'
|
32
32
|
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
{
|
40
|
-
{
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
33
|
+
<>
|
34
|
+
<LoadPanel position={{ of: 'dx-planit-vera-pivotgrid-id' }} />
|
35
|
+
<DxPlanitTreeGrid
|
36
|
+
id="dx-planit-vera-pivotgrid-id"
|
37
|
+
ref={$childRef}
|
38
|
+
dataSource={dataSource}
|
39
|
+
groupField={TreeDataGroup}
|
40
|
+
dataColor={[
|
41
|
+
{ format: 'percent', color: 'rgb(26, 169, 228)', condition: '>= 110' },
|
42
|
+
{ format: 'percent', color: '#fd7e14', condition: '< 100' },
|
43
|
+
]}
|
44
|
+
convertNullToHipen={true}
|
45
|
+
convertZeroToHipen={true}
|
46
|
+
allowSortingBySummary={true}
|
47
|
+
allowFiltering={true}
|
48
|
+
allowSorting={true}
|
49
|
+
...
|
50
|
+
>
|
51
|
+
<HeaderFilter allowSearch={true} showRelevantValues={true} />
|
52
|
+
<FieldPanel visible={true} />
|
53
|
+
<StateStoring enabled={true} type="sessionStorage" storageKey={'dx-vera-pivotgrid-storing'} />
|
54
|
+
</DxPlanitTreeGrid>
|
55
|
+
</>
|
48
56
|
```
|
49
57
|
|
50
58
|
```
|
@@ -95,19 +103,10 @@ export const TreeDataGroup: TypeDxPlanit.IGroupField[] = [
|
|
95
103
|
|
96
104
|
```
|
97
105
|
|
98
|
-
\*\*Note: [DevExtreme PivotGrid](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPivotGrid/) 중 아래의 기능은 사용 불능 처리되었습니다.
|
106
|
+
\*\*Note: [DevExtreme PivotGrid](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPivotGrid/) 의 property중 아래의 기능은 사용 불능 처리되었습니다.
|
99
107
|
|
100
108
|
> width, height, showColumnGrandTotals, showColumnTotals, showRowGrandTotals, FieldChooser
|
101
109
|
|
102
|
-
\*\*Note: [DevExtreme PivotGrid](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPivotGrid/) 중 아래의 기능은
|
110
|
+
\*\*Note: [DevExtreme PivotGrid](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPivotGrid/) 추가 기능 중 아래의 기능은 일부 제한되었습니다.
|
103
111
|
|
104
|
-
> <
|
105
|
-
>
|
106
|
-
> stateStoringKey가 없을 경우, <StateStoring enabled='false' /> 와 동일하게 작동합니다.
|
107
|
-
|
108
|
-
```
|
109
|
-
<DxPlanitTreeGrid
|
110
|
-
stateStoringKey={'dx-vera-pivotgrid-storing'}
|
111
|
-
...
|
112
|
-
/>
|
113
|
-
```
|
112
|
+
> <FieldPanel enabled='true' /> 의 속성 중 showColumnFields, showDataFields, showFilterFields 은 사용 불능 처리되었습니다.
|
package/dist/DxPlanitTreeGrid.js
CHANGED
@@ -19,9 +19,7 @@ Object.defineProperty(exports, '__esModule', {
|
|
19
19
|
});
|
20
20
|
exports.default = void 0;
|
21
21
|
var _react = require('react');
|
22
|
-
var _loadPanel = require('devextreme-react/load-panel');
|
23
22
|
var _pivotGrid = _interopRequireWildcard(require('devextreme-react/pivot-grid'));
|
24
|
-
var _dataGrid = require('devextreme-react/data-grid');
|
25
23
|
var _excel_exporter = require('devextreme/excel_exporter');
|
26
24
|
var _exceljs = require('exceljs');
|
27
25
|
var _fileSaver = _interopRequireDefault(require('file-saver'));
|
@@ -133,7 +131,7 @@ function _arrayWithHoles(arr) {
|
|
133
131
|
if (Array.isArray(arr)) return arr;
|
134
132
|
}
|
135
133
|
/**
|
136
|
-
* devextreme pivotgrid Configrations 중 사용 불가 항목 : id, width, height, showColumnGrandTotals, showColumnTotals, showRowGrandTotals, FieldChooser
|
134
|
+
* devextreme pivotgrid Configrations 중 사용 불가 항목 : id, width, height, showColumnGrandTotals, showColumnTotals, showRowGrandTotals, FieldChooser. fieldPanel,
|
137
135
|
* devextreme pivotgrid Configrations 중 사용 방법 변경 항목 : stateStoring, Export
|
138
136
|
* onExported, onFileSaving 이벤트 사용하지 않음.
|
139
137
|
*/
|
@@ -145,7 +143,8 @@ function _arrayWithHoles(arr) {
|
|
145
143
|
|
146
144
|
var grandTotalCssNm = 'data-grand-total';
|
147
145
|
var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref) {
|
148
|
-
var
|
146
|
+
var children = props.children,
|
147
|
+
_props$id = props.id,
|
149
148
|
id = _props$id === void 0 ? 'dx-planit-vera-pivotgrid-id' : _props$id,
|
150
149
|
groupField = props.groupField,
|
151
150
|
dataColor = props.dataColor,
|
@@ -153,8 +152,6 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
|
|
153
152
|
convertNullToHipen = _props$convertNullToH === void 0 ? true : _props$convertNullToH,
|
154
153
|
_props$convertZeroToH = props.convertZeroToHipen,
|
155
154
|
convertZeroToHipen = _props$convertZeroToH === void 0 ? true : _props$convertZeroToH,
|
156
|
-
_props$stateStoringKe = props.stateStoringKey,
|
157
|
-
stateStoringKey = _props$stateStoringKe === void 0 ? '' : _props$stateStoringKe,
|
158
155
|
_props$allowExpandAll = props.allowExpandAll,
|
159
156
|
allowExpandAll = _props$allowExpandAll === void 0 ? false : _props$allowExpandAll,
|
160
157
|
_props$allowFiltering = props.allowFiltering,
|
@@ -189,8 +186,6 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
|
|
189
186
|
visible = _props$visible === void 0 ? true : _props$visible,
|
190
187
|
_props$wordWrapEnable = props.wordWrapEnabled,
|
191
188
|
wordWrapEnabled = _props$wordWrapEnable === void 0 ? false : _props$wordWrapEnable,
|
192
|
-
_props$customExcelBut = props.customExcelButton,
|
193
|
-
customExcelButton = _props$customExcelBut === void 0 ? false : _props$customExcelBut,
|
194
189
|
onCellClick = props.onCellClick,
|
195
190
|
onCellPrepared = props.onCellPrepared,
|
196
191
|
onContentReady = props.onContentReady,
|
@@ -222,11 +217,42 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
|
|
222
217
|
argb: 'FF7E7E7E',
|
223
218
|
},
|
224
219
|
};
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
220
|
+
|
221
|
+
/**
|
222
|
+
* props.children 경고문 출력
|
223
|
+
* @param child props.children
|
224
|
+
*/
|
225
|
+
var warnDisableProps = function warnDisableProps(child) {
|
226
|
+
if (child.props.showColumnFields || child.props.showFilterFields || child.props.showDataFields) {
|
227
|
+
console.warn('FieldPanel의 showColumnFields, showFilterFields, showDataFields 기능은 사용하실 수 없습니다');
|
228
|
+
}
|
229
|
+
};
|
230
|
+
|
231
|
+
/**
|
232
|
+
* props.children 중 FieldPanel 일부 기능 불능화
|
233
|
+
* @param child props.children
|
234
|
+
* @returns
|
235
|
+
*/
|
236
|
+
var modifyChildren = function modifyChildren(child, index) {
|
237
|
+
if (child.type.name === 'FieldPanel') {
|
238
|
+
var _child$props$visible, _child$props$allowFie, _child$props$showRowF;
|
239
|
+
warnDisableProps(child);
|
240
|
+
return /*#__PURE__*/ _react.createElement(_pivotGrid.FieldPanel, {
|
241
|
+
key: 'FieldPanel' + index,
|
242
|
+
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,
|
247
|
+
showColumnFields: false,
|
248
|
+
showFilterFields: false,
|
249
|
+
showDataFields: false,
|
250
|
+
showRowFields:
|
251
|
+
(_child$props$showRowF = child.props.showRowFields) !== null && _child$props$showRowF !== void 0 ? _child$props$showRowF : true,
|
252
|
+
});
|
253
|
+
}
|
254
|
+
return child;
|
255
|
+
};
|
230
256
|
|
231
257
|
/**
|
232
258
|
* 그리드 사이즈 재조정
|
@@ -585,13 +611,6 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
|
|
585
611
|
}
|
586
612
|
};
|
587
613
|
|
588
|
-
/**
|
589
|
-
* 그리드 펼침 정보 세션스토리지 리셋
|
590
|
-
*/
|
591
|
-
var resetSession = function resetSession() {
|
592
|
-
sessionStorage.removeItem(stateStoringKey);
|
593
|
-
};
|
594
|
-
|
595
614
|
/**
|
596
615
|
* 엑셀 export 명령
|
597
616
|
* @param fileName 저장하고자 하는 엑셀파일명
|
@@ -613,7 +632,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
|
|
613
632
|
*/
|
614
633
|
var convertDataControllerColumnsInfo = function convertDataControllerColumnsInfo(component) {
|
615
634
|
var arr = [];
|
616
|
-
|
635
|
+
component._dataController._columnsInfo.forEach(function (column) {
|
617
636
|
var newColumn = column.slice();
|
618
637
|
if (groupField && newColumn.length === 1 && newColumn[0].type === 'GT' && newColumn[0].text === 'Grand Total') {
|
619
638
|
arr.push.apply(arr, _toConsumableArray(makeDataControllerColumnGroup(groupField)));
|
@@ -659,6 +678,51 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
|
|
659
678
|
e.cancel = true;
|
660
679
|
};
|
661
680
|
|
681
|
+
/**
|
682
|
+
* props.children 요소 중 일부 요소 default 설정 변경
|
683
|
+
* @param child ReactNode
|
684
|
+
* @returns ReatNode
|
685
|
+
*/
|
686
|
+
var convertChildren = function convertChildren(child) {
|
687
|
+
if (Array.isArray(child)) {
|
688
|
+
return child.map(function (item, index) {
|
689
|
+
return modifyChildren(item, index);
|
690
|
+
});
|
691
|
+
} else {
|
692
|
+
return modifyChildren(child, 0);
|
693
|
+
}
|
694
|
+
};
|
695
|
+
|
696
|
+
/**
|
697
|
+
* StateStoring 의 storageKey값 가져오기
|
698
|
+
* @param child props.children
|
699
|
+
* @returns storageKey값
|
700
|
+
*/
|
701
|
+
var getStateStorageKey = function getStateStorageKey(child) {
|
702
|
+
if (Array.isArray(child)) {
|
703
|
+
var stateStoring = child.filter(function (node) {
|
704
|
+
return node.type.name === 'StateStoring';
|
705
|
+
});
|
706
|
+
if (stateStoring !== null && stateStoring !== void 0 && stateStoring.length) {
|
707
|
+
return stateStoring[0].props.storageKey;
|
708
|
+
}
|
709
|
+
return null;
|
710
|
+
} else if (child.type.name === 'StateStoring') {
|
711
|
+
return child.props.storageKey;
|
712
|
+
}
|
713
|
+
return null;
|
714
|
+
};
|
715
|
+
|
716
|
+
/**
|
717
|
+
* 그리드 펼침 정보 세션스토리지 리셋
|
718
|
+
*/
|
719
|
+
var resetSession = function resetSession() {
|
720
|
+
var stateStoringKey = getStateStorageKey(children);
|
721
|
+
if (stateStoringKey) {
|
722
|
+
sessionStorage.removeItem(stateStoringKey);
|
723
|
+
}
|
724
|
+
};
|
725
|
+
|
662
726
|
/**
|
663
727
|
* devextreme CellPreparedEvent 이벤트 실행
|
664
728
|
* @param e
|
@@ -701,6 +765,11 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
|
|
701
765
|
var onOptionChangedChild = function onOptionChangedChild(e) {
|
702
766
|
return onOptionChanged ? onOptionChanged(e) : undefined;
|
703
767
|
};
|
768
|
+
(0, _react.useImperativeHandle)(ref, function () {
|
769
|
+
return {
|
770
|
+
exportToExcel: exportToExcel,
|
771
|
+
};
|
772
|
+
});
|
704
773
|
(0, _react.useEffect)(
|
705
774
|
function () {
|
706
775
|
if (Object.keys(dataSource).length) {
|
@@ -718,11 +787,6 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
|
|
718
787
|
/*#__PURE__*/ _react.createElement(
|
719
788
|
'div',
|
720
789
|
null,
|
721
|
-
/*#__PURE__*/ _react.createElement(_loadPanel.LoadPanel, {
|
722
|
-
position: {
|
723
|
-
of: id,
|
724
|
-
},
|
725
|
-
}),
|
726
790
|
/*#__PURE__*/ _react.createElement(
|
727
791
|
_pivotGrid.default,
|
728
792
|
{
|
@@ -761,11 +825,7 @@ var DxPlanitTreeGrid = /*#__PURE__*/ (0, _react.forwardRef)(function (props, ref
|
|
761
825
|
onInitialized: onInitializedChild,
|
762
826
|
onOptionChanged: onOptionChangedChild,
|
763
827
|
},
|
764
|
-
|
765
|
-
enabled: stateStoringKey === null || stateStoringKey === void 0 ? void 0 : stateStoringKey.length,
|
766
|
-
type: 'sessionStorage',
|
767
|
-
storageKey: stateStoringKey,
|
768
|
-
}),
|
828
|
+
convertChildren(children),
|
769
829
|
/*#__PURE__*/ _react.createElement(_pivotGrid.FieldChooser, {
|
770
830
|
enabled: false,
|
771
831
|
})
|
package/dist/index.d.ts
CHANGED
@@ -1,4 +1,6 @@
|
|
1
|
+
import React from 'react';
|
1
2
|
import DevExpress from 'devextreme';
|
3
|
+
import { HeaderFilter } from 'devextreme-react/pivot-grid';
|
2
4
|
import { Format } from 'devextreme/localization';
|
3
5
|
|
4
6
|
export declare const DxPlanitTreeGrid;
|
@@ -32,7 +34,8 @@ export declare module TypeDxPlanit {
|
|
32
34
|
dataColor?: IColorInfo[];
|
33
35
|
convertNullToHipen?: boolean;
|
34
36
|
convertZeroToHipen?: boolean;
|
35
|
-
stateStoringKey?: string;
|
36
37
|
customExcelButton?: boolean;
|
38
|
+
HeaderFilter?: HeaderFilter;
|
39
|
+
children?: React.ReactNode;
|
37
40
|
}
|
38
41
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "devextreme-planit-treegrid-react",
|
3
|
-
"version": "1.
|
3
|
+
"version": "1.2.9",
|
4
4
|
"description": "Devextreme의 DxPivotGrid를 Tree Grid처럼 보여주는 Wrapper입니다.",
|
5
5
|
"main": "dist/index.js",
|
6
6
|
"types": "dist/index.d.ts",
|
@@ -41,15 +41,15 @@
|
|
41
41
|
"not op_mini all"
|
42
42
|
],
|
43
43
|
"dependencies": {
|
44
|
-
"react": "^18.2.0",
|
45
|
-
"react-dom": "^18.2.0",
|
46
|
-
"react-router-dom": "^6.4.3",
|
47
|
-
"react-scripts": "^5.0.1",
|
48
44
|
"devextreme": "^22.1.6",
|
49
|
-
"devextreme-planit-treegrid-react": "^1.1.
|
45
|
+
"devextreme-planit-treegrid-react": "^1.1.9",
|
50
46
|
"devextreme-react": "^22.1.6",
|
51
47
|
"exceljs": "^4.3.0",
|
52
48
|
"file-saver": "^2.0.5",
|
49
|
+
"react": "^18.2.0",
|
50
|
+
"react-dom": "^18.2.0",
|
51
|
+
"react-router-dom": "^6.4.3",
|
52
|
+
"react-scripts": "^5.0.1",
|
53
53
|
"typescript": "^4.9.3",
|
54
54
|
"uuid": "^9.0.0",
|
55
55
|
"web-vitals": "^2.1.4"
|