Weishen/Hydro
2
0 Fork 0
mirror of https://gitcode.com/gh_mirrors/hy/Hydro.git synced 2026-10-20 01:38:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui: add onpaste for multi select (#712)

Browse Source
This commit is contained in:
panda authored and GitHub committed 2024-01-06 13:31:25 +08:00
1 parent f54b2fd5b8
commit 91179ebe66
1 file changed
+18 -6
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-default/components/autocomplete/components/AutoComplete.tsx
+18 -6
View File
@@ -121,7 +121,7 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
queryCache[query] ||= await queryItems(query); queryCache[query] ||= await queryItems(query);
for (const item of queryCache[query]) valueCache[itemKey(item)] = item; for (const item of queryCache[query]) valueCache[itemKey(item)] = item;
setItemList(queryCache[query]); setItemList(queryCache[query]);
setCurrentItem((!freeSolo && queryCache[query].length > 0) ? 0 : null); setCurrentItem((!freeSolo && queryCache[query].length) ? 0 : null);
}; };
useEffect(() => { useEffect(() => {
@@ -129,7 +129,7 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
}, [JSON.stringify(props.selectedKeys)]); }, [JSON.stringify(props.selectedKeys)]);
const dispatchChange = () => { const dispatchChange = () => {
if (!multi) onChange(inputRef.current?.value); if (!multi) onChange(inputRef.current?.value);
else onChange(selectedKeys.filter((v) => v?.trim().length > 0).join(',')); else onChange(selectedKeys.filter((v) => v?.trim().length).join(','));
}; };
let first = !multi; let first = !multi;
@@ -200,8 +200,8 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
return; return;
} }
if (key === 'Backspace') { if (key === 'Backspace') {
if (target.value.length > 0) return; if (target.value.length) return;
if (selectedKeys.length > 0) { if (selectedKeys.length) {
setSelected((s) => s.slice(0, -1)); setSelected((s) => s.slice(0, -1));
setSelectedKeys((s) => s.slice(0, -1)); setSelectedKeys((s) => s.slice(0, -1));
} }
@@ -231,8 +231,8 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
getSelectedItems: () => selected, getSelectedItems: () => selected,
getSelectedItemKeys: () => [...selectedKeys, inputRef.current?.value].filter((v) => v?.trim().length > 0), getSelectedItemKeys: () => [...selectedKeys, inputRef.current?.value].filter((v) => v?.trim().length),
getSelectedItemsAsString: () => [...selectedKeys, inputRef.current?.value].filter((v) => v?.trim().length > 0).join(','), getSelectedItemsAsString: () => [...selectedKeys, inputRef.current?.value].filter((v) => v?.trim().length).join(','),
setSelectedItems: (items) => { setSelectedItems: (items) => {
setSelected(items); setSelected(items);
setSelectedKeys(items.map((i) => itemKey(i))); setSelectedKeys(items.map((i) => itemKey(i)));
@@ -301,6 +301,18 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
if (allowEmptyQuery) handleInputChange(); if (allowEmptyQuery) handleInputChange();
setFocused(true); setFocused(true);
}} }}
onPaste={async (e) => {
if (!multi) return;
const text = e.clipboardData.getData('text');
if (!text || (!text.includes(',') && !text.includes('，'))) return;
e.preventDefault();
const ids = text.replace(/，/g, ',').split(',').filter((v) => v?.trim().length && !selectedKeys.includes(v));
if (!ids.length) return;
const fetched = await props.fetchItems(ids.filter((v) => !valueCache[v]));
for (const item of fetched) valueCache[itemKey(item)] = item;
setSelected([...selected, ...ids.map((id) => valueCache[id])]);
setSelectedKeys([...selectedKeys, ...ids.map((id) => itemKey(valueCache[id]))]);
}}
placeholder={props.placeholder} placeholder={props.placeholder}
onBlur={() => setFocused(false)} onBlur={() => setFocused(false)}
onKeyDown={handleInputKeyDown} onKeyDown={handleInputKeyDown}