Weiko
80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import { useContext, useRef, useState } from 'react';
|
|
import { useRecoilState } from 'recoil';
|
|
|
|
import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
|
|
import {
|
|
canBeCastAsIntegerOrNull,
|
|
castAsIntegerOrNull,
|
|
} from '~/utils/cast-as-integer-or-null';
|
|
|
|
import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
|
|
import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
|
|
import { EditableFieldDefinitionContext } from '../states/EditableFieldDefinitionContext';
|
|
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
|
|
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
|
|
import { FieldDefinition } from '../types/FieldDefinition';
|
|
import { FieldNumberMetadata } from '../types/FieldMetadata';
|
|
|
|
export function GenericEditableNumberFieldEditMode() {
|
|
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
|
|
const currentEditableFieldDefinition = useContext(
|
|
EditableFieldDefinitionContext,
|
|
) as FieldDefinition<FieldNumberMetadata>;
|
|
|
|
// TODO: we could use a hook that would return the field value with the right type
|
|
const [fieldValue, setFieldValue] = useRecoilState<number | null>(
|
|
genericEntityFieldFamilySelector({
|
|
entityId: currentEditableFieldEntityId ?? '',
|
|
fieldName: currentEditableFieldDefinition
|
|
? currentEditableFieldDefinition.metadata.fieldName
|
|
: '',
|
|
}),
|
|
);
|
|
const [internalValue, setInternalValue] = useState(
|
|
fieldValue ? fieldValue.toString() : '',
|
|
);
|
|
|
|
const updateField = useUpdateGenericEntityField();
|
|
|
|
const wrapperRef = useRef(null);
|
|
|
|
useRegisterCloseFieldHandlers(wrapperRef, handleSubmit, onCancel);
|
|
|
|
function handleSubmit() {
|
|
if (!canBeCastAsIntegerOrNull(internalValue)) {
|
|
return;
|
|
}
|
|
if (internalValue === fieldValue) return;
|
|
|
|
setFieldValue(castAsIntegerOrNull(internalValue));
|
|
|
|
if (currentEditableFieldEntityId && updateField) {
|
|
updateField(
|
|
currentEditableFieldEntityId,
|
|
currentEditableFieldDefinition,
|
|
castAsIntegerOrNull(internalValue),
|
|
);
|
|
}
|
|
}
|
|
|
|
function onCancel() {
|
|
setFieldValue(fieldValue);
|
|
}
|
|
|
|
function handleChange(newValue: string) {
|
|
setInternalValue(newValue);
|
|
}
|
|
|
|
return (
|
|
<div ref={wrapperRef}>
|
|
<TextInputEdit
|
|
autoFocus
|
|
value={internalValue ? internalValue.toString() : ''}
|
|
onChange={(newValue: string) => {
|
|
handleChange(newValue);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|