@mantine/dropzone 3.3.1 → 3.3.5

package/src/FullScreenDropzone/FullScreenDropzone.tsx

@@ -1,155 +0,0 @@
-import React, { useState } from 'react';
-import { Portal, Transition, MantineNumberSize, ClassNames, DefaultProps } from '@mantine/core';
-import { useIsomorphicEffect } from '@mantine/hooks';
-import { DropzoneStatus } from '../Dropzone';
-import useStyles from './FullscreenDropzone.styles';
-
-export type FullScreenDropzoneStylesNames = ClassNames<typeof useStyles>;
-
-export interface FullScreenDropzoneProps
-  extends DefaultProps<FullScreenDropzoneStylesNames>,
-    Omit<React.ComponentPropsWithoutRef<'div'>, 'onDrop'> {
-  /** Space between dropzone and viewport edges */
-  offset?: MantineNumberSize;
-
-  /** Overlay z-index */
-  zIndex?: number;
-
-  /** Disable dropzone */
-  disabled?: boolean;
-
-  /** Accepted mime types */
-  accept: string[];
-
-  /** Dropzone padding from theme or number to set padding in px */
-  padding?: MantineNumberSize;
-
-  /** Dropzone radius from theme or number to set border-radius in px */
-  radius?: MantineNumberSize;
-
-  /** Called when files are dropped to document */
-  onDrop(files: File[]): void;
-
-  /** Render children based on dragging state */
-  children(status: DropzoneStatus): React.ReactNode;
-}
-
-function isVisible(event: DragEvent) {
-  for (let i = 0; i < event.dataTransfer.items.length; i += 1) {
-    if (event.dataTransfer.items[i].kind !== 'file') {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-function isValidDrop(event: DragEvent, mime: string[]) {
-  const items = event?.dataTransfer?.items;
-
-  if (mime.includes('*')) {
-    return true;
-  }
-
-  for (let i = 0; i < items?.length; i += 1) {
-    if (!mime.includes(items[i].type)) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-export function FullScreenDropzone({
-  className,
-  style,
-  offset = 'xl',
-  padding = 'md',
-  radius = 'sm',
-  classNames,
-  styles,
-  disabled,
-  accept = ['*'],
-  zIndex = 1000,
-  onDrop,
-  children,
-  sx,
-  ...others
-}: FullScreenDropzoneProps) {
-  const { classes, cx } = useStyles(
-    { offset, padding, radius },
-    { sx, classNames, styles, name: 'FullScreenDropzone' }
-  );
-  const [visible, setVisible] = useState(false);
-  const [error, setError] = useState(false);
-
-  const handleDragOver = (event: DragEvent) => {
-    event.preventDefault();
-    setError(!isValidDrop(event, accept));
-    setVisible(isVisible(event));
-  };
-
-  const handleDragLeave = (event: DragEvent) => {
-    event.preventDefault();
-    setVisible(false);
-  };
-
-  const handleDrop = (event: DragEvent) => {
-    event.stopPropagation();
-    event.preventDefault();
-    setVisible(false);
-    if (isValidDrop(event, accept)) {
-      onDrop(Array.from(event.dataTransfer.files));
-    }
-  };
-
-  useIsomorphicEffect(() => {
-    if (!disabled) {
-      document.addEventListener('dragover', handleDragOver, false);
-      document.addEventListener('dragleave', handleDragLeave, false);
-      document.addEventListener('drop', handleDrop, false);
-
-      return () => {
-        document.removeEventListener('dragover', handleDragOver, false);
-        document.removeEventListener('dragleave', handleDragLeave, false);
-        document.removeEventListener('drop', handleDrop, false);
-      };
-    }
-
-    return undefined;
-  }, [disabled]);
-
-  return (
-    <Portal zIndex={zIndex}>
-      <Transition
-        transition="fade"
-        duration={200}
-        timingFunction="ease"
-        mounted={visible && !disabled}
-      >
-        {(transitionStyles) => (
-          <div
-            style={{ ...style, ...transitionStyles }}
-            className={cx(classes.root, className)}
-            {...others}
-          >
-            <div
-              className={cx(
-                classes.dropzone,
-                {
-                  [classes.active]: visible && !error,
-                  [classes.reject]: error,
-                },
-                className
-              )}
-            >
-              {children({ accepted: visible && !error, rejected: error })}
-            </div>
-          </div>
-        )}
-      </Transition>
-    </Portal>
-  );
-}
-
-FullScreenDropzone.displayName = '@mantine/dropzone/FullScreenDropzone';

package/src/FullScreenDropzone/FullscreenDropzone.styles.ts

@@ -1,62 +0,0 @@
-import { createStyles, MantineNumberSize, getSharedColorScheme } from '@mantine/core';
-
-interface FullScreenDropzoneStyles {
-  offset: MantineNumberSize;
-  padding: MantineNumberSize;
-  radius: MantineNumberSize;
-}
-
-export default createStyles((theme, { offset, padding, radius }: FullScreenDropzoneStyles) => {
-  const spacing = theme.fn.size({ size: offset, sizes: theme.spacing });
-  const rejected = getSharedColorScheme({ color: 'red', theme, variant: 'light' });
-  const accepted = getSharedColorScheme({ color: theme.primaryColor, theme, variant: 'light' });
-
-  return {
-    root: {
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
-      padding: spacing,
-    },
-
-    dropzone: {
-      ...theme.fn.fontStyles(),
-      boxSizing: 'border-box',
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
-      border: `2px dashed ${
-        theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4]
-      }`,
-      padding: theme.fn.size({ size: padding, sizes: theme.spacing }),
-      borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
-      cursor: 'pointer',
-      userSelect: 'none',
-      transition: 'background-color 150ms ease',
-      position: 'relative',
-      height: `calc(100vh - ${spacing * 2}px)`,
-    },
-
-    active: {
-      backgroundColor:
-        theme.colorScheme === 'dark' ? accepted.background : theme.colors[theme.primaryColor][0],
-      borderColor:
-        theme.colorScheme === 'dark' ? accepted.border : theme.colors[theme.primaryColor][4],
-
-      '&:hover': {
-        backgroundColor:
-          theme.colorScheme === 'dark' ? accepted.background : theme.colors[theme.primaryColor][0],
-      },
-    },
-
-    reject: {
-      backgroundColor: theme.colorScheme === 'dark' ? rejected.background : theme.colors.red[0],
-      borderColor: theme.colorScheme === 'dark' ? rejected.border : theme.colors.red[4],
-
-      '&:hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? rejected.background : theme.colors.red[0],
-      },
-    },
-  };
-});

package/src/FullScreenDropzone/demos/fullScreen.tsx

@@ -1,65 +0,0 @@
-/* eslint-disable no-console */
-import React, { useState } from 'react';
-import { Button, useMantineTheme } from '@mantine/core';
-import { dropzoneChildren } from '../../Dropzone/demos/_base';
-import { FullScreenDropzone } from '../FullScreenDropzone';
-import { IMAGE_MIME_TYPE } from '../../mime-types';
-
-const code = `
-import { useState } from 'react';
-import { Button } from '@mantine/core';
-import { FullScreenDropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';
-
-function Demo() {
-  const [disabled, setDisabled] = useState(true);
-
-  return (
-    <>
-      <Button color={disabled ? 'blue' : 'red'} onClick={() => setDisabled((d) => !d)}>
-        {disabled ? 'Enable' : 'Disable'} full screen dropzone
-      </Button>
-
-      <FullScreenDropzone
-        disabled={disabled}
-        accept={IMAGE_MIME_TYPE}
-        onDrop={(files) => {
-          console.log(files);
-          setDisabled(true);
-        }}
-      >
-        {/* See dropzone children in previous demo */}
-      </FullScreenDropzone>
-    </>
-  );
-}
-`;
-
-function Demo() {
-  const [disabled, setDisabled] = useState(true);
-  const theme = useMantineTheme();
-
-  return (
-    <>
-      <Button color={disabled ? 'blue' : 'red'} onClick={() => setDisabled((d) => !d)}>
-        {disabled ? 'Enable' : 'Disable'} full screen dropzone
-      </Button>
-
-      <FullScreenDropzone
-        disabled={disabled}
-        accept={IMAGE_MIME_TYPE}
-        onDrop={(files) => {
-          console.log(files);
-          setDisabled(true);
-        }}
-      >
-        {(status) => dropzoneChildren(status, theme)}
-      </FullScreenDropzone>
-    </>
-  );
-}
-
-export const fullScreen: MantineDemo = {
-  type: 'demo',
-  component: Demo,
-  code,
-};

package/src/FullScreenDropzone/demos/index.ts

@@ -1 +0,0 @@
-export { fullScreen } from './fullScreen';

package/src/FullScreenDropzone/index.ts

@@ -1,2 +0,0 @@
-export { FullScreenDropzone } from './FullScreenDropzone';
-export type { FullScreenDropzoneProps, FullScreenDropzoneStylesNames } from './FullScreenDropzone';

package/src/demos.ts

@@ -1,2 +0,0 @@
-export * from './Dropzone/demos';
-export * from './FullScreenDropzone/demos';

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from './Dropzone';
-export * from './FullScreenDropzone';
-export * from './mime-types';

package/src/mime-types.ts

@@ -1,33 +0,0 @@
-export const MIME_TYPES = {
-  // Images
-  png: 'image/png',
-  gif: 'image/gif',
-  jpeg: 'image/jpeg',
-  svg: 'image/svg+xml',
-  webp: 'image/webp',
-
-  // Documents
-  mp4: 'video/mp4',
-  zip: 'application/zip',
-  csv: 'text/csv',
-  pdf: 'application/pdf',
-  doc: 'application/msword',
-  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-  xls: 'application/vnd.ms-excel',
-  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-  ppt: 'application/vnd.ms-powerpoint',
-  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-} as const;
-
-export const IMAGE_MIME_TYPE = [
-  MIME_TYPES.png,
-  MIME_TYPES.gif,
-  MIME_TYPES.jpeg,
-  MIME_TYPES.svg,
-  MIME_TYPES.webp,
-];
-
-export const PDF_MINE_TYPE = [MIME_TYPES.pdf];
-export const MS_WORD_MIME_TYPE = [MIME_TYPES.doc, MIME_TYPES.docx];
-export const MS_EXCEL_MIME_TYPE = [MIME_TYPES.xls, MIME_TYPES.xlsx];
-export const MS_POWERPOINT_MIME_TYPE = [MIME_TYPES.ppt, MIME_TYPES.pptx];

package/src/styles.api.ts

@@ -1,20 +0,0 @@
-import type { DropzoneStylesNames } from './Dropzone';
-import type { FullScreenDropzoneStylesNames } from './FullScreenDropzone';
-
-export const Dropzone: Record<DropzoneStylesNames, string> = {
-  root: 'Root element',
-  loading: 'Root element loading state modifier, controlled by loading prop',
-  active:
-    'Active state modifier, style is added to root element when valid files are dragged over dropzone',
-  reject:
-    'Active state modifier, style is added to root element when invalid files are dragged over dropzone',
-};
-
-export const FullScreenDropzone: Record<FullScreenDropzoneStylesNames, string> = {
-  root: 'Root element',
-  dropzone: 'Dropzone itself',
-  active:
-    'Active state modifier, style is added to dropzone when valid files are dragged over browser window',
-  reject:
-    'Active state modifier, style is added to dropzone when invalid files are dragged over browser window',
-};

package/tsconfig.build.json

@@ -1,34 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": ["./src", "./types", "../../configuration/types"],
-  "exclude": [
-    "./lib",
-    "./esm",
-    "./cjs",
-    "**/*.story.tsx",
-    "**/*.test.tsx",
-    "**/*.test.ts",
-    "**/styles.api.ts",
-    "src/components/*/demos/*",
-    "src/demos.ts"
-  ],
-  "compilerOptions": {
-    "rootDir": "src",
-    "baseUrl": ".",
-    "outDir": "lib",
-    "declaration": true,
-    "declarationMap": true,
-    "declarationDir": "lib",
-    "composite": true,
-    "paths": {
-      "@mantine/core": ["../mantine-core/src"],
-      "@mantine/hooks": ["../mantine-hooks/src"],
-      "@mantine/tests": ["../mantine-tests/src"]
-    }
-  },
-  "references": [
-    { "path": "../mantine-core" },
-    { "path": "../mantine-hooks" },
-    { "path": "../mantine-tests" }
-  ]
-}