@redneckz/wildless-cms-uni-blocks 0.14.196 → 0.14.198

package/bin/migration-scripts/0.14.189.js

@@ -0,0 +1,22 @@
+import { deleteProp, traversePageBlocks } from '../utils.js';
+
+export const description = 'v0.14.189';
+
+export default traversePageBlocks(adjustFiltratitonBlock);
+
+function adjustFiltratitonBlock(block) {
+  if (block?.type !== 'DepositFiltration' || !block?.blocks || block?.blocks?.length === 0) {
+    return;
+  }
+
+  block?.blocks.map((_) => {
+    if (_?.content?.sourceBook) {
+      _.content.paramsSource = {
+        $ref: `/wcms-resources/${_?.content?.sourceBook}.json`,
+      };
+      deleteProp(_.content, 'sourceBook');
+    }
+
+    return _;
+  });
+}

package/bundle/bundle.umd.js

@@ -74,11 +74,6 @@
         return JSXTmpl;
     };
 
-    const isSSR = () => Boolean(typeof globalThis.process === 'object' && globalThis.process && globalThis.process.version);
-
-    const isClient = !isSSR();
-    const ClientOnly = JSX(({ children }) => (isClient ? children : null));
-
     class EventBus {
         subscribers = {};
         subjectsStateMap = {};
@@ -156,6 +151,19 @@
         return (jsx(Tag, { className: style('@container font-sans', isGroup ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', padding || defaultPadding, className), ...(isGroup ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor } : {}), role: role, style: inlineStyles, children: children }));
     });
 
+    const isSSR = () => Boolean(typeof globalThis.process === 'object' && globalThis.process && globalThis.process.version);
+
+    const isClient = !isSSR();
+    const ClientOnly = JSX(({ children }) => (isClient ? children : null));
+
+    const GOLDEN_RATIO = 1.618;
+    const Shimmer = JSX(({ className, size }) => (jsx("figure", { className: style('m-0 mt-xl min-w-[80%]', className), children: renderShimmer(size) })));
+    const renderShimmer = (size = 3) => goldenSequence(100, size)
+        .map((_) => Math.floor(_))
+        .map(renderShimmerItem);
+    const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-xs bg-secondary-dark relative overflow-hidden animate-pulse" }, String(index)));
+    const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
+
     const headingTag = (tag) => tag;
 
     const styles$2 = {
@@ -765,6 +773,8 @@
         .filter((res) => res.status === 'fulfilled')
         .map(({ value }) => value));
 
+    const resolveBlockProps = (content, fallback) => resolveRef(content, (_) => fallback?.[_]);
+
     const useJSONRef = (content, fallback) => {
         const refs = collectRef(content);
         const [refsMap, setRefsMap] = useState({});
@@ -773,9 +783,7 @@
                 fetchRefs(refs).then(setRefsMap);
             }
         }, [refs.join()]);
-        return refs.length
-            ? resolveRef(content, (_) => refsMap[_] || fallback?.[_])
-            : content;
+        return refs.length ? resolveBlockProps(content, { ...fallback, ...refsMap }) : content;
     };
 
     const extractContent = ({ block, options, className, defaultPadding, padding, isTheme, version, children, ...content }) => content;
@@ -795,7 +803,7 @@
         const { items } = (props.options?.page?.adSourceBook ?? {});
         const tileIndex = useMemo(() => randomNumber(0, items?.length), [items]);
         const content = items?.[tileIndex];
-        return content ? (jsx(ClientOnly, { children: jsx(ProductBlock, { ...content, ...props }) })) : null;
+        return content ? (jsx(ClientOnly, { children: jsx(ProductBlock, { ...content, ...props }) })) : (jsx(BlockWrapper, { ...props, children: jsx(Shimmer, {}) }));
     });
     const randomNumber = (min = 0, max = 0) => Math.floor(Math.random() * (max - min) + min);
 
@@ -3433,6 +3441,42 @@
                             }, renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { className: style(topItemsCount < 1 ? 'hidden' : ''), disabled: !hiddenBlocks?.length, label: label, icon: ICONS$1[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette, onClick: onToggle })) })] })] }));
     });
 
+    const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
+        const handleChange = (newValue) => {
+            if (!onChange) {
+                return;
+            }
+            const hasAlready = value?.includes(newValue);
+            if (multiple) {
+                onChange(hasAlready ? (value || []).filter((v) => v !== newValue) : [...(value || []), newValue]);
+            }
+            else {
+                onChange(hasAlready ? [] : [newValue]);
+            }
+        };
+        return items.map((item) => (jsx(SlideCheckbox, { text: item?.title, value: [value].flatMap((_) => _).includes(item.value), onChange: () => handleChange(item.value), type: multiple ? 'checkbox' : 'radio' }, item.value)));
+    });
+
+    const renderFiltrationForm$1 = ({ field, reset, filtrationSchema, resetButton, children, }) => (jsxs("form", { className: "flex flex-col @4xl:flex-row justify-between bg-white p-4xl gap-s @4xl:gap-0", children: [jsxs("div", { className: "flex flex-col @4xl:flex-row gap-5xl", children: [children, Object.entries(filtrationSchema).map(renderFormItem(field))] }), resetButton ? (jsx("div", { children: jsx(Button, { type: "reset", className: "w-full @4xl:w-72 @4xl:ml-s", onClick: reset, children: resetButton?.text }) })) : null] }));
+    const renderFormItem = (field) => ([key, item]) => {
+        const type = item?.type;
+        switch (type) {
+            case 'array':
+                return renderCheckboxes(key, field)(item);
+            default:
+                return null;
+        }
+    };
+    const renderCheckboxes = (key, field) => (item) => {
+        const options = item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
+            [];
+        return (jsxs("div", { children: [item?.title ? (jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.title }) })) : null, jsx(SlideCheckboxGroup, { items: options, multiple: !item?.single, ...field(key) })] }, key));
+    };
+
+    function zip(firstCol, ...restCols) {
+        return firstCol.map((firstEl, rowIndex) => [firstEl, ...restCols.map((col) => col[rowIndex])]);
+    }
+
     const isEmpty = (v) => v === null ||
         v === undefined ||
         v === '' ||
@@ -3468,38 +3512,22 @@
         .every((predicate) => predicate(target));
     const naturalNumber = (n) => Number(n || 0);
 
-    const filterBlocks = (blocks, filtrationState) => (normalize = identity) => blocks && blocks.filter((b) => targetMatchPattern(filtrationState, normalize(b.content || {})));
-
-    const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
-        const handleChange = (newValue) => {
-            if (!onChange) {
-                return;
-            }
-            const hasAlready = value?.includes(newValue);
-            if (multiple) {
-                onChange(hasAlready ? (value || []).filter((v) => v !== newValue) : [...(value || []), newValue]);
-            }
-            else {
-                onChange(hasAlready ? [] : [newValue]);
-            }
-        };
-        return items.map((item) => (jsx(SlideCheckbox, { text: item?.title, value: [value].flatMap((_) => _).includes(item.value), onChange: () => handleChange(item.value), type: multiple ? 'checkbox' : 'radio' }, item.value)));
-    });
-
-    const renderFiltrationForm$1 = ({ field, reset, filtrationSchema, resetButton, children, }) => (jsxs("form", { className: "flex flex-col @4xl:flex-row justify-between bg-white p-4xl gap-s @4xl:gap-0", children: [jsxs("div", { className: "flex flex-col @4xl:flex-row gap-5xl", children: [children, Object.entries(filtrationSchema).map(renderFormItem(field))] }), resetButton ? (jsx("div", { children: jsx(Button, { type: "reset", className: "w-full @4xl:w-72 @4xl:ml-s", onClick: reset, children: resetButton?.text }) })) : null] }));
-    const renderFormItem = (field) => ([key, item]) => {
-        const type = item?.type;
-        switch (type) {
-            case 'array':
-                return renderCheckboxes(key, field)(item);
-            default:
-                return null;
-        }
-    };
-    const renderCheckboxes = (key, field) => (item) => {
-        const options = item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
-            [];
-        return (jsxs("div", { children: [item?.title ? (jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.title }) })) : null, jsx(SlideCheckboxGroup, { items: options, multiple: !item?.single, ...field(key) })] }, key));
+    const filterBlocks = (blocksWithProps, filtrationState) => (normalize = identity) => blocksWithProps
+        ?.filter(([, content]) => targetMatchPattern(filtrationState, normalize(content) || {}))
+        .map(([block]) => block);
+
+    const useFiltrationForm = (initialFormState, { block, page, normalize = identity, }) => {
+        const blocks = block?.blocks || [];
+        const [filtrationState, { field, reset, update: replaceFiltrationState }] = useForm(initialFormState);
+        const blocksWithProps = useMemo(() => zip(blocks, blocks.map((b) => resolveBlockProps(b.content, page?.fallback))), [blocks, page?.fallback]);
+        const blocksToRender = filtrationState === initialFormState
+            ? blocks
+            : filterBlocks(blocksWithProps, filtrationState)(normalize);
+        return [
+            filtrationState,
+            { blocksToRender, blocksWithProps },
+            { field, reset, update: replaceFiltrationState },
+        ];
     };
 
     const isRateRow = (rateRow) => {
@@ -3508,37 +3536,6 @@
 
     const numberRange = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
 
-    const getPeriod = (source, content) => unique((source[content?.sourceBook]?.rateRows || [])
-        .filter(isRateRow)
-        .flatMap((_) => numberRange(_.minMonths, _.maxMonths)));
-
-    const fetchMultitudeJSON = (...urls) => {
-        const fetchPromises = urls.map((url) => fetchJSON(url));
-        return Promise.all(fetchPromises);
-    };
-
-    function zip(firstCol, ...restCols) {
-        return firstCol.map((firstEl, rowIndex) => [firstEl, ...restCols.map((col) => col[rowIndex])]);
-    }
-
-    const getChildSourceBook = (blocks) => blocks?.filter(hasSourceBook).map(({ content: { sourceBook } }) => sourceBook);
-    const hasSourceBook = (block) => Boolean(block && block.content && typeof block.content.sourceBook === 'string');
-
-    function useDepositsPeriods(blocks) {
-        const { dirs = [], source = [] } = useMemo(() => {
-            const sourceBooks = getChildSourceBook(blocks);
-            return { dirs: sourceBooks?.map((url) => `/wcms-resources/${url}.json`), source: sourceBooks };
-        }, [blocks]);
-        const { data = [] } = useAsyncData(dirs, fetchMultitudeJSON);
-        return {
-            source: Object.fromEntries(zip(source, data).filter(([, sourceData]) => Boolean(sourceData))),
-            months: unique(data
-                .flatMap((item) => item?.rateRows || [])
-                .filter(isRateRow)
-                .flatMap((_) => numberRange(_.minMonths, _.maxMonths))).sort((a, b) => a - b) || [],
-        };
-    }
-
     const DEFAULT_MIN_SUM = 500;
     const DEFAULT_MAX_SUM = 1000000000;
     const initialFiltrationState$2 = {
@@ -3549,11 +3546,13 @@
         period: 3,
     };
     const DepositFiltration = UniBlock(({ className, filtrationSchema = {}, resetButton, sumInput, periodInput, ...rest }) => {
-        const { source, months } = useDepositsPeriods(rest.block?.blocks);
-        const [filtrationState, { field, reset }] = useForm(initialFiltrationState$2);
-        const blocksToRender = filtrationState === initialFiltrationState$2
-            ? rest.block?.blocks
-            : filterBlocks(rest.block?.blocks, filtrationState)((content) => ({ ...content, period: getPeriod(source, content || {}) || [] }));
+        const [, { blocksToRender, blocksWithProps }, { field, reset }] = useFiltrationForm(initialFiltrationState$2, {
+            block: rest.block,
+            page: rest.options?.page,
+            normalize: (content) => ({ ...content, period: getPeriod(content) }),
+        });
+        const rateRows = blocksWithProps.map(([, _]) => _?.paramsSource?.rateRows);
+        const months = getMonths(rateRows);
         const Inputs = (jsxs("div", { children: [jsx(CurrencyInput, { label: sumInput?.title, min: DEFAULT_MIN_SUM, max: DEFAULT_MAX_SUM, ...field('sum', {
                         parse: (min) => ({ min: Number(min), max: DEFAULT_MAX_SUM }),
                         format: ({ min }) => String(min),
@@ -3563,12 +3562,19 @@
         childrenTypes: ['ProductBlock'],
         childSchema: (content) => ({
             ...(content?.filtrationSchema || {}),
-            sourceBook: {
-                type: 'string',
+            paramsSource: {
+                type: 'object',
                 title: 'Адрес справочника',
             },
         }),
     });
+    const getPeriod = (content) => unique((content?.paramsSource?.rateRows || [])
+        .filter(isRateRow)
+        .flatMap((_) => numberRange(_.minMonths, _.maxMonths)));
+    const getMonths = (rateRows) => unique(rateRows
+        .flatMap((item) => item || [])
+        .filter(isRateRow)
+        .flatMap((_) => numberRange(_.minMonths, _.maxMonths))).sort((a, b) => a - b) || [];
 
     const DEFAULT_OPTIONS = [{ key: '10' }, { key: '50' }, { key: '100' }];
     const PageSizeSelector = ({ itemCount, onItemCountChange }) => {
@@ -4721,11 +4727,11 @@
         stage: [],
     };
     const MortgageFiltration = UniBlock(({ className, hotFilters, filtrationSchema = {}, resetButton, ...rest }) => {
-        const [filtrationState, { field, reset, update: replaceFiltrationState }] = useForm(initialFiltrationState);
-        const blocksToRender = filtrationState === initialFiltrationState
-            ? rest.block?.blocks
-            : filterBlocks(rest.block?.blocks, filtrationState)();
-        const handleFiltrationStateChange = useCallback((_ = initialFiltrationState) => replaceFiltrationState(_), []);
+        const [filtrationState, { blocksToRender }, { field, reset, update }] = useFiltrationForm(initialFiltrationState, {
+            block: rest.block,
+            page: rest.options?.page,
+        });
+        const handleFiltrationStateChange = useCallback((_ = initialFiltrationState) => update(_), []);
         const tabsControlProps = useHotFilters({
             hotFilters,
             filtrationState,
@@ -5210,14 +5216,6 @@
         return (jsx(BlockWrapper, { version: "transparent", className: style(className), defaultPadding: "p-0", ...rest, children: dataType === 'offices' ? jsx(OfficesMap, {}) : jsx(AtmsMap, { data: data }) }));
     });
 
-    const GOLDEN_RATIO = 1.618;
-    const Shimmer = JSX(({ className, size }) => (jsx("figure", { className: style('m-0 mt-xl min-w-[80%]', className), children: renderShimmer(size) })));
-    const renderShimmer = (size = 3) => goldenSequence(100, size)
-        .map((_) => Math.floor(_))
-        .map(renderShimmerItem);
-    const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-xs bg-secondary-light" }, String(index)));
-    const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
-
     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, {})] })));
 
     const ProductGallery = JSX(({ className = '', padding, slides = [], ...rest }) => {
@@ -6074,7 +6072,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.195";
+    const packageVersion = "0.14.197";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;