diginet-core-ui 1.3.87 → 1.3.88

package/components/avatar/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { jsx, css, keyframes } from '@emotion/core';
 import AvatarDefault from "../../assets/avatar/default.svg";
@@ -27,7 +28,7 @@ const {
   zIndex: zIndexCORE
 } = useTheme();
 const existed = {},
-  urlAvatar = {};
+      urlAvatar = {};
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
     25% { -webkit-filter: blur(3px);}
@@ -35,6 +36,7 @@ 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);
@@ -45,6 +47,7 @@ const checkFileType = (type, matchType) => {
     return new RegExp(matchType).test(type);
   }
 };
+
 const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   actionIconHeight,
@@ -90,11 +93,17 @@ 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();
@@ -103,10 +112,12 @@ 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 = '';
       popupRef.current.instance.show({
@@ -114,6 +125,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
       return;
     }
+
     if (+maxSize && file.size > maxSize * 1024 ** 2) {
       input.target.value = '';
       popupRef.current.instance.show({
@@ -121,23 +133,28 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
       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, {
@@ -147,11 +164,13 @@ 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,
@@ -168,6 +187,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       },
       onLoad: () => setOnLoaded(true)
     }));
+
     if (lazyLoading) {
       return isInView ? _image : jsx("img", {
         src: defaultSrc,
@@ -178,27 +198,34 @@ 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) {
@@ -207,10 +234,12 @@ 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;
@@ -221,10 +250,11 @@ 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;
   });
@@ -304,6 +334,7 @@ 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};
@@ -313,6 +344,7 @@ const ActionIconCSS = actionIconWidth => css`
     opacity: 0;
     z-index: ${zIndexCORE(2)};
 `;
+
 const AvatarPreviewCSS = readOnly => css`
     ${displayBlock};
     ${positionRelative};
@@ -322,6 +354,7 @@ const AvatarPreviewCSS = readOnly => css`
     border-radius: 50%;
     cursor: ${readOnly ? 'initial' : 'pointer'};
 `;
+
 const AvatarContainerCSS = (AvatarPreviewCSSName, ActionIconCSSName) => css`
     ${displayInlineFlex};
     ${positionRelative};
@@ -341,6 +374,7 @@ const AvatarContainerCSS = (AvatarPreviewCSSName, ActionIconCSSName) => css`
         }
     }
 `;
+
 const AvatarRootCSS = (width, height, outlined) => css`
     ${displayBlock};
     ${positionRelative};
@@ -359,6 +393,7 @@ const AvatarRootCSS = (width, height, outlined) => css`
         height: 100%;
     }
 `;
+
 const MoreInfoCSS = css`
     ${displayBlock};
     ${positionRelative};
@@ -390,71 +425,95 @@ 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 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
+
+  /**
+   * 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
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/badge/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Icon } from "./..";
@@ -27,6 +28,7 @@ const iconSizeMap = new Map([['medium', 24], ['large', 32], ['giant', 40]]);
 const dotSizeMap = new Map([['medium', 8], ['large', 10], ['giant', 12]]);
 const dotIndentMap = new Map([['medium', 4], ['large', 2]]);
 const typographySizeMap = new Map([['medium', paragraph3], ['large', paragraph2], ['giant', paragraph1]]);
+
 const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) => {
   const halfDotSize = dotSize / 2;
   const {
@@ -44,6 +46,7 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
               ` : css`
                   top: ${-halfDotSize}px;
               `;
+
   if (contentDirection === 'right') {
     if (horizontal === 'left') {
       return css`
@@ -70,6 +73,7 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
     }
   }
 };
+
 const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   anchorOrigin,
@@ -95,20 +99,25 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const dotSize = content || content === 0 && showZero ? dotSizeMap.get(size) + 8 : dotSizeMap.get(size);
   const dotColor = colors[color] || colorMap.get(color) || color;
   const dotPos = calDotPos(anchorOrigin, !children && name ? 'right' : contentDirection, dotSize, content || content === 0, size);
+
   const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor);
+
   const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS.name);
+
   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;
   });
   return useMemo(() => {
     let node = children;
+
     if (!node && name) {
       node = jsx(Icon, {
         viewBox: true,
@@ -119,6 +128,7 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         ...iconProps
       });
     }
+
     return jsx("div", {
       css: _BadgeRootCSS,
       ref: ref,
@@ -134,6 +144,7 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, max && content > max ? max + '+' : content === 0 && !showZero ? null : content) : null);
   }, [anchorOrigin, children, className, color, content, contentDirection, iconProps, id, invisible, max, name, showZero, size, style, props]);
 }));
+
 const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor) => css`
     ${typographySize};
     ${flexRow};
@@ -149,6 +160,7 @@ const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor) => cs
     border-radius: ${dotSize / 2}px;
     padding: ${spacing([0, 1])};
 `;
+
 const BadgeRootCSS = (children, name, dotPos, BadgeNumberCSSName) => css`
     ${displayInlineFlex};
     ${itemsCenter};
@@ -162,6 +174,7 @@ const BadgeRootCSS = (children, name, dotPos, BadgeNumberCSSName) => css`
         ${(children || name) && dotPos};
     }
 `;
+
 Badge.defaultProps = {
   anchorOrigin: {
     vertical: 'top',
@@ -183,46 +196,58 @@ Badge.propTypes = {
     horizontal: PropTypes.oneOf(['left', 'right']),
     vertical: PropTypes.oneOf(['top', 'bottom'])
   }),
+
   /** The badge will be added relative to this node. */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** The color of the component. */
   color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
+
   /** The content rendered within the badge. */
   content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** Direction of content within the badge */
   contentDirection: PropTypes.oneOf(['left', 'right']),
+
   /** If `true`, the badge is invisible */
   invisible: PropTypes.bool,
+
   /** Max count to show. */
   max: PropTypes.number,
+
   /** Prop name of [ButtonIcon](https://core.diginet.com.vn/ui/?path=/docs/buttonicon) components.  */
   name: PropTypes.string,
+
   /** Controls whether the badge is hidden when `content` is zero. */
   showZero: PropTypes.bool,
-  /** Size of the components.
-   *
-   * * medium (dot 8px, typography p3)
-   * * large (button 10px, typography p2)
-   * * giant (button 12px, typography p1)
+
+  /** Size of the components.
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
+
   /** Style inline of component. */
   style: PropTypes.object,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: ref
 };