fix(react): lint errors that should be warnings!

Author: zgover

packages/react-form-renderer/src/form-renderer/form-renderer.js

@@ -1,7 +1,7 @@
 import arrayMutators from 'final-form-arrays';
 import createFocusDecorator from 'final-form-focus';
 import PropTypes from 'prop-types';
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import defaultSchemaValidator from '../default-schema-validator';
 import defaultValidatorMapper from '../validator-mapper';
@@ -10,8 +10,7 @@ import RendererContext from '../renderer-context';
 import renderForm from './render-form';
 import SchemaErrorComponent from './schema-error-component';
 
-
-const isFunc = (fn) => (typeof fn === 'function');
+const isFunc = (fn) => typeof fn === 'function';
 
 const FormRenderer = ({
   actionMapper,
@@ -34,99 +33,102 @@ const FormRenderer = ({
   ...props
 }) => {
   const [fileInputs, setFileInputs] = useState([]);
+  const formFields = useMemo(() => renderForm(schema.fields), [schema]);
   const registeredFields = useRef({});
   const focusDecorator = useRef(createFocusDecorator());
-  const validatorMapperMerged = useMemo(() => ({
-    ...defaultValidatorMapper,
-    ...validatorMapper
-  }), [validatorMapper]);
-  const mutatorsMerged = useMemo(() => ({
-    ...arrayMutators,
-    ...mutators
-  }), [mutators]);
-  const decoratorsMerged = useMemo(() => ([
-    focusDecorator.current,
-    ...(Array.isArray(decorators) ? decorators : [])
-  ]), [decorators]);
-
-  const handleSubmitCallback = useCallback((values, formApi, ...args) => {
-    return !isFunc(onSubmit) ? undefined : onSubmit(values, {...formApi, fileInputs}, ...args);
-  }, [onSubmit, fileInputs]);
-
-  const handleCancelCallback = useCallback((getState) => {
-    return ((...args) => onCancel(getState().values, ...args));
-  }, [onCancel]);
-
-  const handleResetCallback = useCallback((reset) => (...args) => {
-    reset();
-    return !isFunc(onReset) ? void 0 : onReset(...args);
-  }, [onReset]);
-
-  const handleErrorCallback = useCallback((...args) => {
-    // eslint-disable-next-line no-console
-    console.error(...args);
-    return !isFunc(onError) ? void 0 : onError(...args);
-  }, [onError]);
+  const validatorMapperMerged = useMemo(() => {
+    return {...defaultValidatorMapper, ...validatorMapper}
+  }, [validatorMapper]);
+  const mutatorsMerged = useMemo(
+    () =>({...arrayMutators, ...mutators}), 
+    [mutators]
+  );
+  const decoratorsMerged = useMemo(
+    () => ([focusDecorator.current, ...(Array.isArray(decorators) ? decorators : [])]), 
+    [decorators]
+  );
+
+  const handleSubmitCallback = useCallback(
+    (values, formApi, ...args) => {
+      return !isFunc(onSubmit) ? undefined : onSubmit(values, { ...formApi, fileInputs }, ...args);
+    }, 
+    [onSubmit, fileInputs]
+  );
+
+  const handleCancelCallback = useCallback(
+    (getState) => {
+      return (...args) => onCancel(getState().values, ...args);
+    }, 
+    [onCancel]
+  );
+
+  const handleResetCallback = useCallback(
+    (reset) => (...args) => {
+      reset();
+      return !isFunc(onReset) ? void 0 : onReset(...args);
+    }, 
+    [onReset]
+  );
+
+  const handleErrorCallback = useCallback(
+    (...args) => {
+      // eslint-disable-next-line no-console
+      console.error(...args);
+      return !isFunc(onError) ? void 0 : onError(...args);
+    }, 
+    [onError]
+  );
 
   const registerInputFile = useCallback((name) => {
     setFileInputs((prevFiles) => [...prevFiles, name]);
   }, []);
 
   const unRegisterInputFile = useCallback((name) => {
-    setFileInputs((prevFiles) => [
-      ...prevFiles.splice(prevFiles.indexOf(name))
-    ]);
+    setFileInputs((prevFiles) => [...prevFiles.splice(prevFiles.indexOf(name))]);
   }, []);
 
   const setRegisteredFields = useCallback((fn) => {
-    return registeredFields.current = fn({...registeredFields.current});
+    return registeredFields.current = fn({ ...registeredFields.current });
   }, []);
 
   const internalRegisterField = useCallback((name) => {
     setRegisteredFields((prev) => (
-      prev[name] ? {...prev, [name]: prev[name] + 1} : {...prev, [name]: 1})
+      prev[name] ? { ...prev, [name]: prev[name] + 1 } : { ...prev, [name]: 1 })
     );
   }, []);
 
   const internalUnRegisterField = useCallback((name) => {
-    setRegisteredFields(({[name]: currentField, ...prev}) => (
-      currentField && currentField > 1 ? {[name]: currentField - 1, ...prev} : prev
+    setRegisteredFields(({ [name]: currentField, ...prev }) => (
+      currentField && currentField > 1 ? { [name]: currentField - 1, ...prev } : prev
     ));
   }, []);
 
   const internalGetRegisteredFields = useCallback(() => {
     const fields = registeredFields.current;
-    return Object.entries(fields).reduce((acc, [name, value]) => (
-      value > 0 ? [...acc, name] : acc
-    ), []);
+    return Object.entries(fields).reduce(
+      (acc, [name, value]) => value > 0 ? [...acc, name] : acc, 
+      []
+    );
   }, []);
 
   try {
     const validatorTypes = Object.keys(validatorMapperMerged);
     const actionTypes = actionMapper ? Object.keys(actionMapper) : [];
 
-    defaultSchemaValidator(
-      schema,
-      componentMapper,
-      validatorTypes,
-      actionTypes,
-      schemaValidatorMapper
-    );
+    defaultSchemaValidator(schema, componentMapper, validatorTypes, actionTypes, schemaValidatorMapper);
   }
   catch (error) {
     handleErrorCallback('schema-error', error);
     return <SchemaErrorComponent name={error.name} message={error.message} />;
   }
 
-  const formFields = useMemo(() => renderForm(schema.fields), [schema]);
-
   return (
     <Form
       onSubmit={handleSubmitCallback}
       mutators={mutatorsMerged}
       decorators={decoratorsMerged}
-      subscription={{pristine: true, submitting: true, valid: true, ...subscription}}
-      render={({handleSubmit, pristine, valid, form: {reset, mutators, getState, submit, ...form}}) => (
+      subscription={{ pristine: true, submitting: true, valid: true, ...subscription }}
+      render={({ handleSubmit, pristine, valid, form: { reset, mutators, getState, submit, ...form } }) => (
         <RendererContext.Provider
           value={{
             componentMapper,
@@ -159,15 +161,9 @@ const FormRenderer = ({
           }}
         >
 
-          {FormTemplate && (
-            <FormTemplate
-              formFields={formFields}
-              schema={schema}
-              {...FormTemplateProps}
-            />
-          )}
+          {FormTemplate && <FormTemplate formFields={formFields} schema={schema} {...FormTemplateProps} />}
 
-          {isFunc(children) ? children({formFields, schema}) : children}
+          {isFunc(children) ? children({ formFields, schema }) : children}
 
         </RendererContext.Provider>
       )}
@@ -184,15 +180,10 @@ FormRenderer.propTypes = {
   onError: PropTypes.func,
   schema: PropTypes.object.isRequired,
   clearOnUnmount: PropTypes.bool,
-  subscription: PropTypes.shape({[PropTypes.string]: PropTypes.bool}),
+  subscription: PropTypes.shape({ [PropTypes.string]: PropTypes.bool }),
   clearedValue: PropTypes.any,
   componentMapper: PropTypes.shape({
-    [PropTypes.string]: PropTypes.oneOfType([
-      PropTypes.node,
-      PropTypes.element,
-      PropTypes.func,
-      PropTypes.elementType
-    ]),
+    [PropTypes.string]: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func, PropTypes.elementType]),
   }).isRequired,
   FormTemplate: PropTypes.elementType,
   FormTemplateProps: PropTypes.object,
@@ -214,6 +205,8 @@ FormRenderer.propTypes = {
     }),
   }),
   initialValues: PropTypes.object,
+  decorators: PropTypes.array,
+  mutators: PropTypes.object,
 };
 
 FormRenderer.defaultProps = {