94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
import React, { forwardRef, ForwardedRef, ElementType, ComponentPropsWithoutRef } from 'react';
|
|
|
|
type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
|
|
|
|
interface BoxProps<T extends ElementType> {
|
|
as?: T;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
center?: boolean;
|
|
fullWidth?: boolean;
|
|
fullHeight?: boolean;
|
|
m?: Spacing;
|
|
mt?: Spacing;
|
|
mb?: Spacing;
|
|
ml?: Spacing;
|
|
mr?: Spacing;
|
|
mx?: Spacing | 'auto';
|
|
my?: Spacing;
|
|
p?: Spacing;
|
|
pt?: Spacing;
|
|
pb?: Spacing;
|
|
pl?: Spacing;
|
|
pr?: Spacing;
|
|
px?: Spacing;
|
|
py?: Spacing;
|
|
display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
|
|
position?: 'relative' | 'absolute' | 'fixed' | 'sticky';
|
|
overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
|
|
maxWidth?: string;
|
|
}
|
|
|
|
export const Box = forwardRef(<T extends ElementType = 'div'>(
|
|
{
|
|
as,
|
|
children,
|
|
className = '',
|
|
center = false,
|
|
fullWidth = false,
|
|
fullHeight = false,
|
|
m, mt, mb, ml, mr, mx, my,
|
|
p, pt, pb, pl, pr, px, py,
|
|
display,
|
|
position,
|
|
overflow,
|
|
maxWidth,
|
|
...props
|
|
}: BoxProps<T> & ComponentPropsWithoutRef<T>,
|
|
ref: ForwardedRef<any>
|
|
) => {
|
|
const Tag = (as as any) || 'div';
|
|
|
|
const spacingMap: Record<string | number, string> = {
|
|
0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
|
|
5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
|
|
16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
|
|
48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96',
|
|
'auto': 'auto'
|
|
};
|
|
|
|
const classes = [
|
|
center ? 'flex items-center justify-center' : '',
|
|
fullWidth ? 'w-full' : '',
|
|
fullHeight ? 'h-full' : '',
|
|
m !== undefined ? `m-${spacingMap[m]}` : '',
|
|
mt !== undefined ? `mt-${spacingMap[mt]}` : '',
|
|
mb !== undefined ? `mb-${spacingMap[mb]}` : '',
|
|
ml !== undefined ? `ml-${spacingMap[ml]}` : '',
|
|
mr !== undefined ? `mr-${spacingMap[mr]}` : '',
|
|
mx !== undefined ? `mx-${spacingMap[mx]}` : '',
|
|
my !== undefined ? `my-${spacingMap[my]}` : '',
|
|
p !== undefined ? `p-${spacingMap[p]}` : '',
|
|
pt !== undefined ? `pt-${spacingMap[pt]}` : '',
|
|
pb !== undefined ? `pb-${spacingMap[pb]}` : '',
|
|
pl !== undefined ? `pl-${spacingMap[pl]}` : '',
|
|
pr !== undefined ? `pr-${spacingMap[pr]}` : '',
|
|
px !== undefined ? `px-${spacingMap[px]}` : '',
|
|
py !== undefined ? `py-${spacingMap[py]}` : '',
|
|
display ? display : '',
|
|
position ? position : '',
|
|
overflow ? `overflow-${overflow}` : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
const style = maxWidth ? { maxWidth, ...((props as any).style || {}) } : (props as any).style;
|
|
|
|
return (
|
|
<Tag ref={ref} className={classes} {...props} style={style}>
|
|
{children}
|
|
</Tag>
|
|
);
|
|
});
|
|
|
|
Box.displayName = 'Box';
|