aio-tree 1.0.0 → 1.0.1
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/index.css +1 -0
- package/index.d.ts +23 -9
- package/index.js +218 -146
- package/package.json +21 -21
package/index.css
CHANGED
package/index.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { FC, ReactNode } from "react";
|
|
1
|
+
import { type FC, type ReactNode } from "react";
|
|
2
2
|
import './index.css';
|
|
3
|
-
export type
|
|
3
|
+
export type I_useTree = ReturnType<typeof useTree>;
|
|
4
|
+
export type I_treeRef = React.RefObject<ReturnType<typeof useTree> | undefined>;
|
|
4
5
|
export type AI_Tree = {
|
|
5
6
|
value: any[];
|
|
6
7
|
indent?: number;
|
|
7
|
-
onToggle?: (openDic: {
|
|
8
|
+
onToggle?: (detail: I_treeOptionDetail, state: boolean, openDic: {
|
|
8
9
|
[id: string]: boolean;
|
|
9
10
|
}) => void;
|
|
10
11
|
setChilds?: (treeOptionDetail: I_treeOptionDetail, childs: undefined | any[]) => void;
|
|
@@ -55,23 +56,36 @@ export type I_treeOptionDetail = {
|
|
|
55
56
|
attrs: any;
|
|
56
57
|
};
|
|
57
58
|
export declare const AITree: FC<AI_Tree>;
|
|
58
|
-
export declare const useTree: (
|
|
59
|
-
treeOptionProp?: I_treeOptionProp;
|
|
60
|
-
onChange?: (v: any) => void;
|
|
61
|
-
mainValueRef: React.RefObject<any[]>;
|
|
62
|
-
}) => {
|
|
59
|
+
export declare const useTree: (getProps: () => AI_Tree) => {
|
|
63
60
|
toggle: (treeOptionDetail: I_treeOptionDetail, state?: boolean) => void;
|
|
64
61
|
openDic: any;
|
|
65
62
|
isOpen: (treeOptionDetail?: I_treeOptionDetail) => boolean;
|
|
63
|
+
openByValue: (value: any, reset?: boolean) => void;
|
|
64
|
+
closeByValue: (value: any) => void;
|
|
65
|
+
getBodyClassName: (level: number, directParent?: I_treeOptionDetail) => string;
|
|
66
66
|
change: (row: any, newRow: any) => void;
|
|
67
67
|
getChilds: (treeOptionDetail: I_treeOptionDetail) => undefined | any[];
|
|
68
|
-
setChilds: (treeOptionDetail: I_treeOptionDetail, childs: undefined | any[], setChilds?: AI_Tree["setChilds"]) => void;
|
|
69
68
|
getOptions: (p: {
|
|
70
69
|
rows: any[];
|
|
71
70
|
level: number;
|
|
72
71
|
parentOptions: I_treeOptionDetail[];
|
|
73
72
|
}) => I_treeOptionDetail[];
|
|
74
73
|
getTreeOptionDetailByValues: (values: any[], rows: any[]) => I_treeOptionDetail;
|
|
74
|
+
getIndentProps: (detail: I_treeOptionDetail) => {
|
|
75
|
+
width: number;
|
|
76
|
+
level: number;
|
|
77
|
+
isLastChild: boolean;
|
|
78
|
+
isLeaf: boolean;
|
|
79
|
+
isParentLastChild: boolean;
|
|
80
|
+
rtl: boolean;
|
|
81
|
+
toggleIcon: false | {
|
|
82
|
+
close?: ReactNode;
|
|
83
|
+
open?: ReactNode;
|
|
84
|
+
leaf?: ReactNode;
|
|
85
|
+
};
|
|
86
|
+
open: boolean;
|
|
87
|
+
onToggle: () => void;
|
|
88
|
+
};
|
|
75
89
|
};
|
|
76
90
|
type AI_Indent = {
|
|
77
91
|
level: number;
|
package/index.js
CHANGED
|
@@ -2,17 +2,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { createContext, useContext, useEffect, useRef, useState } from "react";
|
|
3
3
|
import './index.css';
|
|
4
4
|
export const AITree = (props) => {
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
const tree = useTree(
|
|
5
|
+
const rootPropsRef = useRef(props);
|
|
6
|
+
rootPropsRef.current = props;
|
|
7
|
+
const tree = useTree(() => rootPropsRef.current);
|
|
8
8
|
if (props.treeRef) {
|
|
9
9
|
props.treeRef.current = tree;
|
|
10
10
|
}
|
|
11
11
|
let Attrs = AddToAttrs(props.attrs, { className: ['aio-input-tree', props.className, props.rtl ? 'aio-input-tree-rtl' : undefined], style: props.style });
|
|
12
12
|
useEffect(() => {
|
|
13
|
-
|
|
14
|
-
props.onToggle(tree.openDic);
|
|
15
|
-
}
|
|
13
|
+
console.log(tree.openDic);
|
|
16
14
|
}, [tree.openDic]);
|
|
17
15
|
return (_jsx(TreeProvider, { value: { rootProps: props, tree }, children: _jsx("div", Object.assign({}, Attrs, { children: _jsx(TreeBody, { rows: props.value, level: 0, parentOptions: [] }) })) }));
|
|
18
16
|
};
|
|
@@ -25,109 +23,102 @@ const TreeBody = (props) => {
|
|
|
25
23
|
let { tree } = useTreeProvider();
|
|
26
24
|
let { rows, level, parentOptions } = props;
|
|
27
25
|
let list = tree.getOptions({ rows, level, parentOptions });
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
if (level === 0) {
|
|
31
|
-
className += ' aio-input-tree-root';
|
|
32
|
-
}
|
|
33
|
-
const directParent = parentOptions.length ? parentOptions[parentOptions.length - 1] : undefined;
|
|
34
|
-
if (tree.isOpen(directParent)) {
|
|
35
|
-
className += ' open';
|
|
36
|
-
}
|
|
37
|
-
className += ` aio-input-tree-body-level-${level}`;
|
|
38
|
-
return className;
|
|
39
|
-
}
|
|
40
|
-
return (_jsx("div", { className: getClassName(), children: list.map((treeOptionDetail) => {
|
|
26
|
+
const directParent = parentOptions.length ? parentOptions[parentOptions.length - 1] : undefined;
|
|
27
|
+
return (_jsx("div", { className: tree.getBodyClassName(level, directParent), children: list.map((treeOptionDetail) => {
|
|
41
28
|
return _jsx(TreeNode, { treeOptionDetail: treeOptionDetail }, treeOptionDetail.value);
|
|
42
29
|
}) }));
|
|
43
30
|
};
|
|
44
31
|
const TreeNode = ({ treeOptionDetail }) => {
|
|
45
|
-
|
|
46
|
-
const { level, parentOptions, open } = treeOptionDetail;
|
|
47
|
-
const childs = tree.getChilds(treeOptionDetail);
|
|
32
|
+
const { level, parentOptions, open, childs } = treeOptionDetail;
|
|
48
33
|
return (_jsxs(_Fragment, { children: [_jsx(TreeRow, { treeOptionDetail: treeOptionDetail }), Array.isArray(childs) && open !== false &&
|
|
49
34
|
_jsx(TreeBody, { parentOptions: [...parentOptions, treeOptionDetail], rows: childs, level: level + 1 })] }));
|
|
50
35
|
};
|
|
51
36
|
const TreeRow = ({ treeOptionDetail }) => {
|
|
52
|
-
let { tree
|
|
53
|
-
const {
|
|
54
|
-
|
|
55
|
-
const directParent = parentOptions.length ? parentOptions[parentOptions.length - 1] : undefined;
|
|
56
|
-
const indent = treeOptionDetail.toggleIcon !== false && (_jsx(Indent, { width: rootProps.indent || 24, level: level, isLastChild: isLastChild, isLeaf: !childs, isParentLastChild: !!(directParent === null || directParent === void 0 ? void 0 : directParent.isLastChild), rtl: !!rootProps.rtl, toggleIcon: treeOptionDetail.toggleIcon, open: open, onToggle: () => tree.toggle(treeOptionDetail) }));
|
|
37
|
+
let { tree } = useTreeProvider();
|
|
38
|
+
const { text } = treeOptionDetail;
|
|
39
|
+
const indent = treeOptionDetail.toggleIcon !== false && (_jsx(Indent, Object.assign({}, tree.getIndentProps(treeOptionDetail))));
|
|
57
40
|
return (_jsxs("div", Object.assign({}, treeOptionDetail.attrs, { children: [!!indent && indent, _jsx("div", { className: "aio-input-tree-text", children: text })] })));
|
|
58
41
|
};
|
|
59
|
-
export const useTree = (
|
|
60
|
-
let [openDic,
|
|
42
|
+
export const useTree = (getProps) => {
|
|
43
|
+
let [openDic, _setOpenDic] = useState({}), openDicRef = useRef(openDic);
|
|
61
44
|
openDicRef.current = openDic;
|
|
62
|
-
const
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
const parentOption = parentOptions[i];
|
|
79
|
-
if (openDicRef.current[parentOption.value] !== true) {
|
|
80
|
-
return false;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
return openDicRef.current[value] === true;
|
|
45
|
+
const getOpenDic = () => openDicRef.current;
|
|
46
|
+
const setOpenDic = (v) => _setOpenDic(v);
|
|
47
|
+
const treeClassRef = useRef(new TreeClass({ getOpenDic, setOpenDic, getProps }));
|
|
48
|
+
const tree = treeClassRef.current;
|
|
49
|
+
return {
|
|
50
|
+
toggle: tree.toggle,
|
|
51
|
+
openDic,
|
|
52
|
+
isOpen: tree.isOpen,
|
|
53
|
+
openByValue: tree.openByValue,
|
|
54
|
+
closeByValue: tree.closeByValue,
|
|
55
|
+
getBodyClassName: tree.getBodyClassName,
|
|
56
|
+
change: tree.change,
|
|
57
|
+
getChilds: tree.getChilds,
|
|
58
|
+
getOptions: tree.getOptions,
|
|
59
|
+
getTreeOptionDetailByValues: tree.getTreeOptionDetailByValues,
|
|
60
|
+
getIndentProps: tree.getIndentProps
|
|
84
61
|
};
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
try {
|
|
97
|
-
if (!!((_a = hookProps.treeOptionProp) === null || _a === void 0 ? void 0 : _a.childs)) {
|
|
98
|
-
return hookProps.treeOptionProp.childs(treeOptionDetail);
|
|
62
|
+
};
|
|
63
|
+
class TreeClass {
|
|
64
|
+
constructor(p) {
|
|
65
|
+
this.dic = {};
|
|
66
|
+
this.toggle = (treeOptionDetail, state) => {
|
|
67
|
+
const open = state === undefined ? treeOptionDetail.open : state;
|
|
68
|
+
const newOpen = !open;
|
|
69
|
+
const newOpenDic = Object.assign(Object.assign({}, this.getOpenDic()), { [treeOptionDetail.value]: newOpen });
|
|
70
|
+
const { onToggle } = this.getProps();
|
|
71
|
+
if (onToggle) {
|
|
72
|
+
onToggle(treeOptionDetail, newOpen, newOpenDic);
|
|
99
73
|
}
|
|
100
|
-
|
|
101
|
-
|
|
74
|
+
this.setOpenDic(newOpenDic);
|
|
75
|
+
};
|
|
76
|
+
this.isOpen = (treeOptionDetail) => {
|
|
77
|
+
if (!treeOptionDetail) {
|
|
78
|
+
return true;
|
|
102
79
|
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
if (setChilds) {
|
|
111
|
-
setChilds(treeOptionDetail, childs);
|
|
80
|
+
const { parentOptions, value } = treeOptionDetail;
|
|
81
|
+
const openDic = this.getOpenDic();
|
|
82
|
+
for (let i = 0; i < parentOptions.length; i++) {
|
|
83
|
+
const parentOption = parentOptions[i];
|
|
84
|
+
if (openDic[parentOption.value] !== true) {
|
|
85
|
+
return false;
|
|
86
|
+
}
|
|
112
87
|
}
|
|
113
|
-
|
|
114
|
-
|
|
88
|
+
return openDic[value] === true;
|
|
89
|
+
};
|
|
90
|
+
this.change = (row, newRow) => {
|
|
91
|
+
for (let prop in newRow) {
|
|
92
|
+
row[prop] = newRow[prop];
|
|
115
93
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
94
|
+
const { onChange } = this.getProps();
|
|
95
|
+
if (onChange) {
|
|
96
|
+
onChange(this.getProps().value);
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
this.getChilds = (treeOptionDetail) => {
|
|
100
|
+
const { row } = treeOptionDetail;
|
|
101
|
+
try {
|
|
102
|
+
const { treeOption } = this.getProps();
|
|
103
|
+
if (!!(treeOption === null || treeOption === void 0 ? void 0 : treeOption.childs)) {
|
|
104
|
+
return treeOption.childs(treeOptionDetail);
|
|
105
|
+
}
|
|
106
|
+
else {
|
|
107
|
+
return row.childs;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
catch (_a) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
this.getOption = (row, index, level, parentOptions) => {
|
|
124
115
|
const treeOptionDetail = {
|
|
125
116
|
text: null,
|
|
126
117
|
row,
|
|
127
118
|
toggleIcon: undefined,
|
|
128
119
|
childs: undefined,
|
|
129
120
|
level,
|
|
130
|
-
index
|
|
121
|
+
index,
|
|
131
122
|
parentOptions,
|
|
132
123
|
open: false,
|
|
133
124
|
toggle: () => { },
|
|
@@ -140,29 +131,29 @@ export const useTree = (hookProps) => {
|
|
|
140
131
|
attrs: undefined,
|
|
141
132
|
values: parentOptions.map((o) => o.value)
|
|
142
133
|
};
|
|
143
|
-
const value = getOptionValue(row, 'value', treeOptionDetail);
|
|
134
|
+
const value = this.getOptionValue(row, 'value', treeOptionDetail);
|
|
144
135
|
treeOptionDetail.value = value;
|
|
145
136
|
treeOptionDetail.values.push(value);
|
|
146
|
-
treeOptionDetail.open = isOpen(treeOptionDetail);
|
|
147
|
-
const childs = getOptionValue(row, 'childs', treeOptionDetail);
|
|
137
|
+
treeOptionDetail.open = this.isOpen(treeOptionDetail);
|
|
138
|
+
const childs = this.getOptionValue(row, 'childs', treeOptionDetail);
|
|
148
139
|
treeOptionDetail.childs = childs;
|
|
149
140
|
treeOptionDetail.isLeaf = !childs;
|
|
150
|
-
treeOptionDetail.toggle = (state) => toggle(treeOptionDetail, state);
|
|
151
|
-
treeOptionDetail.change = (newRow) => change(row, newRow);
|
|
152
|
-
treeOptionDetail.toggleIcon = getOptionValue(row, 'toggleIcon', treeOptionDetail);
|
|
153
|
-
const show = getOptionValue(row, 'show', treeOptionDetail, true);
|
|
141
|
+
treeOptionDetail.toggle = (state) => this.toggle(treeOptionDetail, state);
|
|
142
|
+
treeOptionDetail.change = (newRow) => this.change(row, newRow);
|
|
143
|
+
treeOptionDetail.toggleIcon = this.getOptionValue(row, 'toggleIcon', treeOptionDetail);
|
|
144
|
+
const show = this.getOptionValue(row, 'show', treeOptionDetail, true);
|
|
154
145
|
if (show === false) {
|
|
155
|
-
|
|
146
|
+
return;
|
|
156
147
|
}
|
|
157
|
-
treeOptionDetail.text = getOptionValue(row, 'text', treeOptionDetail);
|
|
158
|
-
|
|
159
|
-
const attrs = getOptionValue(row, 'attrs', treeOptionDetail);
|
|
160
|
-
const className = getOptionValue(row, 'className', treeOptionDetail);
|
|
161
|
-
const style = getOptionValue(row, 'style', treeOptionDetail);
|
|
148
|
+
treeOptionDetail.text = this.getOptionValue(row, 'text', treeOptionDetail);
|
|
149
|
+
this.dic = Object.assign(Object.assign({}, this.dic), { [treeOptionDetail.value.toString()]: treeOptionDetail });
|
|
150
|
+
const attrs = this.getOptionValue(row, 'attrs', treeOptionDetail);
|
|
151
|
+
const className = this.getOptionValue(row, 'className', treeOptionDetail);
|
|
152
|
+
const style = this.getOptionValue(row, 'style', treeOptionDetail);
|
|
162
153
|
const onClick = () => {
|
|
163
|
-
|
|
164
|
-
if (
|
|
165
|
-
|
|
154
|
+
const { treeOption } = this.getProps();
|
|
155
|
+
if (treeOption === null || treeOption === void 0 ? void 0 : treeOption.onClick) {
|
|
156
|
+
treeOption === null || treeOption === void 0 ? void 0 : treeOption.onClick(treeOptionDetail);
|
|
166
157
|
}
|
|
167
158
|
else if (row.onClick) {
|
|
168
159
|
row.onClick(treeOptionDetail);
|
|
@@ -170,52 +161,133 @@ export const useTree = (hookProps) => {
|
|
|
170
161
|
};
|
|
171
162
|
const Attrs = AddToAttrs(Object.assign(Object.assign({}, attrs), { onClick }), { className: [className, 'aio-input-tree-row'], style });
|
|
172
163
|
treeOptionDetail.attrs = Attrs;
|
|
173
|
-
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
list
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
164
|
+
return treeOptionDetail;
|
|
165
|
+
};
|
|
166
|
+
this.getOptions = (p) => {
|
|
167
|
+
let { level, parentOptions, rows } = p;
|
|
168
|
+
let list = [];
|
|
169
|
+
for (let index = 0; index < rows.length; index++) {
|
|
170
|
+
let row = rows[index];
|
|
171
|
+
const res = this.getOption(row, index, level, parentOptions);
|
|
172
|
+
if (res) {
|
|
173
|
+
list.push(res);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
if (list.length) {
|
|
177
|
+
list[0].isFirstChild = true;
|
|
178
|
+
list[list.length - 1].isLastChild = true;
|
|
179
|
+
}
|
|
180
|
+
return list;
|
|
181
|
+
};
|
|
182
|
+
this.getOptionValue = (row, key, treeOptionDetail, def) => {
|
|
183
|
+
const { treeOption } = this.getProps();
|
|
184
|
+
let res;
|
|
185
|
+
if (treeOption && treeOption[key]) {
|
|
186
|
+
res = treeOption[key](treeOptionDetail);
|
|
187
|
+
}
|
|
188
|
+
if (res !== undefined && res !== null) {
|
|
189
|
+
return res;
|
|
190
|
+
}
|
|
191
|
+
if (typeof row === 'object' && !Array.isArray(row)) {
|
|
192
|
+
res = row[key];
|
|
193
|
+
}
|
|
194
|
+
if (res !== undefined && res !== null) {
|
|
195
|
+
return res;
|
|
196
|
+
}
|
|
197
|
+
return def;
|
|
198
|
+
};
|
|
199
|
+
this.getTreeOptionDetailByValue = (value, rows, level, parentOptions) => {
|
|
200
|
+
const res = this.getOptions({ rows, parentOptions, level });
|
|
201
|
+
return res.find((o) => o.value === value);
|
|
202
|
+
};
|
|
203
|
+
this.getTreeOptionDetailByValues = (values, rows) => {
|
|
204
|
+
let res = this.getTreeOptionDetailByValue(values[0], rows, 0, []);
|
|
205
|
+
if (!res) {
|
|
206
|
+
return;
|
|
207
|
+
}
|
|
208
|
+
for (let i = 1; i < values.length; i++) {
|
|
209
|
+
if (!res || !res.childs) {
|
|
210
|
+
return;
|
|
211
|
+
}
|
|
212
|
+
res = this.getTreeOptionDetailByValue(values[i], res.childs, i, [...res.parentOptions, res]);
|
|
213
|
+
}
|
|
193
214
|
return res;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
const getTreeOptionDetailByValue = (value, rows, level, parentOptions) => {
|
|
198
|
-
const res = getOptions({ rows, parentOptions, level });
|
|
199
|
-
return res.find((o) => o.value === value);
|
|
200
|
-
};
|
|
201
|
-
const getTreeOptionDetailByValues = (values, rows) => {
|
|
202
|
-
let res = getTreeOptionDetailByValue(values[0], rows, 0, []);
|
|
203
|
-
if (!res) {
|
|
204
|
-
return;
|
|
205
|
-
}
|
|
206
|
-
for (let i = 1; i < values.length; i++) {
|
|
207
|
-
if (!res || !res.childs) {
|
|
215
|
+
};
|
|
216
|
+
this.getRowAndParentsById_req = (rows, id, parentOptions, level, result) => {
|
|
217
|
+
if (result.row) {
|
|
208
218
|
return;
|
|
209
219
|
}
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
220
|
+
for (let i = 0; i < rows.length; i++) {
|
|
221
|
+
const row = rows[i];
|
|
222
|
+
const d = this.getOption(row, i, level, parentOptions);
|
|
223
|
+
if (!d) {
|
|
224
|
+
continue;
|
|
225
|
+
}
|
|
226
|
+
if (d.value === id) {
|
|
227
|
+
result.row = d;
|
|
228
|
+
result.parentOptions = parentOptions;
|
|
229
|
+
return;
|
|
230
|
+
}
|
|
231
|
+
if (d.childs && d.childs.length) {
|
|
232
|
+
this.getRowAndParentsById_req(d.childs, id, [...parentOptions, d], level + 1, result);
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
};
|
|
236
|
+
this.getRowAndParentsById = (rows, rowId) => {
|
|
237
|
+
let result = { parentOptions: [] };
|
|
238
|
+
this.getRowAndParentsById_req(rows, rowId, [], 0, result);
|
|
239
|
+
return result;
|
|
240
|
+
};
|
|
241
|
+
this.openByValue = (value, reset) => {
|
|
242
|
+
const { value: mainValue } = this.getProps();
|
|
243
|
+
const { row, parentOptions } = this.getRowAndParentsById(mainValue, value);
|
|
244
|
+
if (!row) {
|
|
245
|
+
return;
|
|
246
|
+
}
|
|
247
|
+
const newOpenDic = reset ? {} : Object.assign({}, this.getOpenDic());
|
|
248
|
+
for (let i = 0; i < parentOptions.length; i++) {
|
|
249
|
+
const po = parentOptions[i];
|
|
250
|
+
newOpenDic[po.value] = true;
|
|
251
|
+
}
|
|
252
|
+
newOpenDic[value] = true;
|
|
253
|
+
this.setOpenDic(newOpenDic);
|
|
254
|
+
};
|
|
255
|
+
this.closeByValue = (value) => {
|
|
256
|
+
const { value: mainValue } = this.getProps();
|
|
257
|
+
const { row } = this.getRowAndParentsById(mainValue, value);
|
|
258
|
+
if (!row) {
|
|
259
|
+
return;
|
|
260
|
+
}
|
|
261
|
+
const newOpenDic = Object.assign({}, this.getOpenDic());
|
|
262
|
+
newOpenDic[value] = false;
|
|
263
|
+
this.setOpenDic(newOpenDic);
|
|
264
|
+
};
|
|
265
|
+
this.getBodyClassName = (level, directParent) => {
|
|
266
|
+
let className = 'aio-input-tree-body';
|
|
267
|
+
if (!directParent) {
|
|
268
|
+
className += ' aio-input-tree-root';
|
|
269
|
+
}
|
|
270
|
+
if (this.isOpen(directParent)) {
|
|
271
|
+
className += ' open';
|
|
272
|
+
}
|
|
273
|
+
className += ` aio-input-tree-body-level-${level}`;
|
|
274
|
+
return className;
|
|
275
|
+
};
|
|
276
|
+
this.getIndentProps = (detail) => {
|
|
277
|
+
const { indent = 24, rtl } = this.getProps();
|
|
278
|
+
const { level, childs, isLastChild, parentOptions, toggleIcon, open } = detail;
|
|
279
|
+
const directParent = parentOptions.length ? parentOptions[parentOptions.length - 1] : undefined;
|
|
280
|
+
return {
|
|
281
|
+
width: indent, level, isLastChild, isLeaf: !childs,
|
|
282
|
+
isParentLastChild: !!(directParent === null || directParent === void 0 ? void 0 : directParent.isLastChild),
|
|
283
|
+
rtl: !!rtl, toggleIcon, open, onToggle: () => this.toggle(detail)
|
|
284
|
+
};
|
|
285
|
+
};
|
|
286
|
+
this.getOpenDic = p.getOpenDic;
|
|
287
|
+
this.setOpenDic = p.setOpenDic;
|
|
288
|
+
this.getProps = p.getProps;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
219
291
|
export const Indent = (props) => {
|
|
220
292
|
const { width, level, open, rtl, isLastChild, isParentLastChild, isLeaf } = props;
|
|
221
293
|
const [indentPathes, setIndentPathes] = useState(getIndentIcons);
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "aio-tree",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "tree hierarchy",
|
|
5
|
-
"homepage": "https://github.com/mohammadFeiz/aio-tree#readme",
|
|
6
|
-
"types": "index.d.ts",
|
|
7
|
-
"bugs": {
|
|
8
|
-
"url": "https://github.com/mohammadFeiz/aio-tree/issues"
|
|
9
|
-
},
|
|
10
|
-
"repository": {
|
|
11
|
-
"type": "git",
|
|
12
|
-
"url": "git+https://github.com/mohammadFeiz/aio-tree.git"
|
|
13
|
-
},
|
|
14
|
-
"license": "ISC",
|
|
15
|
-
"author": "mohammad sharif feiz feiz.ms@gmail.com",
|
|
16
|
-
"type": "commonjs",
|
|
17
|
-
"main": "index.js",
|
|
18
|
-
"scripts": {
|
|
19
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
|
20
|
-
}
|
|
21
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "aio-tree",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "tree hierarchy",
|
|
5
|
+
"homepage": "https://github.com/mohammadFeiz/aio-tree#readme",
|
|
6
|
+
"types": "index.d.ts",
|
|
7
|
+
"bugs": {
|
|
8
|
+
"url": "https://github.com/mohammadFeiz/aio-tree/issues"
|
|
9
|
+
},
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "git+https://github.com/mohammadFeiz/aio-tree.git"
|
|
13
|
+
},
|
|
14
|
+
"license": "ISC",
|
|
15
|
+
"author": "mohammad sharif feiz feiz.ms@gmail.com",
|
|
16
|
+
"type": "commonjs",
|
|
17
|
+
"main": "index.js",
|
|
18
|
+
"scripts": {
|
|
19
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
20
|
+
}
|
|
21
|
+
}
|