@ringcentral/juno 1.11.2 → 1.11.3-beta.5620-d9154e6b

package/es6/components/PortalHost/Connectable/index.js

@@ -0,0 +1,3 @@
+export * from './ThrottleScheduler';
+export * from './Connectable';
+export * from './types';

package/es6/components/PortalHost/Connectable/types.js

@@ -0,0 +1 @@
+export var ConnectSymbol = Symbol('connect');

package/es6/components/PortalHost/PortalHost.js

@@ -0,0 +1,35 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React, { useEffect, useRef, useState } from 'react';
+import { ConnectSymbol } from './Connectable';
+import { RcPortalRenderer } from './PortalRenderer';
+import { PortalManagerProvider } from './context';
+var RcPortalHost = function (_a) {
+    var manager = _a.manager;
+    var _b = __read(useState([]), 2), portals = _b[0], setPortals = _b[1];
+    // prevent manager change
+    var managerRef = useRef(manager);
+    useEffect(function () {
+        var disconnectHandler = managerRef.current[ConnectSymbol](function (portalDescriptors) {
+            setPortals(portalDescriptors);
+        });
+        return disconnectHandler;
+    }, []);
+    return (React.createElement(PortalManagerProvider, { value: managerRef.current }, portals.map(function (portal) { return (React.createElement(RcPortalRenderer, { key: portal.id, portalDescriptor: portal })); })));
+};
+RcPortalHost.displayName = 'RcPortalHost';
+export { RcPortalHost };

package/es6/components/PortalHost/PortalManager/PortalManager.js

@@ -0,0 +1,272 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { logInDev } from '../../../foundation';
+import { Connectable, ConnectSymbol, ThrottleScheduler, } from '../Connectable';
+import { PortalStore } from './PortalStore';
+import { UnmountSymbol, } from './types';
+import { createPromise, UniqIdUtil } from './utils';
+var PortalManager = /** @class */ (function (_super) {
+    __extends(PortalManager, _super);
+    function PortalManager(scheduler) {
+        if (scheduler === void 0) { scheduler = new ThrottleScheduler(); }
+        var _this = _super.call(this, scheduler) || this;
+        /**
+         * you can custom your manager by control this
+         */
+        _this.portalStore = new PortalStore();
+        _this._feedbackMap = new Map();
+        _this._uniqIdUtils = new UniqIdUtil();
+        _this.portalStore[ConnectSymbol](function (portals) { return _this.emit(portals); });
+        return _this;
+    }
+    /**
+     * open a component with portal (Dialog, snackbar, modal...)
+     * @param Component the component you want to open
+     * @param options some options (id, props...)
+     */
+    PortalManager.prototype.open = function (Component, options) {
+        var _this = this;
+        if (options === void 0) { options = {}; }
+        var _id = options.id, props = options.props, data = options.data;
+        var id = _id !== null && _id !== void 0 ? _id : this._uniqIdUtils.get();
+        var currPortal = this.portalStore.get(id);
+        // portalWithSameID opened
+        if (currPortal === null || currPortal === void 0 ? void 0 : currPortal.open) {
+            logInDev({
+                component: 'RcPortalHost',
+                message: "open the portal with id('" + id + "') failed, this portal is already open",
+            });
+            return currPortal.portalController;
+        }
+        var portalDescriptor = this.createPortalDescriptor({
+            Component: Component,
+            id: id,
+            props: props,
+            data: data,
+        });
+        // portalWithSameID closed and not unmount
+        if (currPortal) {
+            // when closing (Animating), trigger open again.
+            currPortal.portalController.onClosed.then(function () {
+                _this._openPortal(portalDescriptor);
+            });
+        }
+        // portalWithSameID unmounted
+        else {
+            this._openPortal(portalDescriptor);
+        }
+        return portalDescriptor.portalController;
+    };
+    /**
+     * close all
+     */
+    PortalManager.prototype.closeAll = function () {
+        var _this = this;
+        this.portalStore.batch(function (store) {
+            var e_1, _a;
+            try {
+                for (var _b = __values(_this.portalStore.portals), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var portal = _c.value;
+                    store.addOrUpdate(__assign(__assign({}, portal), { open: false }));
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        });
+    };
+    /**
+     * get portal controller which on top
+     */
+    PortalManager.prototype.getTop = function () {
+        var _a;
+        return (_a = this.portalStore.lastPortal) === null || _a === void 0 ? void 0 : _a.portalController;
+    };
+    /**
+     * get portal controller by id
+     */
+    PortalManager.prototype.getByID = function (id) {
+        var _a;
+        return (_a = this.portalStore.get(id)) === null || _a === void 0 ? void 0 : _a.portalController;
+    };
+    /**
+     * check if it's opened by id. equal 'portalController.isOpened'
+     */
+    PortalManager.prototype.isOpened = function (id) {
+        var portal = this.portalStore.get(id);
+        return Boolean(portal === null || portal === void 0 ? void 0 : portal.open);
+    };
+    /**
+     * check if it's on top by id. equal 'portalController.isTop'
+     */
+    PortalManager.prototype.isTop = function (id) {
+        var _a;
+        return ((_a = this.portalStore.lastPortal) === null || _a === void 0 ? void 0 : _a.id) === id;
+    };
+    /**
+     * for RC component (Modal, component based on modal, snackbar).
+     * invoke this function would set 'open' prop to be false
+     * then unmount component after animation finish
+     *
+     * for non-RC component, you need unmount by self or call unmount directly
+     *
+     * equal 'portalController.close()'
+     */
+    PortalManager.prototype.closeByID = function (id, feedback) {
+        var portal = this.portalStore.get(id);
+        if (!(portal === null || portal === void 0 ? void 0 : portal.open)) {
+            logInDev({
+                component: 'RcPortalHost',
+                message: 'close portal failed, this portal is already closed',
+            });
+            return;
+        }
+        this._feedbackMap.set(portal.id, feedback);
+        this.portalStore.addOrUpdate(__assign(__assign({}, portal), { open: false }));
+    };
+    /**
+     * invoke this to close portal is not recommend, will loss close animation
+     *
+     * this function just help you unmount component after close animation finish
+     *
+     * RC component (Modal, component based on modal, snackbar) would invoke this after close animation finish
+     */
+    PortalManager.prototype[UnmountSymbol] = function (id) {
+        var portal = this.portalStore.get(id);
+        if (!portal) {
+            logInDev({
+                component: 'RcPortalHost',
+                message: 'unmount portal failed, this portal is already unmount',
+            });
+            return;
+        }
+        this.portalStore.delete(portal.id);
+    };
+    /**
+     * update props by id, equal 'portalController.updateProps(newProps)'
+     */
+    PortalManager.prototype.updatePropsByID = function (id, props) {
+        var portal = this.portalStore.get(id);
+        if (!(portal === null || portal === void 0 ? void 0 : portal.open)) {
+            logInDev({
+                component: 'RcPortalHost',
+                message: 'update props failed, this portal is already closed',
+            });
+            return;
+        }
+        this.portalStore.addOrUpdate(__assign(__assign({}, portal), { props: props }));
+    };
+    PortalManager.prototype.onConnected = function () {
+        _super.prototype.onConnected.call(this);
+        // prevent invoke 'open()' fail before PortalHost connect this
+        this.portalStore.forceEmit();
+    };
+    PortalManager.prototype.onDisconnected = function () {
+        _super.prototype.onDisconnected.call(this);
+        // clean all portal after PortalHost disconnect this
+        this.portalStore.clear();
+        this._feedbackMap.clear();
+    };
+    PortalManager.prototype._openPortal = function (portal) {
+        this.portalStore.addOrUpdate(portal);
+    };
+    PortalManager.prototype.createPortalDescriptor = function (_a) {
+        var _this = this;
+        var props = _a.props, data = _a.data, Component = _a.Component, id = _a.id;
+        var _b = __read(createPromise(), 2), onOpened = _b[0], resolveOnOpened = _b[1];
+        var _c = __read(createPromise(), 2), onClosed = _c[0], resolveOnClosed = _c[1];
+        var isTop = function () { return _this.isTop(id); };
+        var isOpened = function () { return _this.isOpened(id); };
+        var portalController = {
+            id: id,
+            onOpened: onOpened,
+            onClosed: onClosed,
+            close: function (feedback) {
+                _this.closeByID(id, feedback);
+            },
+            updateProps: function (newProps) {
+                _this.updatePropsByID(id, newProps);
+            },
+            data: data,
+            get isOpened() {
+                return isOpened();
+            },
+            get isTop() {
+                return isTop();
+            },
+        };
+        var portalDescriptor = {
+            id: id,
+            Component: Component,
+            onMounted: function () {
+                resolveOnOpened();
+            },
+            onUnmounted: function () {
+                var feedback = _this._feedbackMap.get(id);
+                resolveOnClosed(feedback);
+            },
+            props: props,
+            onClose: function (feedback) {
+                _this.closeByID(id, feedback);
+            },
+            open: true,
+            portalController: portalController,
+        };
+        return portalDescriptor;
+    };
+    return PortalManager;
+}(Connectable));
+export { PortalManager };

package/es6/components/PortalHost/PortalManager/PortalStore.js

@@ -0,0 +1,132 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spread = (this && this.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+import { Connectable } from '../Connectable';
+var PortalStore = /** @class */ (function (_super) {
+    __extends(PortalStore, _super);
+    function PortalStore() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._portalMap = new Map();
+        _this._batchMode = false;
+        return _this;
+    }
+    Object.defineProperty(PortalStore.prototype, "size", {
+        get: function () {
+            return this._portalMap.size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PortalStore.prototype, "lastPortal", {
+        get: function () {
+            var e_1, _a;
+            var lastPortal;
+            try {
+                for (var _b = __values(this.portals), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var portal = _c.value;
+                    lastPortal = portal;
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return lastPortal;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PortalStore.prototype, "portals", {
+        get: function () {
+            return this._portalMap.values();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    PortalStore.prototype.addOrUpdate = function (portal) {
+        this._portalMap.set(portal.id, portal);
+        if (!this._batchMode)
+            this._emitChanges();
+    };
+    PortalStore.prototype.delete = function (id) {
+        this._portalMap.delete(id);
+        if (!this._batchMode)
+            this._emitChanges();
+    };
+    PortalStore.prototype.clear = function () {
+        this._portalMap.clear();
+        if (!this._batchMode)
+            this._emitChanges();
+    };
+    PortalStore.prototype.has = function (id) {
+        return this._portalMap.has(id);
+    };
+    PortalStore.prototype.get = function (id) {
+        return this._portalMap.get(id);
+    };
+    PortalStore.prototype.batch = function (handle) {
+        this._batchMode = true;
+        try {
+            handle(this);
+        }
+        finally {
+            this._batchMode = false;
+            this._emitChanges();
+        }
+    };
+    /**
+     * just notify portal host rerender view
+     */
+    PortalStore.prototype.forceEmit = function () {
+        this._emitChanges();
+    };
+    PortalStore.prototype._emitChanges = function () {
+        this.emit(__spread(this.portals));
+    };
+    return PortalStore;
+}(Connectable));
+export { PortalStore };