@react-magma/dropzone 1.0.0 → 1.0.2

package/src/components/dropzone/Dropzone.tsx

@@ -33,6 +33,7 @@ import {
 import { CloudUploadIcon } from 'react-magma-icons';
 import { Preview } from './Preview';
 import { FilePreview, FileError } from './FilePreview';
+import { transparentize } from 'polished';
 
 export interface OnSendFileProps {
   file: FilePreview;
@@ -47,6 +48,8 @@ type DragState =
   | 'dragReject'
   | 'dragActive'
   | 'default';
+
+// NOTE: These props are manually copied to dropzone.mdx
 export interface DropzoneProps
   extends Omit<FormFieldContainerBaseProps, 'fieldId' | 'errorMessage'> {
   /**
@@ -115,6 +118,9 @@ export interface DropzoneProps
    * @default false
    */
   sendFiles?: boolean;
+  /**
+   * @internal
+   */
   testId?: string;
   /**
    * Show thumbnails for images in lieu of the file icon.
@@ -125,11 +131,11 @@ export interface DropzoneProps
 
 const Container = styled(Flex)<
   DropzoneRootProps &
-  FlexProps & {
-    dragState?: DragState;
-    noDrag?: boolean;
-    isInverse?: boolean;
-  }
+    FlexProps & {
+      dragState?: DragState;
+      noDrag?: boolean;
+      isInverse?: boolean;
+    }
 >`
   flex-direction: column;
   align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};
@@ -142,13 +148,13 @@ const Container = styled(Flex)<
       ? `0px`
       : dragState === 'dragReject' || dragState === 'error'
       ? isInverse
-        ? `2px dashed ${theme.colors.dangerInverse}`
-        : `2px dashed ${theme.colors.danger}`
+        ? `1px dashed ${theme.colors.danger200}`
+        : `1px dashed ${theme.colors.danger}`
       : dragState === 'dragActive'
-      ? `2px dashed ${theme.colors.primary}`
+      ? `1px dashed ${theme.colors.primary}`
       : dragState === 'dragAccept'
-      ? `2px dashed ${theme.colors.success}`
-      : `2px dashed ${theme.colors.neutral05}`};
+      ? `1px dashed ${theme.colors.success}`
+      : `1px dashed ${theme.colors.neutral400}`};
 
   border-style: ${({ dragState = 'default' }) =>
     dragState === 'error' ? 'solid' : 'dashed'};
@@ -156,15 +162,15 @@ const Container = styled(Flex)<
     noDrag
       ? 'transparent'
       : isInverse
-      ? theme.colors.foundation
-      : theme.colors.neutral07};
+      ? transparentize(0.75, theme.colors.neutral900)
+      : theme.colors.neutral200};
   outline: none;
   transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};
 `;
 
 const HelperMessage = styled.span<{ isInverse?: boolean }>`
   color: ${({ theme, isInverse }) =>
-    isInverse ? theme.colors.neutral08 : theme.colors.neutral03};
+    isInverse ? theme.colors.neutral100 : theme.colors.neutral700};
   display: block;
   font-size: 14px;
   margin: -8px 0 16px 0;
@@ -172,287 +178,301 @@ const HelperMessage = styled.span<{ isInverse?: boolean }>`
 
 const Wrapper = styled.div<{ isInverse?: boolean }>`
   color: ${({ theme, isInverse }) =>
-    isInverse ? theme.colors.neutral07 : theme.colors.neutral02};
+    isInverse ? theme.colors.neutral100 : theme.colors.neutral700};
   margin: 0 0 24px 0;
   font-size: ${({ theme }) => theme.typeScale.size02.fontSize};
   line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};
-  font-weight: 600;
+  font-weight: 500;
   padding: ${({ theme }) => theme.spaceScale.spacing01};
 `;
-export const Dropzone = React.forwardRef<
-  HTMLInputElement,
-  DropzoneProps
->((props, ref) => {
-  const {
-    accept,
-    containerStyle,
-    disabled,
-    dropzoneOptions = {
-      multiple: true,
-    },
-    helperMessage,
-    id: defaultId,
-    inputSize,
-    isInverse: isInverseProp,
-    isLabelVisuallyHidden,
-    labelStyle,
-    labelText,
-    maxFiles,
-    minFiles,
-    maxSize,
-    minSize,
-    multiple = true,
-    noDrag = false,
-    onSendFile,
-    onDeleteFile,
-    onRemoveFile,
-    sendFiles = false,
-    testId,
-    thumbnails = true,
-    ...rest
-  } = props;
+export const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(
+  (props, ref) => {
+    const {
+      accept,
+      containerStyle,
+      disabled,
+      dropzoneOptions = {
+        multiple: true,
+      },
+      helperMessage,
+      id: defaultId,
+      inputSize,
+      isInverse: isInverseProp,
+      isLabelVisuallyHidden,
+      labelStyle,
+      labelText,
+      maxFiles,
+      minFiles,
+      maxSize,
+      minSize,
+      multiple = true,
+      noDrag = false,
+      onSendFile,
+      onDeleteFile,
+      onRemoveFile,
+      sendFiles = false,
+      testId,
+      thumbnails = true,
+      ...rest
+    } = props;
 
-  const [files, setFiles] = React.useState<FilePreview[]>([]);
-  const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
+    const [files, setFiles] = React.useState<FilePreview[]>([]);
+    const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
 
-  const isInverse = useIsInverse(isInverseProp);
-  const theme: ThemeInterface = React.useContext(ThemeContext);
-  const i18n: I18nInterface = React.useContext(I18nContext);
-  const id = useGenerateId(defaultId);
+    const isInverse = useIsInverse(isInverseProp);
+    const theme: ThemeInterface = React.useContext(ThemeContext);
+    const i18n: I18nInterface = React.useContext(I18nContext);
+    const id = useGenerateId(defaultId);
 
-  const onDrop = React.useCallback(
-    (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {
-      setFiles((files: FilePreview[]) => [
-        ...files,
-        ...acceptedFiles.map((file: FilePreview) =>
-          Object.assign(file, {
-            preview: URL.createObjectURL(file),
-          })
-        ),
-        ...rejectedFiles.map(
-          ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>
+    const onDrop = React.useCallback(
+      (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {
+        setFiles((files: FilePreview[]) => [
+          ...files,
+          ...acceptedFiles.map((file: FilePreview) =>
             Object.assign(file, {
-              errors,
+              preview: URL.createObjectURL(file),
             })
-        ),
-      ]);
-    },
-    []
-  );
+          ),
+          ...rejectedFiles.map(
+            ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>
+              Object.assign(file, {
+                errors,
+              })
+          ),
+        ]);
+      },
+      []
+    );
 
-  const {
-    getInputProps,
-    getRootProps,
-    isDragAccept,
-    isDragActive,
-    isDragReject,
-    open,
-  } = useDropzone({
-    noClick: true,
-    disabled,
-    multiple,
-    maxSize,
-    minSize,
-    accept,
-    onDrop,
-    noDrag,
-  });
+    const {
+      getInputProps,
+      getRootProps,
+      isDragAccept,
+      isDragActive,
+      isDragReject,
+      open,
+    } = useDropzone({
+      noClick: true,
+      disabled,
+      multiple,
+      maxSize,
+      minSize,
+      accept,
+      onDrop,
+      noDrag,
+    });
 
-  const dragState: DragState = errorMessage
-    ? 'error'
-    : isDragAccept
-    ? 'dragAccept'
-    : isDragReject
-    ? 'dragReject'
-    : isDragActive
-    ? 'dragActive'
-    : 'default';
+    const dragState: DragState = errorMessage
+      ? 'error'
+      : isDragAccept
+      ? 'dragAccept'
+      : isDragReject
+      ? 'dragReject'
+      : isDragActive
+      ? 'dragActive'
+      : 'default';
 
-  const handleRemoveFile = (removedFile: FilePreview) => {
-    setFiles(files => files.filter(file => file !== removedFile));
-    onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(removedFile);
-  };
+    const handleRemoveFile = (removedFile: FilePreview) => {
+      setFiles(files => files.filter(file => file !== removedFile));
+      onRemoveFile &&
+        typeof onRemoveFile === 'function' &&
+        onRemoveFile(removedFile);
+    };
 
-  const handleDeleteFile = (removedFile: FilePreview) => {
-    setFiles(files => files.filter(file => file !== removedFile));
-    onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(removedFile);
-  };
+    const handleDeleteFile = (removedFile: FilePreview) => {
+      setFiles(files => files.filter(file => file !== removedFile));
+      onDeleteFile &&
+        typeof onDeleteFile === 'function' &&
+        onDeleteFile(removedFile);
+    };
 
-  const setProgress = (props: { percent: number; file: FilePreview }) => {
-    setFiles(files =>
-      files.map(file =>
-        file === props.file
-          ? Object.assign(file, {
-              processor: {
-                ...file.processor,
-                percent: `${props.percent}%`,
-                status: 'pending'
-              },
-            })
-          : file
-      )
-    );
-  };
+    const setProgress = (props: { percent: number; file: FilePreview }) => {
+      setFiles(files =>
+        files.map(file =>
+          file === props.file
+            ? Object.assign(file, {
+                processor: {
+                  ...file.processor,
+                  percent: `${props.percent}%`,
+                  status: 'pending',
+                },
+              })
+            : file
+        )
+      );
+    };
 
-  const setFinished = (props: { file: FilePreview }) => {
-    setFiles(files =>
-      files.map(file =>
-        file === props.file
-          ? Object.assign(file, {
-              processor: { ...file.processor, percent: '', status: 'finished' },
-            })
-          : file
-      )
-    );
-  };
+    const setFinished = (props: { file: FilePreview }) => {
+      setFiles(files =>
+        files.map(file =>
+          file === props.file
+            ? Object.assign(file, {
+                processor: {
+                  ...file.processor,
+                  percent: '',
+                  status: 'finished',
+                },
+              })
+            : file
+        )
+      );
+    };
 
-  const setError = (props: { errors: FileError[]; file: FilePreview }) => {
-    setFiles(files =>
-      files.map(file =>
-        file === props.file
-          ? Object.assign(file, {
-              errors: props.errors,
-              processor: { ...file.processor, status: 'error' },
-            })
-          : file
-      )
-    );
-  };
+    const setError = (props: { errors: FileError[]; file: FilePreview }) => {
+      setFiles(files =>
+        files.map(file =>
+          file === props.file
+            ? Object.assign(file, {
+                errors: props.errors,
+                processor: { ...file.processor, status: 'error' },
+              })
+            : file
+        )
+      );
+    };
 
-  const formatError = (
-    code: string | null,
-    constraints: { maxFiles?: number; minFiles?: number }
-  ) => {
-    if (code === null) return null;
-    const error = i18n.dropzone.errors[code];
-    switch (code) {
-      case 'too-many-files':
-        return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;
-      case 'too-few-files':
-        return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;
-      default:
-        return error.message;
-    }
-  };
+    const formatError = (
+      code: string | null,
+      constraints: { maxFiles?: number; minFiles?: number }
+    ) => {
+      if (code === null) return null;
+      const error = i18n.dropzone.errors[code];
+      switch (code) {
+        case 'too-many-files':
+          return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;
+        case 'too-few-files':
+          return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;
+        default:
+          return error.message;
+      }
+    };
 
-  React.useEffect(
-    () => () => {
-      files.forEach(file => file.preview && URL.revokeObjectURL(file.preview));
-    },
-    [files]
-  );
+    React.useEffect(
+      () => () => {
+        files.forEach(
+          file => file.preview && URL.revokeObjectURL(file.preview)
+        );
+      },
+      [files]
+    );
 
-  React.useEffect(() => {
-    const minFileError = minFiles && files.length < minFiles;
-    const maxFileError = maxFiles && files.length > maxFiles;
+    React.useEffect(() => {
+      const minFileError = minFiles && files.length < minFiles;
+      const maxFileError = maxFiles && files.length > maxFiles;
 
-    setErrorMessage(
-      formatError(
-        maxFileError
-          ? 'too-many-files'
-          : minFileError
-          ? 'too-few-files'
-          : null,
-        { minFiles, maxFiles }
-      )
-    );
+      setErrorMessage(
+        formatError(
+          maxFileError
+            ? 'too-many-files'
+            : minFileError
+            ? 'too-few-files'
+            : null,
+          { minFiles, maxFiles }
+        )
+      );
 
-    if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {
-      setFiles((files: FilePreview[]) => {
-        return files.map((file: FilePreview) => {
-          !file.errors && ! file.processor && onSendFile && onSendFile({
-            file,
-            onError: setError,
-            onFinish: setFinished,
-            onProgress: setProgress,
-          })
-          return file;
+      if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {
+        setFiles((files: FilePreview[]) => {
+          return files.map((file: FilePreview) => {
+            !file.errors &&
+              !file.processor &&
+              onSendFile &&
+              onSendFile({
+                file,
+                onError: setError,
+                onFinish: setFinished,
+                onProgress: setProgress,
+              });
+            return file;
+          });
         });
-      });
-    }
-  }, [sendFiles, files.length, onSendFile]);
+      }
+    }, [sendFiles, files.length, onSendFile]);
 
-  return (
-    <InverseContext.Provider value={{ isInverse }}>
-      <FormFieldContainer
-        actionable={false}
-        containerStyle={containerStyle}
-        errorMessage={errorMessage}
-        fieldId={id}
-        inputSize={inputSize}
-        isInverse={isInverse}
-        isLabelVisuallyHidden={isLabelVisuallyHidden}
-        labelStyle={labelStyle}
-        labelText={labelText}
-        messageStyle={{ minHeight: 0 }}
-        data-testid={testId}
-      >
-        <HelperMessage theme={theme} isInverse={isInverse}>
-          {helperMessage}
-        </HelperMessage>
-        <Container
-          behavior={FlexBehavior.container}
-          dragState={dragState}
+    return (
+      <InverseContext.Provider value={{ isInverse }}>
+        <FormFieldContainer
+          actionable={false}
+          containerStyle={containerStyle}
+          errorMessage={errorMessage}
+          fieldId={id}
+          inputSize={inputSize}
           isInverse={isInverse}
-          noDrag={noDrag}
-          theme={theme}
-          {...getRootProps()}
-          {...rest}
-          testId={testId}
-          tabIndex={-1}
+          isLabelVisuallyHidden={isLabelVisuallyHidden}
+          labelStyle={labelStyle}
+          labelText={labelText}
+          messageStyle={{ minHeight: 0 }}
+          data-testid={testId}
         >
-          <input ref={ref} {...getInputProps({id})} />
-          {noDrag ? (
-            <Flex xs behavior={FlexBehavior.item}>
-              <Button
-                color={ButtonColor.primary}
-                disabled={disabled}
-                isInverse={isInverse}
-                onClick={open}
-                style={{ margin: 0 }}
-              >
-                {i18n.dropzone.browseFiles}
-              </Button>
-            </Flex>
-          ) : (
-            <Flex behavior={FlexBehavior.item}>
-              <CloudUploadIcon
-                aria-hidden="true"
-                color={
-                  isInverse ? theme.colors.neutral07 : theme.colors.neutral02
-                }
-                size={48}
-              />
-              <Wrapper isInverse={isInverse} theme={theme}>
-                {i18n.dropzone.dragMessage}
-              </Wrapper>
-              <Button
-                color={ButtonColor.secondary}
-                disabled={disabled}
-                isInverse={isInverse}
-                onClick={open}
-                style={{ margin: 0 }}
-                variant={ButtonVariant.solid}
-              >
-                {i18n.dropzone.browseFiles}
-              </Button>
-            </Flex>
-          )}
-        </Container>
-      </FormFieldContainer>
-      {files.map((file: FilePreview) => (
-        <Preview
-          accept={accept}
-          file={file}
-          isInverse={isInverse}
-          key={file.name}
-          maxSize={maxSize}
-          minSize={minSize}
-          onDeleteFile={handleDeleteFile}
-          onRemoveFile={handleRemoveFile}
-          thumbnails={thumbnails}
-        />
-      ))}
-    </InverseContext.Provider>
-  );
-});
+          <HelperMessage theme={theme} isInverse={isInverse}>
+            {helperMessage}
+          </HelperMessage>
+          <Container
+            behavior={FlexBehavior.container}
+            dragState={dragState}
+            isInverse={isInverse}
+            noDrag={noDrag}
+            theme={theme}
+            {...getRootProps()}
+            {...rest}
+            testId={testId}
+            tabIndex={-1}
+          >
+            <input ref={ref} {...getInputProps({ id })} />
+            {noDrag ? (
+              <Flex xs behavior={FlexBehavior.item}>
+                <Button
+                  color={ButtonColor.primary}
+                  disabled={disabled}
+                  isInverse={isInverse}
+                  onClick={open}
+                  style={{ margin: 0 }}
+                >
+                  {i18n.dropzone.browseFiles}
+                </Button>
+              </Flex>
+            ) : (
+              <Flex behavior={FlexBehavior.item}>
+                <CloudUploadIcon
+                  aria-hidden="true"
+                  color={
+                    isInverse
+                      ? theme.colors.neutral100
+                      : theme.colors.neutral500
+                  }
+                  size={48}
+                />
+                <Wrapper isInverse={isInverse} theme={theme}>
+                  {i18n.dropzone.dragMessage}
+                </Wrapper>
+                <Button
+                  color={ButtonColor.primary}
+                  disabled={disabled}
+                  isInverse={isInverse}
+                  onClick={open}
+                  style={{ margin: 0 }}
+                  variant={ButtonVariant.solid}
+                >
+                  {i18n.dropzone.browseFiles}
+                </Button>
+              </Flex>
+            )}
+          </Container>
+        </FormFieldContainer>
+        {files.map((file: FilePreview) => (
+          <Preview
+            accept={accept}
+            file={file}
+            isInverse={isInverse}
+            key={file.name}
+            maxSize={maxSize}
+            minSize={minSize}
+            onDeleteFile={handleDeleteFile}
+            onRemoveFile={handleRemoveFile}
+            thumbnails={thumbnails}
+          />
+        ))}
+      </InverseContext.Provider>
+    );
+  }
+);