82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
/**
|
|
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
|
|
*/
|
|
import React, {ChangeEvent, MouseEvent} from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
import {Label} from 'components/label';
|
|
import {theme} from 'components/shared/theme';
|
|
|
|
const {colors, spacing} = theme;
|
|
const Container = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
label {
|
|
margin-left: ${spacing.xxSmall};
|
|
margin-right: ${spacing.xxSmall};
|
|
}
|
|
`;
|
|
const CheckboxContainer = styled.div`
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
outline: none;
|
|
height: 1rem;
|
|
`;
|
|
const Icon = styled.svg`
|
|
fill: none;
|
|
stroke: ${colors.black};
|
|
stroke-width: 2px;
|
|
`;
|
|
const HiddenCheckbox = styled.input.attrs({type: 'checkbox'})`
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
width: 1px;
|
|
`;
|
|
const StyledCheckbox = styled.div<{checked?: boolean}>`
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background: ${({checked}) => (checked ? colors.red : colors.transparent)};
|
|
border-radius: 3px;
|
|
transition: all 150ms;
|
|
outline: none;
|
|
border: 1px solid ${({checked}) => (checked ? 'none' : colors.gray400)};
|
|
|
|
${Icon} {
|
|
visibility: ${({checked}) => (checked ? 'visible' : 'hidden')};
|
|
}
|
|
`;
|
|
const Checkbox = (props: {
|
|
value: string;
|
|
id?: string;
|
|
checked?: boolean;
|
|
onChange: (event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLDivElement>) => void;
|
|
label?: string;
|
|
}): React.JSX.Element => {
|
|
const {checked, onChange, label, id} = props;
|
|
|
|
return (
|
|
<Container>
|
|
<CheckboxContainer>
|
|
<HiddenCheckbox {...props} />
|
|
<StyledCheckbox onClick={onChange} checked={checked}>
|
|
<Icon viewBox="0 0 24 24">
|
|
<polyline points="20 6 9 17 4 12" />
|
|
</Icon>
|
|
</StyledCheckbox>
|
|
</CheckboxContainer>
|
|
{label && <Label htmlFor={id || label} text={label} />}
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default Checkbox;
|