diginet-core-ui 1.3.80-beta.5 → 1.3.80-beta.7

package/components/badge/index.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { alignCenter, borderBox, borderRadius4px, flexRow, flexWrap, inlineFlex, justifyCenter, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
 import { useColor as colors, useTheme } from "../../theme";
-import { classNames } from "../../utils";
+import { classNames, refType as ref } from "../../utils";
 const {
   colors: {
     system: {
@@ -79,6 +79,7 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   content,
   contentDirection,
   iconProps,
+  id,
   invisible,
   max,
   name,
@@ -110,16 +111,18 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     let node = children;
     if (!node && name) {
       node = jsx(Icon, {
+        viewBox: true,
         name: name,
         width: iconSize,
         height: iconSize,
-        viewBox: true,
+        color: 'currentColor',
         ...iconProps
       });
     }
     return jsx("div", {
       css: _BadgeRootCSS,
       ref: ref,
+      id: id,
       className: classNames('DGN-UI-Badge', className),
       style: style,
       ...props
@@ -129,7 +132,7 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: _BadgeNumberCSS,
       className: 'DGN-UI-Badge-Dot'
     }, max && content > max ? max + '+' : content === 0 && !showZero ? null : content) : null);
-  }, [anchorOrigin, children, className, color, content, contentDirection, iconProps, invisible, max, name, showZero, size, style]);
+  }, [anchorOrigin, children, className, color, content, contentDirection, iconProps, id, invisible, max, name, showZero, size, style, props]);
 }));
 const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor) => css`
     ${typographySize};
@@ -153,11 +156,10 @@ const BadgeRootCSS = (children, name, dotPos, BadgeNumberCSSName) => css`
     ${positionRelative};
     ${borderBox};
     ${borderRadius4px};
-    color: ${systemWhite};
     ${parseWidthHeight('max-content')};
     ${parseMinWidthHeight('max-content')};
     .css-${BadgeNumberCSSName} {
-        ${(children || name) && dotPos}
+        ${(children || name) && dotPos};
     }
 `;
 Badge.defaultProps = {
@@ -176,39 +178,53 @@ Badge.defaultProps = {
   style: {}
 };
 Badge.propTypes = {
+  /** The anchor of the badge. */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['left', 'right']),
     vertical: PropTypes.oneOf(['top', 'bottom'])
   }),
-  /** the quantity is shown on the badge */
+  /** 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]),
-  /** the largest number is displayed on the badge */
-  max: PropTypes.number,
-  /** used to fill background for button */
+  /** Direction of content within the badge */
   contentDirection: PropTypes.oneOf(['left', 'right']),
-  /** background color of badge */
-  color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
-  /** use name will replace children with ButtonIcon */
+  /** 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,
-  /** other icon props when use prop name */
-  iconProps: PropTypes.object,
-  /** size of Badge
+  /** 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: PropTypes.oneOf(['medium', 'large', 'giant']),
-  /** Controls whether the badge is hidden when content is zero */
-  showZero: PropTypes.bool,
-  /** If true, the badge is invisible */
-  invisible: PropTypes.bool,
-  /** className of component */
-  className: PropTypes.string,
-  /** style inline of component */
+  /** Style inline of component. */
   style: PropTypes.object,
-  /** the content displayed under the number of the badge */
-  children: PropTypes.node
+  /**
+   * 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
 };
 export { Badge };
 export default OptionWrapper(Badge);

package/components/button/index.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { detectColor, fade, hexToRGBA, hslToRgb, isColor, isColorName, rgbaToHexA, rgbToHex } from "../../styles/color-helper";
 import * as allColors from "../../styles/colors";
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, noMargin, noPadding, outlineNone, overflowHidden, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, cursorPointer, flexRow, inlineFlex, justifyCenter, outlineNone, overflowHidden, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
 import { useColor as colors, useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
 import Ripple from "./ripple-effect";
@@ -279,7 +279,7 @@ const ButtonSizeCSS = (paddingSize, minHeightSize, minHeightSizeLink, outlinedPa
         ${parseMinHeight(minHeightSizeLink)};
     }
     .no-icon {
-        ${noMargin};
+        margin: 0;
         ${parseHeight(iconSize)};
         ${parseMinWidth(0)};
     }
@@ -357,7 +357,7 @@ const ButtonRootCSS = color => css`
     }
     &.text {
         ${backgroundTransparent};
-        ${noBorder};
+        ${borderNone};
         color: ${color};
         &.button--loading {
             background-color: ${hexToRGBA(color, alphaLoading)};
@@ -383,8 +383,8 @@ const ButtonRootCSS = color => css`
     }
     &.link {
         ${backgroundTransparent};
-        ${noBorder};
-        ${noPadding};
+        ${borderNone};
+        padding: 0;
         color: ${color};
         &.button--loading,
         &:hover,

package/components/form-control/attachment/index.js

@@ -73,10 +73,6 @@ const oldAttached = [];
 const allNewAttached = new FormData();
 const attached = [];
 const chosenItems = [];
-let prevent = false;
-let existClickOutOfItem = false;
-let maxSize = Infinity;
-let divideSize = null;
 const getType = data => {
   if (data.type !== undefined) {
     var _type$match;
@@ -168,8 +164,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const popupRef = useRef(null);
   const popoverRef = useRef(null);
   const isDeleteAll = useRef(false);
-  const PushNotify = useRef(null);
+  const notifyRef = useRef(null);
   const removedAttachedRef = useRef([]);
+  const prevent = useRef(null);
+  const existClickOutOfItem = useRef(null);
+  const divideSize = useRef(null);
+  const maxSize = useRef(Infinity);
   const timer = useRef(null);
   const [showModal, setShowModal] = useState(false);
   const [showPopup, setShowPopup] = useState(false);
@@ -246,19 +246,19 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       let files = e.target.files;
       const lengthAttached = attached.length;
       for (let i = 0; i < files.length; i++) {
-        if (i + 1 > maxFile - lengthAttached || files[i].size > maxSize || checkExistingFile(files[i]) || !checkAcceptFileType(files[i])) {
+        if (i + 1 > maxFile - lengthAttached || files[i].size > maxSize.current || checkExistingFile(files[i]) || !checkAcceptFileType(files[i])) {
           if (i + 1 > maxFile - lengthAttached) {
             var _files$i;
-            PushNotify.current(`${(_files$i = files[i]) === null || _files$i === void 0 ? void 0 : _files$i.name} - ${uploadErrorInfo['maxFile']}`);
-          } else if (files[i].size > maxSize) {
+            notifyRef.current.instance.show(`${(_files$i = files[i]) === null || _files$i === void 0 ? void 0 : _files$i.name} - ${uploadErrorInfo['maxFile']}`);
+          } else if (files[i].size > maxSize.current) {
             var _files$i2;
-            PushNotify.current(`${(_files$i2 = files[i]) === null || _files$i2 === void 0 ? void 0 : _files$i2.name} - ${uploadErrorInfo['maxSize']}`);
+            notifyRef.current.instance.show(`${(_files$i2 = files[i]) === null || _files$i2 === void 0 ? void 0 : _files$i2.name} - ${uploadErrorInfo['maxSize']}`);
           } else if (!checkAcceptFileType(files[i])) {
             var _files$i3;
-            PushNotify.current(`${(_files$i3 = files[i]) === null || _files$i3 === void 0 ? void 0 : _files$i3.name} - ${uploadErrorInfo['fileType']}`);
+            notifyRef.current.instance.show(`${(_files$i3 = files[i]) === null || _files$i3 === void 0 ? void 0 : _files$i3.name} - ${uploadErrorInfo['fileType']}`);
           } else {
             var _files$i4;
-            PushNotify.current(`${(_files$i4 = files[i]) === null || _files$i4 === void 0 ? void 0 : _files$i4.name} - ${uploadErrorInfo['existingFile']}`);
+            notifyRef.current.instance.show(`${(_files$i4 = files[i]) === null || _files$i4 === void 0 ? void 0 : _files$i4.name} - ${uploadErrorInfo['existingFile']}`);
           }
           files = removeFileOutInputFiles(i, true);
           i--;
@@ -410,8 +410,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (!size && size !== 0) return 'unknown';
     let totalSize;
     let unitSizeName;
-    if (divideSize) {
-      totalSize = size / divideSize;
+    if (divideSize.current) {
+      totalSize = size / divideSize.current;
       unitSizeName = unitSize.toUpperCase();
       while (totalSize < 0.01 && unitSizeName !== 'B') {
         [unitSizeName, totalSize] = getNewUnitSize(unitSizeName, totalSize, 1);
@@ -500,22 +500,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const onView = (node, AttachmentID) => {
     if (timer.current) {
-      prevent = true;
+      prevent.current = true;
       clearTimeout(timer.current);
-      // if (existClickOutOfItem) {
-      //     removeAllChosenItems();
-      //     attachedRef.current.querySelectorAll('.chosen').forEach(itemEl => {
-      //         itemEl.classList.remove('chosen');
-      //     })
-      // }
     }
-
     const index = Array.from(attachedRef.current.children).indexOf(node);
     if (onViewProp) onViewProp(AttachmentID, index);else {
       setShowModal(true);
     }
     setTimeout(() => {
-      prevent = false;
+      prevent.current = false;
     }, 110);
   };
   const onDownload = (url, name) => {
@@ -621,7 +614,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const shiftKey = e.shiftKey;
     const itemEl = e.currentTarget;
     timer.current = setTimeout(() => {
-      if (!prevent) {
+      if (!prevent.current) {
         const index = Array.from(attachedRef.current.children).indexOf(itemEl.parentNode);
         if (shiftKey && !ctrlKey) {
           let startIndex = chosenItems[chosenItems.length - 1] || 0;
@@ -663,15 +656,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           itemEl.classList.add('chosen');
         }
         // Add event listener click out of item
-        if (!existClickOutOfItem) {
-          existClickOutOfItem = true;
+        if (!existClickOutOfItem.current) {
+          existClickOutOfItem.current = true;
           attachmentHandleIconRef.current.style.display = 'block';
           document.addEventListener('keydown', onKeyDown);
           document.addEventListener('click', clickOutOfItem);
         }
         checkChosenMultiple();
       }
-      prevent = false;
+      prevent.current = false;
     }, 100);
   };
   const removeActiveChosenItem = () => {
@@ -796,7 +789,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const removeAllChosenItems = () => {
     chosenItems.length = 0;
-    existClickOutOfItem = false;
+    existClickOutOfItem.current = false;
     attachmentHandleIconRef.current.style.display = null;
     document.removeEventListener('keydown', onKeyDown);
     document.removeEventListener('click', clickOutOfItem);
@@ -847,7 +840,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       attached.length = 0;
     }
     return () => {
-      existClickOutOfItem = false;
+      existClickOutOfItem.current = false;
     };
   }, []);
   useEffect(() => {
@@ -862,22 +855,22 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     switch (true) {
       case /^B$/i.test(unitSize):
-        divideSize = 1;
+        divideSize.current = 1;
         break;
       case /KB/i.test(unitSize):
-        divideSize = 1024;
+        divideSize.current = 1024;
         break;
       case /MB/i.test(unitSize):
-        divideSize = 1024 ** 2;
+        divideSize.current = 1024 ** 2;
         break;
       case /GB/i.test(unitSize):
-        divideSize = 1024 ** 3;
+        divideSize.current = 1024 ** 3;
         break;
       case /TB/i.test(unitSize):
-        divideSize = 1024 ** 4;
+        divideSize.current = 1024 ** 4;
         break;
       default:
-        divideSize = null;
+        divideSize.current = null;
         break;
     }
     attachmentInputRef.current.addEventListener('change', onChangeFiles);
@@ -888,11 +881,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (maxSizeProp) {
       if (!isNaN(maxSizeProp)) {
-        maxSize = maxSizeProp * 1024 * 1024;
+        maxSize.current = maxSizeProp * 1024 * 1024;
       } else {
         const numberSize = maxSizeProp.match(/\d+/g);
         const unitMaxSize = maxSizeProp.match(/\D+/g);
-        maxSize = getBit(numberSize, unitMaxSize);
+        maxSize.current = getBit(numberSize, unitMaxSize);
       }
     }
     attachmentInputRef.current.multiple = multiple;
@@ -905,7 +898,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         attachmentInputRef.current.removeEventListener('change', onChangeFiles);
         attachmentInputRef.current.accept = null;
       }
-      maxSize = Infinity;
+      maxSize.current = Infinity;
     };
   }, [maxFile, maxSizeProp, multiple, accept]);
   useEffect(() => {
@@ -1148,13 +1141,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     style: style,
     onDragEnter: onDragFileStart
   }, AttachHeaderView, AttachmentInputView, AttachedView, PopupView, ModalView, jsx(Notify, {
-    getAddNotify: func => PushNotify.current = func,
+    ref: notifyRef,
     progressing: true,
     autoDisappear: true,
-    position: {
-      vertical: 'bottom',
-      horizontal: 'center'
-    },
     color: 'danger'
   }));
 }));
@@ -1193,8 +1182,6 @@ const AttachmentInputCSS = css`
         ${positionRelative};
         ${parseWidthHeight('100%', 'calc(100% + 20px)')};
         opacity: 0;
-        top: ${spacing([-5])};
-        font-size: 0px;
     }
 `;
 const AttachmentImageCenterCSS = css`
@@ -1258,17 +1245,17 @@ const AttachedItemOwnerCSS = css`
     color: ${textSub};
     .detail-info {
         ${flexRow};
-        min-width: 333px;
+        ${parseMinWidth(333)};
         .username {
             ${displayInlineBlock};
             ${ellipsis};
-            min-width: 120px;
-            max-width: 120px;
+            ${parseMinWidth(120)};
+            ${parseMaxWidth(120)};
         }
         .datetime {
             ${displayInlineBlock};
-            min-width: max-content;
-            max-width: max-content;
+            ${parseMinWidth('max-content')};
+            ${parseMaxWidth('max-content')};
         }
         .filesize {
             float: right;

package/components/form-control/input-base/index.js

@@ -94,7 +94,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const widthInit = useRef(null);
   const isEnabled = !readOnly && !disabled;
   const _InputBaseCSS = InputBaseCSS(readOnly, status);
-  const _SingleLineCSS = SingleLineCSS(autoWidth);
+  const _SingleLineCSS = SingleLineCSS(autoWidth, readOnly);
   const _InputCSS = InputCSS(autoWidth, isEnabled, hoverTooltip);
   const _TypoCSS = TypoCSS(disabled);
   const _TextAreaCSS = TextAreaCSS(resize, readOnly);
@@ -410,16 +410,18 @@ const InputBaseCSS = (readOnly, status) => css`
         top: 100%;
     }
 `;
-const SingleLineCSS = autoWidth => css`
+const SingleLineCSS = (autoWidth, readOnly) => css`
     ${parseWidthHeight(autoWidth ? 'max-content' : 'auto', 'max-content')}
     ${alignCenter};
     flex: 1 1 auto;
     &:focus-within {
-        border-bottom-color: ${semanticInfo};
-        &::after {
-            border-bottom-color: inherit;
-            transform: scaleX(1);
-        }
+        ${!readOnly && `
+            border-bottom-color: ${semanticInfo};
+            &::after {
+                border-bottom-color: inherit;
+                transform: scaleX(1);
+            }
+        `}
     }
     &.outlined {
         ${parseHeight(40)};

package/components/progress/circular.js

@@ -254,7 +254,7 @@ const CircleMainCSS = color => css`
 const CircleMainDeterminateCSS = (circumference, percent, directionAngle, duration) => css`
     stroke-dasharray: ${`${circumference} ${circumference}`};
     stroke-dashoffset: ${circumference - validatePercent(percent) / 100 * circumference};
-    transform: rotate(${directionAngle}deg);
+    // transform: rotate(${directionAngle}deg);
     transform-origin: center;
     transition: stroke-dashoffset ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.80-beta.5",
+  "version": "1.3.80-beta.7",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",