muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

timeout-based form sending

Browse source
This commit is contained in:
Fedor Katurov 2019-10-09 15:47:58 +07:00
parent 770a256ab8
commit 033b5ca45d
1 changed files with 13 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/node/Tags/index.tsx
View file

@ -35,7 +35,9 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props })
const onInput = useCallback( const onInput = useCallback(
({ target: { value } }: ChangeEvent<HTMLInputElement>) => { ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
setInput(value); setInput(value);
if (timer) clearTimeout(timer.current); if (timer) {
clearTimeout(timer.current);
}
}, },
[setInput, timer] [setInput, timer]
); );
@ -69,8 +71,10 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props })
const onSubmit = useCallback(() => { const onSubmit = useCallback(() => {
if (length(tags) === length(data) && isEmpty(symmetricDifference(tags, data))) return; if (length(tags) === length(data) && isEmpty(symmetricDifference(tags, data))) return;
if (timer.current) clearTimeout(timer.current);
onTagsChange(data.map(tag => tag.title)); onTagsChange(data.map(tag => tag.title));
}, [tags, data, onTagsChange]); }, [tags, data, onTagsChange, timer]);
const onBlur = useCallback(() => { const onBlur = useCallback(() => {
clearTimeout(timer.current); clearTimeout(timer.current);
@ -79,10 +83,14 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props })
useEffect(() => setData(tags), [tags]); useEffect(() => setData(tags), [tags]);
useEffect(() => { useEffect(() => {
timer.current = setTimeout(onSubmit, 3000); timer.current = setTimeout(() => {
onSubmit();
}, 3000);
return () => clearTimeout(timer.current); return () => {
}, [data]); clearTimeout(timer.current);
};
}, [data, tags]);
return ( return (
<TagField {...props}> <TagField {...props}>