@wavemaker-ai/react-runtime 1.0.0-rc.309 → 1.0.0-rc.312

package/components/container/index.js

@@ -14,6 +14,7 @@ var _clsx2 = require("clsx");
 var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
 var _layoutsizeUtil = require("@wavemaker-ai/react-runtime/utils/layoutsize-util");
 var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+var _styleUtils = require("@wavemaker-ai/react-runtime/utils/style-utils");
 var _excluded = ["listener"],
   _excluded2 = ["className", "styles", "children", "renderPartial", "onLoad", "id", "direction", "wrap", "alignment", "gap", "columngap", "clipcontent", "position", "zindex", "name", "onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "onMouseOver", "onMouseOut", "onDoubleClick", "onKeydown", "onKeyup", "onKeypress", "animation", "show", "conditionalstyle", "conditionalclass", "showindevice", "eventCallback", "forwardedRef", "viewParent", "hint", "arialabel", "tabindex", "iswidget", "deferload", "datavalue", "prefab", "inbound", "outbound", "formfield", "updateon", "dataset", "prefabName", "content", "overflow", "display", "layoutClassName"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
@@ -82,6 +83,14 @@ var WmContainer = exports.WmContainer = function WmContainer(props) {
   var isLoaded = (0, _react.useRef)(false);
   var widget_instance = listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name];
   var containerRef = (0, _react.useRef)(null);
+  var containerStyles = (0, _react.useMemo)(function () {
+    if (!(styles !== null && styles !== void 0 && styles.backgroundImage)) {
+      return styles;
+    }
+    return _objectSpread(_objectSpread({}, styles), {}, {
+      backgroundImage: (0, _styleUtils.normalizeBackgroundImage)(styles.backgroundImage)
+    });
+  }, [styles]);
   (0, _react.useEffect)(function () {
     var _listener$Widgets2;
     // expose nativeElement property to proxy
@@ -159,7 +168,7 @@ var WmContainer = exports.WmContainer = function WmContainer(props) {
     hidden: props.hidden
   }, (0, _attr.removeInvalidAttributes)(rest), domEvents, {
     name: name,
-    style: _objectSpread(_objectSpread({}, styles), conditionalstyle),
+    style: _objectSpread(_objectSpread({}, containerStyles), conditionalstyle),
     ref: containerRef
   }), renderPartial ? renderPartial(restPartialProps, onLoad) : children);
 };

package/core/util/index.d.ts

@@ -21,6 +21,11 @@ export declare const MATCH_MODES: {
     IS_EQUAL_WITH_IGNORE_CASE: string;
     IS_EQUAL: string;
 };
+/** Prism / app theme mode attribute values (parity with Angular `@wm/variables`). */
+export declare const MODE_CONSTANTS: {
+    LIGHT: string;
+    DEFAULT: string;
+};
 export declare const MONTHNAMES: string[];
 export declare const checkPublicAccess: (page?: string) => boolean;
 export declare const setSessionStorageItem: (key: string, value: string) => void;

package/core/util/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatMessage = exports.deepCopy = exports.checkPublicAccess = exports._get = exports.VALIDATOR = exports.MONTHNAMES = exports.MATCH_MODES = void 0;
+exports.formatMessage = exports.deepCopy = exports.checkPublicAccess = exports._get = exports.VALIDATOR = exports.MONTHNAMES = exports.MODE_CONSTANTS = exports.MATCH_MODES = void 0;
 exports.getCurrentMonth = getCurrentMonth;
 exports.isDefined = exports.getValidJSON = exports.getTimezone = exports.getSessionStorageItem = exports.getSessionLocaleSafe = void 0;
 exports.reload = reload;
@@ -36,6 +36,12 @@ var MATCH_MODES = exports.MATCH_MODES = {
   IS_EQUAL_WITH_IGNORE_CASE: "exactignorecase",
   IS_EQUAL: "exact"
 };
+
+/** Prism / app theme mode attribute values (parity with Angular `@wm/variables`). */
+var MODE_CONSTANTS = exports.MODE_CONSTANTS = {
+  LIGHT: "light",
+  DEFAULT: "default"
+};
 var MONTHNAMES = exports.MONTHNAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 var checkPublicAccess = exports.checkPublicAccess = function checkPublicAccess(page) {
   var _window$location$path, _store$getState$info$;

package/core/util/utils.d.ts

@@ -31,4 +31,8 @@ export declare const triggerItemAction: (item: any) => void;
 export declare const getCurrentPath: () => string;
 export declare const getItemLink: (item: any, props: any) => string | undefined;
 export declare function hasOwnObjectProperty(obj: any, prop: string): any;
+export declare const getModesFromLocalStorage: () => Record<string, string>;
+export declare function setMode(modes: Record<string, string>, shouldPersist?: boolean): void;
+export declare function initAppModes(): void;
+export declare function teardownAppModes(): void;
 export declare const mergeProxies: (firstProxy: any, secondProxy: any) => any;

package/core/util/utils.js

@@ -4,13 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getUrlParams = exports.getRouteNameFromLink = exports.getItemLink = exports.getCurrentPath = exports.Utils = void 0;
+exports.getUrlParams = exports.getRouteNameFromLink = exports.getModesFromLocalStorage = exports.getItemLink = exports.getCurrentPath = exports.Utils = void 0;
 exports.hasOwnObjectProperty = hasOwnObjectProperty;
-exports.triggerItemAction = exports.openLink = exports.mergeProxies = exports.isJQueryError = exports.isInsecureContentRequest = void 0;
+exports.initAppModes = initAppModes;
+exports.openLink = exports.mergeProxies = exports.isJQueryError = exports.isInsecureContentRequest = void 0;
+exports.setMode = setMode;
+exports.teardownAppModes = teardownAppModes;
+exports.triggerItemAction = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _navigationMiddleware = require("@wavemaker-ai/react-runtime/store/middleware/navigationMiddleware");
 var _constants = require("../constants");
 var _navigation = require("next/navigation");
+var _isObject = _interopRequireDefault(require("lodash-es/isObject"));
+var _index = require("./index");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 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; }
@@ -215,6 +221,63 @@ var getItemLink = exports.getItemLink = function getItemLink(item, props) {
 function hasOwnObjectProperty(obj, prop) {
   return Object.prototype.hasOwnProperty.call(obj, prop);
 }
+var getModesFromLocalStorage = exports.getModesFromLocalStorage = function getModesFromLocalStorage() {
+  var storedValue = localStorage.getItem("wm-app-modes") || "{}";
+  try {
+    storedValue = JSON.parse(storedValue);
+  } catch (error) {
+    console.error("Error parsing modes", error === null || error === void 0 ? void 0 : error.message);
+    storedValue = {};
+  }
+  return (0, _isObject["default"])(storedValue) ? storedValue : {};
+};
+function setMode(modes) {
+  var shouldPersist = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var htmlEl = document.getElementsByTagName("html")[0];
+  if (!htmlEl) return;
+  if (!(0, _isObject["default"])(modes)) {
+    modes = {};
+  }
+  var modesArr = Object.entries(modes);
+  if (!modesArr.length) return;
+  modesArr.forEach(function (_ref5) {
+    var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
+      modeKey = _ref6[0],
+      modeValue = _ref6[1];
+    var isDefault = modeValue === _index.MODE_CONSTANTS.LIGHT || modeValue === _index.MODE_CONSTANTS.DEFAULT;
+    if (isDefault) {
+      htmlEl.removeAttribute(modeKey);
+    } else {
+      htmlEl.setAttribute(modeKey, modeValue);
+    }
+  });
+  if (shouldPersist) {
+    localStorage.setItem("wm-app-modes", JSON.stringify(modes));
+  }
+}
+var windowMessageListener = null;
+function initAppModes() {
+  setMode(getModesFromLocalStorage());
+  if (windowMessageListener) {
+    window.removeEventListener("message", windowMessageListener);
+  }
+  windowMessageListener = function windowMessageListener(event) {
+    var _ref7 = event.data || {},
+      key = _ref7.key,
+      modes = _ref7.modes,
+      shouldPersist = _ref7.shouldPersist;
+    if (key === "switch-mode" && modes) {
+      setMode(modes, !shouldPersist);
+    }
+  };
+  window.addEventListener("message", windowMessageListener);
+}
+function teardownAppModes() {
+  if (windowMessageListener) {
+    window.removeEventListener("message", windowMessageListener);
+    windowMessageListener = null;
+  }
+}
 var mergeProxies = exports.mergeProxies = function mergeProxies(firstProxy, secondProxy) {
   return new Proxy(firstProxy, {
     get: function get(target, key) {

package/higherOrder/BaseApp.js

@@ -202,6 +202,7 @@ var BaseApp = exports.BaseApp = function BaseApp(WrappedComponent, addAppScript,
       initializeApp();
       // Cleanup function
       return function () {
+        (0, _utils.teardownAppModes)();
         // Clean up service error subscription
         if (serviceErrorSubscriptionRef.current) {
           serviceErrorSubscriptionRef.current();
@@ -316,6 +317,7 @@ var BaseApp = exports.BaseApp = function BaseApp(WrappedComponent, addAppScript,
               appProxy = (0, _proxyService.createStateProxy)(appContext, [], setAppContext);
               appProxy.serviceDefinitions = (0, _cloneDeep["default"])((info === null || info === void 0 ? void 0 : info.serviceDefs) || {});
               appProxyRef.current = appProxy;
+              appProxy.setMode = _utils.setMode;
 
               // Get app variables
               appVariables = {
@@ -401,12 +403,12 @@ var BaseApp = exports.BaseApp = function BaseApp(WrappedComponent, addAppScript,
                   return _ref5.apply(this, arguments);
                 };
               }(); // onBeforeAppReady should call before calling anything
-              _context3.next = 13;
+              _context3.next = 14;
               return executeAppBeforeStartup();
-            case 13:
-              _context3.next = 15;
+            case 14:
+              _context3.next = 16;
               return executeAppStartup();
-            case 15:
+            case 16:
               // Initialize DialogService in appstore
               _appstore["default"].DialogService.set(_dialog["default"]);
 
@@ -419,10 +421,10 @@ var BaseApp = exports.BaseApp = function BaseApp(WrappedComponent, addAppScript,
                   isAppReady: true
                 });
               });
-              _context3.next = 23;
+              _context3.next = 24;
               break;
-            case 19:
-              _context3.prev = 19;
+            case 20:
+              _context3.prev = 20;
               _context3.t0 = _context3["catch"](0);
               console.error("Error initializing app:", _context3.t0);
               setAppContext(function (prev) {
@@ -430,11 +432,11 @@ var BaseApp = exports.BaseApp = function BaseApp(WrappedComponent, addAppScript,
                   isAppReady: true
                 });
               });
-            case 23:
+            case 24:
             case "end":
               return _context3.stop();
           }
-        }, _callee3, null, [[0, 19]]);
+        }, _callee3, null, [[0, 20]]);
       }));
       return function initializeApp() {
         return _ref3.apply(this, arguments);