@razorpay/blade
Version:
The Design System that powers Razorpay
253 lines (247 loc) • 9.37 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import './BaseBox/index.js';
import { validBoxAsValues } from './BaseBox/types/propsTypes.js';
import '../../utils/index.js';
import '../../utils/metaAttribute/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/logger/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx } from 'react/jsx-runtime';
import { throwBladeError } from '../../utils/logger/logger.js';
import { isReactNative } from '../../utils/platform/isReactNative.js';
import { BaseBox } from './BaseBox/BaseBox.web.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var validateBackgroundString = function validateBackgroundString(stringBackgroundColorValue) {
if (true) {
if (!stringBackgroundColorValue.startsWith('surface.background') && !stringBackgroundColorValue.startsWith('overlay.') && stringBackgroundColorValue !== 'transparent') {
throwBladeError({
message: "Oops! Currently you can only use `transparent`, `surface.background.*`, and `overlay.*` tokens with backgroundColor property but we received `".concat(stringBackgroundColorValue, "` instead.\n\n Do you have a usecase of using other values? Create an issue on https://github.com/razorpay/blade repo to let us know and we can discuss \u2728"),
moduleName: 'Box'
});
}
}
};
var validateBackgroundProp = function validateBackgroundProp(responsiveBackgroundColor) {
if (true) {
if (responsiveBackgroundColor) {
if (typeof responsiveBackgroundColor === 'string') {
validateBackgroundString(responsiveBackgroundColor);
return;
}
Object.values(responsiveBackgroundColor).forEach(function (backgroundColor) {
if (typeof backgroundColor === 'string') {
validateBackgroundString(backgroundColor);
}
});
}
}
};
/**
* This function is to filter out any unexpected props passed by the user
*/
var makeBoxProps = function makeBoxProps(props) {
return {
// Layout
display: props.display,
overflow: props.overflow,
overflowX: props.overflowX,
overflowY: props.overflowY,
whiteSpace: props.whiteSpace,
height: props.height,
minHeight: props.minHeight,
maxHeight: props.maxHeight,
width: props.width,
minWidth: props.minWidth,
maxWidth: props.maxWidth,
textAlign: props.textAlign,
// Flex
flex: props.flex,
flexWrap: props.flexWrap,
flexDirection: props.flexDirection,
flexGrow: props.flexGrow,
flexShrink: props.flexShrink,
flexBasis: props.flexBasis,
alignItems: props.alignItems,
alignContent: props.alignContent,
alignSelf: props.alignSelf,
justifyItems: props.justifyItems,
justifyContent: props.justifyContent,
justifySelf: props.justifySelf,
placeSelf: props.placeSelf,
placeItems: props.placeItems,
order: props.order,
// Grid
grid: props.grid,
gridColumn: props.gridColumn,
gridRow: props.gridRow,
gridRowStart: props.gridRowStart,
gridRowEnd: props.gridRowEnd,
gridColumnStart: props.gridColumnStart,
gridColumnEnd: props.gridColumnEnd,
gridArea: props.gridArea,
gridAutoFlow: props.gridAutoFlow,
gridAutoRows: props.gridAutoRows,
gridAutoColumns: props.gridAutoColumns,
gridTemplate: props.gridTemplate,
gridTemplateAreas: props.gridTemplateAreas,
gridTemplateColumns: props.gridTemplateColumns,
gridTemplateRows: props.gridTemplateRows,
// Spacing
padding: props.padding,
paddingTop: props.paddingTop,
paddingBottom: props.paddingBottom,
paddingRight: props.paddingRight,
paddingLeft: props.paddingLeft,
paddingX: props.paddingX,
paddingY: props.paddingY,
margin: props.margin,
marginBottom: props.marginBottom,
marginTop: props.marginTop,
marginRight: props.marginRight,
marginLeft: props.marginLeft,
marginX: props.marginX,
marginY: props.marginY,
gap: props.gap,
rowGap: props.rowGap,
columnGap: props.columnGap,
// Position
position: props.position,
zIndex: props.zIndex,
top: props.top,
right: props.right,
bottom: props.bottom,
left: props.left,
// Visual
backgroundColor: props.backgroundColor,
backgroundImage: props.backgroundImage,
backgroundSize: props.backgroundSize,
backgroundPosition: props.backgroundPosition,
backgroundOrigin: props.backgroundOrigin,
backgroundRepeat: props.backgroundRepeat,
elevation: props.elevation,
opacity: props.opacity,
visibility: props.visibility,
// Border
borderWidth: props.borderWidth,
borderColor: props.borderColor,
borderStyle: props.borderStyle,
borderTopWidth: props.borderTopWidth,
borderTopColor: props.borderTopColor,
borderTopStyle: props.borderTopStyle,
borderRightWidth: props.borderRightWidth,
borderRightColor: props.borderRightColor,
borderRightStyle: props.borderRightStyle,
borderBottomWidth: props.borderBottomWidth,
borderBottomColor: props.borderBottomColor,
borderBottomStyle: props.borderBottomStyle,
borderLeftWidth: props.borderLeftWidth,
borderLeftColor: props.borderLeftColor,
borderLeftStyle: props.borderLeftStyle,
borderRadius: props.borderRadius,
borderTopLeftRadius: props.borderTopLeftRadius,
borderTopRightRadius: props.borderTopRightRadius,
borderBottomRightRadius: props.borderBottomRightRadius,
borderBottomLeftRadius: props.borderBottomLeftRadius,
// Polygon Support
transform: props.transform,
transformOrigin: props.transformOrigin,
clipPath: props.clipPath,
// callbacks
onMouseEnter: props.onMouseEnter,
onMouseLeave: props.onMouseLeave,
onMouseOver: props.onMouseOver,
onScroll: props.onScroll,
// Drag and Drop
draggable: props.draggable,
onDragStart: props.onDragStart,
onDragEnd: props.onDragEnd,
onDragEnter: props.onDragEnter,
onDragLeave: props.onDragLeave,
onDragOver: props.onDragOver,
onDrop: props.onDrop,
pointerEvents: props.pointerEvents,
children: props.children,
tabIndex: props.tabIndex,
as: isReactNative() ? undefined : props.as // as is not supported on react-native
};
};
/**
* ## Box
*
* Box is the basic Layout component.
*
*
* Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.
*
* Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.
*
* ----
*
* ### Usage
*
* ```jsx
* <Box display="flex">
* ```
* #### Responsive Props
*
* ```jsx
* <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />
* ```
*
* #### Margin and Padding Shorthands
*
* ```jsx
* <Box padding={["spacing.3", "spacing.10"]} />
* ```
*
* ---
*
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}
*
*/
var _Box = function _Box(props, ref) {
React__default.useEffect(function () {
if (true) {
validateBackgroundProp(props.backgroundColor);
}
}, [props.backgroundColor]);
React__default.useEffect(function () {
if (true) {
if (props.as) {
if (isReactNative()) {
throwBladeError({
message: '`as` prop is not supported on React Native',
moduleName: 'Box'
});
}
if (!validBoxAsValues.includes(props.as)) {
throwBladeError({
message: "Invalid `as` prop value - ".concat(props.as, ". Only ").concat(validBoxAsValues.join(', '), " are valid values"),
moduleName: 'Box'
});
}
}
}
}, [props.as]);
return /*#__PURE__*/jsx(BaseBox
// eslint-disable-next-line @typescript-eslint/no-explicit-any
, _objectSpread(_objectSpread(_objectSpread({
ref: ref,
id: props.id
}, metaAttribute({
name: MetaConstants.Box,
testID: props.testID
})), makeBoxProps(props)), makeAnalyticsAttribute(props)));
};
var Box = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_Box), {
displayName: 'Box',
componentId: 'Box'
});
export { Box, makeBoxProps };
//# sourceMappingURL=Box.js.map