@plurid/plurid-react 0.0.0-28 → 0.0.0-30

package/distribution/index.js

@@ -2100,13 +2100,16 @@ const StyledPluridRoots = styled__default["default"].div`
 `;
 
 const PluridRoots = properties => {
-    const {spaceTransformMatrix: spaceTransformMatrix, spaceAnimatedTransform: spaceAnimatedTransform, spaceTransformTime: spaceTransformTime, stateTree: stateTree} = properties;
+    const {spaceTransformMatrix: spaceTransformMatrix, spaceAnimatedTransform: spaceAnimatedTransform, spaceTransformTime: spaceTransformTime, stateTree: stateTree, stateResolvedLayout: stateResolvedLayout} = properties;
+    const width = "100%";
+    const height = stateResolvedLayout ? window.innerHeight + "px" : 0;
+    const transition = spaceAnimatedTransform ? `transform ${spaceTransformTime}ms ease-in-out` : "initial";
     return React__default["default"].createElement(StyledPluridRoots, {
         style: {
-            width: "100%",
-            height: typeof window !== "undefined" ? window.innerHeight + "px" : "821px",
-            transform: spaceTransformMatrix,
-            transition: spaceAnimatedTransform ? `transform ${spaceTransformTime}ms ease-in-out` : "initial"
+            width: width,
+            height: height,
+            transition: transition,
+            transform: spaceTransformMatrix
         },
         "data-plurid-entity": pluridData.PLURID_ENTITY_ROOTS
     }, stateTree.map((plane => React__default["default"].createElement(ConnectedPluridRoot, {
@@ -2120,7 +2123,8 @@ const mapStateToProperties$g = state => ({
     spaceTransformMatrix: selectors.space.getTransformMatrix(state),
     spaceAnimatedTransform: selectors.space.getAnimatedTransform(state),
     spaceTransformTime: selectors.space.getTransformTime(state),
-    stateTree: selectors.space.getTree(state)
+    stateTree: selectors.space.getTree(state),
+    stateResolvedLayout: selectors.space.getResolvedLayout(state)
 });
 
 const mapDispatchToProperties$g = dispatch => ({});
@@ -5452,9 +5456,37 @@ const PluridScrollTop = styled__default["default"].div`
     width: 0;
 `;
 
+const StyledFadeIn = styled__default["default"].div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: black;
+    pointer-events: none;
+    z-index: 999999;
+`;
+
+const FadeIn = properties => {
+    const {time: time} = properties;
+    const [fadedIn, setFadedIn] = React.useState(false);
+    React.useEffect((() => {
+        if (time > 0) {
+            setTimeout((() => {
+                setFadedIn(true);
+            }), time);
+        }
+    }), []);
+    if (fadedIn || time === 0) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }
+    return React__default["default"].createElement(StyledFadeIn, null);
+};
+
 const PluridRouterBrowser = properties => {
-    const {routes: routes, planes: planes, exterior: exterior, shell: shell, hostname: hostname, scrollToTop: scrollToTop, static: staticContext, view: cleanNavigationView, cleanNavigation: cleanNavigation, notFoundPath: notFoundPathProperty} = properties;
+    const {routes: routes, planes: planes, exterior: exterior, shell: shell, hostname: hostname, scrollToTop: scrollToTop, fadeIn: fadeInProperty, static: staticContext, view: cleanNavigationView, cleanNavigation: cleanNavigation, notFoundPath: notFoundPathProperty} = properties;
     const notFoundPath = notFoundPathProperty || "/not-found";
+    const fadeIn = fadeInProperty !== null && fadeInProperty !== void 0 ? fadeInProperty : 10;
     const pluridPlanes = gatherPluridPlanes(routes, planes);
     const topContainer = React.useRef(null);
     const pluridPlanesRegistrar = React.useRef(new PluridPlanesRegistrar(pluridPlanes, hostname));
@@ -5550,7 +5582,9 @@ const PluridRouterBrowser = properties => {
             PluridRouterShell.displayName = "PluridRouterShell";
         }
     }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(PluridScrollTop, {
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(FadeIn, {
+        time: fadeIn
+    }), React__default["default"].createElement(PluridScrollTop, {
         ref: topContainer
     }), PluridRouterExterior && React__default["default"].createElement(PluridRouterExterior, {
         matchedRoute: matchedRoute
@@ -5560,10 +5594,10 @@ const PluridRouterBrowser = properties => {
 };
 
 const PluridRouterStatic = properties => {
-    const {path: path, directPlane: directPlane, routes: routes, planes: planes, exterior: exterior, shell: shell, protocol: protocolProperty, hostname: hostnameProperty, gateway: gateway, gatewayQuery: gatewayQueryProperty, gatewayEndpoint: gatewayEndpointProperty} = properties;
+    const {path: path, directPlane: directPlane, routes: routes, planes: planes, exterior: exterior, shell: shell, protocol: protocolProperty, hostname: hostnameProperty, gateway: gateway, gatewayQuery: gatewayQueryProperty, gatewayEndpoint: gatewayEndpointProperty, routerProperties: routerProperties} = properties;
     const protocol = protocolProperty || "http";
     const hostname = hostnameProperty || "origin";
-    return React__default["default"].createElement(PluridRouterBrowser, {
+    return React__default["default"].createElement(PluridRouterBrowser, Object.assign({
         routes: routes,
         planes: planes,
         exterior: exterior,
@@ -5574,7 +5608,7 @@ const PluridRouterStatic = properties => {
         },
         protocol: protocol,
         hostname: hostname
-    });
+    }, routerProperties));
 };
 
 class PluridProvider extends React.Component {