Files
twenty/front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx
Weiko 7d900ad1c6 Reorganize context/states/selectors in dedicated folders (#1205)
* Reorganize context/states/selectors in dedicated folders

* linter
2023-08-14 15:08:47 -07:00

48 lines
1.7 KiB
TypeScript

import { useContext } from 'react';
import { useRecoilState } from 'recoil';
import { EditableFieldDefinitionContext } from '../contexts/EditableFieldDefinitionContext';
import { EditableFieldEntityIdContext } from '../contexts/EditableFieldEntityIdContext';
import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
import { genericEntityFieldFamilySelector } from '../states/selectors/genericEntityFieldFamilySelector';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldDateMetadata } from '../types/FieldMetadata';
import { EditableFieldEditModeDate } from '../variants/components/EditableFieldEditModeDate';
export function GenericEditableDateFieldEditMode() {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldDateMetadata>;
// TODO: we could use a hook that would return the field value with the right type
const [fieldValue, setFieldValue] = useRecoilState<string>(
genericEntityFieldFamilySelector({
entityId: currentEditableFieldEntityId ?? '',
fieldName: currentEditableFieldDefinition
? currentEditableFieldDefinition.metadata.fieldName
: '',
}),
);
const updateField = useUpdateGenericEntityField();
function handleSubmit(newDateISO: string) {
if (newDateISO === fieldValue || !newDateISO) return;
setFieldValue(newDateISO);
if (currentEditableFieldEntityId && updateField) {
updateField(
currentEditableFieldEntityId,
currentEditableFieldDefinition,
newDateISO,
);
}
}
return (
<EditableFieldEditModeDate value={fieldValue} onChange={handleSubmit} />
);
}