@cashub/ui-elv 1.0.2 → 1.0.4

package/esm/image/UploadImage.js

@@ -0,0 +1,243 @@
+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/index.esm';
+import { MdCrop } from 'react-icons/md/index.esm';
+import { dataURLtoFile, getBase64DataUrlFromFile } from '@cashub/utils';
+import { showErrorMessage } from '../toast';
+import HiddenFileInput from '../file/HiddenFileInput';
+import ImageFigure from '../figure/ImageFigure';
+import ImageFluid from './ImageFluid';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const UploadImage = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    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 /*#__PURE__*/_jsxs(Wrapper, {
+    ref: refWrapper,
+    roundedCircle: roundedCircle,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    tabIndex: "0",
+    children: [currentSrc && /*#__PURE__*/_jsx(ImageFluid, {
+      crossOrigin: "anonymous",
+      src: currentSrc,
+      alt: alt,
+      rounded: true,
+      roundedCircle: roundedCircle
+    }), ref && /*#__PURE__*/_jsxs(ButtonGroup, {
+      roundedCircle: roundedCircle,
+      children: [ref.current && ref.current.files && ref.current.files.length !== 0 && /*#__PURE__*/_jsx(CropButton, {
+        roundedCircle: roundedCircle,
+        onClick: () => {
+          handleCrop(currentSrc, ref.current.files[0]);
+        },
+        children: /*#__PURE__*/_jsx(MdCrop, {})
+      }), /*#__PURE__*/_jsx(ModifyButton, {
+        roundedCircle: roundedCircle,
+        onClick: () => {
+          ref.current.click();
+        },
+        children: /*#__PURE__*/_jsx(FaPen, {})
+      })]
+    }), /*#__PURE__*/_jsx(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 && /*#__PURE__*/_jsx(RemoveIcon, {
+      onClick: handleAvatarRemove,
+      roundedCircle: roundedCircle,
+      children: /*#__PURE__*/_jsx(FaTimes, {})
+    }), allowClear && src && ref && !ref.current?.files?.length > 0 && /*#__PURE__*/_jsx(RemoveIcon, {
+      onClick: onClear,
+      roundedCircle: roundedCircle,
+      children: /*#__PURE__*/_jsx(FaTimes, {})
+    })]
+  });
+});
+const Wrapper = styled(ImageFigure)`
+  position: relative;
+  padding: var(--spacing-xs);
+`;
+const ButtonGroup = styled.div`
+  position: absolute;
+  top: -16px;
+  right: -12px;
+
+  ${_ref2 => {
+  let {
+    rounded
+  } = _ref2;
+  return 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);
+
+  ${_ref3 => {
+  let {
+    roundedCircle
+  } = _ref3;
+  return 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);
+
+  ${_ref4 => {
+  let {
+    roundedCircle
+  } = _ref4;
+  return 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;
+
+  ${_ref5 => {
+  let {
+    roundedCircle
+  } = _ref5;
+  return roundedCircle && `
+      bottom: 0;
+      right: 4px;
+    `;
+}}
+`;
+export default UploadImage;

package/esm/image/index.js

@@ -0,0 +1,2 @@
+export { default as ImageFluid } from './ImageFluid';
+export { default as UploadImage } from './UploadImage';

package/esm/index.js

@@ -0,0 +1,47 @@
+export * from './alert';
+export * from './animate';
+export * from './backdrop';
+export * from './badge';
+export * from './breadcrumb';
+export * from './button';
+export * from './callout';
+export * from './chart';
+export * from './container';
+export * from './cropper';
+export * from './datetimePicker';
+export * from './descriptionList';
+export * from './divider';
+export { default as Dropdown } from './dropdown';
+export * from './dropdown';
+export * from './dropzone';
+export * from './figure';
+export * from './file';
+export * from './form';
+export * from './grid';
+export * from './helmet';
+export * from './heading';
+export * from './iconbox';
+export * from './image';
+export * from './layout';
+export * from './link';
+export * from './map';
+export * from './modal';
+export * from './page';
+export * from './paginate';
+export * from './popover';
+export * from './qrcode';
+export * from './ribbon';
+export * from './section';
+export * from './select';
+export * from './styles';
+export * from './table';
+export { default as Tab } from './Tab';
+export { TabV2 } from './Tab';
+export * from './tagify';
+export * from './text';
+export * from './timeline';
+export * from './toast';
+export * from './tooltip';
+export * from './treeView';
+export { default as VerticalTab } from './VerticalTab';
+export * from './wizard';

package/esm/keyframe/Pulse.js

@@ -0,0 +1,15 @@
+import { keyframes } from 'styled-components';
+const Pulse = keyframes`
+  0% {
+    transform: scale(0.1, 0.1);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+  }
+`;
+export default Pulse;

package/esm/keyframe/Spin.js

@@ -0,0 +1,7 @@
+import { keyframes } from 'styled-components';
+const Spin = keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`;
+export default Spin;

package/esm/layout/Aside.js

@@ -0,0 +1,39 @@
+import styled, { css } from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+import sidebarStyle from '../styles/config/sidebar.style';
+import media from '../styles/mixin/media';
+import bgAside from '../assets/images/bg-aside.png';
+const Aside = styled.aside`
+  width: ${_ref => {
+  let {
+    $display
+  } = _ref;
+  return $display ? `${sidebarStyle.open.width}` : `${sidebarStyle.close.width}`;
+}};
+
+  padding-top: var(--spacing-s);
+  height: calc(100vh - ${headerStyle.height} - var(--spacing));
+  background: url(${bgAside}), var(--color-background2);
+  background-size: 356px 436px;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  border-top-right-radius: var(--border-radius);
+  position: fixed;
+  top: calc(${headerStyle.height} + var(--spacing));
+  transition: width 0.2s;
+  z-index: 60;
+
+  ${media.tablet`
+    height: 100%;
+    top: 0;
+    padding-top:0;
+    border-top-right-radius:0;
+    left: 0;
+    box-shadow: var(--box-shadow);
+    
+    ${props => props.$display === false && css`
+        left: -${sidebarStyle.open.width};
+      `}
+  `};
+`;
+export default Aside;

package/esm/layout/AsideHeader.jsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+import media from '../styles/mixin/media';
+import Logo from './Logo';
+import MenuIcon from './MenuIcon';
+
+const AsideHeader = ({ theme, logo, hasSidebar, toggleSidebar }) => {
+  return (
+    <Brand>
+      {hasSidebar && <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />}
+      {logo && <Logo src={logo} />}
+    </Brand>
+  );
+};
+
+const Brand = styled.div`
+  display: none;
+  height: ${headerStyle.height};
+
+  ${media.tablet`
+    padding: 0 var(--spacing-xs);
+    align-items: center;
+    display: flex
+  `};
+`;
+
+export default AsideHeader;

package/esm/layout/Backdrop.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { BaseBackdrop } from '../backdrop';
+import media from '../styles/mixin/media';
+const Backdrop = styled(BaseBackdrop)`
+  visibility: hidden;
+
+  ${media.tablet`
+    visibility: ${_ref => {
+  let {
+    $display
+  } = _ref;
+  return $display === true ? 'visible' : 'hidden';
+}};
+  `}
+`;
+export default Backdrop;

package/esm/layout/Container.js

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+import sidebarStyle from '../styles/config/sidebar.style';
+import media from '../styles/mixin/media';
+const Container = styled.div`
+  transition: 0.3s;
+  width: 100%;
+  padding: calc(${headerStyle.height} + var(--spacing)) var(--spacing)
+    var(--spacing);
+
+  ${_ref => {
+  let {
+    hasSidebar,
+    $display
+  } = _ref;
+  return hasSidebar === true && css`
+        width: calc(
+          100% -
+            ${$display === true ? sidebarStyle.open.width : sidebarStyle.close.width}
+        );
+        margin-left: ${$display === true ? sidebarStyle.open.width : sidebarStyle.close.width};
+
+        ${media.tablet`
+        width: 100%;
+        margin-left: 0;
+      `}
+      `;
+}}
+`;
+export default Container;

package/esm/layout/Footer.js

@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+import sidebarStyle from '../styles/config/sidebar.style';
+import media from '../styles/mixin/media';
+const Footer = styled.footer`
+  transition: 0.3s;
+  border-top: var(--border-width) solid var(--border-color);
+  color: var(--font-on-mute);
+  height: 64px;
+  line-height: 64px;
+  font-size: var(--font-body2);
+  padding: 0 var(--spacing);
+
+  ${_ref => {
+  let {
+    hasSidebar
+  } = _ref;
+  return hasSidebar === true && css`
+      margin: 0 var(--spacing) 0 calc(var(--spacing) + ${sidebarStyle.close.width});
+
+      ${media.tablet`
+        margin:0 ;
+      `}
+    `;
+}}
+
+  ${_ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display && css`
+      margin: 0 var(--spacing) 0
+        calc(var(--spacing) + ${sidebarStyle.open.width});
+    `;
+}}
+`;
+export default Footer;

package/esm/layout/Header.jsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+import media from '../styles/mixin/media';
+import MenuIcon from './MenuIcon';
+import Logo from './Logo';
+
+const Header = ({ theme, logo, hasSidebar, toggleSidebar, children }) => {
+  return (
+    <>
+      <Wrapper>
+        <Brand>
+          {hasSidebar && (
+            <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />
+          )}
+          {logo && <Logo src={logo} />}
+        </Brand>
+        <Topbar>{children}</Topbar>
+      </Wrapper>
+    </>
+  );
+};
+
+const Wrapper = styled.header`
+  background: var(--color-background2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  z-index: 40;
+  width: 100%;
+  height: ${headerStyle.height};
+  padding: 0 calc(var(--spacing-s) + 0.25rem) 0 var(--spacing-s);
+
+  ${media.tablet`
+    padding: 0 var(--spacing-s) 0 calc(var(--spacing-s) - 0.25rem);
+  `}
+`;
+
+const Brand = styled.div`
+  display: flex;
+
+  > * {
+    flex: none;
+  }
+`;
+
+const Topbar = styled.div`
+  display: flex;
+
+  > *:not(:last-child) {
+    margin-right: calc(var(--spacing) - 0.5rem);
+  }
+`;
+
+export default Header;

package/esm/layout/Layout.jsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { ScrollToTopButton } from '../button';
+import Header from './Header';
+import Container from './Container';
+import Footer from './Footer';
+import Sidebar from './Sidebar';
+import Backdrop from './Backdrop';
+
+const Layout = ({
+  mode,
+  theme,
+  logo,
+  headerContent,
+  navContent,
+  footerContent,
+  children,
+}) => {
+  const [display, setDisplay] = useState(!!navContent);
+
+  const toggleSidebar = () => {
+    setDisplay(!display);
+  };
+
+  // hide sidebar
+  useEffect(() => {
+    if (mode === 'tablet') {
+      setDisplay(false);
+    }
+  }, [mode, setDisplay]);
+
+  return (
+    <Wrapper>
+      <Header
+        theme={theme}
+        logo={logo}
+        hasSidebar={!!navContent}
+        toggleSidebar={toggleSidebar}
+      >
+        {headerContent}
+      </Header>
+
+      <Main>
+        <Backdrop $display={display} onClick={toggleSidebar} />
+
+        {navContent && (
+          <Sidebar
+            theme={theme}
+            logo={logo}
+            hasSidebar={!!navContent}
+            $display={display}
+            toggleSidebar={toggleSidebar}
+          >
+            {navContent}
+          </Sidebar>
+        )}
+
+        <Container hasSidebar={!!navContent} $display={display}>
+          {children}
+        </Container>
+
+        <ScrollToTopButton />
+      </Main>
+
+      <Footer hasSidebar={!!navContent} $display={display}>
+        {footerContent}
+      </Footer>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+`;
+
+const Main = styled.div`
+  display: flex;
+  flex: 1;
+  position: relative;
+`;
+
+export default Layout;

package/esm/layout/Logo.jsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { ImageFluid } from '../image';
+
+const Logo = ({ src }) => {
+  return (
+    <Figure>
+      <ImageFluid src={src} alt='CasHUB logo' />
+    </Figure>
+  );
+};
+
+const Figure = styled.figure`
+  max-width: 220px;
+  height: 40px;
+`;
+
+export default Logo;

package/esm/layout/MenuIcon.jsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { ImageFluid } from '../image';
+import { IconFigure } from '../figure';
+import { IconButton } from '../button';
+import burgerWhite from '../assets/icons/burger-white.png';
+import burgerBlack from '../assets/icons/burger-black.png';
+
+const MenuIcon = ({ theme, toggleSidebar }) => {
+  return (
+    <Wrapper onClick={toggleSidebar}>
+      <IconFigure>
+        <ImageFluid
+          crossOrigin='anonymous'
+          src={theme === 'Dark' ? burgerWhite : burgerBlack}
+          alt='Sidebar toggler'
+        />
+      </IconFigure>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(IconButton)`
+  margin: 0;
+  margin-right: calc(var(--spacing) - 0.5rem);
+`;
+
+export default MenuIcon;