@selfcommunity/react-core
Version:
React Core Components useful for integrating UI Community components (react-ui).
99 lines (97 loc) • 4.06 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSCLocale = exports.withSCLocale = exports.SCLocaleContext = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const SCContextProvider_1 = require("../SCContextProvider");
const locale_1 = require("../../../utils/locale");
const Locale_1 = require("../../../constants/Locale");
const react_intl_1 = require("react-intl");
const utils_1 = require("@selfcommunity/utils");
const Errors_1 = require("../../../constants/Errors");
const use_deep_compare_effect_1 = require("use-deep-compare-effect");
/**
* Creates Global Context
*
:::tip Context can be consumed in one of the following ways:
```jsx
1. <SCLocaleContext.Consumer>{(locale,) => (...)}</SCLocaleContext.Consumer>
```
```jsx
2. const scLocaleContext: SCLocaleContextType = useContext(SCLocaleContext);
```
```jsx
3. const scLocaleContext: SCLocaleContextType = useSCLocale();
````
:::
*/
exports.SCLocaleContext = (0, react_1.createContext)({});
/**
* #### Description:
* This component makes the `intl` available down the React tree.
* @param children
* @return
* ```jsx
* <SCLocaleContext.Provider value={{locale, messages, selectLocale}}>
* ```
*/
function SCLocaleProvider({ children = null }) {
var _a;
const scContext = (0, SCContextProvider_1.useSCContext)();
const initialLocale = ((_a = scContext.settings.locale) === null || _a === void 0 ? void 0 : _a.default) ? scContext.settings.locale.default : Locale_1.DEFAULT_LANGUAGE_UI;
const initial = (0, locale_1.loadLocaleData)(initialLocale, scContext.settings);
const [locale, setLocale] = (0, react_1.useState)(initial.locale);
const [messages, setMessages] = (0, react_1.useState)(initial.messages);
/**
* Update current locale state
* @param _intl
*/
const updateLocale = (_intl) => {
setLocale(_intl.locale);
setMessages(_intl.messages);
};
/**
* Select locale loading data
*/
const selectLocale = (0, react_1.useMemo)(() => (l) => {
const { messages, locale } = (0, locale_1.loadLocaleData)(l, scContext.settings);
updateLocale({ messages, locale });
}, [locale]);
/**
* Update locale and messages if initial conf changes
*/
(0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
var _a;
selectLocale(((_a = scContext.settings.locale) === null || _a === void 0 ? void 0 : _a.default) ? scContext.settings.locale.default : Locale_1.DEFAULT_LANGUAGE_UI);
}, [scContext.settings.locale]);
/**
* handleIntlError
* @param error
*/
const handleIntlError = (error) => {
if (error.code === 'MISSING_TRANSLATION') {
utils_1.Logger.warn(Errors_1.SCOPE_SC_CORE, `Missing translation: ${error.message}`);
return;
}
throw error;
};
return ((0, jsx_runtime_1.jsx)(exports.SCLocaleContext.Provider, Object.assign({ value: { locale, messages, selectLocale } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.IntlProvider, Object.assign({ locale: locale, messages: messages, onError: handleIntlError }, { children: children }), locale) })));
}
exports.default = SCLocaleProvider;
/**
* Export hoc to inject the base theme to components
* @param Component
*/
const withSCLocale = (Component) => (props) => {
const scLocaleContext = (0, react_1.useContext)(exports.SCLocaleContext);
return ((0, jsx_runtime_1.jsx)(react_intl_1.IntlProvider, Object.assign({ locale: scLocaleContext.locale, messages: scLocaleContext.messages }, { children: (0, jsx_runtime_1.jsx)(Component, Object.assign({ setLanguage: scLocaleContext.selectLocale }, props)) })));
};
exports.withSCLocale = withSCLocale;
/**
* Let's only export the `useSCLocale` hook instead of the context.
* We only want to use the hook directly and never the context component.
*/
function useSCLocale() {
return (0, react_1.useContext)(exports.SCLocaleContext);
}
exports.useSCLocale = useSCLocale;