@razorpay/blade
Version:
The Design System that powers Razorpay
238 lines (233 loc) • 15.3 kB
JavaScript
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { getResponsiveValue } from './getResponsiveValue.web.js';
import getIn from '../../../utils/lodashButBetter/get.js';
import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
import '../../../tokens/global/index.js';
import '../../../utils/index.js';
import '../../../utils/makeSpace/index.js';
import '../../../utils/makeBorderSize/index.js';
import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
import { isReactNative } from '../../../utils/platform/isReactNative.js';
import { breakpoints } from '../../../tokens/global/breakpoints.js';
import { getMediaQuery } from '../../../utils/getMediaQuery/getMediaQuery.js';
var _excluded = ["base"];
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 isSpacingToken = function isSpacingToken(value) {
return typeof value === 'string' && value.startsWith('spacing.');
};
var getSpacingValue = function getSpacingValue(spacingValue, theme, breakpoint) {
if (isEmpty(spacingValue)) {
return undefined;
}
var responsiveSpacingValue = getResponsiveValue(spacingValue, breakpoint);
if (isEmpty(responsiveSpacingValue)) {
return undefined;
}
if (responsiveSpacingValue === 'auto') {
return responsiveSpacingValue;
}
if (Array.isArray(responsiveSpacingValue)) {
return responsiveSpacingValue.map(function (value) {
return getSpacingValue(value, theme);
}).join(' ');
}
if (isSpacingToken(responsiveSpacingValue)) {
var spacingReturnValue = getIn(theme, responsiveSpacingValue);
return isEmpty(spacingReturnValue) ? makeSpace(spacingReturnValue) : undefined;
}
// pixel or with unit values
return responsiveSpacingValue;
};
var getColorValue = function getColorValue(color, theme, breakpoint) {
var responsiveBackgroundValue = getResponsiveValue(color, breakpoint);
// @ts-expect-error: We always return any from getResponsiveValue so value can't be inferred here
var tokenValue = getIn(theme, "colors.".concat(responsiveBackgroundValue));
return tokenValue !== null && tokenValue !== void 0 ? tokenValue : responsiveBackgroundValue;
};
var getBorderRadiusValue = function getBorderRadiusValue(borderRadius, theme, breakpoint) {
var responsiveBorderRadiusValue = getResponsiveValue(borderRadius, breakpoint);
return isEmpty(responsiveBorderRadiusValue) ? undefined :
// @ts-ignore: intentionally set to any since figuring out types of responsive props is complex
makeBorderSize(getIn(theme, "border.radius.".concat(responsiveBorderRadiusValue)));
};
var getBorderWidthValue = function getBorderWidthValue(borderWidth, theme, breakpoint) {
var responsiveBorderWidthValue = getResponsiveValue(borderWidth, breakpoint);
return isEmpty(responsiveBorderWidthValue) ? undefined :
// @ts-ignore: intentionally set to any since figuring out types of responsive props is complex
makeBorderSize(getIn(theme, "border.width.".concat(responsiveBorderWidthValue)));
};
var getElevationValue = function getElevationValue(elevation, theme, breakpoint) {
var responsiveElevationValue = getResponsiveValue(elevation, breakpoint);
return isEmpty(responsiveElevationValue) ? undefined :
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
// @ts-ignore: intentionally set to any since figuring out types of responsive props is complex
getIn(theme, "elevation.".concat(responsiveElevationValue));
};
var getBorderStyleValue = function getBorderStyleValue(borderStyle, breakpoint, hasBorder
// Using any as return type because borderStyle's type is incompatible with borderBottomStyle. There are ways to fix it but anyway since its internal function. Taking an easy way out
// eslint-disable-next-line @typescript-eslint/no-explicit-any
) {
if (borderStyle) {
return getResponsiveValue(borderStyle, breakpoint);
}
if (hasBorder) {
return 'solid';
}
return undefined;
};
var getAllProps = function getAllProps(props, breakpoint) {
var _props$paddingTop, _props$paddingBottom, _props$paddingRight, _props$paddingLeft, _props$marginBottom, _props$marginTop, _props$marginRight, _props$marginLeft;
var hasBorder = props.borderWidth || props.borderColor;
var hasBorderRight = props.borderRight || props.borderRightColor || props.borderRightWidth;
var hasBorderLeft = props.borderLeft || props.borderLeftColor || props.borderLeftWidth;
var hasBorderTop = props.borderTop || props.borderTopColor || props.borderTopWidth;
var hasBorderBottom = props.borderBottom || props.borderBottomColor || props.borderBottomWidth;
return _objectSpread(_objectSpread(_objectSpread({
display: getResponsiveValue(props.display, breakpoint),
overflow: getResponsiveValue(props.overflow, breakpoint),
overflowX: getResponsiveValue(props.overflowX, breakpoint),
overflowY: getResponsiveValue(props.overflowY, breakpoint),
textAlign: getResponsiveValue(props.textAlign, breakpoint),
whiteSpace: getResponsiveValue(props.whiteSpace, breakpoint),
// Flex
flex: getResponsiveValue(props.flex, breakpoint),
flexWrap: getResponsiveValue(props.flexWrap, breakpoint),
flexDirection: getResponsiveValue(props.flexDirection, breakpoint),
flexGrow: getResponsiveValue(props.flexGrow, breakpoint),
flexShrink: getResponsiveValue(props.flexShrink, breakpoint),
flexBasis: getResponsiveValue(props.flexBasis, breakpoint),
alignItems: getResponsiveValue(props.alignItems, breakpoint),
alignContent: getResponsiveValue(props.alignContent, breakpoint),
alignSelf: getResponsiveValue(props.alignSelf, breakpoint),
justifyItems: getResponsiveValue(props.justifyItems, breakpoint),
justifyContent: getResponsiveValue(props.justifyContent, breakpoint),
justifySelf: getResponsiveValue(props.justifySelf, breakpoint),
placeSelf: getResponsiveValue(props.placeSelf, breakpoint),
placeItems: getResponsiveValue(props.placeItems, breakpoint),
order: getResponsiveValue(props.order, breakpoint),
position: getResponsiveValue(props.position, breakpoint),
zIndex: getResponsiveValue(props.zIndex, breakpoint),
// Grid
grid: getResponsiveValue(props.grid, breakpoint),
gridColumn: getResponsiveValue(props.gridColumn, breakpoint),
gridRow: getResponsiveValue(props.gridRow, breakpoint),
gridRowStart: getResponsiveValue(props.gridRowStart, breakpoint),
gridRowEnd: getResponsiveValue(props.gridRowEnd, breakpoint),
gridArea: getResponsiveValue(props.gridArea, breakpoint),
gridAutoFlow: getResponsiveValue(props.gridAutoFlow, breakpoint),
gridAutoRows: getResponsiveValue(props.gridAutoRows, breakpoint),
gridAutoColumns: getResponsiveValue(props.gridAutoColumns, breakpoint),
gridTemplate: getResponsiveValue(props.gridTemplate, breakpoint),
gridTemplateAreas: getResponsiveValue(props.gridTemplateAreas, breakpoint),
gridTemplateColumns: getResponsiveValue(props.gridTemplateColumns, breakpoint),
gridTemplateRows: getResponsiveValue(props.gridTemplateRows, breakpoint),
// Spacing Props
padding: getSpacingValue(props.padding, props.theme, breakpoint),
paddingTop: getSpacingValue((_props$paddingTop = props.paddingTop) !== null && _props$paddingTop !== void 0 ? _props$paddingTop : props.paddingY, props.theme, breakpoint),
paddingBottom: getSpacingValue((_props$paddingBottom = props.paddingBottom) !== null && _props$paddingBottom !== void 0 ? _props$paddingBottom : props.paddingY, props.theme, breakpoint),
paddingRight: getSpacingValue((_props$paddingRight = props.paddingRight) !== null && _props$paddingRight !== void 0 ? _props$paddingRight : props.paddingX, props.theme, breakpoint),
paddingLeft: getSpacingValue((_props$paddingLeft = props.paddingLeft) !== null && _props$paddingLeft !== void 0 ? _props$paddingLeft : props.paddingX, props.theme, breakpoint),
margin: getSpacingValue(props.margin, props.theme, breakpoint),
marginBottom: getSpacingValue((_props$marginBottom = props.marginBottom) !== null && _props$marginBottom !== void 0 ? _props$marginBottom : props.marginY, props.theme, breakpoint),
marginTop: getSpacingValue((_props$marginTop = props.marginTop) !== null && _props$marginTop !== void 0 ? _props$marginTop : props.marginY, props.theme, breakpoint),
marginRight: getSpacingValue((_props$marginRight = props.marginRight) !== null && _props$marginRight !== void 0 ? _props$marginRight : props.marginX, props.theme, breakpoint),
marginLeft: getSpacingValue((_props$marginLeft = props.marginLeft) !== null && _props$marginLeft !== void 0 ? _props$marginLeft : props.marginX, props.theme, breakpoint),
height: getSpacingValue(props.height, props.theme, breakpoint),
minHeight: getSpacingValue(props.minHeight, props.theme, breakpoint),
maxHeight: getSpacingValue(props.maxHeight, props.theme, breakpoint),
width: getSpacingValue(props.width, props.theme, breakpoint),
minWidth: getSpacingValue(props.minWidth, props.theme, breakpoint),
maxWidth: getSpacingValue(props.maxWidth, props.theme, breakpoint),
gap: getSpacingValue(props.gap, props.theme, breakpoint),
rowGap: getSpacingValue(props.rowGap, props.theme, breakpoint),
columnGap: getSpacingValue(props.columnGap, props.theme, breakpoint),
top: getSpacingValue(props.top, props.theme, breakpoint),
right: getSpacingValue(props.right, props.theme, breakpoint),
bottom: getSpacingValue(props.bottom, props.theme, breakpoint),
left: getSpacingValue(props.left, props.theme, breakpoint),
// Visual props
backgroundColor: getColorValue(props.backgroundColor, props.theme, breakpoint),
backgroundImage: getResponsiveValue(props.backgroundImage, breakpoint),
backgroundSize: getResponsiveValue(props.backgroundSize, breakpoint),
backgroundPosition: getResponsiveValue(props.backgroundPosition, breakpoint),
backgroundOrigin: getResponsiveValue(props.backgroundOrigin, breakpoint),
backgroundRepeat: getResponsiveValue(props.backgroundRepeat, breakpoint),
borderRadius: getBorderRadiusValue(props.borderRadius, props.theme, breakpoint),
lineHeight: getSpacingValue(props.lineHeight, props.theme, breakpoint),
border: getResponsiveValue(props.border, breakpoint),
borderTop: getResponsiveValue(props.borderTop, breakpoint),
borderRight: getResponsiveValue(props.borderRight, breakpoint),
borderBottom: getResponsiveValue(props.borderBottom, breakpoint),
borderLeft: getResponsiveValue(props.borderLeft, breakpoint),
borderWidth: getBorderWidthValue(props.borderWidth, props.theme, breakpoint),
borderColor: getColorValue(props.borderColor, props.theme, breakpoint),
borderTopWidth: getBorderWidthValue(props.borderTopWidth, props.theme, breakpoint),
borderTopColor: getColorValue(props.borderTopColor, props.theme, breakpoint),
borderRightWidth: getBorderWidthValue(props.borderRightWidth, props.theme, breakpoint),
borderRightColor: getColorValue(props.borderRightColor, props.theme, breakpoint),
borderBottomWidth: getBorderWidthValue(props.borderBottomWidth, props.theme, breakpoint),
borderBottomColor: getColorValue(props.borderBottomColor, props.theme, breakpoint),
borderLeftWidth: getBorderWidthValue(props.borderLeftWidth, props.theme, breakpoint),
borderLeftColor: getColorValue(props.borderLeftColor, props.theme, breakpoint),
borderTopLeftRadius: getBorderRadiusValue(props.borderTopLeftRadius, props.theme, breakpoint),
borderTopRightRadius: getBorderRadiusValue(props.borderTopRightRadius, props.theme, breakpoint),
borderBottomRightRadius: getBorderRadiusValue(props.borderBottomRightRadius, props.theme, breakpoint),
borderBottomLeftRadius: getBorderRadiusValue(props.borderBottomLeftRadius, props.theme, breakpoint),
borderStyle: getBorderStyleValue(props.borderStyle, breakpoint, Boolean(hasBorder)),
cursor: getResponsiveValue(props.cursor, breakpoint)
}, !hasBorder && {
borderTopStyle: getBorderStyleValue(props.borderTopStyle, breakpoint, Boolean(hasBorderTop)),
borderBottomStyle: getBorderStyleValue(props.borderBottomStyle, breakpoint, Boolean(hasBorderBottom)),
borderLeftStyle: getBorderStyleValue(props.borderLeftStyle, breakpoint, Boolean(hasBorderLeft)),
borderRightStyle: getBorderStyleValue(props.borderRightStyle, breakpoint, Boolean(hasBorderRight))
}), {}, {
touchAction: getResponsiveValue(props.touchAction, breakpoint),
userSelect: getResponsiveValue(props.userSelect, breakpoint),
pointerEvents: getResponsiveValue(props.pointerEvents),
opacity: getResponsiveValue(props.opacity, breakpoint),
visibility: getResponsiveValue(props.visibility, breakpoint)
}, !isReactNative() && {
boxShadow: getElevationValue(props.elevation, props.theme, breakpoint)
}), {}, {
// Polygon support
transform: getResponsiveValue(props.transform, breakpoint),
transformOrigin: getResponsiveValue(props.transformOrigin, breakpoint),
clipPath: getResponsiveValue(props.clipPath, breakpoint)
});
};
/** We only add breakpoint if at least one of the value is defined */
var shouldAddBreakpoint = function shouldAddBreakpoint(cssProps) {
var firstDefinedValue = Object.values(cssProps).find(function (cssValue) {
return cssValue !== undefined && cssValue !== null;
});
return firstDefinedValue !== undefined;
};
var getAllMediaQueries = function getAllMediaQueries(props) {
if (isReactNative()) {
return {};
}
var base = breakpoints.base,
breakpointsWithoutBase = _objectWithoutProperties(breakpoints, _excluded);
return Object.fromEntries(Object.entries(breakpointsWithoutBase).map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
breakpointKey = _ref2[0],
breakpointValue = _ref2[1];
var cssPropsForCurrentBreakpoint = getAllProps(props, breakpointKey);
if (!shouldAddBreakpoint(cssPropsForCurrentBreakpoint)) {
return [];
}
var mediaQuery = "@media ".concat(getMediaQuery({
min: breakpointValue
}));
return [mediaQuery, cssPropsForCurrentBreakpoint];
}));
};
var getBaseBoxStyles = function getBaseBoxStyles(props) {
return _objectSpread(_objectSpread({}, getAllProps(props)), getAllMediaQueries(props));
};
export { getAllMediaQueries, getAllProps, getBaseBoxStyles, getBorderRadiusValue, getColorValue, getElevationValue, getSpacingValue, shouldAddBreakpoint };
//# sourceMappingURL=baseBoxStyles.js.map