@papernote/ui
Version:
A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive
113 lines • 3.25 kB
TypeScript
/**
* Form field type discriminator
*/
export type FormFieldType = 'text' | 'email' | 'number' | 'password' | 'date' | 'datetime-local' | 'select' | 'textarea' | 'checkbox' | 'switch';
/**
* Base form field configuration
*/
export interface BaseFormField {
name: string;
label: string;
type: FormFieldType;
required?: boolean;
disabled?: boolean;
placeholder?: string;
helperText?: string;
validate?: (value: any) => string | null;
}
/**
* Text input field
*/
export interface TextFormField extends BaseFormField {
type: 'text' | 'email' | 'number' | 'password' | 'date' | 'datetime-local';
min?: number | string;
max?: number | string;
step?: number | string;
pattern?: string;
}
/**
* Select dropdown field
*/
export interface SelectFormField extends BaseFormField {
type: 'select';
options: Array<{
value: string;
label: string;
}>;
multiple?: boolean;
}
/**
* Textarea field
*/
export interface TextareaFormField extends BaseFormField {
type: 'textarea';
rows?: number;
maxLength?: number;
}
/**
* Checkbox field
*/
export interface CheckboxFormField extends BaseFormField {
type: 'checkbox';
}
/**
* Switch field
*/
export interface SwitchFormField extends BaseFormField {
type: 'switch';
}
/**
* Union type for all form fields
*/
export type FormField = TextFormField | SelectFormField | TextareaFormField | CheckboxFormField | SwitchFormField;
/**
* Props for ExpandedRowEditForm component
*/
export interface ExpandedRowEditFormProps<T> {
/** The item being edited */
item: T;
/** Form field configurations */
fields: FormField[];
/** Save handler - receives updated item */
onSave: (updated: T) => Promise<void>;
/** Cancel handler */
onCancel: () => void;
/** Loading state during save */
isLoading?: boolean;
/** Custom validation function for entire form */
validateForm?: (data: T) => Record<string, string>;
/** Grid layout - number of columns (default: 2) */
columns?: 1 | 2 | 3;
}
/**
* ExpandedRowEditForm - Inline form component for editing records within expanded DataTable rows
*
* Features:
* - Generic type support for any data model
* - Configurable form fields with validation
* - Multi-column responsive layout
* - Save/Cancel actions
* - Loading states
* - Field-level and form-level validation
* - Supports text, select, textarea, checkbox, and switch fields
*
* @example
* ```tsx
* const userFormFields: FormField[] = [
* { name: 'name', label: 'Full Name', type: 'text', required: true },
* { name: 'email', label: 'Email', type: 'email', required: true },
* { name: 'role', label: 'Role', type: 'select', options: roleOptions },
* { name: 'isActive', label: 'Active', type: 'switch' },
* ];
*
* <ExpandedRowEditForm
* item={user}
* fields={userFormFields}
* onSave={handleSave}
* onCancel={handleCancel}
* columns={2}
* />
* ```
*/
export default function ExpandedRowEditForm<T extends Record<string, any>>({ item, fields, onSave, onCancel, isLoading, validateForm, columns, }: ExpandedRowEditFormProps<T>): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=ExpandedRowEditForm.d.ts.map