diginet-core-ui 1.3.51 → 1.3.52

package/components/avatar/index.js

@@ -12,18 +12,22 @@ import { getGlobal } from '../../global';
 import AvatarDefault from '../../assets/avatar/default.svg';
 import { alignCenter, borderNone, displayBlock, displayNone, flexCol, inlineFlex, overflowHidden, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
 import isMobile from '../../utils/isMobile';
-import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  system: {
-    white
-  },
-  fill: {
-    tooltip: fillTooltip
+  colors: {
+    system: {
+      white
+    },
+    fill: {
+      tooltip: fillTooltip
+    },
+    text: {
+      tooltip: textTooltip
+    }
   },
-  text: {
-    tooltip: textTooltip
-  }
-} = colors;
+  spacing,
+  zIndex: zIndexCORE
+} = theme;
 const existed = {},
       urlAvatar = {},
       popupHandler = {};
@@ -34,6 +38,18 @@ 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);
+  } else if (typeof matchType === 'object' && Array.isArray(matchType)) {
+    const pattern = new RegExp('^image/(' + matchType.join('|') + ')', 'i');
+    return pattern.test(type);
+  } else {
+    return new RegExp(matchType).test(type);
+  }
+};
+
 const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   src,
   defaultSrc,
@@ -56,7 +72,9 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   readOnly,
   disabled,
   lazyLoading,
-  id
+  id,
+  allowEdit,
+  onClick
 }, reference) => {
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
@@ -94,23 +112,12 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const checkFileType = type => {
-    if (typeof matchType === 'object' && matchType instanceof RegExp) {
-      return matchType.test(type);
-    } else if (typeof matchType === 'object' && Array.isArray(matchType)) {
-      const pattern = new RegExp('^image/(' + matchType.join('|') + ')', 'i');
-      return pattern.test(type);
-    } else {
-      return new RegExp(matchType).test(type);
-    }
-  };
-
   const onChangeAvatar = input => {
     const [file] = input.target.files;
     if (!file) return;
     const reader = new FileReader();
 
-    if (!checkFileType(file.type)) {
+    if (!checkFileType(file.type, matchType)) {
       input.target.value = '';
       popupHandler[unique].show(wrongTypeError);
       return;
@@ -194,12 +201,15 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (hoverAble) setViewMoreInfo(false);
   };
 
-  const _onClick = () => {
+  const _onClick = event => {
+    onClick && event.stopPropagation();
     if (disabled) return;
 
     if (readOnly) {
       if (_isMobile) showMoreInfo();
-    } else triggerInput();
+    } else {
+      allowEdit ? triggerInput() : onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
   };
 
   const _onMouseEnter = () => {
@@ -264,7 +274,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onMouseLeave: _onMouseLeave,
       tabIndex: "-1",
       onBlur: closeMoreInfo
-    }, renderImage())), !readOnly && !disabled && jsx("span", {
+    }, renderImage())), allowEdit && !readOnly && !disabled && jsx("span", {
       css: _ActionIconCSS
     }, jsx(ButtonIcon, {
       viewType: 'ghost',
@@ -315,7 +325,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       icon: 'danger',
       fullScreen: true
     }));
-  }, [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble, outlined, actionIconWidth, actionIconHeight, lazyLoading, defaultSrc, direction, data, maxSizeError, srcState, isInView, onLoaded, viewAvatar, viewMoreInfo]);
+  }, [width, height, readOnly, disabled, clearAble, maxSize, matchType, hoverAble, outlined, actionIconWidth, actionIconHeight, lazyLoading, defaultSrc, direction, data, maxSizeError, allowEdit, srcState, isInView, onLoaded, viewAvatar, viewMoreInfo]);
 }));
 
 const ActionIconCSS = actionIconWidth => css`
@@ -325,7 +335,7 @@ const ActionIconCSS = actionIconWidth => css`
     min-width: ${actionIconWidth}px;
     transition: opacity 0.5s;
     opacity: 0;
-    z-index: 9002;
+    z-index: ${zIndexCORE(2)};
 `;
 
 const AvatarPreviewCSS = readOnly => css`
@@ -380,12 +390,13 @@ const AvatarRootCSS = (width, height, outlined) => css`
 const MoreInfoCSS = css`
     ${displayBlock};
     ${positionRelative};
-    padding: 8px;
+    padding: ${spacing([2])};
 `;
 const blurAnimationCSS = css`
     animation: ${blurKeyframe} 1s ease;
 `;
 Avatar.defaultProps = {
+  allowEdit: false,
   disabled: false,
   readOnly: false,
   clearAble: true,
@@ -404,6 +415,9 @@ Avatar.defaultProps = {
   lazyLoading: false
 };
 Avatar.propTypes = {
+  /** If `true`, allow to edit avatar. */
+  allowEdit: PropTypes.bool,
+
   /** prevent all events, only view */
   disabled: PropTypes.bool,
 
@@ -470,12 +484,12 @@ Avatar.propTypes = {
   /** will run after change avatar */
   onChange: PropTypes.func,
 
+  /** Callback fired when the component is clicked. */
+  onClick: PropTypes.func,
+
   /** lazy loading */
   lazyLoading: PropTypes.bool,
 
-  /** any props else */
-  props: PropTypes.any,
-
   /**
    * ref methods
    *

package/components/typography/index.js

@@ -6,36 +6,38 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { renderHTML } from '../../utils';
 import { Popover } from '..';
-import { typography } from '../../styles/typography';
 import { breakWord, displayBlock, displayInlineBlock, overflowHidden, positionRelative, textCapitalize, textCenter, textUppercase } from '../../styles/general';
 import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  title1,
-  title2,
-  title3,
-  title4,
-  heading1,
-  heading2,
-  heading3,
-  heading4,
-  heading5,
-  heading6,
-  paragraph1,
-  paragraph2,
-  paragraph3
-} = typography;
-const {
-  system: {
-    rest
-  },
-  text: {
-    main,
-    tooltip: textTooltip
+  colors: {
+    system: {
+      rest
+    },
+    text: {
+      main,
+      tooltip: textTooltip
+    },
+    fill: {
+      tooltip: fillTooltip
+    }
   },
-  fill: {
-    tooltip: fillTooltip
+  typography: {
+    title1,
+    title2,
+    title3,
+    title4,
+    heading1,
+    heading2,
+    heading3,
+    heading4,
+    heading5,
+    heading6,
+    paragraph1,
+    paragraph2,
+    paragraph3
   }
-} = colors;
+} = theme;
 const typographyMap = new Map([['t1', title1], ['t2', title2], ['t3', title3], ['t4', title4], ['h1', heading1], ['h2', heading2], ['h3', heading3], ['h4', heading4], ['h5', heading5], ['h6', heading6], ['p1', paragraph1], ['p2', paragraph2], ['p3', paragraph3]]);
 const colorMap = new Map([['default', main], ['secondary', rest]]);
 
@@ -85,27 +87,31 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return Array.isArray(children) && !children.some(node => node && String(node.$$typeof) === 'Symbol(react.element)') ? children.join('') : children;
   };
 
-  const renderTooltip = useMemo(() => jsx(Popover, {
-    open: openTooltip,
-    pressESCToClose: false,
-    bgColor: fillTooltip,
-    anchor: ref,
-    fullScreen: false,
-    width: 'max-content',
-    style: {
-      color: textTooltip
-    },
-    onMouseEnter: () => setHoverTooltip(true, true),
-    onMouseLeave: () => setHoverTooltip(false, true),
-    direction: tooltipDirection
-  }, renderHTML(renderChildren(), mapping, {
-    css: _TextRootCSS,
-    className: classNames(true),
-    style: {
-      color: textTooltip,
-      padding: '4px 6px'
-    }
-  })), [openTooltip, tooltipDirection, children, mapping, color, type, lineClamp]);
+  const renderTooltip = useMemo(() => {
+    var _ref$current;
+
+    return jsx(Popover, {
+      open: openTooltip,
+      pressESCToClose: false,
+      bgColor: fillTooltip,
+      anchor: ref,
+      fullScreen: false,
+      width: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth) || 'max-content',
+      style: {
+        color: textTooltip
+      },
+      onMouseEnter: () => setHoverTooltip(true, true),
+      onMouseLeave: () => setHoverTooltip(false, true),
+      direction: tooltipDirection
+    }, renderHTML(renderChildren(), mapping, {
+      css: _TextRootCSS,
+      className: classNames(true),
+      style: {
+        color: textTooltip,
+        padding: '4px 6px'
+      }
+    }));
+  }, [openTooltip, tooltipDirection, children, mapping, color, type, lineClamp]);
   return jsx(Fragment, null, renderHTML(renderChildren(), mapping, {
     ref: ref,
     css: _TextRootCSS,
@@ -172,42 +178,43 @@ Typography.defaultProps = {
 
 export const arrTypeTypography = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
 Typography.propTypes = {
-  type: PropTypes.oneOf(arrTypeTypography),
+  /** If `true`, text-transform is capitalized. It overrides the value of the `uppercase` prop. */
+  capitalize: PropTypes.bool,
 
-  /** color of text ['primary', 'secondary', 'success', 'warning', 'danger', 'info', '#hex', rgb(#,#,#)] */
-  color: PropTypes.string,
+  /** If `true`, text-align is center. */
+  center: PropTypes.bool,
 
-  /** mapping with the html tag */
-  mapping: PropTypes.string,
+  /** The content of the component. */
+  children: PropTypes.node,
 
-  /** class of Typography component */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** text-align is center if true */
-  center: PropTypes.bool,
+  /** Color of text ['primary', 'secondary', 'success', 'warning', 'danger', 'info', '#hex', rgb(#,#,#)]. */
+  color: PropTypes.string,
 
-  /** text-transform is uppercase if true */
-  uppercase: PropTypes.bool,
+  /** If true, the component will take up the full width of its container. */
+  fullWidth: PropTypes.bool,
 
-  /** text-transform is capitalized if true (and uppercase is false) */
-  capitalize: PropTypes.bool,
+  /** If `true`, hover will show tooltip when text clamped. */
+  hoverTooltip: PropTypes.bool,
 
   /** The line-clamp property truncates text at a specific number of lines. */
   lineClamp: PropTypes.number,
 
-  /** If true, hover will show tooltip when text clamped. */
-  hoverTooltip: PropTypes.bool,
+  /** The component used for the root node. Either a string to use a HTML element or a component. */
+  mapping: PropTypes.string,
 
-  /** Tooltip direction */
-  tooltipDirection: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /** Accepts all props which `mapping` tag support. */
+  props: PropTypes.object,
 
-  /** allows maximum screen width if true */
-  fullWidth: PropTypes.bool,
+  /** Tooltip direction. */
+  tooltipDirection: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 
-  /** content to display (like text) */
-  children: PropTypes.node,
+  /** Applies the theme typography styles. */
+  type: PropTypes.oneOf(arrTypeTypography),
 
-  /** any props else */
-  props: PropTypes.object
+  /** If `true`, text-transform is uppercase. */
+  uppercase: PropTypes.bool
 };
 export default Typography;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.51",
+  "version": "1.3.52",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,10 @@ npm test
 ```
 
 ## Changelog
+## 1.3.52
+- \[Fixed\]: Avatar – Add props onClick, allowEdit
+- \[Fixed\]: Typography – Fix tooltip width fit Typography
+
 ## 1.3.51
 - \[Fixed\]: THEME – Fix bug makeStyles add duplicate style tag into head tag
 - \[Fixed\]: Accordion – Change css AccordionSummary; Fix when children of AccordionGroup null