@moxb/stellar-router-react
Version:
Stellar router: React widgets
88 lines (87 loc) • 4.34 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LocationDependentArea = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("react");
var mobx_react_lite_1 = require("mobx-react-lite");
var stellar_router_core_1 = require("@moxb/stellar-router-core");
var rendering_1 = require("./rendering");
var routingProviders_1 = require("./routingProviders");
exports.LocationDependentArea = (0, mobx_react_lite_1.observer)(function (props) {
var locationManager = (0, routingProviders_1.useLocationManager)('location dependent area for ' + props.id);
var tokenManager = (0, routingProviders_1.useTokenManager)();
var id = props.id, part = props.part, useTokenMappings = props.useTokenMappings, rest = (0, tslib_1.__rest)(props, ["id", "part", "useTokenMappings"]);
var debug = rest.debug, navControl = rest.navControl, mountAll = rest.mountAll, stateSpace = rest.stateSpace;
var states = new stellar_router_core_1.LocationDependentStateSpaceHandlerImpl((0, tslib_1.__assign)((0, tslib_1.__assign)({}, rest), { id: "".concat(stateSpace.metaData, " via ").concat(id), locationManager: locationManager, tokenManager: useTokenMappings ? tokenManager : undefined, intercept: true }));
function debugLog() {
var _a;
var messages = [];
for (var _i = 0; _i < arguments.length; _i++) {
messages[_i] = arguments[_i];
}
if (debug) {
(_a = console).log.apply(_a, (0, tslib_1.__spreadArray)(["LDA \"".concat(props.id, "\":")], messages, false));
}
}
(0, react_1.useEffect)(function () {
if (useTokenMappings) {
states.registerTokenMappings();
}
return function () {
if (useTokenMappings) {
states.unregisterTokenMappings();
}
};
}, [stateSpace]);
function renderSubState(subState, invisible) {
var extraProps = {
key: subState ? subState.key : 'missing',
};
if (invisible) {
extraProps.invisible = true;
}
var parentName = 'LocationDependentArea:' + id + ':' + (subState ? subState.menuKey : 'null');
return (0, rendering_1.renderSubStateCore)({
state: subState,
fallback: fallback,
navigationContext: props,
tokenIncrease: subState ? subState.totalPathTokens.length : 1,
checkCondition: false,
extraProps: extraProps,
navControl: {
getParentName: function () { return parentName; },
getAncestorNames: function () { return (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (navControl ? navControl.getAncestorNames() : []), true), [parentName], false); },
isActive: function () {
return (!navControl || navControl.isActive()) && // Is the whole area active?
!!subState && // The fallback is never really considered to be active
states.isSubStateActive(subState);
},
registerStateHooks: function (hooks, componentId) {
return states.registerNavStateHooksForSubState(subState, hooks, componentId);
},
unregisterStateHooks: function (componentId) {
return states.unregisterNavStateHooksForSubState(subState, componentId);
},
},
});
}
debugLog(" *** Rendering with state space \"".concat(props.stateSpace.metaData, "\""));
var fallback = stateSpace.fallback;
var wantedChild = states.getActiveSubState();
debugLog('wantedChild is', wantedChild);
if (mountAll && wantedChild) {
debugLog('Rendering all children at once');
return (React.createElement(React.Fragment, null, states
.getFilteredSubStates({
onlyVisible: false,
onlyLeaves: true,
onlySatisfying: true,
noDisplayOnly: true,
})
.map(function (s, i) { return (React.createElement("div", { key: "".concat(i), style: s !== wantedChild ? { display: 'none' } : s.containerStyle }, renderSubState(s, s !== wantedChild))); })));
}
else {
return renderSubState(wantedChild);
}
});