Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
6 contributors

Users who have contributed to this file

@michaeltaranto @markdalgleish @mattsjones @renovate @mengtzu @cm-seekasia
110 lines (104 sloc) 2 KB
import {
createElement,
forwardRef,
AllHTMLAttributes,
ElementType,
} from 'react';
import { useBoxStyles, UseBoxStylesProps } from './useBoxStyles';
import { renderBackgroundProvider } from './BackgroundContext';
export interface BoxProps
extends Omit<UseBoxStylesProps, 'component'>,
Omit<AllHTMLAttributes<HTMLElement>, 'width' | 'height' | 'className'> {
component?: ElementType;
}
const NamedBox = forwardRef<HTMLElement, BoxProps>(
(
{
component = 'div',
padding,
paddingX,
paddingY,
paddingTop,
paddingBottom,
paddingLeft,
paddingRight,
margin,
marginX,
marginY,
marginTop,
marginBottom,
marginLeft,
marginRight,
display,
flexDirection,
flexWrap,
flexShrink,
flexGrow,
alignItems,
justifyContent,
textAlign,
borderRadius,
background,
boxShadow,
transition,
transform,
height,
width,
position,
cursor,
pointerEvents,
overflow,
minWidth,
className,
...restProps
},
ref,
) => {
const boxStyles = useBoxStyles({
component,
padding,
paddingX,
paddingY,
paddingTop,
paddingBottom,
paddingLeft,
paddingRight,
margin,
marginX,
marginY,
marginTop,
marginBottom,
marginLeft,
marginRight,
display,
flexDirection,
flexWrap,
flexShrink,
flexGrow,
alignItems,
justifyContent,
textAlign,
borderRadius,
background,
boxShadow,
transition,
transform,
height,
width,
position,
cursor,
pointerEvents,
overflow,
minWidth,
className,
});
const element = createElement(component, {
className: boxStyles,
...restProps,
ref,
});
return renderBackgroundProvider(background, element);
},
);
NamedBox.displayName = 'Box';
export const Box = NamedBox;
You can’t perform that action at this time.