diginet-core-ui 1.3.78 → 1.3.79

package/components/alert/notify.js

@@ -1,198 +1,129 @@
-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 onAddAlert = (message, {
+  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 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'])
   })]),
-
+  /** Style inline of component. */
+  style: PropTypes.object,
+  /** Any [props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) of Alert */
+  props: PropTypes.any,
   /**
-   * 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 />
-   * }
+   * 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`.}
    */
-  getAddNotify: PropTypes.func.isRequired,
-
-  /** the width of the alert box  */
-  width: PropTypes.string,
-
-  /** 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
+  reference: ref
 };
-export default AlertNotify;
+export default Notify;

package/components/avatar/index.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { Fragment, memo, useRef, forwardRef, useState, useEffect, useMemo, useImperativeHandle, isValidElement } from 'react';
 import PropTypes from 'prop-types';
@@ -29,8 +28,8 @@ const {
   zIndex: zIndexCORE
 } = theme;
 const existed = {},
-      urlAvatar = {},
-      popupHandler = {};
+  urlAvatar = {},
+  popupHandler = {};
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
     25% { -webkit-filter: blur(3px);}
@@ -38,7 +37,6 @@ const blurKeyframe = keyframes`
     75% { -webkit-filter: blur(1px);}
     100% { -webkit-filter: blur(0px);}
 `;
-
 const checkFileType = (type, matchType) => {
   if (typeof matchType === 'object' && matchType instanceof RegExp) {
     return matchType.test(type);
@@ -49,7 +47,6 @@ const checkFileType = (type, matchType) => {
     return new RegExp(matchType).test(type);
   }
 };
-
 const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   actionIconHeight,
@@ -94,17 +91,11 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useIntersection(ref, () => {
     setIsInView(true);
   });
-
   const _ActionIconCSS = ActionIconCSS(actionIconWidth);
-
   const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly);
-
   const _AvatarContainerCSS = AvatarContainerCSS(_AvatarPreviewCSS.name, _ActionIconCSS.name);
-
   const _AvatarRootCSS = AvatarRootCSS(width, height, outlined);
-
   const _isMobile = isMobile.any();
-
   const triggerInput = e => {
     if (e || !existed[unique]) {
       inputRef.current.click();
@@ -113,45 +104,37 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       setViewAvatar(true);
     }
   };
-
   const onChangeAvatar = input => {
     const [file] = input.target.files;
     if (!file) return;
     const reader = new FileReader();
-
     if (!checkFileType(file.type, matchType)) {
       input.target.value = '';
       popupHandler[unique].show(wrongTypeError);
       return;
     }
-
     if (+maxSize && file.size > maxSize * 1024 ** 2) {
       input.target.value = '';
       popupHandler[unique].show(maxSizeError);
       return;
     }
-
     reader.onload = e => {
       urlAvatar[unique] = e.target.result;
       setSrcState(urlAvatar[unique]);
       existed[unique] = true;
     };
-
     reader.readAsDataURL(file);
     !!onChange && onChange(input);
   };
-
   const onRemoveAvatar = () => {
     setSrcState(null);
     existed[unique] = false;
     inputRef.current.value = '';
     !!onRemove && onRemove();
   };
-
   const renderData = () => {
     if ( /*#__PURE__*/isValidElement(data)) return data;
     const info = Object.keys(data || {});
-
     if (info !== null && info !== void 0 && info.length) {
       return info.map((key, index) => {
         return jsx(Typography, {
@@ -161,13 +144,11 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }, key + ': ' + data[key]);
       });
     }
-
     return jsx(Typography, {
       color: textTooltip,
       type: 'p1'
     }, getGlobal('noDataText'));
   };
-
   const renderImage = () => {
     const _image = jsx(Fragment, null, !onLoaded && jsx("img", {
       src: defaultSrc,
@@ -184,7 +165,6 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       },
       onLoad: () => setOnLoaded(true)
     }));
-
     if (lazyLoading) {
       return isInView ? _image : jsx("img", {
         src: defaultSrc,
@@ -195,34 +175,27 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     } else return _image;
   };
-
   const showMoreInfo = () => {
     if (hoverAble) setViewMoreInfo(true);
   };
-
   const closeMoreInfo = () => {
     if (hoverAble) setViewMoreInfo(false);
   };
-
   const _onClick = event => {
     onClick && event.stopPropagation();
     if (disabled) return;
-
     if (readOnly) {
       if (_isMobile) showMoreInfo();
     } else {
       allowEdit ? triggerInput() : onClick === null || onClick === void 0 ? void 0 : onClick(event);
     }
   };
-
   const _onMouseEnter = () => {
     if (!_isMobile) showMoreInfo();
   };
-
   const _onMouseLeave = () => {
     if (!_isMobile) closeMoreInfo();
   };
-
   useEffect(() => {
     if (src) {
       if (isInView || !lazyLoading) {
@@ -231,12 +204,10 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         urlAvatar[unique] = src;
         img.src = src;
         img.alt = '';
-
         img.onerror = () => {
           setSrcState(defaultSrc);
           existed[unique] = false;
         };
-
         img.onload = () => {
           setSrcState(src);
           existed[unique] = true;
@@ -247,11 +218,10 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = { ...action
+    const _instance = {
+      ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -334,7 +304,6 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }));
   }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, isInView, onLoaded, srcState, viewAvatar, viewMoreInfo]);
 }));
-
 const ActionIconCSS = actionIconWidth => css`
     ${flexCol};
     ${positionAbsolute};
@@ -344,7 +313,6 @@ const ActionIconCSS = actionIconWidth => css`
     opacity: 0;
     z-index: ${zIndexCORE(2)};
 `;
-
 const AvatarPreviewCSS = readOnly => css`
     ${displayBlock};
     ${positionRelative};
@@ -354,7 +322,6 @@ const AvatarPreviewCSS = readOnly => css`
     border-radius: 50%;
     cursor: ${readOnly ? 'initial' : 'pointer'};
 `;
-
 const AvatarContainerCSS = (AvatarPreviewCSSName, ActionIconCSSName) => css`
     ${inlineFlex};
     ${positionRelative};
@@ -374,7 +341,6 @@ const AvatarContainerCSS = (AvatarPreviewCSSName, ActionIconCSSName) => css`
         }
     }
 `;
-
 const AvatarRootCSS = (width, height, outlined) => css`
     ${displayBlock};
     ${positionRelative};
@@ -393,7 +359,6 @@ const AvatarRootCSS = (width, height, outlined) => css`
         height: 100%;
     }
 `;
-
 const MoreInfoCSS = css`
     ${displayBlock};
     ${positionRelative};
@@ -425,82 +390,58 @@ Avatar.defaultProps = {
 Avatar.propTypes = {
   /** The height of action icon. */
   actionIconHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** The width of action icon. */
   actionIconWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** If `true`, allow to edit avatar. */
   allowEdit: PropTypes.bool,
-
   /** Class for component. */
   className: PropTypes.string,
-
   /** If `true`, display remove avatar icon. */
   clearAble: PropTypes.bool,
-
   /**
    * data to display when hoverAble is true<br />
    * data is an object or function return a jsx element
    */
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.node]),
-
   /**
    * it is used to display the default if there is no src<br />
    * if undefined, will display icons available in the icons store
    */
   defaultSrc: PropTypes.string,
-
   /** the direction to display more info */
   direction: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-
   /** prevent all events, only view */
   disabled: PropTypes.bool,
-
   /** The height of avatar box (48 or '48px' or ...) */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** show more info in popover if true */
   hoverAble: PropTypes.bool,
-
   /** lazy loading */
   lazyLoading: PropTypes.bool,
-
   /** type of image was allowed */
   matchType: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func, PropTypes.array]),
-
   /** maximum size for avatar file (unit: MB) */
   maxSize: PropTypes.number,
-
   /** the error to show on exceeded allowed size */
   maxSizeError: PropTypes.string,
-
   /** will run after change avatar */
   onChange: PropTypes.func,
-
   /** Callback fired when the component is clicked. */
   onClick: PropTypes.func,
-
   /** will run after remove avatar */
   onRemove: PropTypes.func,
-
   /** border of avatar (true or '1px solid #color') */
   outlined: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** only view and allow show more info if hoverAble is true */
   readOnly: PropTypes.bool,
-
   /** source of file (http:// or https://) */
   src: PropTypes.string,
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** The width of avatar box (48 or '48px' or ...) */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** the error to show on wrong type */
   wrongTypeError: PropTypes.string,
-
   /**
    * ref methods
    *