ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
68 lines • 2.47 kB
TypeScript
type FieldState = {
name: string;
error?: any;
isDirty: boolean;
isTouched: boolean;
isValid: boolean;
isValidating: boolean;
};
type FormGroupState = {
errors?: object;
isDirty: boolean;
isTouched: boolean;
isValid: boolean;
isValidating: boolean;
};
/**
* Retrieve a specific form group data such as its validation status (valid/invalid) or
* or whether its inputs have been updated (dirty/pristine)
*
* @example
* import { Edit, SimpleForm, TextInput, FormGroupContextProvider, useFormGroup, minLength } from 'react-admin';
* import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
* import ExpandMoreIcon from '@mui/icons-material/ExpandMoreIcon';
*
* const PostEdit = () => (
* <Edit>
* <SimpleForm>
* <TextInput source="title" />
* <FormGroupContextProvider name="options">
* <Accordion>
* <AccordionSummary
* expandIcon={<ExpandMoreIcon />}
* aria-controls="options-content"
* id="options-header"
* >
* <AccordionSectionTitle name="options">Options</AccordionSectionTitle>
* </AccordionSummary>
* <AccordionDetails id="options-content" aria-labelledby="options-header">
* <TextInput source="teaser" validate={minLength(20)} />
* </AccordionDetails>
* </Accordion>
* </FormGroupContextProvider>
* </SimpleForm>
* </Edit>
* );
*
* const AccordionSectionTitle = ({ children, name }) => {
* const formGroupState = useFormGroup(name);
* return (
* <Typography color={!formGroupState.isValid && formGroupState.isDirty ? 'error' : 'inherit'}>
* {children}
* </Typography>
* );
* }
*
* @param {string} name The form group name
* @returns {FormGroupState} The form group state
*/
export declare const useFormGroup: (name: string) => FormGroupState;
/**
* Get the state of a form group
*
* @param {FieldState[]} fieldStates A map of field states from react-hook-form where the key is the field name.
* @returns {FormGroupState} The state of the group.
*/
export declare const getFormGroupState: (fieldStates: FieldState[]) => FormGroupState;
export {};
//# sourceMappingURL=useFormGroup.d.ts.map