@redneckz/wildless-cms-uni-blocks 0.14.254 → 0.14.255

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

@@ -1,6 +1,10 @@
+import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
-import { useActiveRoute } from '../../hooks/useActiveRoute';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { CloseButton } from '../../ui-kit/DialogManager/CloseButton';
+import { usePopupManager } from '../../ui-kit/PopupManager/usePopupManager';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { StickyBottomMenuBurger } from './StickyBottomMenuBurger';
 import { StickyBottomMenuItem } from './StickyBottomMenuItem';
@@ -9,36 +13,140 @@ import { useBurgerMenuDialog } from './useBurgerMenuDialog';
 
 const EMPTY_MENU = [];
 
+interface CurrentActiveItem {
+  activeIndex: number;
+  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 }] = useBurgerMenuDialog(
     rest.options?.page?.sitemap ?? {},
   );
-
-  const [, activeItem] = useActiveRoute(menuItems);
+  const popup = usePopupManager();
 
   const middleIdx = Math.floor(menuItems.length / 2);
   const leftItems = menuItems.slice(0, middleIdx);
   const rightItems = menuItems.slice(middleIdx);
 
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [currentItemPosition, setCurrentItemPosition] = useState<string>('');
+  const [popupState, { setFalse: setPopupClosed, setTrue: setPopupOpened }] = useBool();
+
+  const closePopup = useCallback(() => {
+    setPopupClosed();
+    setActiveIndex(-1);
+    setCurrentItemPosition('');
+    popup.close();
+  }, [popup]);
+
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const popupRef = useOutsideClick<HTMLDivElement>(closePopup);
+
+  const openPopup = useCallback(
+    (index: number, itemsPosition: string) => {
+      setPopupOpened();
+      close();
+      const menuDimensions = menuRef?.current?.getBoundingClientRect();
+
+      popup.open(
+        <div
+          onClick={(e) => e.stopPropagation()}
+          className="sticky py-xl top-0 rounded-t-3xl bg-white z-10"
+        >
+          <div className="container px-xl text-center text-h3">
+            {itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title}
+            <CloseButton className="absolute top-0 right-0" onClose={closePopup} />
+          </div>
+          <div
+            className="bg-white text-l h-[70vh] overflow-y-auto no-scrollbar"
+            ref={popupRef}
+          ></div>
+        </div>,
+        {
+          top:
+            -Math.max(
+              globalThis.document?.documentElement?.clientHeight || 0,
+              globalThis.innerHeight || 0,
+            ) *
+              0.7 -
+            56,
+          left: menuDimensions?.left || 0,
+          width: menuDimensions?.width,
+        },
+      );
+    },
+    [close, popup],
+  );
+
+  const handleMenuItemClick = useCallback(
+    (index: number, itemsPosition: string) => {
+      setCurrentItemPosition(itemsPosition);
+      setActiveIndex(index);
+      openPopup(index, itemsPosition);
+    },
+    [openPopup],
+  );
+
+  useEffect(() => {
+    if (!popupRef.current) {
+      return;
+    }
+
+    if (!popupRef.current.shadowRoot) {
+      popupRef.current?.attachShadow({ mode: 'open' });
+    }
+
+    const shadowRoot = popupRef.current.shadowRoot;
+    if (!shadowRoot) {
+      return;
+    }
+
+    if (currentItemPosition === 'left') {
+      shadowRoot.innerHTML = leftItems[activeIndex]?.__html || '';
+    } else {
+      shadowRoot.innerHTML = rightItems[activeIndex]?.__html || '';
+    }
+  }, [activeIndex, currentItemPosition, popupState]);
+
   return (
     <BlockWrapper className="h-[74px] z-[100] relative" defaultPadding="p-0" {...rest}>
-      <div className="ml-auto container bg-white flex justify-center shadow-blue-gray">
-        {leftItems.map(renderMenuItem(activeItem, close))}
+      <div
+        ref={menuRef}
+        className="ml-auto container bg-white flex justify-center shadow-blue-gray"
+      >
+        {leftItems.map(
+          renderMenuItem(handleMenuItemClick, 'left', { activeIndex, currentItemPosition }),
+        )}
         <StickyBottomMenuBurger isActive={isBurgerMenuDialogOpen} onClick={toggle} />
-        {rightItems.map(renderMenuItem(activeItem, close))}
+        {rightItems.map(
+          renderMenuItem(handleMenuItemClick, 'right', { activeIndex, currentItemPosition }),
+        )}
       </div>
     </BlockWrapper>
   );
 });
 
 const renderMenuItem =
-  (activeItem: StickyMenuItem, close: () => void) => (_: StickyMenuItem, i: number) =>
-    (
+  (
+    handleMenuItemClick: (index: number, itemsPosition: string) => void,
+    itemsPosition: string,
+    currentActiveItem: CurrentActiveItem,
+  ) =>
+  (_: StickyMenuItem, i: number, arr: StickyMenuItem[]) => {
+    return (
       <StickyBottomMenuItem
-        key={_.href || String(i)}
-        isActive={_ === activeItem}
+        key={_.title || String(i)}
         item={_}
-        onClick={close}
+        isActive={
+          arr[currentActiveItem.activeIndex]?.title === _?.title &&
+          currentActiveItem.currentItemPosition === itemsPosition
+        }
+        onClick={(e) => {
+          e.stopPropagation();
+          handleMenuItemClick(i, itemsPosition);
+        }}
       />
     );
+  };

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

@@ -1,30 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
-import { useLink } from '../../hooks/useLink';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
 
 interface StickyBottomMenuItemProps {
   isActive?: boolean;
   item?: StickyMenuItem;
-  onClick?: () => void;
+  onClick?: (e: PreventableEvent) => void;
 }
 
 export const StickyBottomMenuItem = JSX<StickyBottomMenuItemProps>(
   ({ isActive, item, onClick }) => {
-    const link = useLink({ isRemote: true });
-    const { href, onClick: handleClick } = link({ href: item?.href, onClick });
-
     return (
-      <a
+      <div
         className={style(
           isActive ? 'text-primary-main' : 'text-primary-text',
           `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`,
         )}
-        href={href}
-        target="_self"
         title={item?.title || ''}
-        onClick={handleClick}
+        onClick={onClick}
       >
         <Icon
           className="w-6 h-6"
@@ -32,7 +27,7 @@ export const StickyBottomMenuItem = JSX<StickyBottomMenuItemProps>(
           iconVersion={isActive ? 'color' : 'black'}
         />
         {item?.title || ''}
-      </a>
+      </div>
     );
   },
 );

package/mobile/src/data/StickyMobileData.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.254",
+  "version": "0.14.255",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

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

@@ -2,6 +2,7 @@ import '../../setup-fixture';
 
 import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { DialogManager } from '../../ui-kit/DialogManager/DialogManager';
+import { PopupManager } from '../../ui-kit/PopupManager/PopupManager';
 import { StickyBottomMenu } from './StickyBottomMenu';
 
 const options = {
@@ -15,6 +16,7 @@ export default {
         options={options}
         sticky={{ $ref: '/wcms-resources/sticky-mobile-menu.json' }}
       />
+      <PopupManager />
       <DialogManager />
     </div>
   ),

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

@@ -1,6 +1,10 @@
+import { useCallback, useEffect, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
-import { useActiveRoute } from '../../hooks/useActiveRoute';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { CloseButton } from '../../ui-kit/DialogManager/CloseButton';
+import { usePopupManager } from '../../ui-kit/PopupManager/usePopupManager';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { StickyBottomMenuBurger } from './StickyBottomMenuBurger';
 import { StickyBottomMenuItem } from './StickyBottomMenuItem';
@@ -9,36 +13,140 @@ import { useBurgerMenuDialog } from './useBurgerMenuDialog';
 
 const EMPTY_MENU = [];
 
+interface CurrentActiveItem {
+  activeIndex: number;
+  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 }] = useBurgerMenuDialog(
     rest.options?.page?.sitemap ?? {},
   );
-
-  const [, activeItem] = useActiveRoute(menuItems);
+  const popup = usePopupManager();
 
   const middleIdx = Math.floor(menuItems.length / 2);
   const leftItems = menuItems.slice(0, middleIdx);
   const rightItems = menuItems.slice(middleIdx);
 
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [currentItemPosition, setCurrentItemPosition] = useState<string>('');
+  const [popupState, { setFalse: setPopupClosed, setTrue: setPopupOpened }] = useBool();
+
+  const closePopup = useCallback(() => {
+    setPopupClosed();
+    setActiveIndex(-1);
+    setCurrentItemPosition('');
+    popup.close();
+  }, [popup]);
+
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const popupRef = useOutsideClick<HTMLDivElement>(closePopup);
+
+  const openPopup = useCallback(
+    (index: number, itemsPosition: string) => {
+      setPopupOpened();
+      close();
+      const menuDimensions = menuRef?.current?.getBoundingClientRect();
+
+      popup.open(
+        <div
+          onClick={(e) => e.stopPropagation()}
+          className="sticky py-xl top-0 rounded-t-3xl bg-white z-10"
+        >
+          <div className="container px-xl text-center text-h3">
+            {itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title}
+            <CloseButton className="absolute top-0 right-0" onClose={closePopup} />
+          </div>
+          <div
+            className="bg-white text-l h-[70vh] overflow-y-auto no-scrollbar"
+            ref={popupRef}
+          ></div>
+        </div>,
+        {
+          top:
+            -Math.max(
+              globalThis.document?.documentElement?.clientHeight || 0,
+              globalThis.innerHeight || 0,
+            ) *
+              0.7 -
+            56,
+          left: menuDimensions?.left || 0,
+          width: menuDimensions?.width,
+        },
+      );
+    },
+    [close, popup],
+  );
+
+  const handleMenuItemClick = useCallback(
+    (index: number, itemsPosition: string) => {
+      setCurrentItemPosition(itemsPosition);
+      setActiveIndex(index);
+      openPopup(index, itemsPosition);
+    },
+    [openPopup],
+  );
+
+  useEffect(() => {
+    if (!popupRef.current) {
+      return;
+    }
+
+    if (!popupRef.current.shadowRoot) {
+      popupRef.current?.attachShadow({ mode: 'open' });
+    }
+
+    const shadowRoot = popupRef.current.shadowRoot;
+    if (!shadowRoot) {
+      return;
+    }
+
+    if (currentItemPosition === 'left') {
+      shadowRoot.innerHTML = leftItems[activeIndex]?.__html || '';
+    } else {
+      shadowRoot.innerHTML = rightItems[activeIndex]?.__html || '';
+    }
+  }, [activeIndex, currentItemPosition, popupState]);
+
   return (
     <BlockWrapper className="h-[74px] z-[100] relative" defaultPadding="p-0" {...rest}>
-      <div className="ml-auto container bg-white flex justify-center shadow-blue-gray">
-        {leftItems.map(renderMenuItem(activeItem, close))}
+      <div
+        ref={menuRef}
+        className="ml-auto container bg-white flex justify-center shadow-blue-gray"
+      >
+        {leftItems.map(
+          renderMenuItem(handleMenuItemClick, 'left', { activeIndex, currentItemPosition }),
+        )}
         <StickyBottomMenuBurger isActive={isBurgerMenuDialogOpen} onClick={toggle} />
-        {rightItems.map(renderMenuItem(activeItem, close))}
+        {rightItems.map(
+          renderMenuItem(handleMenuItemClick, 'right', { activeIndex, currentItemPosition }),
+        )}
       </div>
     </BlockWrapper>
   );
 });
 
 const renderMenuItem =
-  (activeItem: StickyMenuItem, close: () => void) => (_: StickyMenuItem, i: number) =>
-    (
+  (
+    handleMenuItemClick: (index: number, itemsPosition: string) => void,
+    itemsPosition: string,
+    currentActiveItem: CurrentActiveItem,
+  ) =>
+  (_: StickyMenuItem, i: number, arr: StickyMenuItem[]) => {
+    return (
       <StickyBottomMenuItem
-        key={_.href || String(i)}
-        isActive={_ === activeItem}
+        key={_.title || String(i)}
         item={_}
-        onClick={close}
+        isActive={
+          arr[currentActiveItem.activeIndex]?.title === _?.title &&
+          currentActiveItem.currentItemPosition === itemsPosition
+        }
+        onClick={(e) => {
+          e.stopPropagation();
+          handleMenuItemClick(i, itemsPosition);
+        }}
       />
     );
+  };

package/src/components/StickyBottomMenu/StickyBottomMenuItem.tsx

@@ -1,30 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
-import { useLink } from '../../hooks/useLink';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
 
 interface StickyBottomMenuItemProps {
   isActive?: boolean;
   item?: StickyMenuItem;
-  onClick?: () => void;
+  onClick?: (e: PreventableEvent) => void;
 }
 
 export const StickyBottomMenuItem = JSX<StickyBottomMenuItemProps>(
   ({ isActive, item, onClick }) => {
-    const link = useLink({ isRemote: true });
-    const { href, onClick: handleClick } = link({ href: item?.href, onClick });
-
     return (
-      <a
+      <div
         className={style(
           isActive ? 'text-primary-main' : 'text-primary-text',
           `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`,
         )}
-        href={href}
-        target="_self"
         title={item?.title || ''}
-        onClick={handleClick}
+        onClick={onClick}
       >
         <Icon
           className="w-6 h-6"
@@ -32,7 +27,7 @@ export const StickyBottomMenuItem = JSX<StickyBottomMenuItemProps>(
           iconVersion={isActive ? 'color' : 'black'}
         />
         {item?.title || ''}
-      </a>
+      </div>
     );
   },
 );

package/src/data/StickyMobileData.ts

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