@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/components/Molecules/Slideout/Slideout.js

@@ -1,42 +1,30 @@
 "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.Slideout = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var hooks_2 = require("../../../hooks");
-var Overlay_1 = require("../../Atoms/Overlay");
-var defaultStyles = function (_a) {
-    var slideDirection = _a.slideDirection, transitionSpeed = _a.transitionSpeed, width = _a.width;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const hooks_2 = require("../../../hooks");
+const Overlay_1 = require("../../Atoms/Overlay");
+const defaultStyles = ({ slideDirection, transitionSpeed, width }) => {
     return (0, react_1.css)({
         display: 'block',
         position: 'fixed',
-        transition: "".concat(slideDirection ? slideDirection : 'left', " ").concat(transitionSpeed),
-        left: slideDirection == 'left' ? "-".concat(width) : slideDirection != 'right' ? '0' : 'initial',
-        right: slideDirection == 'right' ? "-".concat(width) : 'initial',
-        bottom: slideDirection == 'bottom' ? "-100vh" : 'initial',
-        top: slideDirection == 'top' ? "-100vh" : slideDirection == 'bottom' ? 'initial' : '0',
+        transition: `${slideDirection ? slideDirection : 'left'} ${transitionSpeed}`,
+        left: slideDirection == 'left' ? `-${width}` : slideDirection != 'right' ? '0' : 'initial',
+        right: slideDirection == 'right' ? `-${width}` : 'initial',
+        bottom: slideDirection == 'bottom' ? `-100vh` : 'initial',
+        top: slideDirection == 'top' ? `-100vh` : slideDirection == 'bottom' ? 'initial' : '0',
         height: '100%',
         zIndex: '10004',
-        width: (width === null || width === void 0 ? void 0 : width.endsWith('%')) && parseInt(width.split('%')[0]) > 90 ? width : '90%',
+        width: width?.endsWith('%') && parseInt(width.split('%')[0]) > 90 ? width : '90%',
         maxWidth: width,
         padding: '10px',
         background: '#fff',
@@ -50,10 +38,10 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.Slideout = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Slideout = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         active: false,
         displayAt: '',
         slideDirection: 'left',
@@ -63,32 +51,36 @@ exports.Slideout = (0, mobx_react_lite_1.observer)(function (properties) {
         treePath: globalTreePath,
         rerender: true,
     };
-    var props = (0, utilities_1.mergeProps)('slideout', globalTheme, defaultProps, properties);
-    var children = props.children, active = props.active, rerender = props.rerender, buttonContent = props.buttonContent, buttonSelector = props.buttonSelector, noButtonWrapper = props.noButtonWrapper, displayAt = props.displayAt, transitionSpeed = props.transitionSpeed, overlayColor = props.overlayColor, onChange = props.onChange, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _a = (0, hooks_2.useCustomComponentOverride)('slideout', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('slideout', globalTheme, defaultProps, properties);
+    const { children, active, rerender, buttonContent, buttonSelector, noButtonWrapper, displayAt, transitionSpeed, overlayColor, onChange, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('slideout', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        overlay: __assign(__assign({ 
+    const subProps = {
+        overlay: {
             // default props
-            internalClassName: 'ss__slideout__overlay' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            color: overlayColor,
-            transitionSpeed: transitionSpeed,
-        })), { 
+            internalClassName: 'ss__slideout__overlay',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                color: overlayColor,
+                transitionSpeed,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
     };
     // state
-    var _b = (0, hooks_1.useState)(Boolean(active)), isActive = _b[0], setActive = _b[1];
-    var _c = (0, hooks_1.useState)(Boolean(active)), renderContent = _c[0], setRenderContent = _c[1];
-    var toggleActive = function () {
-        var newActive = !isActive;
+    const [isActive, setActive] = (0, hooks_1.useState)(Boolean(active));
+    const [renderContent, setRenderContent] = (0, hooks_1.useState)(Boolean(active));
+    const toggleActive = () => {
+        const newActive = !isActive;
         if (isActive) {
             setActive(false);
             if (rerender) {
-                setTimeout(function () {
+                setTimeout(() => {
                     setRenderContent(false);
                 }, 250);
             }
@@ -101,18 +93,18 @@ exports.Slideout = (0, mobx_react_lite_1.observer)(function (properties) {
         onChange && onChange(newActive);
     };
     //this is used to update active state if active prop is changed from parent component.
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         setRenderContent(Boolean(active));
         setActive(Boolean(active));
     }, [active]);
-    var isVisible = (0, hooks_2.useMediaQuery)(displayAt, function () {
+    const isVisible = (0, hooks_2.useMediaQuery)(displayAt, () => {
         document.body.style.overflow = '';
     });
     document.body.style.overflow = isVisible && isActive ? 'hidden' : '';
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    (0, hooks_1.useEffect)(function () {
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    (0, hooks_1.useEffect)(() => {
         if (buttonSelector) {
-            var button = void 0;
+            let button;
             if (typeof buttonSelector == 'string') {
                 button = document.querySelector(buttonSelector);
             }
@@ -120,10 +112,10 @@ exports.Slideout = (0, mobx_react_lite_1.observer)(function (properties) {
                 button = buttonSelector;
             }
             if (button) {
-                button.addEventListener('click', function () { return toggleActive(); });
+                button.addEventListener('click', () => toggleActive());
             }
         }
     }, []);
     return isVisible || !rerender ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [buttonContent &&
-                (noButtonWrapper ? ((0, utilities_1.cloneWithProps)(buttonContent, { toggleActive: toggleActive, active: isActive, treePath: treePath })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__slideout__button", onClick: function () { return toggleActive(); }, children: (0, utilities_1.cloneWithProps)(buttonContent, { active: isActive, treePath: treePath }) }))), (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' } }, styling, { children: renderContent && (0, utilities_1.cloneWithProps)(children, { toggleActive: toggleActive, active: isActive, treePath: treePath }) })), (0, jsx_runtime_1.jsx)(Overlay_1.Overlay, __assign({}, subProps.overlay, { active: isActive, onClick: toggleActive }))] })) : null;
+                (noButtonWrapper ? ((0, utilities_1.cloneWithProps)(buttonContent, { toggleActive, active: isActive, treePath })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__slideout__button", onClick: () => toggleActive(), children: (0, utilities_1.cloneWithProps)(buttonContent, { active: isActive, treePath }) }))), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__slideout', className, internalClassName, { 'ss__slideout--active': isActive }), style: { visibility: !rerender ? (isVisible ? 'visible' : 'hidden') : 'visible' }, ...styling, children: renderContent && (0, utilities_1.cloneWithProps)(children, { toggleActive, active: isActive, treePath }) }), (0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive })] })) : null;
 });