react-dropzone 5.0.0 → 5.1.1

package/styleguide.config.js

@@ -1,10 +1,13 @@
+/* eslint import/no-extraneous-dependencies: 0 */
 const path = require('path')
+const { createConfig, babel } = require('webpack-blocks')
 
 module.exports = {
   title: 'react-dropzone',
   styleguideDir: path.join(__dirname, 'styleguide'),
-  showCode: true,
-  showUsage: true,
+  webpackConfig: createConfig([babel()]),
+  exampleMode: 'expand',
+  usageMode: 'expand',
   showSidebar: false,
   serverPort: 8080,
   sections: [

package/testSetup.js

@@ -1,8 +1,14 @@
 /* eslint prefer-template: 0 */
+/* eslint node/no-unpublished-require: 0 */
+
+const Enzyme = require('enzyme')
+const Adapter = require('enzyme-adapter-react-16')
 require('jest-enzyme')
 
+Enzyme.configure({ adapter: new Adapter() })
+
 global.window.URL = {
   createObjectURL: function createObjectURL(arg) {
-    return 'data://' + arg.name
+    return `data://${arg.name}`
   }
 }

package/tslint.json

@@ -0,0 +1,101 @@
+{
+  "jsRules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "no-duplicate-variable": true,
+    "no-eval": true,
+    "no-trailing-whitespace": true,
+    "no-unsafe-finally": true,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "double"
+    ],
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "variable-name": [
+      true,
+      "ban-keywords"
+    ],
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ]
+  },
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "no-eval": true,
+    "no-internal-module": true,
+    "no-trailing-whitespace": true,
+    "no-unsafe-finally": true,
+    "no-var-keyword": true,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "double"
+    ],
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": [
+      true,
+      "ban-keywords"
+    ],
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ]
+  }
+}

package/typings/react-dropzone.d.ts

@@ -0,0 +1,60 @@
+import {
+  CSSProperties,
+  Component,
+  DragEvent,
+  InputHTMLAttributes
+} from "react";
+
+export interface FileWithPreview extends File {
+  preview?: string;
+}
+
+export type DropFileEventHandler = (
+  acceptedOrRejected: FileWithPreview[],
+  event: DragEvent<HTMLDivElement>
+) => void;
+export type DropFilesEventHandler = (
+  accepted: FileWithPreview[],
+  rejected: FileWithPreview[],
+  event: DragEvent<HTMLDivElement>
+) => void;
+
+type DropzoneRenderArgs = {
+  draggedFiles: FileWithPreview[];
+  acceptedFiles: FileWithPreview[];
+  rejectedFiles: FileWithPreview[];
+  isDragActive: boolean;
+  isDragAccept: boolean;
+  isDragReject: boolean;
+};
+
+export type DropzoneRenderFunction = (x: DropzoneRenderArgs) => JSX.Element;
+
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export type DropzoneProps = Omit<React.HTMLProps<HTMLDivElement>, "onDrop"> & {
+  disableClick?: boolean;
+  disabled?: boolean;
+  disablePreview?: boolean;
+  preventDropOnDocument?: boolean;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+  maxSize?: number;
+  minSize?: number;
+  activeClassName?: string;
+  acceptClassName?: string;
+  rejectClassName?: string;
+  disabledClassName?: string;
+  activeStyle?: CSSProperties;
+  acceptStyle?: CSSProperties;
+  rejectStyle?: CSSProperties;
+  disabledStyle?: CSSProperties;
+  onDrop?: DropFilesEventHandler;
+  onDropAccepted?: DropFileEventHandler;
+  onDropRejected?: DropFileEventHandler;
+  onFileDialogCancel?: () => void;
+  children: React.ReactNode | DropzoneRenderFunction;
+};
+
+export default class Dropzone extends Component<DropzoneProps> {
+  open: () => void;
+}

package/typings/tests/accept.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+
+import Dropzone from "../../";
+
+class Accept extends React.Component {
+  state = {
+    accepted: [],
+    rejected: []
+  };
+
+  render() {
+    return (
+      <section>
+        <div className="dropzone">
+          <Dropzone
+            accept="image/jpeg, image/png"
+            onDrop={(accepted, rejected) => {
+              this.setState({ accepted, rejected });
+            }}
+          >
+            <p>
+              Try dropping some files here, or click to select files to upload.
+            </p>
+            <p>Only *.jpeg and *.png images will be accepted</p>
+          </Dropzone>
+        </div>
+        <aside>
+          <h2>Accepted files</h2>
+          <ul>
+            {this.state.accepted.map(f => (
+              <li key={f.name}>
+                {f.name} - {f.size} bytes
+              </li>
+            ))}
+          </ul>
+          <h2>Rejected files</h2>
+          <ul>
+            {this.state.rejected.map(f => (
+              <li key={f.name}>
+                {f.name} - {f.size} bytes
+              </li>
+            ))}
+          </ul>
+        </aside>
+      </section>
+    );
+  }
+}
+
+const a = (
+  <Dropzone accept=".jpeg,.png">
+    {({ isDragActive, isDragReject }) => {
+      if (isDragActive) {
+        return "All files will be accepted";
+      }
+      if (isDragReject) {
+        return "Some files will be rejected";
+      }
+      return "Dropping some files here...";
+    }}
+  </Dropzone>
+);
+
+const b = (
+  <Dropzone accept="image/jpeg, image/png">
+    {({ isDragActive, isDragReject }) => {
+      if (isDragActive) {
+        return "All files will be accepted";
+      }
+      if (isDragReject) {
+        return "Some files will be rejected";
+      }
+      return "Dropping some files here...";
+    }}
+  </Dropzone>
+);

package/typings/tests/all.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+
+import Dropzone from "../../";
+
+class Test extends React.Component {
+  dz: Dropzone;
+
+  open() {
+    this.dz.open();
+  }
+
+  handleFileDialog = () => {};
+
+  render() {
+    return (
+      <div>
+        <Dropzone
+          ref={node => {
+            this.dz = node;
+          }}
+          onClick={event => console.log(event)}
+          onDrop={(acceptedFiles, rejectedFiles, event) =>
+            console.log(acceptedFiles, rejectedFiles, event)}
+          onDragStart={event => console.log(event)}
+          onDragEnter={event => console.log(event)}
+          onDragOver={event => console.log(event)}
+          onDragLeave={event => console.log(event)}
+          onDropAccepted={event => console.log(event)}
+          onDropRejected={event => console.log(event)}
+          onFileDialogCancel={() => console.log("abc")}
+          style={{ borderStyle: "dashed" }}
+          activeStyle={{ borderStyle: "dotted" }}
+          acceptStyle={{ borderStyle: "dotted" }}
+          rejectStyle={{ borderStyle: "dotted" }}
+          disabledStyle={{ borderStyle: "dotted" }}
+          className="regular"
+          activeClassName="active"
+          acceptClassName="accept"
+          rejectClassName="reject"
+          disabledClassName="disabled"
+          minSize={2000}
+          maxSize={Infinity}
+          disablePreview
+          disableClick
+          disabled
+          multiple={false}
+          accept="*.png"
+          name="dropzone"
+          inputProps={{ id: "dropzone" }}
+        >
+          Hi
+        </Dropzone>
+      </div>
+    );
+  }
+}
+
+export default Test;

package/typings/tests/basic.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+
+import Dropzone from "../../";
+
+class Basic extends React.Component {
+  state = { files: [] };
+
+  onDrop(files) {
+    this.setState({
+      files
+    });
+  }
+
+  render() {
+    return (
+      <section>
+        <div className="dropzone">
+          <Dropzone onDrop={this.onDrop.bind(this)}>
+            <p>
+              Try dropping some files here, or click to select files to upload.
+            </p>
+          </Dropzone>
+        </div>
+        <aside>
+          <h2>Dropped files</h2>
+          <ul>
+            {this.state.files.map(f => (
+              <li key={f.name}>
+                {f.name} - {f.size} bytes
+              </li>
+            ))}
+          </ul>
+        </aside>
+      </section>
+    );
+  }
+}
+
+class Basic2 extends React.Component {
+  state = { disabled: true, files: [] };
+
+  onDrop(files) {
+    this.setState({
+      files
+    });
+  }
+
+  render() {
+    return (
+      <section>
+        <aside>
+          <button
+            type="button"
+            onClick={() => this.setState({ disabled: !this.state.disabled })}
+          >
+            Toggle disabled
+          </button>
+        </aside>
+        <div className="dropzone">
+          <Dropzone
+            onDrop={this.onDrop.bind(this)}
+            disabled={this.state.disabled}
+          >
+            <p>
+              Try dropping some files here, or click to select files to upload.
+            </p>
+          </Dropzone>
+        </div>
+        <aside>
+          <h2>Dropped files</h2>
+          <ul>
+            {this.state.files.map(f => (
+              <li>
+                {f.name} - {f.size} bytes
+              </li>
+            ))}
+          </ul>
+        </aside>
+      </section>
+    );
+  }
+}

package/typings/tests/events.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import Dropzone from "../../";
+
+class Events extends React.Component {
+  render() {
+    return (
+      <section>
+        <div className="dropzone">
+          <Dropzone
+            onDrop={(acceptedFiles, rejectedFiles, event) =>
+              console.log(acceptedFiles, rejectedFiles, event)}
+            onDragStart={event => console.log(event)}
+            onDragEnter={event => console.log(event)}
+            onDragOver={event => console.log(event)}
+            onDragLeave={event => console.log(event)}
+          >
+            <p>
+              Try dropping some files here, or click to select files to upload.
+            </p>
+          </Dropzone>
+        </div>
+      </section>
+    );
+  }
+}

package/typings/tests/file-dialog.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import Dropzone from "../../";
+
+let dropzoneRef;
+
+const x = (
+  <div>
+    <Dropzone
+      ref={node => {
+        dropzoneRef = node;
+      }}
+      onDrop={(accepted, rejected) => {
+        alert(accepted);
+      }}
+    >
+      <p>Drop files here.</p>
+    </Dropzone>
+    <button
+      type="button"
+      onClick={() => {
+        dropzoneRef.open();
+      }}
+    >
+      Open File Dialog
+    </button>
+  </div>
+);

package/typings/tests/fullscreen.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+
+import Dropzone from "../../";
+
+class FullScreen extends React.Component {
+  state = {
+    accept: "",
+    files: [],
+    dropzoneActive: false
+  };
+
+  onDragEnter() {
+    this.setState({
+      dropzoneActive: true
+    });
+  }
+
+  onDragLeave() {
+    this.setState({
+      dropzoneActive: false
+    });
+  }
+
+  onDrop(files) {
+    this.setState({
+      files,
+      dropzoneActive: false
+    });
+  }
+
+  applyMimeTypes(event) {
+    this.setState({
+      accept: event.target.value
+    });
+  }
+
+  render() {
+    const { accept, files, dropzoneActive } = this.state;
+
+    return (
+      <Dropzone
+        disableClick
+        style={{ position: "relative" }}
+        accept={accept}
+        onDrop={this.onDrop.bind(this)}
+        onDragEnter={this.onDragEnter.bind(this)}
+        onDragLeave={this.onDragLeave.bind(this)}
+      >
+        {dropzoneActive && (
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              padding: "2.5em 0",
+              background: "rgba(0,0,0,0.5)",
+              textAlign: "center",
+              color: "#fff"
+            }}
+          >
+            Drop files...
+          </div>
+        )}
+        <div>
+          <h1>My awesome app</h1>
+          <label htmlFor="mimetypes">
+            Enter mime types you want to accept:{" "}
+          </label>
+          <input
+            type="text"
+            id="mimetypes"
+            onChange={this.applyMimeTypes.bind(this)}
+          />
+
+          <h2>Dropped files</h2>
+          <ul>
+            {files.map(f => (
+              <li>
+                {f.name} - {f.size} bytes
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Dropzone>
+    );
+  }
+}

package/typings/tests/styling.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import Dropzone from "../../";
+
+const x = (
+  <Dropzone accept="image/png">
+    {({ isDragActive, isDragReject, acceptedFiles, rejectedFiles }) => {
+      if (isDragActive) {
+        return "This file is authorized";
+      }
+      if (isDragReject) {
+        return "This file is not authorized";
+      }
+      return acceptedFiles.length || rejectedFiles.length
+        ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files`
+        : "Try dropping some files.";
+    }}
+  </Dropzone>
+);

package/wallaby.config.js

@@ -1,17 +0,0 @@
-/* eslint global-require: 0 */
-/* eslint import/no-extraneous-dependencies: 0 */
-module.exports = wallaby => ({
-  files: ['package.json', 'src/**/*.js', '!src/**/*.spec.js'],
-  tests: ['src/**/*.spec.js'],
-  compilers: {
-    'src/**/*.js': wallaby.compilers.babel()
-  },
-  env: {
-    type: 'node',
-    runner: 'node'
-  },
-  testFramework: 'jest',
-  setup: () => {
-    wallaby.testFramework.configure(require('./package.json').jest)
-  }
-})

package/webpack.config.js

@@ -1,43 +0,0 @@
-const path = require('path')
-
-module.exports = env => {
-  const isProduction = env === 'production'
-  return {
-    entry: './src/index.js',
-    devtool: isProduction ? 'source-map' : 'inline-source-map',
-    output: {
-      path: path.resolve(__dirname, 'dist'),
-      filename: 'index.js',
-      libraryTarget: 'umd',
-      library: 'Dropzone'
-    },
-    module: {
-      rules: [
-        {
-          include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'examples')],
-          test: /\.js$/,
-          loader: 'babel-loader',
-          exclude: /node_modules/
-        }
-      ]
-    },
-    resolve: {
-      // Can require('file') instead of require('file.js') etc.
-      extensions: ['.js', '.json']
-    },
-    externals: {
-      react: {
-        root: 'React',
-        commonjs2: 'react',
-        commonjs: 'react',
-        amd: 'react'
-      },
-      'prop-types': {
-        root: 'PropTypes',
-        commonjs2: 'prop-types',
-        commonjs: 'prop-types',
-        amd: 'prop-types'
-      }
-    }
-  }
-}