@payfit/unity-components
Version:
60 lines (59 loc) • 2.35 kB
TypeScript
export interface InlineFieldEditTriggerProps {
/**
* Custom label for the edit button.
* @default "Edit" (translated)
*/
editLabel?: string;
}
/**
* InlineFieldEditTrigger renders an icon button that switches the InlineField to edit mode.
* It automatically displays only when the parent InlineField is in read mode.
* The button uses a pencil icon and handles entering edit mode when clicked.
* @example Basic usage
* ```tsx
* import { useTanstackUnityForm } from '@payfit/unity-components'
*
* function Example() {
* const form = useTanstackUnityForm({ defaultValues: { email: 'john@example.com' } })
*
* return (
* <form.AppForm>
* <form.AppField name="email">
* {field => (
* <field.InlineField>
* <field.InlineFieldReadView>
* <div className="flex items-center gap-2">
* <Text>{form.state.values.email}</Text>
* <field.InlineFieldEditTrigger />
* </div>
* </field.InlineFieldReadView>
* <field.InlineFieldEditView>
* <field.TextField label="Email" />
* </field.InlineFieldEditView>
* </field.InlineField>
* )}
* </form.AppField>
* </form.AppForm>
* )
* }
* ```
* @example Custom edit label
* ```tsx
* <field.InlineFieldEditTrigger editLabel="Modify" />
* ```
* @remarks
* - Must be used as a child of InlineField
* - Automatically disabled when InlineField is in edit mode
* - Uses `aria-controls` and `aria-expanded` for accessibility
* - Typically placed alongside the read-only value in InlineFieldReadView
* @see {@link InlineFieldEditTriggerProps} for all available props
* @see {@link InlineField} for the parent container component
* @see {@link InlineFieldReadView} for the read mode container
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/inline-field GitHub}
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefield--docs unity-components.payfit.io}
*/
declare const InlineFieldEditTrigger: {
({ editLabel }: InlineFieldEditTriggerProps): import("react/jsx-runtime").JSX.Element | null;
displayName: string;
};
export { InlineFieldEditTrigger };