admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix/debounce company card onchange (#580)

Browse Source 
* Add internal state and debounce for editable text card

* Use debounce for date fields too

* Update refetch

* Nit
This commit is contained in:
Emilien Chauvet
2023-07-10 18:19:46 -07:00
committed by GitHub
parent 03c6d1f19d
commit 1c8aaff39d
5 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldDate.tsx
View File

@ -1,5 +1,8 @@
import { useMemo, useState } from 'react';
import { BoardCardEditableField } from '@/ui/board-card-field/components/BoardCardEditableField';
import { InplaceInputDateDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputDateDisplayMode';
import { debounce } from '@/utils/debounce';
import { BoardCardEditableFieldDateEditMode } from './BoardCardEditableFieldDateEditMode';
@ -14,11 +17,21 @@ export function BoardCardEditableFieldDate({
onChange,
editModeHorizontalAlign,
}: OwnProps) {
const [internalValue, setInternalValue] = useState(value);
const debouncedOnChange = useMemo(() => {
return debounce(onChange, 200);
}, [onChange]);
return (
<BoardCardEditableField
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<BoardCardEditableFieldDateEditMode value={value} onChange={onChange} />
<BoardCardEditableFieldDateEditMode
value={internalValue}
onChange={(date: Date) => {
setInternalValue(date);
debouncedOnChange(date);
}}
/>
}
nonEditModeContent={<InplaceInputDateDisplayMode value={value} />}
></BoardCardEditableField>

12
front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldText.tsx
View File

@ -1,8 +1,9 @@
import { ChangeEvent } from 'react';
import { ChangeEvent, useMemo, useState } from 'react';
import { BoardCardEditableField } from '@/ui/board-card-field/components/BoardCardEditableField';
import { InplaceInputTextDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputTextDisplayMode';
import { InplaceInputTextEditMode } from '@/ui/inplace-inputs/components/InplaceInputTextEditMode';
import { debounce } from '@/utils/debounce';
type OwnProps = {
placeholder?: string;
@ -17,6 +18,10 @@ export function BoardCardEditableFieldText({
onChange,
editModeHorizontalAlign,
}: OwnProps) {
const [internalValue, setInternalValue] = useState(value);
const debouncedOnChange = useMemo(() => {
return debounce(onChange, 200);
}, [onChange]);
return (
<BoardCardEditableField
editModeHorizontalAlign={editModeHorizontalAlign}
@ -24,9 +29,10 @@ export function BoardCardEditableFieldText({
<InplaceInputTextEditMode
placeholder={placeholder || ''}
autoFocus
value={value}
value={internalValue}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
onChange(event.target.value);
setInternalValue(event.target.value);
debouncedOnChange(event.target.value);
}}
/>
}