@xaypay/tui 0.0.105 → 0.0.107

package/src/components/toaster/Toast.js

@@ -1,181 +1,203 @@
-import React, { useEffect, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState, useRef } from 'react'
+import PropTypes from 'prop-types'
 
-import ToasterInfo from '../icon/ToasterInfo';
-import ToasterError from '../icon/ToasterError';
-import ToasterClose from '../icon/ToasterClose';
-import ToasterWarn from '../icon/ToasterWarning';
-import ToasterSuccess from '../icon/ToasterSuccess';
+import ToasterInfo from '../icon/ToasterInfo'
+import ToasterError from '../icon/ToasterError'
+import ToasterClose from '../icon/ToasterClose'
+import ToasterWarn from '../icon/ToasterWarning'
+import ToasterSuccess from '../icon/ToasterSuccess'
 
+import styles from './toaster.module.css'
 
-import styles from './toaster.module.css';
+let wWidth = window.innerWidth
 
 const ToasterType = {
-  info: 'info',
-  warn: 'warn',
-  error: 'error',
-  success: 'success'
-};
+    info: 'info',
+    warn: 'warn',
+    error: 'error',
+    success: 'success',
+}
 
 const ToasterPosition = {
-  topLeft: 'top-left',
-  topRight: 'top-right',
-  topCenter: 'top-center',
-  bottomLeft: 'bottom-left',
-  bottomRight: 'bottom-right',
-  bottomCenter: 'bottom-center'
-};
+    topLeft: 'top-left',
+    topRight: 'top-right',
+    topCenter: 'top-center',
+    bottomLeft: 'bottom-left',
+    bottomRight: 'bottom-right',
+    bottomCenter: 'bottom-center',
+}
 
-export const Toast = ({
-  type,
-  title,
-  timer,
-  position,
-  removeToast,
-  description,
-}) => {
-  let timeoutCall;
-  let timeoutClick;
+export const Toast = ({ type, title, timer, position, removeToast, description }) => {
+    let timeoutCall
+    let timeoutClick
 
-  const ref = useRef(null);
-  const [showToaster, setShowToaster] = useState(true);
+    const ref = useRef(null)
+    const [showToaster, setShowToaster] = useState(true)
 
-  const handleToasterClick = (e) => {
-    e.stopPropagation();
-  };
-
-  const handleCloseToaster = (ref) => {
-    setShowToaster(false);
-    timeoutClick = setTimeout(() => {
-      removeToast(ref, position);
-    }, 300);
-    clearTimeout(timeoutCall);
-  };
+    const handleToasterClick = (e) => {
+        e.stopPropagation()
+    }
 
-  useEffect(() => {
-    timeoutCall = setTimeout(() => {
-      handleCloseToaster(ref);
-    }, timer);
-    return () => {
-      setShowToaster(true);
-      clearTimeout(timeoutCall);
-      clearTimeout(timeoutClick);
+    const handleCloseToaster = (ref) => {
+        setShowToaster(false)
+        timeoutClick = setTimeout(() => {
+            removeToast(ref, position)
+        }, 300)
+        clearTimeout(timeoutCall)
     }
-  }, []);
 
-  return (
-    <div
-      ref={ref}
-      onClick={handleToasterClick}
-      style={{
-        position: 'absolute',
-        display: 'flex',
-        width: '440px',
-        height: '83px',
-        borderRadius: '40px',
-        alignItems: 'center',
-        boxSizing: 'border-box',
-        backgroundColor: '#FFFFFF',
-        border: '2px solid #EEEEEE',
-        padding: '14px 29px 14px 12px',
-        justifyContent: 'space-between'
-      }}
-      className={`
+    useEffect(() => {
+        timeoutCall = setTimeout(() => {
+            handleCloseToaster(ref)
+        }, timer)
+        return () => {
+            setShowToaster(true)
+            clearTimeout(timeoutCall)
+            clearTimeout(timeoutClick)
+        }
+    }, [])
+
+    return (
+        <div
+            ref={ref}
+            onClick={handleToasterClick}
+            style={{
+                position: 'absolute',
+                display: 'flex',
+                width: wWidth > 480 ? '440px' : '300px',
+                height: '83px',
+                borderRadius: '40px',
+                alignItems: 'center',
+                boxSizing: 'border-box',
+                backgroundColor: '#FFFFFF',
+                border: '2px solid #EEEEEE',
+                padding: '14px 29px 14px 12px',
+                justifyContent: 'space-between',
+            }}
+            className={`
         ${styles['notify-block']}
         ${
-        position === 'top-left' ? showToaster ? styles['bounce-in-left'] : styles['bounce-out-left']
-          : position === 'top-right' ? showToaster ? styles['bounce-in-right'] : styles['bounce-out-right']
-            : position === 'top-center' ? showToaster ? styles['bounce-in-left'] : styles['bounce-out-left']
-              : position === 'bottom-left' ? showToaster ? styles['bounce-in-left'] : styles['bounce-out-left']
-                : position === 'bottom-right' ? showToaster ? styles['bounce-in-right'] : styles['bounce-out-right']
-                  : position === 'bottom-center' ? showToaster ? styles['bounce-in-left'] : styles['bounce-out-left']
-                    : ''
+            position === 'top-left'
+                ? showToaster
+                    ? styles['bounce-in-left']
+                    : styles['bounce-out-left']
+                : position === 'top-right'
+                ? showToaster
+                    ? styles['bounce-in-right']
+                    : styles['bounce-out-right']
+                : position === 'top-center'
+                ? showToaster
+                    ? styles['bounce-in-left']
+                    : styles['bounce-out-left']
+                : position === 'bottom-left'
+                ? showToaster
+                    ? styles['bounce-in-left']
+                    : styles['bounce-out-left']
+                : position === 'bottom-right'
+                ? showToaster
+                    ? styles['bounce-in-right']
+                    : styles['bounce-out-right']
+                : position === 'bottom-center'
+                ? showToaster
+                    ? styles['bounce-in-left']
+                    : styles['bounce-out-left']
+                : ''
         }
       `}
-    >
-      <div
-        style={{
-          display: 'flex',
-          width: '60px',
-          height: '60px',
-          borderRadius: '30px',
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor:
-            type === 'info' ? 'rgba(0, 35, 106, 0.05)'
-              : type === 'warn' ? 'rgba(255, 138, 0, 0.05)'
-                : type === 'error' ? 'rgba(238, 0, 0, 0.05)'
-                  : type === 'success' ? 'rgba(13, 165, 116, 0.05)'
-                    : ''
-        }}
-      >
-          {
-            type === 'info' ? <ToasterInfo />
-              : type === 'warn' ? <ToasterWarn />
-                : type === 'error' ? <ToasterError />
-                  : type === 'success' ? <ToasterSuccess />
-                    : ''
-          }
-      </div>
-
-      <div
-        style={{
-          height: '100%',
-          width: 'calc(100% - 90px)'
-        }}
-      >
-        <p
-          style={{
-            margin: '0px',
-            fontWeight: 600,
-            color: '#3C393E',
-            fontSize: '16px',
-            lineHeight: '22px',
-            fontStyle: 'normal',
-          }}
-        >
-          {title ? title.length > 25 ? title.substr(0, 25) + '...' : title : ''}
-        </p>
-        <span
-          style={{
-            fontWeight: 500,
-            color: '#3C393E',
-            fontSize: '12px',
-            lineHeight: '16px',
-            fontStyle: 'normal',
-            fontFamily: '',
-            opacity: 0.8
-          }}
         >
-          {description ? description.length > 120 ? description.substr(0, 120) + '...' : description : ''}
-        </span>
-      </div>
+            <div
+                style={{
+                    display: 'flex',
+                    width: '60px',
+                    height: '60px',
+                    borderRadius: '30px',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor:
+                        type === 'info'
+                            ? 'rgba(0, 35, 106, 0.05)'
+                            : type === 'warn'
+                            ? 'rgba(255, 138, 0, 0.05)'
+                            : type === 'error'
+                            ? 'rgba(238, 0, 0, 0.05)'
+                            : type === 'success'
+                            ? 'rgba(13, 165, 116, 0.05)'
+                            : '',
+                }}
+            >
+                {type === 'info' ? (
+                    <ToasterInfo />
+                ) : type === 'warn' ? (
+                    <ToasterWarn />
+                ) : type === 'error' ? (
+                    <ToasterError />
+                ) : type === 'success' ? (
+                    <ToasterSuccess />
+                ) : (
+                    ''
+                )}
+            </div>
+
+            <div
+                style={{
+                    height: '100%',
+                    width: 'calc(100% - 90px)',
+                }}
+            >
+                <p
+                    style={{
+                        margin: '0px',
+                        fontWeight: 600,
+                        color: '#3C393E',
+                        fontSize: '16px',
+                        lineHeight: '22px',
+                        fontStyle: 'normal',
+                    }}
+                    className={styles['notify-title']}
+                >
+                    {title ? title : ''}
+                </p>
+                <span
+                    style={{
+                        fontWeight: 500,
+                        color: '#3C393E',
+                        fontSize: '12px',
+                        lineHeight: '16px',
+                        fontStyle: 'normal',
+                        fontFamily: '',
+                        opacity: 0.8,
+                    }}
+                    className={styles['notify-desc']}
+                >
+                    {description ? description : ''}
+                </span>
+            </div>
 
-      <div
-        onClick={() => handleCloseToaster(ref)}
-        style={{
-          width: '18px',
-          height: '18px',
-          cursor: 'pointer'
-        }}
-      >
-        <ToasterClose />
-      </div>
-    </div>
-  )
-};
+            <div
+                onClick={() => handleCloseToaster(ref)}
+                style={{
+                    width: '18px',
+                    height: '18px',
+                    cursor: 'pointer',
+                }}
+            >
+                <ToasterClose />
+            </div>
+        </div>
+    )
+}
 
 Toast.propTypes = {
-  timer: PropTypes.number,
-  title: PropTypes.string,
-  description: PropTypes.string,
-  removeToast: PropTypes.func.isRequired,
-  position: PropTypes.oneOf(Object.values(ToasterPosition)),
-  type: PropTypes.oneOf(Object.values(ToasterType)).isRequired,
-};
+    timer: PropTypes.number,
+    title: PropTypes.string,
+    description: PropTypes.string,
+    removeToast: PropTypes.func.isRequired,
+    position: PropTypes.oneOf(Object.values(ToasterPosition)),
+    type: PropTypes.oneOf(Object.values(ToasterType)).isRequired,
+}
 
 Toast.defaultProps = {
-  timer: 5000,
-  position: 'top-right',
-  title: 'toaster title'
-};
+    timer: 5000,
+    position: 'top-right',
+    title: 'toaster title',
+}

package/src/components/toaster/index.js

@@ -1,129 +1,126 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react'
+import ReactDOM from 'react-dom'
 
-import { Toast } from './Toast';
+import { Toast } from './Toast'
 
-import styles from './toaster.module.css';
+import styles from './toaster.module.css'
 
-let toastify;
-let path = window.location.href;
+let toastify
+let path = window.location.href
+let wWidth = window.innerWidth
 
 const removeToast = (ref) => {
-  const node = ReactDOM.findDOMNode(ref.current);
-  const removeElem = node.parentNode;
-  const parent = removeElem.parentNode;
+    // eslint-disable-next-line react/no-find-dom-node
+    const node = ReactDOM.findDOMNode(ref.current)
+    const removeElem = node.parentNode
+    const parent = removeElem.parentNode
 
-  parent.removeChild(removeElem);
+    parent.removeChild(removeElem)
 
-  if (!parent.hasChildNodes()) {
-    toastify.removeChild(parent);
-  }
-};
+    if (!parent.hasChildNodes()) {
+        toastify.removeChild(parent)
+    }
+}
 
-const createToast = ({
-  type,
-  timer,
-  title,
-  position,
-  description,
-}) => {
-  let toastParentBlock;
-  if (!toastify) {
-    toastify = document.getElementById('toastify');
-  }
+const createToast = ({ type, timer, title, position, description }) => {
+    let toastParentBlock
+    if (!toastify) {
+        toastify = document.getElementById('toastify')
+    }
 
-  const toastBlock = document.createElement('div');
-  toastBlock.style.position = 'relative';
-  toastBlock.style.flexShrink = 0;
-  toastBlock.style.width = '440px';
-  toastBlock.style.height = '83px';
-  toastBlock.style.marginBottom = '20px';
-  const newElem = React.createElement(Toast, {
-    type,
-    timer,
-    title,
-    position,
-    removeToast,
-    description
-  });
-  ReactDOM.render(newElem, toastBlock);
+    const toastBlock = document.createElement('div')
+    toastBlock.style.position = 'relative'
+    toastBlock.style.flexShrink = 0
+    toastBlock.style.width = wWidth > 480 ? '440px' : '300px'
+    toastBlock.style.height = '83px'
+    toastBlock.style.marginBottom = '20px'
+    const newElem = React.createElement(Toast, {
+        type,
+        timer,
+        title,
+        position,
+        removeToast,
+        description,
+    })
+    ReactDOM.render(newElem, toastBlock)
 
-  if (!document.getElementById(styles[position]) || document.getElementById(styles[position]) == null) {
-    toastParentBlock = document.createElement('div');
-    toastParentBlock.style.position = 'fixed';
-    toastParentBlock.style.display = 'flex';
-    toastParentBlock.style.zIndex = 999999999999;
-    toastParentBlock.style.flexDirection = position === 'top-left' || position === 'top-right' || position === 'top-center' ? 'column-reverse' : 'column';
-    toastParentBlock.setAttribute('id', styles[position]);
-    toastParentBlock.appendChild(toastBlock);
-    toastify.appendChild(toastParentBlock);
-  } else {
-    document.getElementById(styles[position]).appendChild(toastBlock);
-  }
-};
+    if (!document.getElementById(styles[position]) || document.getElementById(styles[position]) == null) {
+        toastParentBlock = document.createElement('div')
+        toastParentBlock.style.position = 'fixed'
+        toastParentBlock.style.display = 'flex'
+        toastParentBlock.style.zIndex = 999999999999
+        toastParentBlock.style.flexDirection =
+            position === 'top-left' || position === 'top-right' || position === 'top-center'
+                ? 'column-reverse'
+                : 'column'
+        toastParentBlock.setAttribute('id', styles[position])
+        toastParentBlock.appendChild(toastBlock)
+        toastify.appendChild(toastParentBlock)
+    } else {
+        document.getElementById(styles[position]).appendChild(toastBlock)
+    }
+}
 
 export const toast = {
-  success: (title, props) => {
-    const { timer, position, description } = props || {};
-    createToast({
-      title,
-      type: 'success',
-      timer: timer ? timer : 5000,
-      position: position ? position : 'top-right',
-      description: description ? description : ''
-    });
-  },
-  info: (title, props) => {
-    const { timer, position, description } = props || {};
-    createToast({
-      title,
-      type: 'info',
-      timer: timer ? timer : 5000,
-      position: position ? position : 'top-right',
-      description: description ? description : ''
-    });
-  },
-  warn: (title, props) => {
-    const { timer, position, description } = props || {};
-    createToast({
-      title,
-      type: 'warn',
-      timer: timer ? timer : 5000,
-      position: position ? position : 'top-right',
-      description: description ? description : ''
-    });
-  },
-  error: (title, props) => {
-    const { timer, position, description } = props || {};
-    createToast({
-      title,
-      type: 'error',
-      timer: timer ? timer : 5000,
-      position: position ? position : 'top-right',
-      description: description ? description : ''
-    });
-  }
-};
+    success: (title, props) => {
+        const { timer, position, description } = props || {}
+        createToast({
+            title,
+            type: 'success',
+            timer: timer ? timer : 5000,
+            position: position ? position : 'top-right',
+            description: description ? description : '',
+        })
+    },
+    info: (title, props) => {
+        const { timer, position, description } = props || {}
+        createToast({
+            title,
+            type: 'info',
+            timer: timer ? timer : 5000,
+            position: position ? position : 'top-right',
+            description: description ? description : '',
+        })
+    },
+    warn: (title, props) => {
+        const { timer, position, description } = props || {}
+        createToast({
+            title,
+            type: 'warn',
+            timer: timer ? timer : 5000,
+            position: position ? position : 'top-right',
+            description: description ? description : '',
+        })
+    },
+    error: (title, props) => {
+        const { timer, position, description } = props || {}
+        createToast({
+            title,
+            type: 'error',
+            timer: timer ? timer : 5000,
+            position: position ? position : 'top-right',
+            description: description ? description : '',
+        })
+    },
+}
 
 export const Toaster = () => {
-  window.addEventListener('popstate', () => {
-    if (path !== window.location.href) {
-      if (!toastify) {
-        toastify = document.getElementById('toastify');
-      }
+    window.addEventListener('popstate', () => {
+        if (path !== window.location.href) {
+            if (!toastify) {
+                toastify = document.getElementById('toastify')
+            }
 
-      if (toastify.hasChildNodes()) {
-        toastify.innerHTML = '';
-      }
+            if (toastify.hasChildNodes()) {
+                toastify.innerHTML = ''
+            }
 
-      path = window.location.href;
+            path = window.location.href
+        }
+    })
+    const handleToasterClick = (e) => {
+        e.stopPropagation()
     }
-  });
-  const handleToasterClick = (e) => {
-    e.stopPropagation();
-  };
 
-  return (
-    <div onClick={handleToasterClick} id="toastify"></div>
-  );
-};
+    return <div onClick={handleToasterClick} id="toastify"></div>
+}

package/src/components/toaster/toaster.module.css

@@ -95,6 +95,19 @@
   animation-name: bounceOutRight;
 }
 
+.notify-title {
+  overflow: hidden; 
+  text-overflow: ellipsis;
+}
+
+.notify-desc {
+  display: -webkit-box; 
+  -webkit-box-orient: vertical; 
+  -webkit-line-clamp: 2; 
+  overflow: hidden; 
+  text-overflow: ellipsis;
+}
+
 @keyframes bounceInRight {
   from {
     opacity: 0;