@athoscommerce/snap-preact 1.9.0 → 1.10.0

package/dist/cjs/components/src/components/Organisms/BranchOverride/BranchOverride.js

@@ -1,31 +1,19 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BranchOverride = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var hooks_1 = require("preact/hooks");
-var Icon_1 = require("../../Atoms/Icon/Icon");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var hooks_2 = require("../../../hooks");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("preact/hooks");
+const Icon_1 = require("../../Atoms/Icon/Icon");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const hooks_2 = require("../../../hooks");
 // TODO: We want to avoid passing non-component props here. This may require some refactoring of this component.
-var defaultStyles = function (_a) {
-    var componentTheme = _a.componentTheme;
+const defaultStyles = ({ componentTheme }) => {
     return (0, react_1.css)({
         width: '360px',
         height: '120px',
@@ -112,7 +100,7 @@ var defaultStyles = function (_a) {
         },
     });
 };
-var darkTheme = {
+const darkTheme = {
     class: 'ss__branch-override--dark',
     main: {
         border: '0',
@@ -145,7 +133,7 @@ var darkTheme = {
         },
     },
 };
-var lightTheme = {
+const lightTheme = {
     class: 'ss__branch-override--light',
     main: {
         border: '0',
@@ -178,7 +166,7 @@ var lightTheme = {
         },
     },
 };
-var failureTheme = {
+const failureTheme = {
     class: 'ss__branch-override--error',
     main: {
         border: '0',
@@ -211,51 +199,56 @@ var failureTheme = {
         },
     },
 };
-var componentThemes = {
-    darkTheme: darkTheme,
-    lightTheme: lightTheme,
-    failureTheme: failureTheme,
+const componentThemes = {
+    darkTheme,
+    lightTheme,
+    failureTheme,
 };
-var BranchOverride = function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+const BranchOverride = (properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('branchOverride', globalTheme, defaultProps, properties);
-    var branch = props.branch, details = props.details, error = props.error, className = props.className, internalClassName = props.internalClassName, darkMode = props.darkMode, disableStyles = props.disableStyles, onRemoveClick = props.onRemoveClick, treePath = props.treePath;
-    var _a = (0, hooks_2.useCustomComponentOverride)('branchOverride', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('branchOverride', globalTheme, defaultProps, properties);
+    const { branch, details, error, className, internalClassName, darkMode, disableStyles, onRemoveClick, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('branchOverride', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        icon: __assign(__assign({ 
+    const subProps = {
+        icon: {
             // default props
-            internalClassName: 'ss__branch-override__bottom__left__icon', size: '12px' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__branch-override__bottom__left__icon',
+            size: '12px',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
     };
-    var prefersDark = typeof darkMode == 'boolean' ? darkMode : window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
-    var _b = (0, hooks_1.useState)(prefersDark ? 'darkTheme' : 'lightTheme'), themeName = _b[0], setThemeName = _b[1];
-    var _c = (0, hooks_1.useState)(0), collapsed = _c[0], setCollapsed = _c[1];
+    const prefersDark = typeof darkMode == 'boolean' ? darkMode : window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
+    const [themeName, setThemeName] = (0, hooks_1.useState)(prefersDark ? 'darkTheme' : 'lightTheme');
+    const [collapsed, setCollapsed] = (0, hooks_1.useState)(0);
     if (error) {
         setThemeName('failureTheme');
     }
-    var styling = (0, utilities_1.mergeStyles)(__assign(__assign({}, props), { componentTheme: componentThemes[themeName] }), defaultStyles);
-    return (details || error) && branch ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__branch-override', componentThemes[themeName].class, { 'ss__branch-override--collapsed': collapsed }, className, internalClassName) }, styling, { onClick: function (e) {
+    const styling = (0, utilities_1.mergeStyles)({ ...props, componentTheme: componentThemes[themeName] }, defaultStyles);
+    return (details || error) && branch ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__branch-override', componentThemes[themeName].class, { 'ss__branch-override--collapsed': collapsed }, className, internalClassName), ...styling, onClick: (e) => {
             e.preventDefault();
             e.stopPropagation();
             setCollapsed(0);
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__branch-override__top", children: [(0, jsx_runtime_1.jsx)("img", { className: "ss__branch-override__top__logo", src: componentThemes[themeName].top.logo.src }), (0, jsx_runtime_1.jsx)("div", { className: "ss__branch-override__top__collapse", onClick: function (e) {
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__branch-override__top", children: [(0, jsx_runtime_1.jsx)("img", { className: "ss__branch-override__top__logo", src: componentThemes[themeName].top.logo.src }), (0, jsx_runtime_1.jsx)("div", { className: "ss__branch-override__top__collapse", onClick: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             setCollapsed(1);
-                        }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ size: "18px", color: componentThemes[themeName].top.close.fill }, subProps.icon, { icon: "close-thin" })) }), (0, jsx_runtime_1.jsx)("div", { className: "ss__branch-override__top__button", onClick: function (e) {
+                        }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: "18px", color: componentThemes[themeName].top.close.fill, ...subProps.icon, icon: "close-thin" }) }), (0, jsx_runtime_1.jsx)("div", { className: "ss__branch-override__top__button", onClick: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             onRemoveClick && onRemoveClick(e, branch);
-                        }, children: componentThemes[themeName].top.button.content })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__branch-override__bottom", children: [(0, jsx_runtime_1.jsx)("span", { className: "ss__branch-override__bottom__left", children: error ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ size: "12px", color: componentThemes[themeName].bottom.branch.color }, subProps.icon, { icon: "warn" })), (0, jsx_runtime_1.jsx)("span", { children: error.message })] })) : (branch) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__branch-override__bottom__right", children: error ? branch : details === null || details === void 0 ? void 0 : details.lastModified }), (0, jsx_runtime_1.jsx)("div", { className: "ss__branch-override__bottom__content", children: (error === null || error === void 0 ? void 0 : error.description) || componentThemes[themeName].bottom.content })] })] }))) : null;
+                        }, children: componentThemes[themeName].top.button.content })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__branch-override__bottom", children: [(0, jsx_runtime_1.jsx)("span", { className: "ss__branch-override__bottom__left", children: error ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: "12px", color: componentThemes[themeName].bottom.branch.color, ...subProps.icon, icon: "warn" }), (0, jsx_runtime_1.jsx)("span", { children: error.message })] })) : (branch) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__branch-override__bottom__right", children: error ? branch : details?.lastModified }), (0, jsx_runtime_1.jsx)("div", { className: "ss__branch-override__bottom__content", children: error?.description || componentThemes[themeName].bottom.content })] })] })) : null;
 };
 exports.BranchOverride = BranchOverride;