@bit-sun/business-component 2.4.19 → 2.4.21
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/.editorconfig +16 -16
- package/.fatherrc.ts +5 -5
- package/.gitlab-ci.yml +179 -179
- package/.prettierignore +7 -7
- package/.prettierrc +11 -11
- package/.umirc.ts +74 -74
- package/README.md +27 -27
- package/dist/index.esm.js +10 -6
- package/dist/index.js +10 -6
- package/docs/index.md +21 -21
- package/lib/assets/drag.svg +17 -17
- package/lib/assets/exportFail.svg +37 -37
- package/lib/assets/exportProcessing.svg +28 -28
- package/lib/assets/exportSuccess.svg +34 -34
- package/lib/assets/label_icon_bottom.svg +25 -25
- package/lib/assets/upExport.svg +22 -22
- package/package.json +79 -79
- package/src/assets/32.svg +27 -27
- package/src/assets/addIcon.svg +17 -17
- package/src/assets/allfunc.svg +27 -27
- package/src/assets/arrowRight.svg +24 -24
- package/src/assets/btn-delete.svg +29 -29
- package/src/assets/btn-edit.svg +19 -19
- package/src/assets/btn-more.svg +17 -17
- package/src/assets/btn-submit.svg +19 -19
- package/src/assets/caidan.svg +11 -11
- package/src/assets/close.svg +26 -26
- package/src/assets/drag.svg +17 -17
- package/src/assets/exportFail.svg +37 -37
- package/src/assets/exportProcessing.svg +28 -28
- package/src/assets/exportSuccess.svg +34 -34
- package/src/assets/fixed-left-active.svg +11 -11
- package/src/assets/fixed-left.svg +15 -15
- package/src/assets/fixed-right-active.svg +11 -11
- package/src/assets/fixed-right.svg +15 -15
- package/src/assets/guanbi.svg +15 -15
- package/src/assets/icon-quanping.svg +15 -15
- package/src/assets/icon-shezhi.svg +17 -17
- package/src/assets/label_icon_bottom.svg +25 -25
- package/src/assets/list-no-img.svg +21 -21
- package/src/assets/morentouxiang-32.svg +23 -23
- package/src/assets/scanning.svg +24 -24
- package/src/assets/upExport.svg +22 -22
- package/src/common/ENUM.ts +41 -41
- package/src/components/Business/AddSelectBusiness/index.md +162 -162
- package/src/components/Business/AddSelectBusiness/index.tsx +1061 -1061
- package/src/components/Business/BsLayouts/Components/AllFunc/drawContent.tsx +111 -111
- package/src/components/Business/BsLayouts/Components/AllFunc/index.less +153 -153
- package/src/components/Business/BsLayouts/Components/AllFunc/index.tsx +70 -70
- package/src/components/Business/BsLayouts/Components/CustomerMenu/MenuSetting/index.less +90 -90
- package/src/components/Business/BsLayouts/Components/CustomerMenu/MenuSetting/index.tsx +37 -37
- package/src/components/Business/BsLayouts/Components/CustomerMenu/MenuSetting/leftTree.tsx +242 -242
- package/src/components/Business/BsLayouts/Components/CustomerMenu/MenuSetting/rightTree.tsx +384 -384
- package/src/components/Business/BsLayouts/Components/CustomerMenu/globalMenu/DrawContent.tsx +285 -285
- package/src/components/Business/BsLayouts/Components/CustomerMenu/globalMenu/customMenuHeader.tsx +74 -74
- package/src/components/Business/BsLayouts/Components/CustomerMenu/globalMenu/drawContent.less +170 -170
- package/src/components/Business/BsLayouts/Components/CustomerMenu/index.less +64 -64
- package/src/components/Business/BsLayouts/Components/CustomerMenu/index.tsx +153 -153
- package/src/components/Business/BsLayouts/Components/GlobalHeader/index.less +72 -72
- package/src/components/Business/BsLayouts/Components/GlobalHeader/index.tsx +157 -157
- package/src/components/Business/BsLayouts/Components/RightContent/LoginModal.tsx +85 -85
- package/src/components/Business/BsLayouts/Components/RightContent/home.less +218 -218
- package/src/components/Business/BsLayouts/Components/RightContent/index.tsx +155 -155
- package/src/components/Business/BsLayouts/Components/SearchFunc/index.less +160 -160
- package/src/components/Business/BsLayouts/Components/SearchFunc/index.tsx +75 -75
- package/src/components/Business/BsLayouts/index.less +79 -79
- package/src/components/Business/BsLayouts/index.tsx +1484 -1484
- package/src/components/Business/BsLayouts/service.ts +10 -10
- package/src/components/Business/BsLayouts/utils.tsx +203 -203
- package/src/components/Business/BsSulaQueryTable/SearchItemSetting.tsx +566 -566
- package/src/components/Business/BsSulaQueryTable/index.less +221 -221
- package/src/components/Business/BsSulaQueryTable/index.tsx +558 -558
- package/src/components/Business/BsSulaQueryTable/setting.tsx +854 -854
- package/src/components/Business/BsSulaQueryTable/utils.less +65 -65
- package/src/components/Business/BsSulaQueryTable/utils.tsx +690 -690
- package/src/components/Business/CommodityEntry/index.md +70 -70
- package/src/components/Business/CommodityEntry/index.tsx +80 -80
- package/src/components/Business/CommonAlert/index.tsx +23 -23
- package/src/components/Business/CommonGuideWrapper/index.less +111 -111
- package/src/components/Business/CommonGuideWrapper/index.md +39 -39
- package/src/components/Business/CommonGuideWrapper/index.tsx +83 -83
- package/src/components/Business/DetailPageWrapper/index.less +79 -79
- package/src/components/Business/DetailPageWrapper/index.tsx +315 -315
- package/src/components/Business/DetailPageWrapper/utils.tsx +100 -100
- package/src/components/Business/HomePageWrapper/index.less +33 -33
- package/src/components/Business/HomePageWrapper/index.md +45 -45
- package/src/components/Business/HomePageWrapper/index.tsx +162 -162
- package/src/components/Business/JsonQueryTable/components/FieldsModifyModal.tsx +824 -824
- package/src/components/Business/JsonQueryTable/components/FieldsSettingsTable.tsx +205 -205
- package/src/components/Business/JsonQueryTable/components/Formula.tsx +206 -206
- package/src/components/Business/JsonQueryTable/components/MaintainOptions.tsx +127 -127
- package/src/components/Business/JsonQueryTable/configButton/index.js +20 -20
- package/src/components/Business/JsonQueryTable/configTree/component/compactArrayView.js +25 -25
- package/src/components/Business/JsonQueryTable/configTree/component/compactObjectView.js +30 -30
- package/src/components/Business/JsonQueryTable/configTree/index.js +82 -82
- package/src/components/Business/JsonQueryTable/configTree/index.less +44 -44
- package/src/components/Business/JsonQueryTable/configTree/parser/highlight.js +57 -57
- package/src/components/Business/JsonQueryTable/configTree/parser/index.js +124 -124
- package/src/components/Business/JsonQueryTable/configTree/render/iconRender.js +29 -29
- package/src/components/Business/JsonQueryTable/configTree/render/nameRender.js +22 -22
- package/src/components/Business/JsonQueryTable/configTree/treeNode.js +116 -116
- package/src/components/Business/JsonQueryTable/drawer/index.tsx +12 -12
- package/src/components/Business/JsonQueryTable/function.ts +62 -62
- package/src/components/Business/JsonQueryTable/index.less +16 -16
- package/src/components/Business/JsonQueryTable/index.md +328 -328
- package/src/components/Business/JsonQueryTable/index.tsx +537 -537
- package/src/components/Business/JsonQueryTable/jsonEditor/index.js +346 -346
- package/src/components/Business/JsonQueryTable/jsonEditor/index.less +22 -22
- package/src/components/Business/JsonQueryTable/jsonEditor/lint/basicType.js +147 -147
- package/src/components/Business/JsonQueryTable/jsonEditor/lint/index.js +389 -389
- package/src/components/Business/JsonQueryTable/jsonEditor/suggestions/actions.js +118 -118
- package/src/components/Business/JsonQueryTable/jsonEditor/suggestions/dependency.js +22 -22
- package/src/components/Business/JsonQueryTable/jsonEditor/suggestions/index.js +21 -21
- package/src/components/Business/JsonQueryTable/jsonEditor/suggestions/request.js +65 -65
- package/src/components/Business/JsonQueryTable/static.ts +450 -450
- package/src/components/Business/SearchSelect/BusinessUtils.ts +2057 -2057
- package/src/components/Business/SearchSelect/common.ts +134 -134
- package/src/components/Business/SearchSelect/index.md +1444 -1444
- package/src/components/Business/SearchSelect/index.tsx +55 -55
- package/src/components/Business/SearchSelect/utils.ts +101 -101
- package/src/components/Business/StateFlow/index.less +130 -130
- package/src/components/Business/StateFlow/index.md +60 -60
- package/src/components/Business/StateFlow/index.tsx +29 -29
- package/src/components/Business/TreeSearchSelect/index.md +185 -185
- package/src/components/Business/TreeSearchSelect/index.tsx +33 -33
- package/src/components/Business/TreeSearchSelect/utils.ts +104 -104
- package/src/components/Business/columnSettingTable/columnSetting.tsx +766 -766
- package/src/components/Business/columnSettingTable/index.less +247 -247
- package/src/components/Business/columnSettingTable/index.md +357 -357
- package/src/components/Business/columnSettingTable/index.tsx +235 -234
- package/src/components/Business/columnSettingTable/sulaSettingTable.tsx +243 -242
- package/src/components/Business/columnSettingTable/utils.tsx +71 -71
- package/src/components/Business/moreTreeTable/FixedScrollBar.tsx +87 -87
- package/src/components/Business/moreTreeTable/hooks/useSticky.ts +21 -21
- package/src/components/Business/moreTreeTable/index.less +99 -99
- package/src/components/Business/moreTreeTable/index.md +448 -448
- package/src/components/Business/moreTreeTable/index.tsx +387 -387
- package/src/components/Business/moreTreeTable/utils.ts +126 -126
- package/src/components/Functional/AddSelect/helps.ts +80 -80
- package/src/components/Functional/AddSelect/index.less +367 -367
- package/src/components/Functional/AddSelect/index.md +155 -155
- package/src/components/Functional/AddSelect/index.tsx +1171 -1171
- package/src/components/Functional/BillEntry/index.less +371 -371
- package/src/components/Functional/BillEntry/index.md +39 -39
- package/src/components/Functional/BillEntry/index.tsx +773 -773
- package/src/components/Functional/BsAntdSula/BsCascader/index.md +62 -62
- package/src/components/Functional/BsAntdSula/BsCascader/index.tsx +178 -178
- package/src/components/Functional/BsAntdSula/index.ts +2 -2
- package/src/components/Functional/DataImport/index.less +63 -63
- package/src/components/Functional/DataImport/index.md +44 -44
- package/src/components/Functional/DataImport/index.tsx +696 -696
- package/src/components/Functional/DataValidation/index.less +63 -63
- package/src/components/Functional/DataValidation/index.md +39 -39
- package/src/components/Functional/DataValidation/index.tsx +688 -688
- package/src/components/Functional/EllipsisTooltip/index.d.ts +5 -5
- package/src/components/Functional/EllipsisTooltip/index.js +36 -36
- package/src/components/Functional/EllipsisTooltip/index.md +30 -30
- package/src/components/Functional/ExportFunctions/ExportIcon/index.md +37 -37
- package/src/components/Functional/ExportFunctions/ExportIcon/index.tsx +60 -60
- package/src/components/Functional/QueryMutipleInput/index.less +37 -37
- package/src/components/Functional/QueryMutipleInput/index.md +33 -33
- package/src/components/Functional/QueryMutipleInput/index.tsx +128 -128
- package/src/components/Functional/SearchSelect/index.less +115 -115
- package/src/components/Functional/SearchSelect/index.md +141 -141
- package/src/components/Functional/SearchSelect/index.tsx +896 -896
- package/src/components/Functional/SearchSelect/utils.ts +3 -3
- package/src/components/Functional/TreeSearchSelect/index.md +47 -47
- package/src/components/Functional/TreeSearchSelect/index.tsx +204 -204
- package/src/components/Solution/RuleComponent/Formula.tsx +335 -335
- package/src/components/Solution/RuleComponent/InnerSelect.tsx +62 -62
- package/src/components/Solution/RuleComponent/index.d.ts +29 -29
- package/src/components/Solution/RuleComponent/index.js +2073 -2073
- package/src/components/Solution/RuleComponent/index.less +230 -230
- package/src/components/Solution/RuleComponent/renderSpecificAction.js +99 -99
- package/src/components/Solution/RuleComponent/ruleFiled.js +2281 -2281
- package/src/components/Solution/RuleComponent/services.ts +13 -13
- package/src/components/Solution/RuleComponent/util.js +143 -143
- package/src/index.ts +38 -38
- package/src/plugin/TableColumnSetting/index.less +247 -247
- package/src/plugin/TableColumnSetting/index.md +50 -50
- package/src/plugin/TableColumnSetting/index.tsx +725 -725
- package/src/plugin/TableColumnSetting/utils.ts +19 -19
- package/src/styles/bsDefault.less +1912 -1912
- package/src/utils/CheckOneUser/index.md +39 -39
- package/src/utils/CheckOneUser/index.ts +51 -51
- package/src/utils/CustomLoginInfo.ts +55 -55
- package/src/utils/LocalstorageUtils.ts +95 -95
- package/src/utils/TableUtils.tsx +18 -18
- package/src/utils/checkUtils.ts +39 -39
- package/src/utils/enumConfig.ts +11 -11
- package/src/utils/getFormMode.js +12 -12
- package/src/utils/index.ts +4 -4
- package/src/utils/requestUtils.ts +166 -166
- package/src/utils/serialize.js +7 -7
- package/src/utils/utils.ts +195 -195
- package/tsconfig.json +29 -29
- package/typings.d.ts +4 -4
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Affix, Button } from 'antd';
|
|
3
|
-
import { SettingOutlined } from '@ant-design/icons';
|
|
4
|
-
|
|
5
|
-
export default props => {
|
|
6
|
-
const { onClick } = props;
|
|
7
|
-
|
|
8
|
-
const style = { position: 'fixed', top: 360, right: 24, zIndex: 1001 };
|
|
9
|
-
|
|
10
|
-
return (
|
|
11
|
-
<Affix style={style}>
|
|
12
|
-
<Button
|
|
13
|
-
style={{ width: 50, height: 50, lineHeight: '57px' }}
|
|
14
|
-
icon={<SettingOutlined style={{ fontSize: 30 }} />}
|
|
15
|
-
type="primary"
|
|
16
|
-
onClick={onClick}
|
|
17
|
-
/>
|
|
18
|
-
</Affix>
|
|
19
|
-
);
|
|
20
|
-
};
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Affix, Button } from 'antd';
|
|
3
|
+
import { SettingOutlined } from '@ant-design/icons';
|
|
4
|
+
|
|
5
|
+
export default props => {
|
|
6
|
+
const { onClick } = props;
|
|
7
|
+
|
|
8
|
+
const style = { position: 'fixed', top: 360, right: 24, zIndex: 1001 };
|
|
9
|
+
|
|
10
|
+
return (
|
|
11
|
+
<Affix style={style}>
|
|
12
|
+
<Button
|
|
13
|
+
style={{ width: 50, height: 50, lineHeight: '57px' }}
|
|
14
|
+
icon={<SettingOutlined style={{ fontSize: 30 }} />}
|
|
15
|
+
type="primary"
|
|
16
|
+
onClick={onClick}
|
|
17
|
+
/>
|
|
18
|
+
</Affix>
|
|
19
|
+
);
|
|
20
|
+
};
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const prefixCls = 'tree-compact';
|
|
4
|
-
|
|
5
|
-
export default class CompactArrayView extends React.Component {
|
|
6
|
-
shouldComponentUpdate(nextProps) {
|
|
7
|
-
return nextProps.array.length !== this.props.array.length;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
render() {
|
|
11
|
-
let { array } = this.props;
|
|
12
|
-
let count = array.length;
|
|
13
|
-
|
|
14
|
-
if (count === 0) {
|
|
15
|
-
return <span>{'[ ]'}</span>;
|
|
16
|
-
}
|
|
17
|
-
return (
|
|
18
|
-
<span className={prefixCls}>
|
|
19
|
-
<span>{'['}</span>
|
|
20
|
-
<span>{count + ' element' + (count > 1 ? 's' : '')}</span>
|
|
21
|
-
<span>{']'}</span>
|
|
22
|
-
</span>
|
|
23
|
-
);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const prefixCls = 'tree-compact';
|
|
4
|
+
|
|
5
|
+
export default class CompactArrayView extends React.Component {
|
|
6
|
+
shouldComponentUpdate(nextProps) {
|
|
7
|
+
return nextProps.array.length !== this.props.array.length;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
render() {
|
|
11
|
+
let { array } = this.props;
|
|
12
|
+
let count = array.length;
|
|
13
|
+
|
|
14
|
+
if (count === 0) {
|
|
15
|
+
return <span>{'[ ]'}</span>;
|
|
16
|
+
}
|
|
17
|
+
return (
|
|
18
|
+
<span className={prefixCls}>
|
|
19
|
+
<span>{'['}</span>
|
|
20
|
+
<span>{count + ' element' + (count > 1 ? 's' : '')}</span>
|
|
21
|
+
<span>{']'}</span>
|
|
22
|
+
</span>
|
|
23
|
+
);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
const prefixCls = 'tree-compact';
|
|
4
|
-
|
|
5
|
-
export default class CompactObjectView extends React.Component {
|
|
6
|
-
shouldComponentUpdate(nextProps) {
|
|
7
|
-
const nextLength = Object.keys(nextProps.object).length;
|
|
8
|
-
const prevLength = Object.keys(this.props.object).length;
|
|
9
|
-
return nextLength !== prevLength;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
render() {
|
|
13
|
-
let keys = this.props.object.map(v => v.name);
|
|
14
|
-
let count = keys.length;
|
|
15
|
-
|
|
16
|
-
if (count === 0) {
|
|
17
|
-
return <span>{'{ }'}</span>;
|
|
18
|
-
}
|
|
19
|
-
if (count > 2) {
|
|
20
|
-
keys = keys.slice(0, 2).concat([`... +${count - 2}`]);
|
|
21
|
-
}
|
|
22
|
-
return (
|
|
23
|
-
<span className={prefixCls}>
|
|
24
|
-
<span>{'{'}</span>
|
|
25
|
-
<span>{keys.join(', ')}</span>
|
|
26
|
-
<span>{'}'}</span>
|
|
27
|
-
</span>
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const prefixCls = 'tree-compact';
|
|
4
|
+
|
|
5
|
+
export default class CompactObjectView extends React.Component {
|
|
6
|
+
shouldComponentUpdate(nextProps) {
|
|
7
|
+
const nextLength = Object.keys(nextProps.object).length;
|
|
8
|
+
const prevLength = Object.keys(this.props.object).length;
|
|
9
|
+
return nextLength !== prevLength;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
render() {
|
|
13
|
+
let keys = this.props.object.map(v => v.name);
|
|
14
|
+
let count = keys.length;
|
|
15
|
+
|
|
16
|
+
if (count === 0) {
|
|
17
|
+
return <span>{'{ }'}</span>;
|
|
18
|
+
}
|
|
19
|
+
if (count > 2) {
|
|
20
|
+
keys = keys.slice(0, 2).concat([`... +${count - 2}`]);
|
|
21
|
+
}
|
|
22
|
+
return (
|
|
23
|
+
<span className={prefixCls}>
|
|
24
|
+
<span>{'{'}</span>
|
|
25
|
+
<span>{keys.join(', ')}</span>
|
|
26
|
+
<span>{'}'}</span>
|
|
27
|
+
</span>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -1,82 +1,82 @@
|
|
|
1
|
-
import React, { useState, useEffect } from 'react';
|
|
2
|
-
import castArray from 'lodash/castArray';
|
|
3
|
-
import createTreeData, { getConfigNode } from './parser';
|
|
4
|
-
import { createHighLightTreeData, clearActiveNode } from './parser/highlight';
|
|
5
|
-
import TreeNode from './treeNode';
|
|
6
|
-
import iconRender from './render/iconRender';
|
|
7
|
-
import nameRender from './render/nameRender';
|
|
8
|
-
|
|
9
|
-
import './index.less';
|
|
10
|
-
|
|
11
|
-
export { iconRender, nameRender };
|
|
12
|
-
|
|
13
|
-
function parseData(data) {
|
|
14
|
-
let res;
|
|
15
|
-
try {
|
|
16
|
-
res = createTreeData(getConfigNode(data));
|
|
17
|
-
} catch (e) {}
|
|
18
|
-
|
|
19
|
-
return res;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export default props => {
|
|
23
|
-
const {
|
|
24
|
-
data,
|
|
25
|
-
onToggle,
|
|
26
|
-
onSelect,
|
|
27
|
-
nameRender,
|
|
28
|
-
iconRender,
|
|
29
|
-
contextMenuRender,
|
|
30
|
-
style,
|
|
31
|
-
level = 0,
|
|
32
|
-
currentLine,
|
|
33
|
-
} = props;
|
|
34
|
-
const [treeData, setTreeData] = useState(parseData(data));
|
|
35
|
-
const [activeLine, setActiveLine] = useState(-1);
|
|
36
|
-
|
|
37
|
-
useEffect(() => {
|
|
38
|
-
setTreeData(parseData(data));
|
|
39
|
-
}, [data]);
|
|
40
|
-
|
|
41
|
-
useEffect(() => {
|
|
42
|
-
if (!treeData || !treeData[0]) {
|
|
43
|
-
setActiveLine(-1);
|
|
44
|
-
} else {
|
|
45
|
-
setActiveLine(currentLine);
|
|
46
|
-
}
|
|
47
|
-
}, [treeData, currentLine]);
|
|
48
|
-
|
|
49
|
-
useEffect(() => {
|
|
50
|
-
setTimeout(() => {
|
|
51
|
-
setTreeData(createHighLightTreeData(treeData, activeLine));
|
|
52
|
-
});
|
|
53
|
-
}, [activeLine]);
|
|
54
|
-
|
|
55
|
-
const handleSelect = (node, hasChildren) => {
|
|
56
|
-
const noActiveData = clearActiveNode(treeData);
|
|
57
|
-
setTreeData(noActiveData);
|
|
58
|
-
onSelect(node, hasChildren);
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
return (
|
|
62
|
-
<div className="si-tree" style={style}>
|
|
63
|
-
{castArray(treeData).map((node, index) => {
|
|
64
|
-
if (!node) return;
|
|
65
|
-
|
|
66
|
-
return (
|
|
67
|
-
<TreeNode
|
|
68
|
-
data={node}
|
|
69
|
-
onToggle={onToggle}
|
|
70
|
-
onSelect={handleSelect}
|
|
71
|
-
nameRender={nameRender}
|
|
72
|
-
iconRender={iconRender}
|
|
73
|
-
contextMenuRender={contextMenuRender}
|
|
74
|
-
key={node.name || index}
|
|
75
|
-
level={level}
|
|
76
|
-
activeLine={activeLine}
|
|
77
|
-
/>
|
|
78
|
-
);
|
|
79
|
-
})}
|
|
80
|
-
</div>
|
|
81
|
-
);
|
|
82
|
-
};
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import castArray from 'lodash/castArray';
|
|
3
|
+
import createTreeData, { getConfigNode } from './parser';
|
|
4
|
+
import { createHighLightTreeData, clearActiveNode } from './parser/highlight';
|
|
5
|
+
import TreeNode from './treeNode';
|
|
6
|
+
import iconRender from './render/iconRender';
|
|
7
|
+
import nameRender from './render/nameRender';
|
|
8
|
+
|
|
9
|
+
import './index.less';
|
|
10
|
+
|
|
11
|
+
export { iconRender, nameRender };
|
|
12
|
+
|
|
13
|
+
function parseData(data) {
|
|
14
|
+
let res;
|
|
15
|
+
try {
|
|
16
|
+
res = createTreeData(getConfigNode(data));
|
|
17
|
+
} catch (e) {}
|
|
18
|
+
|
|
19
|
+
return res;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export default props => {
|
|
23
|
+
const {
|
|
24
|
+
data,
|
|
25
|
+
onToggle,
|
|
26
|
+
onSelect,
|
|
27
|
+
nameRender,
|
|
28
|
+
iconRender,
|
|
29
|
+
contextMenuRender,
|
|
30
|
+
style,
|
|
31
|
+
level = 0,
|
|
32
|
+
currentLine,
|
|
33
|
+
} = props;
|
|
34
|
+
const [treeData, setTreeData] = useState(parseData(data));
|
|
35
|
+
const [activeLine, setActiveLine] = useState(-1);
|
|
36
|
+
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
setTreeData(parseData(data));
|
|
39
|
+
}, [data]);
|
|
40
|
+
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
if (!treeData || !treeData[0]) {
|
|
43
|
+
setActiveLine(-1);
|
|
44
|
+
} else {
|
|
45
|
+
setActiveLine(currentLine);
|
|
46
|
+
}
|
|
47
|
+
}, [treeData, currentLine]);
|
|
48
|
+
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
setTimeout(() => {
|
|
51
|
+
setTreeData(createHighLightTreeData(treeData, activeLine));
|
|
52
|
+
});
|
|
53
|
+
}, [activeLine]);
|
|
54
|
+
|
|
55
|
+
const handleSelect = (node, hasChildren) => {
|
|
56
|
+
const noActiveData = clearActiveNode(treeData);
|
|
57
|
+
setTreeData(noActiveData);
|
|
58
|
+
onSelect(node, hasChildren);
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<div className="si-tree" style={style}>
|
|
63
|
+
{castArray(treeData).map((node, index) => {
|
|
64
|
+
if (!node) return;
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<TreeNode
|
|
68
|
+
data={node}
|
|
69
|
+
onToggle={onToggle}
|
|
70
|
+
onSelect={handleSelect}
|
|
71
|
+
nameRender={nameRender}
|
|
72
|
+
iconRender={iconRender}
|
|
73
|
+
contextMenuRender={contextMenuRender}
|
|
74
|
+
key={node.name || index}
|
|
75
|
+
level={level}
|
|
76
|
+
activeLine={activeLine}
|
|
77
|
+
/>
|
|
78
|
+
);
|
|
79
|
+
})}
|
|
80
|
+
</div>
|
|
81
|
+
);
|
|
82
|
+
};
|
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
// hover background
|
|
2
|
-
@hover-background: #1990ffab;
|
|
3
|
-
|
|
4
|
-
.si-tree {
|
|
5
|
-
font-size: 14px;
|
|
6
|
-
|
|
7
|
-
&-node {
|
|
8
|
-
&-block {
|
|
9
|
-
display: flex;
|
|
10
|
-
align-items: center;
|
|
11
|
-
padding: 2px 4px;
|
|
12
|
-
cursor: pointer;
|
|
13
|
-
user-select: none;
|
|
14
|
-
&:hover {
|
|
15
|
-
background-color: @hover-background;
|
|
16
|
-
color: #fff;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
&-actived {
|
|
20
|
-
background-color: @hover-background;
|
|
21
|
-
color: #fff;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
&-switcher {
|
|
26
|
-
margin-right: 2px;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
&-icon {
|
|
30
|
-
margin-right: 4px;
|
|
31
|
-
display: flex;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
&-name {
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.tree-compact {
|
|
40
|
-
margin-left: 4px;
|
|
41
|
-
font-size: 13px;
|
|
42
|
-
font-style: italic;
|
|
43
|
-
color: #49aa19;
|
|
44
|
-
}
|
|
1
|
+
// hover background
|
|
2
|
+
@hover-background: #1990ffab;
|
|
3
|
+
|
|
4
|
+
.si-tree {
|
|
5
|
+
font-size: 14px;
|
|
6
|
+
|
|
7
|
+
&-node {
|
|
8
|
+
&-block {
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
padding: 2px 4px;
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
user-select: none;
|
|
14
|
+
&:hover {
|
|
15
|
+
background-color: @hover-background;
|
|
16
|
+
color: #fff;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&-actived {
|
|
20
|
+
background-color: @hover-background;
|
|
21
|
+
color: #fff;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&-switcher {
|
|
26
|
+
margin-right: 2px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&-icon {
|
|
30
|
+
margin-right: 4px;
|
|
31
|
+
display: flex;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&-name {
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.tree-compact {
|
|
40
|
+
margin-left: 4px;
|
|
41
|
+
font-size: 13px;
|
|
42
|
+
font-style: italic;
|
|
43
|
+
color: #49aa19;
|
|
44
|
+
}
|
|
@@ -1,57 +1,57 @@
|
|
|
1
|
-
const isHightLight = (hightLightData, highLightLine) => {
|
|
2
|
-
const { children, loc = [0, 0, 0, 0] } = hightLightData;
|
|
3
|
-
const [lineStart, , lineEnd] = loc;
|
|
4
|
-
if (children) {
|
|
5
|
-
return isActiveObj(highLightLine, lineStart, lineEnd);
|
|
6
|
-
}
|
|
7
|
-
return lineStart <= highLightLine && lineEnd >= highLightLine;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
const hasHighLightChildren = (hightLightData = {}, highLightLine) => {
|
|
11
|
-
const { children, loc = [0, 0, 0, 0] } = hightLightData;
|
|
12
|
-
const [lineStart, , lineEnd] = loc;
|
|
13
|
-
if (children) {
|
|
14
|
-
return (
|
|
15
|
-
isActiveObj(highLightLine, lineStart, lineEnd) ||
|
|
16
|
-
children.some(v => hasHighLightChildren(v, highLightLine))
|
|
17
|
-
);
|
|
18
|
-
}
|
|
19
|
-
return lineStart <= highLightLine && lineEnd >= highLightLine;
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
function isActiveObj(highLightLine, start, end) {
|
|
23
|
-
return highLightLine === start || highLightLine === end;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function createHighLightTreeData(treeData, highLightLine) {
|
|
27
|
-
const data = Array.isArray(treeData) ? [...treeData] : [treeData];
|
|
28
|
-
|
|
29
|
-
data.forEach(node => {
|
|
30
|
-
if (!node) return;
|
|
31
|
-
node.toggled = hasHighLightChildren(node, highLightLine);
|
|
32
|
-
node.active = isHightLight(node, highLightLine);
|
|
33
|
-
if (node.children) {
|
|
34
|
-
if (node.active) {
|
|
35
|
-
node.children = clearActiveNode(node.children);
|
|
36
|
-
} else {
|
|
37
|
-
node.children = createHighLightTreeData(node.children, highLightLine);
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
return data;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
function clearActiveNode(treeData) {
|
|
46
|
-
const data = Array.isArray(treeData) ? [...treeData] : [treeData];
|
|
47
|
-
data.forEach(node => {
|
|
48
|
-
if (!node) return;
|
|
49
|
-
node.active = false;
|
|
50
|
-
if (node.children) {
|
|
51
|
-
node.children = clearActiveNode(node.children);
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
return data;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export { createHighLightTreeData, clearActiveNode };
|
|
1
|
+
const isHightLight = (hightLightData, highLightLine) => {
|
|
2
|
+
const { children, loc = [0, 0, 0, 0] } = hightLightData;
|
|
3
|
+
const [lineStart, , lineEnd] = loc;
|
|
4
|
+
if (children) {
|
|
5
|
+
return isActiveObj(highLightLine, lineStart, lineEnd);
|
|
6
|
+
}
|
|
7
|
+
return lineStart <= highLightLine && lineEnd >= highLightLine;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
const hasHighLightChildren = (hightLightData = {}, highLightLine) => {
|
|
11
|
+
const { children, loc = [0, 0, 0, 0] } = hightLightData;
|
|
12
|
+
const [lineStart, , lineEnd] = loc;
|
|
13
|
+
if (children) {
|
|
14
|
+
return (
|
|
15
|
+
isActiveObj(highLightLine, lineStart, lineEnd) ||
|
|
16
|
+
children.some(v => hasHighLightChildren(v, highLightLine))
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
return lineStart <= highLightLine && lineEnd >= highLightLine;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
function isActiveObj(highLightLine, start, end) {
|
|
23
|
+
return highLightLine === start || highLightLine === end;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function createHighLightTreeData(treeData, highLightLine) {
|
|
27
|
+
const data = Array.isArray(treeData) ? [...treeData] : [treeData];
|
|
28
|
+
|
|
29
|
+
data.forEach(node => {
|
|
30
|
+
if (!node) return;
|
|
31
|
+
node.toggled = hasHighLightChildren(node, highLightLine);
|
|
32
|
+
node.active = isHightLight(node, highLightLine);
|
|
33
|
+
if (node.children) {
|
|
34
|
+
if (node.active) {
|
|
35
|
+
node.children = clearActiveNode(node.children);
|
|
36
|
+
} else {
|
|
37
|
+
node.children = createHighLightTreeData(node.children, highLightLine);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
return data;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
function clearActiveNode(treeData) {
|
|
46
|
+
const data = Array.isArray(treeData) ? [...treeData] : [treeData];
|
|
47
|
+
data.forEach(node => {
|
|
48
|
+
if (!node) return;
|
|
49
|
+
node.active = false;
|
|
50
|
+
if (node.children) {
|
|
51
|
+
node.children = clearActiveNode(node.children);
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
return data;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export { createHighLightTreeData, clearActiveNode };
|