71 lines
1.9 KiB
JavaScript
71 lines
1.9 KiB
JavaScript
import "./Flex.css";
|
|
|
|
function mapJustifyAlign(value) {
|
|
if (value == null || value === "normal" || value === "stretch") return value;
|
|
if (value === "start") return "flex-start";
|
|
if (value === "end") return "flex-end";
|
|
return value;
|
|
}
|
|
|
|
function gapToStyle(gap) {
|
|
if (gap == null) return undefined;
|
|
if (typeof gap === "number") return `${gap}px`;
|
|
if (Array.isArray(gap)) {
|
|
const [row, col] = gap;
|
|
const a = typeof row === "number" ? `${row}px` : row;
|
|
const b = col != null ? (typeof col === "number" ? `${col}px` : col) : a;
|
|
return `${a} ${b}`;
|
|
}
|
|
return gap;
|
|
}
|
|
|
|
/**
|
|
* Flex container similar to Ant Design `Flex`: vertical, justify, align, gap, wrap.
|
|
*
|
|
* @param {object} props
|
|
* @param {boolean} [props.vertical]
|
|
* @param {boolean | 'wrap' | 'nowrap' | 'wrap-reverse'} [props.wrap]
|
|
* @param {import('react').CSSProperties['justifyContent'] | 'start' | 'end'} [props.justify]
|
|
* @param {import('react').CSSProperties['alignItems'] | 'start' | 'end'} [props.align]
|
|
* @param {number | string | [number | string, number | string]} [props.gap]
|
|
* @param {import('react').CSSProperties['flex']} [props.flex]
|
|
* @param {keyof JSX.IntrinsicElements} [props.component]
|
|
*/
|
|
export function Flex({
|
|
vertical = false,
|
|
wrap = "nowrap",
|
|
justify = "normal",
|
|
align = "normal",
|
|
gap,
|
|
flex: flexProp,
|
|
component: Component = "div",
|
|
className = "",
|
|
style,
|
|
children,
|
|
...rest
|
|
}) {
|
|
const flexWrap =
|
|
wrap === true ? "wrap" : wrap === false ? "nowrap" : wrap;
|
|
|
|
const merged = {
|
|
flexDirection: vertical ? "column" : "row",
|
|
flexWrap,
|
|
justifyContent:
|
|
justify === "normal" ? undefined : mapJustifyAlign(justify),
|
|
alignItems: align === "normal" ? undefined : mapJustifyAlign(align),
|
|
gap: gapToStyle(gap),
|
|
flex: flexProp,
|
|
...style,
|
|
};
|
|
|
|
return (
|
|
<Component
|
|
className={["ta-flex", className].filter(Boolean).join(" ")}
|
|
style={merged}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</Component>
|
|
);
|
|
}
|