@cashub/ui 0.22.9 → 0.22.11

package/src/dropzone/ImageDropzone.js

@@ -1,365 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { FiX, FiUpload } from 'react-icons/fi';
-import { MdCrop } from 'react-icons/md';
-import { dataURLtoFile } from '@cashub/utils';
-import HiddenFileInput from '../file/HiddenFileInput';
-import Message from './subComponent/Message';
-
-const ImageDropzone = ({
-  width = 180,
-  height = 320,
-  fixedSize = true,
-  maxFiles,
-  message,
-  accept,
-  disabled,
-  onAddedFile,
-  onRemovedFile,
-  setDropzoneFunc,
-  cropper,
-  onBlur,
-}) => {
-  const inputRef = useRef(null);
-  const [files, setFiles] = useState([]);
-  const [dragging, setDragging] = useState(false);
-  const [addedFiles, setAddedFiles] = useState([]);
-  const [focus, setFocus] = useState(false);
-
-  const handleClick = () => {
-    if (disabled || files.length >= maxFiles) return;
-    setFocus(false);
-
-    inputRef.current.click();
-  };
-
-  const handleDragEnter = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!disabled && files.length < maxFiles) setDragging(true);
-  };
-
-  const handleDragOver = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!disabled && files.length < maxFiles) setDragging(true);
-  };
-
-  const handleDragLeave = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setDragging(false);
-  };
-
-  const handleDrop = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (!disabled && files.length < maxFiles) {
-      setDragging(false);
-      const { dataTransfer } = event;
-      const {
-        files: [...newFiles],
-      } = dataTransfer;
-
-      if (files.length + newFiles.length > maxFiles) {
-        newFiles.splice(maxFiles - files.length);
-      }
-
-      for (let index = 0; index < newFiles.length; index += 1) {
-        newFiles[index].url = URL.createObjectURL(newFiles[index]);
-      }
-
-      setFiles([...files, ...newFiles]);
-      setAddedFiles(newFiles);
-    }
-  };
-
-  const handleAddFiles = useCallback(
-    (newFiles) => {
-      setFiles((previous) => {
-        if (previous.length + newFiles.length > maxFiles) {
-          newFiles.splice(maxFiles - previous.length);
-        }
-
-        return [...previous, ...newFiles];
-      });
-
-      for (let index = 0; index < newFiles.length; index += 1) {
-        newFiles[index].url = URL.createObjectURL(newFiles[index]);
-      }
-      setAddedFiles(newFiles);
-    },
-    [maxFiles],
-  );
-
-  const handleRemoveFile = useCallback(
-    (event, index) => {
-      if (event) {
-        event.stopPropagation();
-      }
-      setFiles((previous) => {
-        const newFiles = [...previous];
-        newFiles.splice(index, 1);
-
-        return newFiles;
-      });
-
-      if (onRemovedFile) onRemovedFile(index);
-    },
-    [onRemovedFile],
-  );
-
-  const handleChangeFile = useCallback(
-    (event) => {
-      const { files } = event.target;
-      const newFiles = [];
-      for (let index = 0; index < files.length; index += 1) {
-        newFiles.push(files[index]);
-      }
-
-      handleAddFiles(newFiles);
-      inputRef.current.value = '';
-    },
-    [handleAddFiles],
-  );
-
-  const handleCrop = useCallback(
-    (event, index, file) => {
-      event.stopPropagation();
-      setFocus(false);
-
-      cropper.handler({
-        file,
-        src: file.url,
-        width,
-        height,
-        cropBoxResizable: cropper.cropBoxResizable
-          ? cropper.cropBoxResizable
-          : false,
-        onCrop: (croppedSrc) => {
-          const croppedImageFile = dataURLtoFile(croppedSrc, file.name);
-          croppedImageFile.url = croppedSrc;
-
-          cropper.onCrop(index, croppedImageFile);
-          setFiles((previousFiles) => {
-            const newFiles = [...previousFiles];
-            newFiles[index] = croppedImageFile;
-
-            return newFiles;
-          });
-        },
-      });
-    },
-    [width, height, cropper],
-  );
-
-  const previewItem = () => {
-    return files.map((file, index) => {
-      return (
-        <Image
-          key={index}
-          width={width}
-          height={height}
-          fixedSize={fixedSize}
-          onClick={(event) => {
-            event.stopPropagation();
-          }}
-        >
-          {!disabled && (
-            <ButtonGroup>
-              {cropper && (
-                <Button
-                  title='Crop'
-                  onClick={(event) => handleCrop(event, index, file)}
-                >
-                  <MdCrop />
-                </Button>
-              )}
-
-              <Button
-                danger
-                title='Remove'
-                onClick={(event) => handleRemoveFile(event, index)}
-              >
-                <FiX />
-              </Button>
-            </ButtonGroup>
-          )}
-
-          <img crossOrigin='anonymous' src={file.url} alt={file.name} />
-        </Image>
-      );
-    });
-  };
-
-  const addFiles = useCallback(
-    (files) => {
-      handleAddFiles(files);
-    },
-    [handleAddFiles],
-  );
-
-  const remove = useCallback(
-    (index) => {
-      handleRemoveFile(null, index);
-    },
-    [handleRemoveFile],
-  );
-
-  const handleBlur = () => {
-    if (focus) {
-      if (onBlur) {
-        onBlur();
-      }
-
-      setFocus(false);
-    }
-  };
-
-  useEffect(() => {
-    if (addedFiles.length > 0 && onAddedFile) {
-      const startIndex = files.length - addedFiles.length;
-      addedFiles.forEach((file, index) => {
-        onAddedFile(file, startIndex + index);
-      });
-      setAddedFiles([]);
-    }
-  }, [addedFiles, onAddedFile, files]);
-
-  useEffect(() => {
-    setDropzoneFunc({
-      addFiles,
-      remove,
-    });
-  }, [setDropzoneFunc, addFiles, remove]);
-
-  const messageItem = (
-    <Message dragging={dragging}>
-      <FiUpload role='img' aria-hidden='true' data-icon='upload' />
-      <p>{message}</p>
-    </Message>
-  );
-
-  return (
-    <Wrapper
-      tabIndex='-1'
-      disabled={disabled}
-      dragging={dragging}
-      onClick={handleClick}
-      onDragEnter={handleDragEnter}
-      onDragLeave={handleDragLeave}
-      onDragOver={handleDragOver}
-      onDrop={handleDrop}
-      reachedLimit={files.length >= maxFiles}
-      onBlur={handleBlur}
-      onFocus={() => {
-        setFocus(true);
-      }}
-    >
-      <HiddenFileInput
-        disabled={disabled}
-        multiple
-        ref={inputRef}
-        accept={accept}
-        onChange={handleChangeFile}
-      />
-      {files.length === 0 ? messageItem : previewItem()}
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  min-height: 200px;
-  border: 4px dashed var(--border-color);
-  border-radius: var(--border-radius-l);
-  color: var(--font-on-background);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  padding: var(--spacing-xs);
-  cursor: pointer;
-
-  ${({ reachedLimit }) => reachedLimit && 'cursor:default;'};
-
-  ${({ disabled }) => disabled && 'cursor:not-allowed; opacity: 0.5;'};
-
-  ${({ dragging }) => dragging && 'border-color: var(--color-primary);'};
-
-  &:focus {
-    border-color: var(--color-primary);
-  }
-`;
-
-const Image = styled.figure`
-  position: relative;
-  margin: var(--spacing-xs);
-
-  ${({ width, height, fixedSize }) => {
-    if (fixedSize) {
-      return `
-        width: ${width}px;
-        height: ${height}px;
-      `;
-    }
-
-    if (width < height) {
-      return `
-        width: ${width}px;
-        max-width: ${width}px;
-        max-height: ${height}px;
-      `;
-    }
-
-    if (height < width) {
-      return `
-        height: ${height}px;
-        max-width: ${width}px;
-        max-height: ${height}px;
-      `;
-    }
-  }}
-
-  > img {
-    width: 100%;
-    height: 100%;
-    border-radius: var(--border-radius);
-  }
-`;
-
-const ButtonGroup = styled.div`
-  position: absolute;
-  right: calc(var(--spacing-xs) * -1);
-  top: calc(var(--spacing-xs) * -1);
-`;
-
-const Button = styled.div.attrs(() => ({
-  role: 'button',
-}))`
-  display: inline-block;
-  width: 32px;
-  height: 32px;
-  color: var(--color-white);
-  background: var(--color-primary);
-  border-radius: var(--border-radius-round);
-  cursor: pointer;
-
-  > svg {
-    color: var(--color-white);
-    margin: 0 auto;
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-    margin: 0 auto;
-    display: block;
-  }
-
-  &:not(:first-child) {
-    margin-left: var(--spacing-xs);
-  }
-
-  ${({ danger }) => danger && 'background: var(--color-danger);'}
-`;
-
-export default ImageDropzone;

package/src/dropzone/__stories__/FileDropzone.stories.js

@@ -1,148 +0,0 @@
-import FileDropzone from '../FileDropzone';
-import Message from '../subComponent/Message';
-
-const metadata = {
-  title: 'Dropzone/FileDropzone',
-  component: FileDropzone,
-  subComponent: Message,
-  argTypes: {
-    message: {
-      description: 'The message is in the fileDropzone',
-    },
-    accept: {
-      description:
-        'The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.',
-    },
-    translation: {
-      description:
-        'For translation of HTML title and alt attributes, if not sent, HTML attribute value will use FileDropzone default text. Translation is optional',
-    },
-    state: {
-      description: 'Affects whether upload files and remove files are performed.',
-    },
-    chunking: {
-      description: 'Control whether to chunked Upload',
-    },
-    chunkSize: {
-      description: 'size of each chunk',
-    },
-    onAddedFile: {
-      description:
-        'A callback then tells the component that a file has been added, and returns the file information.',
-      control: {
-        action: 'onAddedFile',
-      },
-    },
-    onUploading: {
-      description:
-        'A callback that tells the component that there is a file upload, and returns file or chunk data、file name、file index',
-      control: {
-        action: 'onUploading',
-      },
-    },
-
-    onRemovedFile: {
-      description: 'A callback that tells the component to remove the file',
-      control: {
-        action: 'onRemovedFile',
-      },
-    },
-    onPausedUpload: {
-      description:
-        'A callback that tells the component to pause uploading files',
-      control: {
-        action: 'onPausedUpload',
-      },
-    },
-    onCanceledFile: {
-      description:
-        'A callback that tells the component to complete upload files',
-      control: {
-        action: 'onCanceledFile',
-      },
-    },
-    onCompleted: {
-      description:
-        'A callback that tells the component to finish uploading the file',
-    },
-    onError: {
-      description:
-        'A callback that tells the component to finish uploading the file but failed',
-    },
-  },
-};
-
-const Default = ({
-  onAddedFile,
-  onRemovedFile,
-  onUploading,
-  onPausedUpload,
-  onCanceledFile,
-  onCompleted,
-  onError,
-  ...args
-}) => {
-  const handleAddedFile = (file) => {
-    onAddedFile(file);
-  };
-
-  const handleUploading = (chunk, fileName, index) => {
-    onUploading(chunk, fileName, index);
-  };
-
-  const handleRemovedFile = () => {
-    onRemovedFile('handleRemovedFile');
-  };
-
-  const handlePauseUpload = () => {
-    onPausedUpload('handlePauseUpload');
-  };
-
-  const handleCancelFile = () => {
-    onCanceledFile('handleCancelFile');
-  };
-
-  const handleComplete = () => {
-    onCompleted('handleComplete');
-  };
-
-  const handleError = () => {
-    onError('handleError');
-  };
-
-  return (
-    <>
-      <FileDropzone
-        {...args}
-        onUploading={handleUploading}
-        onAddedFile={handleAddedFile}
-        onRemovedFile={handleRemovedFile}
-        onPausedUpload={handlePauseUpload}
-        onCanceledFile={handleCancelFile}
-        onCompleted={handleComplete}
-        onError={handleError}
-      />
-    </>
-  );
-};
-Default.args = {
-  message: 'Drop or click to upload a firmware file.',
-  accept: '.zip',
-  translation: {
-    Cancel: 'Cancel',
-    FileIcon: 'FileIcon',
-    Pause: 'Pause',
-    RemoveFile: 'RemoveFile',
-    Resume: 'Resume',
-    Retry: 'Retry',
-  },
-  state: {
-    isRemoving: false,
-    isUploading: false,
-  },
-  chunkSize: 6000000,
-  chunking: true,
-};
-
-export default metadata;
-export { Default };

package/src/dropzone/__stories__/ImageDropzone.stories.js

@@ -1,101 +0,0 @@
-import { useCallback, useState } from 'react';
-import ImageDropzone from '../ImageDropzone';
-import Message from '../subComponent/Message';
-import CropperModalHandler from '../../cropper/CropperModalHandler';
-
-const metadata = {
-  title: 'Dropzone/ImageDropzone',
-  component: ImageDropzone,
-  subComponent: Message,
-  argTypes: {
-    width: {
-      description: "Image's width",
-    },
-    height: {
-      description: "Image's height",
-    },
-    maxFiles: { description: 'The maximum number of files to upload.' },
-    message: {
-      description: 'The message in the imageDropzone',
-    },
-    accept: {
-      description:
-        'The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.',
-    },
-    disabled: {
-      description:
-        'The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form.',
-    },
-    onAddedFile: {
-      description:
-        'A callback then tells the component that a file has been added, and returns the file information & index.',
-      control: { action: 'onAddedFile' },
-    },
-    onRemovedFile: {
-      description:
-        'A callback that tells the component to remove the file, and returns the index',
-      control: { action: 'onRemovedFile' },
-    },
-    onCrop: {
-      description: 'A callback that return index and cropped file',
-      control: {
-        action: 'onCrop',
-      },
-    },
-    setDropzoneFunc: {
-      description:
-        'Give the component some functions that may be used, like add files、remove files.',
-    },
-    cropper: {
-      description: 'Cropper Settings',
-    },
-    onBlur: {
-      description: 'A callback, called when the ImageDropzone is blurred',
-    },
-  },
-};
-
-const Default = ({ onAddedFile, onRemovedFile, onCrop, ...args }) => {
-  const [dropzoneFunc, setDropzoneFunc] = useState({});
-
-  const handleOnAddedFile = (file, index) => {
-    onAddedFile(file, index);
-  };
-
-  const handleOnRemovedFile = useCallback(
-    (index) => {
-      onRemovedFile(index);
-    },
-    [onRemovedFile],
-  );
-
-  const handleOnCropImage = (index, file) => {
-    onCrop(index, file);
-  };
-
-  return (
-    <ImageDropzone
-      {...args}
-      onAddedFile={handleOnAddedFile}
-      onRemovedFile={handleOnRemovedFile}
-      setDropzoneFunc={setDropzoneFunc}
-      cropper={{
-        handler: CropperModalHandler,
-        cropBoxResizable: true,
-        onCrop: handleOnCropImage,
-      }}
-    />
-  );
-};
-
-Default.args = {
-  width: 180,
-  height: 320,
-  fixedSize: true,
-  maxFiles: '5',
-  message: 'Drop or click to upload at least 1-5 screenshots.',
-  accept: '.jpeg, .bmp, .jpg, .png',
-  disabled: false,
-};
-export default metadata;
-export { Default };