feat: add <DropArea> component

Author: streamich

src/DropArea/__story__/story.tsx

@@ -0,0 +1,23 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {DropArea} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+storiesOf('UI/DropArea', module)
+  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Toggle.md')}))
+  .add('Example', () =>
+    <DropArea
+      onUri={action('onUri')}
+      onText={action('onText')}
+      onFiles={action('onFiles')}
+    >
+      <div style={{
+        border: '1px solid tomato',
+        height: 100
+      }}>
+        Drop here!
+      </div>
+    </DropArea>
+  )

src/DropArea/index.ts

@@ -0,0 +1,87 @@
+import {Component, cloneElement} from 'react';
+import {render} from 'react-universal-interface';
+import {h, noop} from '../util';
+
+const REG_URL = /^https?:\/\//;
+
+export interface IDropAreaProps {
+  onFiles?: (files: File[], event?) => void;
+  onText?: (text: string, event?) => void;
+  onUri?: (url: string, event?) => void;
+}
+
+export interface IDropAreaState {
+}
+
+export class DropArea extends Component<IDropAreaProps, IDropAreaState> {
+  static defaultProps = {
+    onFiles: noop,
+    onText: noop,
+    onUrl: noop,
+  };
+
+  mounted = true;
+
+  coponentWillUnmount () {
+    this.mounted = false;
+  }
+
+  onDragOver = (originalDragOver) => (event) => {
+    (originalDragOver || noop)(event);
+    event.preventDefault();
+  };
+
+  onDragEnter = (originalDragEnter) => (event) => {
+    (originalDragEnter || noop)(event);
+    event.preventDefault();
+  };
+
+  onDrop = (originalDrop) => (event) => {
+    (originalDrop || noop)(event);
+    event.preventDefault();
+
+    this.process(event.dataTransfer, event);
+    const {dataTransfer} = event;
+  };
+
+  onPaste = (originalOnPaste) => (event) => {
+    (originalOnPaste || noop)(event);
+
+    this.process(event.clipboardData, event);
+  };
+
+  process (dataTransfer: DataTransfer, event) {
+    const uri = dataTransfer.getData('text/uri-list');
+
+    if (uri) {
+      this.props.onUri(uri, event);
+      return;
+    }
+
+    if (dataTransfer.files && dataTransfer.files.length) {
+      this.props.onFiles(Array.from(dataTransfer.files), event);
+      return;
+    }
+
+    if (dataTransfer.items && dataTransfer.items.length) {
+      dataTransfer.items[0].getAsString((text) => {
+        if (this.mounted) {
+          this.props.onText(text);
+        }
+      });
+    }
+  }
+
+  render () {
+    const element = render(this.props, {});
+    const {props} = element;
+
+    return cloneElement(element, {
+      ...props,
+      onDragOver: this.onDragOver(props.onDragOver),
+      onDragEnter: this.onDragEnter(props.onDragEnter),
+      onDrop: this.onDrop(props.onDrop),
+      onPaste: this.onPaste(props.onPaste),
+    });
+  }
+}