ra-core
Version:
Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React
155 lines • 6.37 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getFormGroupState = exports.useFormGroup = void 0;
const react_1 = require("react");
const get_js_1 = __importDefault(require("lodash/get.js"));
const isEqual_js_1 = __importDefault(require("lodash/isEqual.js"));
const react_hook_form_1 = require("react-hook-form");
const useFormGroups_1 = require("./useFormGroups.cjs");
const util_1 = require("../../util/index.cjs");
/**
* 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
*/
const useFormGroup = (name) => {
const { dirtyFields, touchedFields, validatingFields, errors } = (0, react_hook_form_1.useFormState)();
// dirtyFields, touchedFields, validatingFields and errors are objects with keys being the field names
// Ex: { title: true }
// However, they are not correctly serialized when using JSON.stringify
// To avoid our effects to not be triggered when they should, we extract the keys and use that as a dependency
const dirtyFieldsNames = Object.keys(dirtyFields);
const touchedFieldsNames = Object.keys(touchedFields);
const validatingFieldsNames = Object.keys(validatingFields);
const errorsNames = Object.keys(errors);
const formGroups = (0, useFormGroups_1.useFormGroups)();
const [state, setState] = (0, react_1.useState)({
errors: undefined,
isDirty: false,
isTouched: false,
isValid: true,
isValidating: true,
});
const updateGroupState = (0, util_1.useEvent)(() => {
if (!formGroups)
return;
const fields = formGroups.getGroupFields(name);
const fieldStates = fields
.map(field => {
return {
name: field,
error: (0, get_js_1.default)(errors, field, undefined),
isDirty: (0, get_js_1.default)(dirtyFields, field, false) !== false,
isValid: (0, get_js_1.default)(errors, field, undefined) == null,
isValidating: (0, get_js_1.default)(validatingFields, field, undefined) == null,
isTouched: (0, get_js_1.default)(touchedFields, field, false) !== false,
};
})
.filter(fieldState => fieldState != undefined); // eslint-disable-line
const newState = (0, exports.getFormGroupState)(fieldStates);
setState(oldState => {
if (!(0, isEqual_js_1.default)(oldState, newState)) {
return newState;
}
return oldState;
});
});
(0, react_1.useEffect)(() => {
updateGroupState();
}, [
// eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(dirtyFieldsNames),
// eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(errorsNames),
// eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(touchedFieldsNames),
// eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(validatingFieldsNames),
updateGroupState,
name,
formGroups,
]);
(0, react_1.useEffect)(() => {
if (!formGroups)
return;
// Whenever the group content changes (input are added or removed)
// we must update its state
const unsubscribe = formGroups.subscribe(name, () => {
updateGroupState();
});
return unsubscribe;
}, [formGroups, name, updateGroupState]);
return state;
};
exports.useFormGroup = useFormGroup;
/**
* 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.
*/
const getFormGroupState = (fieldStates) => {
return fieldStates.reduce((acc, fieldState) => {
const errors = acc.errors || {};
if (fieldState.error) {
errors[fieldState.name] = fieldState.error;
}
const newState = {
isDirty: acc.isDirty || fieldState.isDirty,
errors,
isTouched: acc.isTouched || fieldState.isTouched,
isValid: acc.isValid && fieldState.isValid,
isValidating: acc.isValidating && fieldState.isValidating,
};
return newState;
}, {
isDirty: false,
errors: undefined,
isValid: true,
isTouched: false,
isValidating: false,
});
};
exports.getFormGroupState = getFormGroupState;
//# sourceMappingURL=useFormGroup.js.map