David Baker
2698ad422e
* Move shared components to a packages/ directory so they can be publish more sensibly * Iterate towards split out shared-components module * Move shared component source into src/ subdir * Fix up imports * Include shared components in babel-ing (again) * Remove now unused dependencies * Update import in storybook preview * ...except of course they aren't unused if we import the shared components by source * Ignore shared components deps * Add shared-components to i18n paths and upgrade web-i18n to version that supports doing so * Move storybook stuff to shared-components * Seems we don't need this anymore... * Remove unused deps and remove storybook plugin from eslint * Presumably working-directory is only valid on run steps * Ignore dep & run prettier * Prettier on knips.ts * Hopefully run in right dir * Remember how to software write * Okay... how about THIS way? * Oh right, they were git ignored. Sigh. * Add concurrently * Ignore in knip * Better? * Paaaaaaaackageeeeeeees * More packages * Move playwright snapshots * Still need a custom snapshots dir * Add eslint back * Oh, now knip sees them * Fix another import * Don't lint shared-components with everything else Okay, eslint & tsconfig are tied too closely for this to work and running tsc on the shared components will need its deps installing * Maybe lint shared components please? * Not quite * Remove storybook again Re-check if it does work without it * Remove storybook eslint plugin as we're not linting storybook here anymore * Remove this too * We do need it here though
79 lines
1.7 KiB
TypeScript
79 lines
1.7 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2023 The Matrix.org Foundation C.I.C.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import classNames from "classnames";
|
|
import React, { type JSX, useMemo } from "react";
|
|
|
|
import styles from "./Box.module.css";
|
|
|
|
type BoxProps = {
|
|
/**
|
|
* The type of the HTML element
|
|
* @default div
|
|
*/
|
|
as?: string;
|
|
/**
|
|
* The CSS class name.
|
|
*/
|
|
className?: string;
|
|
/**
|
|
* the on click event callback
|
|
*/
|
|
onClick?: (e: React.MouseEvent) => void;
|
|
/**
|
|
* The flex space to use
|
|
* @default null
|
|
*/
|
|
flex?: string | null;
|
|
/**
|
|
* The flex shrink factor
|
|
* @default null
|
|
*/
|
|
shrink?: string | null;
|
|
/**
|
|
* The flex grow factor
|
|
* @default null
|
|
*/
|
|
grow?: string | null;
|
|
};
|
|
|
|
/**
|
|
* A flex child helper
|
|
*/
|
|
export function Box({
|
|
as = "div",
|
|
flex = null,
|
|
shrink = null,
|
|
grow = null,
|
|
className,
|
|
children,
|
|
...props
|
|
}: React.PropsWithChildren<BoxProps>): JSX.Element {
|
|
const style = useMemo(() => {
|
|
const style: Record<string, any> = {};
|
|
if (flex) style["--mx-box-flex"] = flex;
|
|
if (shrink) style["--mx-box-shrink"] = shrink;
|
|
if (grow) style["--mx-box-grow"] = grow;
|
|
return style;
|
|
}, [flex, grow, shrink]);
|
|
|
|
return React.createElement(
|
|
as,
|
|
{
|
|
...props,
|
|
className: classNames(className, {
|
|
[styles["box-flex"]]: !!flex,
|
|
[styles["box-shrink"]]: !!shrink,
|
|
[styles["box-grow"]]: !!grow,
|
|
}),
|
|
style,
|
|
},
|
|
children,
|
|
);
|
|
}
|