@mantine/dropzone 3.3.2 → 3.4.0

package/src/Dropzone/Dropzone.tsx

@@ -1,113 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useDropzone } from 'react-dropzone';
-import {
-  DefaultProps,
-  ClassNames,
-  MantineNumberSize,
-  useExtractedMargins,
-  LoadingOverlay,
-} from '@mantine/core';
-import { assignRef } from '@mantine/hooks';
-import useStyles from './Dropzone.styles';
-
-export type DropzoneStylesNames = ClassNames<typeof useStyles>;
-
-export interface DropzoneStatus {
-  accepted: boolean;
-  rejected: boolean;
-}
-
-export interface DropzoneProps extends DefaultProps<DropzoneStylesNames> {
-  /** Padding from theme.spacing, or number to set padding in px */
-  padding?: MantineNumberSize;
-
-  /** Border radius from theme.radius or number to set border-radius in px */
-  radius?: MantineNumberSize;
-
-  /** Render children based on dragging state */
-  children(status: DropzoneStatus): React.ReactNode;
-
-  /** Disable files capturing */
-  disabled?: boolean;
-
-  /** Called when files are dropped into dropzone */
-  onDrop(files: File[]): void;
-
-  /** Display loading overlay over dropzone */
-  loading?: boolean;
-
-  /** File types to accept  */
-  accept?: string[];
-
-  /** Get open function as ref */
-  openRef?: React.ForwardedRef<() => void>;
-
-  /** Allow selection of multiple files */
-  multiple?: boolean;
-
-  /** Set maximum file size in bytes */
-  maxSize?: number;
-}
-
-export const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(
-  (
-    {
-      className,
-      padding = 'md',
-      radius = 'sm',
-      disabled,
-      classNames,
-      style,
-      styles,
-      loading = false,
-      multiple = true,
-      maxSize = Infinity,
-      accept,
-      children,
-      onDrop,
-      openRef,
-      sx,
-      ...others
-    }: DropzoneProps,
-    ref
-  ) => {
-    const { classes, cx } = useStyles(
-      { radius, padding },
-      { sx, classNames, styles, name: 'Dropzone' }
-    );
-    const { mergedStyles, rest } = useExtractedMargins({ others, style });
-
-    const { getRootProps, getInputProps, isDragAccept, isDragReject, open } = useDropzone({
-      onDropAccepted: (files) => onDrop(files),
-      disabled: disabled || loading,
-      accept,
-      multiple,
-      maxSize,
-    });
-
-    assignRef(openRef, open);
-
-    return (
-      <div
-        {...rest}
-        {...getRootProps({ ref })}
-        style={mergedStyles}
-        className={cx(
-          classes.root,
-          {
-            [classes.active]: isDragAccept,
-            [classes.reject]: isDragReject,
-            [classes.loading]: loading,
-          },
-          className
-        )}
-      >
-        <LoadingOverlay visible={loading} radius={radius} />
-        <input {...getInputProps()} />
-        {children({ accepted: isDragAccept, rejected: isDragReject })}
-      </div>
-    );
-  }
-);
-
-Dropzone.displayName = '@mantine/dropzone/Dropzone';

package/src/Dropzone/demos/_base.tsx

@@ -1,58 +0,0 @@
-/* eslint-disable no-console */
-import React from 'react';
-import { Group, Text, useMantineTheme, MantineTheme } from '@mantine/core';
-import { ImageIcon, UploadIcon, CrossCircledIcon } from '@modulz/radix-icons';
-import { Dropzone, DropzoneStatus, DropzoneProps } from '../Dropzone';
-import { IMAGE_MIME_TYPE } from '../../mime-types';
-
-function getIconColor(status: DropzoneStatus, theme: MantineTheme) {
-  return status.accepted
-    ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
-    : status.rejected
-    ? theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]
-    : theme.colorScheme === 'dark'
-    ? theme.colors.dark[0]
-    : theme.colors.gray[7];
-}
-
-function ImageUploadIcon({
-  status,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof ImageIcon> & { status: DropzoneStatus }) {
-  if (status.accepted) {
-    return <UploadIcon {...props} />;
-  }
-
-  if (status.rejected) {
-    return <CrossCircledIcon {...props} />;
-  }
-
-  return <ImageIcon {...props} />;
-}
-
-export const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) => (
-  <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
-    <ImageUploadIcon
-      status={status}
-      style={{ width: 80, height: 80, color: getIconColor(status, theme) }}
-    />
-
-    <div>
-      <Text size="xl" inline>
-        Drag images here or click to select files
-      </Text>
-      <Text size="sm" color="dimmed" inline mt={7}>
-        Attach as many files as you like, each file should not exceed 5mb
-      </Text>
-    </div>
-  </Group>
-);
-
-export function BaseDemo(props: Partial<DropzoneProps>) {
-  const theme = useMantineTheme();
-  return (
-    <Dropzone onDrop={console.log} maxSize={3 * 1024 ** 2} accept={IMAGE_MIME_TYPE} {...props}>
-      {(status) => dropzoneChildren(status, theme)}
-    </Dropzone>
-  );
-}

package/src/Dropzone/demos/disabled.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { createStyles } from '@mantine/core';
-import { BaseDemo } from './_base';
-
-const code = `
-import { createStyles } from '@mantine/core';
-import { Dropzone } from '@mantine/dropzone';
-
-// Add your own disabled styles
-const useStyles = createStyles((theme) => ({
-  disabled: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
-    cursor: 'not-allowed',
-
-    '& *': {
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
-    },
-  },
-}));
-
-function Demo() {
-  const { classes } = useStyles();
-
-  return (
-    <Dropzone disabled className={classes.disabled}>
-      {/* children, see previous demo */}
-    </Dropzone>
-  );
-}
-`;
-
-const useStyles = createStyles((theme) => ({
-  disabled: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
-    cursor: 'not-allowed',
-
-    '& *': {
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
-    },
-  },
-}));
-
-function Demo() {
-  const { classes } = useStyles();
-  return <BaseDemo disabled className={classes.disabled} />;
-}
-
-export const disabled: MantineDemo = {
-  type: 'demo',
-  component: Demo,
-  code,
-};

package/src/Dropzone/demos/index.ts

@@ -1,4 +0,0 @@
-export { usage } from './usage';
-export { loading } from './loading';
-export { disabled } from './disabled';
-export { manual } from './manual';

package/src/Dropzone/demos/loading.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { BaseDemo } from './_base';
-
-const code = `
-<Dropzone loading>
-  {/* children */}
-</Dropzone>
-`;
-
-function Demo() {
-  return <BaseDemo loading />;
-}
-
-export const loading: MantineDemo = {
-  type: 'demo',
-  component: Demo,
-  code,
-};

package/src/Dropzone/demos/manual.tsx

@@ -1,45 +0,0 @@
-import React, { useRef } from 'react';
-import { Button, Group } from '@mantine/core';
-import { BaseDemo } from './_base';
-
-const code = `
-import { useRef } from 'react';
-import { Button, Group } from '@mantine/core';
-import { Dropzone } from '@mantine/dropzone';
-
-function Demo() {
-  const openRef = useRef();
-  return (
-    <>
-      <Dropzone openRef={openRef}>
-        {/* children */}
-      </Dropzone>
-
-      <Group position="center" mt="md">
-        <Button onClick={() => openRef.current()}>Select files</Button>
-      </Group>
-    </>
-  );
-}
-
-
-`;
-
-function Demo() {
-  const openRef = useRef<() => void>();
-
-  return (
-    <>
-      <BaseDemo openRef={openRef} />
-      <Group position="center" mt="md">
-        <Button onClick={() => openRef.current()}>Select files</Button>
-      </Group>
-    </>
-  );
-}
-
-export const manual: MantineDemo = {
-  type: 'demo',
-  component: Demo,
-  code,
-};

package/src/Dropzone/demos/usage.tsx

@@ -1,62 +0,0 @@
-/* eslint-disable no-console */
-import { BaseDemo } from './_base';
-
-const code = `
-import { Group, Text, useMantineTheme } from '@mantine/core';
-import { ImageIcon, UploadIcon, CrossCircledIcon } from '@modulz/radix-icons';
-
-function ImageUploadIcon({ status, ...props }) {
-  if (status.accepted) {
-    return <UploadIcon {...props} />;
-  }
-
-  if (status.rejected) {
-    return <CrossCircledIcon {...props} />;
-  }
-
-  return <ImageIcon {...props} />;
-}
-
-function getIconColor(status, theme) {
-  return status.accepted
-    ? theme.colors[theme.primaryColor][6]
-    : status.rejected
-    ? theme.colors.red[6]
-    : theme.colorScheme === 'dark'
-    ? theme.colors.dark[0]
-    : theme.black;
-}
-
-function Demo() {
-  const theme = useMantineTheme();
-
-  return (
-    // See results in console after dropping files to Dropzone
-    <Dropzone onDrop={console.log} maxSize={3 * 1024 ** 2} accept={IMAGE_MIME_TYPE}>
-      {(status) => (
-        <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
-          <ImageUploadIcon
-            status={status}
-            style={{ width: 80, height: 80, color: getIconColor(status, theme) }}
-          />
-
-          <div>
-            <Text size="xl" inline>
-              Drag images here or click to select files
-            </Text>
-            <Text size="sm" color="dimmed" inline mt={7}>
-              Attach as many files as you like, each file should not exceed 5mb
-            </Text>
-          </div>
-        </Group>
-      )}
-    </Dropzone>
-  );
-}
-`;
-
-export const usage: MantineDemo = {
-  type: 'demo',
-  component: BaseDemo,
-  code,
-};

package/src/Dropzone/index.ts

@@ -1,2 +0,0 @@
-export { Dropzone } from './Dropzone';
-export type { DropzoneStylesNames, DropzoneProps, DropzoneStatus } from './Dropzone';

package/src/FullScreenDropzone/FullScreenDropzone.story.tsx

@@ -1,37 +0,0 @@
-/* eslint-disable no-console */
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { FullScreenDropzone } from './FullScreenDropzone';
-import { DropzoneStatus } from '../Dropzone';
-import { IMAGE_MIME_TYPE } from '../mime-types';
-
-const children = (status: DropzoneStatus) =>
-  status.accepted ? <div>Drop files here</div> : <div>Drag and drop files here</div>;
-
-storiesOf('@mantine/dropzone/FullScreenDropzone', module).add('General usage', () => (
-  <div>
-    <p>
-      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium dolores expedita
-      accusamus aperiam dolorem veniam maxime alias distinctio ullam magnam aspernatur nam delectus,
-      dolorum sapiente ea aliquid sunt, molestias quam.
-    </p>
-    <p>
-      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium dolores expedita
-      accusamus aperiam dolorem veniam maxime alias distinctio ullam magnam aspernatur nam delectus,
-      dolorum sapiente ea aliquid sunt, molestias quam.
-    </p>
-    <p>
-      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium dolores expedita
-      accusamus aperiam dolorem veniam maxime alias distinctio ullam magnam aspernatur nam delectus,
-      dolorum sapiente ea aliquid sunt, molestias quam.
-    </p>
-    <p>
-      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium dolores expedita
-      accusamus aperiam dolorem veniam maxime alias distinctio ullam magnam aspernatur nam delectus,
-      dolorum sapiente ea aliquid sunt, molestias quam.
-    </p>
-    <FullScreenDropzone onDrop={console.log} accept={IMAGE_MIME_TYPE}>
-      {children}
-    </FullScreenDropzone>
-  </div>
-));

package/src/FullScreenDropzone/FullScreenDropzone.test.tsx

@@ -1,7 +0,0 @@
-import { FullScreenDropzone } from './FullScreenDropzone';
-
-describe('@mantine/dropzone/FullScreenDropzone', () => {
-  it('has correct displayName', () => {
-    expect(FullScreenDropzone.displayName).toEqual('@mantine/dropzone/FullScreenDropzone');
-  });
-});

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';