jsonforms/packages/material-renderers/src/layouts/ArrayToolbar.tsx at bc4d513feed74098b9e0d9025b33dd383e98fec7 · eclipsesource/jsonforms · GitHub

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
import { Grid, IconButton, Toolbar, Tooltip, Typography } from '@mui/material';
import { Add as AddIcon } from '@mui/icons-material';
import React from 'react';
import ValidationIcon from '../complex/ValidationIcon';
import { ArrayTranslations } from '@jsonforms/core';
export interface ArrayLayoutToolbarProps {
  label: string;
  errors: string;
  path: string;
  enabled: boolean;
  addItem(path: string, data: any): () => void;
  createDefault(): any;
  translations: ArrayTranslations;
}
export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
  label,
  errors,
  addItem,
  path,
  enabled,
  createDefault,
  translations,
}: ArrayLayoutToolbarProps) {
  return (
    <Toolbar disableGutters={true}>
      <Grid container alignItems='center' justifyContent='space-between'>
        <Grid item>
          <Grid
            container
            justifyContent={'flex-start'}
            alignItems={'center'}
            spacing={2}
          >
            <Grid item>
              <Typography variant={'h6'}>{label}</Typography>
            </Grid>
            <Grid item>
              {errors.length !== 0 && (
                <Grid item>
                  <ValidationIcon
                    id='tooltip-validation'
                    errorMessages={errors}
                  />
                </Grid>
              )}
            </Grid>
          </Grid>
        </Grid>
        {enabled && (
          <Grid item>
            <Grid container>
              <Grid item>
                <Tooltip
                  id='tooltip-add'
                  title={translations.addTooltip}
                  placement='bottom'
                >
                  <IconButton
                    aria-label={translations.addTooltip}
                    onClick={addItem(path, createDefault())}
                    size='large'
                  >
                    <AddIcon />
                  </IconButton>
                </Tooltip>
              </Grid>
            </Grid>
          </Grid>
        )}
      </Grid>
    </Toolbar>
  );
});