-
Notifications
You must be signed in to change notification settings - Fork 45
/
Label.tsx
73 lines (67 loc) · 2.44 KB
/
Label.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
/*******************************************************************************
* Copyright (c) 2023, 2024 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 { getCSSColor, IconOverlay } from '@eclipse-sirius/sirius-components-core';
import { Theme, useTheme } from '@material-ui/core/styles';
import { memo } from 'react';
import { DiagramDirectEditInput } from './direct-edit/DiagramDirectEditInput';
import { useDiagramDirectEdit } from './direct-edit/useDiagramDirectEdit';
import { LabelProps } from './Label.types';
const labelStyle = (
theme: Theme,
style: React.CSSProperties,
faded: Boolean,
transform: string
): React.CSSProperties => {
const labelStyle: React.CSSProperties = {
transform,
opacity: faded ? '0.4' : '',
pointerEvents: 'all',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
whiteSpace: 'nowrap',
...style,
color: style.color ? getCSSColor(String(style.color), theme) : undefined,
};
return labelStyle;
};
export const Label = memo(({ diagramElementId, label, faded, transform }: LabelProps) => {
const theme: Theme = useTheme();
const { currentlyEditedLabelId, editingKey, resetDirectEdit } = useDiagramDirectEdit();
const handleClose = () => {
resetDirectEdit();
const diagramElement = document.querySelector(`[data-id="${diagramElementId}"]`);
if (diagramElement instanceof HTMLElement) {
diagramElement.focus();
}
};
const content: JSX.Element =
label.id === currentlyEditedLabelId ? (
<DiagramDirectEditInput editingKey={editingKey} onClose={handleClose} labelId={label.id} />
) : (
<div data-id={`${label.id}-content`} style={{ display: 'flex', alignItems: 'center' }}>
<IconOverlay iconURL={label.iconURL} alt={label.text} customIconStyle={{ marginRight: theme.spacing(1) }} />
{label.text}
</div>
);
return (
<div
data-id={label.id}
data-testid={`Label - ${label.text}`}
style={labelStyle(theme, label.style, faded, transform)}
className="nopan">
{content}
</div>
);
});