All files / src/components/ui/form Checkbox.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { FC } from "react";
import styled from "styled-components";
import { StyledMenuItem } from "ui/menu/style";
 
export interface CheckboxProps {
  readonly id: string;
  readonly name: string;
  readonly checked?: boolean;
  readonly readOnly?: boolean;
  readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
 
const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
  margin: 0px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
`;
 
const StyledCheckbox = styled.div`
  pointer-events: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: ${(props) => props.theme.colors.input.background};
  color: ${(props) => props.theme.colors.input.text};
  border: 1px solid ${(props) => props.theme.colors.input.border};
  border-radius: 4px;
  ${HiddenCheckbox}:checked + & {
    background: ${(props) => props.theme.colors.highlight};
    border: 1px solid ${(props) => props.theme.colors.highlight};
  }
  ${HiddenCheckbox}:focus + & {
    border: 1px solid ${(props) => props.theme.colors.highlight};
    box-shadow: 0 0 0px 2px ${(props) => props.theme.colors.highlight} !important;
    transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.71, 2.65);
  }
 
  ${StyledMenuItem} & {
    width: 14px;
    height: 14px;
  }
`;
 
const CheckboxContainer = styled.div`
  position: relative;
  display: inline-block;
  top: 1px;
 
  ${StyledMenuItem} > & {
    margin-left: -5px;
    margin-right: 5px;
    margin-bottom: -2px;
  }
`;
 
const Icon = styled.svg`
  fill: none;
  stroke: ${(props) => props.theme.colors.highlightText};
  stroke-width: 2px;
  opacity: 0;
 
  ${HiddenCheckbox}:checked + * > & {
    opacity: 1;
  }
`;
 
export const Checkbox: FC<CheckboxProps> = ({
  id,
  name,
  checked,
  onChange,
  ...props
}) => (
  <CheckboxContainer>
    <HiddenCheckbox
      id={id}
      name={name}
      checked={checked}
      onChange={onChange}
      {...props}
    />
    <StyledCheckbox>
      <Icon viewBox="0 0 24 24">
        <polyline points="20 6 9 17 4 12" />
      </Icon>
    </StyledCheckbox>
  </CheckboxContainer>
);