@redneckz/wildless-cms-uni-blocks 0.14.522 → 0.14.523

package/bundle/bundle.umd.js

@@ -5077,7 +5077,10 @@
 
     const MapMarkerClusterIcon = '/icons/MapMarkerClusterIcon.svg';
     const MapMarkerClusterYellowIcon = '/icons/MapMarkerClusterYellowIcon.svg';
-    function renderClusterer({ yandexMaps, map, points, }) {
+    function renderClusterer({ yandexMaps, map, points, isLoad, }) {
+        if (isLoad || !points?.length) {
+            return;
+        }
         map.geoObjects.removeAll();
         const clusterIconContentLayout = yandexMaps.templateLayoutFactory.createClass('<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>');
         const officeClusterer = defineClusterer('offices', yandexMaps, clusterIconContentLayout);
@@ -5185,17 +5188,19 @@
     //       Сейчас реализован поиск среди тестовых данных
     // TODO: Также выяснить что делать когда ничего не найдено
     // TODO: На макетах также когда есть поле поиска нет кнопки открыть на карте.
-    const YandexMap = JSX(({ points, className = '', zoom = 5 }) => {
+    const YandexMap = JSX(({ points, className = '', zoom = 5, isLoad }) => {
         const map = useRef(null);
         const yandexMaps = useYandexMaps();
         useEffect(() => {
-            if (!points?.length) {
-                return;
+            if (map.current) {
+                renderClusterer({ yandexMaps, map: map.current, points, isLoad });
+                map.current.setCenter(getCenterPoint(points));
             }
-            if (!map?.current) {
+            else {
                 yandexMaps?.ready(() => {
                     // Ready function may be called few times, but must be called once
                     if (map.current) {
+                        renderClusterer({ yandexMaps, map: map.current, points, isLoad });
                         return;
                     }
                     map.current = new yandexMaps.Map('map', {
@@ -5204,19 +5209,15 @@
                         controls: [],
                         suppressMapOpenBlock: true,
                     });
-                    renderClusterer({ yandexMaps, map: map.current, points });
+                    renderClusterer({ yandexMaps, map: map.current, points, isLoad });
                 });
             }
-            else if (yandexMaps) {
-                renderClusterer({ yandexMaps, map: map.current, points });
-                map.current.setCenter(getCenterPoint(points));
-            }
-        }, [yandexMaps, points, zoom]);
+        }, [yandexMaps, points, zoom, isLoad]);
         if (!yandexMaps) {
             return null;
         }
         const zIndex = 'z-10';
-        return (jsxs("div", { id: "map", className: style('relative', 'w-full', className), children: [jsxs("div", { className: style('absolute right-2 top-52 z-10 w-12 overflow-hidden border border-transparent rounded-md', zIndex), children: [jsx(ZoomButton, { yandexMaps: map }), jsx(ZoomButton, { yandexMaps: map, direction: "out" })] }), renderUserGeolocation(map, yandexMaps, style('right-2 top-80', zIndex))] }));
+        return (jsxs("div", { id: "map", className: style('relative', 'w-full', className), children: [isLoad ? jsx(Loader, {}) : null, jsxs("div", { className: style('absolute right-2 top-52 z-10 w-12 overflow-hidden border border-transparent rounded-md', zIndex), children: [jsx(ZoomButton, { yandexMaps: map }), jsx(ZoomButton, { yandexMaps: map, direction: "out" })] }), renderUserGeolocation(map, yandexMaps, style('right-2 top-80', zIndex))] }));
     });
     const getCenterPoint = (points) => {
         const centerCoords = [
@@ -5225,7 +5226,7 @@
         ];
         return centerCoords.every((_) => _) ? centerCoords : DEFAULT_CENTER_COORDS;
     };
-    const mapByIndex = (points, index) => points.map((_) => _.coords[index]);
+    const mapByIndex = (points, index) => points.map((_) => _.coords?.[index]);
     const getArraySumAndAverage = (arr) => arr.length && arr.reduce((a, b) => a + b) / arr.length;
 
     const renderDescriptionBlock$1 = ({ __html, list }) => __html || list?.length ? (jsxs("div", { className: "mb-2xl border-b sm:border border-main-divider sm:rounded-md", children: [__html ? (jsx("div", { className: "mb-2xl", children: jsx(RichText, { __html: __html }) })) : null, list?.length ? (jsx("div", { className: "flex flex-col sm:flex-row gap-2xl sm:flex-wrap pb-2xl sm:pb-xl", children: list.map((item, i) => (jsxs("div", { className: "flex gap-xs items-center", children: [item?.image ? jsx(Img, { image: item.image }) : null, item?.text ? (jsx(Text, { size: "text-m", font: "font-light", children: item.text })) : null] }, String(i)))) })) : null] })) : null;
@@ -5270,7 +5271,7 @@
     const defaultEmptyFunction = () => void 0;
     const defaultFilterItems = () => [];
     const filtersVisibleStyles = (activeButton) => activeButton === 'all' ? 'block' : 'hidden';
-    const OfficesAtmsMapLayout = JSX(({ className, data = [], remoteWorkplaces = [], renderCard = defaultEmptyFunction, renderRemoteWorkplaceCard = defaultEmptyFunction, filterItems = defaultFilterItems, getBalloon = defaultEmptyFunction, getBalloonRemoteWorkplaces = defaultEmptyFunction, initFilterState = {}, descriptionData, title, }) => {
+    const OfficesAtmsMapLayout = JSX(({ className, data = [], isLoad, remoteWorkplaces = [], renderCard = defaultEmptyFunction, renderRemoteWorkplaceCard = defaultEmptyFunction, filterItems = defaultFilterItems, getBalloon = defaultEmptyFunction, getBalloonRemoteWorkplaces = defaultEmptyFunction, initFilterState = {}, descriptionData, title, }) => {
         const onlyOffice = title?.includes('Офис');
         const [filtrationState, { field, reset }] = useForm(initFilterState);
         const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
@@ -5295,8 +5296,9 @@
             return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
         }, [data, remoteWorkplaces, filtrationState]);
         const [activeButton, setActiveButton] = useState('all');
-        return (jsxs("div", { className: style('space-y-1', className), children: [jsxs("div", { className: "bg-white", children: [jsxs("div", { className: "p-3xl pb-0", children: [jsx("div", { className: "flex flex-col sm:flex-row gap-xs mb-2xl", children: jsxs(Heading, { headingType: "h3", children: [jsx("span", { suppressHydrationWarning: true, children: title }), lengthItems ? (jsx(Text, { size: "text-h2", color: "text-secondary-text", children: jsx("span", { suppressHydrationWarning: true, children: ` (${lengthItems})` }) })) : null] }) }), descriptionData ? renderDescriptionBlock$1(descriptionData) : null, onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton), jsx("div", { className: style('pb-3xl', filtersVisibleStyles(activeButton)), children: renderFiltrationForm(Object.keys(initFilterState), { field, reset }, onlyOffice) })] }), jsx("div", { className: "h-[600px]", children: jsx(ClientOnly, { children: points?.length ? jsx(YandexMap, { points: points, className: "h-full" }) : jsx(Loader, {}) }) })] }), jsxs(ClientOnly, { children: [filteredItems.map(renderCard), filteredRemoteWorkplaces.map(renderRemoteWorkplaceCard)] })] }));
+        return (jsxs("div", { className: style('space-y-1', className), children: [jsxs("div", { className: "bg-white", children: [jsxs("div", { className: "p-3xl pb-0", children: [renderHeading(title, lengthItems), descriptionData ? renderDescriptionBlock$1(descriptionData) : null, onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton), jsx("div", { className: style('pb-3xl', filtersVisibleStyles(activeButton)), children: renderFiltrationForm(Object.keys(initFilterState), { field, reset }, onlyOffice) })] }), jsx("div", { className: "h-[600px]", children: jsx(ClientOnly, { children: jsx(YandexMap, { points: points, isLoad: isLoad, className: "h-full" }) }) })] }), jsxs(ClientOnly, { children: [filteredItems.map(renderCard), filteredRemoteWorkplaces.map(renderRemoteWorkplaceCard)] })] }));
     });
+    const renderHeading = (title, lengthItems) => (jsx("div", { className: "flex flex-col sm:flex-row gap-xs mb-2xl", children: jsxs(Heading, { headingType: "h3", children: [jsx("span", { suppressHydrationWarning: true, children: title }), lengthItems ? (jsx(Text, { size: "text-h2", color: "text-secondary-text", children: jsx("span", { suppressHydrationWarning: true, children: ` (${lengthItems})` }) })) : null] }) }));
     const renderButtonsGroup = (data, activeButton, onButtonClick) => {
         const allButtonVersion = getVersion(activeButton === 'all');
         const businessButtonVersion = getVersion(activeButton === 'business');
@@ -5370,8 +5372,9 @@
 
     const EMPTY_VALUE$2 = [];
     function useAtms(regionCode) {
-        const { data = EMPTY_VALUE$2 } = useAsyncData(`/api/v1/atms?regionCode=${regionCode}`, fetchMap$1);
-        return data;
+        const { data, error } = useAsyncData(`/api/v1/atms?regionCode=${regionCode}`, fetchMap$1);
+        const isLoad = !data && !error;
+        return { data: data || EMPTY_VALUE$2, isLoad };
     }
     const fetchMap$1 = async (url) => {
         const result = await fetchJSON(url, { method: 'GET' });
@@ -5394,11 +5397,11 @@
         locationDisabledPeople: (item) => Boolean(item.locationDisabledPeople),
         designDisabledPeople: (item) => Boolean(item.designDisabledPeople),
     };
-    const AtmsMap = JSX(({ data, className }) => {
+    const AtmsMap = JSX(({ descriptionData, className }) => {
         const [currentLocation] = useLocation();
         const regionCode = currentLocation?.code ?? '000';
-        const officesData = useAtms(regionCode);
-        return (jsx(OfficesAtmsMapLayout, { className: className, filterItems: filterItems$1, data: officesData, initFilterState: INITIAL_FILTRATION_STATE$1, renderCard: renderAtmCard, getBalloon: getAtmPoint, title: `Банкоматы филиала ${currentLocation?.name}`, descriptionData: data }));
+        const { data: officesData, isLoad } = useAtms(regionCode);
+        return (jsx(OfficesAtmsMapLayout, { className: className, filterItems: filterItems$1, data: officesData, isLoad: isLoad, initFilterState: INITIAL_FILTRATION_STATE$1, renderCard: renderAtmCard, getBalloon: getAtmPoint, title: `Банкоматы филиала ${currentLocation?.name}`, descriptionData: descriptionData }));
     });
     const filterItems$1 = (data, filtrationState) => {
         const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
@@ -5604,8 +5607,9 @@
 
     const EMPTY_VALUE$1 = { branches: [], remoteWorkplaces: [] };
     function useOffices(regionCode) {
-        const { data = EMPTY_VALUE$1 } = useAsyncData(`/api/v1/branchesAndRemoteWorkplaces?regionCode=${regionCode}`, fetchMap);
-        return data;
+        const { data, error } = useAsyncData(`/api/v1/branchesAndRemoteWorkplaces?regionCode=${regionCode}`, fetchMap);
+        const isLoad = !data && !error;
+        return { data: data || EMPTY_VALUE$1, isLoad };
     }
     const fetchMap = async (url) => {
         const result = await fetchJSON(url, {
@@ -5641,8 +5645,8 @@
     const OfficesMap = JSX(({ className }) => {
         const [currentLocation] = useLocation();
         const regionCode = currentLocation?.code ?? '000';
-        const officesData = useOffices(regionCode);
-        return (jsx(OfficesAtmsMapLayout, { className: className, filterItems: filterItems, data: officesData?.branches, remoteWorkplaces: officesData?.remoteWorkplaces, initFilterState: INITIAL_FILTRATION_STATE, renderCard: renderOfficeCard, renderRemoteWorkplaceCard: renderRemoteWorkplaceCard, getBalloon: getOfficePoint, getBalloonRemoteWorkplaces: getRemoteWorkplacePoint, title: `Офисы филиала ${currentLocation?.name}` }));
+        const { data, isLoad } = useOffices(regionCode);
+        return (jsx(OfficesAtmsMapLayout, { className: className, filterItems: filterItems, data: data?.branches, isLoad: isLoad, remoteWorkplaces: data?.remoteWorkplaces, initFilterState: INITIAL_FILTRATION_STATE, renderCard: renderOfficeCard, renderRemoteWorkplaceCard: renderRemoteWorkplaceCard, getBalloon: getOfficePoint, getBalloonRemoteWorkplaces: getRemoteWorkplacePoint, title: `Офисы филиала ${currentLocation?.name}` }));
     });
     const filterItems = (data, filtrationState) => {
         const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
@@ -5651,7 +5655,7 @@
 
     const OfficesAtmsMap = JSX(({ data, className, ...rest }) => {
         const dataType = data?.dataType ?? 'offices';
-        return (jsx(BlockWrapper, { version: "transparent", className: style(className), defaultPadding: "p-0", ...rest, children: dataType === 'offices' ? jsx(OfficesMap, {}) : jsx(AtmsMap, { data: data }) }));
+        return (jsx(BlockWrapper, { version: "transparent", className: style(className), defaultPadding: "p-0", ...rest, children: dataType === 'offices' ? jsx(OfficesMap, {}) : jsx(AtmsMap, { descriptionData: data }) }));
     });
 
     const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border', className), ...rest, children: [jsx(Headline, { className: "max-w-[600px]", title: title, description: description, headlineVersion: "L", align: "text-left", isEmbedded: true }), jsx(Shimmer, {})] })));
@@ -6447,7 +6451,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.521";
+    const packageVersion = "0.14.522";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;