Merge pull request #295 from jtomasek/generic-upload-field

Make UploadField more generic
openshift-assisted · Nov 10, 2020 · a509bc8 · a509bc8
2 parents b69cd9e + d532682
commit a509bc8
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 19 deletions.
diff --git a/src/components/clusterConfiguration/DiscoveryImageForm.tsx b/src/components/clusterConfiguration/DiscoveryImageForm.tsx
@@ -160,8 +160,13 @@ const DiscoveryImageForm: React.FC<DiscoveryImageFormProps> = ({
                   name="sshPublicKey"
                   helperText={<SshPublicKeyHelperText />}
                   idPostfix="discovery"
-                  isRequired
                   onBlur={onSshKeyBlur}
+                  dropzoneProps={{
+                    accept: '.pub',
+                    maxSize: 2048,
+                    onDropRejected: ({ setError }) => () => setError('File not supported.'),
+                  }}
+                  isRequired
                 />
                 <ProxyFields />
               </Form>

diff --git a/src/components/ui/formik/TextAreaField.tsx b/src/components/ui/formik/TextAreaField.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useField } from 'formik';
 import { FormGroup, TextArea } from '@patternfly/react-core';
-import { TextAreaProps } from './types';
+import { TextAreaFieldProps } from './types';
 import { getFieldId } from './utils';
 import HelperText from './HelperText';
 
-const TextAreaField: React.FC<TextAreaProps> = ({
+const TextAreaField: React.FC<TextAreaFieldProps> = ({
   label,
   helperText,
   getErrorText,

diff --git a/src/components/ui/formik/UploadField.tsx b/src/components/ui/formik/UploadField.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useField } from 'formik';
 import { FormGroup, FileUpload } from '@patternfly/react-core';
-import { TextAreaProps } from './types';
+import { UploadFieldProps } from './types';
 import { getFieldId } from './utils';
 import HelperText from './HelperText';
 
-const UploadField: React.FC<TextAreaProps> = ({
+const UploadField: React.FC<UploadFieldProps> = ({
   label,
   labelIcon,
   helperText,
@@ -16,11 +16,13 @@ const UploadField: React.FC<TextAreaProps> = ({
   isDisabled,
   name,
   onBlur,
+  allowEdittingUploadedText = true,
+  dropzoneProps,
 }) => {
   const [filename, setFilename] = React.useState<string>();
-  const [isSSHKeyUploading, setSSHKeyUploading] = React.useState(false);
+  const [isFileUploading, setIsFileUploading] = React.useState(false);
 
-  const [field, { touched, error }, { setError, setValue }] = useField(name);
+  const [field, { touched, error }, helpers] = useField(name);
   const fieldId = getFieldId(name, 'input', idPostfix);
   const isValid = !((touched || filename) && error);
 
@@ -58,7 +60,7 @@ const UploadField: React.FC<TextAreaProps> = ({
     >
       {children}
       <FileUpload
-        id={fieldId}
+        id={field.name}
         style={{ resize: 'vertical' }}
         validated={isValid ? 'default' : 'error'}
         isRequired={isRequired}
@@ -68,18 +70,22 @@ const UploadField: React.FC<TextAreaProps> = ({
         filename={filename}
         onChange={(value, filename) => {
           setFilename(filename);
-          setValue(value);
+          helpers.setTouched(true);
+          helpers.setValue(value);
         }}
-        onBlur={onBlur}
-        onReadStarted={() => setSSHKeyUploading(true)}
-        onReadFinished={() => setSSHKeyUploading(false)}
-        isLoading={isSSHKeyUploading}
+        onBlur={(e) => {
+          field.onBlur(e);
+          onBlur && onBlur(e);
+        }}
+        onReadStarted={() => setIsFileUploading(true)}
+        onReadFinished={() => setIsFileUploading(false)}
+        isLoading={isFileUploading}
         disabled={isDisabled}
         dropzoneProps={{
-          accept: '.pub',
-          maxSize: 2048,
-          onDropRejected: () => setError('File not supported.'),
+          ...dropzoneProps,
+          onDropRejected: dropzoneProps?.onDropRejected && dropzoneProps?.onDropRejected(helpers),
         }}
+        allowEditingUploadedText={allowEdittingUploadedText}
       />
     </FormGroup>
   );

diff --git a/src/components/ui/formik/types.ts b/src/components/ui/formik/types.ts
@@ -1,5 +1,6 @@
 import { TextInputTypes, FormSelectOptionProps } from '@patternfly/react-core';
-import { FieldValidator } from 'formik';
+import { FieldValidator, FieldHelperProps } from 'formik';
+import { DropzoneProps, DropFileEventHandler } from 'react-dropzone';
 
 export interface FieldProps {
   name: string;
@@ -41,14 +42,25 @@ export interface InputFieldProps extends FieldProps {
   validate?: FieldValidator;
 }
 
-export interface TextAreaProps extends FieldProps {
+export interface TextAreaFieldProps extends FieldProps {
   getErrorText?: (error: string) => React.ReactNode | undefined;
   placeholder?: string;
   onChange?: (event: React.FormEvent<HTMLTextAreaElement>) => void;
   onBlur?: () => void;
 }
 
-export interface TextAreaSecretProps extends TextAreaProps {
+export interface UploadFieldProps extends FieldProps {
+  getErrorText?: (error: string) => React.ReactNode | undefined;
+  placeholder?: string;
+  onChange?: (event: React.FormEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+  allowEdittingUploadedText?: boolean;
+  dropzoneProps?: Omit<DropzoneProps, 'onDropRejected'> & {
+    onDropRejected?: (helpers: FieldHelperProps<string>) => DropFileEventHandler;
+  };
+}
+
+export interface TextAreaSecretProps extends TextAreaFieldProps {
   isSet?: boolean;
   isEdit: boolean;
   helperTextHidden?: string;