60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import {
|
|
Checkbox as BlueprintCheckbox,
|
|
ICheckboxProps,
|
|
} from "@blueprintjs/core";
|
|
import {
|
|
IntentColors,
|
|
Intent,
|
|
getBorderCSSShorthand,
|
|
} from "constants/DefaultTheme";
|
|
|
|
export type CheckboxProps = ICheckboxProps & {
|
|
intent: Intent;
|
|
align: "left" | "right";
|
|
input?: {
|
|
onChange?: (value: boolean) => void;
|
|
value?: boolean;
|
|
checked?: boolean;
|
|
};
|
|
label: string;
|
|
};
|
|
|
|
export const StyledCheckbox = styled(BlueprintCheckbox)<CheckboxProps>`
|
|
&&&& {
|
|
span.bp3-control-indicator {
|
|
outline: none;
|
|
box-shadow: none;
|
|
border-radius: ${(props) => props.theme.radii[1]}px;
|
|
border: ${(props) => getBorderCSSShorthand(props.theme.borders[3])};
|
|
height: ${(props) => props.theme.fontSizes[5]}px;
|
|
width: ${(props) => props.theme.fontSizes[5]}px;
|
|
}
|
|
input:checked ~ span.bp3-control-indicator {
|
|
background: ${(props) => IntentColors[props.intent]};
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const Checkbox = (props: CheckboxProps) => {
|
|
const handleChange = (e: any) => {
|
|
props.input &&
|
|
props.input.onChange &&
|
|
props.input.onChange(e.target.checked);
|
|
};
|
|
return (
|
|
<StyledCheckbox
|
|
{...props}
|
|
alignIndicator={props.align}
|
|
onChange={handleChange}
|
|
checked={props.input ? !!props.input.checked : false}
|
|
label={props.label}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default Checkbox;
|