@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/image/ImageFluid.js

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,287 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,44 @@
+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)'
+    );
+  });
+});