File size: 1,576 Bytes
d61b9c7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
import React from "react";
import styles from "../App.module.css";
import cx from "../utils/cx";
import { GenericArgumentConfig } from "../models/insightsConfig";
import { UserInputField } from "../models/typeHelpers";

interface ArgumentProps {
  name: string;
  handleInputChange: React.ChangeEventHandler<UserInputField>;
}

function NumberArgument(props: ArgumentProps & GenericArgumentConfig<number>) {
  var min = props.limit[0];
  var max = props.limit[1];
  return (
    <div>
      {props.name}:
      <input
        className={cx([styles.input, styles["input--narrow"]])}
        name={props.name}
        type="number"
        value={props.value}
        min={min}
        max={max}
        onChange={props.handleInputChange}
      />
    </div>
  );
}

function EnumArgument(props: ArgumentProps & GenericArgumentConfig<string>) {
  const options = props.limit.map((item, key) => (
    <option value={item}>{item}</option>
  ));
  return (
    <div>
      {props.name}:
      <select
        className={styles.select}
        name={props.name}
        value={props.value}
        onChange={props.handleInputChange}
      >
        {options}
      </select>
    </div>
  );
}

function StringArgument(props: ArgumentProps & { value: string }) {
  return (
    <div>
      {props.name}:
      <input
        className={cx([styles.input, styles["input--narrow"]])}
        name={props.name}
        type="text"
        value={props.value}
        onChange={props.handleInputChange}
      />
    </div>
  );
}

export { StringArgument, EnumArgument, NumberArgument };