tycho-components 0.2.4-SNAPSHOT-3 → 0.2.4-SNAPSHOT-4
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/TreeView/TreeView.js +17 -3
- package/package.json +1 -1
|
@@ -16,6 +16,7 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
|
|
|
16
16
|
const [cy, setCy] = useState(null);
|
|
17
17
|
const [showInfo, setShowInfo] = useState(renderWithInfo);
|
|
18
18
|
const [invalid, setInvalid] = useState();
|
|
19
|
+
const [expandedExternally, setExpandedExternally] = useState(false);
|
|
19
20
|
const load = () => {
|
|
20
21
|
setCy(null);
|
|
21
22
|
const element = document.getElementById(selector);
|
|
@@ -92,15 +93,28 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
|
|
|
92
93
|
setShowInfo(newVal);
|
|
93
94
|
applyInfo(cy, struct, newVal);
|
|
94
95
|
};
|
|
96
|
+
const handleExpand = () => {
|
|
97
|
+
setExpandedExternally(true);
|
|
98
|
+
onExpand && onExpand(reset);
|
|
99
|
+
};
|
|
95
100
|
useEffect(() => {
|
|
96
101
|
setInvalid(undefined);
|
|
97
102
|
load();
|
|
98
103
|
}, [struct]);
|
|
104
|
+
useEffect(() => {
|
|
105
|
+
if (expandedExternally) {
|
|
106
|
+
const id = setTimeout(() => {
|
|
107
|
+
reset();
|
|
108
|
+
setExpandedExternally(false);
|
|
109
|
+
}, 50);
|
|
110
|
+
return () => clearTimeout(id);
|
|
111
|
+
}
|
|
112
|
+
}, [expandedExternally]);
|
|
99
113
|
if (invalid) {
|
|
100
114
|
return (_jsx(AppPlaceholder, { text: placeholder || t('placeholder.sentence.notparsed') }));
|
|
101
115
|
}
|
|
102
116
|
return (_jsxs("div", { className: "tree-view-container", children: [cy &&
|
|
103
|
-
getButtons(generateImage, reset, onClickExpression || downloadPsd, toggleInfo, onExpand, expression)
|
|
117
|
+
getButtons(generateImage, reset, onClickExpression || downloadPsd, toggleInfo, handleExpand, onExpand, expression)
|
|
104
118
|
.filter((btn) => btn.condition)
|
|
105
119
|
.map((btn, i) => {
|
|
106
120
|
const right = 12 + i * 44;
|
|
@@ -108,7 +122,7 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
|
|
|
108
122
|
}), _jsx("div", { id: selector, className: "canvas-tree" }), showInfo && (_jsxs("div", { className: "info", children: [_jsx("span", { children: SentenceUtils.getAsText(struct) }), translations &&
|
|
109
123
|
Object.entries(translations).map(([k, v]) => (_jsxs("div", { className: "translation", children: [_jsxs("b", { children: [k, ":"] }), _jsx("span", { children: v })] }, k))), struct.parsed && (_jsxs("span", { className: "date", children: [t('date.parsed'), ' ', DateUtils.formatDateTime(struct.parsed, 'dd/MM/yyyy HH:mm:ss')] }))] }))] }));
|
|
110
124
|
}
|
|
111
|
-
const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, expression) => [
|
|
125
|
+
const getButtons = (generateImage, reset, downloadPsd, toggleInfo, handleExpand, onExpand, expression) => [
|
|
112
126
|
{
|
|
113
127
|
condition: true,
|
|
114
128
|
title: 'button.download.tree',
|
|
@@ -131,7 +145,7 @@ const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, exp
|
|
|
131
145
|
{
|
|
132
146
|
condition: !!onExpand,
|
|
133
147
|
title: 'button.expand.tree',
|
|
134
|
-
onClick:
|
|
148
|
+
onClick: handleExpand,
|
|
135
149
|
icon: faUpRightAndDownLeftFromCenter,
|
|
136
150
|
},
|
|
137
151
|
{
|