@giteeteam/apps-team-components 1.0.33 → 1.0.34
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/dist/components/fields/tree/BaseField.d.ts +1 -0
- package/dist/components/fields/tree/ReadView.d.ts +1 -1
- package/dist/components/fields/tree/ReadView.js +17 -15
- package/dist/components/fields/tree/types.d.ts +9 -0
- package/dist/components/fields/tree/types.js +1 -0
- package/dist/components/fields/tree/utils.d.ts +3 -2
- package/dist/components/fields/tree/utils.js +22 -3
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { BaseTreeProps } from './BaseField';
|
|
3
|
-
declare const TreeReadView: React.FC<
|
|
3
|
+
declare const TreeReadView: React.FC<BaseTreeProps>;
|
|
4
4
|
export default TreeReadView;
|
|
@@ -3,34 +3,36 @@ import { memo, useEffect, useMemo, useState } from 'react';
|
|
|
3
3
|
import { cloneDeep } from 'lodash-es';
|
|
4
4
|
import EmptyField from '../../common/EmptyField';
|
|
5
5
|
import BaseOverflowTooltip from '../../common/overflow-tooltip/BaseOverflowTooltip';
|
|
6
|
-
import { toTree } from './utils';
|
|
7
|
-
const TreeReadView = memo(({ value: propsValue, options:
|
|
6
|
+
import { toFlatten, toTree } from './utils';
|
|
7
|
+
const TreeReadView = memo(({ value: propsValue, options: originalOptions, multiple, readonly, showParentPath }) => {
|
|
8
8
|
const [value, setValue] = useState(null);
|
|
9
|
-
const options = useMemo(() => {
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const { options, optionList } = useMemo(() => {
|
|
10
|
+
const options = originalOptions ? toTree(cloneDeep(originalOptions), showParentPath) : [];
|
|
11
|
+
const optionList = toFlatten(options);
|
|
12
|
+
return { options, optionList };
|
|
13
|
+
}, [originalOptions, showParentPath]);
|
|
12
14
|
useEffect(() => {
|
|
13
15
|
if (options.length) {
|
|
14
16
|
const val = Array.isArray(propsValue) ? propsValue : [];
|
|
15
|
-
const filterValue = val.filter(v =>
|
|
17
|
+
const filterValue = val.filter(v => optionList.find(item => item.value === v));
|
|
16
18
|
setValue(multiple ? filterValue : filterValue[0]);
|
|
17
19
|
}
|
|
18
20
|
else {
|
|
19
21
|
setValue(undefined);
|
|
20
22
|
}
|
|
21
|
-
}, [
|
|
23
|
+
}, [optionList, propsValue, setValue, options, multiple]);
|
|
22
24
|
const showValue = useMemo(() => {
|
|
23
25
|
let showValue = null;
|
|
24
26
|
if (multiple) {
|
|
25
|
-
if (Array.isArray(
|
|
27
|
+
if (Array.isArray(optionList) && optionList.length >= 1 && value && Array.isArray(value)) {
|
|
26
28
|
showValue = value.reduce((showValue, val) => {
|
|
27
|
-
const opt =
|
|
29
|
+
const opt = optionList.filter(item => item.value === val);
|
|
28
30
|
if (opt.length) {
|
|
29
31
|
if (showValue) {
|
|
30
|
-
return showValue + ',' + opt[0].
|
|
32
|
+
return showValue + ',' + opt[0].fullTitle;
|
|
31
33
|
}
|
|
32
34
|
else {
|
|
33
|
-
return showValue + opt[0].
|
|
35
|
+
return showValue + opt[0].fullTitle;
|
|
34
36
|
}
|
|
35
37
|
}
|
|
36
38
|
return '';
|
|
@@ -38,15 +40,15 @@ const TreeReadView = memo(({ value: propsValue, options: propsOptions, multiple,
|
|
|
38
40
|
}
|
|
39
41
|
}
|
|
40
42
|
else {
|
|
41
|
-
if (Array.isArray(
|
|
42
|
-
const opt =
|
|
43
|
+
if (Array.isArray(optionList) && optionList.length >= 1 && value) {
|
|
44
|
+
const opt = optionList.filter(item => item.value === value);
|
|
43
45
|
if (opt.length >= 1) {
|
|
44
|
-
showValue = opt[0].
|
|
46
|
+
showValue = opt[0].fullTitle;
|
|
45
47
|
}
|
|
46
48
|
}
|
|
47
49
|
}
|
|
48
50
|
return showValue;
|
|
49
|
-
}, [value, multiple,
|
|
51
|
+
}, [value, multiple, optionList]);
|
|
50
52
|
if (!showValue) {
|
|
51
53
|
return _jsx(EmptyField, { readonly: readonly });
|
|
52
54
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const
|
|
1
|
+
import { SelectValue } from './types';
|
|
2
|
+
export declare const toTree: (data: SelectValue[], showParentPath?: boolean) => SelectValue[];
|
|
3
|
+
export declare const toFlatten: (data: SelectValue[]) => SelectValue[];
|
|
@@ -1,4 +1,22 @@
|
|
|
1
|
-
|
|
1
|
+
const titleDelimiter = '/';
|
|
2
|
+
const addFullTitle = (showParentPath, tree, parentTitle) => {
|
|
3
|
+
if (!tree)
|
|
4
|
+
return;
|
|
5
|
+
for (const item of tree) {
|
|
6
|
+
if (showParentPath) {
|
|
7
|
+
let suffix = '';
|
|
8
|
+
if (parentTitle) {
|
|
9
|
+
suffix = `${parentTitle}${titleDelimiter}`;
|
|
10
|
+
}
|
|
11
|
+
item.fullTitle = `${suffix}${item.title}`;
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
item.fullTitle = item.title;
|
|
15
|
+
}
|
|
16
|
+
addFullTitle(showParentPath, item.children, item.fullTitle);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
export const toTree = (data, showParentPath = false) => {
|
|
2
20
|
const temp = {};
|
|
3
21
|
const tree = [];
|
|
4
22
|
for (const i in data) {
|
|
@@ -15,8 +33,9 @@ export const toTree = (data) => {
|
|
|
15
33
|
tree.push(temp[i]);
|
|
16
34
|
}
|
|
17
35
|
}
|
|
36
|
+
addFullTitle(showParentPath, tree);
|
|
18
37
|
return tree;
|
|
19
38
|
};
|
|
20
|
-
export const
|
|
21
|
-
return data.reduce((arr, { id, title, parentId, value, label, children = [] }) => arr.concat([{ id, title, parentId, value, label }],
|
|
39
|
+
export const toFlatten = (data) => {
|
|
40
|
+
return data.reduce((arr, { id, title, parentId, value, label, fullTitle, children = [] }) => arr.concat([{ id, title, parentId, value, label, fullTitle }], toFlatten(children)), []);
|
|
22
41
|
};
|