@selfcommunity/react-core
Version:
React Core Components useful for integrating UI Community components (react-ui).
101 lines (100 loc) • 3.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSCContext = exports.SCContext = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const api_services_1 = require("@selfcommunity/api-services");
const use_deep_compare_effect_1 = require("use-deep-compare-effect");
const validator_1 = require("../../../utils/validator");
const useIsComponentMountedRef_1 = tslib_1.__importDefault(require("../../../utils/hooks/useIsComponentMountedRef"));
/**
* Creates Global Context
*
:::tip Context can be consumed in one of the following ways:
```jsx
1. <SCContext.Consumer>{settings => (...)}</SCContext.Consumer>
```
```jsx
2. const scContext: SCContextType = useContext(SCContext);
```
```jsx
3. const scContext: SCContextType = useSCContext();
````
:::
*/
exports.SCContext = (0, react_1.createContext)({});
/**
* This component imports all providers
* @param conf
* @param children
* @return
* ```jsx
* <SCContext.Provider value={{settings}}>
* ```
*/
function SCContextProvider({ conf, children }) {
/**
* Check initial conf and validates settings
* If the conf change update settings
*/
const _settings = (0, react_1.useMemo)(() => {
/**
* Validate initial settings
*/
const { validationResult, settings } = (0, validator_1.validateOptions)(conf, validator_1.validOptions);
if (validationResult.hasErrors()) {
/**
* Exist errors in initial conf
*/
validationResult.emit();
return null;
}
/**
* Emit warnings if exist
*/
validationResult.emitWarnings();
/**
* Set the base path on the http objects
*/
api_services_1.http.setBasePortal(settings.portal);
/**
* Render all Providers
*/
return settings;
}, [conf]);
/**
* Settings
*/
const [settings, setSettings] = (0, react_1.useState)(_settings);
/**
* Export the provider as we need to wrap the entire app with it
* This provider keeps current user logged and session
*/
(0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
if (!isMountedRef.current)
return;
setSettings(_settings);
}, [_settings]);
/**
* Track component initialization
*/
const isMountedRef = (0, useIsComponentMountedRef_1.default)();
/**
* Nesting all necessary providers
* All child components will use help contexts to works
*/
return ((0, jsx_runtime_1.jsx)(exports.SCContext.Provider, Object.assign({ value: { settings } }, { children: settings &&
settings.contextProviders.reduceRight((memo, ContextProvider) => {
return (0, jsx_runtime_1.jsx)(ContextProvider, { children: memo });
}, children) })));
}
exports.default = SCContextProvider;
/**
* Let's only export the `useSCContext` hook instead of the context.
* We only want to use the hook directly and never the context component.
*/
function useSCContext() {
return (0, react_1.useContext)(exports.SCContext);
}
exports.useSCContext = useSCContext;