@redneckz/wildless-cms-uni-blocks 0.14.333 → 0.14.334

package/src/components/OfficesAtmsMap/useOffices.ts

@@ -1,20 +1,27 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import { fetchJSON } from '../../utils/fetchJSON';
-import { type Branch } from './OfficesAtmsMapProps';
+import { type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
 
 const EMPTY_VALUE = [];
 
 export function useOffices(regionCode?: string) {
   const { data = EMPTY_VALUE } = useAsyncData(
-    `/api/v1/branches?regionCode=${regionCode}`,
+    `/api/v1/branchesAndRemoteWorkplaces?regionCode=${regionCode}`,
     fetchMap,
   );
 
   return data;
 }
 
-const fetchMap = async (url: string): Promise<Branch[]> => {
-  const result = await fetchJSON<Branch[]>(url, { method: 'GET' });
+const fetchMap = async (
+  url: string,
+): Promise<{ branches: Branch[]; remoteWorkplaces: RemoteWorkplace[] }[]> => {
+  const result = await fetchJSON<{ branches: Branch[]; remoteWorkplaces: RemoteWorkplace[] }[]>(
+    url,
+    {
+      method: 'GET',
+    },
+  );
 
   return Array.isArray(result) ? result : EMPTY_VALUE;
 };

package/src/icons/IconName.ts

@@ -16,6 +16,7 @@ export const IconsWithoutInversion = new Set([
   'HouseIcon',
   'MagnifierIcon',
   'MapMarkerClusterIcon',
+  'MapMarkerClusterYellowIcon',
   'MapMarkerSingleIcon',
   'MapOpenedIcon',
   'MoneyInsuranceIcon',
@@ -93,6 +94,7 @@ export enum IconMap {
   MagnifierIcon = 'MagnifierIcon',
   MailIcon = 'MailIcon',
   MapMarkerClusterIcon = 'MapMarkerClusterIcon',
+  MapMarkerClusterYellowIcon = 'MapMarkerClusterYellowIcon',
   MapMarkerSingleIcon = 'MapMarkerSingleIcon',
   MapOpenedIcon = 'MapOpenedIcon',
   MinusIcon = 'MinusIcon',
@@ -200,6 +202,7 @@ export enum IconTitleMap {
   MagnifierIcon = 'MagnifierIcon',
   MailIcon = 'E-mail',
   MapMarkerClusterIcon = 'Маркер карты',
+  MapMarkerClusterYellowIcon = 'Маркер карты (желтый)',
   MapMarkerSingleIcon = 'Маркер карты РСХБ',
   MapOpenedIcon = 'Иконка Развёрнутая карта',
   MinusIcon = 'Минус',
@@ -248,7 +251,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Достижение', 'Деньги', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Стрелка сплошная \'Вверх\'', 'Банкомат', 'Банк', 'Белорусский флаг', 'Портфель', 'Здание с деревом', 'Бургер', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Карта', 'Кред. карта с галочкой', 'Инвестиции', 'Диаграмма (в круге)', 'Деньги внутри кошелька', 'Стрелка \'Влево\'', 'Китайский юань', 'Клиент', 'Крестик', 'Монеты', 'Конвертирование', 'Копирование', 'Здание суда', 'Кубок', 'Разработка', 'Скидка', 'Скачать документ', 'Документ', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Лого «Дзен»', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Факс', 'FullScreenIcon', 'Геолокация', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Сердцебеение', 'Ипотека', 'Лого «Huawei»', 'Замок', 'Logo', 'Лупа', 'MagnifierIcon', 'E-mail', 'Маркер карты', 'Маркер карты РСХБ', 'Иконка Развёрнутая карта', 'Минус', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Колокольчик нотификаций', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'PercentIcon', 'Персональная карта', 'Звонящий телефон', 'Телефон', 'Лого «PlayMarket»', 'Плюс в круге', 'Плюс', 'Профиль, 2 персоны', 'Профиль', 'Ошибка', 'Ок', 'Рубль (круг.)', 'Лого «Rustore»', 'Лого «Rutube»', 'Сейф', 'Безопасность', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Кольцо', 'Лого «Telegram»', 'Самолётик', 'Пользователь в рамке', 'Пользователь', 'Лого «VK»', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Лого «Youtube»'
+ *   'Достижение', 'Деньги', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Стрелка сплошная \'Вверх\'', 'Банкомат', 'Банк', 'Белорусский флаг', 'Портфель', 'Здание с деревом', 'Бургер', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Карта', 'Кред. карта с галочкой', 'Инвестиции', 'Диаграмма (в круге)', 'Деньги внутри кошелька', 'Стрелка \'Влево\'', 'Китайский юань', 'Клиент', 'Крестик', 'Монеты', 'Конвертирование', 'Копирование', 'Здание суда', 'Кубок', 'Разработка', 'Скидка', 'Скачать документ', 'Документ', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Лого «Дзен»', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Факс', 'FullScreenIcon', 'Геолокация', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Сердцебеение', 'Ипотека', 'Лого «Huawei»', 'Замок', 'Logo', 'Лупа', 'MagnifierIcon', 'E-mail', 'Маркер карты', 'Маркер карты (желтый)', 'Маркер карты РСХБ', 'Иконка Развёрнутая карта', 'Минус', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Колокольчик нотификаций', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'PercentIcon', 'Персональная карта', 'Звонящий телефон', 'Телефон', 'Лого «PlayMarket»', 'Плюс в круге', 'Плюс', 'Профиль, 2 персоны', 'Профиль', 'Ошибка', 'Ок', 'Рубль (круг.)', 'Лого «Rustore»', 'Лого «Rutube»', 'Сейф', 'Безопасность', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Кольцо', 'Лого «Telegram»', 'Самолётик', 'Пользователь в рамке', 'Пользователь', 'Лого «VK»', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Лого «Youtube»'
  * ]
  */
 export type IconName =
@@ -316,6 +319,7 @@ export type IconName =
   | 'MagnifierIcon'
   | 'MailIcon'
   | 'MapMarkerClusterIcon'
+  | 'MapMarkerClusterYellowIcon'
   | 'MapMarkerSingleIcon'
   | 'MapOpenedIcon'
   | 'MinusIcon'

package/src/icons/MapMarkerClusterYellowIcon.svg

@@ -0,0 +1 @@
+<svg title="Маркер карты (желтый)" viewBox="0 0 88 94" xmlns="http://www.w3.org/2000/svg" fill="none"><g opacity=".1" filter="url(#a)"><ellipse cx="44.5" cy="65.5" rx="11.5" ry="1.5" fill="#1C1C1C"/></g><g filter="url(#b)"><path fill-rule="evenodd" clip-rule="evenodd" d="M44 62.36c-1.506 2.197-1.507 2.196-1.507 2.196l-.006-.004-.014-.009-.045-.03-.156-.104a34.7 34.7 0 0 1-.561-.386 57.212 57.212 0 0 1-7.824-6.667C29.707 53.066 25 46.701 25 39.48c0-4.901 2.002-9.602 5.565-13.067C34.128 22.947 38.961 21 44 21c5.04 0 9.872 1.947 13.435 5.413C60.998 29.878 63 34.579 63 39.48c0 7.221-4.707 13.585-8.887 17.876a57.212 57.212 0 0 1-7.824 6.667 34.7 34.7 0 0 1-.717.49l-.045.03-.014.009-.004.003s-.003.002-1.509-2.195Zm0 0 1.506 2.197a2.78 2.78 0 0 1-3.013 0L44 62.36Z" fill="#CCA012"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M31 40c0-7.18 5.82-13 13-13s13 5.82 13 13-5.82 13-13 13-13-5.82-13-13Z" fill="#fff"/><defs><filter id="a" x="27" y="58" width="35" height="15" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_9189_125614"/></filter><filter id="b" x="0" y="0" width="88" height="94" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="12.5"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_9189_125614"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_9189_125614" result="shape"/></filter></defs></svg>

package/src/ui-kit/YandexMap/YandexMap.tsx

@@ -11,7 +11,7 @@ import { useYandexMaps } from './useYandexMaps';
 import { ZoomButton } from './ZoomButton';
 
 interface YandexMapProps {
-  points?: BalloonPoints[];
+  points: BalloonPoints[];
   className?: string;
   zoom?: number;
 }
@@ -42,10 +42,10 @@ export const YandexMap = JSX<YandexMapProps>(({ points, className = '', zoom = 5
           suppressMapOpenBlock: true,
         });
 
-        renderClusterer(yandexMaps, map.current, points);
+        renderClusterer({ yandexMaps, map: map.current, points });
       });
     } else if (yandexMaps) {
-      renderClusterer(yandexMaps, map.current, points);
+      renderClusterer({ yandexMaps, map: map.current, points });
 
       if (!points?.length) {
         map.current.setCenter(DEFAULT_CENTER_COORDS);

package/src/ui-kit/YandexMap/renderClusterer.ts

@@ -4,17 +4,71 @@
 import type ymaps from 'yandex-maps';
 import { type BalloonPoints } from '../../components/OfficesAtmsMap/YandexMapProps'; //! Вынести этот тип в файл YandexMapProps.ts расположенный в корне этого компонента
 
-export function renderClusterer(yandexMaps: typeof ymaps, map: ymaps.Map, points: BalloonPoints[]) {
+const MapMarkerClusterIcon = '/icons/MapMarkerClusterIcon.svg';
+const MapMarkerClusterYellowIcon = '/icons/MapMarkerClusterYellowIcon.svg';
+
+export function renderClusterer({
+  yandexMaps,
+  map,
+  points,
+}: {
+  yandexMaps: typeof ymaps;
+  map: ymaps.Map;
+  points: BalloonPoints[];
+}) {
   map.geoObjects.removeAll();
 
   const clusterIconContentLayout = yandexMaps.templateLayoutFactory.createClass(
     '<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>',
   );
 
-  const clusterer = new yandexMaps.Clusterer({
+  const officeClusterer = defineClusterer('offices', yandexMaps, clusterIconContentLayout);
+
+  if (points.length && points.every((_) => 'type' in _)) {
+    const remoteWorkplaceClusterer = defineClusterer(
+      'workplaces',
+      yandexMaps,
+      clusterIconContentLayout,
+    );
+
+    const remoteWorkplaceGeoObjects = defineGeoObjects(
+      points.filter((_) => _.type === 'workplaces'),
+      'workplaces',
+      yandexMaps,
+    );
+
+    const officesGeoObjects = defineGeoObjects(
+      points.filter((_) => _.type === 'offices'),
+      'offices',
+      yandexMaps,
+    );
+
+    officeClusterer.add(officesGeoObjects);
+    remoteWorkplaceClusterer.add(remoteWorkplaceGeoObjects);
+
+    map.geoObjects.add(remoteWorkplaceClusterer as any);
+    map.geoObjects.add(officeClusterer as any);
+  } else {
+    const geoObjects = defineGeoObjects(points, 'offices', yandexMaps);
+    officeClusterer.add(geoObjects);
+    map.geoObjects.add(officeClusterer as any);
+  }
+  map.setBounds(yandexMaps.util.bounds.fromPoints(points.map((_) => _.coords))).then(() => {
+    if (map.getZoom() > 10) {
+      map.setZoom(10);
+    }
+  });
+}
+
+const defineClusterer = (
+  type: string,
+  yandexMaps: typeof ymaps,
+  clusterIconContentLayout: ymaps.IClassConstructor<ymaps.layout.templateBased.Base>,
+) => {
+  return new yandexMaps.Clusterer({
     clusterIcons: [
       {
-        href: '/icons/MapMarkerClusterIcon.svg',
+        href: type === 'offices' ? MapMarkerClusterIcon : MapMarkerClusterYellowIcon,
         size: [78, 84],
         offset: [-35, -50],
       },
@@ -23,8 +77,10 @@ export function renderClusterer(yandexMaps: typeof ymaps, map: ymaps.Map, points
     clusterHideIconOnBalloonOpen: false,
     geoObjectHideIconOnBalloonOpen: false,
   } as ymaps.IClustererOptions);
+};
 
-  const geoObjects = points.map(
+const defineGeoObjects = (pointArr: BalloonPoints[], type: string, yandexMaps: typeof ymaps) => {
+  return pointArr.map(
     ({ coords, content }) =>
       new yandexMaps.Placemark(
         coords,
@@ -36,20 +92,10 @@ export function renderClusterer(yandexMaps: typeof ymaps, map: ymaps.Map, points
         },
         {
           iconLayout: 'default#image',
-          iconImageHref: '/icons/MapMarkerSingleIcon.svg',
+          iconImageHref: type === 'offices' ? MapMarkerClusterIcon : MapMarkerClusterYellowIcon,
           iconImageSize: [78, 84],
           iconImageOffset: [-35, -50],
         },
       ),
   );
-
-  clusterer.add(geoObjects);
-
-  map.geoObjects.add(clusterer as any);
-
-  map.setBounds(yandexMaps.util.bounds.fromPoints(points.map((_) => _.coords))).then(() => {
-    if (map.getZoom() > 10) {
-      map.setZoom(10);
-    }
-  });
-}
+};