a220d0a369
- Added `useProfileEdit` and `useServiceEdit` hooks to manage pending changes and save functionality for profile and service data cards. - Updated `ProfileDataCard` and `ServiceDataCard` components to utilize these hooks, enhancing user experience with save and cancel options. - Introduced buttons for saving and canceling changes, improving the overall interactivity of the forms. - Refactored input handling to use `updateField` for better state management.
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { useDebouncedOnChangeCallback, useFocus } from './hooks';
|
|
import { Input } from '@repo/ui/components/ui/input';
|
|
import { Label } from '@repo/ui/components/ui/label';
|
|
import { type ChangeEvent, useState } from 'react';
|
|
|
|
type FieldProps = {
|
|
readonly disabled?: boolean;
|
|
readonly id: string;
|
|
readonly label: string;
|
|
readonly onChange?: (value: string) => void;
|
|
readonly readOnly?: boolean;
|
|
readonly value: string;
|
|
};
|
|
|
|
export function TextField({
|
|
disabled = false,
|
|
id,
|
|
label,
|
|
onChange,
|
|
readOnly,
|
|
value: initialValue,
|
|
}: FieldProps) {
|
|
const [value, setValue] = useState(initialValue);
|
|
const { debouncedCallback, isPending } = useDebouncedOnChangeCallback<string>(onChange);
|
|
const inputRef = useFocus(isPending);
|
|
|
|
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
const newValue = event.target.value;
|
|
setValue(newValue);
|
|
debouncedCallback(newValue);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<Label htmlFor={id}>{label}</Label>
|
|
<Input
|
|
className="bg-secondary outline-none focus:ring-0 focus:ring-offset-0"
|
|
disabled={disabled || isPending}
|
|
id={id}
|
|
onChange={handleChange}
|
|
readOnly={readOnly}
|
|
ref={inputRef}
|
|
value={value}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|