@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.10

package/src/image/ImageFluid.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-import rounded from '../styles/mixin/rounded';
-
-const ImageFluid = styled.img`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-
-  ${rounded}
-`;
-
-export default ImageFluid;

package/src/image/UploadImage.js

@@ -1,287 +0,0 @@
-import { useState, forwardRef, useEffect, useCallback, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-import { FaPen, FaTimes } from 'react-icons/fa';
-import { MdCrop } from 'react-icons/md';
-import { dataURLtoFile, getBase64DataUrlFromFile } from '@cashub/utils';
-import { showErrorMessage } from '../toast';
-import HiddenFileInput from '../file/HiddenFileInput';
-import ImageFigure from '../figure/ImageFigure';
-import ImageFluid from './ImageFluid';
-
-const UploadImage = forwardRef(
-  (
-    {
-      id,
-      src,
-      alt = 'user avatar',
-      roundedCircle = false,
-      cropperHandler,
-      onBlur,
-      onClear,
-      allowClear = false,
-    },
-    ref,
-  ) => {
-    const { t } = useTranslation();
-    const refWrapper = useRef();
-    const [currentSrc, setCurrentSrc] = useState(src);
-    const [currentFile, setCurrentFile] = useState(null);
-    const [focusCount, setFocusCount] = useState(0);
-
-    const handleAvatarRemove = () => {
-      setCurrentSrc(src);
-      ref.current.value = '';
-      setCurrentFile(null);
-    };
-
-    const restoreFile = useCallback(() => {
-      if (!currentFile) return;
-      const dataTransfer = new DataTransfer();
-      dataTransfer.items.add(currentFile);
-      ref.current.files = dataTransfer.files;
-    }, [ref, currentFile]);
-
-    const handleImageFile = useCallback(
-      (file, src) => {
-        const dataTransfer = new DataTransfer();
-        const changedImageFile = dataURLtoFile(src, file.name);
-        dataTransfer.items.add(changedImageFile);
-        setCurrentSrc(src);
-        setCurrentFile(changedImageFile);
-        ref.current.files = dataTransfer.files;
-      },
-      [ref],
-    );
-
-    const handleOnChange = (files) => {
-      if (files.length === 0) {
-        // close file selector or cancel upload file need to restore to last uploaded file
-        restoreFile();
-      } else {
-        const fileType = files[0].name
-          .slice(files[0].name.lastIndexOf('.'))
-          .toLowerCase();
-
-        if (['.jpeg', '.bmp', '.jpg', '.png'].includes(fileType)) {
-          if (files[0].size < 2097152) {
-            const srcUrl = URL.createObjectURL(files[0]);
-            handleCrop(srcUrl, files[0]);
-          } else {
-            ref.current.value = '';
-            restoreFile();
-            showErrorMessage({
-              title: t('error:Upload'),
-              message: t('error:UploadSize', {
-                size: '2MB',
-              }),
-            });
-          }
-        } else {
-          ref.current.value = '';
-          restoreFile();
-          showErrorMessage({
-            title: t('error:Upload'),
-            message: t('error:LogoMerchantFileType'),
-          });
-        }
-      }
-    };
-
-    const handleCrop = useCallback(
-      (src, file) => {
-        cropperHandler({
-          src,
-          file,
-          width: 160,
-          height: 160,
-          onCrop: (croppedSrc) => {
-            handleImageFile(file, croppedSrc);
-          },
-          onClose: () => {
-            getBase64DataUrlFromFile(file, (dataUrl) => {
-              handleImageFile(file, dataUrl);
-            });
-          },
-        });
-      },
-      [cropperHandler, handleImageFile],
-    );
-
-    const handleFocus = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (event.target.tagName === 'BUTTON') {
-        setFocusCount(focusCount + 1);
-      }
-    };
-
-    const handleBlur = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-
-      // if click figure,after click button
-      if (refWrapper.current.contains(event.relatedTarget)) return;
-      if (event.target === refWrapper.current && onBlur) {
-        onBlur();
-      }
-    };
-
-    useEffect(() => {
-      setCurrentSrc(src);
-    }, [src, ref]);
-
-    // if click button icon,can focus figure element
-    useEffect(() => {
-      if (focusCount === 2) {
-        refWrapper.current.focus();
-        setFocusCount(0);
-      }
-    }, [ref, focusCount]);
-
-    return (
-      <Wrapper
-        ref={refWrapper}
-        roundedCircle={roundedCircle}
-        onBlur={handleBlur}
-        onFocus={handleFocus}
-        tabIndex='0'
-      >
-        {currentSrc && (
-          <ImageFluid
-            crossOrigin='anonymous'
-            src={currentSrc}
-            alt={alt}
-            rounded={true}
-            roundedCircle={roundedCircle}
-          />
-        )}
-
-        {ref && (
-          <ButtonGroup roundedCircle={roundedCircle}>
-            {ref.current &&
-              ref.current.files &&
-              ref.current.files.length !== 0 && (
-                <CropButton
-                  roundedCircle={roundedCircle}
-                  onClick={() => {
-                    handleCrop(currentSrc, ref.current.files[0]);
-                  }}
-                >
-                  <MdCrop />
-                </CropButton>
-              )}
-
-            <ModifyButton
-              roundedCircle={roundedCircle}
-              onClick={() => {
-                ref.current.click();
-              }}
-            >
-              <FaPen />
-            </ModifyButton>
-          </ButtonGroup>
-        )}
-
-        <HiddenFileInput
-          ref={ref && ref}
-          id={id}
-          accept='.jpeg, .bmp, .jpg, .png'
-          onChange={(event) => handleOnChange(event.target.files)}
-        />
-
-        {ref &&
-          ref.current &&
-          ref.current.files &&
-          ref.current.files.length !== 0 && (
-            <RemoveIcon
-              onClick={handleAvatarRemove}
-              roundedCircle={roundedCircle}
-            >
-              <FaTimes />
-            </RemoveIcon>
-          )}
-
-        {allowClear && src && ref && !ref.current?.files?.length > 0 && (
-          <RemoveIcon onClick={onClear} roundedCircle={roundedCircle}>
-            <FaTimes />
-          </RemoveIcon>
-        )}
-      </Wrapper>
-    );
-  },
-);
-
-const Wrapper = styled(ImageFigure)`
-  position: relative;
-  padding: var(--spacing-xs);
-`;
-
-const ButtonGroup = styled.div`
-  position: absolute;
-  top: -16px;
-  right: -12px;
-
-  ${({ rounded }) =>
-    rounded &&
-    `
-      top: 0;
-      right: 0;
-    `}
-`;
-
-const ActionButton = styled.button`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  width: 32px;
-  height: 32px;
-  border: none;
-`;
-
-const CropButton = styled(ActionButton)`
-  color: var(--font-on-primary);
-  background: var(--color-primary);
-  border-radius: var(--border-radius);
-
-  ${({ roundedCircle }) =>
-    roundedCircle &&
-    `
-      position: relative;
-      top: -16px;
-    `}
-`;
-
-const ModifyButton = styled(ActionButton)`
-  color: var(--font-on-primary);
-  background: var(--color-primary);
-  border-radius: var(--border-radius);
-  margin-left: var(--spacing-xs);
-
-  ${({ roundedCircle }) =>
-    roundedCircle &&
-    `
-      position: relative;
-      top: 4px;
-    `}
-`;
-
-const RemoveIcon = styled(ActionButton)`
-  position: absolute;
-  color: var(--font-on-danger);
-  background: var(--color-danger);
-  border-radius: var(--border-radius);
-  bottom: -12px;
-  right: -12px;
-
-  ${({ roundedCircle }) =>
-    roundedCircle &&
-    `
-      bottom: 0;
-      right: 4px;
-    `}
-`;
-
-export default UploadImage;

package/src/image/__stories__/ImageFluid.stories.js

@@ -1,25 +0,0 @@
-import ImageFigure from '../../figure/ImageFigure';
-import ImageFluid from '../ImageFluid';
-import Picture from '../../assets/images/default-user.jpg';
-
-const metadata = {
-  title: 'Images/ImageFluid',
-  component: ImageFluid,
-};
-
-const Template = (args) => {
-  return (
-    <ImageFigure>
-      <ImageFluid {...args} src={Picture} alt='pic' />
-    </ImageFigure>
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  rounded: false,
-  roundedCircle: false,
-};
-
-export default metadata;
-export { Default };

package/src/image/__stories__/UploadImage.stories.js

@@ -1,56 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import UploadImage from '../UploadImage';
-import Picture from '../../assets/images/default-user.jpg';
-import CropperModalHandler from '../../cropper/CropperModalHandler';
-
-const metadata = {
-  title: 'Images/UploadImage',
-  component: UploadImage,
-  argTypes: {
-    src: {
-      description: 'icon image',
-      control: { type: 'file', accept: '.png,.jpg' },
-    },
-    onBlur: {
-      description: 'A callback, called when the UploadImage panel is closed',
-    },
-    onClear: {
-      description: 'A callback, called when trigger clear source image',
-    },
-  },
-};
-
-const Template = ({ ...args }) => {
-  const logoRef = useRef(null);
-  const [value, setValue] = useState('No data');
-
-  useEffect(() => {
-    const updateValue = setInterval(() => {
-      if (logoRef?.current?.files && logoRef.current.files.length === 0) return;
-      setValue(logoRef.current.files[0].name);
-    }, 1000);
-
-    return () => clearInterval(updateValue);
-  }, []);
-
-  return (
-    <div>
-      <UploadImage
-        {...args}
-        ref={logoRef}
-        cropperHandler={CropperModalHandler}
-      />
-      <p style={{ color: '#ffffff', marginTop: '20px' }}>File Name : {value}</p>
-    </div>
-  );
-};
-
-const Default = Template.bind({});
-Default.args = {
-  roundedCircle: false,
-  allowClear: false,
-  src: [`${Picture}`],
-};
-
-export default metadata;
-export { Default };

package/src/image/__test__/ImageFluid.test.js

@@ -1,44 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import ImageFluid from '../ImageFluid';
-import 'jest-styled-components';
-
-describe('test ImageFluid', () => {
-  test('render ImageFluid', () => {
-    render(<ImageFluid alt='Sidebar' src='img.jpg' crossOrigin='anonymous' />);
-    const imageFluid = screen.getByRole('img');
-    expect(imageFluid).toBeInTheDocument();
-    expect(imageFluid).toHaveAttribute('alt', 'Sidebar');
-    expect(imageFluid).toHaveAttribute('src', 'img.jpg');
-    expect(imageFluid).toHaveAttribute('crossOrigin', 'anonymous');
-    expect(imageFluid).not.toHaveStyleRule(
-      'border-radius',
-      'var(--border-radius)'
-    );
-    expect(imageFluid).not.toHaveStyleRule(
-      'border-radius',
-      'var(--border-radius-round)'
-    );
-  });
-  test('rounded', () => {
-    render(
-      <ImageFluid rounded alt='Sidebar' src='img.jpg' crossOrigin='anonymous' />
-    );
-    const imageFluid = screen.getByRole('img');
-    expect(imageFluid).toHaveStyleRule('border-radius', 'var(--border-radius)');
-  });
-  test('roundedCircle', () => {
-    render(
-      <ImageFluid
-        roundedCircle
-        alt='Sidebar'
-        src='img.jpg'
-        crossOrigin='anonymous'
-      />
-    );
-    const imageFluid = screen.getByRole('img');
-    expect(imageFluid).toHaveStyleRule(
-      'border-radius',
-      'var(--border-radius-round)'
-    );
-  });
-});