Blame · Flex.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 {ReactProps} from './utils';
b69ab31	9
b69ab31	10	import * as stylex from '@stylexjs/stylex';
b69ab31	11	import {spacing} from './theme/tokens.stylex';
b69ab31	12
b69ab31	13	type ContainerProps = ReactProps<HTMLDivElement> & {xstyle?: stylex.StyleXStyles};
b69ab31	14
b69ab31	15	const styles = stylex.create({
b69ab31	16	center: {
b69ab31	17	display: 'flex',
b69ab31	18	width: '100%',
b69ab31	19	height: '100%',
b69ab31	20	alignItems: 'center',
b69ab31	21	justifyContent: 'center',
b69ab31	22	},
b69ab31	23	column: {
b69ab31	24	flexDirection: 'column',
b69ab31	25	alignItems: 'flex-start',
b69ab31	26	},
b69ab31	27	row: {
b69ab31	28	flexDirection: 'row',
b69ab31	29	alignItems: 'center',
b69ab31	30	},
b69ab31	31	flex: {
b69ab31	32	display: 'flex',
b69ab31	33	gap: spacing.pad,
b69ab31	34	},
b69ab31	35	spacer: {
b69ab31	36	flexGrow: 1,
b69ab31	37	},
b69ab31	38	alignStart: {
b69ab31	39	alignItems: 'flex-start',
b69ab31	40	},
b69ab31	41	alignCenter: {
b69ab31	42	alignItems: 'center',
b69ab31	43	},
b69ab31	44	alignCustom: alignItems => ({
b69ab31	45	alignItems,
b69ab31	46	}),
b69ab31	47	});
b69ab31	48
b69ab31	49	export type ColumnAlignmentProps =
b69ab31	50	\| {alignStart: true; alignCenter?: undefined \| false; alignItems?: undefined}
b69ab31	51	\| {alignStart?: undefined \| false; alignCenter?: true; alignItems?: undefined}
b69ab31	52	\| {
b69ab31	53	alignStart?: undefined \| false;
b69ab31	54	alignCenter?: undefined \| false;
b69ab31	55	alignItems: 'stretch' \| 'normal' \| 'end';
b69ab31	56	};
b69ab31	57
b69ab31	58	/** Vertical flex layout */
b69ab31	59	export function Column(props: ContainerProps & ColumnAlignmentProps) {
b69ab31	60	const {xstyle, alignStart, alignCenter, alignItems, className, ...rest} = props;
b69ab31	61
b69ab31	62	const {className: stylexClassName, ...otherStylex} = stylex.props(
b69ab31	63	styles.flex,
b69ab31	64	styles.column,
b69ab31	65	xstyle,
b69ab31	66	alignStart && styles.alignStart,
b69ab31	67	alignCenter && styles.alignCenter,
b69ab31	68	alignItems && styles.alignCustom(alignItems),
b69ab31	69	);
b69ab31	70	return (
b69ab31	71	<div
b69ab31	72	{...rest}
b69ab31	73	className={stylexClassName + (className ? ' ' + className : '')}
b69ab31	74	{...otherStylex}
b69ab31	75	/>
b69ab31	76	);
b69ab31	77	}
b69ab31	78
b69ab31	79	/** Horizontal flex layout */
b69ab31	80	export function Row(props: ContainerProps) {
b69ab31	81	const {xstyle, ...rest} = props;
b69ab31	82	return <div {...rest} {...stylex.props(styles.flex, styles.row, xstyle)} />;
b69ab31	83	}
b69ab31	84
b69ab31	85	/** Visually empty flex item with `flex-grow: 1` to insert as much space as possible between siblings. */
b69ab31	86	export function FlexSpacer() {
b69ab31	87	return <div {...stylex.props(styles.spacer)} />;
b69ab31	88	}