feat: Update to use latest react-form-renderer version 3.6.2. schema …

…props needs update. (#189) * feat: Update react-form-renderer * build(dev-deps): Bump trim from 0.0.1 to 0.0.3 (#190) * feat: Some react-form-renderer fixes * fix: PR comments * fix: DatePicker component * fix: Using custom Schema type to keep backward compatibility * fix: Typescript improvements for FormRenderer and FormTemplate Co-authored-by: Jessie Wei <jessieweiyi@gmail.com>
aws · May 18, 2021 · 47a3c97 · 47a3c97
1 parent 2a422a1
commit 47a3c97
Show file tree

Hide file tree

Showing 35 changed files with 111 additions and 118 deletions.
diff --git a/package.json b/package.json
@@ -117,7 +117,7 @@
     "webpack": "4.46.0"
   },
   "dependencies": {
-    "@data-driven-forms/react-form-renderer": "^2.5.3",
+    "@data-driven-forms/react-form-renderer": "^3.6.2",
     "@date-io/date-fns": "^1.3.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.11.2",

diff --git a/src/components/Autosuggest/index.tsx b/src/components/Autosuggest/index.tsx
@@ -75,11 +75,11 @@ export interface AutosuggestProps extends SelectBaseProps, AriaBaseProps {
     /**
      * Callback fired when the popup requests to be opened
      * */
-    onFocus?: (event: React.ChangeEvent<{}>) => void;
+    onFocus?: (event?: React.FocusEvent<HTMLElement>) => void;
     /**
      * Callback fired when the popup requests to be closed
      * */
-    onBlur?: (event: React.ChangeEvent<{}>) => void;
+    onBlur?: (event?: React.FocusEvent<HTMLElement>) => void;
 }
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -229,11 +229,11 @@ export default function Autosuggest({
                 onInputChange={handleOnInput}
                 onOpen={(e) => {
                     setOpen(true);
-                    onFocus?.(e);
+                    onFocus?.(e as React.FocusEvent<HTMLElement>);
                 }}
                 onClose={(e) => {
                     setOpen(false);
-                    onBlur?.(e);
+                    onBlur?.(e as React.FocusEvent<HTMLElement>);
                 }}
                 loading={statusType !== 'finished'}
                 getOptionLabel={(option) => option.label || ''}

diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
@@ -37,9 +37,9 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 export interface FormProps {
     /** Title of the form */
-    header: string;
+    header?: ReactNode | string;
     /** General description of the form */
-    description?: string;
+    description?: ReactNode | string;
     /** Additional form level validation message */
     errorText?: string;
     /** Form action buttons are supposed to be placed here */

diff --git a/src/components/FormGroup/index.stories.tsx b/src/components/FormGroup/index.stories.tsx
@@ -20,7 +20,7 @@ import Checkbox from '../Checkbox';
 
 export default {
     component: FormGroup,
-    title: 'FormGrouup',
+    title: 'FormGroup',
 };
 
 export const Default = () => (

diff --git a/src/components/FormRenderer/components/Checkbox/index.tsx b/src/components/FormRenderer/components/Checkbox/index.tsx
@@ -14,7 +14,7 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { FunctionComponent } from 'react';
-import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import useFieldApi, { UseFieldApiConfig } from '@data-driven-forms/react-form-renderer/use-field-api';
 import { v4 as uuidv4 } from 'uuid';
 import { Option } from '../../types';
 import Checkbox from '../../../Checkbox';
@@ -35,7 +35,7 @@ const CheckboxMapping: FunctionComponent<CheckboxMappingProps> = ({ option, name
     );
 };
 
-const CheckboxGroupMapping: FunctionComponent = (props: any) => {
+const CheckboxGroupMapping: FunctionComponent<UseFieldApiConfig> = (props) => {
     const {
         label,
         description,

diff --git a/src/components/FormRenderer/components/Custom/index.tsx b/src/components/FormRenderer/components/Custom/index.tsx
@@ -14,9 +14,10 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { FunctionComponent, memo } from 'react';
-import { useFieldApi, useFormApi } from '@data-driven-forms/react-form-renderer';
+import useFieldApi, { UseFieldApiConfig } from '@data-driven-forms/react-form-renderer/use-field-api';
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
 
-const CustomMapping: FunctionComponent = (props: any) => {
+const CustomMapping: FunctionComponent<UseFieldApiConfig> = (props) => {
     const { CustomComponent, ...rest } = useFieldApi(props);
     const { getState } = useFormApi();
 

diff --git a/src/components/FormRenderer/components/Datepicker/index.tsx b/src/components/FormRenderer/components/Datepicker/index.tsx
@@ -14,12 +14,12 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { FunctionComponent } from 'react';
-import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import useFieldApi, { UseFieldApiConfig } from '@data-driven-forms/react-form-renderer/use-field-api';
 import { v4 as uuidv4 } from 'uuid';
 import FormField from '../../../FormField';
 import Datepicker from '../../../DatePicker';
 
-const DatepickerMapping: FunctionComponent = (props: any) => {
+const DatepickerMapping: FunctionComponent<UseFieldApiConfig> = (props) => {
     const {
         label,
         description,
@@ -50,8 +50,8 @@ const DatepickerMapping: FunctionComponent = (props: any) => {
                 placeholder={placeholder}
                 controlId={controlId}
                 disabled={isDisabled}
-                required={isRequired}
-                readonly={isReadOnly}
+                ariaRequired={isRequired}
+                readOnly={isReadOnly}
                 invalid={!!errorText}
             />
         </FormField>

diff --git a/src/components/FormRenderer/components/ExpandableSection/index.tsx b/src/components/FormRenderer/components/ExpandableSection/index.tsx
@@ -14,12 +14,13 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { FunctionComponent, useMemo, useState, useEffect } from 'react';
-import { useFormApi, useFieldApi } from '@data-driven-forms/react-form-renderer';
+import useFieldApi, { UseFieldApiConfig } from '@data-driven-forms/react-form-renderer/use-field-api';
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
 import ExpandableSection from '../../../ExpandableSection';
 import Stack from '../../../../layouts/Stack';
 import Box from '../../../../layouts/Box';
 
-const ExpandableSectionMapping: FunctionComponent = (props) => {
+const ExpandableSectionMapping: FunctionComponent<UseFieldApiConfig> = (props) => {
     const {
         fields,
         title,

diff --git a/src/components/FormRenderer/components/FieldArray/components/FieldArrayItem/index.tsx b/src/components/FormRenderer/components/FieldArray/components/FieldArrayItem/index.tsx
@@ -14,7 +14,7 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { FunctionComponent, useMemo } from 'react';
-import { useFormApi } from '@data-driven-forms/react-form-renderer';
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
 import { v4 as uuidv4 } from 'uuid';
 import Box from '../../../../../../layouts/Box';
 import Button from '../../../../../Button';
@@ -46,7 +46,7 @@ const FieldArrayItem: FunctionComponent<FieldArrayItemProps> = ({
 }) => {
     const formOptions = useFormApi();
     const editedFields = useMemo(() => {
-        return fields.map((field: any) => {
+        return fields.map((field) => {
             const computedName = field.name ? `${name}.${field.name}` : uuidv4();
             return {
                 ...field,
@@ -67,7 +67,7 @@ const FieldArrayItem: FunctionComponent<FieldArrayItemProps> = ({
                         {editedFields.map((field) => (
                             <Grid item key={field.key} xs={field.spacing || 3}>
                                 <Box width="100%" pr={1}>
-                                    {formOptions.renderForm([field], formOptions)}
+                                    {formOptions.renderForm([field])}
                                 </Box>
                             </Grid>
                         ))}
@@ -77,7 +77,7 @@ const FieldArrayItem: FunctionComponent<FieldArrayItemProps> = ({
                         {editedFields.map((field) => (
                             <Column key={field.key}>
                                 <Box width="100%" pr={1}>
-                                    {formOptions.renderForm([field], formOptions)}
+                                    {formOptions.renderForm([field])}
                                 </Box>
                             </Column>
                         ))}

diff --git a/src/components/FormRenderer/components/FieldArray/index.tsx b/src/components/FormRenderer/components/FieldArray/index.tsx
@@ -14,7 +14,8 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { FunctionComponent } from 'react';
-import { useFieldApi, FieldArray as FieldArrayBase } from '@data-driven-forms/react-form-renderer';
+import useFieldApi, { UseFieldApiConfig } from '@data-driven-forms/react-form-renderer/use-field-api';
+import { FieldArray as FieldArrayBase } from '@data-driven-forms/react-form-renderer';
 import { v4 as uuidv4 } from 'uuid';
 import FormField from '../../../FormField';
 import Text from '../../../Text';
@@ -27,7 +28,7 @@ const DEFAULT_BUTTON_LABELS = {
     remove: 'Remove',
 };
 
-const FieldArrayMapping: FunctionComponent = (props: any) => {
+const FieldArrayMapping: FunctionComponent<UseFieldApiConfig> = (props) => {
     const {
         arrayValidator,
         label,
@@ -61,7 +62,7 @@ const FieldArrayMapping: FunctionComponent = (props: any) => {
             errorText={errorText}
         >
             <FieldArrayBase key={controlId} name={controlId} validate={arrayValidator}>
-                {({ fields }: any) => {
+                {({ fields }) => {
                     const { length, map, push, remove } = fields;
                     return (
                         <Stack spacing="s">
@@ -84,7 +85,7 @@ const FieldArrayMapping: FunctionComponent = (props: any) => {
                                 );
                             })}
                             {!isReadOnly && (
-                                <Button onClick={() => push(defaultItem)} disabled={length >= maxItems}>
+                                <Button onClick={() => push(defaultItem)} disabled={!!length && length >= maxItems}>
                                     {renderedButtonLabels.add}
                                 </Button>
                             )}

diff --git a/src/components/FormRenderer/components/FormTemplate/index.tsx b/src/components/FormRenderer/components/FormTemplate/index.tsx
@@ -14,26 +14,19 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { FunctionComponent, useMemo } from 'react';
-import { useFormApi, componentTypes } from '@data-driven-forms/react-form-renderer';
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
 import Form from '../../../Form';
 import Button from '../../../Button';
 import Inline from '../../../../layouts/Inline';
+import { componentTypes, RenderProps } from '../../types';
 
-export interface FormTemplateProps {
-    formFields: any;
-    schema: any;
-    cancelLabel?: string;
-    submitLabel?: string;
+export interface FormTemplateProps extends RenderProps {
     isSubmitting?: boolean;
 }
 
-const FormTemplate: FunctionComponent<FormTemplateProps> = ({
-    formFields,
-    schema: { cancelLabel = 'Cancel', submitLabel = 'Submit' },
-    schema,
-    isSubmitting,
-}) => {
+const FormTemplate: FunctionComponent<RenderProps> = ({ formFields, schema, isSubmitting }) => {
     const { handleSubmit, onCancel } = useFormApi();
+    const { cancelLabel = 'Cancel', submitLabel = 'Submit', fields, header, description } = schema;
 
     const actions = (
         <Inline spacing="s">
@@ -45,7 +38,7 @@ const FormTemplate: FunctionComponent<FormTemplateProps> = ({
                 loading={isSubmitting}
                 onClick={(event) => {
                     event.preventDefault();
-                    handleSubmit(event);
+                    handleSubmit();
                 }}
             >
                 {submitLabel}
@@ -54,11 +47,11 @@ const FormTemplate: FunctionComponent<FormTemplateProps> = ({
     );
 
     const actionsVisible = useMemo(() => {
-        return !(schema.fields && schema.fields.length > 0 && schema.fields[0].component === componentTypes.WIZARD);
-    }, [schema.fields]);
+        return !(fields.length > 0 && fields[0].component === componentTypes.WIZARD);
+    }, [fields]);
 
     return (
-        <Form header={schema.header} description={schema.description} actions={actionsVisible ? actions : undefined}>
+        <Form header={header} description={description} actions={actionsVisible ? actions : undefined}>
             {formFields}
         </Form>
     );

diff --git a/src/components/FormRenderer/components/MarkdownEditor/index.tsx b/src/components/FormRenderer/components/MarkdownEditor/index.tsx
@@ -14,15 +14,15 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { FunctionComponent } from 'react';
-import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import useFieldApi, { UseFieldApiConfig } from '@data-driven-forms/react-form-renderer/use-field-api';
 import { v4 as uuidv4 } from 'uuid';
 import FormField from '../../../FormField';
 import MarkdownViewer from '../../../MarkdownViewer';
 import Textarea from '../../../Textarea';
 import Grid from '../../../../layouts/Grid';
 import { Box } from '../../../../layouts';
 
-const MarkdownEditorMapping: FunctionComponent = (props: any) => {
+const MarkdownEditorMapping: FunctionComponent<UseFieldApiConfig> = (props) => {
     const {
         label,
         description,
@@ -68,7 +68,7 @@ const MarkdownEditorMapping: FunctionComponent = (props: any) => {
                         placeholder={placeholder}
                         controlId={controlId}
                         disabled={isDisabled}
-                        required={isRequired}
+                        ariaRequired={isRequired}
                         readonly={isReadOnly}
                         invalid={!!errorText}
                         onChange={updateState}

diff --git a/src/components/FormRenderer/components/Radio/index.tsx b/src/components/FormRenderer/components/Radio/index.tsx
@@ -14,7 +14,7 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { FunctionComponent } from 'react';
-import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import useFieldApi, { UseFieldApiConfig } from '@data-driven-forms/react-form-renderer/use-field-api';
 import { v4 as uuidv4 } from 'uuid';
 import { Option } from '../../types';
 import FormField from '../../../FormField';
@@ -34,7 +34,7 @@ const RadioButtonMapping: FunctionComponent<RadioButtonMappingProps> = ({ option
     );
 };
 
-const RadioGroupMapping: FunctionComponent = (props: any) => {
+const RadioGroupMapping: FunctionComponent<UseFieldApiConfig> = (props) => {
     const {
         label,
         description,

diff --git a/src/components/FormRenderer/components/Review/index.tsx b/src/components/FormRenderer/components/Review/index.tsx
@@ -14,7 +14,8 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React from 'react';
-import { useFormApi, useFieldApi } from '@data-driven-forms/react-form-renderer';
+import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
 
 /**
  * Render the Template with the data from the data driven form for the purpose of review

diff --git a/src/components/FormRenderer/components/Select/index.tsx b/src/components/FormRenderer/components/Select/index.tsx
@@ -14,14 +14,14 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { FunctionComponent, memo } from 'react';
-import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import useFieldApi, { UseFieldApiConfig } from '@data-driven-forms/react-form-renderer/use-field-api';
 import { v4 as uuidv4 } from 'uuid';
 import FormField from '../../../FormField';
 import Select from '../../../Select';
 import Multiselect from '../../../Multiselect';
 import Autosuggest from '../../../Autosuggest';
 
-const SelectMapping: FunctionComponent = (props: any) => {
+const SelectMapping: FunctionComponent<UseFieldApiConfig> = (props) => {
     const {
         label,
         description,

diff --git a/src/components/FormRenderer/components/Subform/index.tsx b/src/components/FormRenderer/components/Subform/index.tsx
@@ -14,7 +14,7 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { FunctionComponent, memo, useMemo } from 'react';
-import { useFormApi } from '@data-driven-forms/react-form-renderer';
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
 import FormSection from '../../../FormSection';
 import Box from '../../../../layouts/Box';
 import { ExpandableSectionVariant } from '../../../ExpandableSection';

diff --git a/src/components/FormRenderer/components/Switch/index.tsx b/src/components/FormRenderer/components/Switch/index.tsx
@@ -14,12 +14,12 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { FunctionComponent } from 'react';
-import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import useFieldApi, { UseFieldApiConfig } from '@data-driven-forms/react-form-renderer/use-field-api';
 import { v4 as uuidv4 } from 'uuid';
 import Toggle from '../../../Toggle';
 import FormField from '../../../FormField';
 
-const SwitchMapping: FunctionComponent = (props: any) => {
+const SwitchMapping: FunctionComponent<UseFieldApiConfig> = (props) => {
     const { label, description, isDisabled, initialValue, input, ...rest } = useFieldApi(props);
     const controlId = input.name || uuidv4();
     return (

diff --git a/src/components/FormRenderer/components/Table/index.tsx b/src/components/FormRenderer/components/Table/index.tsx
@@ -14,12 +14,12 @@
   limitations under the License.                                                                              *
  ******************************************************************************************************************** */
 import React, { memo, useCallback, useMemo } from 'react';
-import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import useFieldApi, { UseFieldApiConfig } from '@data-driven-forms/react-form-renderer/use-field-api';
 import { v4 as uuidv4 } from 'uuid';
 import Table from '../../../Table';
 import FormField from '../../../FormField';
 
-const TableMapping = (props: any) => {
+const TableMapping = (props: UseFieldApiConfig) => {
     const {
         label,
         description,
@@ -39,7 +39,7 @@ const TableMapping = (props: any) => {
     const controlId = input.name || uuidv4();
     const errorText = ((validateOnMount || submitFailed || showError) && error) || '';
     const handleSelectionChange = useCallback(
-        (selectedItems: any[]) => {
+        (selectedItems) => {
             input.onChange(selectedItems);
         },
         [input]