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

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

@@ -3,17 +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 { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
-import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import { ActiveSubMenuItem } from './ActiveSubMenuItem';
 import { TopItemMobile } from './TopItemMobile';
 
@@ -22,10 +18,7 @@ export interface BurgerMenuDialogProps extends SitemapData {
 }
 
 export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
-  const { topItems, defaultLocation, officesLink } = props;
-
-  const [location] = useLocation(defaultLocation);
-  const locationDialog = useLocationDialog(props);
+  const { topItems, officesLink } = props;
 
   const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
     itemCount: topItems?.length ?? 0,
@@ -60,7 +53,7 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
           <SwipeListContainer
             containerRef={containerRef}
             visibleItemCount={0}
-            gap={20}
+            gap={10}
             className="pb-3"
           >
             {topItems?.map((item, i) => (
@@ -73,11 +66,9 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
             ))}
           </SwipeListContainer>
         </div>
-        <div className="relative grow overflow-auto">
+        <div className="relative grow">
           {renderActiveSubMenu(activeMenuSubItems, activeRoute?.href)}
-          <SearchBar className="grow mb-5" {...props} />
           {renderOfficeLink(officesLink)}
-          {renderLocation(location, () => locationDialog.open())}
         </div>
       </div>
     </Dialog>
@@ -95,35 +86,25 @@ const renderActiveSubMenu = (activeMenuSubItems: LinkProps[] | undefined, basePa
 
 const renderOfficeLink = (officesLink?: string) =>
   officesLink ? (
-    <a
-      className="flex items-center mb-3"
-      href={officesLink}
-      rel="noopener noreferrer"
-      aria-label="Офисы и банкоматы"
-    >
-      <Img
-        image={{ icon: 'MapOpenedIcon', iconVersion: 'black' }}
-        width="24"
-        height="24"
-        className="text-primary-main box-border mr-xs bg-main-divider p-xs rounded-md"
-      />
-      <span>Офисы и банкоматы</span>
-    </a>
-  ) : null;
-
-const renderLocation = (location: Region, onClick?: () => void) => (
-  <div className="flex items-center text-s cursor-pointer" onClick={onClick}>
-    <Img
-      image={{ icon: 'GeolocationIcon', iconVersion: 'black' }}
-      width="24"
-      height="24"
-      className="text-primary-main box-border mr-xs bg-main-divider p-xs rounded-md"
-    />
-    <div className="flex flex-col items-start">
-      <Text size="text-h5">{location.name}</Text>
-      <Text color="text-secondary-text" size="text-s">
-        Ваша локация
-      </Text>
+    <div className="mt-3">
+      <a
+        className={style(
+          'text-primary-text',
+          `py-4 px-4 text-h5 font-light flex justify-between cursor-pointer`,
+          'shadow-main-black',
+          'rounded-xl',
+        )}
+        href={officesLink}
+        rel="noopener noreferrer"
+        aria-label="Отделения и банкоматы"
+      >
+        <span>Отделения и банкоматы</span>
+        <Img
+          image={{ icon: 'ArrowRightIcon', iconVersion: 'color' }}
+          width="24"
+          height="24"
+          className="text-secondary-text opacity-30"
+        />
+      </a>
     </div>
-  </div>
-);
+  ) : null;

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

@@ -22,7 +22,7 @@ export const StickyBottomMenu = UniBlock<StickyBottomMenuProps>(({ sticky, ...re
   const rightItems = menuItems.slice(middleIdx);
 
   return (
-    <BlockWrapper className="h-[74px]" defaultPadding="p-0" {...rest}>
+    <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))}
         <StickyBottomMenuBurger isActive={isBurgerMenuDialogOpen} onClick={toggle} />

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

@@ -9,12 +9,9 @@ interface TopItemProps {
 }
 
 export const TopItemMobile = ({ item, isActive, onClick }: TopItemProps) => (
-  <button type="button" className="relative" onClick={onClick}>
-    <span className={style('whitespace-nowrap', isActive ? 'text-primary-main' : '')}>
-      {item.text}
-    </span>
-    {isActive ? (
-      <div className="absolute left-0 right-0 -bottom-3 h-0.5 bg-primary-main group-data-transparent:bg-transparent" />
-    ) : null}
-  </button>
+  <div className={style('relative rounded-2xl p-2', isActive ? 'bg-primary-main' : 'bg-main-gray')}>
+    <button type="button" className="relative" onClick={onClick}>
+      <span className={style('whitespace-nowrap', isActive ? 'text-white' : '')}>{item.text}</span>
+    </button>
+  </div>
 );

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

@@ -20,7 +20,7 @@ export const Dialog = JSX<DialogProps>(({ className, head, children, onClose })
   }, [onClose]);
 
   return (
-    <div className={style('relative min-h-full bg-white pt-0 p-5', className)} role="dialog">
+    <div 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>

package/package.json

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

package/src/components/StickyBottomMenu/ActiveSubMenuItem.tsx

@@ -22,22 +22,26 @@ export const ActiveSubMenuItem = JSX<ActiveSubMenuItemProps>(({ item, basePath }
   const isActive = isHrefActive(router)({ href });
 
   return (
-    <a
-      className={style(
-        isActive ? 'text-primary-main' : 'text-primary-text',
-        `py-3 text-h5 font-light flex justify-between cursor-pointer`,
-      )}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {item.text}
-      <Img
-        image={{ icon: 'ChevronLeftIcon', iconVersion: 'black' }}
-        width="24"
-        height="24"
-        className="text-secondary-text rotate-180 opacity-30"
-      />
-    </a>
+    <div className="mt-3">
+      <a
+        className={style(
+          isActive ? 'text-primary-main' : 'text-primary-text',
+          `py-4 px-4 text-h5 font-light flex justify-between cursor-pointer`,
+          'shadow-main-black',
+          'rounded-xl',
+        )}
+        href={href}
+        target={target}
+        onClick={onClick}
+      >
+        {item.text}
+        <Img
+          image={{ icon: 'ArrowRightIcon', iconVersion: 'color' }}
+          width="24"
+          height="24"
+          className="text-secondary-text opacity-30"
+        />
+      </a>
+    </div>
   );
 });

package/src/components/StickyBottomMenu/BurgerMenuDialog.tsx

@@ -3,17 +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 { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
-import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
 import { ActiveSubMenuItem } from './ActiveSubMenuItem';
 import { TopItemMobile } from './TopItemMobile';
 
@@ -22,10 +18,7 @@ export interface BurgerMenuDialogProps extends SitemapData {
 }
 
 export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
-  const { topItems, defaultLocation, officesLink } = props;
-
-  const [location] = useLocation(defaultLocation);
-  const locationDialog = useLocationDialog(props);
+  const { topItems, officesLink } = props;
 
   const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
     itemCount: topItems?.length ?? 0,
@@ -60,7 +53,7 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
           <SwipeListContainer
             containerRef={containerRef}
             visibleItemCount={0}
-            gap={20}
+            gap={10}
             className="pb-3"
           >
             {topItems?.map((item, i) => (
@@ -73,11 +66,9 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
             ))}
           </SwipeListContainer>
         </div>
-        <div className="relative grow overflow-auto">
+        <div className="relative grow">
           {renderActiveSubMenu(activeMenuSubItems, activeRoute?.href)}
-          <SearchBar className="grow mb-5" {...props} />
           {renderOfficeLink(officesLink)}
-          {renderLocation(location, () => locationDialog.open())}
         </div>
       </div>
     </Dialog>
@@ -95,35 +86,25 @@ const renderActiveSubMenu = (activeMenuSubItems: LinkProps[] | undefined, basePa
 
 const renderOfficeLink = (officesLink?: string) =>
   officesLink ? (
-    <a
-      className="flex items-center mb-3"
-      href={officesLink}
-      rel="noopener noreferrer"
-      aria-label="Офисы и банкоматы"
-    >
-      <Img
-        image={{ icon: 'MapOpenedIcon', iconVersion: 'black' }}
-        width="24"
-        height="24"
-        className="text-primary-main box-border mr-xs bg-main-divider p-xs rounded-md"
-      />
-      <span>Офисы и банкоматы</span>
-    </a>
-  ) : null;
-
-const renderLocation = (location: Region, onClick?: () => void) => (
-  <div className="flex items-center text-s cursor-pointer" onClick={onClick}>
-    <Img
-      image={{ icon: 'GeolocationIcon', iconVersion: 'black' }}
-      width="24"
-      height="24"
-      className="text-primary-main box-border mr-xs bg-main-divider p-xs rounded-md"
-    />
-    <div className="flex flex-col items-start">
-      <Text size="text-h5">{location.name}</Text>
-      <Text color="text-secondary-text" size="text-s">
-        Ваша локация
-      </Text>
+    <div className="mt-3">
+      <a
+        className={style(
+          'text-primary-text',
+          `py-4 px-4 text-h5 font-light flex justify-between cursor-pointer`,
+          'shadow-main-black',
+          'rounded-xl',
+        )}
+        href={officesLink}
+        rel="noopener noreferrer"
+        aria-label="Отделения и банкоматы"
+      >
+        <span>Отделения и банкоматы</span>
+        <Img
+          image={{ icon: 'ArrowRightIcon', iconVersion: 'color' }}
+          width="24"
+          height="24"
+          className="text-secondary-text opacity-30"
+        />
+      </a>
     </div>
-  </div>
-);
+  ) : null;

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

@@ -22,7 +22,7 @@ export const StickyBottomMenu = UniBlock<StickyBottomMenuProps>(({ sticky, ...re
   const rightItems = menuItems.slice(middleIdx);
 
   return (
-    <BlockWrapper className="h-[74px]" defaultPadding="p-0" {...rest}>
+    <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))}
         <StickyBottomMenuBurger isActive={isBurgerMenuDialogOpen} onClick={toggle} />

package/src/components/StickyBottomMenu/TopItemMobile.tsx

@@ -9,12 +9,9 @@ interface TopItemProps {
 }
 
 export const TopItemMobile = ({ item, isActive, onClick }: TopItemProps) => (
-  <button type="button" className="relative" onClick={onClick}>
-    <span className={style('whitespace-nowrap', isActive ? 'text-primary-main' : '')}>
-      {item.text}
-    </span>
-    {isActive ? (
-      <div className="absolute left-0 right-0 -bottom-3 h-0.5 bg-primary-main group-data-transparent:bg-transparent" />
-    ) : null}
-  </button>
+  <div className={style('relative rounded-2xl p-2', isActive ? 'bg-primary-main' : 'bg-main-gray')}>
+    <button type="button" className="relative" onClick={onClick}>
+      <span className={style('whitespace-nowrap', isActive ? 'text-white' : '')}>{item.text}</span>
+    </button>
+  </div>
 );

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

@@ -20,7 +20,7 @@ export const Dialog = JSX<DialogProps>(({ className, head, children, onClose })
   }, [onClose]);
 
   return (
-    <div className={style('relative min-h-full bg-white pt-0 p-5', className)} role="dialog">
+    <div 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>