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

package/mobile/src/components/ProductBlock/ProductBlock.example.json

@@ -14,11 +14,7 @@
             "height": 234
           }
         },
-        "items": [
-          "Элемент списка 1",
-          "Элемент списка 2",
-          "Элемент списка 3"
-        ],
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
         "isDotted": true,
         "buttons": [
           {
@@ -53,6 +49,8 @@
     "С показателем",
     {
       "content": {
+        "version": "primary",
+        "padding": "",
         "title": "Продукт",
         "description": "Описание",
         "headlineVersion": "XL",
@@ -64,7 +62,6 @@
             "version": "secondary"
           }
         ],
-        "version": "primary",
         "benefitsVersion": "normal",
         "benefits": [
           {
@@ -93,4 +90,4 @@
       ]
     }
   ]
-]
+]

package/mobile/src/components/RichTextBlock/RichTextBlock.example.json

@@ -1,5 +1,7 @@
 {
   "content": {
+    "version": "primary",
+    "padding": "",
     "__html": "<h1>Заголовок 1</h1>\n<h2>Заголовок 2</h2>\n<h3>Заголовок 3</h3>\n<h4>Заголовок 4</h4>\n<h5>Заголовок 5</h5>\n<h6>Заголовок 6</h6>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n",
     "richVersion": ""
   }

package/mobile/src/components/StepsBlock/StepsBlock.example.json

@@ -1,6 +1,7 @@
 {
   "content": {
     "version": "primary",
+    "padding": "",
     "title": "Шаги",
     "description": "Описание",
     "showLines": true,

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/components/TextBlock/TextBlock.example.json

@@ -1,5 +1,7 @@
 {
   "content": {
+    "version": "primary",
+    "padding": "",
     "title": "Текстовый блок",
     "description": "Описание"
   }

package/mobile/src/components/UnitBlock/UnitBlock.example.json

@@ -1,5 +1,7 @@
 {
   "content": {
+    "version": "primary",
+    "padding": "",
     "prefix": "префикс",
     "unit": 1,
     "suffix": "суффикс"

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.253",
+  "version": "0.14.255",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/BenefitsBlock/BenefitsBlock.example.json

@@ -1,5 +1,7 @@
 {
   "content": {
+    "version": "primary",
+    "padding": "",
     "title": "Преимущества",
     "benefitsBlockVersion": "primary",
     "benefitList": [

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.example.json

@@ -1,5 +1,7 @@
 {
   "content": {
+    "version": "primary",
+    "padding": "",
     "title": "Вы можете оплатить бонусными баллами",
     "subtitle": "Удобный каталог с большим ассортиментом товаров и сервисов",
     "columnsCount": "4",

package/src/components/ContactsBlock/ContactsBlock.example.json

@@ -1,6 +1,7 @@
 {
   "content": {
     "version": "secondary",
+    "padding": "",
     "info": [
       [
         {

package/src/components/ErrorBlock/ErrorBlock.example.json

@@ -1,5 +1,7 @@
 {
   "content": {
+    "version": "transparent",
+    "padding": "",
     "title": "Заголовок",
     "description": "Описание",
     "error": {

package/src/components/ImgBlock/ImgBlock.example.json

@@ -1,5 +1,7 @@
 {
   "content": {
+    "version": "primary",
+    "padding": "",
     "image": {
       "format": "webp",
       "size": {

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.example.json

@@ -1,5 +1,7 @@
 {
   "content": {
+    "version": "primary",
+    "padding": "",
     "title": "Заголовок",
     "insuranceTabs": [
       {

package/src/components/ProductBlock/ProductBlock.example.json

@@ -14,11 +14,7 @@
             "height": 234
           }
         },
-        "items": [
-          "Элемент списка 1",
-          "Элемент списка 2",
-          "Элемент списка 3"
-        ],
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
         "isDotted": true,
         "buttons": [
           {
@@ -53,6 +49,8 @@
     "С показателем",
     {
       "content": {
+        "version": "primary",
+        "padding": "",
         "title": "Продукт",
         "description": "Описание",
         "headlineVersion": "XL",
@@ -64,7 +62,6 @@
             "version": "secondary"
           }
         ],
-        "version": "primary",
         "benefitsVersion": "normal",
         "benefits": [
           {
@@ -93,4 +90,4 @@
       ]
     }
   ]
-]
+]

package/src/components/RichTextBlock/RichTextBlock.example.json

@@ -1,5 +1,7 @@
 {
   "content": {
+    "version": "primary",
+    "padding": "",
     "__html": "<h1>Заголовок 1</h1>\n<h2>Заголовок 2</h2>\n<h3>Заголовок 3</h3>\n<h4>Заголовок 4</h4>\n<h5>Заголовок 5</h5>\n<h6>Заголовок 6</h6>\n<p>Параграф, в котором много текста и даже <a href=\"#\">ссылка</a></p>\n<p><strong>Жирный текст</strong>, <em>Наклонный текст</em></p>\n<ul>\n  <li>Список с точками</li>\n  <li>Список с точками</li>\n</ul>\n<ol>\n  <li>Нумерованный список</li>\n  <li>Нумерованный список</li>\n</ol>\n",
     "richVersion": ""
   }

package/src/components/StepsBlock/StepsBlock.example.json

@@ -1,6 +1,7 @@
 {
   "content": {
     "version": "primary",
+    "padding": "",
     "title": "Шаги",
     "description": "Описание",
     "showLines": true,

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/components/TextBlock/TextBlock.example.json

@@ -1,5 +1,7 @@
 {
   "content": {
+    "version": "primary",
+    "padding": "",
     "title": "Текстовый блок",
     "description": "Описание"
   }

package/src/components/UnitBlock/UnitBlock.example.json

@@ -1,5 +1,7 @@
 {
   "content": {
+    "version": "primary",
+    "padding": "",
     "prefix": "префикс",
     "unit": 1,
     "suffix": "суффикс"

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;
 }