@redneckz/wildless-cms-uni-blocks 0.8.31 → 0.9.0

package/bundle/bundle.umd.js

@@ -763,9 +763,9 @@
 
     const renderSelects = ({ acquiringType, regions, region, handleChange }) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsx("div", { className: "w-1/2", children: jsx(WrapperSelect$1, { data: ACQUIRING_TYPES, fieldValue: "name", fieldLabel: "name", selected: acquiringType, setSelected: (value) => handleChange({ acquiringType: value }), label: "\u0412\u0438\u0434 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433\u0430", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433" }) }), jsx("div", { className: "w-1/2", children: jsx(WrapperSelect$1, { data: regions, fieldValue: "code", fieldLabel: "name", selected: region, setSelected: (value) => handleChange({ region: value }), label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441" }) })] }));
 
-    const SlideCheckbox = JSX(({ checked, text, onClick }) => (jsxs("div", { role: "checkbox", "aria-checked": checked, className: "flex justify-start items-center w-full cursor-pointer mb-4", onClick: () => onClick && onClick(), children: [jsx("div", { className: `relative duration-300 w-9 h-5 mr-3 rounded rounded-2xl ${checked ? 'bg-primary-main' : 'bg-main-divider'}`, children: jsx("div", { className: `absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded rounded-full ${checked ? 'left-[50%]' : 'left-[5%]'}` }) }), jsx("div", { children: jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: text }) })] })));
+    const SlideCheckbox = JSX(({ value = false, text, type = 'checkbox', onChange }) => (jsxs("div", { role: type, "aria-checked": value, className: "flex justify-start items-center w-full cursor-pointer mb-4", onClick: () => onChange && onChange(!value), children: [jsx("div", { className: `relative flex-shrink-0 duration-300 w-9 h-5 mr-3 rounded-2xl ${value ? 'bg-primary-main' : 'bg-main-divider'}`, children: jsx("div", { className: `absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full ${value ? 'left-[50%]' : 'left-[5%]'}` }) }), jsx("div", { children: jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: text }) })] })));
 
-    const renderSlideCheckboxes = ({ onlineСheckout, posTerminal, handleChange, }) => (jsxs("div", { className: "mb-5", children: [jsx(SlideCheckbox, { checked: onlineСheckout, text: "\u0425\u043E\u0447\u0443 \u043A\u0443\u043F\u0438\u0442\u044C \u043E\u043D\u043B\u0430\u0439\u043D-\u043A\u0430\u0441\u0441\u0443", onClick: () => handleChange({ onlineСheckout: !onlineСheckout }) }), jsx(SlideCheckbox, { checked: posTerminal, text: "\u0425\u043E\u0447\u0443 \u043A\u0443\u043F\u0438\u0442\u044C POS-\u0442\u0435\u0440\u043C\u0438\u043D\u0430\u043B", onClick: () => handleChange({ posTerminal: !posTerminal }) })] }));
+    const renderSlideCheckboxes = ({ onlineСheckout, posTerminal, handleChange, }) => (jsxs("div", { className: "mb-5", children: [jsx(SlideCheckbox, { value: onlineСheckout, text: "\u0425\u043E\u0447\u0443 \u043A\u0443\u043F\u0438\u0442\u044C \u043E\u043D\u043B\u0430\u0439\u043D-\u043A\u0430\u0441\u0441\u0443", onChange: () => handleChange({ onlineСheckout: !onlineСheckout }) }), jsx(SlideCheckbox, { value: posTerminal, text: "\u0425\u043E\u0447\u0443 \u043A\u0443\u043F\u0438\u0442\u044C POS-\u0442\u0435\u0440\u043C\u0438\u043D\u0430\u043B", onChange: () => handleChange({ posTerminal: !posTerminal }) })] }));
 
     const renderSubmitButton = (button, className) => {
         const buttonStyle = getRegularButtonClasses({
@@ -2524,6 +2524,95 @@
         return currencies?.filter((_) => _?.currency?.id === 1 || _?.currency?.id === 2) || [];
     };
 
+    const useForm = (initialState = {}) => {
+        const [formState, setFormState] = useState(initialState);
+        const handlersMap = useRef({});
+        const register = (fieldName) => {
+            if (!handlersMap.current) {
+                return {};
+            }
+            const handler = (value) => {
+                setFormState((prev) => ({ ...prev, [fieldName]: value }));
+            };
+            handlersMap.current[fieldName] ||= handler;
+            return { value: formState?.[fieldName], onChange: handlersMap.current[fieldName] };
+        };
+        const resetForm = useCallback(() => setFormState({}), []);
+        return { formState, register, resetForm };
+    };
+
+    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
+        const STATE_STYLE = 'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
+        const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5';
+        return (jsxs("button", { className: style('border border-transparent bg-primary-main font-sans text-white cursor-pointer', STATE_STYLE, DIMENSIONS_STYLE, disabled
+                ? 'bg-main-divider text-main-disabled cursor-not-allowed hover:bg-main-divider active:bg-main-divider'
+                : '', className), onClick: onClick, disabled: disabled, "data-theme": dataTheme, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(ImgInner, { image: {
+                        icon,
+                        iconVersion: 'white',
+                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20", asSVG: true })) : null] }));
+    });
+    const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
+        const labels = ['Развернуть', 'Скрыть'];
+        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
+        return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
+    };
+
+    const isSingularFieldMatch = (key, pattern) => (target) => pattern[key] === undefined || pattern[key] === target[key];
+    const isMultipleFieldMatch = (key, pattern) => (target) => pattern[key] === undefined || pattern[key]?.every((_) => target[key]?.includes(_));
+    const checkShouldRenderBlock = (pattern, target) => Object.entries(pattern)
+        .map(([key, subPattern]) => Array.isArray(subPattern)
+        ? isMultipleFieldMatch(key, pattern)
+        : isSingularFieldMatch(key, pattern))
+        .every((predicate) => predicate(target));
+
+    const ICONS = ['ArrowDownIcon', 'ArrowUpIcon'];
+    const resultsGridStyle = 'grid grid-cols-12 gap-1 border-box';
+    const FiltrationInner = JSX(({ label = '', filtrationState = {}, topItemsCount = 0, block, ...rest }) => {
+        const blocksToRender = block?.blocks?.filter((b) => checkShouldRenderBlock(filtrationState, b.content || {})) || [];
+        const [visibleBlocks, hiddenBlocks] = topItemsCount > 0
+            ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
+            : [blocksToRender, []];
+        return (jsxs("div", { children: [jsx("div", { className: style(blocksToRender.length ? 'hidden' : ''), children: jsx(ErrorBlock, { error: { errorContentType: 'Image' }, title: "\u041D\u0435\u0442 \u043F\u043E\u0434\u0445\u043E\u0434\u044F\u0449\u0435\u0439 \u0438\u043F\u043E\u0442\u0435\u0447\u043D\u043E\u0439 \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u044B", subtitle: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B" }) }), jsxs("div", { className: style(blocksToRender.length ? '' : 'hidden'), children: [jsx("div", { className: resultsGridStyle, children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
+                                return (jsx(FoldableSection, { className: resultsGridStyle, isUnfolded: isUnfolded, children: renderBlocksList(hiddenBlocks, { ...rest.options, parent: block }) }));
+                            }, renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { className: "mt-11", disabled: topItemsCount > hiddenBlocks.length, label: label, icon: ICONS[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette, onClick: onToggle })) })] })] }));
+    });
+
+    const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
+        const handleChange = (newValue) => {
+            if (multiple) {
+                const hasAlready = value?.includes(newValue);
+                onChange &&
+                    onChange(hasAlready ? value?.filter((v) => v !== newValue) : [...(value || []), newValue]);
+            }
+            else {
+                onChange && onChange(value === newValue ? undefined : 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 renderFormItem = (filtrationSchema, register) => (key) => {
+        const item = filtrationSchema[key];
+        const type = item?.type;
+        switch (type) {
+            case 'string':
+                return renderRadioButtons(key, register)(item);
+            default:
+                return null;
+        }
+    };
+    const renderRadioButtons = (key, register) => (item) => {
+        const options = item?.enum?.map((e, i) => ({ value: e, title: item?.enumNames?.[i] || '' })) || [];
+        return (jsxs("div", { role: "radiogroup", children: [item?.title ? (jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.title }) })) : null, jsx(SlideCheckboxGroup, { items: options, multiple: false, ...register(key) })] }, key));
+    };
+
+    const Filtration = JSX(({ className, filtrationSchema = {}, resetButton, ...rest }) => {
+        const { formState, register, resetForm } = useForm();
+        return (jsxs(BlockWrapper, { className: style('p-9', className), ...rest, children: [jsxs("form", { className: "flex justify-between", children: [jsx("div", { className: "flex gap-11", children: Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, register)) }), resetButton ? (jsx("div", { children: jsx(Button, { className: "w-72", text: resetButton.text, version: resetButton.buttonVersion, onClick: resetForm }) })) : null] }), jsx(FiltrationInner, { filtrationState: formState, ...rest })] }));
+    });
+    Filtration.childrenTypes = ['ProductTile'];
+    Filtration.childSchema = (content) => content?.filtrationSchema || {};
+
     function useSWRResource(filename, fallback = {}) {
         const { data } = useAsyncData(`/wcms-resources/${filename}.json`, fetchJSONUnsafe, {
             fallback,
@@ -3920,25 +4009,6 @@
         return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html }) }));
     });
 
-    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', onClick }) => {
-        const STATE_STYLE = 'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
-        const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5';
-        return (jsxs("button", { className: [
-                'border border-transparent bg-primary-main font-sans text-white cursor-pointer',
-                STATE_STYLE,
-                DIMENSIONS_STYLE,
-                className,
-            ].join(' '), "data-theme": dataTheme, onClick: onClick, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(ImgInner, { image: {
-                        icon,
-                        iconVersion: 'white',
-                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20", asSVG: true })) : null] }));
-    });
-    const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
-        const labels = ['Развернуть', 'Скрыть'];
-        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
-        return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
-    };
-
     const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `w-full border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: `grid grid-cols-12 gap-5 [&>*]:p-0`, isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, isUnfolded, onToggle }) }) })));
     RollupItem.childrenTypes = {
         exclude: ['RollupItem', 'Accordion', 'OtherProducts'],
@@ -4583,6 +4653,7 @@
         ContactsBlock,
         ErrorBlock,
         ExchangeRateTile,
+        Filtration,
         Footer,
         GracePeriod,
         Header,
@@ -4743,7 +4814,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.8.31";
+    const packageVersion = "0.9.0";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;