diff options
author | 2023-08-30 22:14:50 +0200 | |
---|---|---|
committer | 2023-08-31 00:57:52 +0200 | |
commit | d4504285d15aeb0cb1560a5f522ac1edc02b7d4c (patch) | |
tree | f279dd795fc715c31ebb3b46a45e8ab12ac6d8e2 /subprojects/frontend/src/table/ValueRenderer.tsx | |
parent | feat(frontend): window pane switcher (diff) | |
download | refinery-d4504285d15aeb0cb1560a5f522ac1edc02b7d4c.tar.gz refinery-d4504285d15aeb0cb1560a5f522ac1edc02b7d4c.tar.zst refinery-d4504285d15aeb0cb1560a5f522ac1edc02b7d4c.zip |
feat(frontend): implement grid view
Diffstat (limited to 'subprojects/frontend/src/table/ValueRenderer.tsx')
-rw-r--r-- | subprojects/frontend/src/table/ValueRenderer.tsx | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/subprojects/frontend/src/table/ValueRenderer.tsx b/subprojects/frontend/src/table/ValueRenderer.tsx new file mode 100644 index 00000000..ac5700e4 --- /dev/null +++ b/subprojects/frontend/src/table/ValueRenderer.tsx | |||
@@ -0,0 +1,62 @@ | |||
1 | /* | ||
2 | * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/> | ||
3 | * | ||
4 | * SPDX-License-Identifier: EPL-2.0 | ||
5 | */ | ||
6 | |||
7 | import CancelIcon from '@mui/icons-material/Cancel'; | ||
8 | import LabelIcon from '@mui/icons-material/Label'; | ||
9 | import LabelOutlinedIcon from '@mui/icons-material/LabelOutlined'; | ||
10 | import { styled } from '@mui/material/styles'; | ||
11 | |||
12 | const Label = styled('div', { | ||
13 | name: 'ValueRenderer-Label', | ||
14 | shouldForwardProp: (prop) => prop !== 'value', | ||
15 | })<{ | ||
16 | value: 'TRUE' | 'UNKNOWN' | 'ERROR'; | ||
17 | }>(({ theme, value }) => ({ | ||
18 | display: 'flex', | ||
19 | alignItems: 'center', | ||
20 | ...(value === 'UNKNOWN' | ||
21 | ? { | ||
22 | color: theme.palette.text.secondary, | ||
23 | } | ||
24 | : {}), | ||
25 | ...(value === 'ERROR' | ||
26 | ? { | ||
27 | color: theme.palette.error.main, | ||
28 | } | ||
29 | : {}), | ||
30 | '& svg': { | ||
31 | marginRight: theme.spacing(0.5), | ||
32 | }, | ||
33 | })); | ||
34 | |||
35 | export default function ValueRenderer({ | ||
36 | value, | ||
37 | }: { | ||
38 | value: string | undefined; | ||
39 | }): React.ReactNode { | ||
40 | switch (value) { | ||
41 | case 'TRUE': | ||
42 | return ( | ||
43 | <Label value={value}> | ||
44 | <LabelIcon fontSize="small" /> true | ||
45 | </Label> | ||
46 | ); | ||
47 | case 'UNKNOWN': | ||
48 | return ( | ||
49 | <Label value={value}> | ||
50 | <LabelOutlinedIcon fontSize="small" /> unknown | ||
51 | </Label> | ||
52 | ); | ||
53 | case 'ERROR': | ||
54 | return ( | ||
55 | <Label value={value}> | ||
56 | <CancelIcon fontSize="small" /> error | ||
57 | </Label> | ||
58 | ); | ||
59 | default: | ||
60 | return value; | ||
61 | } | ||
62 | } | ||