diginet-core-ui 1.3.75 → 1.3.76-beta.2

package/components/alert/index.js

@@ -1,21 +1,21 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useState, useEffect, useMemo, useRef, forwardRef } from 'react';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import LinearProgress from '../progress/linear';
-import { color as colors } from '../../styles/colors';
 import ButtonIcon from '../button/icon';
 import Icon from '../../icons';
 import { hexToRGBA } from '../../styles/color-helper';
+import { animations } from '../../styles/animation';
+import { classNames, useDelayUnmount } from '../../utils';
 import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
-import theme from '../../theme/settings';
+import { useTheme, useColor as colors } from '../../theme';
 const {
   colors: {
     system: {
-      rest,
-      white
+      white: systemWhite
     }
   },
   typography: {
@@ -28,31 +28,40 @@ const {
   },
   spacing,
   zIndex: zIndexCORE
-} = theme;
+} = useTheme();
 const iconMap = new Map([['info', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'CancelFilled']]);
 const maxWidthMap = new Map([['tiny', 320], ['small', 400], ['medium', 480]]);
 const primaryTypoMap = new Map([['tiny', heading5], ['small', heading4], ['medium', heading3]]);
 const iconSizeMap = new Map([['tiny', 16], ['small', 20], ['medium', 24]]);
 const linearProgressSizeMap = new Map([['tiny', 2], ['small', 3], ['medium', 4]]);
+const transitionTime = 300;
 const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  color,
-  text,
-  secondary,
-  size,
-  className,
-  progressing,
+  action = {},
   autoDisappear,
-  duration,
+  children,
+  className,
   clearAble,
+  color,
+  duration,
   onClose,
-  children
-}, ref) => {
+  progressing,
+  secondary,
+  size,
+  text,
+  type
+}, reference) => {
+  type = type || color;
+  const ref = useRef(null);
   const clearIconRef = useRef(null);
   const [percentState, setPercentState] = useState(100);
-  const mainColor = colors[color];
+  const [isClose, setIsClose] = useState(false);
+  const showAlert = useDelayUnmount(!isClose, transitionTime);
+  const mainColor = colors[type];
   const opacityColor = hexToRGBA(mainColor, 0.15);
+  const iconName = iconMap.get(type);
+  const iconSize = iconSizeMap.get(size);
 
-  const _AlertContainerCSS = AlertContainerCSS(size, progressing, duration);
+  const _AlertContainerCSS = AlertContainerCSS(size);
 
   const _AlertInfoCSS = AlertInfoCSS(mainColor, opacityColor);
 
@@ -64,53 +73,51 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _linearProgressCSS = linearProgressCSS(size);
 
-  const onClearAlert = (el, urgency) => {
-    var _el$parentNode;
-
-    if (!el) return;
-    el.style.pointerEvent = 'none';
-    const alertNode = el === null || el === void 0 ? void 0 : (_el$parentNode = el.parentNode) === null || _el$parentNode === void 0 ? void 0 : _el$parentNode.parentNode;
-
-    if (alertNode) {
-      if (urgency) {
-        alertNode.style.transition = `opacity 1s ease`;
-        alertNode.style.opacity = 1;
-      }
-
-      setTimeout(() => {
-        alertNode.style.opacity = 0;
-      }, 0);
-      setTimeout(() => {
-        if (onClose) onClose(alertNode);
-        alertNode.remove();
-      }, !urgency && progressing ? duration * 1000 + 300 : duration * 1000);
-    }
+  const _onClose = () => {
+    setIsClose(true);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
   };
 
+  useEffect(() => {
+    setTimeout(() => {
+      setPercentState(0);
+    }, 100);
+  }, []);
+  useEffect(() => {
+    if (ref.current && isClose) ref.current.style.opacity = 0;
+  }, [isClose]);
+  useEffect(() => {
+    setTimeout(() => {
+      if (autoDisappear) _onClose();
+    }, duration);
+  }, [autoDisappear]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const AlertView = useMemo(() => {
     let node = children;
 
     if (!node) {
-      const iconName = iconMap.get(color);
-
-      if (iconName) {
-        node = jsx(Icon, {
-          name: iconName,
-          width: iconSizeMap.get(size),
-          height: iconSizeMap.get(size),
-          color: 'currentColor',
-          viewBox: true
-        });
-      } else {
-        node = jsx("span", {
-          css: NotFoundIconCSS
-        });
-      }
+      node = jsx(Icon, {
+        name: iconName,
+        width: iconSize,
+        height: iconSize,
+        color: 'currentColor',
+        viewBox: true
+      });
     }
 
     return jsx("div", {
       css: _AlertInfoCSS,
-      className: ['DGN-UI-Alert', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Alert', className)
     }, jsx("span", {
       css: AlertIconCSS,
       className: 'DGN-UI-Alert-Icon'
@@ -125,17 +132,17 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'DGN-UI-Alert-Content-Secondary'
     }, secondary)), jsx("span", {
       css: AlertClearIconCSS,
-      onClick: e => onClearAlert(e.currentTarget, true),
+      onClick: _onClose,
       ref: clearIconRef,
       className: 'DGN-UI-Alert-Clear'
     }, clearAble ? jsx(ButtonIcon, {
       circular: true,
       viewType: 'text',
       size: size,
-      color: color,
+      color: type,
       name: 'Close'
     }) : null));
-  }, [color, text, clearAble, secondary, size, children, className]);
+  }, [color, text, clearAble, secondary, size, children, className, type, onClose, mainColor, opacityColor, isClose]);
   const LinearView = useMemo(() => {
     return progressing ? jsx("span", {
       css: _linearProgressCSS,
@@ -145,39 +152,30 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       background: 'transparent',
       color: mainColor,
       percent: percentState,
-      duration: duration,
+      duration: duration / 1000,
       height: linearProgressSizeMap.get(size),
       style: {
         boxShadow: 'none'
       }
     })) : null;
-  }, [progressing, size, percentState]);
-  useEffect(() => {
-    if (progressing) {
-      setTimeout(() => {
-        setPercentState(0);
-      }, 1);
-    }
-
-    if (autoDisappear) {
-      onClearAlert(clearIconRef.current);
-    }
-  }, []);
-  return jsx("div", {
+  }, [progressing, size, duration, percentState]);
+  return showAlert ? jsx("div", {
     css: _AlertContainerCSS,
     className: 'DGN-UI-Container-Alert',
     ref: ref
-  }, AlertView, LinearView);
+  }, AlertView, LinearView) : null;
 }));
+const fadeIn = animations.fadeIn;
 
-const AlertContainerCSS = (size, progressing, duration) => css`
+const AlertContainerCSS = size => css`
     ${positionRelative};
     ${displayBlock};
     max-width: ${maxWidthMap.get(size)}px;
-    transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease ${progressing ? duration / 2 : 0}s;
+    transition: opacity ${transitionTime}ms ease;
     margin-bottom: 1rem;
     pointer-events: auto;
     z-index: ${zIndexCORE(1)};
+    animation: ${fadeIn} ${transitionTime}ms ease;
 `;
 
 const AlertInfoCSS = (mainColor, opacityColor) => css`
@@ -189,7 +187,7 @@ const AlertInfoCSS = (mainColor, opacityColor) => css`
     ${border(1, mainColor)};
     color: ${mainColor};
     background-image: linear-gradient(${opacityColor}, ${opacityColor});
-    background-color: ${white};
+    background-color: ${systemWhite};
     width: 100%;
     min-width: 320px;
     padding: ${spacing([0, 1, 0, 4])};
@@ -198,13 +196,13 @@ const AlertInfoCSS = (mainColor, opacityColor) => css`
 
 const AlertIconCSS = css`
     display: inherit;
-    margin-right: 10px;
+    margin-right: ${spacing([2.5])};
     padding: ${spacing([2, 0])};
 `;
 
 const AlertTextCSS = clearAble => css`
     ${displayBlock};
-    margin-right: ${clearAble ? '10px' : 0};
+    margin-right: ${spacing([clearAble ? 2.5 : 0])};
     padding: ${spacing([2, 0])};
     align-self: center;
 `;
@@ -231,57 +229,51 @@ const AlertClearIconCSS = css`
 const linearProgressCSS = size => css`
     ${displayBlock};
     ${positionRelative};
-    margin-top: ${size === 'medium' ? '4px' : '2px'};
-    padding: 0 5px;
+    margin-top: ${spacing([size === 'medium' ? 1 : 0.5])};
+    padding: ${spacing([0, 1.25])};
 `;
 
-const NotFoundIconCSS = css`
-    ${displayBlock};
-    width: 70%;
-    height: 70%;
-    border: 1px dashed ${rest};
-`;
 Alert.defaultProps = {
-  color: 'info',
-  size: 'medium',
+  autoDisappear: false,
   className: '',
   clearAble: true,
+  color: 'info',
+  duration: 2000,
   progressing: false,
-  autoDisappear: false,
-  duration: 5
+  size: 'medium'
 };
 Alert.propTypes = {
-  /** color is a string, it's background color of Alert */
-  color: PropTypes.oneOf(['info', 'success', 'warning', 'danger']),
+  /** Automatically remove the Alert component after the timer ends (milliseconds). */
+  autoDisappear: PropTypes.bool,
 
-  /** class for Alert component */
-  className: PropTypes.string,
+  /** The element to display in alert like text props (priority). */
+  children: PropTypes.node,
 
-  /** The text to show in alert */
-  text: PropTypes.string,
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** The secondary text to show in alert (under primary) */
-  secondary: PropTypes.string,
+  /** If `true`, show clear icon to close alert. */
+  clearAble: PropTypes.bool,
 
-  /** size is a string, size of Alert */
-  size: PropTypes.oneOf(['tiny', 'small', 'medium']),
+  /** The amount of time the alert is displayed. The unit is the milliseconds. */
+  duration: PropTypes.number,
 
-  /** Display clear icon to close alert */
-  clearAble: PropTypes.bool,
+  /** Callback fired when the component closed. */
+  onClose: PropTypes.func,
 
-  /** use to display linear progress in duration time show Alert */
+  /** If `true`, show linear progress in duration time.*/
   progressing: PropTypes.bool,
 
-  /** Automatically remove the Alert component after the timer ends (duration) */
-  autoDisappear: PropTypes.bool,
+  /** The secondary text to show in alert (under primary). */
+  secondary: PropTypes.string,
 
-  /** The amount of time the alert is displayed. The unit is the second */
-  duration: PropTypes.number,
+  /** The size of the component. */
+  size: PropTypes.oneOf(['tiny', 'small', 'medium']),
 
-  /** The function will run after remove an Alert component */
-  onClose: PropTypes.func,
+  /** The text to show in alert. */
+  text: PropTypes.string,
 
-  /** The element to display in alert like text props (priority) */
-  children: PropTypes.node
+  /** Type of the component. */
+  type: PropTypes.oneOf(['info', 'success', 'warning', 'danger'])
 };
 export default Alert;

package/components/alert/notify.js

@@ -1,198 +1,139 @@
-import React, { memo, useEffect, forwardRef, useImperativeHandle } from 'react';
-import ReactDOM from 'react-dom';
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useEffect, forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import ReactDOM, { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
 import Alert from './';
-import { randomString } from '../../utils';
 import theme from '../../theme/settings';
+import { classNames, refType as ref } from '../../utils';
+import { backgroundTransparent, pointerEventsNone, positionFixed } from '../../styles/general';
 const {
   zIndex: zIndexCORE
 } = theme;
-const positions = {
-  general: {
-    position: 'fixed',
-    zIndex: zIndexCORE(2),
-    backgroundColor: 'transparent',
-    pointerEvents: 'none'
-  },
-  vertical: {
-    top: {
-      top: '15px'
-    },
-    center: {
-      top: '50%',
-      transform: 'translateY(-50%)'
-    },
-    bottom: {
-      display: 'flex',
-      flexDirection: 'column-reverse',
-      bottom: 0
-    }
-  },
-  horizontal: {
-    left: {
-      left: '15px'
-    },
-    center: {
-      left: '50%',
-      transform: 'translateX(-50%)'
-    },
-    right: {
-      right: '15px'
-    }
-  }
-};
-const str = randomString(6, {
-  allowSymbol: false
-});
-const AlertNotify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  position,
+const positionVerticalMap = new Map([['top', css`
+            top: 15px;
+        `], ['center', css`
+            top: 50%;
+            transform: translateY(-50%);
+        `], ['bottom', css`
+            display: flex;
+            flex-direction: column-reverse;
+            bottom: 0;
+        `]]);
+const positionHorizontalMap = new Map([['left', css`
+            left: 15px;
+        `], ['center', css`
+            left: 50%;
+            transform: translateX(-50%);
+        `], ['right', css`
+            right: 15px;
+        `]]);
+const Notify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  className,
   getAddNotify,
-  width,
-  maxWidth,
-  height,
-  maxHeight,
+  id,
+  position,
+  style,
   ...props
 }, reference) => {
-  // Return true if it's a new position
-  const checkPosition = pos => {
-    if (pos === position || pos.vertical === (position.vertical || 'bottom') && pos.horizontal === (position.horizontal || 'center')) {
-      return false;
-    }
-
-    if (pos === 'center') {
-      pos = {
-        vertical: 'center',
-        horizontal: 'center'
-      };
-    }
-
-    if (pos.vertical && pos.horizontal && /^top|center|bottom$/.test(pos.vertical) && /^left|center|right$/.test(pos.horizontal)) {
-      return true;
-    }
-
-    return false;
-  };
-
-  const renderNotifyAlertPosition = (pos, className) => {
-    if (pos === 'center') {
-      pos = {
-        vertical: 'center',
-        horizontal: 'center'
-      };
-    }
-
-    const el = document.createElement('div');
-    el.className = `Notify-Alert-${className || pos.vertical + '-' + pos.horizontal}`;
-    Object.assign(el.style, positions.general, positions.vertical[pos.vertical || 'bottom'], positions.horizontal[pos.horizontal || 'center'], pos.vertical === pos.horizontal ? {
-      transform: 'translate(-50%, -50%)'
-    } : {}, {
-      width,
-      maxWidth,
-      height,
-      maxHeight
-    });
-    document.body.appendChild(el);
-  };
-
-  const onClose = (e, removePosition) => {
-    var _e$parentNode;
-
-    (_e$parentNode = e.parentNode) === null || _e$parentNode === void 0 ? void 0 : _e$parentNode.remove();
-
-    if (removePosition) {
-      const node = document.querySelector(`div[class^="Notify-Alert-${removePosition.vertical}-${removePosition.horizontal}"]`);
-
-      if (node && node.childNodes && !node.childNodes.length) {
-        node.remove();
-      }
-    }
-  };
+  const ref = useRef(null);
+  const [positionState, setPositionState] = useState(position);
+  const PositionVerticalCSS = positionVerticalMap.get((positionState === null || positionState === void 0 ? void 0 : positionState.vertical) || 'bottom');
+  const PositionHorizontalCSS = positionHorizontalMap.get((positionState === null || positionState === void 0 ? void 0 : positionState.horizontal) || 'center');
 
-  const onAddAlert = (message, {
+  const showNotify = (message, {
     position,
     ...options
   } = {}) => {
     options = typeof options === 'object' ? options : {};
-    const el = document.createElement('div');
-    el.className = `Notify-Alert-${str}-item`;
 
-    if (position && checkPosition(position)) {
-      if (!document.querySelector(`div[class^="Notify-Alert-${position.vertical}-${position.horizontal}"]`)) {
-        renderNotifyAlertPosition(position);
-      }
-
-      ReactDOM.render( /*#__PURE__*/React.createElement(Alert, {
-        onClose: e => onClose(e, position),
-        secondary: message,
-        ...props,
-        ...options
-      }), document.querySelector(`div[class^="Notify-Alert-${position.vertical}-${position.horizontal}"]`).appendChild(el));
-    } else {
-      ReactDOM.render( /*#__PURE__*/React.createElement(Alert, {
-        onClose: onClose,
-        secondary: message,
-        ...props,
-        ...options
-      }), document.querySelector(`div[class^="Notify-Alert-"]`).appendChild(el));
+    if (position) {
+      setPositionState(position);
     }
+
+    const el = document.createElement('div');
+    el.className = 'DGN-UI-Notify-Alert-Item';
+    ReactDOM.render(jsx(Alert // onClose={() => el.remove()}
+    , {
+      secondary: message,
+      ...props,
+      ...options
+    }), ref.current.appendChild(el));
   };
 
   useEffect(() => {
-    if (getAddNotify && typeof getAddNotify === 'function') getAddNotify(onAddAlert);
+    if (getAddNotify && typeof getAddNotify === 'function') getAddNotify(showNotify);
   }, [props]);
   useEffect(() => {
-    renderNotifyAlertPosition(position, str);
-    return () => {
-      document.querySelector(`div[class^="Notify-Alert-${str}"]`).remove();
-    };
-  }, [position, width, maxWidth, height, maxHeight]);
-  useImperativeHandle(reference, () => ({
-    add: onAddAlert
-  }));
-  return null;
+    setPositionState(position);
+  }, [position]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      show: showNotify,
+      ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    currentRef.add = showNotify;
+    return currentRef;
+  });
+  const NotifyContainerView = jsx("div", {
+    ref: ref,
+    css: [AlertCSS, PositionVerticalCSS, PositionHorizontalCSS],
+    id: id,
+    style: style,
+    className: classNames('DGN-UI-Notify-Alert', (position === null || position === void 0 ? void 0 : position.vertical) || 'center' + '-' + (position === null || position === void 0 ? void 0 : position.horizontal) || 'center', className)
+  });
+  return /*#__PURE__*/createPortal(NotifyContainerView, document.body);
 }));
-AlertNotify.defaultProps = {
+const AlertCSS = css`
+    ${positionFixed};
+    ${pointerEventsNone};
+    ${backgroundTransparent};
+    z-index: ${zIndexCORE(2)};
+`;
+Notify.defaultProps = {
+  className: '',
   position: {
     vertical: 'bottom',
     horizontal: 'center'
-  }
+  },
+  style: {}
 };
-AlertNotify.propTypes = {
+Notify.propTypes = {
+  /** Class for component. */
+  className: PropTypes.string,
+
   /**
    * used to set position of Alert (is a string or an object)
    * string is center (obligatory) as {vertical: 'center', horizontal: 'center'}
    */
   position: PropTypes.oneOfType([PropTypes.oneOf(['center']), PropTypes.shape({
-    vertical: PropTypes.oneOf(['top', 'center', 'bottom']).isRequired,
-    horizontal: PropTypes.oneOf(['left', 'center', 'right']).isRequired
+    horizontal: PropTypes.oneOf(['center', 'left', 'right']),
+    vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   })]),
 
-  /**
-   * get the function used to add a new alert<br />
-   * 2 parameters:<br />
-   * + message: message for notify<br />
-   * + options: is an object insist {<br />
-   *      position: position other than the default (if necessary)<br />
-   *      duration: new duration,<br />
-   *      color: new color,<br />
-   *      progressing: new progressing value,<br />
-   *      autoDisappear: new autoDisappear value,<br />
-   *      size: new autoDisappear,<br />
-   *      and any props else in Alert component <br />
-   * }
-   */
-  getAddNotify: PropTypes.func.isRequired,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** the width of the alert box  */
-  width: PropTypes.string,
+  /** Any [props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) of Alert */
+  props: PropTypes.any,
 
-  /** the maximum width of the alert box */
-  maxWidth: PropTypes.string,
-
-  /** the height of the alert box */
-  height: PropTypes.string,
-
-  /** the maximum height of the alert box */
-  maxHeight: PropTypes.string
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show(message, option): Show notify
+   *  * @param {message} - number
+   *  * @param {options} - object
+   *      * {[Props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) applied to the `Alert`.}
+   */
+  reference: ref
 };
-export default AlertNotify;
+export default Notify;