@cashub/ui-elv 1.0.2 → 1.0.3

package/esm/dropzone/FileDropzone.js

@@ -0,0 +1,472 @@
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import styled from 'styled-components';
+import { FiUpload } from 'react-icons/fi/index.esm';
+import { FaTimes, FaPause, FaPlay, FaRedo } from 'react-icons/fa/index.esm';
+import { formatSize, KEY_CODE } from '@cashub/utils';
+import media from '../styles/mixin/media';
+import fileIcon from '../assets/icons/file.svg';
+import HiddenFileInput from '../file/HiddenFileInput';
+import Message from './subComponent/Message';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FileDropzone = _ref => {
+  let {
+    message,
+    accept,
+    translation,
+    state,
+    chunking = true,
+    chunkSize = 6000000,
+    onAddedFile,
+    onRemovedFile,
+    onPausedUpload,
+    onCanceledFile,
+    onUploading,
+    onCompleted,
+    onError
+  } = _ref;
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const [files, setFiles] = useState([]);
+  const [percentage, setPercentage] = useState(0);
+  const [isPausing, setIsPausing] = useState(false);
+  const [total, setTotal] = useState(0);
+  const [index, setIndex] = useState(0);
+  const [successCount, setSuccessCount] = useState(0);
+  const [hasFail, setHasFail] = useState(false);
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [failUploadIndexes, setFailUploadIndexes] = useState([]);
+  const texts = useMemo(() => {
+    const defaultTexts = {
+      Cancel: 'Cancel Upload',
+      FileIcon: 'File Icon',
+      Pause: 'Pause Upload',
+      RemoveFile: 'Remove File',
+      Resume: 'Resume Upload',
+      Retry: 'Retry Upload'
+    };
+    return {
+      ...defaultTexts,
+      ...translation
+    };
+  }, [translation]);
+  const handleClick = useCallback(() => {
+    if (files.length > 0) return;
+    inputRef.current.click();
+  }, [files]);
+  const handleReset = useCallback(() => {
+    setFiles([]);
+    setPercentage(0);
+    setIsPausing(false);
+    setTotal(0);
+    setIndex(0);
+    setSuccessCount(0);
+    setHasFail(false);
+    setIsCompleted(false);
+    setFailUploadIndexes([]);
+  }, []);
+
+  // handle keyboard interaction
+  const handleKeyUp = useCallback(event => {
+    const key = event.keyCode;
+    switch (key) {
+      case KEY_CODE.ENTER:
+        handleClick();
+        break;
+      default:
+        break;
+    }
+  }, [handleClick]);
+  const handleKeyDown = useCallback(event => {
+    const key = event.keyCode;
+    switch (key) {
+      case KEY_CODE.ENTER:
+        event.preventDefault();
+        break;
+      default:
+        break;
+    }
+  }, []);
+  const handleFileChange = useCallback(event => {
+    const {
+      files: newFiles
+    } = event.target;
+    if (newFiles.length > 0 && files.length === 0) {
+      if (onAddedFile) {
+        onAddedFile(newFiles[0]);
+      }
+      setFiles([newFiles[0]]);
+      setTotal(chunking ? Math.ceil(newFiles[0].size / chunkSize) : 1);
+    }
+    inputRef.current.value = '';
+  }, [files, onAddedFile, chunking, chunkSize]);
+  const handleDragEnter = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (files.length === 0) setDragging(true);
+  }, [files]);
+  const handleDragOver = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (files.length === 0) setDragging(true);
+  }, [files]);
+  const handleDragLeave = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragging(false);
+  }, []);
+  const handleDrop = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (files.length === 0) {
+      setDragging(false);
+      const {
+        dataTransfer
+      } = event;
+      const {
+        files: newFiles
+      } = dataTransfer;
+      if (newFiles.length > 0) {
+        if (onAddedFile) {
+          onAddedFile(newFiles[0]);
+        }
+        setFiles([newFiles[0]]);
+        setTotal(chunking ? Math.ceil(newFiles[0].size / chunkSize) : 1);
+      }
+    }
+  }, [files, onAddedFile, chunkSize, chunking]);
+  const handleUpload = useCallback(async function (index) {
+    let setNext = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    const [file] = files;
+    if (!chunking) {
+      if (onUploading) {
+        try {
+          await onUploading(file, file.name, index);
+          setSuccessCount(1);
+        } catch (error) {
+          setHasFail(true);
+          setFailUploadIndexes(previous => {
+            return [...previous, index];
+          });
+        }
+      }
+    } else {
+      const start = index * chunkSize;
+      const end = Math.min(start + chunkSize, file.size);
+      const chunkData = file.slice(start, end);
+      if (onUploading) {
+        try {
+          await onUploading(chunkData, file.name, index);
+          setSuccessCount(previous => {
+            return previous + 1;
+          });
+          if (setNext) {
+            setIndex(previous => {
+              return previous + 1;
+            });
+          }
+        } catch (error) {
+          if (error.message !== 'canceled') {
+            setHasFail(true);
+            setFailUploadIndexes(previous => {
+              return [...previous, index];
+            });
+            if (setNext) {
+              setIndex(previous => {
+                return previous + 1;
+              });
+            }
+          }
+        }
+      }
+    }
+  }, [files, chunking, chunkSize, onUploading]);
+  const handlePauseUpload = useCallback(() => {
+    if (onPausedUpload) onPausedUpload();
+    setIsPausing(true);
+  }, [onPausedUpload]);
+  const handleResumeUpload = useCallback(() => {
+    setIsPausing(false);
+  }, []);
+  const handleRetryUpload = useCallback(() => {
+    const retryIndexes = [...failUploadIndexes];
+    setHasFail(false);
+    setFailUploadIndexes([]);
+    retryIndexes.forEach(index => {
+      handleUpload(index, false);
+    });
+  }, [failUploadIndexes, handleUpload]);
+  const handleCancelUpload = useCallback(event => {
+    event.stopPropagation();
+    if (onCanceledFile) onCanceledFile(files[0]);
+    handleReset();
+  }, [files, onCanceledFile, handleReset]);
+  const handleRemoveFile = useCallback(event => {
+    if (event) event.stopPropagation();
+    if (onRemovedFile) onRemovedFile(files[0]);
+    handleReset();
+  }, [files, onRemovedFile, handleReset]);
+  const handleComplete = useCallback(() => {
+    if (onCompleted) {
+      onCompleted();
+      setIsCompleted(true);
+    }
+  }, [onCompleted]);
+  const handleError = useCallback(() => {
+    if (onError) onError();
+  }, [onError]);
+  const messageItem = useMemo(() => {
+    return /*#__PURE__*/_jsxs(Message, {
+      dragging: dragging,
+      children: [/*#__PURE__*/_jsx(FiUpload, {
+        role: "img",
+        "aria-hidden": "true",
+        "data-icon": "upload"
+      }), /*#__PURE__*/_jsx("p", {
+        children: message
+      })]
+    });
+  }, [dragging, message]);
+  const previewItem = useMemo(() => {
+    if (files.length === 0) {
+      return null;
+    }
+    return /*#__PURE__*/_jsxs(Preview, {
+      children: [/*#__PURE__*/_jsx(PreviewImage, {
+        children: /*#__PURE__*/_jsx("img", {
+          crossOrigin: "anonymous",
+          src: fileIcon,
+          alt: texts.FileIcon,
+          "aria-hidden": "true"
+        })
+      }), /*#__PURE__*/_jsxs(PreviewDetails, {
+        children: [/*#__PURE__*/_jsx("p", {
+          children: formatSize(files[0].size)
+        }), /*#__PURE__*/_jsx("p", {
+          className: "ellipsis",
+          children: files[0].name
+        }), /*#__PURE__*/_jsxs(Progress, {
+          children: [(state.isUploading || percentage > 0) && /*#__PURE__*/_jsx(ProgressBar, {
+            percentage: percentage,
+            "data-testid": "progress-bar",
+            children: /*#__PURE__*/_jsxs("span", {
+              children: [percentage, "%"]
+            })
+          }), state.isUploading ? /*#__PURE__*/_jsx(Button, {
+            danger: true,
+            title: texts.Cancel,
+            onClick: handleCancelUpload,
+            children: /*#__PURE__*/_jsx(FaTimes, {})
+          }) : /*#__PURE__*/_jsx(Button, {
+            danger: true,
+            title: texts.RemoveFile,
+            onClick: handleRemoveFile,
+            children: /*#__PURE__*/_jsx(FaTimes, {})
+          }), !state.isUploading && hasFail && /*#__PURE__*/_jsx(Button, {
+            title: texts.Retry,
+            onClick: handleRetryUpload,
+            children: /*#__PURE__*/_jsx(FaRedo, {})
+          }), chunking && state.isUploading && !isPausing && /*#__PURE__*/_jsx(PauseButton, {
+            title: texts.Pause,
+            onClick: handlePauseUpload,
+            children: /*#__PURE__*/_jsx(FaPause, {})
+          }), chunking && state.isUploading && isPausing && /*#__PURE__*/_jsx(ResumeButton, {
+            title: texts.Resume,
+            onClick: handleResumeUpload,
+            children: /*#__PURE__*/_jsx(FaPlay, {})
+          })]
+        })]
+      })]
+    });
+  }, [texts, files, percentage, chunking, isPausing, state.isUploading, hasFail, handleCancelUpload, handlePauseUpload, handleRemoveFile, handleResumeUpload, handleRetryUpload]);
+
+  // uploading
+  useEffect(() => {
+    if (state.isUploading && !isPausing) {
+      if (index < total) {
+        handleUpload(index);
+      }
+    }
+  }, [state.isUploading, isPausing, total, index, handleUpload]);
+
+  // removing
+  useEffect(() => {
+    if (state.isRemoving) {
+      handleRemoveFile();
+    }
+  }, [state.isRemoving, handleRemoveFile]);
+
+  // set percentage and check complete
+  useEffect(() => {
+    if (total <= 0) return;
+    setPercentage(Math.ceil(successCount / total * 100));
+    if (!isCompleted && successCount === total) {
+      handleComplete();
+    }
+  }, [total, isCompleted, successCount, handleComplete]);
+
+  // check has upload fail
+  useEffect(() => {
+    if (hasFail && successCount + failUploadIndexes.length === total) {
+      handleError();
+    }
+  }, [hasFail, successCount, failUploadIndexes.length, total, handleError]);
+  return /*#__PURE__*/_jsxs(Dropzone, {
+    tabIndex: "0",
+    dragging: dragging,
+    onClick: handleClick,
+    onKeyUp: handleKeyUp,
+    onKeyDown: handleKeyDown,
+    onDragEnter: handleDragEnter,
+    onDragLeave: handleDragLeave,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop,
+    reachedLimit: files.length > 0,
+    children: [/*#__PURE__*/_jsx(HiddenFileInput, {
+      ref: inputRef,
+      accept: accept,
+      onChange: handleFileChange
+    }), files.length === 0 ? messageItem : previewItem]
+  });
+};
+const Dropzone = styled.div`
+  min-height: 200px;
+  border: 4px dashed var(--border-color);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 var(--spacing-s);
+  cursor: ${_ref2 => {
+  let {
+    reachedLimit
+  } = _ref2;
+  return reachedLimit ? 'default' : 'pointer';
+}};
+
+  ${_ref3 => {
+  let {
+    dragging
+  } = _ref3;
+  return dragging && 'border-color: var(--color-primary);';
+}};
+
+  &:focus {
+    border-color: var(--color-primary);
+  }
+`;
+Dropzone.displayName = 'Dropzone';
+const Preview = styled.div`
+  max-width: 50%;
+  display: flex;
+  align-items: center;
+  text-align: center;
+
+  ${media.laptop`
+    max-width: 75%;
+  `}
+
+  ${media.tablet`
+    max-width: 100%;
+  `}
+`;
+Preview.displayName = 'Preview';
+const PreviewImage = styled.div`
+  margin-right: var(--spacing-xs);
+
+  > img {
+    width: 120px;
+    margin-bottom: var(--spacing-xs);
+  }
+`;
+PreviewImage.displayName = 'PreviewImage';
+const PreviewDetails = styled.div`
+  overflow: hidden;
+  min-width: 200px;
+
+  > * {
+    margin-bottom: var(--spacing-xs);
+  }
+
+  > .ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`;
+PreviewDetails.displayName = 'PreviewDetails';
+const Progress = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+// fix:color
+const ProgressBar = styled.div`
+  flex: 1;
+  height: 1.25rem;
+  border-radius: var(--border-radius);
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--color-primary);
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: ${_ref4 => {
+  let {
+    percentage
+  } = _ref4;
+  return percentage;
+}}%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(to bottom, #00bdff, #597ef7);
+    transition: width 300ms ease-in-out;
+  }
+
+  > span {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+`;
+ProgressBar.displayName = 'ProgressBar';
+const Button = styled.span.attrs(() => ({
+  role: 'button'
+}))`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 0 0 auto;
+  cursor: pointer;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--font-on-primary);
+  background: var(--color-primary);
+  border-radius: var(--border-radius);
+  margin-left: var(--spacing-xs);
+  padding: 0.25rem;
+
+  ${_ref5 => {
+  let {
+    danger
+  } = _ref5;
+  return danger && `
+      background: var(--color-danger);
+    `;
+}}
+`;
+const PauseButton = styled(Button)`
+  padding: 5px;
+`;
+const ResumeButton = styled(Button)`
+  padding: 5px 5px 5px 6px;
+`;
+export default FileDropzone;