FIO-7139: Replaced defaultProps with JS default values (formio#528)

Co-authored-by: = <=>

src/components/Errors.jsx

@@ -2,6 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const Errors = (props) => {
+ const {
+ type = 'danger',
+ errors,
+ } = props;
+
  const hasErrors = (error) => {
  if (Array.isArray(error)) {
  return error.filter(item => !!item).length !== 0;
@@ -63,8 +68,6 @@ const Errors = (props) => {
  };
 
  // If there are no errors, don't render anything.
- const {errors, type} = props;
-
  if (!hasErrors(errors)) {
  return null;
  }
@@ -79,8 +82,4 @@ Errors.propTypes = {
  type: PropTypes.string
 };
 
-Errors.defaultProps = {
- type: 'danger'
-};
-
 export default Errors;

src/components/FormBuilder.jsx

@@ -3,6 +3,11 @@ import PropTypes from 'prop-types';
 import {FormBuilder as FormioFormBuilder} from 'formiojs';
 
 const FormBuilder = (props) => {
+ const {
+ options = {},
+ Builder = FormioFormBuilder,
+ form,
+ } = props;
  const builderRef = useRef();
  let element;
 
@@ -62,29 +67,29 @@ const FormBuilder = (props) => {
  };
 
  useEffect(() => {
- initializeBuilder(props);
+ initializeBuilder({options, Builder, form});
  return () => (builderRef.current ? builderRef.current.instance.destroy(true) : null);
  }, [builderRef]);
 
  useEffect(() => {
- if (!builderRef.current && props.form) {
- initializeBuilder(props);
+ if (!builderRef.current && form) {
+ initializeBuilder({options, Builder, form});
  }
- }, [props.form, builderRef]);
+ }, [form, builderRef]);
 
  const elementDidMount = useCallback((el) => element = el);
 
  useLayoutEffect(() => {
- if (builderRef.current && props.form && props.form.display) {
- builderRef.current.setDisplay(props.form.display);
+ if (builderRef.current && form && form.display) {
+ builderRef.current.setDisplay(form.display);
  }
- }, [props.form.display]);
+ }, [form.display]);
 
  useLayoutEffect(() => {
- if (builderRef.current && props.form && props.form.components) {
- builderRef.current.setForm(props.form);
+ if (builderRef.current && form && form.components) {
+ builderRef.current.setForm(form);
  }
- }, [props.form]);
+ }, [form]);
 
  return (
  <div>
@@ -93,11 +98,6 @@ const FormBuilder = (props) => {
  );
 };
 
-FormBuilder.defaultProps = {
- options: {},
- Builder: FormioFormBuilder
-};
-
 FormBuilder.propTypes = {
  form: PropTypes.object,
  options: PropTypes.object,

src/components/FormEdit.jsx

@@ -30,13 +30,28 @@ const reducer = (form, {type, value}) => {
 };
 
 const FormEdit = (props) => {
- const [form, dispatchFormAction] = useReducer(reducer, _cloneDeep(props.form));
+ const {
+ form: propsForm = {
+ title: '',
+ name: '',
+ path: '',
+ display: 'form',
+ type: 'form',
+ components: [],
+ },
+ saveText,
+ options,
+ builder,
+ ref,
+ } = props;
+
+ const [form, dispatchFormAction] = useReducer(reducer, _cloneDeep(propsForm));
  useEffect(() => {
  const {form: newForm} = props;
  if (newForm && (form._id !== newForm._id || form.modified !== newForm.modified)) {
  dispatchFormAction({type: 'replaceForm', value: newForm});
  }
- }, [props.form]);
+ }, [propsForm]);
 
  const saveForm = () => {
  const {saveForm} = props;
@@ -53,8 +68,6 @@ const FormEdit = (props) => {
 
  const formChange = (newForm) => dispatchFormAction({type: 'formChange', value: newForm});
 
- const {saveText, options, builder, ref} = props;
-
  return (
  <div>
  <div className="row" ref={ref}>
@@ -161,15 +174,4 @@ FormEdit.propTypes = {
  saveText: PropTypes.string
 };
 
-FormEdit.defaultProps = {
- form: {
- title: '',
- name: '',
- path: '',
- display: 'form',
- type: 'form',
- components: [],
- }
-};
-
 export default FormEdit;

src/components/FormGrid.jsx

@@ -15,13 +15,88 @@ import {stopPropagationWrapper} from '../utils';
 import Grid from './Grid';
 
 const FormGrid = (props) => {
- const getSortQuery = (key, sort) => {
- const {
- forms: {
- sort: currentSort,
- }
- } = props;
+ const {
+ columns = [
+ {
+ key: 'title',
+ sort: true,
+ title: 'Form',
+ width: 8,
+ },
+ {
+ key: 'operations',
+ title: 'Operations',
+ width: 4,
+ },
+ ],
+ formAccess = () => ({
+ form: {
+ create: true,
+ view: true,
+ edit: true,
+ delete: true,
+ },
+ submission: {
+ create: true,
+ view: true,
+ edit: true,
+ delete: true,
+ },
+ }),
+ getForms = () => {},
+ onPageSizeChanged = () => {},
+ operations = [
+ {
+ action: 'view',
+ buttonType: 'primary',
+ icon: 'pencil',
+ permissionsResolver() {
+ return true;
+ },
+ title: 'Enter Data',
+ },
+ {
+ action: 'submission',
+ buttonType: 'warning',
+ icon: 'list-alt',
+ permissionsResolver() {
+ return true;
+ },
+ title: 'View Data',
+ },
+ {
+ action: 'edit',
+ buttonType: 'secondary',
+ icon: 'edit',
+ permissionsResolver() {
+ return true;
+ },
+ title: 'Edit Form',
+ },
+ {
+ action: 'delete',
+ buttonType: 'danger',
+ icon: 'trash',
+ permissionsResolver() {
+ return true;
+ },
+ },
+ ],
+ pageSizes = defaultPageSizes,
+ forms: {
+ forms,
+ limit,
+ pagination: {
+ page,
+ numPages,
+ total,
+ },
+ sort: currentSort,
+ },
+ onAction,
+ } = props;
 
+ const getSortQuery = (key, sort) => {
  const sortKey = _isString(sort) ? sort : key;
  const ascSort = sortKey;
  const descSort = `-${sortKey}`;
@@ -91,12 +166,6 @@ const FormGrid = (props) => {
  );
 
  const Cell = ({row: form, column}) => {
- const {
- formAccess,
- onAction,
- operations = [],
- } = props;
-
  const access = formAccess(form);
 
  if (column.key === 'title') {
@@ -142,24 +211,6 @@ const FormGrid = (props) => {
  );
  };
 
- const {
- columns,
- forms: {
- forms,
- limit,
- pagination: {
- page,
- numPages,
- total,
- },
- sort,
- },
- getForms,
- onAction,
- onPageSizeChanged,
- pageSizes,
- } = props;
-
  const skip = (page - 1) * limit;
  const last = Math.min(skip + limit, total);
 
@@ -179,82 +230,12 @@ const FormGrid = (props) => {
  pageSize={limit}
  pageSizes={pageSizes}
  pages={numPages}
- sortOrder={sort}
+ sortOrder={currentSort}
  total={total}
  />
  );
 };
 
-FormGrid.defaultProps = {
- columns: [
- {
- key: 'title',
- sort: true,
- title: 'Form',
- width: 8,
- },
- {
- key: 'operations',
- title: 'Operations',
- width: 4,
- },
- ],
- formAccess: () => ({
- form: {
- create: true,
- view: true,
- edit: true,
- delete: true,
- },
- submission: {
- create: true,
- view: true,
- edit: true,
- delete: true,
- },
- }),
- getForms: () => {},
- onPageSizeChanged: () => {},
- operations: [
- {
- action: 'view',
- buttonType: 'primary',
- icon: 'pencil',
- permissionsResolver() {
- return true;
- },
- title: 'Enter Data',
- },
- {
- action: 'submission',
- buttonType: 'warning',
- icon: 'list-alt',
- permissionsResolver() {
- return true;
- },
- title: 'View Data',
- },
- {
- action: 'edit',
- buttonType: 'secondary',
- icon: 'edit',
- permissionsResolver() {
- return true;
- },
- title: 'Edit Form',
- },
- {
- action: 'delete',
- buttonType: 'danger',
- icon: 'trash',
- permissionsResolver() {
- return true;
- },
- },
- ],
- pageSizes: defaultPageSizes,
-};
-
 FormGrid.propTypes = {
  columns: Columns,
  formAccess: PropTypes.func,