@redneckz/wildless-cms-uni-blocks 0.14.261 → 0.14.263

package/src/components/StickyBottomMenu/StickyBottomMenu.mobile.tsx

@@ -1,14 +1,13 @@
-import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useCallback, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Dialog } from '../../ui-kit/DialogManager/Dialog';
-import { Heading } from '../../ui-kit/Heading/Heading';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { StickyBottomMenuBurger } from './StickyBottomMenuBurger';
 import { StickyBottomMenuItem } from './StickyBottomMenuItem';
 import { type StickyBottomMenuProps } from './StickyBottomMenuProps';
+import { useBottomMenuItemDialog } from './useBottomMenuItemDialog';
 import { useBurgerMenuDialog } from './useBurgerMenuDialog';
 
 const EMPTY_MENU = [];
@@ -18,7 +17,6 @@ interface CurrentActiveItem {
   currentItemPosition: string;
 }
 
-// eslint-disable-next-line max-lines-per-function
 export const StickyBottomMenu = UniBlock<StickyBottomMenuProps>(({ sticky, ...rest }) => {
   const { menuItems = EMPTY_MENU } = sticky ?? {};
   const [isBurgerMenuDialogOpen, { toggle, close, openDialog }] = useBurgerMenuDialog(
@@ -31,78 +29,44 @@ export const StickyBottomMenu = UniBlock<StickyBottomMenuProps>(({ sticky, ...re
 
   const [activeIndex, setActiveIndex] = useState(-1);
   const [currentItemPosition, setCurrentItemPosition] = useState<string>('');
-  const [popupDialogState, { setFalse: setPopupDialogClosed, setTrue: setPopupDialogOpened }] =
-    useBool();
 
-  const closePopupDialog = useCallback(() => {
-    setPopupDialogClosed();
+  const closeDialog = useCallback(() => {
     setActiveIndex(-1);
     setCurrentItemPosition('');
     close();
   }, [close]);
 
   const menuRef = useRef<HTMLDivElement | null>(null);
-  const popupDialogRef = useOutsideClick<HTMLDivElement>(closePopupDialog);
-
-  const openPopupDialog = useCallback(
-    (index: number, itemsPosition: string) => {
-      setPopupDialogOpened();
-      close();
-
-      openDialog(
-        <Dialog
-          onClick={(e) => e.stopPropagation()}
-          className="mt-[20%]"
-          onClose={closePopupDialog}
-          head={
-            <div className="flex items-center">
-              <Heading
-                as="h4"
-                title={itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title}
-              />
-            </div>
-          }
-        >
-          <div className="bg-white pb-24 pt-1 text-l" ref={popupDialogRef}></div>
-        </Dialog>,
-        {
-          id: itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title,
-        },
-      );
+  const dialogRef = useOutsideClick<HTMLDivElement>(closeDialog);
+
+  const [{ openBottomMenuItemDialog }] = useBottomMenuItemDialog({
+    menuRef,
+    dialogRef,
+    closeDialog,
+    openDialog,
+    leftItems,
+    rightItems,
+  });
+
+  const handleMenuBurgerClick = useCallback(
+    (e: PreventableEvent) => {
+      closeDialog();
+      e.stopPropagation();
+      toggle();
     },
-    [close, closePopupDialog],
+    [closeDialog, toggle],
   );
 
   const handleMenuItemClick = useCallback(
     (index: number, itemsPosition: string) => {
       setCurrentItemPosition(itemsPosition);
       setActiveIndex(index);
-      openPopupDialog(index, itemsPosition);
+      close();
+      openBottomMenuItemDialog(index, itemsPosition);
     },
-    [openPopupDialog],
+    [close, openBottomMenuItemDialog],
   );
 
-  useEffect(() => {
-    if (!popupDialogRef.current) {
-      return;
-    }
-
-    if (!popupDialogRef.current.shadowRoot) {
-      popupDialogRef.current?.attachShadow({ mode: 'open' });
-    }
-
-    const shadowRoot = popupDialogRef.current.shadowRoot;
-    if (!shadowRoot) {
-      return;
-    }
-
-    if (currentItemPosition === 'left') {
-      shadowRoot.innerHTML = leftItems[activeIndex]?.__html || '';
-    } else {
-      shadowRoot.innerHTML = rightItems[activeIndex]?.__html || '';
-    }
-  }, [activeIndex, currentItemPosition, popupDialogState]);
-
   return (
     <BlockWrapper className="h-[74px] z-[100] relative" defaultPadding="p-0" {...rest}>
       <div
@@ -114,11 +78,7 @@ export const StickyBottomMenu = UniBlock<StickyBottomMenuProps>(({ sticky, ...re
         )}
         <StickyBottomMenuBurger
           isActive={isBurgerMenuDialogOpen}
-          onClick={(e) => {
-            closePopupDialog();
-            e.stopPropagation();
-            toggle();
-          }}
+          onClick={(e) => handleMenuBurgerClick(e)}
         />
         {rightItems.map(
           renderMenuItem(handleMenuItemClick, 'right', { activeIndex, currentItemPosition }),
@@ -130,7 +90,7 @@ export const StickyBottomMenu = UniBlock<StickyBottomMenuProps>(({ sticky, ...re
 
 const renderMenuItem =
   (
-    handleMenuItemClick: (index: number, itemsPosition: string) => void,
+    onClick: (index: number, itemsPosition: string) => void,
     itemsPosition: string,
     currentActiveItem: CurrentActiveItem,
   ) =>
@@ -145,7 +105,7 @@ const renderMenuItem =
         }
         onClick={(e) => {
           e.stopPropagation();
-          handleMenuItemClick(i, itemsPosition);
+          onClick(i, itemsPosition);
         }}
       />
     );

package/src/components/StickyBottomMenu/StickyBottomMenuDialog.tsx

@@ -0,0 +1,39 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { type VNode } from '../../model/VNode';
+import { CloseButton } from '../../ui-kit/DialogManager/CloseButton';
+import { useDialogManager } from '../../ui-kit/DialogManager/useDialogManager';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
+import { style } from '../../utils/style';
+
+export interface StickyBottomMenuDialogProps {
+  className?: string;
+  head?: VNode;
+  onClose?: () => void;
+  onClick?: (e: PreventableEvent) => void;
+}
+
+export const StickyBottomMenuDialog = JSX<StickyBottomMenuDialogProps>(
+  ({ className, head, children, onClose, onClick }) => {
+    const { close } = useDialogManager();
+
+    const handleClose = useCallback(() => {
+      close();
+      onClose && onClose();
+    }, [onClose]);
+
+    return (
+      <div
+        onClick={onClick}
+        className={style('relative min-h-full bg-white p-0 rounded-xl mt-[20%]', className)}
+        role="dialog"
+      >
+        <div className="sticky py-xl top-0 rounded-xl bg-white z-10">
+          <CloseButton className="absolute top-1.5 right-0" onClose={handleClose} />
+          <div className="container">{head}</div>
+        </div>
+        <div className="container pb-6xl">{children}</div>
+      </div>
+    );
+  },
+);

package/src/components/StickyBottomMenu/useBottomMenuItemDialog.tsx

@@ -0,0 +1,54 @@
+import { type StickyMenuItem } from '../../data/StickyMobileData';
+import { type VNode } from '../../model/VNode';
+import { type DialogOptions } from '../../ui-kit/DialogManager/useDialogManager';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { StickyBottomMenuDialog } from './StickyBottomMenuDialog';
+
+interface BottomMenuItemDialog {
+  menuRef?: {
+    current: HTMLDivElement | null;
+  };
+  dialogRef?: {
+    current: HTMLDivElement | null;
+  };
+  closeDialog: () => void;
+  openDialog: (dialog: VNode, options: DialogOptions) => void;
+  leftItems: StickyMenuItem[];
+  rightItems: StickyMenuItem[];
+}
+
+export const useBottomMenuItemDialog = ({
+  menuRef,
+  dialogRef,
+  closeDialog,
+  openDialog,
+  leftItems,
+  rightItems,
+}: BottomMenuItemDialog) => {
+  const openBottomMenuItemDialog = (index: number, itemsPosition: string) => {
+    const requiredArray = itemsPosition === 'left' ? leftItems : rightItems;
+    const menuDimensions = menuRef?.current?.getBoundingClientRect();
+    openDialog(
+      <StickyBottomMenuDialog
+        onClick={(e) => e.stopPropagation()}
+        onClose={closeDialog}
+        head={
+          <div className="flex items-center px-xl">
+            <Heading as="h4" title={requiredArray[index].title} />
+          </div>
+        }
+      >
+        <div className="bg-white pb-20 pt-1 text-l" ref={dialogRef}>
+          <iframe
+            src={requiredArray[index]?.src}
+            className="min-h-[90vh]"
+            width={menuDimensions?.width || 0}
+          />
+        </div>
+      </StickyBottomMenuDialog>,
+      { id: itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title },
+    );
+  };
+
+  return [{ openBottomMenuItemDialog }];
+};

package/src/components/StickyBottomMenu/useBurgerMenuDialog.tsx

@@ -11,7 +11,6 @@ export const useBurgerMenuDialog = (
 ): [
   boolean,
   {
-    open: () => void;
     close: () => void;
     toggle: () => void;
     openDialog: (dialog: VNode, options: DialogOptions) => void;
@@ -31,5 +30,5 @@ export const useBurgerMenuDialog = (
     }
   };
 
-  return [isBurgerMenuOpen, { open, close, toggle, openDialog }];
+  return [isBurgerMenuOpen, { close, toggle, openDialog }];
 };

package/src/data/StickyMobileData.ts

@@ -6,8 +6,8 @@ import { type Picture } from '../model/Picture';
 export interface StickyMenuItem {
   /** @title Название */
   title?: string;
-  /** @title Html */
-  __html?: string;
+  /** @title Адрес страницы меню */
+  src?: string;
   /** @title Иконка */
   icon?: Picture;
 }