Merge branch 'feat/form-onchange' of github.com:payloadcms/payload

payloadcms · Nov 30, 2021 · 1d25c7f · 1d25c7f
2 parents 6a33abb + 925a33e
commit 1d25c7f
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 14 deletions.
diff --git a/demo/collections/Images.ts b/demo/collections/Images.ts
@@ -0,0 +1,26 @@
+import { CollectionConfig } from '../../src/collections/config/types';
+
+const Images: CollectionConfig = {
+  slug: 'images',
+  labels: {
+    singular: 'Image',
+    plural: 'Images',
+  },
+  fields: [
+    {
+      name: 'upload1',
+      label: 'Upload 1',
+      type: 'upload',
+      relationTo: 'media',
+    },
+    {
+      name: 'upload2',
+      label: 'Upload 2',
+      type: 'upload',
+      relationTo: 'media',
+    },
+  ],
+  timestamps: true,
+};
+
+export default Images;
diff --git a/src/admin/components/forms/field-types/Select/Input.tsx b/src/admin/components/forms/field-types/Select/Input.tsx
@@ -11,10 +11,10 @@ import { Value as ReactSelectValue } from '../../../elements/ReactSelect/types';
 import './index.scss';
 
 export type SelectInputProps = Omit<SelectField, 'type' | 'value' | 'options'> & {
-  showError: boolean
+  showError?: boolean
   errorMessage?: string
   readOnly?: boolean
-  path?: string
+  path: string
   required?: boolean
   value?: string | string[]
   description?: Description

diff --git a/src/admin/components/forms/field-types/Select/index.tsx b/src/admin/components/forms/field-types/Select/index.tsx
@@ -78,6 +78,7 @@ const Select: React.FC<Props> = (props) => {
 
   return (
     <SelectInput
+      path={path}
       onChange={onChange}
       value={value as string | string[]}
       name={name}

diff --git a/src/admin/components/forms/field-types/Text/Input.tsx b/src/admin/components/forms/field-types/Text/Input.tsx
@@ -9,10 +9,10 @@ import { Description } from '../../FieldDescription/types';
 import './index.scss';
 
 export type TextInputProps = Omit<TextField, 'type'> & {
-  showError: boolean
+  showError?: boolean
   errorMessage?: string
   readOnly?: boolean
-  path?: string
+  path: string
   required?: boolean
   value?: string
   description?: Description

diff --git a/src/admin/components/forms/field-types/Text/index.tsx b/src/admin/components/forms/field-types/Text/index.tsx
@@ -40,6 +40,7 @@ const Text: React.FC<Props> = (props) => {
 
   return (
     <TextInput
+      path={path}
       name={name}
       onChange={(e) => {
         setValue(e.target.value);

diff --git a/src/admin/components/forms/field-types/Textarea/Input.tsx b/src/admin/components/forms/field-types/Textarea/Input.tsx
@@ -8,10 +8,10 @@ import { Description } from '../../FieldDescription/types';
 import './index.scss';
 
 export type TextAreaInputProps = Omit<TextareaField, 'type'> & {
-  showError: boolean
+  showError?: boolean
   errorMessage?: string
   readOnly?: boolean
-  path?: string
+  path: string
   required?: boolean
   value?: string
   description?: Description

diff --git a/src/admin/components/forms/field-types/Textarea/index.tsx b/src/admin/components/forms/field-types/Textarea/index.tsx
@@ -48,6 +48,7 @@ const Textarea: React.FC<Props> = (props) => {
 
   return (
     <TextareaInput
+      path={path}
       name={name}
       onChange={(e) => {
         setValue(e.target.value);

diff --git a/src/admin/components/forms/field-types/Upload/Input.tsx b/src/admin/components/forms/field-types/Upload/Input.tsx
@@ -17,10 +17,10 @@ import './index.scss';
 const baseClass = 'upload';
 
 export type UploadInputProps = Omit<UploadField, 'type'> & {
-  showError: boolean
+  showError?: boolean
   errorMessage?: string
   readOnly?: boolean
-  path?: string
+  path: string
   required?: boolean
   value?: string
   description?: Description
@@ -73,7 +73,6 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
     if (typeof value === 'string' && value !== '') {
       const fetchFile = async () => {
         const response = await fetch(`${serverURL}${api}/${relationTo}/${value}`);
-
         if (response.ok) {
           const json = await response.json();
           setFile(json);

diff --git a/src/admin/components/forms/field-types/Upload/index.tsx b/src/admin/components/forms/field-types/Upload/index.tsx
@@ -18,7 +18,7 @@ const Upload: React.FC<Props> = (props) => {
   } = useConfig();
 
   const {
-    path: pathFromProps,
+    path,
     name,
     required,
     admin: {
@@ -36,14 +36,12 @@ const Upload: React.FC<Props> = (props) => {
 
   const collection = collections.find((coll) => coll.slug === relationTo);
 
-  const path = pathFromProps || name;
-
   const memoizedValidate = useCallback((value) => {
     const validationResult = validate(value, { required });
     return validationResult;
   }, [validate, required]);
 
-  const fieldType = useField({
+  const field = useField({
     path,
     validate: memoizedValidate,
     condition,
@@ -54,7 +52,7 @@ const Upload: React.FC<Props> = (props) => {
     showError,
     setValue,
     errorMessage,
-  } = fieldType;
+  } = field;
 
   const onChange = useCallback((incomingValue) => {
     const incomingID = incomingValue?.id || incomingValue;
@@ -66,6 +64,7 @@ const Upload: React.FC<Props> = (props) => {
   if (collection.upload) {
     return (
       <UploadInput
+        path={path}
         value={value as string}
         onChange={onChange}
         description={description}