@hh.ru/magritte-ui-chips-input 2.3.3 → 3.1.0
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/ChipsInput.d.ts +1 -1
- package/ChipsInput.js +92 -45
- package/ChipsInput.js.map +1 -1
- package/UncontrolledChipsInput.d.ts +1 -1
- package/UncontrolledChipsInput.js.map +1 -1
- package/package.json +5 -5
- package/types.d.ts +5 -5
package/ChipsInput.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ForwardedRef, ReactElement } from 'react';
|
|
2
2
|
import { ChipsInputProps } from '@hh.ru/magritte-ui-chips-input/types';
|
|
3
|
-
declare const ChipsInput: (<
|
|
3
|
+
declare const ChipsInput: (<DataType>(props: ChipsInputProps<DataType> & {
|
|
4
4
|
ref?: ForwardedRef<HTMLInputElement>;
|
|
5
5
|
}) => ReactElement | null) & {
|
|
6
6
|
displayName: string;
|
package/ChipsInput.js
CHANGED
|
@@ -6,31 +6,39 @@ import { Input } from '@hh.ru/magritte-ui-input';
|
|
|
6
6
|
import { Select } from '@hh.ru/magritte-ui-select';
|
|
7
7
|
import { Suggest } from '@hh.ru/magritte-ui-suggest';
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const getChipsFromSelectValues = (newValues, options) => {
|
|
10
|
+
return newValues.map((value) => {
|
|
11
|
+
const item = options.find((option) => option.value === value);
|
|
12
|
+
if (item) {
|
|
13
|
+
return { value: item.value, label: item.label };
|
|
14
|
+
}
|
|
15
|
+
return { value };
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
const getUniqueChips = (selectState, options, chipsFromState) => {
|
|
19
|
+
// надо взять предыдущие чипсы и убрать дубли
|
|
20
|
+
const valuesFromOptions = options.map(({ value }) => value);
|
|
21
|
+
const chipsFromUserInput = chipsFromState.filter(({ value }) => !valuesFromOptions.includes(value));
|
|
22
|
+
// добавить значения селекта (преобразовать в чипсы их сперва)
|
|
23
|
+
const chipsFromSelect = selectState.length > 0 ? getChipsFromSelectValues(selectState, options) : [];
|
|
24
|
+
return [...chipsFromSelect, ...chipsFromUserInput];
|
|
12
25
|
};
|
|
13
|
-
const getInitialSelectValue = (type, chips
|
|
26
|
+
const getInitialSelectValue = (type, chips) => {
|
|
14
27
|
if (type === 'suggest') {
|
|
15
28
|
return '';
|
|
16
29
|
}
|
|
17
|
-
|
|
18
|
-
if (multiple) {
|
|
19
|
-
return chips.map((chip) => chip.value);
|
|
20
|
-
}
|
|
21
|
-
// иначе нужно найти хотя бы один option, который подходит
|
|
22
|
-
const valuesFromOptions = options.map(({ value }) => value);
|
|
23
|
-
const suitableItem = chips.find((chip) => valuesFromOptions.includes(chip.value));
|
|
24
|
-
return suitableItem?.value || '';
|
|
30
|
+
return chips.map((chip) => chip.value);
|
|
25
31
|
};
|
|
26
|
-
const ChipsInputComponent = ({ type, state, onChange: onChangeExternal, triggerProps, suggestProps, selectProps
|
|
32
|
+
const ChipsInputComponent = ({ type, state, onChange: onChangeExternal, triggerProps, suggestProps, selectProps }, ref) => {
|
|
27
33
|
const chipsTriggerRef = useRef(null);
|
|
28
34
|
const chipsTriggerRefCallback = useMultipleRefs(ref, chipsTriggerRef);
|
|
29
35
|
const { allowArbitraryValues } = triggerProps;
|
|
30
36
|
const [selectState, setSelectState] = useState(() => {
|
|
31
|
-
const initialState = getInitialSelectValue(type, state.chips
|
|
37
|
+
const initialState = getInitialSelectValue(type, state.chips);
|
|
32
38
|
return initialState;
|
|
33
39
|
});
|
|
40
|
+
const selectStateRef = useRef(selectState);
|
|
41
|
+
const optionsCountRef = useRef(selectProps?.options.length || 0);
|
|
34
42
|
if (type === 'suggest') {
|
|
35
43
|
return (jsx(Suggest, { ...suggestProps, onChange: (value, isValueFromList) => {
|
|
36
44
|
if (!isValueFromList) {
|
|
@@ -54,51 +62,90 @@ const ChipsInputComponent = ({ type, state, onChange: onChangeExternal, triggerP
|
|
|
54
62
|
onChangeExternal({ value: '', chips: [...state.chips, { value }] });
|
|
55
63
|
onCloseBottomSheet();
|
|
56
64
|
}
|
|
57
|
-
}, renderTrigger: ({ props }) => {
|
|
65
|
+
}, renderTrigger: ({ props, optionsCount }) => {
|
|
58
66
|
const { onChange, wrapperRef, onFocus, onKeyDown } = props;
|
|
59
|
-
return (jsx(ChipsTrigger, { ...triggerProps,
|
|
67
|
+
return (jsx(ChipsTrigger, { ...triggerProps,
|
|
68
|
+
// разрешаем добавлять результаты только если в suggest ничего не нашли
|
|
69
|
+
allowArbitraryValues: optionsCount === 0 && allowArbitraryValues, state: state, ref: chipsTriggerRefCallback, wrapperRef: wrapperRef, onKeyDown: onKeyDown, onFocus: onFocus, "data-qa": "chips-input-suggest-trigger", onChange: (newState) => {
|
|
60
70
|
onChangeExternal(newState);
|
|
61
71
|
onChange?.(newState.value);
|
|
62
72
|
} }));
|
|
63
73
|
} }));
|
|
64
74
|
}
|
|
65
|
-
const {
|
|
66
|
-
|
|
67
|
-
|
|
75
|
+
const { options, applyChangesButton, clearButton } = selectProps;
|
|
76
|
+
const haveApplyChangesButton = Boolean(applyChangesButton);
|
|
77
|
+
const haveClearButton = Boolean(clearButton);
|
|
78
|
+
return (jsx(Select, { ...selectProps, searchable: true, multiple: true, value: selectState, onSelectOption: (values) => {
|
|
79
|
+
selectStateRef.current = values;
|
|
80
|
+
}, onChange: (newValues) => {
|
|
81
|
+
setSelectState(newValues);
|
|
82
|
+
if (haveApplyChangesButton || (haveClearButton && newValues.length === 0)) {
|
|
83
|
+
// обработаем эти кейсы в onApply/onClear
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
const uniqueChips = getUniqueChips(newValues, options, state.chips);
|
|
68
87
|
onChangeExternal({
|
|
69
88
|
value: '',
|
|
70
|
-
|
|
71
|
-
chips: valuesArr.map((value) => {
|
|
72
|
-
const item = options.find((option) => option.value === value);
|
|
73
|
-
if (item) {
|
|
74
|
-
return { value: item.value, label: item.label };
|
|
75
|
-
}
|
|
76
|
-
return { value };
|
|
77
|
-
}),
|
|
89
|
+
chips: uniqueChips,
|
|
78
90
|
});
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
91
|
+
}, onApply: ({ isMobile, searchValue }) => {
|
|
92
|
+
const uniqueChips = getUniqueChips(selectStateRef.current, options, state.chips);
|
|
93
|
+
// добавляем пользовательский ввод, если нужно
|
|
94
|
+
// в случае bs - из navbar, в случае drop - из chis-trigger
|
|
95
|
+
const userValue = isMobile ? searchValue : state.value;
|
|
96
|
+
if (allowArbitraryValues && userValue.length > 0 && optionsCountRef.current === 0) {
|
|
97
|
+
uniqueChips.push({ value: userValue });
|
|
83
98
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
99
|
+
onChangeExternal({
|
|
100
|
+
value: '',
|
|
101
|
+
chips: uniqueChips,
|
|
102
|
+
});
|
|
103
|
+
// актуализируем состояние селекта
|
|
104
|
+
setSelectState(selectStateRef.current);
|
|
105
|
+
}, onClear: () => {
|
|
106
|
+
onChangeExternal({
|
|
107
|
+
value: '',
|
|
108
|
+
chips: [],
|
|
109
|
+
});
|
|
110
|
+
setSelectState([]);
|
|
111
|
+
}, onSearchSubmit: (event, _, optionsCount, onCloseBottomSheetWithUpdateValues) => {
|
|
112
|
+
const uniqueChips = getUniqueChips(selectStateRef.current, options, state.chips);
|
|
113
|
+
// добавляем пользовательский ввод из bs, если нужно
|
|
114
|
+
const userValue = event.target.value;
|
|
115
|
+
if (allowArbitraryValues && userValue.length > 0 && optionsCount === 0) {
|
|
116
|
+
uniqueChips.push({ value: userValue });
|
|
88
117
|
}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
118
|
+
onChangeExternal({
|
|
119
|
+
value: '',
|
|
120
|
+
chips: uniqueChips,
|
|
121
|
+
});
|
|
122
|
+
setSelectState(selectStateRef.current);
|
|
123
|
+
onCloseBottomSheetWithUpdateValues();
|
|
124
|
+
}, onBottomSheetOpen: () => chipsTriggerRef.current?.blur(), triggerProps: { size: 'large' }, renderTrigger: ({ ref, setSearchValue, onKeyDown, onBlur, onFocus, optionsCount }) => {
|
|
125
|
+
optionsCountRef.current = optionsCount;
|
|
126
|
+
return (jsx(ChipsTrigger, { ...triggerProps, allowArbitraryValues: optionsCount === 0 && allowArbitraryValues, state: state, ref: chipsTriggerRefCallback, wrapperRef: ref, onKeyDown: onKeyDown, onBlur: onBlur, onFocus: onFocus, "data-qa": "chips-input-select-trigger", onChange: (newState) => {
|
|
127
|
+
const { event } = newState;
|
|
92
128
|
setSearchValue(newState.value);
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
129
|
+
// если нажали `enter` в инпуте на desktop
|
|
130
|
+
if (event?.type === 'add' && event.modifier === 'enter') {
|
|
131
|
+
const uniqueChips = getUniqueChips(selectStateRef.current, options, newState.chips);
|
|
132
|
+
onChangeExternal({
|
|
133
|
+
value: '',
|
|
134
|
+
chips: uniqueChips,
|
|
135
|
+
});
|
|
136
|
+
setSelectState(selectStateRef.current);
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
onChangeExternal(newState);
|
|
140
|
+
// если обновился только input, то ререндрить select не нужно
|
|
141
|
+
if (event?.type === 'change' && event.modifier === 'keyboard') {
|
|
98
142
|
return;
|
|
99
143
|
}
|
|
100
|
-
//
|
|
101
|
-
|
|
144
|
+
// осталось обработать только remove
|
|
145
|
+
const deletedChip = event?.element?.value;
|
|
146
|
+
const newSelectState = selectStateRef.current.filter((item) => item !== deletedChip);
|
|
147
|
+
setSelectState(newSelectState);
|
|
148
|
+
selectStateRef.current = newSelectState;
|
|
102
149
|
} }));
|
|
103
150
|
} }));
|
|
104
151
|
};
|
package/ChipsInput.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipsInput.js","sources":["../src/ChipsInput.tsx"],"sourcesContent":["import { forwardRef, useRef, ForwardedRef, ReactElement, useState } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { ChipsInputProps } from '@hh.ru/magritte-ui-chips-input/types';\nimport { ChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger';\nimport { Input } from '@hh.ru/magritte-ui-input';\nimport { Select, SelectProps } from '@hh.ru/magritte-ui-select';\nimport { Suggest } from '@hh.ru/magritte-ui-suggest';\n\ntype ValueType<MultipleType> = [MultipleType] extends [true] ? string[] : string;\n\n// сhips trigger работает только массивом\nconst getSelectValuesAsArray = (values: string[] | string): string[] => {\n return Array.isArray(values) ? values : [values].filter(Boolean);\n};\n\nconst getInitialSelectValue = <MultipleType extends boolean, DataType>(\n type: ChipsInputProps<MultipleType, DataType>['type'],\n chips: ChipsInputProps<MultipleType, DataType>['state']['chips'],\n options: SelectProps<MultipleType, DataType>['options'],\n multiple: boolean\n) => {\n if (type === 'suggest') {\n return '';\n }\n // в случае multiple можно просто собрать value\n if (multiple) {\n return chips.map((chip) => chip.value);\n }\n // иначе нужно найти хотя бы один option, который подходит\n const valuesFromOptions = options.map(({ value }) => value);\n const suitableItem = chips.find((chip) => valuesFromOptions.includes(chip.value));\n return suitableItem?.value || '';\n};\n\nconst ChipsInputComponent = <MultipleType extends boolean, DataType>(\n {\n type,\n state,\n onChange: onChangeExternal,\n triggerProps,\n suggestProps,\n selectProps,\n }: ChipsInputProps<MultipleType, DataType>,\n ref: ForwardedRef<HTMLInputElement>\n) => {\n const chipsTriggerRef = useRef<HTMLInputElement>(null);\n const chipsTriggerRefCallback = useMultipleRefs(ref, chipsTriggerRef);\n const { allowArbitraryValues } = triggerProps;\n const [selectState, setSelectState] = useState(() => {\n const initialState = getInitialSelectValue(\n type,\n state.chips,\n selectProps?.options || [],\n selectProps?.multiple || false\n );\n return initialState as ValueType<MultipleType>;\n });\n\n if (type === 'suggest') {\n return (\n <Suggest\n {...suggestProps}\n onChange={(value, isValueFromList) => {\n if (!isValueFromList) {\n return;\n }\n if (!state.chips.some((chip) => chip.value === value)) {\n onChangeExternal({ value: '', chips: [...state.chips, { value }] });\n }\n }}\n onBottomSheetOpen={() => chipsTriggerRef.current?.blur()}\n input={{\n component: Input,\n props: {\n value: state.value,\n 'data-qa': 'chips-input-suggest-search',\n },\n }}\n onSearchSubmit={(event, onCloseBottomSheet, optionsCount) => {\n if (!allowArbitraryValues || optionsCount > 0) {\n return;\n }\n const value = (event.target as HTMLInputElement).value;\n if (value) {\n onChangeExternal({ value: '', chips: [...state.chips, { value }] });\n onCloseBottomSheet();\n }\n }}\n renderTrigger={({ props }) => {\n const { onChange, wrapperRef, onFocus, onKeyDown } = props;\n return (\n <ChipsTrigger\n {...triggerProps}\n state={state}\n ref={chipsTriggerRefCallback}\n wrapperRef={wrapperRef}\n onKeyDown={onKeyDown}\n onFocus={onFocus}\n data-qa=\"chips-input-suggest-trigger\"\n onChange={(newState) => {\n onChangeExternal(newState);\n onChange?.(newState.value);\n }}\n />\n );\n }}\n />\n );\n }\n\n const { multiple, options } = selectProps;\n return (\n <Select\n {...selectProps}\n searchable\n multiple={multiple}\n value={selectState}\n onChange={(newValues) => {\n const valuesArr = getSelectValuesAsArray(newValues);\n onChangeExternal({\n value: '',\n // из новый значений селекта собираем чипсы\n chips: valuesArr.map((value) => {\n const item = options.find((option) => option.value === value);\n if (item) {\n return { value: item.value, label: item.label as string };\n }\n return { value };\n }),\n });\n setSelectState(newValues);\n }}\n onSearchSubmit={(event, onCloseBottomSheet, optionsCount) => {\n if (!allowArbitraryValues || optionsCount > 0) {\n return;\n }\n const value = (event.target as HTMLInputElement).value;\n if (value) {\n onChangeExternal({ value: '', chips: [...state.chips, { value }] });\n onCloseBottomSheet();\n }\n }}\n onBottomSheetOpen={() => chipsTriggerRef.current?.blur()}\n triggerProps={{ size: 'large' }}\n renderTrigger={({ ref, setSearchValue, onKeyDown, onBlur, onFocus }) => {\n return (\n <ChipsTrigger\n {...triggerProps}\n allowArbitraryValues={allowArbitraryValues}\n state={state}\n ref={chipsTriggerRefCallback}\n wrapperRef={ref}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n onFocus={onFocus}\n data-qa=\"chips-input-select-trigger\"\n onChange={(newState) => {\n onChangeExternal(newState);\n setSearchValue(newState.value);\n if (!multiple) {\n const { event } = newState;\n if (event?.type === 'remove') {\n setSelectState('' as ValueType<MultipleType>);\n }\n return;\n }\n // на основе чипсов собираем новый стейт селекта\n setSelectState(newState.chips.map(({ value }) => value) as ValueType<MultipleType>);\n }}\n />\n );\n }}\n />\n );\n};\n\nconst ChipsInput = forwardRef(ChipsInputComponent) as (<MultipleType extends boolean, DataType>(\n props: ChipsInputProps<MultipleType, DataType> & { ref?: ForwardedRef<HTMLInputElement> }\n) => ReactElement | null) & { displayName: string };\n\nChipsInput.displayName = 'ChipsInput';\n\nexport { ChipsInput };\n"],"names":["_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChipsInput.js","sources":["../src/ChipsInput.tsx"],"sourcesContent":["import { forwardRef, useRef, ForwardedRef, ReactElement, useState } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { ChipsInputProps } from '@hh.ru/magritte-ui-chips-input/types';\nimport { ChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger';\nimport { Input } from '@hh.ru/magritte-ui-input';\nimport { Select, SelectOption } from '@hh.ru/magritte-ui-select';\nimport { Suggest } from '@hh.ru/magritte-ui-suggest';\n\ntype ValueType<MultipleType> = [MultipleType] extends [true] ? string[] : string;\ntype ChipsList<DataType> = ChipsInputProps<DataType>['state']['chips'];\n\nconst getChipsFromSelectValues = <DataType,>(\n newValues: string[],\n options: SelectOption<DataType>[]\n): ChipsList<DataType> => {\n return newValues.map((value) => {\n const item = options.find((option) => option.value === value);\n if (item) {\n return { value: item.value, label: item.label as string };\n }\n return { value };\n });\n};\n\nconst getUniqueChips = <DataType,>(\n selectState: string[],\n options: SelectOption<DataType>[],\n chipsFromState: ChipsList<DataType>\n): ChipsList<DataType> => {\n // надо взять предыдущие чипсы и убрать дубли\n const valuesFromOptions = options.map(({ value }) => value);\n const chipsFromUserInput = chipsFromState.filter(({ value }) => !valuesFromOptions.includes(value));\n // добавить значения селекта (преобразовать в чипсы их сперва)\n const chipsFromSelect = selectState.length > 0 ? getChipsFromSelectValues(selectState, options) : [];\n return [...chipsFromSelect, ...chipsFromUserInput];\n};\n\nconst getInitialSelectValue = <DataType,>(\n type: ChipsInputProps<DataType>['type'],\n chips: ChipsInputProps<DataType>['state']['chips']\n) => {\n if (type === 'suggest') {\n return '';\n }\n return chips.map((chip) => chip.value);\n};\n\nconst ChipsInputComponent = <DataType,>(\n { type, state, onChange: onChangeExternal, triggerProps, suggestProps, selectProps }: ChipsInputProps<DataType>,\n ref: ForwardedRef<HTMLInputElement>\n) => {\n const chipsTriggerRef = useRef<HTMLInputElement>(null);\n const chipsTriggerRefCallback = useMultipleRefs(ref, chipsTriggerRef);\n const { allowArbitraryValues } = triggerProps;\n const [selectState, setSelectState] = useState(() => {\n const initialState = getInitialSelectValue(type, state.chips);\n return initialState as ValueType<true>;\n });\n const selectStateRef = useRef<string[]>(selectState);\n const optionsCountRef = useRef<number>(selectProps?.options.length || 0);\n\n if (type === 'suggest') {\n return (\n <Suggest\n {...suggestProps}\n onChange={(value, isValueFromList) => {\n if (!isValueFromList) {\n return;\n }\n if (!state.chips.some((chip) => chip.value === value)) {\n onChangeExternal({ value: '', chips: [...state.chips, { value }] });\n }\n }}\n onBottomSheetOpen={() => chipsTriggerRef.current?.blur()}\n input={{\n component: Input,\n props: {\n value: state.value,\n 'data-qa': 'chips-input-suggest-search',\n },\n }}\n onSearchSubmit={(event, onCloseBottomSheet, optionsCount) => {\n if (!allowArbitraryValues || optionsCount > 0) {\n return;\n }\n const value = (event.target as HTMLInputElement).value;\n if (value) {\n onChangeExternal({ value: '', chips: [...state.chips, { value }] });\n onCloseBottomSheet();\n }\n }}\n renderTrigger={({ props, optionsCount }) => {\n const { onChange, wrapperRef, onFocus, onKeyDown } = props;\n return (\n <ChipsTrigger\n {...triggerProps}\n // разрешаем добавлять результаты только если в suggest ничего не нашли\n allowArbitraryValues={optionsCount === 0 && allowArbitraryValues}\n state={state}\n ref={chipsTriggerRefCallback}\n wrapperRef={wrapperRef}\n onKeyDown={onKeyDown}\n onFocus={onFocus}\n data-qa=\"chips-input-suggest-trigger\"\n onChange={(newState) => {\n onChangeExternal(newState);\n onChange?.(newState.value);\n }}\n />\n );\n }}\n />\n );\n }\n\n const { options, applyChangesButton, clearButton } = selectProps;\n const haveApplyChangesButton = Boolean(applyChangesButton);\n const haveClearButton = Boolean(clearButton);\n return (\n <Select\n {...selectProps}\n searchable\n multiple\n value={selectState}\n onSelectOption={(values) => {\n selectStateRef.current = values;\n }}\n onChange={(newValues) => {\n setSelectState(newValues);\n if (haveApplyChangesButton || (haveClearButton && newValues.length === 0)) {\n // обработаем эти кейсы в onApply/onClear\n return;\n }\n const uniqueChips = getUniqueChips(newValues, options, state.chips);\n onChangeExternal({\n value: '',\n chips: uniqueChips,\n });\n }}\n onApply={({ isMobile, searchValue }) => {\n const uniqueChips = getUniqueChips(selectStateRef.current, options, state.chips);\n // добавляем пользовательский ввод, если нужно\n // в случае bs - из navbar, в случае drop - из chis-trigger\n const userValue = isMobile ? searchValue : state.value;\n if (allowArbitraryValues && userValue.length > 0 && optionsCountRef.current === 0) {\n uniqueChips.push({ value: userValue });\n }\n onChangeExternal({\n value: '',\n chips: uniqueChips,\n });\n // актуализируем состояние селекта\n setSelectState(selectStateRef.current);\n }}\n onClear={() => {\n onChangeExternal({\n value: '',\n chips: [],\n });\n setSelectState([]);\n }}\n onSearchSubmit={(event, _, optionsCount, onCloseBottomSheetWithUpdateValues) => {\n const uniqueChips = getUniqueChips(selectStateRef.current, options, state.chips);\n // добавляем пользовательский ввод из bs, если нужно\n const userValue = (event.target as HTMLInputElement).value;\n if (allowArbitraryValues && userValue.length > 0 && optionsCount === 0) {\n uniqueChips.push({ value: userValue });\n }\n onChangeExternal({\n value: '',\n chips: uniqueChips,\n });\n setSelectState(selectStateRef.current);\n onCloseBottomSheetWithUpdateValues();\n }}\n onBottomSheetOpen={() => chipsTriggerRef.current?.blur()}\n triggerProps={{ size: 'large' }}\n renderTrigger={({ ref, setSearchValue, onKeyDown, onBlur, onFocus, optionsCount }) => {\n optionsCountRef.current = optionsCount;\n return (\n <ChipsTrigger\n {...triggerProps}\n allowArbitraryValues={optionsCount === 0 && allowArbitraryValues}\n state={state}\n ref={chipsTriggerRefCallback}\n wrapperRef={ref}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n onFocus={onFocus}\n data-qa=\"chips-input-select-trigger\"\n onChange={(newState) => {\n const { event } = newState;\n setSearchValue(newState.value);\n\n // если нажали `enter` в инпуте на desktop\n if (event?.type === 'add' && event.modifier === 'enter') {\n const uniqueChips = getUniqueChips(selectStateRef.current, options, newState.chips);\n onChangeExternal({\n value: '',\n chips: uniqueChips,\n });\n setSelectState(selectStateRef.current);\n return;\n }\n\n onChangeExternal(newState);\n // если обновился только input, то ререндрить select не нужно\n if (event?.type === 'change' && event.modifier === 'keyboard') {\n return;\n }\n\n // осталось обработать только remove\n const deletedChip = event?.element?.value as string;\n const newSelectState = selectStateRef.current.filter((item) => item !== deletedChip);\n setSelectState(newSelectState);\n selectStateRef.current = newSelectState;\n }}\n />\n );\n }}\n />\n );\n};\n\nconst ChipsInput = forwardRef(ChipsInputComponent) as (<DataType>(\n props: ChipsInputProps<DataType> & { ref?: ForwardedRef<HTMLInputElement> }\n) => ReactElement | null) & { displayName: string };\n\nChipsInput.displayName = 'ChipsInput';\n\nexport { ChipsInput };\n"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ForwardedRef, ReactElement } from 'react';
|
|
2
2
|
import { UncontrolledChipsInputProps } from '@hh.ru/magritte-ui-chips-input/types';
|
|
3
|
-
declare const UncontrolledChipsInput: (<
|
|
3
|
+
declare const UncontrolledChipsInput: (<DataType>(props: UncontrolledChipsInputProps<DataType> & {
|
|
4
4
|
ref?: ForwardedRef<HTMLInputElement>;
|
|
5
5
|
}) => ReactElement | null) & {
|
|
6
6
|
displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UncontrolledChipsInput.js","sources":["../src/UncontrolledChipsInput.tsx"],"sourcesContent":["import { forwardRef, useState, ForwardedRef, ReactElement } from 'react';\n\nimport { ChipsInput } from '@hh.ru/magritte-ui-chips-input/ChipsInput';\nimport { UncontrolledChipsInputProps } from '@hh.ru/magritte-ui-chips-input/types';\nimport { ChipsTriggerState } from '@hh.ru/magritte-ui-chips-trigger/types';\n\nconst DEFAULT_STATE = {\n value: '',\n chips: [],\n};\n\nconst UncontrolledChipsInputComponent = <
|
|
1
|
+
{"version":3,"file":"UncontrolledChipsInput.js","sources":["../src/UncontrolledChipsInput.tsx"],"sourcesContent":["import { forwardRef, useState, ForwardedRef, ReactElement } from 'react';\n\nimport { ChipsInput } from '@hh.ru/magritte-ui-chips-input/ChipsInput';\nimport { UncontrolledChipsInputProps } from '@hh.ru/magritte-ui-chips-input/types';\nimport { ChipsTriggerState } from '@hh.ru/magritte-ui-chips-trigger/types';\n\nconst DEFAULT_STATE = {\n value: '',\n chips: [],\n};\n\nconst UncontrolledChipsInputComponent = <DataType,>(\n { state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }: UncontrolledChipsInputProps<DataType>,\n ref: ForwardedRef<HTMLInputElement>\n) => {\n const [state, setState] = useState<ChipsTriggerState>({ ...defaultState });\n return (\n <>\n <ChipsInput\n {...restProps}\n state={state}\n onChange={(newState) => {\n setState(newState);\n onChange?.(newState);\n }}\n ref={ref}\n />\n {state.chips.map((chip) => (\n <input type=\"hidden\" name={name} value={chip.value} key={chip.value} />\n ))}\n </>\n );\n};\n\nconst UncontrolledChipsInput = forwardRef(UncontrolledChipsInputComponent) as (<DataType>(\n props: UncontrolledChipsInputProps<DataType> & { ref?: ForwardedRef<HTMLInputElement> }\n) => ReactElement | null) & { displayName: string };\n\nUncontrolledChipsInput.displayName = 'UncontrolledChipsInput';\n\nexport { UncontrolledChipsInput };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;AAMA,MAAM,aAAa,GAAG;AAClB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,KAAK,EAAE,EAAE;CACZ,CAAC;AAEF,MAAM,+BAA+B,GAAG,CACpC,EAAE,KAAK,EAAE,YAAY,GAAG,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,EAAyC,EAC5G,GAAmC,KACnC;AACA,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAoB,EAAE,GAAG,YAAY,EAAE,CAAC,CAAC;AAC3E,IAAA,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,UAAU,EAAA,EAAA,GACH,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,QAAQ,KAAI;oBACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACnB,oBAAA,QAAQ,GAAG,QAAQ,CAAC,CAAC;AACzB,iBAAC,EACD,GAAG,EAAE,GAAG,EACV,CAAA,EACD,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MAClBA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAO,EAAA,IAAI,CAAC,KAAK,CAAI,CAC1E,CAAC,CAAA,EAAA,CACH,EACL;AACN,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,UAAU,CAAC,+BAA+B,EAErB;AAEpD,sBAAsB,CAAC,WAAW,GAAG,wBAAwB;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-chips-input",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@hh.ru/magritte-common-use-multiple-refs": "1.1.4",
|
|
30
|
-
"@hh.ru/magritte-ui-chips-trigger": "3.0
|
|
30
|
+
"@hh.ru/magritte-ui-chips-trigger": "3.2.0",
|
|
31
31
|
"@hh.ru/magritte-ui-input": "7.0.2",
|
|
32
|
-
"@hh.ru/magritte-ui-select": "8.
|
|
33
|
-
"@hh.ru/magritte-ui-suggest": "6.
|
|
32
|
+
"@hh.ru/magritte-ui-select": "8.6.0",
|
|
33
|
+
"@hh.ru/magritte-ui-suggest": "6.4.0"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "cab9a585e813e940e1ffd06999a9aaf80df7b3a8"
|
|
36
36
|
}
|
package/types.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { SelectProps } from '@hh.ru/magritte-ui-select/types';
|
|
|
3
3
|
import { SuggestProps } from '@hh.ru/magritte-ui-suggest';
|
|
4
4
|
type TriggerPropsHelper = Omit<ChipsTriggerProps, 'expanded' | 'toggleExpanded' | 'wrapperRef' | 'ref' | 'state' | 'onChange' | 'onKeyDown' | 'onFocus' | 'data-qa'>;
|
|
5
5
|
type SuggestPropsHelper<DataType> = Omit<SuggestProps<DataType>, 'inputValue' | 'onChange' | 'renderTrigger' | 'onSearchSubmit' | 'onBottomSheetOpen' | 'input'>;
|
|
6
|
-
type SelectPropsHelper<
|
|
6
|
+
type SelectPropsHelper<DataType> = Omit<SelectProps<true, DataType>, 'value' | 'onChange' | 'renderTrigger' | 'onSearchSubmit' | 'onBottomSheetOpen' | 'triggerProps' | 'searchable' | 'multiple'>;
|
|
7
7
|
export interface ChipsInputBaseProps {
|
|
8
8
|
/** Свойства chips-trigger */
|
|
9
9
|
triggerProps: TriggerPropsHelper;
|
|
@@ -16,11 +16,11 @@ export interface ChipsInputStateProps {
|
|
|
16
16
|
/** Событие изменения для состояния */
|
|
17
17
|
onChange: ChipsTriggerProps['onChange'];
|
|
18
18
|
}
|
|
19
|
-
interface ChipsInputSelectProps<
|
|
19
|
+
interface ChipsInputSelectProps<DataType> {
|
|
20
20
|
/** Тип для chips-input */
|
|
21
21
|
type: 'select';
|
|
22
22
|
/** Свойства select */
|
|
23
|
-
selectProps: SelectPropsHelper<
|
|
23
|
+
selectProps: SelectPropsHelper<DataType>;
|
|
24
24
|
suggestProps?: never;
|
|
25
25
|
}
|
|
26
26
|
interface ChipsInputSuggestProps<DataType> {
|
|
@@ -30,6 +30,6 @@ interface ChipsInputSuggestProps<DataType> {
|
|
|
30
30
|
suggestProps: SuggestPropsHelper<DataType>;
|
|
31
31
|
selectProps?: never;
|
|
32
32
|
}
|
|
33
|
-
export type ChipsInputProps<
|
|
34
|
-
export type UncontrolledChipsInputProps<
|
|
33
|
+
export type ChipsInputProps<DataType> = ChipsInputBaseProps & ChipsInputStateProps & (ChipsInputSelectProps<DataType> | ChipsInputSuggestProps<DataType>);
|
|
34
|
+
export type UncontrolledChipsInputProps<DataType> = ChipsInputBaseProps & Partial<ChipsInputStateProps> & (ChipsInputSelectProps<DataType> | ChipsInputSuggestProps<DataType>);
|
|
35
35
|
export {};
|