@redneckz/wildless-cms-uni-blocks 0.14.575 → 0.14.576

package/bundle/bundle.umd.js

@@ -22,37 +22,6 @@
         };
     };
 
-    const getGeolocation = async () => new Promise((resolve) => navigator.geolocation.getCurrentPosition(({ coords }) => resolve(coords)));
-
-    function DaDataAPI(baseURL = '') {
-        async function getFetcherAddress() {
-            if (!('geolocation' in navigator)) {
-                return null;
-            }
-            try {
-                const coords = await getGeolocation();
-                const response = await fetch(`${baseURL}/geolocate`, {
-                    method: 'POST',
-                    mode: 'cors',
-                    body: JSON.stringify({
-                        lat: coords.latitude,
-                        lon: coords.longitude,
-                        count: 1,
-                    }),
-                });
-                const data = (await response.json());
-                return data?.suggestions?.[0]?.data?.city;
-            }
-            catch (e) {
-                console.error(e);
-                return null;
-            }
-        }
-        return {
-            getFetcherAddress,
-        };
-    }
-
     const jsx = (...args) => globalThis._uni._jsx(...args);
     const jsxs = (...args) => globalThis._uni._jsxs(...args);
 
@@ -1448,7 +1417,147 @@
 
     const DatePickerControl = JSX(({ className, label, error, ...rest }) => (jsxs("div", { className: style('shrink-0 w-full', className), children: [jsx(DatePicker, { label: label && rest?.errors ? `${label}*` : label, valid: Boolean(!error), ...rest }), renderErrorText(error)] })));
 
-    const InputControl = JSX(({ className, label, value = '', placeholder, error, onChange, onBlur, isTextarea, type, ...rest }) => (jsxs("div", { className: style('shrink-0 w-full', className), children: [jsx(Input, { type: type || 'text', "aria-label": label, label: label && rest?.errors ? `${label}*` : label, valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur, isTextarea: isTextarea, placeholder: rest?.errors && !label ? `${placeholder}*` : placeholder }), renderErrorText(error)] })));
+    const DEFAULT_HINTS_COUNT = 10;
+    const getResponseHandler = (response) => {
+        const responseData = response?.suggestions || [];
+        return responseData.map((item) => ({
+            ...item,
+            processedValue: item?.value,
+        }));
+    };
+    const getDaDataHints = (options) => {
+        const { url, query, requestData = {} } = options;
+        const result = fetch(`/api/v1/suggestions/${url}`, {
+            method: 'POST',
+            mode: 'cors',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                count: DEFAULT_HINTS_COUNT,
+                ...requestData,
+                query,
+            }),
+        })
+            .then((response) => response.json())
+            .then(getResponseHandler);
+        return result;
+    };
+
+    const NAME_HINTS_LIST_OPTIONS = {
+        url: 'suggest/fio',
+        requestData: {
+            parts: ['NAME'],
+            gender: 'UNKNOWN',
+        },
+    };
+    const SURNAME_HINTS_LIST_OPTIONS = {
+        url: 'suggest/fio',
+        requestData: {
+            parts: ['SURNAME'],
+            gender: 'UNKNOWN',
+        },
+    };
+    const PATRONYMIC_HINTS_LIST_OPTIONS = {
+        url: 'suggest/fio',
+        requestData: {
+            parts: ['PATRONYMIC'],
+            gender: 'UNKNOWN',
+        },
+    };
+    const EMAIL_HINTS_LIST_OPTIONS = {
+        url: 'suggest/email',
+    };
+    const hintsListsOptions = {
+        name: NAME_HINTS_LIST_OPTIONS,
+        surname: SURNAME_HINTS_LIST_OPTIONS,
+        middleName: PATRONYMIC_HINTS_LIST_OPTIONS,
+        email: EMAIL_HINTS_LIST_OPTIONS,
+    };
+
+    const debounce = (fn, delay = 600) => {
+        let timerId;
+        const debouncedCallback = (...args) => {
+            debouncedCallback.dispose();
+            timerId = setTimeout(() => {
+                fn(...args);
+            }, delay);
+        };
+        debouncedCallback.dispose = () => {
+            if (timerId) {
+                clearTimeout(timerId);
+            }
+        };
+        return debouncedCallback;
+    };
+
+    const InputPopup = JSX(({ options, onChange }) => (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl", role: "list", children: options?.map((item, key) => (jsx("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "listitem", onMouseDown: () => onChange(item.processedValue), children: jsx("span", { className: "min-h-6", children: item.processedValue }) }, key.toString()))) })));
+
+    function useInputPopup({ isOpen, value, name, onChange }) {
+        const prevInputValue = useRef(value);
+        const currentInputValue = useRef(value);
+        const [hintsList, setHintsList] = useState([]);
+        const popup = usePopupManager();
+        const defaultHintsListOptions = hintsListsOptions[name];
+        const close = useCallback(() => {
+            currentInputValue.current = value;
+            popup.close();
+        }, [value]);
+        const handleChange = useCallback((option) => {
+            close();
+            currentInputValue.current = option;
+            onChange && onChange(option);
+        }, [close, onChange]);
+        const inputRef = useRef(null);
+        const getHintsList = useMemo(() => async (searchValue) => {
+            if (!defaultHintsListOptions) {
+                return;
+            }
+            const result = await getDaDataHints({
+                url: defaultHintsListOptions.url,
+                requestData: {
+                    ...defaultHintsListOptions?.requestData,
+                },
+                query: searchValue,
+            });
+            if (result?.length) {
+                setHintsList(result);
+            }
+        }, []);
+        const debouncedGetHintsList = useMemo(() => debounce(getHintsList, 300), [getHintsList]);
+        useEffect(() => {
+            if (!isOpen || !inputRef.current || currentInputValue.current === value) {
+                close();
+                return;
+            }
+            const inputElement = inputRef.current;
+            const { top, left, width, height } = inputElement.getBoundingClientRect();
+            if (value && prevInputValue.current !== value) {
+                debouncedGetHintsList(value);
+                prevInputValue.current = value;
+            }
+            popup.update(jsx(InputPopup, { options: hintsList, value: value, onChange: handleChange }), {
+                top: top + globalThis.scrollY + height,
+                left,
+                width,
+            });
+        }, [isOpen, hintsList, value, handleChange]);
+        return inputRef;
+    }
+
+    const InputControl = JSX(({ className, label, value = '', placeholder, error, errors, onChange = noop, onBlur, isTextarea, type, name = '', dadata = false, }) => {
+        const [isOpen, { setFalse: close, setTrue: open }] = useBool();
+        const popupRef = useOutsideClick(close);
+        const inputRef = useInputPopup({
+            isOpen: isOpen && dadata,
+            name,
+            value,
+            onChange,
+        });
+        return (jsxs("div", { className: style('shrink-0 w-full', className), ref: popupRef, onBlur: close, onFocus: open, children: [jsx("div", { ref: inputRef, children: jsx(Input, { type: type || 'text', "aria-label": label, label: getLabel(errors, label), valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur, isTextarea: isTextarea, placeholder: getPlaceholder(placeholder, errors, label) }) }), renderErrorText(error)] }));
+    });
+    const getLabel = (errors, label) => (label && errors ? `${label}*` : label);
+    const getPlaceholder = (placeholder, errors, label) => errors && !label ? `${placeholder}*` : placeholder;
 
     const SelectControl = JSX(({ className = '', label, error, ...rest }) => (jsxs("div", { className: className, children: [jsx(Select, { ...rest, valid: !error, label: rest?.errors ? `${label}*` : label }), renderErrorText(error)] })));
 
@@ -1719,6 +1828,11 @@
 
     const ConsentToReceiveMaterialsField = JSX(({ field }) => (jsx(CheckboxWithError, { text: "\u0421\u043E\u0433\u043B\u0430\u0441\u0435\u043D \u043D\u0430 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u0435 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u043E\u043D\u043D\u044B\u0445 \u0438 \u0430\u043D\u0430\u043B\u0438\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u043E\u0432 \u043F\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u0435", ...field('consentToReceiveMaterials') })));
 
+    const EmailField = JSX(({ field, input }) => {
+        const { required, ...rest } = input;
+        return (jsx(InputControl, { label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...getValidation(field('email'), validatorObj.email, required), ...rest }));
+    });
+
     const FeedbackMethodField = JSX(({ field }) => (jsx(SelectControl, { label: "\u0421\u043F\u043E\u0441\u043E\u0431 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F \u043E\u0442\u0432\u0435\u0442\u0430", options: FEEDBACK_METHOD, ...withValidator(field('feedbackMethod'), validatorObj.feedbackMethod) })));
 
     const FeedbackTypeField = JSX(({ field }) => {
@@ -1753,7 +1867,7 @@
         return (jsx(SelectControl, { label: "\u041D\u0430\u0441\u0435\u043B\u0435\u043D\u043D\u044B\u0439 \u043F\u0443\u043D\u043A\u0442", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0433\u043E\u0440\u043E\u0434, \u0433\u0434\u0435 \u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0441\u0435\u0440\u0432\u0438\u0441", options: localities, ...getValidation(field('localities'), validatorObj.localities, input?.required), isSearch: true }));
     });
 
-    const MiddleNameField = JSX(({ field }) => (jsx(InputControl, { label: "\u041E\u0442\u0447\u0435\u0441\u0442\u0432\u043E (\u041E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E, \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438)", ...field('middleName') })));
+    const MiddleNameField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u041E\u0442\u0447\u0435\u0441\u0442\u0432\u043E (\u041E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E, \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438)", ...field('middleName'), ...input })));
 
     const NameField = JSX(({ field, input }) => {
         const { required, ...rest } = input;
@@ -1825,7 +1939,7 @@
 
     const ServiceDirectionField = JSX(({ field }) => (jsx(SelectControl, { label: "\u041D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u044F", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435", options: SERVICE_DIRECTIONS, ...withValidator(field('serviceDirection'), validatorObj.serviceDirection) })));
 
-    const SurnameField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0424\u0430\u043C\u0438\u043B\u0438\u044F", ...getValidation(field('surname'), validatorObj.surname, input?.required) })));
+    const SurnameField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0424\u0430\u043C\u0438\u043B\u0438\u044F", ...getValidation(field('surname'), validatorObj.surname, input?.required), ...input })));
 
     const MIN_CREDIT_TERM = 1;
     const MAX_CREDIT_TERM = 180;
@@ -1870,9 +1984,9 @@
         const InputsMap = {
             surname: jsx(SurnameField, { field: field, input: input }),
             name: jsx(NameField, { field: field, input: input }),
-            middleName: jsx(MiddleNameField, { field: field }),
+            middleName: jsx(MiddleNameField, { field: field, input: input }),
             phone: jsx(PhoneField, { field: field, input: input }),
-            email: (jsx(InputControl, { label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...getValidation(field('email'), validatorObj.email, required), ...rest })),
+            email: jsx(EmailField, { field: field, input: input }),
             fullName: (jsx(InputControl, { label: "\u0424\u0418\u041E", ...getValidation(field('fullName'), validatorObj.fullName, required), ...rest })),
             inn: (jsx(InputControl, { label: "\u0418\u041D\u041D", type: "number", ...getValidation(field('inn'), validatorObj.inn, required) })),
             comment: jsx(CommentField, { field: field, input: input }),
@@ -6731,11 +6845,10 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.574";
+    const packageVersion = "0.14.575";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;
-    exports.DaDataAPI = DaDataAPI;
     exports.handlerDecorator = handlerDecorator;
     exports.joinList = joinList;
     exports.packageVersion = packageVersion;