@razorpay/blade
Version:
The Design System that powers Razorpay
66 lines (63 loc) • 1.73 kB
JavaScript
import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
/**
* A helper function that returns the exact value for that breakpoint on passing the prop and breakpoint
*
* ## Usage
*
* ### Get base value of prop
*
* ```ts
* getResponsiveValue(props.yourProp, 'base');
* // yourProp="hi" -> "hi"
* // yourProp={{ base: 'hello', m: 'hi' }} -> "hello"
* // yourProp={{ m: 'hi' }} -> undefined
* ```
*
* ### Get value of particular breakpoint
*
*
* ```ts
* getResponsiveValue(props.yourProp, 'm');
* // yourProp="hi" -> undefined
* // yourProp={{ base: 'hello', m: 'hi' }} -> "hi"
* // yourProp={{ m: 'hi' }} -> "hi"
* ```
*/
var getResponsiveValue = function getResponsiveValue(value) {
var breakpoint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'base';
if (value === undefined || value === null) {
return undefined;
}
if (typeof value === 'string' || typeof value === 'number' || Array.isArray(value)) {
/**
* Flat values like string or number should only be added in `base` styles.
*
* E.g. if you pass `display="block"`, it should only put that style in base style and not in media queries
* ```js
* // Output should be just this-
* display: block;
*
* // And not this-
* display: block;
* media (min-width: s) {
* display: block;
* }
*
* media (min-width: m) {
* display: block
* }
* // and more ...
* ```
*/
if (breakpoint === 'base') {
return value;
}
return undefined;
}
if (isEmpty(value)) {
return undefined;
}
return value[breakpoint];
};
export { getResponsiveValue };
//# sourceMappingURL=getResponsiveValue.web.js.map