@razorpay/blade
Version:
The Design System that powers Razorpay
68 lines (64 loc) • 3.72 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { getBaseBoxStyles } from './baseBoxStyles.js';
import '../../BladeProvider/index.js';
import '../../../utils/logger/index.js';
import { logger } from '../../../utils/logger/logger.js';
import useTheme from '../../BladeProvider/useTheme.js';
var _excluded = ["theme", "colorScheme", "children", "className", "id"];
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 getMemoDependency = function getMemoDependency(props) {
// These are the props that change nothing in the getBaseBoxStyles calculations
var theme = props.theme,
colorScheme = props.colorScheme,
children = props.children,
className = props.className,
id = props.id,
rest = _objectWithoutProperties(props, _excluded);
var dependencyPropString = '';
try {
// I know this looks illegal but Dan approves it - https://twitter.com/dan_abramov/status/1104414272753487872?s=20
// A lot of times passing object to dependency prop isn't efficient and mostly won't work
// Hence we JSON.strinfigy and pass the string as dependency prop. React handles this way better.
dependencyPropString = "".concat(JSON.stringify(rest), "-").concat(theme === null || theme === void 0 ? void 0 : theme.name, "-").concat(colorScheme);
} catch (err) {
if (false) {
logger({
message: "stringification of props failed in BaseBox so falling back to re-calculations on all changes\n\n If you see this warning, please create issue on https://github.com/razorpay/blade as this could degrade runtime styling performance ".concat(err),
moduleName: 'BaseBox',
type: 'warn'
});
}
dependencyPropString = rest;
}
return dependencyPropString;
};
/**
* Uses `React.useMemo` to watch over changing dependencies and only calculate `getBaseBoxStyles` when needed.
*
* This helps us in not doing the CSS calculations on screen size change or randomly when not required
*
* Without memo, the Box style recalculations will run on things like screen size change or randomly during scroll.
* With memo, it only runs once for each box and then runs when any of the prop changes
*
* Checkout: https://github.com/razorpay/blade/pull/1009#discussion_r1113767442 for benchmarks
*/
var useMemoizedStyles = function useMemoizedStyles(boxProps) {
var _useTheme = useTheme(),
colorScheme = _useTheme.colorScheme;
var boxPropsMemoDependency = getMemoDependency(_objectSpread(_objectSpread({}, boxProps), {}, {
colorScheme: colorScheme
}));
var boxPropsCSSObject = React__default.useMemo(function () {
return getBaseBoxStyles(_objectSpread(_objectSpread({}, boxProps), {}, {
theme: boxProps.theme
}));
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[boxPropsMemoDependency]);
return boxPropsCSSObject;
};
export { getMemoDependency, useMemoizedStyles };
//# sourceMappingURL=useMemoizedStyles.web.js.map