fix: 🐛 improve how text is dropped in useDrop hook

nspaeth · Jun 13, 2020 · b2f46d1 · b2f46d1
1 parent 83c5083
commit b2f46d1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 19 deletions.
diff --git a/src/useDrop.ts b/src/useDrop.ts
@@ -1,6 +1,5 @@
 /* eslint-disable */
 import * as React from 'react';
-import useMountedState from './useMountedState';
 
 const { useState, useMemo, useCallback, useEffect } = React;
 
@@ -23,13 +22,8 @@ export interface DropAreaOptions {
 }
 
 const noop = () => {};
-/*
-const defaultState: DropAreaState = {
-  over: false,
-};
-*/
 
-const createProcess = (options: DropAreaOptions, mounted: boolean) => (dataTransfer: DataTransfer, event) => {
+const createProcess = (options: DropAreaOptions) => (dataTransfer: DataTransfer, event) => {
   const uri = dataTransfer.getData('text/uri-list');
 
   if (uri) {
@@ -42,21 +36,18 @@ const createProcess = (options: DropAreaOptions, mounted: boolean) => (dataTrans
     return;
   }
 
-  if (dataTransfer.items && dataTransfer.items.length) {
-    dataTransfer.items[0].getAsString(text => {
-      if (mounted) {
-        (options.onText || noop)(text, event);
-      }
-    });
+  if (event.clipboardData) {
+    const text = event.clipboardData.getData('text');
+    (options.onText || noop)(text, event);
+    return;
   }
 };
 
 const useDrop = (options: DropAreaOptions = {}, args = []): DropAreaState => {
   const { onFiles, onText, onUri } = options;
-  const isMounted = useMountedState();
   const [over, setOverRaw] = useState<boolean>(false);
   const setOver = useCallback(setOverRaw, []);
-  const process = useMemo(() => createProcess(options, isMounted()), [onFiles, onText, onUri]);
+  const process = useMemo(() => createProcess(options), [onFiles, onText, onUri]);
 
   useEffect(() => {
     const onDragOver = event => {

diff --git a/stories/useDrop.story.tsx b/stories/useDrop.story.tsx
@@ -1,14 +1,13 @@
-import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { useDrop } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
   const state = useDrop({
-    onFiles: action('onFiles'),
-    onUri: action('onUri'),
-    onText: action('onText'),
+    onFiles: (...args) => console.log('onFiles', ...args),
+    onUri: (...args) => console.log('onUri', ...args),
+    onText: (...args) => console.log('onText', ...args),
   });
 
   const style: React.CSSProperties = {