All files / react/components/Dropdown index.js

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
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import PropTypes from "prop-types";
 
const Dropdown = ({
  className = "qpp-u-width--100",
  id = null,
  ariaLabelledBy = null,
  ariaLabel = null,
  onChange = () => {},
  dataTestId = null,
  name = null,
  dataType = null,
  disabled = false,
  size = null,
  options = [],
  children,
  parentElement = "span",
  ...rest
}) => {
  const dropdownClass = [
    "qpp-c-dropdown",
    size === "big" && "qpp-c-dropdown--big",
    className,
  ]
    .filter(Boolean)
    .join(" ");
 
  return (
    <select
      id={id}
      aria-labelledby={ariaLabelledBy}
      aria-label={ariaLabel}
      className={dropdownClass || ""}
      onChange={onChange}
      data-testid={dataTestId}
      name={name}
      disabled={disabled}
      data-type={dataType}
      {...rest}
    >
      {children}
      {options.map(({ disabled, name, value }) => (
        <option disabled={disabled} key={value} value={value}>
          {name}
        </option>
      ))}
    </select>
  );
};
 
Dropdown.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  id: PropTypes.string,
  ariaLabelledBy: PropTypes.string,
  ariaLabel: PropTypes.string,
  onChange: PropTypes.func,
  value: PropTypes.string,
  defaultValue: PropTypes.string,
  dataTestId: PropTypes.string,
  name: PropTypes.string,
  dataType: PropTypes.string,
  disabled: PropTypes.bool,
  size: PropTypes.oneOf(["big"]),
  options: PropTypes.array,
  parentElement: PropTypes.string,
};
 
export default Dropdown;