@razorpay/blade
Version:
The Design System that powers Razorpay
73 lines (70 loc) • 3.63 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import { ThemeProvider } from 'styled-components';
import { useTopNavContext } from './TopNavContext.js';
import '../../tokens/theme/index.js';
import '../BladeProvider/index.js';
import useTheme, { ThemeContext } from '../BladeProvider/useTheme.js';
import { jsx, Fragment } from 'react/jsx-runtime';
import bladeTheme from '../../tokens/theme/bladeTheme.js';
import { BladeProvider } from '../BladeProvider/BladeProvider.web.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; }
/**
* Wraps children with the correct theme when rendered inside TopNav.
*
* TopNav forces a dark theme, but overlay/child components should render
* in the app's original colorScheme. This wrapper centralises that logic.
*
* - Without `shouldOverrideTheme` (default): wraps with BladeProvider using
* the app's original colorScheme (for portalled overlays like Popover, Menu).
* - With `shouldOverrideTheme={false}`: stays in TopNav's dark theme.
* - With `shouldOverrideTheme={true}`: switches to the app's original colorScheme
* via ThemeContext + StyledThemeProvider (for inline theme switches like SearchInput).
*
* Outside TopNav this is a no-op passthrough.
*/
var TopNavOverlayThemeOverride = function TopNavOverlayThemeOverride(_ref) {
var children = _ref.children,
shouldOverrideTheme = _ref.shouldOverrideTheme;
var topNavContext = useTopNavContext();
var _useTheme = useTheme(),
platform = _useTheme.platform;
var isDark = shouldOverrideTheme ? (topNavContext === null || topNavContext === void 0 ? void 0 : topNavContext.colorScheme) === 'dark' : true;
var overrideTheme = React__default.useMemo(function () {
return _objectSpread(_objectSpread({}, bladeTheme), {}, {
colors: isDark ? bladeTheme.colors.onDark : bladeTheme.colors.onLight,
elevation: isDark ? bladeTheme.elevation.onDark : bladeTheme.elevation.onLight,
typography: bladeTheme.typography[platform]
});
}, [isDark, platform]);
if (!topNavContext) {
// eslint-disable-next-line react/jsx-no-useless-fragment
return /*#__PURE__*/jsx(Fragment, {
children: children
});
}
if (shouldOverrideTheme !== undefined) {
// eslint-disable-next-line @typescript-eslint/no-empty-function
var noop = function noop() {};
return /*#__PURE__*/jsx(ThemeContext.Provider, {
value: {
theme: overrideTheme,
colorScheme: shouldOverrideTheme ? topNavContext.colorScheme : 'dark',
setColorScheme: noop,
platform: platform
},
children: /*#__PURE__*/jsx(ThemeProvider, {
theme: overrideTheme,
children: children
})
});
}
return /*#__PURE__*/jsx(BladeProvider, {
themeTokens: bladeTheme,
colorScheme: topNavContext.colorScheme,
children: children
});
};
export { TopNavOverlayThemeOverride };
//# sourceMappingURL=TopNavOverlayThemeOverride.js.map