zmp-react
Version:
Build full featured iOS & Android apps using ZMP & React
105 lines (98 loc) • 4.42 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
import { classNames } from '../shared/utils';
import { validateSpacingNumber, isValidBoxProps } from '../../common/utils';
/* dts-imports
import { SpacingEnum, VerticalAlignEnum, TextAlignEnum, FlexDirectionEnum, JustifyContentEnum, AlignItemsEnum, AlignContentEnum } from '../../common/components-enum-props';
*/
/* dts-props
id?: string | number;
className?: string;
style?: React.CSSProperties;
noSpace?: boolean;
inline?: boolean;
m?: keyof typeof SpacingEnum;
p?: keyof typeof SpacingEnum;
mt?: keyof typeof SpacingEnum;
ml?: keyof typeof SpacingEnum;
mb?: keyof typeof SpacingEnum;
mr?: keyof typeof SpacingEnum;
pt?: keyof typeof SpacingEnum;
pl?: keyof typeof SpacingEnum;
pb?: keyof typeof SpacingEnum;
pr?: keyof typeof SpacingEnum;
mx?: keyof typeof SpacingEnum;
my?: keyof typeof SpacingEnum;
px?: keyof typeof SpacingEnum;
py?:keyof typeof SpacingEnum;
width?: number;
height?: number;
verticalAlign?: keyof typeof VerticalAlignEnum;
textAlign?: keyof typeof TextAlignEnum;
flex?: boolean;
flexDirection?: keyof typeof FlexDirectionEnum;
flexWrap?: boolean;
justifyContent?: keyof typeof JustifyContentEnum;
alignItems?: keyof typeof AlignItemsEnum;
alignContent?: keyof typeof AlignContentEnum;
ref?: React.MutableRefObject<{el: HTMLElement | null}>;
CHILDREN_PROP
*/
var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
var _classNames;
var id = _ref.id,
children = _ref.children,
className = _ref.className,
style = _ref.style,
m = _ref.m,
p = _ref.p,
mt = _ref.mt,
ml = _ref.ml,
mb = _ref.mb,
mr = _ref.mr,
mx = _ref.mx,
my = _ref.my,
pt = _ref.pt,
pl = _ref.pl,
pb = _ref.pb,
pr = _ref.pr,
px = _ref.px,
py = _ref.py,
noSpace = _ref.noSpace,
inline = _ref.inline,
width = _ref.width,
height = _ref.height,
verticalAlign = _ref.verticalAlign,
textAlign = _ref.textAlign,
flex = _ref.flex,
flexDirection = _ref.flexDirection,
flexWrap = _ref.flexWrap,
justifyContent = _ref.justifyContent,
alignItems = _ref.alignItems,
alignContent = _ref.alignContent;
var elRef = useRef(null);
useImperativeHandle(ref, function () {
return {
el: elRef.current
};
});
var classes = classNames('box', (_classNames = {
'box-no-space': noSpace,
'box-inline': inline
}, _classNames["box-m-" + m] = validateSpacingNumber(m), _classNames["box-mt-" + mt] = validateSpacingNumber(mt), _classNames["box-ml-" + ml] = validateSpacingNumber(ml), _classNames["box-mb-" + mb] = validateSpacingNumber(mb), _classNames["box-mr-" + mr] = validateSpacingNumber(mr), _classNames["box-mx-" + mx] = validateSpacingNumber(mx), _classNames["box-my-" + my] = validateSpacingNumber(my), _classNames["box-p-" + p] = validateSpacingNumber(p), _classNames["box-pt-" + pt] = validateSpacingNumber(pt), _classNames["box-pl-" + pl] = validateSpacingNumber(pl), _classNames["box-pb-" + pb] = validateSpacingNumber(pb), _classNames["box-pr-" + pr] = validateSpacingNumber(pr), _classNames["box-px-" + px] = validateSpacingNumber(px), _classNames["box-py-" + py] = validateSpacingNumber(py), _classNames['box-flex'] = flex, _classNames["box-flex-" + flexDirection] = isValidBoxProps(flexDirection, 'flexDirection'), _classNames["box-vertical-align-" + verticalAlign] = isValidBoxProps(verticalAlign, 'verticalAlign'), _classNames["box-text-align-" + textAlign] = isValidBoxProps(textAlign, 'textAlign'), _classNames['box-flex-wrap'] = flexWrap === true, _classNames['box-flex-nowrap'] = flexWrap === false, _classNames["box-justify-" + justifyContent] = isValidBoxProps(justifyContent, 'justifyContent'), _classNames["box-align-items-" + alignItems] = isValidBoxProps(alignItems, 'alignItems'), _classNames["box-align-content-" + alignContent] = isValidBoxProps(alignContent, 'alignContent'), _classNames), className);
var boxStyle = _extends({}, style);
if (width) {
boxStyle.width = width;
}
if (height) {
boxStyle.height = height;
}
return /*#__PURE__*/React.createElement("div", {
ref: elRef,
id: id,
style: boxStyle,
className: classes
}, children);
});
Box.displayName = 'zmp-box';
export default Box;