Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove componentWillReceiveProps from Form.jsx #2010

Closed
wants to merge 11 commits into from
Closed

Remove componentWillReceiveProps from Form.jsx #2010

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a9d8e05
refactor: form.jsx is no longer using componentwillreceiveprops
Aug 22, 2020
2d35019
return null from getDerivedStateFromProps as default
Aug 26, 2020
33aee98
change deepEquals to shallow equals in getDerivedStateFromProps
Aug 31, 2020
4532e45
checking each key for shallow changes in getDerivedStateFromProps
Aug 31, 2020
f26788b
Merge remote-tracking branch 'origin/master' into no-componentwillrec…
Apr 17, 2021
28c697c
Merge branch 'master' into no-componentwillreceiveprops
Apr 17, 2021
092aab0
Merge branch 'master' into no-componentwillreceiveprops
Apr 18, 2021
ed89981
Merge branch 'master' into no-componentwillreceiveprops
jimmycallin May 2, 2021
181f0da
Merge remote-tracking branch 'origin/master' into no-componentwillrec…
jimmycallin Feb 27, 2022
a40ce16
Revert change for deepEquals function
jimmycallin Feb 27, 2022
ed618c9
moved util functions back as static functions to Form
jimmycallin Feb 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/antd/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

164 changes: 29 additions & 135 deletions packages/core/src/components/Form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,23 @@ import _isEmpty from "lodash/isEmpty";

import { default as DefaultErrorList } from "./ErrorList";
import {
getDefaultFormState,
retrieveSchema,
shouldRender,
toIdSchema,
getDefaultRegistry,
deepEquals,
toPathSchema,
isObject,
getRegistry,
validate,
getStateFromProps,
} from "../utils";
import validateFormData, { toErrorList } from "../validate";
import { toErrorList } from "../validate";
import { mergeObjects } from "../utils";

function handleChange(props, state) {
const { lastProps, ...formState } = state;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Figure out -- why do we need lastProps?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On line 62 we need to compare prop changes to determine if the consumer has updated their props.

If the consumer has updated the props, we update the internal state based on the props.

We could previously do this in componentWillReceiveProps since that method supports both viewing previous and new props. But since getDerivedStateFromProps only shows the new prop updates, we need to store the old props in the state.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And the reason why we cannot always derive state from props, is due to us supporting the mixed controlled/uncontrolled behavior we discussed on our last meeting this Friday.

props.onChange(formState);
}

export default class Form extends Component {
static defaultProps = {
uiSchema: {},
Expand All @@ -31,134 +36,39 @@ export default class Form extends Component {

constructor(props) {
super(props);
this.state = this.getStateFromProps(props, props.formData);
this.state = getStateFromProps(props, props.formData);
}

formElement = null;

componentDidMount() {
if (
this.props.onChange &&
!deepEquals(this.state.formData, this.props.formData)
) {
this.props.onChange(this.state);
handleChange(this.props, this.state);
}
this.formElement = null;
}

UNSAFE_componentWillReceiveProps(nextProps) {
const nextState = this.getStateFromProps(nextProps, nextProps.formData);
componentDidUpdate(prevProps) {
if (
!deepEquals(nextState.formData, nextProps.formData) &&
!deepEquals(nextState.formData, this.state.formData) &&
this.props.onChange
this.props.onChange &&
!deepEquals(this.state.formData, this.props.formData)
) {
this.props.onChange(nextState);
handleChange(this.props, this.state);
}
this.setState(nextState);
}

getStateFromProps(props, inputFormData) {
const state = this.state || {};
const schema = "schema" in props ? props.schema : this.props.schema;
const uiSchema = "uiSchema" in props ? props.uiSchema : this.props.uiSchema;
const edit = typeof inputFormData !== "undefined";
const liveValidate =
"liveValidate" in props ? props.liveValidate : this.props.liveValidate;
const mustValidate = edit && !props.noValidate && liveValidate;
const rootSchema = schema;
const formData = getDefaultFormState(schema, inputFormData, rootSchema);
const retrievedSchema = retrieveSchema(schema, rootSchema, formData);
const customFormats = props.customFormats;
const additionalMetaSchemas = props.additionalMetaSchemas;

const getCurrentErrors = () => {
if (props.noValidate) {
return { errors: [], errorSchema: {} };
} else if (!props.liveValidate) {
return {
errors: state.schemaValidationErrors || [],
errorSchema: state.schemaValidationErrorSchema || {},
};
}
return {
errors: state.errors || [],
errorSchema: state.errorSchema || {},
};
};

let errors,
errorSchema,
schemaValidationErrors,
schemaValidationErrorSchema;
if (mustValidate) {
const schemaValidation = this.validate(
formData,
schema,
additionalMetaSchemas,
customFormats
);
errors = schemaValidation.errors;
errorSchema = schemaValidation.errorSchema;
schemaValidationErrors = errors;
schemaValidationErrorSchema = errorSchema;
} else {
const currentErrors = getCurrentErrors();
errors = currentErrors.errors;
errorSchema = currentErrors.errorSchema;
schemaValidationErrors = state.schemaValidationErrors;
schemaValidationErrorSchema = state.schemaValidationErrorSchema;
static getDerivedStateFromProps(props, state) {
if (state.lastProps !== props) {
return getStateFromProps(props, props.formData, state);
}
if (props.extraErrors) {
errorSchema = mergeObjects(
errorSchema,
props.extraErrors,
!!"concat arrays"
);
errors = toErrorList(errorSchema);
}
const idSchema = toIdSchema(
retrievedSchema,
uiSchema["ui:rootFieldId"],
rootSchema,
formData,
props.idPrefix
);
const nextState = {
schema,
uiSchema,
idSchema,
formData,
edit,
errors,
errorSchema,
additionalMetaSchemas,
};
if (schemaValidationErrors) {
nextState.schemaValidationErrors = schemaValidationErrors;
nextState.schemaValidationErrorSchema = schemaValidationErrorSchema;
}
return nextState;
return null;
}

shouldComponentUpdate(nextProps, nextState) {
return shouldRender(this, nextProps, nextState);
}

validate(
formData,
schema = this.props.schema,
additionalMetaSchemas = this.props.additionalMetaSchemas,
customFormats = this.props.customFormats
) {
const { validate, transformErrors } = this.props;
const { rootSchema } = this.getRegistry();
const resolvedSchema = retrieveSchema(schema, rootSchema, formData);
return validateFormData(
formData,
resolvedSchema,
validate,
transformErrors,
additionalMetaSchemas,
customFormats
);
}

renderErrors() {
const { errors, errorSchema, schema, uiSchema } = this.state;
const { ErrorList, showErrorList, formContext } = this.props;
Expand Down Expand Up @@ -222,7 +132,7 @@ export default class Form extends Component {

onChange = (formData, newErrorSchema) => {
if (isObject(formData) || Array.isArray(formData)) {
const newState = this.getStateFromProps(this.props, formData);
const newState = getStateFromProps(this.props, formData, this.state);
formData = newState.formData;
}
const mustValidate = !this.props.noValidate && this.props.liveValidate;
Expand Down Expand Up @@ -251,7 +161,7 @@ export default class Form extends Component {
}

if (mustValidate) {
let schemaValidation = this.validate(newFormData);
let schemaValidation = validate(newFormData, this.props);
let errors = schemaValidation.errors;
let errorSchema = schemaValidation.errorSchema;
const schemaValidationErrors = errors;
Expand Down Expand Up @@ -287,7 +197,7 @@ export default class Form extends Component {
}
this.setState(
state,
() => this.props.onChange && this.props.onChange(this.state)
() => this.props.onChange && handleChange(this.props, this.state)
);
};

Expand Down Expand Up @@ -331,7 +241,7 @@ export default class Form extends Component {
}

if (!this.props.noValidate) {
let schemaValidation = this.validate(newFormData);
let schemaValidation = validate(newFormData, this.props);
let errors = schemaValidation.errors;
let errorSchema = schemaValidation.errorSchema;
const schemaValidationErrors = errors;
Expand Down Expand Up @@ -387,22 +297,6 @@ export default class Form extends Component {
);
};

getRegistry() {
// For BC, accept passed SchemaField and TitleField props and pass them to
// the "fields" registry one.
const { fields, widgets } = getDefaultRegistry();
return {
fields: { ...fields, ...this.props.fields },
widgets: { ...widgets, ...this.props.widgets },
ArrayFieldTemplate: this.props.ArrayFieldTemplate,
ObjectFieldTemplate: this.props.ObjectFieldTemplate,
FieldTemplate: this.props.FieldTemplate,
definitions: this.props.schema.definitions || {},
rootSchema: this.props.schema,
formContext: this.props.formContext || {},
};
}

submit() {
if (this.formElement) {
this.formElement.dispatchEvent(
Expand Down Expand Up @@ -434,7 +328,7 @@ export default class Form extends Component {
} = this.props;

const { schema, uiSchema, formData, errorSchema, idSchema } = this.state;
const registry = this.getRegistry();
const registry = getRegistry(this.props);
const _SchemaField = registry.fields.SchemaField;
const FormTag = tagName ? tagName : "form";
if (deprecatedAutocomplete) {
Expand Down
114 changes: 113 additions & 1 deletion packages/core/src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import * as ReactIs from "react-is";
import mergeAllOf from "json-schema-merge-allof";
import fill from "core-js/library/fn/array/fill";
import validateFormData, { isValid } from "./validate";
import validateFormData, { isValid, toErrorList } from "./validate";
import union from "lodash/union";
import jsonpointer from "jsonpointer";

Expand Down Expand Up @@ -1243,3 +1243,115 @@ export function schemaRequiresTrueValue(schema) {

return false;
}

export function getRegistry(props) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should move all of these new functions in utils.js to just Form.js (because they're quite Form-specific)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we just make them static functions (such as static Registry) within Form? This will make it easier to compare changes in the PR.

const { fields, widgets } = getDefaultRegistry();
return {
fields: { ...fields, ...props.fields },
widgets: { ...widgets, ...props.widgets },
ArrayFieldTemplate: props.ArrayFieldTemplate,
ObjectFieldTemplate: props.ObjectFieldTemplate,
FieldTemplate: props.FieldTemplate,
definitions: props.schema.definitions || {},
rootSchema: props.schema,
formContext: props.formContext || {},
};
}

export function validate(
formData,
props,
schema = props.schema,
additionalMetaSchemas = props.additionalMetaSchemas,
customFormats = props.customFormats
) {
const { validate, transformErrors } = props;
const { rootSchema } = getRegistry(props);
const resolvedSchema = retrieveSchema(schema, rootSchema, formData);
return validateFormData(
formData,
resolvedSchema,
validate,
transformErrors,
additionalMetaSchemas,
customFormats
);
}

export function getStateFromProps(props, inputFormData, state = {}) {
const edit = typeof inputFormData !== "undefined";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should figure out -- why does this omit several lines from the original getStateFromProps function?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the lines omitted are mostly just variable declarations that I pick up directly from the prop object instead

const mustValidate = edit && !props.noValidate && props.liveValidate;
const formData = getDefaultFormState(
props.schema,
inputFormData,
props.schema
);
const retrievedSchema = retrieveSchema(props.schema, props.schema, formData);

const getCurrentErrors = () => {
if (props.noValidate) {
return { errors: [], errorSchema: {} };
} else if (!props.liveValidate) {
return {
errors: state.schemaValidationErrors || [],
errorSchema: state.schemaValidationErrorSchema || {},
};
}
return {
errors: state.errors || [],
errorSchema: state.errorSchema || {},
};
};

let errors, errorSchema, schemaValidationErrors, schemaValidationErrorSchema;
if (mustValidate) {
const schemaValidation = validate(
formData,
props,
props.schema,
props.additionalMetaSchemas,
props.customFormats
);
errors = schemaValidation.errors;
errorSchema = schemaValidation.errorSchema;
schemaValidationErrors = errors;
schemaValidationErrorSchema = errorSchema;
} else {
const currentErrors = getCurrentErrors();
errors = currentErrors.errors;
errorSchema = currentErrors.errorSchema;
schemaValidationErrors = state.schemaValidationErrors;
schemaValidationErrorSchema = state.schemaValidationErrorSchema;
}
if (props.extraErrors) {
errorSchema = mergeObjects(
errorSchema,
props.extraErrors,
!!"concat arrays"
);
errors = toErrorList(errorSchema);
}
const idSchema = toIdSchema(
retrievedSchema,
props.uiSchema["ui:rootFieldId"],
props.schema,
formData,
props.idPrefix
);
const nextState = {
schema: props.schema,
uiSchema: props.uiSchema,
idSchema,
formData,
edit,
errors,
errorSchema,
additionalMetaSchemas: props.additionalMetaSchemas,
lastProps: props,
};
if (schemaValidationErrors) {
nextState.schemaValidationErrors = schemaValidationErrors;
nextState.schemaValidationErrorSchema = schemaValidationErrorSchema;
}
return nextState;
}