@payfit/unity-components
Version:
76 lines (75 loc) • 2.99 kB
TypeScript
import { ReactNode } from 'react';
export interface InlineFieldReadViewProps {
/**
* Content to display in read mode.
* Typically includes the read-only value and an InlineFieldEditTrigger.
*/
children: ReactNode;
/**
* Success message to announce when save succeeds.
* If not provided, no success announcement is made.
*/
successMessage?: string;
}
/**
* InlineFieldReadView displays content only when the parent InlineField is in read mode.
* Wrap read-only content and the edit trigger button in this component.
* The component automatically hides its content when the parent switches to edit mode,
* using semantic HTML attributes for accessibility.
* @example Basic usage with read-only value
* ```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 With formatted display
* ```tsx
* <field.InlineFieldReadView>
* <div className="flex items-center justify-between">
* <div>
* <Label>Email</Label>
* <Text>{form.state.values.email}</Text>
* </div>
* <field.InlineFieldEditTrigger />
* </div>
* </field.InlineFieldReadView>
* ```
* @remarks
* - Must be used as a child of InlineField
* - Content remains in the DOM but is hidden with `hidden`, `aria-hidden`, and `inert` attributes in edit mode
* - Use this component to wrap both the read-only value and the InlineFieldEditTrigger
* @see {@link InlineFieldReadViewProps} for all available props
* @see {@link InlineField} for the parent container component
* @see {@link InlineFieldEditView} for the corresponding edit mode component
* @see {@link InlineFieldEditTrigger} for the button to enter edit mode
* @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}
*/
export declare function InlineFieldReadView({ children, successMessage, }: InlineFieldReadViewProps): import("react/jsx-runtime").JSX.Element;
export declare namespace InlineFieldReadView {
var displayName: string;
}