Merge branch 'develop'

src/utils/hooks/index.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect } from 'react';
+
+export const useCloseOnEscape = (onRequestClose: () => void, ignore_inputs = false) => {
+  const onEscape = useCallback(
+    event => {
+      if (event.key !== 'Escape') return;
+      if (
+        ignore_inputs &&
+        (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA')
+      )
+        return;
+
+      onRequestClose();
+    },
+    [ignore_inputs, onRequestClose]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keyup', onEscape);
+
+    return () => {
+      window.removeEventListener('keyup', onEscape);
+    };
+  }, [onEscape]);
+};
+
+export const useDelayedReady = (setReady: (val: boolean) => void, delay: number = 500) => {
+  useEffect(() => {
+    const timer = setTimeout(() => setReady(true), delay);
+
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [delay, setReady]);
+};
+
+/**
+ * useDropZone returns onDrop handler to upload files
+ * @param onUpload -- upload callback
+ * @param allowedTypes -- list of allowed types
+ */
+export const useDropZone = (onUpload: (file: File[]) => void, allowedTypes?: string[]) => {
+  return useCallback(
+    event => {
+      event.preventDefault();
+      const files: File[] = Array.from((event.dataTransfer?.files as File[]) || []).filter(
+        (file: File) => file?.type && (!allowedTypes || allowedTypes.includes(file.type))
+      );
+
+      if (!files || !files.length) return;
+
+      onUpload(files);
+    },
+    [onUpload]
+  );
+};

src/utils/hooks/keys.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect } from 'react';
+
+export const useArrows = (onNext: () => void, onPrev: () => void, locked) => {
+  const onKeyDown = useCallback(
+    event => {
+      if ((event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) || locked)
+        return;
+
+      switch (event.key) {
+        case 'ArrowLeft':
+          return onPrev();
+        case 'ArrowRight':
+          return onNext();
+      }
+    },
+    [onNext, onPrev, locked]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onKeyDown]);
+};