@scaleflex/widget-core 0.0.1

package/lib/Plugin.js

@@ -0,0 +1,298 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import findDOMElement from '@scaleflex/widget-utils/lib/findDOMElement';
+import Providers from './Providers';
+
+/**
+ * Defer a frequent call to the microtask queue.
+ */
+function debounce(fn) {
+  var calling = null;
+  var latestArgs = null;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    latestArgs = args;
+    if (!calling) {
+      calling = Promise.resolve().then(function () {
+        calling = null;
+        // At this point `args` may be different from the most
+        // recent state, if multiple calls happened since this task
+        // was queued. So we use the `latestArgs`, which definitely
+        // is the most recent call.
+        return fn.apply(void 0, _toConsumableArray(latestArgs));
+      });
+    }
+    return calling;
+  };
+}
+
+/**
+ * Boilerplate that all Plugins share - and should not be used
+ * directly. It also shows which methods final plugins should implement/override,
+ * this deciding on structure.
+ *
+ * @param {object} main Filerobot core object
+ * @param {object} object with plugin options
+ * @returns {Array|string} files or success/fail message
+ */
+var Plugin = /*#__PURE__*/function () {
+  function Plugin(filerobot) {
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, Plugin);
+    this.filerobot = filerobot;
+    this.opts = opts || {};
+    this.store = filerobot.store;
+    this.update = this.update.bind(this);
+    this.mount = this.mount.bind(this);
+    this.install = this.install.bind(this);
+    this.uninstall = this.uninstall.bind(this);
+    this.getGlobalState = this.getGlobalState.bind(this);
+    this.getPluginReducer = this.getPluginReducer.bind(this);
+    this.getPluginCommonState = this.getPluginCommonState.bind(this);
+    this.setPluginCommonState = this.setPluginCommonState.bind(this);
+    this.dispatch = this.dispatch.bind(this);
+    this.checkPluginExistence = this.checkPluginExistence.bind(this);
+    this.checkPluginTypeExistence = this.checkPluginTypeExistence.bind(this);
+    this.info = this.filerobot.info;
+    this.hideInfo = this.filerobot.hideInfo;
+    this.log = this.filerobot.log;
+  }
+
+  /**
+   * Returns current state of whole redux's store, uses the same one of scaleflexWidget's core class,
+   * for easier access from the extended plugin class only.
+   *
+   * @returns {object}
+   */
+  return _createClass(Plugin, [{
+    key: "getGlobalState",
+    value: function getGlobalState() {
+      return this.filerobot.getGlobalState();
+    }
+
+    /**
+     * returns the plugin's common state/slice from the redux's store
+     * @param {string} sliceName - the slice's name (property) to be accessed from the redux's store state.
+     * @returns {Object}
+     */
+  }, {
+    key: "getPluginCommonState",
+    value: function getPluginCommonState() {
+      var pluginCommonState = this.filerobot.getGlobalState()[this.id];
+      if (!pluginCommonState && this.filerobot.opts.dev && !this.noStateWarned) {
+        console.warn("Note, No state found in redux's store with this plugin's id: ".concat(this.id, "..."));
+        this.noStateWarned = true;
+      }
+      return pluginCommonState || {};
+    }
+
+    /**
+     * To be overriden from the plugin itself with the common state/slice of the plugin getting dispatched to.
+     * @param {string} update - object contains the updates.
+     * @returns {Object}
+     */
+  }, {
+    key: "setPluginCommonState",
+    value: function setPluginCommonState(update) {}
+
+    /**
+     * Same dispatch as core's one but wrapping it in-case of future changes/logs...etc.
+     *
+     * @param {Function/Object} actionCreator
+     */
+  }, {
+    key: "dispatch",
+    value: function dispatch(actionCreator) {
+      return this.filerobot.dispatch(actionCreator);
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions() {
+      var _this$opts$config, _newOpts$config, _this$opts$config2, _newOpts$config2;
+      var newOpts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      this.opts = _objectSpread(_objectSpread(_objectSpread({}, this.opts), newOpts), {}, {
+        config: this.opts.config || newOpts.config ? _objectSpread(_objectSpread(_objectSpread({}, this.opts.config), newOpts.config), {}, {
+          tagging: _objectSpread(_objectSpread({}, (_this$opts$config = this.opts.config) === null || _this$opts$config === void 0 ? void 0 : _this$opts$config.tagging), (_newOpts$config = newOpts.config) === null || _newOpts$config === void 0 ? void 0 : _newOpts$config.tagging),
+          video: _objectSpread(_objectSpread({}, (_this$opts$config2 = this.opts.config) === null || _this$opts$config2 === void 0 ? void 0 : _this$opts$config2.video), (_newOpts$config2 = newOpts.config) === null || _newOpts$config2 === void 0 ? void 0 : _newOpts$config2.video)
+        }) : undefined
+      });
+      if (typeof this.i18nInit === 'function') {
+        this.i18nInit();
+      }
+
+      // Already the opts object of the plugin is updated, so we need only to emit a new object's reference
+      // and handle rerendering in the plugins' providers so that it causes rerender.
+      this.filerobot.emit('opts-updated', {
+        filerobot: this.filerobot,
+        plugins: this.filerobot.plugins,
+        newOpts: newOpts
+      });
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      if (typeof this.el === 'undefined') {
+        return;
+      }
+      if (this._updateUI) {
+        this._updateUI();
+      }
+    }
+
+    // Called after every state update, after everything's mounted. Debounced.
+  }, {
+    key: "afterUpdate",
+    value: function afterUpdate() {}
+
+    /**
+     * Called when plugin is mounted, whether in DOM or into another plugin.
+     * Needed because sometimes plugins are mounted separately/after `install`,
+     * so this.el and this.parent might not be available in `install`.
+     */
+  }, {
+    key: "onMount",
+    value: function onMount() {}
+
+    /**
+     * Check if supplied `target` is a DOM element or an `object`.
+     * If it’s an object — target is a plugin, and we search `plugins`
+     * for a plugin with same name and return its target.
+     *
+     * @param {string|object} target
+     *
+     */
+  }, {
+    key: "mount",
+    value: function mount(target, plugin) {
+      var _this = this;
+      var callerPluginName = plugin.id;
+      var targetElement = findDOMElement(target);
+      if (targetElement) {
+        this.root = createRoot(targetElement);
+        this.isTargetDomEl = true;
+        // API for plugins that require a synchronous rerender.
+        this.rerender = function () {
+          // plugin could be removed, but this.rerender is debounced below,
+          // so it could still be called even after filerobot.removePlugin or filerobot.close
+          // hence the check
+          if (!_this.filerobot.getPlugin(_this.id)) return;
+          var onUiLoad = function onUiLoad() {
+            _this.el = targetElement.lastElementChild;
+            _this.afterUpdate();
+          };
+          _this.root.render(/*#__PURE__*/createElement(Providers, {
+            filerobot: _this.filerobot,
+            onUiLoad: onUiLoad
+          }, _this.render()));
+        };
+        this._updateUI = debounce(this.rerender);
+        this.filerobot.log("Installing ".concat(callerPluginName, " to a DOM element '").concat(target, "'"));
+
+        // clear everything inside the target container
+        if (this.opts.replaceTargetContent) {
+          targetElement.innerHTML = '';
+        }
+        var onUiLoad = function onUiLoad() {
+          _this.el = targetElement.lastElementChild;
+          _this.onMount();
+        };
+        this.root.render(/*#__PURE__*/createElement(Providers, {
+          filerobot: this.filerobot,
+          onUiLoad: onUiLoad
+        }, this.render()));
+        return;
+      }
+      var targetPlugin;
+      if (_typeof(target) === 'object' && target instanceof Plugin) {
+        // Targeting a plugin *instance*
+        targetPlugin = target;
+      } else if (typeof target === 'function') {
+        // Targeting a plugin type
+        var Target = target;
+        // Find the target plugin instance.
+        this.filerobot.iteratePlugins(function (plugin) {
+          if (plugin instanceof Target) {
+            targetPlugin = plugin;
+            return false;
+          }
+        });
+      }
+      if (targetPlugin) {
+        this.filerobot.log("Installing ".concat(callerPluginName, " to ").concat(targetPlugin.id));
+        this.parent = targetPlugin;
+        this.el = targetPlugin.addTarget(plugin);
+        this.onMount();
+        return this.el;
+      }
+      this.filerobot.log("Not installing ".concat(callerPluginName));
+      var message = "Invalid target option given to ".concat(callerPluginName, ".");
+      if (typeof target === 'function') {
+        message += ' The given target is not a Plugin class. ' + 'Please check that you\'re not specifying a React Component instead of a plugin. ' + 'If you are using @scaleflex/widget-* packages directly, make sure you have only 1 version of @scaleflex/widget-core installed: ' + 'run `npm ls @scaleflex/widget-core` on the command line and verify that all the versions match and are deduped correctly.';
+      } else {
+        message += 'If you meant to target an HTML element, please make sure that the element exists. ' + 'Check that the <script> tag initializing Filerobot is right before the closing </body> tag at the end of the page. ' + 'If you meant to target a plugin, please confirm that your `import` statements or `require` calls are correct.';
+      }
+      throw new Error(message);
+    }
+  }, {
+    key: "render",
+    value: function render(state) {
+      throw new Error('Extend the render method to add your plugin to a DOM element');
+    }
+  }, {
+    key: "addTarget",
+    value: function addTarget(plugin) {
+      throw new Error('Extend the addTarget method to add your plugin to another plugin\'s target');
+    }
+  }, {
+    key: "unmount",
+    value: function unmount() {
+      var _this$root;
+      (_this$root = this.root) === null || _this$root === void 0 ? void 0 : _this$root.unmount();
+    }
+  }, {
+    key: "checkPluginTypeExistence",
+    value: function checkPluginTypeExistence() {
+      var pluginTypeToCheck = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      return this.filerobot.checkPluginTypeExistence(pluginTypeToCheck);
+    }
+  }, {
+    key: "checkPluginExistence",
+    value: function checkPluginExistence() {
+      var pluginIdToCheck = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      return this.filerobot.checkPluginExistence(pluginIdToCheck);
+    }
+
+    /**
+     * Called to get the plugin's reducer.
+     */
+  }, {
+    key: "getPluginReducer",
+    value: function getPluginReducer() {}
+  }, {
+    key: "install",
+    value: function install() {}
+  }, {
+    key: "uninstall",
+    value: function uninstall() {
+      this.unmount();
+    }
+  }]);
+}();
+export { Plugin as default };

package/lib/Providers.js

@@ -0,0 +1,112 @@
+var _excluded = ["newOpts"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Provider as StoreProvider } from 'react-redux';
+import ThemeProvider from '@scaleflex/ui/theme';
+import { StyleSheetManager } from 'styled-components';
+import isPropValid from '@emotion/is-prop-valid';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var FilerobotPackagesContext = /*#__PURE__*/createContext({});
+export var ModalDispatcherContext = /*#__PURE__*/createContext(function (_state) {});
+export var ModalDataContext = /*#__PURE__*/createContext({});
+export var ContextMenuDispatcherContext = /*#__PURE__*/createContext(function (_state) {});
+export var ContextMenuDataContext = /*#__PURE__*/createContext({});
+export var VirtualListDispatcherContext = /*#__PURE__*/createContext(function (_state) {});
+export var VirtualListDataContext = /*#__PURE__*/createContext({});
+var Providers = function Providers(_ref) {
+  var filerobot = _ref.filerobot,
+    children = _ref.children,
+    onUiLoad = _ref.onUiLoad;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    modalData = _useState2[0],
+    setModalData = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    contextMenuData = _useState4[0],
+    setContextMenuData = _useState4[1];
+  var _useState5 = useState({
+      apiRef: useRef(),
+      parentRef: useRef()
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    virtualListData = _useState6[0],
+    setVirtualListData = _useState6[1];
+  var _useState7 = useState(function () {
+      return {
+        filerobot: filerobot,
+        plugins: filerobot.plugins
+      };
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    packages = _useState8[0],
+    setPackages = _useState8[1];
+  var memoizedChildren = useMemo(function () {
+    return children;
+  }, [children]);
+  var memoizedPackages = useMemo(function () {
+    return packages;
+  }, [packages]);
+  var updatePackages = useCallback(function (newPackages) {
+    // Spreading the object for making sure it would cause re-render, although the event emits a new object everytime,
+    // but added it for making sure it'll always re-render.
+    var newOpts = newPackages.newOpts,
+      packages = _objectWithoutProperties(newPackages, _excluded);
+    setPackages(packages);
+  }, []);
+  useEffect(function () {
+    // Migrates the sync. react 17 render callback. to react 18
+    if (typeof onUiLoad === 'function') {
+      onUiLoad();
+    }
+  }, []);
+  useEffect(function () {
+    filerobot.on('opts-updated', updatePackages);
+    filerobot.on('plugins-updated', updatePackages);
+    return function () {
+      filerobot.off('opts-updated', updatePackages);
+      filerobot.off('plugins-updated', updatePackages);
+    };
+  }, [filerobot]);
+  return /*#__PURE__*/_jsx(StoreProvider, {
+    store: filerobot.store,
+    children: /*#__PURE__*/_jsx(ThemeProvider, {
+      theme: filerobot.opts.theme,
+      children: /*#__PURE__*/_jsx(StyleSheetManager, {
+        shouldForwardProp: function shouldForwardProp(propName, target) {
+          return typeof target === 'string' ? isPropValid(propName) : true;
+        },
+        children: /*#__PURE__*/_jsx(FilerobotPackagesContext.Provider, {
+          value: memoizedPackages,
+          children: /*#__PURE__*/_jsx(ModalDispatcherContext.Provider, {
+            value: setModalData,
+            children: /*#__PURE__*/_jsx(ModalDataContext.Provider, {
+              value: modalData,
+              children: /*#__PURE__*/_jsx(ContextMenuDispatcherContext.Provider, {
+                value: setContextMenuData,
+                children: /*#__PURE__*/_jsx(ContextMenuDataContext.Provider, {
+                  value: contextMenuData,
+                  children: /*#__PURE__*/_jsx(VirtualListDispatcherContext.Provider, {
+                    value: setVirtualListData,
+                    children: /*#__PURE__*/_jsx(VirtualListDataContext.Provider, {
+                      value: virtualListData,
+                      children: memoizedChildren
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+};
+export default Providers;