archive-gh-me/react-use
1
0
Fork 0
mirror of https://github.com/streamich/react-use.git synced 2026-01-18 14:06:52 +00:00
Code Issues Projects Releases Wiki Activity

fix: 🐛 improve how text is dropped in useDrop hook

Browse Source
This commit is contained in:
streamich 2020-06-13 13:42:36 +02:00
parent 83c508346e
commit b2f46d10f2
2 changed files with 9 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/useDrop.ts
View File

@ -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 => {

7
stories/useDrop.story.tsx
View File

@ -1,4 +1,3 @@
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import { useDrop } from '../src';
@ -6,9 +5,9 @@ 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 = {