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

package/mobile/lib/ui-kit/Input/useInputPopup.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getDaDataHints } from '../../api/dadataHints/dadataHints.js';
+import { hintsListsOptions } from '../../api/dadataHints/hintsListsOptions.js';
+import { debounce } from '../../utils/debounce.js';
+import { usePopupManager } from '../PopupManager/usePopupManager.js';
+import { InputPopup } from './InputPopup.js';
+export 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;
+}
+//# sourceMappingURL=useInputPopup.js.map

package/mobile/lib/ui-kit/Input/useInputPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInputPopup.js","sourceRoot":"","sources":["../../../src/ui-kit/Input/useInputPopup.tsx"],"names":[],"mappings":"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"}

package/mobile/src/api/LeadServiceAPI.ts

@@ -2,20 +2,6 @@ import { type JSONRecord, type JSONScalar } from '@redneckz/json-op';
 import { formatDate } from '../utils/formatDate';
 import { formatPhone } from '../utils/formatPhone';
 
-interface DaDataSuggestion<T> {
-  value?: string;
-  unrestricted_value?: string;
-  data?: T;
-}
-
-interface DaDataAddress {
-  city?: string | null;
-}
-
-export interface DaDataResult {
-  suggestions?: DaDataSuggestion<DaDataAddress>[];
-}
-
 export type LeadRequest = Record<string, JSONRecord | JSONScalar | null> & {
   typeForm?: string;
   addressBranch?: string;

package/mobile/src/api/dadataHints/dadataHints.ts

@@ -0,0 +1,33 @@
+import { type DaDataSuggestion, type ListRequestOption } from './dadataHintsType';
+
+const DEFAULT_HINTS_COUNT = 10;
+
+const getResponseHandler = (response: { suggestions: Array<DaDataSuggestion> }) => {
+  const responseData: Array<DaDataSuggestion> = response?.suggestions || [];
+
+  return responseData.map((item) => ({
+    ...item,
+    processedValue: item?.value,
+  }));
+};
+
+export const getDaDataHints = (options: ListRequestOption): Promise<Array<DaDataSuggestion>> => {
+  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;
+};

package/mobile/src/api/dadataHints/dadataHintsType.ts

@@ -0,0 +1,33 @@
+import { type Nullable } from '../../utils/Nullable';
+import { type HintOption } from './hintsListsOptions';
+
+export interface DaDataSuggestion {
+  value: string;
+  unrestricted_value: string;
+  data: DaDataResponseItem;
+  processedValue: string;
+}
+
+export type DaDataGender = 'MALE' | 'FEMALE' | 'UNKNOWN';
+
+export interface DaDataFio {
+  surname: Nullable<string>;
+  name: Nullable<string>;
+  patronymic: Nullable<string>;
+  gender: DaDataGender;
+  qc: '0' | '1';
+  source: null;
+}
+
+export interface DaDataEmail {
+  domain: Nullable<string>;
+  local: string;
+}
+
+export type DaDataResponseItem = DaDataFio | DaDataEmail;
+
+export interface ListRequestOption {
+  url: string;
+  query?: string;
+  requestData?: HintOption['requestData'];
+}

package/mobile/src/api/dadataHints/hintsListsOptions.ts

@@ -0,0 +1,44 @@
+export const NAME_HINTS_LIST_OPTIONS = {
+  url: 'suggest/fio',
+  requestData: {
+    parts: ['NAME'],
+    gender: 'UNKNOWN',
+  },
+};
+
+export const SURNAME_HINTS_LIST_OPTIONS = {
+  url: 'suggest/fio',
+  requestData: {
+    parts: ['SURNAME'],
+    gender: 'UNKNOWN',
+  },
+};
+
+export const PATRONYMIC_HINTS_LIST_OPTIONS = {
+  url: 'suggest/fio',
+  requestData: {
+    parts: ['PATRONYMIC'],
+    gender: 'UNKNOWN',
+  },
+};
+
+export const EMAIL_HINTS_LIST_OPTIONS = {
+  url: 'suggest/email',
+};
+
+export type HintsListOptions = Record<string, HintOption>;
+
+export const hintsListsOptions: HintsListOptions = {
+  name: NAME_HINTS_LIST_OPTIONS,
+  surname: SURNAME_HINTS_LIST_OPTIONS,
+  middleName: PATRONYMIC_HINTS_LIST_OPTIONS,
+  email: EMAIL_HINTS_LIST_OPTIONS,
+};
+
+export type HintOption = {
+  url: string;
+  requestData?: {
+    parts?: string[];
+    gender?: string;
+  };
+};

package/mobile/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -75,6 +75,7 @@ export type FieldDefaultDef = Required &
   LabelProps &
   ConditionFieldProps & {
     name: NameFieldDef;
+    dadata?: boolean;
   };
 
 /**

package/mobile/src/components/ApplicationLeadForm/ApplicationLeadFormContent.ts

@@ -85,6 +85,7 @@ export type FieldDefaultDef = Required &
 export type FieldCommonDef = FieldDefaultDef & {
   /** @default "common" */
   fieldType: 'common';
+  dadata?: boolean;
 };
 
 /**

package/mobile/src/index.ts

@@ -1,6 +1,5 @@
 export { setupHooks } from '@redneckz/uni-jsx/lib/hooks';
 export { setup } from '@redneckz/uni-jsx/lib/setup';
-export { DaDataAPI } from './api/DaDataAPI';
 export { Blocks } from './components/Blocks';
 export { ContentPage } from './components/ContentPage/ContentPage';
 export { handlerDecorator } from './hooks/handlerDecorator';

package/mobile/src/ui-kit/FormField/Fields/EmailField.tsx

@@ -0,0 +1,18 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type FieldDef } from '../../../components/ApplicationForm/ApplicationFormContent';
+import { InputControl } from '../../Input/InputControl';
+import { type CustomFieldProps } from '../CustomFieldProps';
+import { validatorObj } from '../getObjectValidator';
+import { getValidation } from '../getValidation';
+
+export const EmailField = JSX<CustomFieldProps>(({ field, input }) => {
+  const { required, ...rest } = input as FieldDef;
+
+  return (
+    <InputControl
+      label="Электронная почта"
+      {...getValidation(field('email'), validatorObj.email, required)}
+      {...rest}
+    />
+  );
+});

package/mobile/src/ui-kit/FormField/Fields/MiddleNameField.tsx

@@ -2,6 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { InputControl } from '../../Input/InputControl';
 import { type CustomFieldProps } from '../CustomFieldProps';
 
-export const MiddleNameField = JSX<CustomFieldProps>(({ field }) => (
-  <InputControl label="Отчество (Обязательно, при наличии)" {...field('middleName')} />
+export const MiddleNameField = JSX<CustomFieldProps>(({ field, input }) => (
+  <InputControl label="Отчество (Обязательно, при наличии)" {...field('middleName')} {...input} />
 ));

package/mobile/src/ui-kit/FormField/Fields/SurnameField.tsx

@@ -8,5 +8,6 @@ export const SurnameField = JSX<CustomFieldProps>(({ field, input }) => (
   <InputControl
     label="Фамилия"
     {...getValidation(field('surname'), validatorObj.surname, input?.required)}
+    {...input}
   />
 ));

package/mobile/src/ui-kit/FormField/getField.tsx

@@ -14,6 +14,7 @@ import { ConsentInformField } from './Fields/ConsentInformField';
 import { ConsentPhotoFlg } from './Fields/ConsentPhotoField';
 import { ConsentProviderField } from './Fields/ConsentProviderField';
 import { ConsentToReceiveMaterialsField } from './Fields/ConsentToReceiveMaterialsField';
+import { EmailField } from './Fields/EmailField';
 import { FeedbackMethodField } from './Fields/FeedbackMethodField';
 import { FeedbackTypeField } from './Fields/FeedbackTypeField';
 import { IsClientField } from './Fields/IsClientField';
@@ -51,15 +52,9 @@ export const getField =
     const InputsMap = {
       surname: <SurnameField field={field} input={input} />,
       name: <NameField field={field} input={input} />,
-      middleName: <MiddleNameField field={field} />,
+      middleName: <MiddleNameField field={field} input={input} />,
       phone: <PhoneField field={field} input={input} />,
-      email: (
-        <InputControl
-          label="Электронная почта"
-          {...getValidation(field('email'), validatorObj.email, required)}
-          {...rest}
-        />
-      ),
+      email: <EmailField field={field} input={input} />,
       fullName: (
         <InputControl
           label="ФИО"

package/mobile/src/ui-kit/Input/InputControl.tsx

@@ -1,8 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
+import { noop } from '../../utils/noop';
 import { style } from '../../utils/style';
 import { Input } from './Input';
 import { type InputProps } from './InputProps';
 import { renderErrorText } from './renderErrorText';
+import { useInputPopup } from './useInputPopup';
 
 export const InputControl = JSX<InputProps>(
   ({
@@ -11,25 +15,51 @@ export const InputControl = JSX<InputProps>(
     value = '',
     placeholder,
     error,
-    onChange,
+    errors,
+    onChange = noop,
     onBlur,
     isTextarea,
     type,
-    ...rest
-  }) => (
-    <div className={style('shrink-0 w-full', className)}>
-      <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)}
-    </div>
-  ),
+    name = '',
+    dadata = false,
+  }) => {
+    const [isOpen, { setFalse: close, setTrue: open }] = useBool();
+    const popupRef = useOutsideClick<HTMLDivElement>(close);
+
+    const inputRef = useInputPopup({
+      isOpen: isOpen && dadata,
+      name,
+      value,
+      onChange,
+    });
+
+    return (
+      <div
+        className={style('shrink-0 w-full', className)}
+        ref={popupRef}
+        onBlur={close}
+        onFocus={open}
+      >
+        <div ref={inputRef}>
+          <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)}
+          />
+        </div>
+        {renderErrorText(error)}
+      </div>
+    );
+  },
 );
+
+const getLabel = (errors?: string[], label?: string) => (label && errors ? `${label}*` : label);
+
+const getPlaceholder = (placeholder?: string, errors?: string[], label?: string) =>
+  errors && !label ? `${placeholder}*` : placeholder;

package/mobile/src/ui-kit/Input/InputPopup.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+
+export interface InputPopupProps {
+  options?: Array<DaDataSuggestion>;
+  onChange: (e: string) => void;
+  value?: string;
+}
+
+export const InputPopup = JSX<InputPopupProps>(({ options, onChange }) => (
+  <div
+    className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl"
+    role="list"
+  >
+    {options?.map((item, key) => (
+      <div
+        key={key.toString()}
+        className="flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative"
+        role="listitem"
+        onMouseDown={() => onChange(item.processedValue)}
+      >
+        <span className="min-h-6">{item.processedValue}</span>
+      </div>
+    ))}
+  </div>
+));

package/mobile/src/ui-kit/Input/InputProps.ts

@@ -18,4 +18,5 @@ export interface InputProps<V = string> extends ControlProps<V>, LabelProps {
   isTextarea?: boolean;
   error?: string;
   errors?: string[];
+  dadata?: boolean;
 }

package/mobile/src/ui-kit/Input/useInputPopup.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { getDaDataHints } from '../../api/dadataHints/dadataHints';
+import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
+import { hintsListsOptions } from '../../api/dadataHints/hintsListsOptions';
+import { debounce } from '../../utils/debounce';
+import { usePopupManager } from '../PopupManager/usePopupManager';
+import { InputPopup } from './InputPopup';
+
+interface InputPopupOptions {
+  isOpen?: boolean;
+  name: string;
+  value?: string;
+  onChange: (e: string) => void;
+}
+
+export function useInputPopup({ isOpen, value, name, onChange }: InputPopupOptions) {
+  const prevInputValue = useRef(value);
+  const currentInputValue = useRef(value);
+  const [hintsList, setHintsList] = useState<Array<DaDataSuggestion>>([]);
+  const popup = usePopupManager();
+
+  const defaultHintsListOptions = hintsListsOptions[name];
+
+  const close = useCallback(() => {
+    currentInputValue.current = value;
+    popup.close();
+  }, [value]);
+
+  const handleChange = useCallback(
+    (option: string) => {
+      close();
+      currentInputValue.current = option;
+      onChange && onChange(option);
+    },
+    [close, onChange],
+  );
+
+  const inputRef = useRef<HTMLDivElement | null>(null);
+
+  const getHintsList = useMemo(
+    () => async (searchValue: string) => {
+      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(<InputPopup options={hintsList} value={value} onChange={handleChange} />, {
+      top: top + globalThis.scrollY + height,
+      left,
+      width,
+    });
+  }, [isOpen, hintsList, value, handleChange]);
+
+  return inputRef;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.575",
+  "version": "0.14.576",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -210,7 +210,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "69 kB",
+      "limit": "70 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/api/LeadServiceAPI.ts

@@ -2,20 +2,6 @@ import { type JSONRecord, type JSONScalar } from '@redneckz/json-op';
 import { formatDate } from '../utils/formatDate';
 import { formatPhone } from '../utils/formatPhone';
 
-interface DaDataSuggestion<T> {
-  value?: string;
-  unrestricted_value?: string;
-  data?: T;
-}
-
-interface DaDataAddress {
-  city?: string | null;
-}
-
-export interface DaDataResult {
-  suggestions?: DaDataSuggestion<DaDataAddress>[];
-}
-
 export type LeadRequest = Record<string, JSONRecord | JSONScalar | null> & {
   typeForm?: string;
   addressBranch?: string;

package/src/api/dadataHints/dadataHints.ts

@@ -0,0 +1,33 @@
+import { type DaDataSuggestion, type ListRequestOption } from './dadataHintsType';
+
+const DEFAULT_HINTS_COUNT = 10;
+
+const getResponseHandler = (response: { suggestions: Array<DaDataSuggestion> }) => {
+  const responseData: Array<DaDataSuggestion> = response?.suggestions || [];
+
+  return responseData.map((item) => ({
+    ...item,
+    processedValue: item?.value,
+  }));
+};
+
+export const getDaDataHints = (options: ListRequestOption): Promise<Array<DaDataSuggestion>> => {
+  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;
+};

package/src/api/dadataHints/dadataHintsType.ts

@@ -0,0 +1,33 @@
+import { type Nullable } from '../../utils/Nullable';
+import { type HintOption } from './hintsListsOptions';
+
+export interface DaDataSuggestion {
+  value: string;
+  unrestricted_value: string;
+  data: DaDataResponseItem;
+  processedValue: string;
+}
+
+export type DaDataGender = 'MALE' | 'FEMALE' | 'UNKNOWN';
+
+export interface DaDataFio {
+  surname: Nullable<string>;
+  name: Nullable<string>;
+  patronymic: Nullable<string>;
+  gender: DaDataGender;
+  qc: '0' | '1';
+  source: null;
+}
+
+export interface DaDataEmail {
+  domain: Nullable<string>;
+  local: string;
+}
+
+export type DaDataResponseItem = DaDataFio | DaDataEmail;
+
+export interface ListRequestOption {
+  url: string;
+  query?: string;
+  requestData?: HintOption['requestData'];
+}

package/src/api/dadataHints/hintsListsOptions.ts

@@ -0,0 +1,44 @@
+export const NAME_HINTS_LIST_OPTIONS = {
+  url: 'suggest/fio',
+  requestData: {
+    parts: ['NAME'],
+    gender: 'UNKNOWN',
+  },
+};
+
+export const SURNAME_HINTS_LIST_OPTIONS = {
+  url: 'suggest/fio',
+  requestData: {
+    parts: ['SURNAME'],
+    gender: 'UNKNOWN',
+  },
+};
+
+export const PATRONYMIC_HINTS_LIST_OPTIONS = {
+  url: 'suggest/fio',
+  requestData: {
+    parts: ['PATRONYMIC'],
+    gender: 'UNKNOWN',
+  },
+};
+
+export const EMAIL_HINTS_LIST_OPTIONS = {
+  url: 'suggest/email',
+};
+
+export type HintsListOptions = Record<string, HintOption>;
+
+export const hintsListsOptions: HintsListOptions = {
+  name: NAME_HINTS_LIST_OPTIONS,
+  surname: SURNAME_HINTS_LIST_OPTIONS,
+  middleName: PATRONYMIC_HINTS_LIST_OPTIONS,
+  email: EMAIL_HINTS_LIST_OPTIONS,
+};
+
+export type HintOption = {
+  url: string;
+  requestData?: {
+    parts?: string[];
+    gender?: string;
+  };
+};

package/src/components/ApplicationForm/ApplicationFormContent.ts

@@ -75,6 +75,7 @@ export type FieldDefaultDef = Required &
   LabelProps &
   ConditionFieldProps & {
     name: NameFieldDef;
+    dadata?: boolean;
   };
 
 /**

package/src/components/ApplicationLeadForm/ApplicationLeadForm.fixture.tsx

@@ -22,12 +22,12 @@ export default {
           {
             columns: 2,
             inputs: [
-              { fieldType: 'common', name: 'surname', required: true },
-              { fieldType: 'common', name: 'name', required: true },
-              { fieldType: 'common', name: 'middleName' },
+              { fieldType: 'common', name: 'surname', required: true, dadata: true },
+              { fieldType: 'common', name: 'name', required: true, dadata: true },
+              { fieldType: 'common', name: 'middleName', dadata: true },
               { fieldType: 'common', name: 'birthday', required: true },
               { fieldType: 'common', name: 'phone', required: true },
-              { fieldType: 'common', name: 'email', required: true },
+              { fieldType: 'common', name: 'email', required: true, dadata: true },
             ],
           },
           {