form ToggleButtonGroupField.tsx

0% Statements 0/8

0% Branches 0/2

0% Functions 0/1

0% Lines 0/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from "react";
import styled from "styled-components";
import {
  ToggleButtonGroup,
  ToggleButtonGroupOption,
} from "./ToggleButtonGroup";
import { Label } from "./Label";
 
export type ToggleButtonGroupFieldProps<T> = {
  name: string;
  label?: string;
  value: T;
  options: ToggleButtonGroupOption<T>[];
  onChange: (newValue: T) => void;
};
 
const Wrapper = styled.div`
  width: 100%;
`;
 
export const ToggleButtonGroupField = <T,>({
  name,
  label,
  value,
  options,
  onChange,
}: ToggleButtonGroupFieldProps<T>) => (
  <Wrapper>
    {label && <Label htmlFor={name}>{label}</Label>}
    <ToggleButtonGroup
      name={name}
      value={value}
      options={options}
      onChange={onChange}
    />
  </Wrapper>
);