@redneckz/wildless-cms-uni-blocks 0.13.13 → 0.13.14

package/src/components/Header/Header.tsx

@@ -28,8 +28,7 @@ export const Header = JSX<HeaderProps>(
 
     const { internetBankUrl } = useSWRResource<SitemapData>(
       projectSettings.PORTAL_DATA || 'portal-data',
-      {},
-      'portal-resources',
+      { folderName: 'portal-resources', setBasePath: true },
     );
 
     return (

package/src/components/StickyBottomMenu/ActiveSubMenu.tsx

@@ -4,12 +4,13 @@ import { ActiveSubMenuItem } from './ActiveSubMenuItem';
 
 interface ActiveSubMenuProps {
   activeMenuSubItems?: LinkProps[];
+  basePath?: string;
 }
-export const ActiveSubMenu = JSX<ActiveSubMenuProps>(({ activeMenuSubItems }) => {
+export const ActiveSubMenu = JSX<ActiveSubMenuProps>(({ activeMenuSubItems, basePath }) => {
   return activeMenuSubItems ? (
     <div className="mb-5">
       {activeMenuSubItems.map((_, i) => (
-        <ActiveSubMenuItem item={_} i={i} />
+        <ActiveSubMenuItem item={_} key={String(i)} basePath={basePath} />
       ))}
     </div>
   ) : null;

package/src/components/StickyBottomMenu/ActiveSubMenuItem.tsx

@@ -1,20 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkProps } from '../../model/LinkProps';
+import { projectSettings } from '../../ProjectSettings';
 import { useLink } from '../../hooks/useLink';
+import type { LinkProps } from '../../model/LinkProps';
 import { Img } from '../../ui-kit/Img/Img';
 
 interface ActiveSubMenuItemProps {
   item: LinkProps;
-  i: number;
+  basePath?: string;
 }
 
-export const ActiveSubMenuItem = JSX<ActiveSubMenuItemProps>(({ item, i }) => {
-  const link = useLink();
+export const ActiveSubMenuItem = JSX<ActiveSubMenuItemProps>(({ item, basePath }) => {
+  const isAnotherPortal =
+    projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;
+
+  const link = useLink({ isRemote: isAnotherPortal, basePath });
   const { href, target, onClick } = link(item);
 
   return (
     <a
-      key={`subItems-${String(i)}`}
       className="py-3 text-h5 font-light flex justify-between cursor-pointer"
       href={href}
       target={target}

package/src/components/StickyBottomMenu/BurgerMenuDialog.tsx

@@ -1,20 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { RefObject } from 'react';
+import { useActiveRoute } from '../../hooks/useActiveRoute';
 import { useLocation } from '../../hooks/useLocation';
-import { Img } from '../../ui-kit/Img/Img';
-import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import { Text } from '../../ui-kit/Text/Text';
-import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { useSitemap } from '../../services/sitemap/useSitemap';
+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 { useSitemap } from '../../services/sitemap/useSitemap';
-import { TopItemMobile } from './TopItemMobile';
+import { Text } from '../../ui-kit/Text/Text';
 import { ActiveSubMenu } from './ActiveSubMenu';
-import { Dialog } from '../../ui-kit/DialogManager/Dialog';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { RefObject } from 'react';
-import { useActiveRoute } from '../../hooks/useActiveRoute';
+import { TopItemMobile } from './TopItemMobile';
 
 interface BurgerMenuDialogProps extends UniBlockProps {
   containerRef?: RefObject<HTMLDivElement>;
@@ -25,19 +25,26 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
   const [location] = useLocation(defaultLocation);
   const locationDialog = useLocationDialog();
   const openLocationDialog = useCallback(() => locationDialog.open(), []);
-  const itemCount = Array.isArray(topItems) ? topItems.length : 0;
   const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
-    itemCount,
+    itemCount: topItems?.length ?? 0,
   });
-  const [activeTopItemIndex, activeRoute] = useActiveRoute(topItems);
+  const [activeIndex] = useActiveRoute(topItems);
+  const [activeTopItemIndex, setActiveTopItemIndex] = useState(activeIndex);
+  const activeRoute = useMemo(() => topItems?.[activeTopItemIndex], [topItems, activeTopItemIndex]);
   const activeMenuSubItems = activeRoute?.items || [];
 
+  useEffect(() => {
+    setActiveTopItemIndex(activeIndex);
+  }, [activeIndex]);
+
   useEffect(() => {
     if (activeTopItemIndex > 0) {
       scroll.scrollTo(activeTopItemIndex);
     }
   }, [activeTopItemIndex, scroll]);
 
+  const handleTopItemClick = useCallback((idx: number) => setActiveTopItemIndex(idx), []);
+
   return (
     <Dialog
       head={
@@ -55,12 +62,17 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>((props) => {
             className="pb-3"
           >
             {topItems?.map((item, i) => (
-              <TopItemMobile item={item} i={i} isActive={activeTopItemIndex === i} />
+              <TopItemMobile
+                item={item}
+                key={String(i)}
+                isActive={activeTopItemIndex === i}
+                onClick={() => handleTopItemClick(i)}
+              />
             ))}
           </SwipeListContainer>
         </div>
         <div className="relative grow overflow-auto">
-          <ActiveSubMenu activeMenuSubItems={activeMenuSubItems} />
+          <ActiveSubMenu activeMenuSubItems={activeMenuSubItems} basePath={activeRoute?.href} />
           <SearchBar className="grow mb-5" />
           {renderOfficeLink(officesLink)}
           <div className="flex items-center text-s cursor-pointer" onClick={openLocationDialog}>

package/src/components/StickyBottomMenu/RenderItem.tsx

@@ -1,17 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { MenuItemProps } from './StickyBottomMenuProps';
-import { style } from '../../utils/style';
-import { Img } from '../../ui-kit/Img/Img';
+import { projectSettings } from '../../ProjectSettings';
 import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/JSXBlock';
+import { Img } from '../../ui-kit/Img/Img';
+import { style } from '../../utils/style';
+import type { MenuItemProps } from './StickyBottomMenuProps';
 
-interface RenderItemProps extends UniBlockProps {
+interface RenderItemProps {
   item: MenuItemProps;
-  idx: number;
   onClick?: () => void;
 }
-export const RenderItem = JSX<RenderItemProps>(({ item, idx, onClick }) => {
-  const link = useLink();
+
+export const RenderItem = JSX<RenderItemProps>(({ item, onClick }) => {
+  const isAnotherPortal = projectSettings?.BASE_PATH
+    ? !item.url?.startsWith(projectSettings?.BASE_PATH)
+    : true;
+
+  const link = useLink({ isRemote: isAnotherPortal });
   const {
     href,
     target,
@@ -23,7 +27,6 @@ export const RenderItem = JSX<RenderItemProps>(({ item, idx, onClick }) => {
 
   return (
     <a
-      key={`menuItems-${String(idx)}`}
       className={style(
         item.isActive ? 'text-primary-main' : 'text-primary-text',
         `w-10 m-4 flex justify-center items-center flex-col text-[10px] cursor-pointer`,
@@ -35,8 +38,8 @@ export const RenderItem = JSX<RenderItemProps>(({ item, idx, onClick }) => {
       <Img
         className="w-6 h-6"
         image={{
-          icon: item.icon?.icon,
-          iconVersion: item.icon?.iconVersion || 'black',
+          icon: item?.icon?.icon,
+          iconVersion: item?.icon?.iconVersion || 'black',
         }}
       />
       {item.title}

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

@@ -10,8 +10,7 @@ import { useBurgerMenuDialog } from './useBurgerMenuDialog';
 export const StickyBottomMenu = JSX<StickyBottomMenuProps>(({ ...rest }) => {
   const { menuItems = [] } = useSWRResource<StickyBottomMenuProps>(
     projectSettings.STICKY_MOBILE_MENU || 'sticky-mobile-menu',
-    rest.options?.page?.fallback,
-    'portal-resources',
+    { fallback: rest.options?.page?.fallback, folderName: 'portal-resources', setBasePath: true },
   );
 
   const [isBurgerMenuDialogOpen, { toggle }] = useBurgerMenuDialog();

package/src/components/StickyBottomMenu/TopItemMobile.tsx

@@ -1,32 +1,20 @@
 import type { TopMenuItemProps } from '../../services/sitemap/SitemapData';
+import { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
-import { useLink } from '../../hooks/useLink';
 
 interface TopItemProps {
   item: TopMenuItemProps;
-  i: number;
   isActive: boolean;
+  onClick: (ev?: PreventableEvent) => void;
 }
 
-export const TopItemMobile = ({ item, i, isActive }: TopItemProps) => {
-  const link = useLink();
-  const { href, target, onClick } = link(item);
-
-  return (
-    <a
-      key={String(i)}
-      href={href}
-      target={target}
-      onClick={onClick}
-      className="relative"
-      aria-label={item.text}
-    >
-      <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}
-    </a>
-  );
-};
+export const TopItemMobile = ({ item, isActive, onClick }: TopItemProps) => (
+  <button type="button" 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>
+);

package/src/components/StickyBottomMenu/renderMenuItems.tsx

@@ -6,7 +6,7 @@ export const renderMenuItems = (menuItems: MenuItemProps[], onClick?: () => void
   <BlockWrapper className="sticky bottom-0 left-0 right-0 bg-transparent z-[100]" padding="p-0">
     <div className="ml-auto container bg-white flex justify-center shadow-blue-gray">
       {menuItems.map((_, i) => (
-        <RenderItem item={_} idx={i} onClick={onClick} />
+        <RenderItem item={_} key={String(i)} onClick={onClick} />
       ))}
     </div>
   </BlockWrapper>

package/src/hooks/useSWRResource.ts

@@ -1,20 +1,33 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { projectSettings } from '../ProjectSettings';
 import type { Fallback } from '../model/Fallback';
 import { fetchJSONUnsafe } from '../utils/fetchJSON';
+import { joinPath } from '../utils/url';
 
 const EMPTY_VALUE = {};
 const DEFAULT_FOLDER_NAME = 'wcms-resources';
 
+interface SWRResourceOptions {
+  fallback?: Fallback;
+  folderName?: string;
+  setBasePath?: boolean;
+}
+
 export function useSWRResource<Data>(
   filename: string | null | undefined,
-  fallback: Fallback = EMPTY_VALUE,
-  folderName: string = DEFAULT_FOLDER_NAME,
+  options: SWRResourceOptions = {},
 ): Data {
-  const { data } = useAsyncData<Data, any, string | null>(
-    filename ? `/${folderName}/${filename}.json` : null,
-    fetchJSONUnsafe,
-    { fallback },
+  const { fallback = EMPTY_VALUE, folderName = DEFAULT_FOLDER_NAME, setBasePath = false } = options;
+
+  const path = joinPath(
+    setBasePath ? projectSettings.BASE_PATH : '',
+    folderName,
+    `${filename}.json`,
   );
 
+  const { data } = useAsyncData<Data, any, string | null>(filename ? path : null, fetchJSONUnsafe, {
+    fallback,
+  });
+
   return data || (EMPTY_VALUE as Data);
 }

package/src/icons/IconName.ts

@@ -233,7 +233,7 @@ export enum IconTitleMap {
   GridIcon = 'Сетка (белая)',
   HeadphonesIcon = 'HeadphonesIcon',
   HeartIcon = 'Сердце',
-  HouseIcon = 'HouseIcon',
+  HouseIcon = 'Ипотека',
   HuaweiIcon = 'Лого «Huawei»',
   InterestGrowthIcon = 'Диаграмма роста',
   InterestIcon = 'Скидка',
@@ -297,7 +297,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Стрелка сплошная \'Вверх\'', 'Банкомат', 'Сумка', 'Банк', 'Белорусский флаг', 'BriefcaseIcon', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Инвестиции', 'Деньги внутри кошелька', 'Стрелка \'Влево\'', 'Кинотеатр', 'Клиент', 'Часы', 'Крестик', 'Кресло', 'Здание суда', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'HouseIcon', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'E-mail', 'Маркер карты', 'Маркер карты РСХБ', 'Иконка Развёрнутая карта', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Телефон', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Ошибка', 'Ок', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
+ *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Стрелка сплошная \'Вверх\'', 'Банкомат', 'Сумка', 'Банк', 'Белорусский флаг', 'BriefcaseIcon', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Инвестиции', 'Деньги внутри кошелька', 'Стрелка \'Влево\'', 'Кинотеатр', 'Клиент', 'Часы', 'Крестик', 'Кресло', 'Здание суда', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Ипотека', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'E-mail', 'Маркер карты', 'Маркер карты РСХБ', 'Иконка Развёрнутая карта', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Телефон', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Ошибка', 'Ок', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
  * ]
  */
 export type IconName =

package/src/services/sitemap/useSitemap.ts

@@ -4,4 +4,4 @@ import { projectSettings } from '../../ProjectSettings';
 import type { SitemapData } from './SitemapData';
 
 export const useSitemap = (fallback?: Fallback) =>
-  useSWRResource<SitemapData>(projectSettings.SITEMAP || 'sitemap', fallback);
+  useSWRResource<SitemapData>(projectSettings.SITEMAP || 'sitemap', { fallback });

package/src/ui-kit/SwipeListControl/useSwipeListScroll.ts

@@ -70,9 +70,13 @@ export const useSwipeListScroll = <E extends HTMLElement>({
   }, [itemCount, canScrollRight]);
 
   const scrollTo = useCallback(
-    (idx) => {
+    (idx: number) => {
       if (containerRef?.current) {
-        containerRef.current.children[idx]?.scrollIntoView();
+        containerRef.current.children[idx]?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'center',
+        });
       }
     },
     [containerRef],