@redneckz/wildless-cms-uni-blocks 0.14.256 → 0.14.258

package/src/components/StickyBottomMenu/BurgerMenuDialog.tsx

@@ -3,10 +3,13 @@ import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib
 import { type RefObject } from 'react';
 import { type SitemapData } from '../../data/SitemapData';
 import { useActiveRoute } from '../../hooks/useActiveRoute';
+import { useLocation } from '../../hooks/useLocation';
+import { type Region } from '../../hooks/useRegions';
 import { type LinkProps } from '../../model/LinkProps';
 import { Dialog } from '../../ui-kit/DialogManager/Dialog';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
@@ -18,7 +21,10 @@ export interface BurgerMenuDialogProps extends SitemapData {
 }
 
 export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
-  const { topItems, officesLink } = props;
+  const { topItems, defaultLocation, officesLink } = props;
+
+  const [location] = useLocation(defaultLocation);
+  const locationDialog = useLocationDialog(props);
 
   const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
     itemCount: topItems?.length ?? 0,
@@ -42,6 +48,7 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
 
   return (
     <Dialog
+      onClick={(e) => e.stopPropagation()}
       head={
         <div className="flex items-center">
           <Heading as="h4" title="Меню" />
@@ -69,6 +76,7 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
         <div className="relative grow">
           {renderActiveSubMenu(activeMenuSubItems, activeRoute?.href)}
           {renderOfficeLink(officesLink)}
+          {renderLocation(location, () => locationDialog.open())}
         </div>
       </div>
     </Dialog>
@@ -90,7 +98,7 @@ const renderOfficeLink = (officesLink?: string) =>
       <a
         className={style(
           'text-primary-text',
-          `py-4 px-4 text-h5 font-light flex justify-between cursor-pointer`,
+          `p-4 text-h5 font-light flex justify-between cursor-pointer`,
           'shadow-main-black',
           'rounded-xl',
         )}
@@ -98,7 +106,7 @@ const renderOfficeLink = (officesLink?: string) =>
         rel="noopener noreferrer"
         aria-label="Отделения и банкоматы"
       >
-        <span>Отделения и банкоматы</span>
+        <span>Офисы и банкоматы</span>
         <Img
           image={{ icon: 'ArrowRightIcon', iconVersion: 'color' }}
           width="24"
@@ -108,3 +116,26 @@ const renderOfficeLink = (officesLink?: string) =>
       </a>
     </div>
   ) : null;
+
+const renderLocation = (location: Region, onClick?: () => void) => (
+  <div
+    className={style(
+      'text-primary-text',
+      `p-4 text-h5 font-light flex justify-between cursor-pointer`,
+      'shadow-main-black',
+      'rounded-xl',
+      'mt-3',
+    )}
+    onClick={onClick}
+  >
+    <div className="flex flex-col items-start">
+      <span>Ваша локация - {location.name}</span>
+    </div>
+    <Img
+      image={{ icon: 'ArrowRightIcon', iconVersion: 'color' }}
+      width="24"
+      height="24"
+      className="text-secondary-text opacity-30"
+    />
+  </div>
+);

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

@@ -2,7 +2,6 @@ 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 = {
@@ -16,7 +15,6 @@ export default {
         options={options}
         sticky={{ $ref: '/wcms-resources/sticky-mobile-menu.json' }}
       />
-      <PopupManager />
       <DialogManager />
     </div>
   ),

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

@@ -3,8 +3,8 @@ 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 { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { CloseButton } from '../../ui-kit/DialogManager/CloseButton';
-import { usePopupManager } from '../../ui-kit/PopupManager/usePopupManager';
+import { Dialog } from '../../ui-kit/DialogManager/Dialog';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { StickyBottomMenuBurger } from './StickyBottomMenuBurger';
 import { StickyBottomMenuItem } from './StickyBottomMenuItem';
@@ -21,10 +21,9 @@ interface CurrentActiveItem {
 // 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(
+  const [isBurgerMenuDialogOpen, { toggle, close, openDialog }] = useBurgerMenuDialog(
     rest.options?.page?.sitemap ?? {},
   );
-  const popup = usePopupManager();
 
   const middleIdx = Math.floor(menuItems.length / 2);
   const leftItems = menuItems.slice(0, middleIdx);
@@ -32,74 +31,67 @@ export const StickyBottomMenu = UniBlock<StickyBottomMenuProps>(({ sticky, ...re
 
   const [activeIndex, setActiveIndex] = useState(-1);
   const [currentItemPosition, setCurrentItemPosition] = useState<string>('');
-  const [popupState, { setFalse: setPopupClosed, setTrue: setPopupOpened }] = useBool();
+  const [popupDialogState, { setFalse: setPopupDialogClosed, setTrue: setPopupDialogOpened }] =
+    useBool();
 
-  const closePopup = useCallback(() => {
-    setPopupClosed();
+  const closePopupDialog = useCallback(() => {
+    setPopupDialogClosed();
     setActiveIndex(-1);
     setCurrentItemPosition('');
-    popup.close();
-  }, [popup]);
+    close();
+  }, [close]);
 
   const menuRef = useRef<HTMLDivElement | null>(null);
-  const popupRef = useOutsideClick<HTMLDivElement>(closePopup);
+  const popupDialogRef = useOutsideClick<HTMLDivElement>(closePopupDialog);
 
-  const openPopup = useCallback(
+  const openPopupDialog = useCallback(
     (index: number, itemsPosition: string) => {
-      setPopupOpened();
+      setPopupDialogOpened();
       close();
-      const menuDimensions = menuRef?.current?.getBoundingClientRect();
 
-      popup.open(
-        <div
+      openDialog(
+        <Dialog
           onClick={(e) => e.stopPropagation()}
-          className="sticky py-xl top-0 rounded-t-3xl bg-white z-10"
+          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="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>,
+          <div className="bg-white pb-24 pt-1 text-l" ref={popupDialogRef}></div>
+        </Dialog>,
         {
-          top:
-            Math.max(
-              globalThis.document?.documentElement?.clientHeight || 0,
-              globalThis.innerHeight || 0,
-            ) *
-              0.3 -
-            134,
-          left: menuDimensions?.left || 0,
-          width: menuDimensions?.width,
-          fixed: true,
+          id: itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title,
         },
       );
     },
-    [close, popup],
+    [close, closePopupDialog],
   );
 
   const handleMenuItemClick = useCallback(
     (index: number, itemsPosition: string) => {
       setCurrentItemPosition(itemsPosition);
       setActiveIndex(index);
-      openPopup(index, itemsPosition);
+      openPopupDialog(index, itemsPosition);
     },
-    [openPopup],
+    [openPopupDialog],
   );
 
   useEffect(() => {
-    if (!popupRef.current) {
+    if (!popupDialogRef.current) {
       return;
     }
 
-    if (!popupRef.current.shadowRoot) {
-      popupRef.current?.attachShadow({ mode: 'open' });
+    if (!popupDialogRef.current.shadowRoot) {
+      popupDialogRef.current?.attachShadow({ mode: 'open' });
     }
 
-    const shadowRoot = popupRef.current.shadowRoot;
+    const shadowRoot = popupDialogRef.current.shadowRoot;
     if (!shadowRoot) {
       return;
     }
@@ -109,7 +101,7 @@ export const StickyBottomMenu = UniBlock<StickyBottomMenuProps>(({ sticky, ...re
     } else {
       shadowRoot.innerHTML = rightItems[activeIndex]?.__html || '';
     }
-  }, [activeIndex, currentItemPosition, popupState]);
+  }, [activeIndex, currentItemPosition, popupDialogState]);
 
   return (
     <BlockWrapper className="h-[74px] z-[100] relative" defaultPadding="p-0" {...rest}>
@@ -120,7 +112,14 @@ export const StickyBottomMenu = UniBlock<StickyBottomMenuProps>(({ sticky, ...re
         {leftItems.map(
           renderMenuItem(handleMenuItemClick, 'left', { activeIndex, currentItemPosition }),
         )}
-        <StickyBottomMenuBurger isActive={isBurgerMenuDialogOpen} onClick={toggle} />
+        <StickyBottomMenuBurger
+          isActive={isBurgerMenuDialogOpen}
+          onClick={(e) => {
+            closePopupDialog();
+            e.stopPropagation();
+            toggle();
+          }}
+        />
         {rightItems.map(
           renderMenuItem(handleMenuItemClick, 'right', { activeIndex, currentItemPosition }),
         )}

package/src/components/StickyBottomMenu/StickyBottomMenuBurger.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
 
 interface StickyBottomMenuBurgerProps {
   isActive?: boolean;
-  onClick?: () => void;
+  onClick?: (e: PreventableEvent) => void;
 }
 
 export const StickyBottomMenuBurger = JSX<StickyBottomMenuBurgerProps>(({ isActive, onClick }) => (

package/src/components/StickyBottomMenu/useBurgerMenuDialog.tsx

@@ -1,5 +1,6 @@
+import { type VNode } from '../../model/VNode';
 import { isDialogOpen } from '../../ui-kit/DialogManager/isDialogOpen';
-import { useDialogManager } from '../../ui-kit/DialogManager/useDialogManager';
+import { useDialogManager, type DialogOptions } from '../../ui-kit/DialogManager/useDialogManager';
 import { useDialogsList } from '../../ui-kit/DialogManager/useDialogsList';
 import { BurgerMenuDialog, type BurgerMenuDialogProps } from './BurgerMenuDialog';
 
@@ -13,6 +14,7 @@ export const useBurgerMenuDialog = (
     open: () => void;
     close: () => void;
     toggle: () => void;
+    openDialog: (dialog: VNode, options: DialogOptions) => void;
   },
 ] => {
   const { open: openDialog, closeAll, close } = useDialogManager();
@@ -29,5 +31,5 @@ export const useBurgerMenuDialog = (
     }
   };
 
-  return [isBurgerMenuOpen, { open, close, toggle }];
+  return [isBurgerMenuOpen, { open, close, toggle, openDialog }];
 };

package/src/ui-kit/DialogManager/Dialog.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
+import { type PreventableEvent } from '../PreventableEvent';
 import { CloseButton } from './CloseButton';
 import { useDialogManager } from './useDialogManager';
 
@@ -9,9 +10,10 @@ export interface DialogProps {
   className?: string;
   head?: VNode;
   onClose?: () => void;
+  onClick?: (e: PreventableEvent) => void;
 }
 
-export const Dialog = JSX<DialogProps>(({ className, head, children, onClose }) => {
+export const Dialog = JSX<DialogProps>(({ className, head, children, onClose, onClick }) => {
   const { close } = useDialogManager();
 
   const handleClose = useCallback(() => {
@@ -20,7 +22,11 @@ export const Dialog = JSX<DialogProps>(({ className, head, children, onClose })
   }, [onClose]);
 
   return (
-    <div className={style('relative min-h-full bg-white pt-0 p-lg', className)} role="dialog">
+    <div
+      onClick={onClick}
+      className={style('relative min-h-full bg-white pt-0 p-lg', className)}
+      role="dialog"
+    >
       <div className="sticky py-xl top-0 bg-white z-10">
         <CloseButton className="absolute top-0 right-0" onClose={handleClose} />
         <div className="container">{head}</div>