@sima-land/ui-nucleons 43.1.0 → 43.1.1
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/index.d.ts
CHANGED
|
@@ -22,14 +22,6 @@ export interface AutocompleteProps extends Omit<TextFieldProps, 'ref' | 'value'
|
|
|
22
22
|
/**
|
|
23
23
|
* Поле ввода с подсказками.
|
|
24
24
|
* @param props Свойства.
|
|
25
|
-
* @param props.defaultValue Значение по умолчанию.
|
|
26
|
-
* @param props.items Элементы меню.
|
|
27
|
-
* @param props.itemSize Размер элемента меню.
|
|
28
|
-
* @param props.loading Нужно ли выводить состояние загрузки списка.
|
|
29
|
-
* @param props.onSelect Сработает при выборе.
|
|
30
|
-
* @param props.preset Пресет (со стрелкой или без).
|
|
31
|
-
* @param props.renderItem Выведет содержимое элемента.
|
|
32
|
-
* @param props.value Значение.
|
|
33
25
|
* @return Элемент.
|
|
34
26
|
*/
|
|
35
|
-
export declare const Autocomplete: ({ items, itemSize, onSelect, onChange,
|
|
27
|
+
export declare const Autocomplete: ({ items, itemSize, onSelect, onChange, onKeyDown, style, className, value, defaultValue, loading, renderItem, preset, "data-testid": dataTestId, ...restProps }: AutocompleteProps) => JSX.Element;
|
package/autocomplete/index.js
CHANGED
|
@@ -39,41 +39,28 @@ const dropdown_1 = require("../dropdown");
|
|
|
39
39
|
const dropdown_item_1 = require("../dropdown-item");
|
|
40
40
|
const text_field_1 = require("../text-field");
|
|
41
41
|
const dropdown_2 = require("../_internal/utils/dropdown");
|
|
42
|
-
const bind_1 = __importDefault(require("classnames/bind"));
|
|
43
42
|
const down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/down"));
|
|
44
|
-
const
|
|
45
|
-
const hooks_1 = require("../hooks");
|
|
43
|
+
const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/up"));
|
|
46
44
|
const dropdown_loading_1 = require("../_internal/dropdown-loading");
|
|
47
|
-
const
|
|
45
|
+
const bind_1 = __importDefault(require("classnames/bind"));
|
|
48
46
|
const autocomplete_module_scss_1 = __importDefault(require("./autocomplete.module.scss"));
|
|
49
47
|
const cx = bind_1.default.bind(autocomplete_module_scss_1.default);
|
|
50
48
|
/**
|
|
51
49
|
* Поле ввода с подсказками.
|
|
52
50
|
* @param props Свойства.
|
|
53
|
-
* @param props.defaultValue Значение по умолчанию.
|
|
54
|
-
* @param props.items Элементы меню.
|
|
55
|
-
* @param props.itemSize Размер элемента меню.
|
|
56
|
-
* @param props.loading Нужно ли выводить состояние загрузки списка.
|
|
57
|
-
* @param props.onSelect Сработает при выборе.
|
|
58
|
-
* @param props.preset Пресет (со стрелкой или без).
|
|
59
|
-
* @param props.renderItem Выведет содержимое элемента.
|
|
60
|
-
* @param props.value Значение.
|
|
61
51
|
* @return Элемент.
|
|
62
52
|
*/
|
|
63
53
|
const Autocomplete = (_a) => {
|
|
64
|
-
var { items, itemSize, onSelect, onChange,
|
|
54
|
+
var { items, itemSize, onSelect, onChange, onKeyDown, style, className, value, defaultValue, loading, renderItem = String, preset = 'default', 'data-testid': dataTestId } = _a, restProps = __rest(_a, ["items", "itemSize", "onSelect", "onChange", "onKeyDown", "style", "className", "value", "defaultValue", "loading", "renderItem", "preset", 'data-testid']);
|
|
65
55
|
const osComponentRef = (0, react_1.useRef)(null);
|
|
66
|
-
const
|
|
67
|
-
const
|
|
68
|
-
const menuRef = (0, react_1.useRef)();
|
|
56
|
+
const fieldRef = (0, react_1.useRef)(null);
|
|
57
|
+
const menuRef = (0, react_1.useRef)(null);
|
|
69
58
|
const [withMenu, toggleMenu] = (0, react_1.useState)(false);
|
|
70
59
|
const [realValue, setRealValue] = (0, react_1.useState)(value || defaultValue);
|
|
71
60
|
const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
|
|
72
|
-
const
|
|
73
|
-
const
|
|
74
|
-
|
|
75
|
-
toggleMenu(false);
|
|
76
|
-
});
|
|
61
|
+
const needMenu = preset === 'filled-only-list' ? withMenu && realValue && realValue.length > 0 : withMenu;
|
|
62
|
+
const arrowIcon = needMenu ? (react_1.default.createElement(up_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-up' })) : (react_1.default.createElement(down_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-down' }));
|
|
63
|
+
const endAdornment = preset === 'default' ? arrowIcon : undefined;
|
|
77
64
|
(0, react_1.useEffect)(() => {
|
|
78
65
|
setRealValue(value);
|
|
79
66
|
}, [value]);
|
|
@@ -93,40 +80,47 @@ const Autocomplete = (_a) => {
|
|
|
93
80
|
});
|
|
94
81
|
}
|
|
95
82
|
}, [activeIndex]);
|
|
96
|
-
return (react_1.default.createElement("div", {
|
|
97
|
-
react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { ref: fieldRef, focused: withMenu, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value:
|
|
83
|
+
return (react_1.default.createElement("div", { style: style, className: cx('root', className), "data-testid": dataTestId },
|
|
84
|
+
react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { ref: fieldRef, focused: withMenu, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: realValue, multiline: false, className: cx('field'), onFocus: () => {
|
|
98
85
|
toggleMenu(true);
|
|
99
|
-
|
|
100
|
-
},
|
|
86
|
+
setActiveIndex(null);
|
|
87
|
+
}, onBlur: () => {
|
|
88
|
+
toggleMenu(false);
|
|
89
|
+
}, onChange: (event) => {
|
|
101
90
|
toggleMenu(true);
|
|
102
|
-
setRealValue(
|
|
91
|
+
setRealValue(event.target.value);
|
|
103
92
|
setActiveIndex(0);
|
|
104
|
-
onChange
|
|
105
|
-
},
|
|
93
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
94
|
+
}, onKeyDown: (event) => {
|
|
106
95
|
const size = (items === null || items === void 0 ? void 0 : items.length) || 0;
|
|
107
96
|
let nextIndex;
|
|
108
|
-
switch (
|
|
97
|
+
switch (event.key) {
|
|
109
98
|
case 'ArrowDown':
|
|
110
|
-
nextIndex = (
|
|
99
|
+
nextIndex = (activeIndex !== null ? size + activeIndex + 1 : 0) % size;
|
|
111
100
|
break;
|
|
112
101
|
case 'ArrowUp':
|
|
113
102
|
nextIndex = (size + Number(activeIndex) - 1) % size;
|
|
114
103
|
break;
|
|
115
104
|
case 'Enter':
|
|
116
|
-
if (items &&
|
|
105
|
+
if (items && activeIndex !== null && items.length > activeIndex) {
|
|
117
106
|
onSelect && onSelect(items[activeIndex]);
|
|
118
107
|
toggleMenu(false);
|
|
119
108
|
}
|
|
120
109
|
break;
|
|
121
110
|
}
|
|
122
|
-
|
|
123
|
-
|
|
111
|
+
if (typeof nextIndex === 'number') {
|
|
112
|
+
event.preventDefault(); // не даём каретке в поле перемещаться
|
|
113
|
+
setActiveIndex(nextIndex);
|
|
114
|
+
}
|
|
115
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
124
116
|
} })),
|
|
125
|
-
|
|
126
|
-
|
|
117
|
+
needMenu && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'autocomplete:menu', className: cx('menu'), role: 'menu', customScrollbarProps: { osComponentRef } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'autocomplete:loading-area' })) : (react_1.default.createElement(react_1.default.Fragment, null, items && items.length > 0 ? (items.map((item, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: itemSize, key: index, role: 'menuitem', checked: index === activeIndex, onMouseDown: event => {
|
|
118
|
+
// чтобы при нажатии на опцию предотвратить blur на поле
|
|
119
|
+
event.preventDefault();
|
|
120
|
+
}, onClick: () => {
|
|
121
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
|
|
127
122
|
setActiveIndex(null);
|
|
128
123
|
toggleMenu(false);
|
|
129
|
-
fieldRef.current && fieldRef.current.focus();
|
|
130
124
|
} }, renderItem(item))))) : (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 'm', noHover: true }, "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E"))))))));
|
|
131
125
|
};
|
|
132
126
|
exports.Autocomplete = Autocomplete;
|