-
Notifications
You must be signed in to change notification settings - Fork 45
/
ModelBrowserTreeView.tsx
79 lines (75 loc) · 2.56 KB
/
ModelBrowserTreeView.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/*******************************************************************************
* Copyright (c) 2023 Obeo.
* This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v2.0
* which accompanies this distribution, and is available at
* https://www.eclipse.org/legal/epl-2.0/
*
* SPDX-License-Identifier: EPL-2.0
*
* Contributors:
* Obeo - initial API and implementation
*******************************************************************************/
import { TreeView } from '@eclipse-sirius/sirius-components-trees';
import { makeStyles } from '@material-ui/core/styles';
import { useState } from 'react';
import { ModelBrowserFilterBar } from './ModelBrowserFilterBar';
import { ModelBrowserTreeViewProps, ModelBrowserTreeViewState } from './ModelBrowserTreeView.types';
const useTreeStyle = makeStyles((theme) => ({
title: {
opacity: 0.6,
fontSize: theme.typography.caption.fontSize,
},
borderStyle: {
border: '1px solid',
borderColor: theme.palette.grey[500],
height: 300,
overflow: 'auto',
},
}));
export const ModelBrowserTreeView = ({
editingContextId,
selection,
setSelection,
widget,
markedItemIds,
enableMultiSelection,
title,
leafType,
ownerKind,
}: ModelBrowserTreeViewProps) => {
const classes = useTreeStyle();
const [state, setState] = useState<ModelBrowserTreeViewState>({ filterBarText: '' });
const converter = {
convert: (tree) => tree,
};
return (
<>
<ModelBrowserFilterBar
onTextChange={(event) => setState({ filterBarText: event.target.value })}
onTextClear={() => setState({ filterBarText: '' })}
text={state.filterBarText}
/>
<span className={classes.title}>{title}</span>
<div className={classes.borderStyle}>
<TreeView
editingContextId={editingContextId}
readOnly={true}
selection={selection}
setSelection={setSelection}
treeId={`modelBrowser://${leafType}?ownerKind=${encodeURIComponent(
ownerKind
)}&targetType=${encodeURIComponent(widget.reference.referenceKind)}&ownerId=${
widget.ownerId
}&descriptionId=${encodeURIComponent(widget.descriptionId)}&isContainment=${widget.reference.containment}`}
enableMultiSelection={enableMultiSelection}
synchronizedWithSelection={true}
textToFilter={state.filterBarText}
textToHighlight={state.filterBarText}
markedItemIds={markedItemIds}
converter={converter}
/>
</div>
</>
);
};