Blame · Radio.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
b69ab31	10	import * as stylex from '@stylexjs/stylex';
b69ab31	11	import {useId} from 'react';
b69ab31	12	import {Column} from './Flex';
b69ab31	13	import {Tooltip} from './Tooltip';
b69ab31	14	import {layout} from './theme/layout';
b69ab31	15	import {spacing} from './theme/tokens.stylex';
b69ab31	16
b69ab31	17	// stylex doesn't support :checked and :before simultaneously very well
b69ab31	18	import './Radio.css';
b69ab31	19
b69ab31	20	const styles = stylex.create({
b69ab31	21	group: {
b69ab31	22	appearance: 'none',
b69ab31	23	border: 'none',
b69ab31	24	boxSizing: 'border-box',
b69ab31	25	alignItems: 'flex-start',
b69ab31	26	marginInline: 0,
b69ab31	27	marginBlock: spacing.pad,
b69ab31	28	padding: 0,
b69ab31	29	},
b69ab31	30	label: {
b69ab31	31	cursor: 'pointer',
b69ab31	32	},
b69ab31	33	horizontal: {
b69ab31	34	flexDirection: 'row',
b69ab31	35	flexWrap: 'wrap',
b69ab31	36	},
b69ab31	37	disabled: {
b69ab31	38	opacity: 0.5,
b69ab31	39	cursor: 'not-allowed',
b69ab31	40	},
b69ab31	41	});
b69ab31	42
b69ab31	43	export function RadioGroup<T extends string>({
b69ab31	44	title,
b69ab31	45	choices,
b69ab31	46	current,
b69ab31	47	onChange,
b69ab31	48	horizontal,
b69ab31	49	}: {
b69ab31	50	title?: string;
b69ab31	51	choices: Array<{value: T; title: react.ReactNode; tooltip?: string; disabled?: boolean}>;
b69ab31	52	current: T;
b69ab31	53	onChange: (t: T) => unknown;
b69ab31	54	horizontal?: boolean;
b69ab31	55	}) {
b69ab31	56	const inner = (
b69ab31	57	<fieldset
b69ab31	58	{...stylex.props(layout.flexCol, styles.group, horizontal === true && styles.horizontal)}>
b69ab31	59	{choices.map(({value, title, tooltip, disabled}) => (
b69ab31	60	<Radio
b69ab31	61	key={value}
b69ab31	62	value={value}
b69ab31	63	title={title}
b69ab31	64	tooltip={tooltip}
b69ab31	65	disabled={disabled}
b69ab31	66	checked={current === value}
b69ab31	67	onChange={() => onChange(value)}
b69ab31	68	/>
b69ab31	69	))}
b69ab31	70	</fieldset>
b69ab31	71	);
b69ab31	72	return title == null ? (
b69ab31	73	inner
b69ab31	74	) : (
b69ab31	75	<Column alignStart>
b69ab31	76	<strong>{title}</strong>
b69ab31	77	{inner}
b69ab31	78	</Column>
b69ab31	79	);
b69ab31	80	}
b69ab31	81
b69ab31	82	function Radio({
b69ab31	83	title,
b69ab31	84	value,
b69ab31	85	tooltip,
b69ab31	86	checked,
b69ab31	87	onChange,
b69ab31	88	disabled,
b69ab31	89	}: {
b69ab31	90	title: react.ReactNode;
b69ab31	91	value: string;
b69ab31	92	tooltip?: string;
b69ab31	93	checked: boolean;
b69ab31	94	onChange: () => unknown;
b69ab31	95	disabled?: boolean;
b69ab31	96	}) {
b69ab31	97	const id = useId();
b69ab31	98	const inner = (
b69ab31	99	<label
b69ab31	100	htmlFor={id}
b69ab31	101	{...stylex.props(layout.flexRow, styles.label, disabled && styles.disabled)}>
b69ab31	102	<input
b69ab31	103	type="radio"
b69ab31	104	id={id}
b69ab31	105	name={value}
b69ab31	106	value={value}
b69ab31	107	checked={checked}
b69ab31	108	onChange={onChange}
b69ab31	109	className="isl-radio"
b69ab31	110	disabled={disabled}
b69ab31	111	/>
b69ab31	112	{title}
b69ab31	113	</label>
b69ab31	114	);
b69ab31	115	return tooltip ? <Tooltip title={tooltip}>{inner}</Tooltip> : inner;
b69ab31	116	}