studiokit-scaffolding-js 5.1.0 → 5.1.1

package/lib/components/HOC/ConnectedModalComponent.d.ts

@@ -1,26 +1,64 @@
-import { ComponentClass, ComponentType } from 'react';
+import React, { ComponentClass, ComponentType } from 'react';
+import { ModalsState } from '../../redux/reducers/modalsReducer';
+import { BaseReduxState } from '../../types';
 import { GuidComponentWrappedProps } from '../HOC/GuidComponent';
 export interface ConnectedModalWrappedProps {
     onEntering: () => void;
     onExited: () => void;
+    isTopOpenFullscreenModal?: boolean;
 }
 export interface ConnectedModalState {
     isModalOpen: boolean;
 }
+export declare type ConnectedModalReduxProps = {
+    modals: ModalsState;
+};
+export declare const configureMapStateToProps: () => (state: BaseReduxState) => ConnectedModalReduxProps;
 /**
  * HOC that provides modal lifecycle event methods to coordinate modal state in redux.
  *
  * NOTE: Meant for testing. Should be wrapped in `guidComponent` to provide the `guid` prop normally.
  *
  * @param {*} WrappedComponent The component to wrap.
+ * @param {*} isFullscreen Are we rendering a fullscreen modal?
  */
-export declare function configureConnectedModalComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps>): ComponentClass<TOwnProps & GuidComponentWrappedProps>;
+export declare function configureConnectedModalComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps>, isFullscreen?: boolean): {
+    new (props: TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps): {
+        componentWillUnmount(): void;
+        onEntering: () => void;
+        onExited: () => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends "isModalOpen">(state: ConnectedModalState | ((prevState: Readonly<ConnectedModalState>, props: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>) => ConnectedModalState | Pick<ConnectedModalState, K> | null) | Pick<ConnectedModalState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<ConnectedModalState>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, nextState: Readonly<ConnectedModalState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, prevState: Readonly<ConnectedModalState>): any;
+        componentDidUpdate?(prevProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, prevState: Readonly<ConnectedModalState>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, nextState: Readonly<ConnectedModalState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps & ConnectedModalReduxProps>, nextState: Readonly<ConnectedModalState>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
 /**
  * HOC that provides modal lifecycle event methods to coordinate modal state in redux.
  *
  * Uses `guidComponent`.
  *
  * @param {*} WrappedComponent The component to wrap.
+ * @param {*} isFullscreen Are we rendering a fullscreen modal?
  */
-export declare function connectedModalComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps>): ComponentClass<TOwnProps>;
+export declare function connectedModalComponent<TOwnProps extends {}>(WrappedComponent: ComponentType<TOwnProps & ConnectedModalWrappedProps & GuidComponentWrappedProps>, isFullscreen?: boolean): ComponentClass<TOwnProps>;
 export default connectedModalComponent;

package/lib/components/HOC/ConnectedModalComponent.js

@@ -46,26 +46,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.connectedModalComponent = exports.configureConnectedModalComponent = void 0;
+exports.connectedModalComponent = exports.configureConnectedModalComponent = exports.configureMapStateToProps = void 0;
+var lodash_1 = require("lodash");
 var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
 var actionCreator_1 = require("../../redux/actionCreator");
 var actions_1 = require("../../redux/actions");
 var GuidComponent_1 = __importDefault(require("../HOC/GuidComponent"));
+var configureMapStateToProps = function () { return function (state) {
+    return {
+        modals: state.modals
+    };
+}; };
+exports.configureMapStateToProps = configureMapStateToProps;
 /**
  * HOC that provides modal lifecycle event methods to coordinate modal state in redux.
  *
  * NOTE: Meant for testing. Should be wrapped in `guidComponent` to provide the `guid` prop normally.
  *
  * @param {*} WrappedComponent The component to wrap.
+ * @param {*} isFullscreen Are we rendering a fullscreen modal?
  */
-function configureConnectedModalComponent(WrappedComponent) {
+function configureConnectedModalComponent(WrappedComponent, isFullscreen) {
+    if (isFullscreen === void 0) { isFullscreen = false; }
     return /** @class */ (function (_super) {
         __extends(ConnectedModalComponent, _super);
         function ConnectedModalComponent(props) {
             var _this = _super.call(this, props) || this;
             _this.onEntering = function () {
-                var guid = _this.props.guid;
-                actionCreator_1.dispatchAction(actions_1.ACTION.MODAL_ENTERING, { guid: guid });
+                var _a;
+                var _b = _this.props, guid = _b.guid, modals = _b.modals;
+                // Store each modal's GUID in redux with a zero-based index to determine the order in which they were opened
+                var maxModal = lodash_1.maxBy(Object.values(modals), function (modal) { return modal.index; });
+                actionCreator_1.dispatchAction(actions_1.ACTION.MODAL_ENTERING, { guid: guid, index: ((_a = maxModal === null || maxModal === void 0 ? void 0 : maxModal.index) !== null && _a !== void 0 ? _a : -1) + 1, isFullscreen: isFullscreen });
                 _this.setState({
                     isModalOpen: true
                 });
@@ -89,7 +102,12 @@ function configureConnectedModalComponent(WrappedComponent) {
             this.onExited();
         };
         ConnectedModalComponent.prototype.render = function () {
-            return react_1.default.createElement(WrappedComponent, __assign({}, this.props, { onEntering: this.onEntering, onExited: this.onExited }));
+            var _a, _b;
+            var _c = this.props, modals = _c.modals, guid = _c.guid;
+            var topOpenFullscreenModal = lodash_1.maxBy(Object.values(modals).filter(function (m) { return m.isFullscreen; }), function (modal) { return modal.index; });
+            var thisModalIndex = (_b = (_a = modals[guid]) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : null;
+            var isTopOpenFullscreenModal = (topOpenFullscreenModal === null || topOpenFullscreenModal === void 0 ? void 0 : topOpenFullscreenModal.index) === thisModalIndex;
+            return (react_1.default.createElement(WrappedComponent, __assign({}, this.props, { onEntering: this.onEntering, onExited: this.onExited, isTopOpenFullscreenModal: isTopOpenFullscreenModal })));
         };
         return ConnectedModalComponent;
     }(react_1.Component));
@@ -101,10 +119,14 @@ exports.configureConnectedModalComponent = configureConnectedModalComponent;
  * Uses `guidComponent`.
  *
  * @param {*} WrappedComponent The component to wrap.
+ * @param {*} isFullscreen Are we rendering a fullscreen modal?
  */
-function connectedModalComponent(WrappedComponent) {
-    var component = configureConnectedModalComponent(WrappedComponent);
-    return GuidComponent_1.default(component);
+function connectedModalComponent(WrappedComponent, isFullscreen) {
+    if (isFullscreen === void 0) { isFullscreen = false; }
+    var component = configureConnectedModalComponent(WrappedComponent, isFullscreen);
+    var mapStateToProps = exports.configureMapStateToProps();
+    // @ts-ignore: could not match inferred type from the `connect` HOC
+    return react_redux_1.connect(mapStateToProps)(GuidComponent_1.default(component));
 }
 exports.connectedModalComponent = connectedModalComponent;
 exports.default = connectedModalComponent;

package/lib/components/HOC/FullscreenModalComponent.js

@@ -122,7 +122,7 @@ function configureFullscreenModalComponent(WrappedComponent) {
             });
         };
         FullscreenModalComponent.prototype.render = function () {
-            var contentLabel = this.props.contentLabel;
+            var _a = this.props, contentLabel = _a.contentLabel, isTopOpenFullscreenModal = _a.isTopOpenFullscreenModal;
             var isOpen = this.state.isOpen;
             return (react_1.default.createElement(react_modal_1.default, { isOpen: isOpen, contentLabel: contentLabel, style: {
                     content: {
@@ -144,7 +144,9 @@ function configureFullscreenModalComponent(WrappedComponent) {
                         bottom: 0,
                         zIndex: 2000
                     }
-                }, shouldCloseOnOverlayClick: false },
+                }, 
+                // hide the rendered portal if this is not the top open fullscreen modal
+                portalClassName: "ReactModalPortal" + (!isTopOpenFullscreenModal ? ' dn' : ''), shouldCloseOnOverlayClick: false },
                 react_1.default.createElement(WrappedComponent, __assign({}, this.props, { closeModal: this.closeModal }))));
         };
         return FullscreenModalComponent;
@@ -167,7 +169,7 @@ exports.configureFullscreenModalComponent = configureFullscreenModalComponent;
  */
 function fullscreenModalComponent(WrappedComponent) {
     var component = configureFullscreenModalComponent(WrappedComponent);
-    return ConnectedModalComponent_1.connectedModalComponent(component);
+    return ConnectedModalComponent_1.connectedModalComponent(component, true);
 }
 exports.fullscreenModalComponent = fullscreenModalComponent;
 exports.default = fullscreenModalComponent;

package/lib/redux/reducers/modalsReducer.d.ts

@@ -1,8 +1,12 @@
 import { Dictionary } from 'lodash';
 import { Action } from 'redux';
-export interface ModalAction extends Action {
+export interface ModalActionValue {
+    index: number;
+    isFullscreen: boolean;
+}
+export interface ModalAction extends Action, ModalActionValue {
     guid: string;
 }
-export interface ModalsState extends Dictionary<boolean> {
+export interface ModalsState extends Dictionary<ModalActionValue> {
 }
 export default function modalsReducer(state: ModalsState | undefined, action: ModalAction): ModalsState;

package/lib/redux/reducers/modalsReducer.js

@@ -29,13 +29,17 @@ function modalsReducer(state, action) {
     var _a;
     if (state === void 0) { state = initialState; }
     var guid;
+    var index;
+    var isFullscreen;
     switch (action.type) {
         case actions_1.ACTION.MODAL_ENTERING: {
             guid = action.guid;
+            index = action.index;
+            isFullscreen = action.isFullscreen;
             if (state[guid]) {
                 return state;
             }
-            var newState = __assign(__assign({}, state), (_a = {}, _a["" + guid] = true, _a));
+            var newState = __assign(__assign({}, state), (_a = {}, _a["" + guid] = { index: index, isFullscreen: isFullscreen }, _a));
             return newState;
         }
         case actions_1.ACTION.MODAL_EXITED: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "5.1.0",
+	"version": "5.1.1",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",