@mantine/dropzone 3.3.1 → 3.3.5

package/README.md

@@ -0,0 +1,21 @@
+# Mantine Dropzone
+
+@mantine/dropzone is a set of components to handle files drag'n'drop at specific area or browser window.
+
+[Read documentation on Mantine website](https://mantine.dev/others/dropzone/)
+
+## Installation
+
+Package depends on [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom), [@mantine/hooks](https://www.npmjs.com/package/@mantine/hooks), [@mantine/core](https://www.npmjs.com/package/@mantine/core).
+
+Install with npm:
+
+```sh
+npm install @mantine/dropzone @mantine/core @mantine/hooks
+```
+
+Install with yarn:
+
+```sh
+yarn add @mantine/dropzone @mantine/core @mantine/hooks
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/dropzone",
   "description": "Dropzone component built with Mantine theme and components",
-  "version": "3.3.1",
+  "version": "3.3.5",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -15,8 +15,8 @@
     "directory": "src/mantine-prism"
   },
   "peerDependencies": {
-    "@mantine/core": "3.3.1",
-    "@mantine/hooks": "3.3.1",
+    "@mantine/core": "3.3.5",
+    "@mantine/hooks": "3.3.5",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },

package/src/Dropzone/Dropzone.story.tsx

@@ -1,44 +0,0 @@
-/* eslint-disable no-console */
-import React, { useRef } from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button } from '@mantine/core';
-import { Dropzone, 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>;
-
-function ManualTrigger() {
-  const openRef = useRef<() => void>(() => {});
-
-  return (
-    <div style={{ padding: 40 }}>
-      <Dropzone onDrop={() => {}} openRef={openRef}>
-        {children}
-      </Dropzone>
-      <Button onClick={() => openRef.current()}>Browse files</Button>
-    </div>
-  );
-}
-
-storiesOf('@mantine/dropzone/Dropzone', module)
-  .add('General usage', () => (
-    <div style={{ padding: 40 }}>
-      <Dropzone onDrop={() => {}}>{children}</Dropzone>
-    </div>
-  ))
-  .add('Manual open trigger', () => <ManualTrigger />)
-  .add('Accept only images', () => (
-    <div style={{ padding: 40 }}>
-      <Dropzone onDrop={console.log} accept={IMAGE_MIME_TYPE}>
-        {children}
-      </Dropzone>
-    </div>
-  ))
-  .add('Loading', () => (
-    <div style={{ padding: 40 }}>
-      <Dropzone onDrop={() => {}} loading>
-        {children}
-      </Dropzone>
-    </div>
-  ));

package/src/Dropzone/Dropzone.styles.ts

@@ -1,62 +0,0 @@
-import { createStyles, MantineNumberSize, getSharedColorScheme } from '@mantine/core';
-
-interface DropzoneStyles {
-  padding: MantineNumberSize;
-  radius: MantineNumberSize;
-}
-
-export default createStyles((theme, { padding, radius }: DropzoneStyles) => {
-  const rejected = getSharedColorScheme({ color: 'red', theme, variant: 'light' });
-  const accepted = getSharedColorScheme({ color: theme.primaryColor, theme, variant: 'light' });
-
-  return {
-    root: {
-      ...theme.fn.fontStyles(),
-      ...theme.fn.focusStyles(),
-      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',
-
-      '&:hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-      },
-    },
-
-    loading: {
-      cursor: 'default',
-
-      '&:hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
-      },
-    },
-
-    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/Dropzone/Dropzone.test.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import {
-  itSupportsClassName,
-  itSupportsMargins,
-  itSupportsOthers,
-  itSupportsStyle,
-  itSupportsRef,
-} from '@mantine/tests';
-import { LoadingOverlay } from '@mantine/core';
-import { Dropzone } from './Dropzone';
-
-const defaultProps = {
-  onDrop: () => {},
-  children: () => null,
-};
-
-describe('@mantine/core/Dropzone', () => {
-  itSupportsClassName(Dropzone, defaultProps);
-  itSupportsMargins(Dropzone, defaultProps);
-  itSupportsOthers(Dropzone, defaultProps);
-  itSupportsStyle(Dropzone, defaultProps);
-  itSupportsRef(Dropzone, defaultProps, HTMLDivElement);
-
-  it('displays LoadingOverlay based on loading prop', () => {
-    const loading = shallow(<Dropzone {...defaultProps} loading />);
-    const notLoading = shallow(<Dropzone {...defaultProps} loading={false} />);
-
-    expect(loading.find(LoadingOverlay).prop('visible')).toBe(true);
-    expect(notLoading.find(LoadingOverlay).prop('visible')).toBe(false);
-  });
-
-  it('assigns open function to given openRef', () => {
-    let ref = null;
-    mount(
-      <Dropzone
-        {...defaultProps}
-        openRef={(openFn) => {
-          ref = openFn;
-        }}
-      />
-    );
-
-    expect(typeof ref).toBe('function');
-  });
-
-  it('has correct displayName', () => {
-    expect(Dropzone.displayName).toEqual('@mantine/dropzone/Dropzone');
-  });
-});

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