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.
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useDebouncedOnChangeCallback, useFocus } from './hooks';
|
|
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 rows?: number;
|
|
readonly value: string;
|
|
};
|
|
|
|
export function TextareaField({
|
|
disabled = false,
|
|
id,
|
|
label,
|
|
onChange,
|
|
readOnly,
|
|
rows = 3,
|
|
value: initialValue,
|
|
}: FieldProps) {
|
|
const [value, setValue] = useState(initialValue);
|
|
const { debouncedCallback, isPending } = useDebouncedOnChangeCallback<string>(onChange);
|
|
const textareaRef = useFocus(isPending);
|
|
|
|
const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
|
|
const newValue = event.target.value;
|
|
setValue(newValue);
|
|
debouncedCallback(newValue);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<Label htmlFor={id}>{label}</Label>
|
|
<textarea
|
|
className="flex w-full resize-none rounded-md border border-input bg-secondary px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
|
|
disabled={disabled || isPending}
|
|
id={id}
|
|
onChange={handleChange}
|
|
readOnly={readOnly}
|
|
ref={textareaRef as React.Ref<HTMLTextAreaElement>}
|
|
rows={rows}
|
|
value={value}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|