@alfalab/core-components-input-autocomplete 14.0.7 → 14.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/autocomplete-field/Component.d.ts +1 -1
- package/autocomplete-field/Component.js.map +1 -1
- package/autocomplete-field/index.css +1 -1
- package/autocomplete-field/index.module.css.js +1 -1
- package/autocomplete-mobile-field/Component.d.ts +2 -2
- package/autocomplete-mobile-field/index.css +10 -10
- package/autocomplete-mobile-field/index.module.css.js +1 -1
- package/autocomplete-mobile-field/index.module.css.js.map +1 -1
- package/cssm/autocomplete-field/Component.d.ts +1 -1
- package/cssm/autocomplete-field/Component.js.map +1 -1
- package/cssm/autocomplete-mobile-field/Component.d.ts +2 -2
- package/cssm/mobile/Component.mobile.d.ts +7 -6
- package/cssm/mobile/Component.mobile.js.map +1 -1
- package/cssm/mobile/Component.modal.mobile.d.ts +6 -6
- package/cssm/types.d.ts +3 -3
- package/esm/autocomplete-field/Component.d.ts +1 -1
- package/esm/autocomplete-field/Component.js.map +1 -1
- package/esm/autocomplete-field/index.css +1 -1
- package/esm/autocomplete-field/index.module.css.js +1 -1
- package/esm/autocomplete-mobile-field/Component.d.ts +2 -2
- package/esm/autocomplete-mobile-field/index.css +10 -10
- package/esm/autocomplete-mobile-field/index.module.css.js +1 -1
- package/esm/autocomplete-mobile-field/index.module.css.js.map +1 -1
- package/esm/mobile/Component.mobile.d.ts +7 -6
- package/esm/mobile/Component.mobile.js.map +1 -1
- package/esm/mobile/Component.modal.mobile.d.ts +6 -6
- package/esm/mobile/mobile.css +1 -1
- package/esm/mobile/mobile.module.css.js +1 -1
- package/esm/mobile/mobile.module.css.js.map +1 -1
- package/esm/types.d.ts +3 -3
- package/mobile/Component.mobile.d.ts +7 -6
- package/mobile/Component.mobile.js.map +1 -1
- package/mobile/Component.modal.mobile.d.ts +6 -6
- package/mobile/mobile.css +1 -1
- package/mobile/mobile.module.css.js +1 -1
- package/mobile/mobile.module.css.js.map +1 -1
- package/modern/autocomplete-field/Component.d.ts +1 -1
- package/modern/autocomplete-field/Component.js.map +1 -1
- package/modern/autocomplete-field/index.css +1 -1
- package/modern/autocomplete-field/index.module.css.js +1 -1
- package/modern/autocomplete-mobile-field/Component.d.ts +2 -2
- package/modern/autocomplete-mobile-field/index.css +10 -10
- package/modern/autocomplete-mobile-field/index.module.css.js +1 -1
- package/modern/autocomplete-mobile-field/index.module.css.js.map +1 -1
- package/modern/mobile/Component.mobile.d.ts +7 -6
- package/modern/mobile/Component.mobile.js.map +1 -1
- package/modern/mobile/Component.modal.mobile.d.ts +6 -6
- package/modern/mobile/mobile.css +1 -1
- package/modern/mobile/mobile.module.css.js +1 -1
- package/modern/mobile/mobile.module.css.js.map +1 -1
- package/modern/types.d.ts +3 -3
- package/moderncssm/autocomplete-field/Component.d.ts +1 -1
- package/moderncssm/autocomplete-field/Component.js.map +1 -1
- package/moderncssm/autocomplete-mobile-field/Component.d.ts +2 -2
- package/moderncssm/mobile/Component.mobile.d.ts +7 -6
- package/moderncssm/mobile/Component.mobile.js.map +1 -1
- package/moderncssm/mobile/Component.modal.mobile.d.ts +6 -6
- package/moderncssm/types.d.ts +3 -3
- package/package.json +9 -9
- package/src/autocomplete-mobile-field/index.module.css +1 -1
- package/src/mobile/mobile.module.css +1 -1
- package/types.d.ts +3 -3
package/esm/types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ComponentType, type RefAttributes } from 'react';
|
|
2
2
|
import { type InputProps } from '@alfalab/core-components-input/esm';
|
|
3
3
|
import { type BaseSelectProps, type BottomSheetSelectMobileProps } from '@alfalab/core-components-select/esm/shared';
|
|
4
|
-
|
|
4
|
+
type OnInputTypeReason = 'close' | 'change';
|
|
5
5
|
export interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomplete' | 'nativeSelect' | 'showSearch' | 'valueRenderer'> {
|
|
6
6
|
/**
|
|
7
7
|
* Компонент ввода значения
|
|
@@ -28,7 +28,7 @@ export interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'aut
|
|
|
28
28
|
*/
|
|
29
29
|
onInput?: (value: string, reason?: OnInputTypeReason) => void;
|
|
30
30
|
}
|
|
31
|
-
|
|
31
|
+
type MobileProps = {
|
|
32
32
|
/**
|
|
33
33
|
* Открывать в bottom-sheet
|
|
34
34
|
*/
|
|
@@ -56,7 +56,7 @@ declare type MobileProps = {
|
|
|
56
56
|
*/
|
|
57
57
|
virtualKeyboard?: boolean;
|
|
58
58
|
};
|
|
59
|
-
export
|
|
59
|
+
export type InputAutocompleteMobileProps = InputAutocompleteCommonProps & MobileProps;
|
|
60
60
|
export interface InputAutocompleteProps extends InputAutocompleteCommonProps {
|
|
61
61
|
/**
|
|
62
62
|
* Пропсы для мобильного компонента
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { type BottomSheetSelectMobileProps } from '@alfalab/core-components-select/shared';
|
|
2
3
|
export declare const InputAutocompleteMobile: React.ForwardRefExoticComponent<import("../types").InputAutocompleteCommonProps & {
|
|
3
|
-
isBottomSheet?: boolean
|
|
4
|
-
transitionProps?:
|
|
5
|
-
onApply?: (
|
|
6
|
-
onCancel?: (
|
|
7
|
-
title?: string
|
|
8
|
-
virtualKeyboard?: boolean
|
|
4
|
+
isBottomSheet?: boolean;
|
|
5
|
+
transitionProps?: NonNullable<BottomSheetSelectMobileProps["bottomSheetProps"]>["transitionProps"];
|
|
6
|
+
onApply?: () => void;
|
|
7
|
+
onCancel?: () => void;
|
|
8
|
+
title?: string;
|
|
9
|
+
virtualKeyboard?: boolean;
|
|
9
10
|
} & React.RefAttributes<unknown>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.mobile.js","sources":["../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { type Ref, useMemo, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { maskitoTransform } from '@maskito/core';\nimport cn from 'classnames';\nimport throttle from 'lodash/throttle';\n\nimport {\n SelectMobile,\n type SelectMobileProps,\n SelectModalMobile,\n} from '@alfalab/core-components-select/mobile';\nimport {\n type AnyObject,\n type BottomSheetSelectMobileProps,\n Footer,\n type ModalSelectMobileProps,\n} from '@alfalab/core-components-select/shared';\nimport { isMaskitoMask, isNonNullable } from '@alfalab/core-components-shared';\n\nimport { AutocompleteMobileField as DefaultField } from '../autocomplete-mobile-field';\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteMobileProps } from '../types';\nimport { searchFilterStub } from '../utils';\n\nimport styles from './mobile.module.css';\n\nexport const InputAutocompleteMobile = React.forwardRef(\n (\n {\n Input,\n value,\n name,\n Arrow = null,\n label,\n placeholder = '',\n size = 48,\n open: openProp,\n onInput,\n onOpen,\n multiple,\n inputProps,\n isBottomSheet = true,\n dataTestId,\n transitionProps,\n onCancel,\n onApply,\n title,\n success,\n virtualKeyboard = false,\n Search,\n searchProps,\n Field = DefaultField,\n ...restProps\n }: InputAutocompleteMobileProps,\n ref,\n ) => {\n const [open, setOpen] = useState(false);\n const frozenValue = useRef<string>('');\n const searchInputRef = useRef<HTMLInputElement>(null);\n const targetRef = useRef<HTMLDivElement>(null);\n\n const restorePrevValue = () => onInput?.(frozenValue.current, OnInputReason.Close);\n\n const setModalVisibility = (isOpen: boolean) => {\n if (isOpen) {\n frozenValue.current = value || '';\n }\n\n if (openProp === undefined) {\n setOpen(isOpen);\n }\n\n onOpen?.({ open: isOpen, name });\n };\n\n const handleOpen: SelectMobileProps['onOpen'] = (payload) => {\n setModalVisibility(Boolean(payload.open));\n };\n\n const handleOptionsListTouchMove = useMemo(\n () =>\n throttle(() => {\n const input = searchInputRef.current;\n\n if (input && document.activeElement === input) {\n input.blur();\n }\n }, 300),\n [],\n );\n\n const handleApply = () => {\n setModalVisibility(false);\n onApply?.();\n };\n\n const handleCancel = () => {\n setModalVisibility(false);\n restorePrevValue();\n onCancel?.();\n };\n\n const handleExiting = (node: HTMLElement) => {\n targetRef.current?.focus();\n transitionProps?.onExiting?.(node);\n };\n\n const isOpen = Boolean(open || openProp);\n\n const Component = isBottomSheet ? SelectMobile : SelectModalMobile;\n\n const componentProps:\n | ModalSelectMobileProps['modalProps']\n | BottomSheetSelectMobileProps['bottomSheetProps'] = {\n title: title || label || placeholder,\n onClose: restorePrevValue,\n transitionProps: {\n ...transitionProps,\n onExiting: handleExiting,\n },\n [isBottomSheet ? 'containerProps' : 'componentDivProps']: {\n onTouchMove: handleOptionsListTouchMove,\n },\n };\n\n const clear = inputProps?.clear ?? false;\n\n const displayValue = isOpen ? frozenValue.current : value;\n\n const fieldValue = useMemo(() => {\n const mask = inputProps?.mask;\n\n return isNonNullable(displayValue) && isMaskitoMask(mask)\n ? maskitoTransform(displayValue, { mask })\n : displayValue;\n }, [displayValue, inputProps?.mask]);\n\n return (\n <Component\n Field={Field}\n {...restProps}\n {...(isBottomSheet\n ? {\n bottomSheetProps: {\n ...componentProps,\n virtualKeyboard,\n showSwipeMarker: false,\n actionButton: null,\n },\n }\n : {\n modalProps: componentProps,\n modalHeaderProps: { title },\n })}\n dataTestId={dataTestId}\n useWithApplyHook={false}\n showSearch={true}\n Search={Search ?? Input}\n searchProps={{\n value,\n filterFn: searchFilterStub,\n componentProps: {\n leftAddons: null,\n placeholder,\n ...inputProps,\n ...searchProps?.componentProps,\n className: cn(styles.input, inputProps?.className),\n clear,\n ref: mergeRefs([searchInputRef, inputProps?.ref as Ref<HTMLInputElement>]),\n onChange: (_, payload) => onInput?.(payload.value, OnInputReason.Change),\n },\n }}\n ref={mergeRefs([targetRef, ref])}\n open={isOpen}\n onOpen={handleOpen}\n Arrow={Arrow}\n placeholder={placeholder}\n label={label}\n size={size}\n name={name}\n multiple={multiple}\n optionsListProps={{\n footer: (\n <Footer\n showClear={true}\n handleClear={handleCancel}\n handleApply={handleApply}\n clearText='Отмена'\n applyText='Продолжить'\n dataTestId={dataTestId}\n />\n ),\n ...(restProps.optionsListProps as AnyObject),\n }}\n fieldProps={{\n value: fieldValue,\n clear,\n onClear: clear ? inputProps?.onClear : undefined,\n success,\n ...(restProps.fieldProps as AnyObject),\n }}\n />\n );\n },\n);\n"],"names":["React","DefaultField","__rest","useState","useRef","OnInputReason","useMemo","throttle","Component","SelectMobile","SelectModalMobile","isNonNullable","isMaskitoMask","maskitoTransform","__assign","searchFilterStub","cn","styles","mergeRefs","Footer"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Component.mobile.js","sources":["../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { type Ref, useMemo, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { maskitoTransform } from '@maskito/core';\nimport cn from 'classnames';\nimport throttle from 'lodash/throttle';\n\nimport {\n SelectMobile,\n type SelectMobileProps,\n SelectModalMobile,\n} from '@alfalab/core-components-select/mobile';\nimport {\n type AnyObject,\n type BottomSheetSelectMobileProps,\n Footer,\n type ModalSelectMobileProps,\n} from '@alfalab/core-components-select/shared';\nimport { isMaskitoMask, isNonNullable } from '@alfalab/core-components-shared';\n\nimport { AutocompleteMobileField as DefaultField } from '../autocomplete-mobile-field';\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteMobileProps } from '../types';\nimport { searchFilterStub } from '../utils';\n\nimport styles from './mobile.module.css';\n\nexport const InputAutocompleteMobile = React.forwardRef(\n (\n {\n Input,\n value,\n name,\n Arrow = null,\n label,\n placeholder = '',\n size = 48,\n open: openProp,\n onInput,\n onOpen,\n multiple,\n inputProps,\n isBottomSheet = true,\n dataTestId,\n transitionProps,\n onCancel,\n onApply,\n title,\n success,\n virtualKeyboard = false,\n Search,\n searchProps,\n Field = DefaultField,\n ...restProps\n }: InputAutocompleteMobileProps,\n ref,\n ) => {\n const [open, setOpen] = useState(false);\n const frozenValue = useRef<string>('');\n const searchInputRef = useRef<HTMLInputElement>(null);\n const targetRef = useRef<HTMLDivElement>(null);\n\n const restorePrevValue = () => onInput?.(frozenValue.current, OnInputReason.Close);\n\n const setModalVisibility = (isOpen: boolean) => {\n if (isOpen) {\n frozenValue.current = value || '';\n }\n\n if (openProp === undefined) {\n setOpen(isOpen);\n }\n\n onOpen?.({ open: isOpen, name });\n };\n\n const handleOpen: SelectMobileProps['onOpen'] = (payload) => {\n setModalVisibility(Boolean(payload.open));\n };\n\n const handleOptionsListTouchMove = useMemo(\n () =>\n throttle(() => {\n const input = searchInputRef.current;\n\n if (input && document.activeElement === input) {\n input.blur();\n }\n }, 300),\n [],\n );\n\n const handleApply = () => {\n setModalVisibility(false);\n onApply?.();\n };\n\n const handleCancel = () => {\n setModalVisibility(false);\n restorePrevValue();\n onCancel?.();\n };\n\n const handleExiting = (node: HTMLElement) => {\n targetRef.current?.focus();\n transitionProps?.onExiting?.(node);\n };\n\n const isOpen = Boolean(open || openProp);\n\n const Component = isBottomSheet ? SelectMobile : SelectModalMobile;\n\n const componentProps:\n | ModalSelectMobileProps['modalProps']\n | BottomSheetSelectMobileProps['bottomSheetProps'] = {\n title: title || label || placeholder,\n onClose: restorePrevValue,\n transitionProps: {\n ...transitionProps,\n onExiting: handleExiting,\n },\n [isBottomSheet ? 'containerProps' : 'componentDivProps']: {\n onTouchMove: handleOptionsListTouchMove,\n },\n };\n\n const clear = inputProps?.clear ?? false;\n\n const displayValue = isOpen ? frozenValue.current : value;\n\n const fieldValue = useMemo(() => {\n const mask = inputProps?.mask;\n\n return isNonNullable(displayValue) && isMaskitoMask(mask)\n ? maskitoTransform(displayValue, { mask })\n : displayValue;\n }, [displayValue, inputProps?.mask]);\n\n return (\n <Component\n Field={Field}\n {...restProps}\n {...(isBottomSheet\n ? {\n bottomSheetProps: {\n ...componentProps,\n virtualKeyboard,\n showSwipeMarker: false,\n actionButton: null,\n },\n }\n : {\n modalProps: componentProps,\n modalHeaderProps: { title },\n })}\n dataTestId={dataTestId}\n useWithApplyHook={false}\n showSearch={true}\n Search={Search ?? Input}\n searchProps={{\n value,\n filterFn: searchFilterStub,\n componentProps: {\n leftAddons: null,\n placeholder,\n ...inputProps,\n ...searchProps?.componentProps,\n className: cn(styles.input, inputProps?.className),\n clear,\n ref: mergeRefs([searchInputRef, inputProps?.ref as Ref<HTMLInputElement>]),\n onChange: (_, payload) => onInput?.(payload.value, OnInputReason.Change),\n },\n }}\n ref={mergeRefs([targetRef, ref])}\n open={isOpen}\n onOpen={handleOpen}\n Arrow={Arrow}\n placeholder={placeholder}\n label={label}\n size={size}\n name={name}\n multiple={multiple}\n optionsListProps={{\n footer: (\n <Footer\n showClear={true}\n handleClear={handleCancel}\n handleApply={handleApply}\n clearText='Отмена'\n applyText='Продолжить'\n dataTestId={dataTestId}\n />\n ),\n ...(restProps.optionsListProps as AnyObject),\n }}\n fieldProps={{\n value: fieldValue,\n clear,\n onClear: clear ? inputProps?.onClear : undefined,\n success,\n ...(restProps.fieldProps as AnyObject),\n }}\n />\n );\n },\n);\n"],"names":["React","DefaultField","__rest","useState","useRef","OnInputReason","useMemo","throttle","Component","SelectMobile","SelectModalMobile","isNonNullable","isMaskitoMask","maskitoTransform","__assign","searchFilterStub","cn","styles","mergeRefs","Footer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0Ba,IAAA,uBAAuB,GAAGA,sBAAK,CAAC,UAAU,CACnD,UACI,EAyB+B,EAC/B,GAAG,EAAA;;;IAzBC,IAAA,KAAK,WAAA,EACL,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,EAAA,GAAA,EAAA,CAAA,KAAY,EAAZ,KAAK,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACZ,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,EAAgB,GAAA,EAAA,CAAA,WAAA,EAAhB,WAAW,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EAChB,YAAS,EAAT,IAAI,mBAAG,EAAE,GAAA,EAAA,EACH,QAAQ,GAAA,EAAA,CAAA,IAAA,EACd,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,qBAAoB,EAApB,aAAa,mBAAG,IAAI,GAAA,EAAA,EACpB,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,GAAA,EAAA,EACvB,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,EAAoB,GAAA,EAAA,CAAA,KAAA,EAApB,KAAK,GAAG,EAAA,KAAA,MAAA,GAAAC,iCAAY,KAAA,EACjB,SAAS,GAxBhBC,YAAA,CAAA,EAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,OAAA,EAAA,aAAA,EAAA,MAAA,EAAA,MAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,eAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,OAAA,CAyBC,CADe;IAIV,IAAA,EAAA,GAAkBC,cAAQ,CAAC,KAAK,CAAC,EAAhC,IAAI,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,OAAO,GAAA,EAAA,CAAA,CAAA,CAAmB;AACvC,IAAA,IAAM,WAAW,GAAGC,YAAM,CAAS,EAAE,CAAC;AACtC,IAAA,IAAM,cAAc,GAAGA,YAAM,CAAmB,IAAI,CAAC;AACrD,IAAA,IAAM,SAAS,GAAGA,YAAM,CAAiB,IAAI,CAAC;IAE9C,IAAM,gBAAgB,GAAG,YAAM,EAAA,OAAA,OAAO,KAAP,IAAA,IAAA,OAAO,uBAAP,OAAO,CAAG,WAAW,CAAC,OAAO,EAAEC,mBAAa,CAAC,KAAK,CAAC,CAAA,EAAA;IAElF,IAAM,kBAAkB,GAAG,UAAC,MAAe,EAAA;QACvC,IAAI,MAAM,EAAE;AACR,YAAA,WAAW,CAAC,OAAO,GAAG,KAAK,IAAI,EAAE;;AAGrC,QAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;YACxB,OAAO,CAAC,MAAM,CAAC;;AAGnB,QAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,MAAA,GAAA,MAAA,GAAA,MAAM,CAAG,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAA,IAAA,EAAE,CAAC;AACpC,KAAC;IAED,IAAM,UAAU,GAAgC,UAAC,OAAO,EAAA;QACpD,kBAAkB,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAC7C,KAAC;IAED,IAAM,0BAA0B,GAAGC,aAAO,CACtC,YAAA;AACI,QAAA,OAAAC,yBAAQ,CAAC,YAAA;AACL,YAAA,IAAM,KAAK,GAAG,cAAc,CAAC,OAAO;YAEpC,IAAI,KAAK,IAAI,QAAQ,CAAC,aAAa,KAAK,KAAK,EAAE;gBAC3C,KAAK,CAAC,IAAI,EAAE;;SAEnB,EAAE,GAAG,CAAC;KAAA,EACX,EAAE,CACL;AAED,IAAA,IAAM,WAAW,GAAG,YAAA;QAChB,kBAAkB,CAAC,KAAK,CAAC;AACzB,QAAA,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,MAAA,GAAA,MAAA,GAAA,OAAO,EAAI;AACf,KAAC;AAED,IAAA,IAAM,YAAY,GAAG,YAAA;QACjB,kBAAkB,CAAC,KAAK,CAAC;AACzB,QAAA,gBAAgB,EAAE;AAClB,QAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,MAAA,GAAA,MAAA,GAAA,QAAQ,EAAI;AAChB,KAAC;IAED,IAAM,aAAa,GAAG,UAAC,IAAiB,EAAA;;AACpC,QAAA,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;QAC1B,CAAA,EAAA,GAAA,eAAe,KAAf,IAAA,IAAA,eAAe,KAAf,MAAA,GAAA,MAAA,GAAA,eAAe,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,eAAA,EAAG,IAAI,CAAC;AACtC,KAAC;IAED,IAAM,MAAM,GAAG,OAAO,CAAC,IAAI,IAAI,QAAQ,CAAC;IAExC,IAAMC,WAAS,GAAG,aAAa,GAAGC,mBAAY,GAAGC,wBAAiB;AAElE,IAAA,IAAM,cAAc,IAAA,EAAA,GAAA;AAGhB,YAAA,KAAK,EAAE,KAAK,IAAI,KAAK,IAAI,WAAW;AACpC,YAAA,OAAO,EAAE,gBAAgB;AACzB,YAAA,eAAe,oCACR,eAAe,CAAA,EAAA,EAClB,SAAS,EAAE,aAAa,EAC3B;;QACD,EAAC,CAAA,aAAa,GAAG,gBAAgB,GAAG,mBAAmB,CAAG,GAAA;AACtD,YAAA,WAAW,EAAE,0BAA0B;AAC1C,SAAA;WACJ;AAED,IAAA,IAAM,KAAK,GAAG,CAAA,EAAA,GAAA,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,MAAA,GAAA,MAAA,GAAA,UAAU,CAAE,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,KAAK;AAExC,IAAA,IAAM,YAAY,GAAG,MAAM,GAAG,WAAW,CAAC,OAAO,GAAG,KAAK;IAEzD,IAAM,UAAU,GAAGJ,aAAO,CAAC,YAAA;QACvB,IAAM,IAAI,GAAG,UAAU,KAAA,IAAA,IAAV,UAAU,KAAV,MAAA,GAAA,MAAA,GAAA,UAAU,CAAE,IAAI;QAE7B,OAAOK,kCAAa,CAAC,YAAY,CAAC,IAAIC,kCAAa,CAAC,IAAI;cAClDC,qBAAgB,CAAC,YAAY,EAAE,EAAE,IAAI,EAAA,IAAA,EAAE;cACvC,YAAY;AACtB,KAAC,EAAE,CAAC,YAAY,EAAE,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,IAAI,CAAC,CAAC;IAEpC,QACIb,sBAAC,CAAA,aAAA,CAAAQ,WAAS,EACNM,cAAA,CAAA,EAAA,KAAK,EAAE,KAAK,EACR,EAAA,SAAS,GACR;AACD,UAAE;AACI,YAAA,gBAAgB,EACTA,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAA,cAAc,CACjB,EAAA,EAAA,eAAe,EAAA,eAAA,EACf,eAAe,EAAE,KAAK,EACtB,YAAY,EAAE,IAAI,EACrB,CAAA;AACJ;AACH,UAAE;AACI,YAAA,UAAU,EAAE,cAAc;AAC1B,YAAA,gBAAgB,EAAE,EAAE,KAAK,EAAA,KAAA,EAAE;SAC9B,GAAC,EACR,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,KAAK,EACvB,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAN,MAAM,GAAI,KAAK,EACvB,WAAW,EAAE;AACT,YAAA,KAAK,EAAA,KAAA;AACL,YAAA,QAAQ,EAAEC,sBAAgB;AAC1B,YAAA,cAAc,iDACV,UAAU,EAAE,IAAI,EAChB,WAAW,EAAA,WAAA,EAAA,EACR,UAAU,CAAA,EACV,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,MAAA,GAAA,MAAA,GAAA,WAAW,CAAE,cAAc,CAAA,EAAA,EAC9B,SAAS,EAAEC,mBAAE,CAACC,aAAM,CAAC,KAAK,EAAE,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,SAAS,CAAC,EAClD,KAAK,OAAA,EACL,GAAG,EAAEC,0BAAS,CAAC,CAAC,cAAc,EAAE,UAAU,aAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAE,GAA4B,CAAC,CAAC,EAC1E,QAAQ,EAAE,UAAC,CAAC,EAAE,OAAO,EAAA,EAAK,OAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAG,OAAO,CAAC,KAAK,EAAEb,mBAAa,CAAC,MAAM,CAAC,CAAA,EAAA,EAC3E,CAAA;SACJ,EACD,GAAG,EAAEa,0BAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,EAChC,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EACZJ,cAAA,CAAA,EAAA,MAAM,GACFd,sBAAC,CAAA,aAAA,CAAAmB,aAAM,EACH,EAAA,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAC,sCAAQ,EAClB,SAAS,EAAC,8DAAY,EACtB,UAAU,EAAE,UAAU,EACxB,CAAA,CACL,EACG,EAAA,SAAS,CAAC,gBAA8B,CAEhD,EAAA,UAAU,EACNL,cAAA,CAAA,EAAA,KAAK,EAAE,UAAU,EACjB,KAAK,OAAA,EACL,OAAO,EAAE,KAAK,GAAG,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,MAAA,GAAA,MAAA,GAAA,UAAU,CAAE,OAAO,GAAG,SAAS,EAChD,OAAO,EAAA,OAAA,EACH,EAAA,SAAS,CAAC,UAAwB,CAE5C,EAAA,CAAA,CAAA;AAEV,CAAC;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare const InputAutocompleteModalMobile: React.ForwardRefExoticComponent<import("../types").InputAutocompleteCommonProps & {
|
|
3
|
-
isBottomSheet?: boolean
|
|
4
|
-
transitionProps?:
|
|
5
|
-
onApply?: (
|
|
6
|
-
onCancel?: (
|
|
7
|
-
title?: string
|
|
8
|
-
virtualKeyboard?: boolean
|
|
3
|
+
isBottomSheet?: boolean;
|
|
4
|
+
transitionProps?: NonNullable<import("@alfalab/core-components-select/typings").BottomSheetSelectMobileProps["bottomSheetProps"]>["transitionProps"];
|
|
5
|
+
onApply?: () => void;
|
|
6
|
+
onCancel?: () => void;
|
|
7
|
+
title?: string;
|
|
8
|
+
virtualKeyboard?: boolean;
|
|
9
9
|
} & React.RefAttributes<HTMLDivElement>>;
|
package/mobile/mobile.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.input {\n width: auto;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,OAAO,CAAC,iCAAiC,CAAC;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type FieldProps } from '@alfalab/core-components-select/modern/shared';
|
|
3
3
|
import { type InputAutocompleteCommonProps } from '../types';
|
|
4
|
-
export
|
|
4
|
+
export type AutocompleteFieldProps = FieldProps & Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;
|
|
5
5
|
export declare const AutocompleteField: ({ label, labelView, placeholder, size, Arrow, Input, value, error, success, hint, disabled, readOnly, onInput, inputProps, innerProps, dataTestId, }: AutocompleteFieldProps) => React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-field/Component.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type InputProps } from '@alfalab/core-components-input';\nimport { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';\nimport { type FieldProps } from '@alfalab/core-components-select/shared';\n\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteCommonProps } from '../types';\n\nimport styles from './index.module.css';\n\nexport type AutocompleteFieldProps = FieldProps &\n Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;\n\nexport const AutocompleteField = ({\n label,\n labelView = 'inner',\n placeholder,\n size,\n Arrow,\n Input = DefaultInput,\n value,\n error,\n success,\n hint,\n disabled,\n readOnly,\n onInput,\n inputProps = {},\n innerProps,\n dataTestId,\n}: AutocompleteFieldProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { onClick, onFocus } = innerProps;\n\n const inputDisabled = disabled || readOnly;\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onClick) onClick(event);\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n },\n [onClick],\n );\n\n const handleInput: InputProps['onChange'] = (_, payload) =>\n onInput?.(payload.value, OnInputReason.Change);\n\n /**\n * Right addons priority [4] <= [3] <= [2] <= [1] or [0]\n * [4] - Clear\n * [3] - Status (error, success)\n * [2] - Common (info, e.g.)\n * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n * [0] - Lock\n */\n const renderRightAddons = () => (\n <Fragment>\n {inputProps.rightAddons}\n {Arrow && !inputDisabled && (\n <span\n className={cn(styles.arrow, {\n [styles.error]: error,\n })}\n >\n {Arrow}\n </span>\n )}\n </Fragment>\n );\n\n return (\n <Input\n dataTestId={dataTestId}\n {...inputProps}\n {...innerProps}\n wrapperRef={mergeRefs([\n innerProps.ref as React.Ref<HTMLElement>,\n inputProps.wrapperRef as React.Ref<HTMLElement>,\n ])}\n ref={mergeRefs([inputRef, inputProps.ref as React.Ref<HTMLElement>])}\n disabled={disabled}\n readOnly={readOnly}\n block={true}\n label={label}\n labelView={labelView}\n placeholder={placeholder}\n size={size}\n error={error}\n success={success}\n hint={hint}\n onChange={handleInput}\n onClick={inputDisabled ? undefined : handleClick}\n onFocus={inputDisabled ? undefined : onFocus}\n autoComplete='off'\n value={value}\n rightAddons={renderRightAddons()}\n />\n );\n};\n"],"names":["DefaultInput"],"mappings":";;;;;;;MAgBa,iBAAiB,GAAG,CAAC,EAC9B,KAAK,EACL,SAAS,GAAG,OAAO,EACnB,WAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,GAAGA,YAAY,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,UAAU,GAAG,EAAE,EACf,UAAU,EACV,UAAU,GACW,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;AAE/C,IAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,UAAU;AAEvC,IAAA,MAAM,aAAa,GAAG,QAAQ,IAAI,QAAQ;AAE1C,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAuC,KAAI;AACxC,QAAA,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-field/Component.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type InputProps } from '@alfalab/core-components-input';\nimport { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';\nimport { type FieldProps } from '@alfalab/core-components-select/shared';\n\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteCommonProps } from '../types';\n\nimport styles from './index.module.css';\n\nexport type AutocompleteFieldProps = FieldProps &\n Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;\n\nexport const AutocompleteField = ({\n label,\n labelView = 'inner',\n placeholder,\n size,\n Arrow,\n Input = DefaultInput,\n value,\n error,\n success,\n hint,\n disabled,\n readOnly,\n onInput,\n inputProps = {},\n innerProps,\n dataTestId,\n}: AutocompleteFieldProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { onClick, onFocus } = innerProps;\n\n const inputDisabled = disabled || readOnly;\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onClick) onClick(event);\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n },\n [onClick],\n );\n\n const handleInput: InputProps['onChange'] = (_, payload) =>\n onInput?.(payload.value, OnInputReason.Change);\n\n /**\n * Right addons priority [4] <= [3] <= [2] <= [1] or [0]\n * [4] - Clear\n * [3] - Status (error, success)\n * [2] - Common (info, e.g.)\n * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n * [0] - Lock\n */\n const renderRightAddons = () => (\n <Fragment>\n {inputProps.rightAddons}\n {Arrow && !inputDisabled && (\n <span\n className={cn(styles.arrow, {\n [styles.error]: error,\n })}\n >\n {Arrow}\n </span>\n )}\n </Fragment>\n );\n\n return (\n <Input\n dataTestId={dataTestId}\n {...inputProps}\n {...innerProps}\n wrapperRef={mergeRefs([\n innerProps.ref as React.Ref<HTMLElement>,\n inputProps.wrapperRef as React.Ref<HTMLElement>,\n ])}\n ref={mergeRefs([inputRef, inputProps.ref as React.Ref<HTMLElement>])}\n disabled={disabled}\n readOnly={readOnly}\n block={true}\n label={label}\n labelView={labelView}\n placeholder={placeholder}\n size={size}\n error={error}\n success={success}\n hint={hint}\n onChange={handleInput}\n onClick={inputDisabled ? undefined : handleClick}\n onFocus={inputDisabled ? undefined : onFocus}\n autoComplete='off'\n value={value}\n rightAddons={renderRightAddons()}\n />\n );\n};\n"],"names":["DefaultInput"],"mappings":";;;;;;;MAgBa,iBAAiB,GAAG,CAAC,EAC9B,KAAK,EACL,SAAS,GAAG,OAAO,EACnB,WAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,GAAGA,YAAY,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,UAAU,GAAG,EAAE,EACf,UAAU,EACV,UAAU,GACW,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;AAE/C,IAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,UAAU;AAEvC,IAAA,MAAM,aAAa,GAAG,QAAQ,IAAI,QAAQ;AAE1C,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAuC,KAAI;AACxC,QAAA,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC;AAE3B,QAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AAClB,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE;;AAEhC,KAAC,EACD,CAAC,OAAO,CAAC,CACZ;IAED,MAAM,WAAW,GAA2B,CAAC,CAAC,EAAE,OAAO,KACnD,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC;AAElD;;;;;;;AAOG;AACH,IAAA,MAAM,iBAAiB,GAAG,OACtB,oBAAC,QAAQ,EAAA,IAAA;AACJ,QAAA,UAAU,CAAC,WAAW;AACtB,QAAA,KAAK,IAAI,CAAC,aAAa,KACpB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE;AACxB,gBAAA,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK;AACxB,aAAA,CAAC,IAED,KAAK,CACH,CACV,CACM,CACd;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACF,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,KACV,UAAU,EACd,UAAU,EAAE,SAAS,CAAC;AAClB,YAAA,UAAU,CAAC,GAA6B;AACxC,YAAA,UAAU,CAAC,UAAoC;SAClD,CAAC,EACF,GAAG,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,GAA6B,CAAC,CAAC,EACpE,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,aAAa,GAAG,SAAS,GAAG,WAAW,EAChD,OAAO,EAAE,aAAa,GAAG,SAAS,GAAG,OAAO,EAC5C,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,iBAAiB,EAAE,EAClC,CAAA;AAEV;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"arrow":"input-
|
|
3
|
+
const styles = {"arrow":"input-autocomplete__arrow_1jckr","error":"input-autocomplete__error_1jckr"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React, { type ElementType } from 'react';
|
|
2
2
|
import { type FormControlMobileProps } from '@alfalab/core-components-form-control/modern/mobile';
|
|
3
3
|
import { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/modern/shared';
|
|
4
|
-
|
|
4
|
+
type FieldProps = {
|
|
5
5
|
/**
|
|
6
6
|
* Компонент FormControl
|
|
7
7
|
*/
|
|
8
8
|
FormControlComponent?: ElementType;
|
|
9
9
|
};
|
|
10
|
-
export
|
|
10
|
+
export type AutocompleteMobileFieldProps = FormControlMobileProps & Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & {
|
|
11
11
|
/**
|
|
12
12
|
* Значение поля ввода
|
|
13
13
|
*/
|
|
@@ -15,29 +15,29 @@
|
|
|
15
15
|
--input-success-icon-display: flex;
|
|
16
16
|
--input-error-icon-not-alone-display: none;
|
|
17
17
|
}
|
|
18
|
-
.input-
|
|
18
|
+
.input-autocomplete__component_1snh9 {
|
|
19
19
|
width: 100%;
|
|
20
20
|
outline: none;
|
|
21
21
|
}
|
|
22
|
-
.input-
|
|
22
|
+
.input-autocomplete__field_1snh9:not(.input-autocomplete__disabled_1snh9) {
|
|
23
23
|
cursor: pointer;
|
|
24
24
|
}
|
|
25
|
-
.input-
|
|
25
|
+
.input-autocomplete__errorIcon_1snh9 {
|
|
26
26
|
display: var(--input-error-icon-display);
|
|
27
27
|
}
|
|
28
|
-
* + .input-
|
|
28
|
+
* + .input-autocomplete__errorIcon_1snh9 {
|
|
29
29
|
display: var(--input-error-icon-not-alone-display);
|
|
30
30
|
}
|
|
31
|
-
.input-
|
|
31
|
+
.input-autocomplete__successIcon_1snh9 {
|
|
32
32
|
display: var(--input-success-icon-display);
|
|
33
33
|
}
|
|
34
|
-
.input-
|
|
34
|
+
.input-autocomplete__disabled_1snh9 {
|
|
35
35
|
cursor: var(--disabled-cursor);
|
|
36
36
|
}
|
|
37
|
-
.input-
|
|
37
|
+
.input-autocomplete__placeholder_1snh9 {
|
|
38
38
|
color: var(--color-light-text-secondary);
|
|
39
39
|
}
|
|
40
|
-
.input-
|
|
40
|
+
.input-autocomplete__contentWrapper_1snh9 {
|
|
41
41
|
font-size: 16px;
|
|
42
42
|
line-height: 20px;
|
|
43
43
|
font-weight: 400;
|
|
@@ -48,12 +48,12 @@
|
|
|
48
48
|
overflow: hidden;
|
|
49
49
|
width: 100%;
|
|
50
50
|
}
|
|
51
|
-
.input-
|
|
51
|
+
.input-autocomplete__value_1snh9 {
|
|
52
52
|
overflow: hidden;
|
|
53
53
|
text-overflow: ellipsis;
|
|
54
54
|
text-align: left;
|
|
55
55
|
}
|
|
56
|
-
.input-
|
|
56
|
+
.input-autocomplete__focusVisible_1snh9 {
|
|
57
57
|
outline: 2px solid var(--focus-color);
|
|
58
58
|
outline-offset: 2px;
|
|
59
59
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"component":"input-
|
|
3
|
+
const styles = {"component":"input-autocomplete__component_1snh9","field":"input-autocomplete__field_1snh9","disabled":"input-autocomplete__disabled_1snh9","errorIcon":"input-autocomplete__errorIcon_1snh9","successIcon":"input-autocomplete__successIcon_1snh9","placeholder":"input-autocomplete__placeholder_1snh9","contentWrapper":"input-autocomplete__contentWrapper_1snh9","value":"input-autocomplete__value_1snh9","focusVisible":"input-autocomplete__focusVisible_1snh9"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../src/autocomplete-mobile-field/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../src/autocomplete-mobile-field/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n width: 100%;\n outline: none;\n}\n\n.field:not(.disabled) {\n cursor: pointer;\n}\n\n.errorIcon {\n display: var(--input-error-icon-display);\n}\n\n* + .errorIcon {\n display: var(--input-error-icon-not-alone-display);\n}\n\n.successIcon {\n display: var(--input-success-icon-display);\n}\n\n.disabled {\n cursor: var(--disabled-cursor);\n}\n\n.placeholder {\n color: var(--color-light-text-secondary);\n}\n\n.contentWrapper {\n @mixin paragraph_component;\n\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n width: 100%;\n}\n\n.value {\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: left;\n}\n\n.focusVisible {\n @mixin focus-outline;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,qCAAqC,CAAC,OAAO,CAAC,iCAAiC,CAAC,UAAU,CAAC,oCAAoC,CAAC,WAAW,CAAC,qCAAqC,CAAC,aAAa,CAAC,uCAAuC,CAAC,aAAa,CAAC,uCAAuC,CAAC,gBAAgB,CAAC,0CAA0C,CAAC,OAAO,CAAC,iCAAiC,CAAC,cAAc,CAAC,wCAAwC,CAAC;;;;"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { type BottomSheetSelectMobileProps } from '@alfalab/core-components-select/modern/shared';
|
|
2
3
|
export declare const InputAutocompleteMobile: React.ForwardRefExoticComponent<import("../types").InputAutocompleteCommonProps & {
|
|
3
|
-
isBottomSheet?: boolean
|
|
4
|
-
transitionProps?:
|
|
5
|
-
onApply?: (
|
|
6
|
-
onCancel?: (
|
|
7
|
-
title?: string
|
|
8
|
-
virtualKeyboard?: boolean
|
|
4
|
+
isBottomSheet?: boolean;
|
|
5
|
+
transitionProps?: NonNullable<BottomSheetSelectMobileProps["bottomSheetProps"]>["transitionProps"];
|
|
6
|
+
onApply?: () => void;
|
|
7
|
+
onCancel?: () => void;
|
|
8
|
+
title?: string;
|
|
9
|
+
virtualKeyboard?: boolean;
|
|
9
10
|
} & React.RefAttributes<unknown>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.mobile.js","sources":["../../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { type Ref, useMemo, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { maskitoTransform } from '@maskito/core';\nimport cn from 'classnames';\nimport throttle from 'lodash/throttle';\n\nimport {\n SelectMobile,\n type SelectMobileProps,\n SelectModalMobile,\n} from '@alfalab/core-components-select/mobile';\nimport {\n type AnyObject,\n type BottomSheetSelectMobileProps,\n Footer,\n type ModalSelectMobileProps,\n} from '@alfalab/core-components-select/shared';\nimport { isMaskitoMask, isNonNullable } from '@alfalab/core-components-shared';\n\nimport { AutocompleteMobileField as DefaultField } from '../autocomplete-mobile-field';\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteMobileProps } from '../types';\nimport { searchFilterStub } from '../utils';\n\nimport styles from './mobile.module.css';\n\nexport const InputAutocompleteMobile = React.forwardRef(\n (\n {\n Input,\n value,\n name,\n Arrow = null,\n label,\n placeholder = '',\n size = 48,\n open: openProp,\n onInput,\n onOpen,\n multiple,\n inputProps,\n isBottomSheet = true,\n dataTestId,\n transitionProps,\n onCancel,\n onApply,\n title,\n success,\n virtualKeyboard = false,\n Search,\n searchProps,\n Field = DefaultField,\n ...restProps\n }: InputAutocompleteMobileProps,\n ref,\n ) => {\n const [open, setOpen] = useState(false);\n const frozenValue = useRef<string>('');\n const searchInputRef = useRef<HTMLInputElement>(null);\n const targetRef = useRef<HTMLDivElement>(null);\n\n const restorePrevValue = () => onInput?.(frozenValue.current, OnInputReason.Close);\n\n const setModalVisibility = (isOpen: boolean) => {\n if (isOpen) {\n frozenValue.current = value || '';\n }\n\n if (openProp === undefined) {\n setOpen(isOpen);\n }\n\n onOpen?.({ open: isOpen, name });\n };\n\n const handleOpen: SelectMobileProps['onOpen'] = (payload) => {\n setModalVisibility(Boolean(payload.open));\n };\n\n const handleOptionsListTouchMove = useMemo(\n () =>\n throttle(() => {\n const input = searchInputRef.current;\n\n if (input && document.activeElement === input) {\n input.blur();\n }\n }, 300),\n [],\n );\n\n const handleApply = () => {\n setModalVisibility(false);\n onApply?.();\n };\n\n const handleCancel = () => {\n setModalVisibility(false);\n restorePrevValue();\n onCancel?.();\n };\n\n const handleExiting = (node: HTMLElement) => {\n targetRef.current?.focus();\n transitionProps?.onExiting?.(node);\n };\n\n const isOpen = Boolean(open || openProp);\n\n const Component = isBottomSheet ? SelectMobile : SelectModalMobile;\n\n const componentProps:\n | ModalSelectMobileProps['modalProps']\n | BottomSheetSelectMobileProps['bottomSheetProps'] = {\n title: title || label || placeholder,\n onClose: restorePrevValue,\n transitionProps: {\n ...transitionProps,\n onExiting: handleExiting,\n },\n [isBottomSheet ? 'containerProps' : 'componentDivProps']: {\n onTouchMove: handleOptionsListTouchMove,\n },\n };\n\n const clear = inputProps?.clear ?? false;\n\n const displayValue = isOpen ? frozenValue.current : value;\n\n const fieldValue = useMemo(() => {\n const mask = inputProps?.mask;\n\n return isNonNullable(displayValue) && isMaskitoMask(mask)\n ? maskitoTransform(displayValue, { mask })\n : displayValue;\n }, [displayValue, inputProps?.mask]);\n\n return (\n <Component\n Field={Field}\n {...restProps}\n {...(isBottomSheet\n ? {\n bottomSheetProps: {\n ...componentProps,\n virtualKeyboard,\n showSwipeMarker: false,\n actionButton: null,\n },\n }\n : {\n modalProps: componentProps,\n modalHeaderProps: { title },\n })}\n dataTestId={dataTestId}\n useWithApplyHook={false}\n showSearch={true}\n Search={Search ?? Input}\n searchProps={{\n value,\n filterFn: searchFilterStub,\n componentProps: {\n leftAddons: null,\n placeholder,\n ...inputProps,\n ...searchProps?.componentProps,\n className: cn(styles.input, inputProps?.className),\n clear,\n ref: mergeRefs([searchInputRef, inputProps?.ref as Ref<HTMLInputElement>]),\n onChange: (_, payload) => onInput?.(payload.value, OnInputReason.Change),\n },\n }}\n ref={mergeRefs([targetRef, ref])}\n open={isOpen}\n onOpen={handleOpen}\n Arrow={Arrow}\n placeholder={placeholder}\n label={label}\n size={size}\n name={name}\n multiple={multiple}\n optionsListProps={{\n footer: (\n <Footer\n showClear={true}\n handleClear={handleCancel}\n handleApply={handleApply}\n clearText='Отмена'\n applyText='Продолжить'\n dataTestId={dataTestId}\n />\n ),\n ...(restProps.optionsListProps as AnyObject),\n }}\n fieldProps={{\n value: fieldValue,\n clear,\n onClear: clear ? inputProps?.onClear : undefined,\n success,\n ...(restProps.fieldProps as AnyObject),\n }}\n />\n );\n },\n);\n"],"names":["DefaultField"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Component.mobile.js","sources":["../../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { type Ref, useMemo, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { maskitoTransform } from '@maskito/core';\nimport cn from 'classnames';\nimport throttle from 'lodash/throttle';\n\nimport {\n SelectMobile,\n type SelectMobileProps,\n SelectModalMobile,\n} from '@alfalab/core-components-select/mobile';\nimport {\n type AnyObject,\n type BottomSheetSelectMobileProps,\n Footer,\n type ModalSelectMobileProps,\n} from '@alfalab/core-components-select/shared';\nimport { isMaskitoMask, isNonNullable } from '@alfalab/core-components-shared';\n\nimport { AutocompleteMobileField as DefaultField } from '../autocomplete-mobile-field';\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteMobileProps } from '../types';\nimport { searchFilterStub } from '../utils';\n\nimport styles from './mobile.module.css';\n\nexport const InputAutocompleteMobile = React.forwardRef(\n (\n {\n Input,\n value,\n name,\n Arrow = null,\n label,\n placeholder = '',\n size = 48,\n open: openProp,\n onInput,\n onOpen,\n multiple,\n inputProps,\n isBottomSheet = true,\n dataTestId,\n transitionProps,\n onCancel,\n onApply,\n title,\n success,\n virtualKeyboard = false,\n Search,\n searchProps,\n Field = DefaultField,\n ...restProps\n }: InputAutocompleteMobileProps,\n ref,\n ) => {\n const [open, setOpen] = useState(false);\n const frozenValue = useRef<string>('');\n const searchInputRef = useRef<HTMLInputElement>(null);\n const targetRef = useRef<HTMLDivElement>(null);\n\n const restorePrevValue = () => onInput?.(frozenValue.current, OnInputReason.Close);\n\n const setModalVisibility = (isOpen: boolean) => {\n if (isOpen) {\n frozenValue.current = value || '';\n }\n\n if (openProp === undefined) {\n setOpen(isOpen);\n }\n\n onOpen?.({ open: isOpen, name });\n };\n\n const handleOpen: SelectMobileProps['onOpen'] = (payload) => {\n setModalVisibility(Boolean(payload.open));\n };\n\n const handleOptionsListTouchMove = useMemo(\n () =>\n throttle(() => {\n const input = searchInputRef.current;\n\n if (input && document.activeElement === input) {\n input.blur();\n }\n }, 300),\n [],\n );\n\n const handleApply = () => {\n setModalVisibility(false);\n onApply?.();\n };\n\n const handleCancel = () => {\n setModalVisibility(false);\n restorePrevValue();\n onCancel?.();\n };\n\n const handleExiting = (node: HTMLElement) => {\n targetRef.current?.focus();\n transitionProps?.onExiting?.(node);\n };\n\n const isOpen = Boolean(open || openProp);\n\n const Component = isBottomSheet ? SelectMobile : SelectModalMobile;\n\n const componentProps:\n | ModalSelectMobileProps['modalProps']\n | BottomSheetSelectMobileProps['bottomSheetProps'] = {\n title: title || label || placeholder,\n onClose: restorePrevValue,\n transitionProps: {\n ...transitionProps,\n onExiting: handleExiting,\n },\n [isBottomSheet ? 'containerProps' : 'componentDivProps']: {\n onTouchMove: handleOptionsListTouchMove,\n },\n };\n\n const clear = inputProps?.clear ?? false;\n\n const displayValue = isOpen ? frozenValue.current : value;\n\n const fieldValue = useMemo(() => {\n const mask = inputProps?.mask;\n\n return isNonNullable(displayValue) && isMaskitoMask(mask)\n ? maskitoTransform(displayValue, { mask })\n : displayValue;\n }, [displayValue, inputProps?.mask]);\n\n return (\n <Component\n Field={Field}\n {...restProps}\n {...(isBottomSheet\n ? {\n bottomSheetProps: {\n ...componentProps,\n virtualKeyboard,\n showSwipeMarker: false,\n actionButton: null,\n },\n }\n : {\n modalProps: componentProps,\n modalHeaderProps: { title },\n })}\n dataTestId={dataTestId}\n useWithApplyHook={false}\n showSearch={true}\n Search={Search ?? Input}\n searchProps={{\n value,\n filterFn: searchFilterStub,\n componentProps: {\n leftAddons: null,\n placeholder,\n ...inputProps,\n ...searchProps?.componentProps,\n className: cn(styles.input, inputProps?.className),\n clear,\n ref: mergeRefs([searchInputRef, inputProps?.ref as Ref<HTMLInputElement>]),\n onChange: (_, payload) => onInput?.(payload.value, OnInputReason.Change),\n },\n }}\n ref={mergeRefs([targetRef, ref])}\n open={isOpen}\n onOpen={handleOpen}\n Arrow={Arrow}\n placeholder={placeholder}\n label={label}\n size={size}\n name={name}\n multiple={multiple}\n optionsListProps={{\n footer: (\n <Footer\n showClear={true}\n handleClear={handleCancel}\n handleApply={handleApply}\n clearText='Отмена'\n applyText='Продолжить'\n dataTestId={dataTestId}\n />\n ),\n ...(restProps.optionsListProps as AnyObject),\n }}\n fieldProps={{\n value: fieldValue,\n clear,\n onClear: clear ? inputProps?.onClear : undefined,\n success,\n ...(restProps.fieldProps as AnyObject),\n }}\n />\n );\n },\n);\n"],"names":["DefaultField"],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare const InputAutocompleteModalMobile: React.ForwardRefExoticComponent<import("../types").InputAutocompleteCommonProps & {
|
|
3
|
-
isBottomSheet?: boolean
|
|
4
|
-
transitionProps?:
|
|
5
|
-
onApply?: (
|
|
6
|
-
onCancel?: (
|
|
7
|
-
title?: string
|
|
8
|
-
virtualKeyboard?: boolean
|
|
3
|
+
isBottomSheet?: boolean;
|
|
4
|
+
transitionProps?: NonNullable<import("@alfalab/core-components-select/typings").BottomSheetSelectMobileProps["bottomSheetProps"]>["transitionProps"];
|
|
5
|
+
onApply?: () => void;
|
|
6
|
+
onCancel?: () => void;
|
|
7
|
+
title?: string;
|
|
8
|
+
virtualKeyboard?: boolean;
|
|
9
9
|
} & React.RefAttributes<HTMLDivElement>>;
|
package/modern/mobile/mobile.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.input {\n width: auto;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,OAAO,CAAC,iCAAiC,CAAC;;;;"}
|
package/modern/types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ComponentType, type RefAttributes } from 'react';
|
|
2
2
|
import { type InputProps } from '@alfalab/core-components-input/modern';
|
|
3
3
|
import { type BaseSelectProps, type BottomSheetSelectMobileProps } from '@alfalab/core-components-select/modern/shared';
|
|
4
|
-
|
|
4
|
+
type OnInputTypeReason = 'close' | 'change';
|
|
5
5
|
export interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomplete' | 'nativeSelect' | 'showSearch' | 'valueRenderer'> {
|
|
6
6
|
/**
|
|
7
7
|
* Компонент ввода значения
|
|
@@ -28,7 +28,7 @@ export interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'aut
|
|
|
28
28
|
*/
|
|
29
29
|
onInput?: (value: string, reason?: OnInputTypeReason) => void;
|
|
30
30
|
}
|
|
31
|
-
|
|
31
|
+
type MobileProps = {
|
|
32
32
|
/**
|
|
33
33
|
* Открывать в bottom-sheet
|
|
34
34
|
*/
|
|
@@ -56,7 +56,7 @@ declare type MobileProps = {
|
|
|
56
56
|
*/
|
|
57
57
|
virtualKeyboard?: boolean;
|
|
58
58
|
};
|
|
59
|
-
export
|
|
59
|
+
export type InputAutocompleteMobileProps = InputAutocompleteCommonProps & MobileProps;
|
|
60
60
|
export interface InputAutocompleteProps extends InputAutocompleteCommonProps {
|
|
61
61
|
/**
|
|
62
62
|
* Пропсы для мобильного компонента
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type FieldProps } from '@alfalab/core-components-select/moderncssm/shared';
|
|
3
3
|
import { type InputAutocompleteCommonProps } from '../types';
|
|
4
|
-
export
|
|
4
|
+
export type AutocompleteFieldProps = FieldProps & Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;
|
|
5
5
|
export declare const AutocompleteField: ({ label, labelView, placeholder, size, Arrow, Input, value, error, success, hint, disabled, readOnly, onInput, inputProps, innerProps, dataTestId, }: AutocompleteFieldProps) => React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-field/Component.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type InputProps } from '@alfalab/core-components-input';\nimport { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';\nimport { type FieldProps } from '@alfalab/core-components-select/shared';\n\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteCommonProps } from '../types';\n\nimport styles from './index.module.css';\n\nexport type AutocompleteFieldProps = FieldProps &\n Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;\n\nexport const AutocompleteField = ({\n label,\n labelView = 'inner',\n placeholder,\n size,\n Arrow,\n Input = DefaultInput,\n value,\n error,\n success,\n hint,\n disabled,\n readOnly,\n onInput,\n inputProps = {},\n innerProps,\n dataTestId,\n}: AutocompleteFieldProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { onClick, onFocus } = innerProps;\n\n const inputDisabled = disabled || readOnly;\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onClick) onClick(event);\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n },\n [onClick],\n );\n\n const handleInput: InputProps['onChange'] = (_, payload) =>\n onInput?.(payload.value, OnInputReason.Change);\n\n /**\n * Right addons priority [4] <= [3] <= [2] <= [1] or [0]\n * [4] - Clear\n * [3] - Status (error, success)\n * [2] - Common (info, e.g.)\n * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n * [0] - Lock\n */\n const renderRightAddons = () => (\n <Fragment>\n {inputProps.rightAddons}\n {Arrow && !inputDisabled && (\n <span\n className={cn(styles.arrow, {\n [styles.error]: error,\n })}\n >\n {Arrow}\n </span>\n )}\n </Fragment>\n );\n\n return (\n <Input\n dataTestId={dataTestId}\n {...inputProps}\n {...innerProps}\n wrapperRef={mergeRefs([\n innerProps.ref as React.Ref<HTMLElement>,\n inputProps.wrapperRef as React.Ref<HTMLElement>,\n ])}\n ref={mergeRefs([inputRef, inputProps.ref as React.Ref<HTMLElement>])}\n disabled={disabled}\n readOnly={readOnly}\n block={true}\n label={label}\n labelView={labelView}\n placeholder={placeholder}\n size={size}\n error={error}\n success={success}\n hint={hint}\n onChange={handleInput}\n onClick={inputDisabled ? undefined : handleClick}\n onFocus={inputDisabled ? undefined : onFocus}\n autoComplete='off'\n value={value}\n rightAddons={renderRightAddons()}\n />\n );\n};\n"],"names":["DefaultInput"],"mappings":";;;;;;;MAgBa,iBAAiB,GAAG,CAAC,EAC9B,KAAK,EACL,SAAS,GAAG,OAAO,EACnB,WAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,GAAGA,YAAY,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,UAAU,GAAG,EAAE,EACf,UAAU,EACV,UAAU,GACW,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;AAE/C,IAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,UAAU;AAEvC,IAAA,MAAM,aAAa,GAAG,QAAQ,IAAI,QAAQ;AAE1C,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAuC,KAAI;AACxC,QAAA,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/autocomplete-field/Component.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type InputProps } from '@alfalab/core-components-input';\nimport { InputDesktop as DefaultInput } from '@alfalab/core-components-input/desktop';\nimport { type FieldProps } from '@alfalab/core-components-select/shared';\n\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteCommonProps } from '../types';\n\nimport styles from './index.module.css';\n\nexport type AutocompleteFieldProps = FieldProps &\n Pick<InputAutocompleteCommonProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;\n\nexport const AutocompleteField = ({\n label,\n labelView = 'inner',\n placeholder,\n size,\n Arrow,\n Input = DefaultInput,\n value,\n error,\n success,\n hint,\n disabled,\n readOnly,\n onInput,\n inputProps = {},\n innerProps,\n dataTestId,\n}: AutocompleteFieldProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const { onClick, onFocus } = innerProps;\n\n const inputDisabled = disabled || readOnly;\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (onClick) onClick(event);\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n },\n [onClick],\n );\n\n const handleInput: InputProps['onChange'] = (_, payload) =>\n onInput?.(payload.value, OnInputReason.Change);\n\n /**\n * Right addons priority [4] <= [3] <= [2] <= [1] or [0]\n * [4] - Clear\n * [3] - Status (error, success)\n * [2] - Common (info, e.g.)\n * [1] - Indicators (eye, calendar, chevron, stepper e.g.)\n * [0] - Lock\n */\n const renderRightAddons = () => (\n <Fragment>\n {inputProps.rightAddons}\n {Arrow && !inputDisabled && (\n <span\n className={cn(styles.arrow, {\n [styles.error]: error,\n })}\n >\n {Arrow}\n </span>\n )}\n </Fragment>\n );\n\n return (\n <Input\n dataTestId={dataTestId}\n {...inputProps}\n {...innerProps}\n wrapperRef={mergeRefs([\n innerProps.ref as React.Ref<HTMLElement>,\n inputProps.wrapperRef as React.Ref<HTMLElement>,\n ])}\n ref={mergeRefs([inputRef, inputProps.ref as React.Ref<HTMLElement>])}\n disabled={disabled}\n readOnly={readOnly}\n block={true}\n label={label}\n labelView={labelView}\n placeholder={placeholder}\n size={size}\n error={error}\n success={success}\n hint={hint}\n onChange={handleInput}\n onClick={inputDisabled ? undefined : handleClick}\n onFocus={inputDisabled ? undefined : onFocus}\n autoComplete='off'\n value={value}\n rightAddons={renderRightAddons()}\n />\n );\n};\n"],"names":["DefaultInput"],"mappings":";;;;;;;MAgBa,iBAAiB,GAAG,CAAC,EAC9B,KAAK,EACL,SAAS,GAAG,OAAO,EACnB,WAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,GAAGA,YAAY,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,UAAU,GAAG,EAAE,EACf,UAAU,EACV,UAAU,GACW,KAAI;AACzB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;AAE/C,IAAA,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,UAAU;AAEvC,IAAA,MAAM,aAAa,GAAG,QAAQ,IAAI,QAAQ;AAE1C,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAuC,KAAI;AACxC,QAAA,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC;AAE3B,QAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AAClB,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE;;AAEhC,KAAC,EACD,CAAC,OAAO,CAAC,CACZ;IAED,MAAM,WAAW,GAA2B,CAAC,CAAC,EAAE,OAAO,KACnD,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC;AAElD;;;;;;;AAOG;AACH,IAAA,MAAM,iBAAiB,GAAG,OACtB,oBAAC,QAAQ,EAAA,IAAA;AACJ,QAAA,UAAU,CAAC,WAAW;AACtB,QAAA,KAAK,IAAI,CAAC,aAAa,KACpB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE;AACxB,gBAAA,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK;AACxB,aAAA,CAAC,IAED,KAAK,CACH,CACV,CACM,CACd;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACF,UAAU,EAAE,UAAU,EAClB,GAAA,UAAU,KACV,UAAU,EACd,UAAU,EAAE,SAAS,CAAC;AAClB,YAAA,UAAU,CAAC,GAA6B;AACxC,YAAA,UAAU,CAAC,UAAoC;SAClD,CAAC,EACF,GAAG,EAAE,SAAS,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,GAA6B,CAAC,CAAC,EACpE,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE,aAAa,GAAG,SAAS,GAAG,WAAW,EAChD,OAAO,EAAE,aAAa,GAAG,SAAS,GAAG,OAAO,EAC5C,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,iBAAiB,EAAE,EAClC,CAAA;AAEV;;;;"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React, { type ElementType } from 'react';
|
|
2
2
|
import { type FormControlMobileProps } from '@alfalab/core-components-form-control/moderncssm/mobile';
|
|
3
3
|
import { type FieldProps as BaseFieldProps } from '@alfalab/core-components-select/moderncssm/shared';
|
|
4
|
-
|
|
4
|
+
type FieldProps = {
|
|
5
5
|
/**
|
|
6
6
|
* Компонент FormControl
|
|
7
7
|
*/
|
|
8
8
|
FormControlComponent?: ElementType;
|
|
9
9
|
};
|
|
10
|
-
export
|
|
10
|
+
export type AutocompleteMobileFieldProps = FormControlMobileProps & Omit<BaseFieldProps, 'selected' | 'multiple' | 'success'> & {
|
|
11
11
|
/**
|
|
12
12
|
* Значение поля ввода
|
|
13
13
|
*/
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { type BottomSheetSelectMobileProps } from '@alfalab/core-components-select/moderncssm/shared';
|
|
2
3
|
export declare const InputAutocompleteMobile: React.ForwardRefExoticComponent<import("../types").InputAutocompleteCommonProps & {
|
|
3
|
-
isBottomSheet?: boolean
|
|
4
|
-
transitionProps?:
|
|
5
|
-
onApply?: (
|
|
6
|
-
onCancel?: (
|
|
7
|
-
title?: string
|
|
8
|
-
virtualKeyboard?: boolean
|
|
4
|
+
isBottomSheet?: boolean;
|
|
5
|
+
transitionProps?: NonNullable<BottomSheetSelectMobileProps["bottomSheetProps"]>["transitionProps"];
|
|
6
|
+
onApply?: () => void;
|
|
7
|
+
onCancel?: () => void;
|
|
8
|
+
title?: string;
|
|
9
|
+
virtualKeyboard?: boolean;
|
|
9
10
|
} & React.RefAttributes<unknown>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.mobile.js","sources":["../../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { type Ref, useMemo, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { maskitoTransform } from '@maskito/core';\nimport cn from 'classnames';\nimport throttle from 'lodash/throttle';\n\nimport {\n SelectMobile,\n type SelectMobileProps,\n SelectModalMobile,\n} from '@alfalab/core-components-select/mobile';\nimport {\n type AnyObject,\n type BottomSheetSelectMobileProps,\n Footer,\n type ModalSelectMobileProps,\n} from '@alfalab/core-components-select/shared';\nimport { isMaskitoMask, isNonNullable } from '@alfalab/core-components-shared';\n\nimport { AutocompleteMobileField as DefaultField } from '../autocomplete-mobile-field';\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteMobileProps } from '../types';\nimport { searchFilterStub } from '../utils';\n\nimport styles from './mobile.module.css';\n\nexport const InputAutocompleteMobile = React.forwardRef(\n (\n {\n Input,\n value,\n name,\n Arrow = null,\n label,\n placeholder = '',\n size = 48,\n open: openProp,\n onInput,\n onOpen,\n multiple,\n inputProps,\n isBottomSheet = true,\n dataTestId,\n transitionProps,\n onCancel,\n onApply,\n title,\n success,\n virtualKeyboard = false,\n Search,\n searchProps,\n Field = DefaultField,\n ...restProps\n }: InputAutocompleteMobileProps,\n ref,\n ) => {\n const [open, setOpen] = useState(false);\n const frozenValue = useRef<string>('');\n const searchInputRef = useRef<HTMLInputElement>(null);\n const targetRef = useRef<HTMLDivElement>(null);\n\n const restorePrevValue = () => onInput?.(frozenValue.current, OnInputReason.Close);\n\n const setModalVisibility = (isOpen: boolean) => {\n if (isOpen) {\n frozenValue.current = value || '';\n }\n\n if (openProp === undefined) {\n setOpen(isOpen);\n }\n\n onOpen?.({ open: isOpen, name });\n };\n\n const handleOpen: SelectMobileProps['onOpen'] = (payload) => {\n setModalVisibility(Boolean(payload.open));\n };\n\n const handleOptionsListTouchMove = useMemo(\n () =>\n throttle(() => {\n const input = searchInputRef.current;\n\n if (input && document.activeElement === input) {\n input.blur();\n }\n }, 300),\n [],\n );\n\n const handleApply = () => {\n setModalVisibility(false);\n onApply?.();\n };\n\n const handleCancel = () => {\n setModalVisibility(false);\n restorePrevValue();\n onCancel?.();\n };\n\n const handleExiting = (node: HTMLElement) => {\n targetRef.current?.focus();\n transitionProps?.onExiting?.(node);\n };\n\n const isOpen = Boolean(open || openProp);\n\n const Component = isBottomSheet ? SelectMobile : SelectModalMobile;\n\n const componentProps:\n | ModalSelectMobileProps['modalProps']\n | BottomSheetSelectMobileProps['bottomSheetProps'] = {\n title: title || label || placeholder,\n onClose: restorePrevValue,\n transitionProps: {\n ...transitionProps,\n onExiting: handleExiting,\n },\n [isBottomSheet ? 'containerProps' : 'componentDivProps']: {\n onTouchMove: handleOptionsListTouchMove,\n },\n };\n\n const clear = inputProps?.clear ?? false;\n\n const displayValue = isOpen ? frozenValue.current : value;\n\n const fieldValue = useMemo(() => {\n const mask = inputProps?.mask;\n\n return isNonNullable(displayValue) && isMaskitoMask(mask)\n ? maskitoTransform(displayValue, { mask })\n : displayValue;\n }, [displayValue, inputProps?.mask]);\n\n return (\n <Component\n Field={Field}\n {...restProps}\n {...(isBottomSheet\n ? {\n bottomSheetProps: {\n ...componentProps,\n virtualKeyboard,\n showSwipeMarker: false,\n actionButton: null,\n },\n }\n : {\n modalProps: componentProps,\n modalHeaderProps: { title },\n })}\n dataTestId={dataTestId}\n useWithApplyHook={false}\n showSearch={true}\n Search={Search ?? Input}\n searchProps={{\n value,\n filterFn: searchFilterStub,\n componentProps: {\n leftAddons: null,\n placeholder,\n ...inputProps,\n ...searchProps?.componentProps,\n className: cn(styles.input, inputProps?.className),\n clear,\n ref: mergeRefs([searchInputRef, inputProps?.ref as Ref<HTMLInputElement>]),\n onChange: (_, payload) => onInput?.(payload.value, OnInputReason.Change),\n },\n }}\n ref={mergeRefs([targetRef, ref])}\n open={isOpen}\n onOpen={handleOpen}\n Arrow={Arrow}\n placeholder={placeholder}\n label={label}\n size={size}\n name={name}\n multiple={multiple}\n optionsListProps={{\n footer: (\n <Footer\n showClear={true}\n handleClear={handleCancel}\n handleApply={handleApply}\n clearText='Отмена'\n applyText='Продолжить'\n dataTestId={dataTestId}\n />\n ),\n ...(restProps.optionsListProps as AnyObject),\n }}\n fieldProps={{\n value: fieldValue,\n clear,\n onClear: clear ? inputProps?.onClear : undefined,\n success,\n ...(restProps.fieldProps as AnyObject),\n }}\n />\n );\n },\n);\n"],"names":["DefaultField"],"mappings":";;;;;;;;;;;;;AA0Ba,MAAA,uBAAuB,GAAG,KAAK,CAAC,UAAU,CACnD,CACI,EACI,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,IAAI,EACZ,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,IAAI,GAAG,EAAE,EACT,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,MAAM,EACN,QAAQ,EACR,UAAU,EACV,aAAa,GAAG,IAAI,EACpB,UAAU,EACV,eAAe,EACf,QAAQ,EACR,OAAO,EACP,KAAK,EACL,OAAO,EACP,eAAe,GAAG,KAAK,EACvB,MAAM,EACN,WAAW,EACX,KAAK,GAAGA,uBAAY,EACpB,GAAG,SAAS,EACe,EAC/B,GAAG,KACH;IACA,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACvC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAS,EAAE,CAAC;AACtC,IAAA,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC;AACrD,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE9C,IAAA,MAAM,gBAAgB,GAAG,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC;AAElF,IAAA,MAAM,kBAAkB,GAAG,CAAC,MAAe,KAAI;AAC3C,QAAA,IAAI,MAAM,EAAE;AACR,YAAA,WAAW,CAAC,OAAO,GAAG,KAAK,IAAI,EAAE;AACpC;QAED,IAAI,QAAQ,KAAK,SAAS,EAAE;YACxB,OAAO,CAAC,MAAM,CAAC;AAClB;QAED,MAAM,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;AACpC,KAAC;AAED,IAAA,MAAM,UAAU,GAAgC,CAAC,OAAO,KAAI;QACxD,kBAAkB,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAC7C,KAAC;IAED,MAAM,0BAA0B,GAAG,OAAO,CACtC,MACI,QAAQ,CAAC,MAAK;AACV,QAAA,MAAM,KAAK,GAAG,cAAc,CAAC,OAAO;AAEpC,QAAA,IAAI,KAAK,IAAI,QAAQ,CAAC,aAAa,KAAK,KAAK,EAAE;YAC3C,KAAK,CAAC,IAAI,EAAE;AACf;AACL,KAAC,EAAE,GAAG,CAAC,EACX,EAAE,CACL;IAED,MAAM,WAAW,GAAG,MAAK;QACrB,kBAAkB,CAAC,KAAK,CAAC;QACzB,OAAO,IAAI;AACf,KAAC;IAED,MAAM,YAAY,GAAG,MAAK;QACtB,kBAAkB,CAAC,KAAK,CAAC;AACzB,QAAA,gBAAgB,EAAE;QAClB,QAAQ,IAAI;AAChB,KAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,IAAiB,KAAI;AACxC,QAAA,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE;AAC1B,QAAA,eAAe,EAAE,SAAS,GAAG,IAAI,CAAC;AACtC,KAAC;IAED,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,IAAI,QAAQ,CAAC;IAExC,MAAM,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,iBAAiB;AAElE,IAAA,MAAM,cAAc,GAEqC;AACrD,QAAA,KAAK,EAAE,KAAK,IAAI,KAAK,IAAI,WAAW;AACpC,QAAA,OAAO,EAAE,gBAAgB;AACzB,QAAA,eAAe,EAAE;AACb,YAAA,GAAG,eAAe;AAClB,YAAA,SAAS,EAAE,aAAa;AAC3B,SAAA;QACD,CAAC,aAAa,GAAG,gBAAgB,GAAG,mBAAmB,GAAG;AACtD,YAAA,WAAW,EAAE,0BAA0B;AAC1C,SAAA;KACJ;AAED,IAAA,MAAM,KAAK,GAAG,UAAU,EAAE,KAAK,IAAI,KAAK;AAExC,IAAA,MAAM,YAAY,GAAG,MAAM,GAAG,WAAW,CAAC,OAAO,GAAG,KAAK;AAEzD,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;AAC5B,QAAA,MAAM,IAAI,GAAG,UAAU,EAAE,IAAI;QAE7B,OAAO,aAAa,CAAC,YAAY,CAAC,IAAI,aAAa,CAAC,IAAI;cAClD,gBAAgB,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE;cACvC,YAAY;KACrB,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IAEpC,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,EACN,EAAA,KAAK,EAAE,KAAK,EACR,GAAA,SAAS,EACT,IAAC;AACD,cAAE;AACI,gBAAA,gBAAgB,EAAE;AACd,oBAAA,GAAG,cAAc;oBACjB,eAAe;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,YAAY,EAAE,IAAI;AACrB,iBAAA;AACJ;AACH,cAAE;AACI,gBAAA,UAAU,EAAE,cAAc;gBAC1B,gBAAgB,EAAE,EAAE,KAAK,EAAE;aAC9B,CAAC,EACR,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,KAAK,EACvB,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,MAAM,IAAI,KAAK,EACvB,WAAW,EAAE;YACT,KAAK;AACL,YAAA,QAAQ,EAAE,gBAAgB;AAC1B,YAAA,cAAc,EAAE;AACZ,gBAAA,UAAU,EAAE,IAAI;gBAChB,WAAW;AACX,gBAAA,GAAG,UAAU;gBACb,GAAG,WAAW,EAAE,cAAc;gBAC9B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,CAAC;gBAClD,KAAK;gBACL,GAAG,EAAE,SAAS,CAAC,CAAC,cAAc,EAAE,UAAU,EAAE,GAA4B,CAAC,CAAC;AAC1E,gBAAA,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC;AAC3E,aAAA;SACJ,EACD,GAAG,EAAE,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,EAChC,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE;AACd,YAAA,MAAM,GACF,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAC,sCAAQ,EAClB,SAAS,EAAC,8DAAY,EACtB,UAAU,EAAE,UAAU,GACxB,CACL;YACD,GAAI,SAAS,CAAC,gBAA8B;AAC/C,SAAA,EACD,UAAU,EAAE;AACR,YAAA,KAAK,EAAE,UAAU;YACjB,KAAK;YACL,OAAO,EAAE,KAAK,GAAG,UAAU,EAAE,OAAO,GAAG,SAAS;YAChD,OAAO;YACP,GAAI,SAAS,CAAC,UAAwB;AACzC,SAAA,EAAA,CACH;AAEV,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"Component.mobile.js","sources":["../../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { type Ref, useMemo, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { maskitoTransform } from '@maskito/core';\nimport cn from 'classnames';\nimport throttle from 'lodash/throttle';\n\nimport {\n SelectMobile,\n type SelectMobileProps,\n SelectModalMobile,\n} from '@alfalab/core-components-select/mobile';\nimport {\n type AnyObject,\n type BottomSheetSelectMobileProps,\n Footer,\n type ModalSelectMobileProps,\n} from '@alfalab/core-components-select/shared';\nimport { isMaskitoMask, isNonNullable } from '@alfalab/core-components-shared';\n\nimport { AutocompleteMobileField as DefaultField } from '../autocomplete-mobile-field';\nimport { OnInputReason } from '../enums';\nimport { type InputAutocompleteMobileProps } from '../types';\nimport { searchFilterStub } from '../utils';\n\nimport styles from './mobile.module.css';\n\nexport const InputAutocompleteMobile = React.forwardRef(\n (\n {\n Input,\n value,\n name,\n Arrow = null,\n label,\n placeholder = '',\n size = 48,\n open: openProp,\n onInput,\n onOpen,\n multiple,\n inputProps,\n isBottomSheet = true,\n dataTestId,\n transitionProps,\n onCancel,\n onApply,\n title,\n success,\n virtualKeyboard = false,\n Search,\n searchProps,\n Field = DefaultField,\n ...restProps\n }: InputAutocompleteMobileProps,\n ref,\n ) => {\n const [open, setOpen] = useState(false);\n const frozenValue = useRef<string>('');\n const searchInputRef = useRef<HTMLInputElement>(null);\n const targetRef = useRef<HTMLDivElement>(null);\n\n const restorePrevValue = () => onInput?.(frozenValue.current, OnInputReason.Close);\n\n const setModalVisibility = (isOpen: boolean) => {\n if (isOpen) {\n frozenValue.current = value || '';\n }\n\n if (openProp === undefined) {\n setOpen(isOpen);\n }\n\n onOpen?.({ open: isOpen, name });\n };\n\n const handleOpen: SelectMobileProps['onOpen'] = (payload) => {\n setModalVisibility(Boolean(payload.open));\n };\n\n const handleOptionsListTouchMove = useMemo(\n () =>\n throttle(() => {\n const input = searchInputRef.current;\n\n if (input && document.activeElement === input) {\n input.blur();\n }\n }, 300),\n [],\n );\n\n const handleApply = () => {\n setModalVisibility(false);\n onApply?.();\n };\n\n const handleCancel = () => {\n setModalVisibility(false);\n restorePrevValue();\n onCancel?.();\n };\n\n const handleExiting = (node: HTMLElement) => {\n targetRef.current?.focus();\n transitionProps?.onExiting?.(node);\n };\n\n const isOpen = Boolean(open || openProp);\n\n const Component = isBottomSheet ? SelectMobile : SelectModalMobile;\n\n const componentProps:\n | ModalSelectMobileProps['modalProps']\n | BottomSheetSelectMobileProps['bottomSheetProps'] = {\n title: title || label || placeholder,\n onClose: restorePrevValue,\n transitionProps: {\n ...transitionProps,\n onExiting: handleExiting,\n },\n [isBottomSheet ? 'containerProps' : 'componentDivProps']: {\n onTouchMove: handleOptionsListTouchMove,\n },\n };\n\n const clear = inputProps?.clear ?? false;\n\n const displayValue = isOpen ? frozenValue.current : value;\n\n const fieldValue = useMemo(() => {\n const mask = inputProps?.mask;\n\n return isNonNullable(displayValue) && isMaskitoMask(mask)\n ? maskitoTransform(displayValue, { mask })\n : displayValue;\n }, [displayValue, inputProps?.mask]);\n\n return (\n <Component\n Field={Field}\n {...restProps}\n {...(isBottomSheet\n ? {\n bottomSheetProps: {\n ...componentProps,\n virtualKeyboard,\n showSwipeMarker: false,\n actionButton: null,\n },\n }\n : {\n modalProps: componentProps,\n modalHeaderProps: { title },\n })}\n dataTestId={dataTestId}\n useWithApplyHook={false}\n showSearch={true}\n Search={Search ?? Input}\n searchProps={{\n value,\n filterFn: searchFilterStub,\n componentProps: {\n leftAddons: null,\n placeholder,\n ...inputProps,\n ...searchProps?.componentProps,\n className: cn(styles.input, inputProps?.className),\n clear,\n ref: mergeRefs([searchInputRef, inputProps?.ref as Ref<HTMLInputElement>]),\n onChange: (_, payload) => onInput?.(payload.value, OnInputReason.Change),\n },\n }}\n ref={mergeRefs([targetRef, ref])}\n open={isOpen}\n onOpen={handleOpen}\n Arrow={Arrow}\n placeholder={placeholder}\n label={label}\n size={size}\n name={name}\n multiple={multiple}\n optionsListProps={{\n footer: (\n <Footer\n showClear={true}\n handleClear={handleCancel}\n handleApply={handleApply}\n clearText='Отмена'\n applyText='Продолжить'\n dataTestId={dataTestId}\n />\n ),\n ...(restProps.optionsListProps as AnyObject),\n }}\n fieldProps={{\n value: fieldValue,\n clear,\n onClear: clear ? inputProps?.onClear : undefined,\n success,\n ...(restProps.fieldProps as AnyObject),\n }}\n />\n );\n },\n);\n"],"names":["DefaultField"],"mappings":";;;;;;;;;;;;;AA0Ba,MAAA,uBAAuB,GAAG,KAAK,CAAC,UAAU,CACnD,CACI,EACI,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,IAAI,EACZ,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,IAAI,GAAG,EAAE,EACT,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,MAAM,EACN,QAAQ,EACR,UAAU,EACV,aAAa,GAAG,IAAI,EACpB,UAAU,EACV,eAAe,EACf,QAAQ,EACR,OAAO,EACP,KAAK,EACL,OAAO,EACP,eAAe,GAAG,KAAK,EACvB,MAAM,EACN,WAAW,EACX,KAAK,GAAGA,uBAAY,EACpB,GAAG,SAAS,EACe,EAC/B,GAAG,KACH;IACA,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACvC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAS,EAAE,CAAC;AACtC,IAAA,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC;AACrD,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE9C,IAAA,MAAM,gBAAgB,GAAG,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC;AAElF,IAAA,MAAM,kBAAkB,GAAG,CAAC,MAAe,KAAI;QAC3C,IAAI,MAAM,EAAE;AACR,YAAA,WAAW,CAAC,OAAO,GAAG,KAAK,IAAI,EAAE;;AAGrC,QAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;YACxB,OAAO,CAAC,MAAM,CAAC;;QAGnB,MAAM,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;AACpC,KAAC;AAED,IAAA,MAAM,UAAU,GAAgC,CAAC,OAAO,KAAI;QACxD,kBAAkB,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAC7C,KAAC;IAED,MAAM,0BAA0B,GAAG,OAAO,CACtC,MACI,QAAQ,CAAC,MAAK;AACV,QAAA,MAAM,KAAK,GAAG,cAAc,CAAC,OAAO;QAEpC,IAAI,KAAK,IAAI,QAAQ,CAAC,aAAa,KAAK,KAAK,EAAE;YAC3C,KAAK,CAAC,IAAI,EAAE;;AAEpB,KAAC,EAAE,GAAG,CAAC,EACX,EAAE,CACL;IAED,MAAM,WAAW,GAAG,MAAK;QACrB,kBAAkB,CAAC,KAAK,CAAC;QACzB,OAAO,IAAI;AACf,KAAC;IAED,MAAM,YAAY,GAAG,MAAK;QACtB,kBAAkB,CAAC,KAAK,CAAC;AACzB,QAAA,gBAAgB,EAAE;QAClB,QAAQ,IAAI;AAChB,KAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,IAAiB,KAAI;AACxC,QAAA,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE;AAC1B,QAAA,eAAe,EAAE,SAAS,GAAG,IAAI,CAAC;AACtC,KAAC;IAED,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,IAAI,QAAQ,CAAC;IAExC,MAAM,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,iBAAiB;AAElE,IAAA,MAAM,cAAc,GAEqC;AACrD,QAAA,KAAK,EAAE,KAAK,IAAI,KAAK,IAAI,WAAW;AACpC,QAAA,OAAO,EAAE,gBAAgB;AACzB,QAAA,eAAe,EAAE;AACb,YAAA,GAAG,eAAe;AAClB,YAAA,SAAS,EAAE,aAAa;AAC3B,SAAA;QACD,CAAC,aAAa,GAAG,gBAAgB,GAAG,mBAAmB,GAAG;AACtD,YAAA,WAAW,EAAE,0BAA0B;AAC1C,SAAA;KACJ;AAED,IAAA,MAAM,KAAK,GAAG,UAAU,EAAE,KAAK,IAAI,KAAK;AAExC,IAAA,MAAM,YAAY,GAAG,MAAM,GAAG,WAAW,CAAC,OAAO,GAAG,KAAK;AAEzD,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;AAC5B,QAAA,MAAM,IAAI,GAAG,UAAU,EAAE,IAAI;QAE7B,OAAO,aAAa,CAAC,YAAY,CAAC,IAAI,aAAa,CAAC,IAAI;cAClD,gBAAgB,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE;cACvC,YAAY;KACrB,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IAEpC,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,EACN,EAAA,KAAK,EAAE,KAAK,EACR,GAAA,SAAS,EACT,IAAC;AACD,cAAE;AACI,gBAAA,gBAAgB,EAAE;AACd,oBAAA,GAAG,cAAc;oBACjB,eAAe;AACf,oBAAA,eAAe,EAAE,KAAK;AACtB,oBAAA,YAAY,EAAE,IAAI;AACrB,iBAAA;AACJ;AACH,cAAE;AACI,gBAAA,UAAU,EAAE,cAAc;gBAC1B,gBAAgB,EAAE,EAAE,KAAK,EAAE;aAC9B,CAAC,EACR,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,KAAK,EACvB,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,MAAM,IAAI,KAAK,EACvB,WAAW,EAAE;YACT,KAAK;AACL,YAAA,QAAQ,EAAE,gBAAgB;AAC1B,YAAA,cAAc,EAAE;AACZ,gBAAA,UAAU,EAAE,IAAI;gBAChB,WAAW;AACX,gBAAA,GAAG,UAAU;gBACb,GAAG,WAAW,EAAE,cAAc;gBAC9B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,CAAC;gBAClD,KAAK;gBACL,GAAG,EAAE,SAAS,CAAC,CAAC,cAAc,EAAE,UAAU,EAAE,GAA4B,CAAC,CAAC;AAC1E,gBAAA,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,OAAO,GAAG,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC;AAC3E,aAAA;SACJ,EACD,GAAG,EAAE,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,EAChC,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE;AACd,YAAA,MAAM,GACF,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAC,sCAAQ,EAClB,SAAS,EAAC,8DAAY,EACtB,UAAU,EAAE,UAAU,GACxB,CACL;YACD,GAAI,SAAS,CAAC,gBAA8B;AAC/C,SAAA,EACD,UAAU,EAAE;AACR,YAAA,KAAK,EAAE,UAAU;YACjB,KAAK;YACL,OAAO,EAAE,KAAK,GAAG,UAAU,EAAE,OAAO,GAAG,SAAS;YAChD,OAAO;YACP,GAAI,SAAS,CAAC,UAAwB;AACzC,SAAA,EAAA,CACH;AAEV,CAAC;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare const InputAutocompleteModalMobile: React.ForwardRefExoticComponent<import("../types").InputAutocompleteCommonProps & {
|
|
3
|
-
isBottomSheet?: boolean
|
|
4
|
-
transitionProps?:
|
|
5
|
-
onApply?: (
|
|
6
|
-
onCancel?: (
|
|
7
|
-
title?: string
|
|
8
|
-
virtualKeyboard?: boolean
|
|
3
|
+
isBottomSheet?: boolean;
|
|
4
|
+
transitionProps?: NonNullable<import("@alfalab/core-components-select/typings").BottomSheetSelectMobileProps["bottomSheetProps"]>["transitionProps"];
|
|
5
|
+
onApply?: () => void;
|
|
6
|
+
onCancel?: () => void;
|
|
7
|
+
title?: string;
|
|
8
|
+
virtualKeyboard?: boolean;
|
|
9
9
|
} & React.RefAttributes<HTMLDivElement>>;
|
package/moderncssm/types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ComponentType, type RefAttributes } from 'react';
|
|
2
2
|
import { type InputProps } from '@alfalab/core-components-input/moderncssm';
|
|
3
3
|
import { type BaseSelectProps, type BottomSheetSelectMobileProps } from '@alfalab/core-components-select/moderncssm/shared';
|
|
4
|
-
|
|
4
|
+
type OnInputTypeReason = 'close' | 'change';
|
|
5
5
|
export interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'autocomplete' | 'nativeSelect' | 'showSearch' | 'valueRenderer'> {
|
|
6
6
|
/**
|
|
7
7
|
* Компонент ввода значения
|
|
@@ -28,7 +28,7 @@ export interface InputAutocompleteCommonProps extends Omit<BaseSelectProps, 'aut
|
|
|
28
28
|
*/
|
|
29
29
|
onInput?: (value: string, reason?: OnInputTypeReason) => void;
|
|
30
30
|
}
|
|
31
|
-
|
|
31
|
+
type MobileProps = {
|
|
32
32
|
/**
|
|
33
33
|
* Открывать в bottom-sheet
|
|
34
34
|
*/
|
|
@@ -56,7 +56,7 @@ declare type MobileProps = {
|
|
|
56
56
|
*/
|
|
57
57
|
virtualKeyboard?: boolean;
|
|
58
58
|
};
|
|
59
|
-
export
|
|
59
|
+
export type InputAutocompleteMobileProps = InputAutocompleteCommonProps & MobileProps;
|
|
60
60
|
export interface InputAutocompleteProps extends InputAutocompleteCommonProps {
|
|
61
61
|
/**
|
|
62
62
|
* Пропсы для мобильного компонента
|