diginet-core-ui 1.3.90-beta.6 → 1.3.91-beta.1

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

@@ -6,28 +6,13 @@ import { getGlobal } from "../../../global";
 import { Another, Compressed, Image, Pdf, Presentation, Sheet, Word } from "../../../icons";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { bgColor, border, borderRadius4px, borderRadius50, boxBorder, boxContent, cursorPointer, displayBlock, displayFlex, displayInlineBlock, displayNone, flexCol, flexRow, flexWrap, floatRight, gap, itemsCenter, justifyBetween, justifyCenter, justifyEnd, justifyStart, mg, mgb, mgl, mgr, mgx, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, textCenter, textRight, truncate, userSelectNone } from "../../../styles/general";
+import { bgColor, border, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, cursorPointer, displayBlock, displayFlex, displayInlineBlock, displayNone, flexCol, flexRow, flexWrap, floatRight, gap, itemsCenter, justifyBetween, justifyCenter, justifyEnd, justifyStart, left, mg, mgb, mgl, mgr, mgx, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, textCenter, textColor, textRight, top, truncate, userSelectNone } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames, date as moment, getFileType } from "../../../utils";
 const {
   colors: {
-    system: {
-      rest: systemRest,
-      white: systemWhite
-    },
-    semantic: {
-      success: semanticSuccess
-    },
-    fill: {
-      hover: fillHover,
-      pressed: fillPressed,
-      focus: fillFocus
-    },
     line: {
       normal: lineNormal
-    },
-    text: {
-      sub: textSub
     }
   }
 } = useTheme();
@@ -157,7 +142,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const attachmentHandleIconRef = useRef(null);
   const attachmentInputRef = useRef(null);
   const attachedRef = useRef(null);
-  const newAttachedRef = useRef([]);
+  // const newAttachedRef = useRef([]);
   const popupRef = useRef(null);
   const popoverRef = useRef(null);
   const isDeleteAll = useRef(false);
@@ -172,6 +157,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [viewTypeState, setViewTypeState] = useState(viewType);
   const [isEmpty, setIsEmpty] = useState(null);
   const [newDataState, setNewDataState] = useState([]);
+  const [dataState, setDataState] = useState([]);
   const isEnable = !readOnly && !disabled;
   const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable);
 
@@ -377,14 +363,14 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const parent = itemEl.parentNode;
       const index = Array.from(attachedRef.current.children).indexOf(parent);
       const deletedFile = attached.splice(index, 1)[0];
-      if (Object.prototype.toString.call(deletedFile) === '[object File]') {
+      removedAttachedRef.current.push(deletedFile);
+      recentRemovedAttached.push(deletedFile);
+      if (Object.prototype.toString.call(deletedFile) === '[object File]' && newDataState !== null && newDataState !== void 0 && newDataState.length) {
         removeFileOutInputFiles(allNewAttached.getAll('files').findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate));
       } else {
         oldAttached.splice(oldAttached.findIndex(attach => attach.FileName === deletedFile.FileName && attach.CreateDate === deletedFile.CreateDate), 1);
+        setDataState(dataState.filter(attach => attach.FileName !== deletedFile.FileName && attach.CreateDate !== deletedFile.CreateDate));
       }
-      removedAttachedRef.current.push(deletedFile);
-      recentRemovedAttached.push(deletedFile);
-      parent.remove();
     });
     if (attached.length < 2) {
       afterChangeFile(attached.length);
@@ -455,21 +441,26 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       files.splice(index, 1);
       allNewAttached.delete('files');
       files.forEach(file => allNewAttached.append('files', file));
-      newAttachedRef.current = files || [];
+      // newAttachedRef.current = files || [];
+      setNewDataState(files || []);
     }
     attachmentInputRef.current.files = dt.files;
     return dt.files;
   };
   const insertAttached = files => {
     if (multiple || inputProps && inputProps.multiple) {
+      let tempArr = [];
       for (let file of files) {
         allNewAttached.append('files', file);
-        newAttachedRef.current.push(file);
+        // newAttachedRef.current.push(file);
+        tempArr.push(file);
       }
+      setNewDataState(tempArr);
     } else if (files[0]) {
       allNewAttached.delete('files');
       allNewAttached.append('files', files[0]);
-      newAttachedRef.current = [files[0]];
+      // newAttachedRef.current = [files[0]];
+      setNewDataState([files[0]]);
     }
     // attachmentInputRef.current.files = allNewAttached.getAll('files');
   };
@@ -714,7 +705,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
   useEffect(() => {
-    if (attached.length) {
+    if (attached !== null && attached !== void 0 && attached.length) {
       attached.length = 0;
     }
     return () => {
@@ -743,16 +734,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, [maxFile, maxSizeProp, multiple, accept]);
   useEffect(() => {
-    var _newAttachedRef$curre;
     oldAttached.length = 0;
-    afterChangeFile(((data === null || data === void 0 ? void 0 : data.length) || 0) + (((_newAttachedRef$curre = newAttachedRef.current) === null || _newAttachedRef$curre === void 0 ? void 0 : _newAttachedRef$curre.length) || 0));
+    afterChangeFile(((data === null || data === void 0 ? void 0 : data.length) || 0) + ((newDataState === null || newDataState === void 0 ? void 0 : newDataState.length) || 0));
     if (data) {
       // Load files data was uploaded
       const length = data.length;
       for (let i = 0; i < length; i++) {
         if (Object.prototype.toString.call(data[i]) === '[object File]') {
           allNewAttached.append('files', data[i]);
-          newAttachedRef.current.push(data[i]);
+          // newAttachedRef.current.push(data[i]);
           attached.push(data[i]);
         } else {
           const item = mountDomain(data[i]);
@@ -760,12 +750,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           attached.push(item);
         }
       }
+      setDataState(data);
     }
     return () => {
       // if (attachedRef.current) {
       //     attachedRef.current.innerHTML = null;
       // }
-      setNewDataState([]);
       oldAttached.length = 0;
       attached.length = 0;
       chosenItems.length = 0;
@@ -840,7 +830,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       uppercase: true,
       required: required,
       type: 'h5',
-      color: textSub,
+      color: 'text.sub',
       ref: attachTextRef
     }, label), error ? jsx(HelperText, null, error) : null), jsx("div", {
       css: AttachmentHeaderIconCSS
@@ -878,11 +868,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }), isEmpty ? jsx(Typography, {
       css: userSelectNone,
       type: 'p3',
-      color: systemRest
+      color: 'system.rest'
     }, hintText) : null) : isEmpty ? jsx(Typography, {
       css: userSelectNone,
       type: 'p3',
-      color: systemRest
+      color: 'system.rest'
     }, getGlobal('noFileText')) : null)), allowSort && !isEmpty ? jsx(Popover, {
       ref: popoverRef,
       anchor: jsx(ButtonIcon, {
@@ -968,15 +958,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(Typography, {
       className: 'username',
       type: 'p2',
-      color: textSub
+      color: 'text.sub'
     }, (item === null || item === void 0 ? void 0 : item.UserName) || item.lastModifiedDate && ownerName || ''), jsx(Typography, {
       className: 'datetime',
       type: 'p2',
-      color: textSub
+      color: 'text.sub'
     }, getDateTime(date)), jsx(Typography, {
       className: 'filesize',
       type: 'p2',
-      color: textSub
+      color: 'text.sub'
     }, calculateSize(item.FileSize || item.size))) : null, isNew ? jsx("span", {
       css: AttachedLinearCSS
     }, jsx(LinearProgress, {
@@ -994,12 +984,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: AttachedCSS,
       ref: attachedRef,
       className: classNames(isViewTypeIcon && 'icon-view')
-    }, data.map((item, idx) => {
+    }, dataState.map((item, idx) => {
       return renderAttachmentItem(item, idx);
     }), newDataState.map((item, idx) => {
       return renderAttachmentItem(item, (data === null || data === void 0 ? void 0 : data.length) + idx, true);
     })));
-  }, [data, onViewProp, unitSize, newDataState, viewTypeState]);
+  }, [data, onViewProp, unitSize, dataState, newDataState, viewTypeState]);
   const PopupView = useMemo(() => {
     return jsx(Popup, {
       open: showPopup,
@@ -1070,8 +1060,8 @@ const AttachmentInputCSS = css`
     ${displayNone};
     ${positionAbsolute};
     ${parseWidthHeight('100%')};
-    top: 0;
-    left: 0;
+    ${top(0)};
+    ${left(0)};
     input {
         ${positionRelative};
         ${parseWidthHeight('100%', 'calc(100% + 20px)')};
@@ -1095,8 +1085,8 @@ const AttachmentImageCSS = css`
 const AttachmentImageEmptyCSS = css`
     ${positionAbsolute};
     ${parseWidthHeight('100%')};
-    top: 0;
-    left: 0;
+    ${top(0)};
+    ${left(0)};
 `;
 const AttachedItemInfoCSS = css`
     ${displayFlex};
@@ -1107,6 +1097,7 @@ const AttachedItemInfoCSS = css`
     ${mgr([2])};
 `;
 const AttachedItemInfoIconCSS = css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${boxContent};
@@ -1117,9 +1108,9 @@ const AttachedItemInfoIconCSS = css`
         ${positionAbsolute};
         ${borderRadius50};
         ${parseWidthHeight(4, 4)};
-        ${bgColor(semanticSuccess)};
-        top: 4.5px;
-        left: -2px;
+        ${bgColor('semantic.success')};
+        ${top(4.5)};
+        ${left(-2)}
     }
 `;
 const AttachedItemOwnerCSS = css`
@@ -1128,7 +1119,7 @@ const AttachedItemOwnerCSS = css`
     ${itemsCenter};
     ${userSelectNone};
     ${parseHeight('100%')};
-    color: ${textSub};
+    ${textColor('text.sub')};
 `;
 const DetailInfoCSS = css`
     ${displayFlex};
@@ -1154,9 +1145,9 @@ const AttachedLinearCSS = css`
     ${displayFlex};
     ${positionAbsolute};
     ${itemsCenter};
-    ${bgColor(systemWhite)};
+    ${bgColor('system.white')};
     ${parseWidthHeight('100%')};
-    top: 0;
+    ${top(0)};
 `;
 const AttachedItemCSS = css`
     ${displayFlex};
@@ -1217,8 +1208,8 @@ const AttachedCSS = css`
                     ${pd(0)};
                     &.new-file:after {
                         ${parseWidthHeight(8)};
-                        top: -1px;
-                        left: -7px;
+                        ${top(-1)};
+                        ${left(-7)};
                     }
                 }
             }
@@ -1227,7 +1218,7 @@ const AttachedCSS = css`
                 position: inherit;
                 .css-${AttachedLinearCSS.name} {
                     ${parseHeight('auto')};
-                    bottom: 0;
+                    ${bottom(0)};
                     top: unset;
                     background: none;
                 }
@@ -1251,27 +1242,27 @@ const AttachmentRootCSS = (isEmpty, isEnable) => css`
     ${positionRelative};
     ${borderRadius4px};
     ${boxBorder};
-    ${border(1, lineNormal)};
+    ${border(1, 'line.normal')};
     ${parseHeight(isEmpty && !isEnable ? 120 : 280)};
-    ${bgColor(systemWhite)};
+    ${bgColor('system.white')};
     .css-${AttachedCSS.name} {
         .css-${AttachedItemCSS.name} {
             &:hover {
-                ${bgColor(fillHover)};
+                ${bgColor('fill.hover')};
                 .css-${AttachedLinearCSS.name} {
-                    ${bgColor(fillHover)};
+                    ${bgColor('fill.hover')};
                 }
             }
             &:active {
-                ${bgColor(fillPressed)};
+                ${bgColor('fill.pressed')};
                 .css-${AttachedLinearCSS.name} {
-                    ${bgColor(fillPressed)};
+                    ${bgColor('fill.pressed')};
                 }
             }
             &.chosen {
-                ${bgColor(fillFocus)};
+                ${bgColor('fill.focus')};
                 .css-${AttachedItemInfoCSS.name}, .css-${AttachedItemOwnerCSS.name} {
-                    ${bgColor(fillFocus)};
+                    ${bgColor('fill.focus')};
                 }
             }
         }

package/package.json

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

package/readme.md

@@ -38,6 +38,16 @@ npm test
 ```
 
 ## Changelog
+## 1.3.91
+- \[Changed\]: TreeView – Optimize code
+- \[Changed\]: Popup – Add defaultProps description
+- \[Changed\]: Grid – Add sx prop handle responsive css display
+- \[Changed\]: ButtonMore – Export component ButtonMore
+- \[Changed\]: DateRangePicker – Add description for prop value
+- \[Fixed\]: Avatar – Fix bug not clear avatar when src null
+- \[Fixed\]: Typography – Add min-width to popover hover tooltip
+- \[Fixed\]: DatePicker – Fix disabled button previous month in navigator
+
 ## 1.3.90
 - \[Added\]: Breadcrumb – Add component Breadcrumb
 - \[Added\]: Icon – Question, Pause, Cake, ChatAnswer

package/styles/general.js

@@ -4,10 +4,10 @@ export const rootSpacing = 4;
 export let rootZIndex = 1500;
 export const typographyTypes = ['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'];
 
-/**
- * get value spacing with rootZIndex
- * @param number
- * @return {number}
+/**
+ * get value spacing with rootZIndex
+ * @param number
+ * @return {number}
  */
 export const zIndex = number => {
   number = Number(number || 0);
@@ -15,10 +15,10 @@ export const zIndex = number => {
   return rootZIndex + number;
 };
 
-/**
- * get value spacing with rootSpacing
- * @param {(number|number[])} vl - default 1
- * @returns {(number|string)}
+/**
+ * get value spacing with rootSpacing
+ * @param {(number|number[])} vl - default 1
+ * @returns {(number|string)}
  */
 
 export const getSpacing = (vl = 1) => {
@@ -28,9 +28,9 @@ export const getSpacing = (vl = 1) => {
   } else return vl;
 };
 
-/**
- * replace rootZIndex
- * @param number
+/**
+ * replace rootZIndex
+ * @param number
  */
 export const setZIndex = number => {
   number = Number(number || 0);
@@ -413,6 +413,14 @@ const textLowercase = css`
 const textRight = css`
     text-align: right;
 `;
+const textSentence = css`
+    & {
+        text-transform: lowercase;
+    }
+    &:first-letter {
+        text-transform: uppercase;
+    }
+`;
 const textUnderline = css`
     text-decoration: underline;
 `;
@@ -445,4 +453,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };