Blame · Checkbox.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import type react from 'react';
b69ab31	9	import type {ReactProps} from './utils';
b69ab31	10
b69ab31	11	import * as stylex from '@stylexjs/stylex';
b69ab31	12	import {useEffect, useId, useRef} from 'react';
b69ab31	13	import {layout} from './theme/layout';
b69ab31	14	import {spacing} from './theme/tokens.stylex';
b69ab31	15
b69ab31	16	const cssVarFocusWithinBorder = '--checkbox-focus-within-color';
b69ab31	17	const styles = stylex.create({
b69ab31	18	label: {
b69ab31	19	[cssVarFocusWithinBorder]: {
b69ab31	20	default: 'var(--checkbox-border)',
b69ab31	21	':focus-within': 'var(--focus-border)',
b69ab31	22	},
b69ab31	23	cursor: 'pointer',
b69ab31	24	alignItems: 'center',
b69ab31	25	position: 'relative',
b69ab31	26	outline: 'none',
b69ab31	27	userSelect: 'none',
b69ab31	28	},
b69ab31	29	input: {
b69ab31	30	opacity: 0,
b69ab31	31	outline: 'none',
b69ab31	32	appearance: 'none',
b69ab31	33	position: 'absolute',
b69ab31	34	},
b69ab31	35	disabled: {
b69ab31	36	opacity: 0.5,
b69ab31	37	cursor: 'not-allowed',
b69ab31	38	},
b69ab31	39	withChildren: {
b69ab31	40	marginRight: spacing.pad,
b69ab31	41	},
b69ab31	42	checkmark: {
b69ab31	43	background: 'var(--checkbox-background)',
b69ab31	44	borderRadius: '3px',
b69ab31	45	width: '16px',
b69ab31	46	height: '16px',
b69ab31	47	border: '1px solid var(--checkbox-border)',
b69ab31	48	borderColor: `var(${cssVarFocusWithinBorder})`,
b69ab31	49	display: 'inline-block',
b69ab31	50	color: 'var(--checkbox-foreground)',
b69ab31	51	transition: '60ms transform ease-in-out',
b69ab31	52	},
b69ab31	53	});
b69ab31	54
b69ab31	55	function Checkmark({checked}: {checked: boolean}) {
b69ab31	56	return (
b69ab31	57	<svg
b69ab31	58	width="16"
b69ab31	59	height="16"
b69ab31	60	viewBox="0 0 16 16"
b69ab31	61	xmlns="http://www.w3.org/2000/svg"
b69ab31	62	fill={checked ? 'currentColor' : 'transparent'}
b69ab31	63	{...stylex.props(styles.checkmark)}>
b69ab31	64	<path
b69ab31	65	fillRule="evenodd"
b69ab31	66	clipRule="evenodd"
b69ab31	67	d="M14.431 3.323l-8.47 10-.79-.036-3.35-4.77.818-.574 2.978 4.24 8.051-9.506.764.646z"></path>
b69ab31	68	</svg>
b69ab31	69	);
b69ab31	70	}
b69ab31	71
b69ab31	72	function Indeterminate() {
b69ab31	73	return (
b69ab31	74	<svg
b69ab31	75	width="16"
b69ab31	76	height="16"
b69ab31	77	viewBox="0 0 16 16"
b69ab31	78	xmlns="http://www.w3.org/2000/svg"
b69ab31	79	fill={'currentColor'}
b69ab31	80	{...stylex.props(styles.checkmark)}>
b69ab31	81	<rect x="4" y="4" height="8" width="8" rx="2" />
b69ab31	82	</svg>
b69ab31	83	);
b69ab31	84	}
b69ab31	85
b69ab31	86	export function Checkbox({
b69ab31	87	children,
b69ab31	88	checked,
b69ab31	89	onChange,
b69ab31	90	disabled,
b69ab31	91	indeterminate,
b69ab31	92	xstyle,
b69ab31	93	...rest
b69ab31	94	}: {
b69ab31	95	children?: react.ReactNode;
b69ab31	96	checked: boolean;
b69ab31	97	/** "indeterminate" state is neither true nor false, and renders as a box instead of a checkmark.
b69ab31	98	* Usually represents partial selection of children. */
b69ab31	99	indeterminate?: boolean;
b69ab31	100	disabled?: boolean;
b69ab31	101	onChange?: (checked: boolean) => unknown;
b69ab31	102	xstyle?: stylex.StyleXStyles;
b69ab31	103	} & Omit<ReactProps<HTMLInputElement>, 'onChange'>) {
b69ab31	104	const id = useId();
b69ab31	105	const inputRef = useRef<HTMLInputElement>(null);
b69ab31	106	// Indeterminate cannot be set in HTML, use an effect to synchronize
b69ab31	107	useEffect(() => {
b69ab31	108	if (inputRef.current) {
b69ab31	109	inputRef.current.indeterminate = indeterminate === true;
b69ab31	110	}
b69ab31	111	}, [indeterminate]);
b69ab31	112	return (
b69ab31	113	<label
b69ab31	114	htmlFor={id}
b69ab31	115	{...stylex.props(
b69ab31	116	layout.flexRow,
b69ab31	117	styles.label,
b69ab31	118	children != null && styles.withChildren,
b69ab31	119	disabled && styles.disabled,
b69ab31	120	xstyle,
b69ab31	121	)}>
b69ab31	122	<input
b69ab31	123	ref={inputRef}
b69ab31	124	type="checkbox"
b69ab31	125	id={id}
b69ab31	126	checked={checked}
b69ab31	127	onChange={e => !disabled && onChange?.(e.target.checked)}
b69ab31	128	disabled={disabled}
b69ab31	129	{...stylex.props(styles.input)}
b69ab31	130	{...rest}
b69ab31	131	/>
b69ab31	132	{indeterminate === true ? <Indeterminate /> : <Checkmark checked={checked} />}
b69ab31	133	{children}
b69ab31	134	</label>
b69ab31	135	);
b69ab31	136	}