ga-dev-tools/src/components/ga4/EventBuilder/Parameters.tsx at 35ea8df8aacee6d743f1e396d60fe6a8a8080e9c · googleanalytics/ga-dev-tools · 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { DAB, SAB } from "@/components/Buttons"
import { styled } from '@mui/material/styles';
import * as React from "react"
import { ShowAdvancedCtx } from "."
import Parameter from "./Parameter"
import { Parameter as ParameterT } from "./types"

const PREFIX = 'Parameters';

const classes = {
  buttonRow: `${PREFIX}-buttonRow`,
  parameters: `${PREFIX}-parameters`
};

const Root = styled('section')((
  {
    theme
  }
) => ({
  [`&.${classes.parameters}`]: {
    "&> :not(:first-child)": {
      marginTop: theme.spacing(1),
    },
  },

  [`& .${classes.buttonRow}`]: {
    display: "flex",
    "&> *:not(:last-child)": {
      marginRight: theme.spacing(1),
    },
  }
}));

interface Props {
  parameters: ParameterT[]
  setParamName: (idx: number, name: string) => void
  setParamValue: (idx: number, value: string) => void
  setParamTimestamp: (idx: number, value: number | undefined) => void
  addStringParam: () => void
  addNumberParam: () => void
  removeParam: (idx: number) => void
  removeItem?: () => void
  addItemsParam?: () => void
  allowTimestampOverride: boolean
}

const Parameters: React.FC<Props> = ({
  parameters,
  setParamName,
  setParamValue,
  setParamTimestamp,
  addStringParam,
  addNumberParam,
  removeParam,
  addItemsParam,
  removeItem,
  allowTimestampOverride,
}) => {
  const showAdvanced = React.useContext(ShowAdvancedCtx)

  return (
    <Root className={classes.parameters}>
      {parameters.map((parameter, idx) => (
        <Parameter
          key={`parameter-${parameter.name}-idx`}
          parameter={parameter}
          setParamName={name => setParamName(idx, name)}
          setParamValue={value => setParamValue(idx, value)}
          setParamTimestamp={setParamTimestamp}
          idx={idx}
          removeParam={() => removeParam(idx)}
          allowTimestampOverride={allowTimestampOverride}
        />
      ))}
      <section className={classes.buttonRow} >
        {showAdvanced && (
          <>
            <SAB
              add
              small
              title="add string parameter"
              onClick={addStringParam}
            >
              string
            </SAB>
            <SAB
              add
              small
              title="add number parameter"
              onClick={addNumberParam}
            >
              number
            </SAB>
            {addItemsParam !== undefined && (
              <SAB
                add
                small
                title="add items parameter"
                onClick={addItemsParam}
              >
                items
              </SAB>
            )}
          </>
        )}
        {removeItem !== undefined && (
          <>
            <div /* className={formClasses.grow} *//>
            <DAB delete small title="remove item" onClick={removeItem}>
              item
            </DAB>
          </>
        )}
      </section>
    </Root>
  );
}

export default Parameters