diginet-core-ui 1.3.96 → 1.3.97-beta.2

package/components/breadcrumb/index.js

@@ -87,27 +87,24 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     // <ButtonIcon key="ellipsis" name={'MoreHoriz'} width={24} height={16} onClick={handleClickExpand} />,
     ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
   };
-  const allItems = data !== null && data !== void 0 && data.length ? data.map((item, idx) => {
-    var _item$onClick2;
-    return jsx("li", {
-      css: _BreadcrumbLiCSS,
-      className: 'DGN-UI-Breadcrumb-li',
-      key: `child-${idx}`
-    }, item !== null && item !== void 0 && item.icon ? jsx(Icon, {
-      className: 'DGN-UI-Breadcrumb-li-icon',
-      name: item === null || item === void 0 ? void 0 : item.icon,
-      color: color,
-      width: sizeIcon,
-      height: sizeIcon
-    }) : null, jsx(Typography, {
-      className: 'DGN-UI-Breadcrumb-li-label',
-      type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? sizeTypographyH : sizeTypographyP,
-      mapping: 'a',
-      color: 'currentColor',
-      href: item === null || item === void 0 ? void 0 : item.href,
-      onClick: item === null || item === void 0 ? void 0 : (_item$onClick2 = item.onClick) === null || _item$onClick2 === void 0 ? void 0 : _item$onClick2.call(item)
-    }, (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name)), (data === null || data === void 0 ? void 0 : data.length) !== idx + 1 ? renderSeparator : null);
-  }) : React.Children.toArray(children).filter(child => {
+  const allItems = data !== null && data !== void 0 && data.length ? data.map((item, idx) => jsx("li", {
+    css: _BreadcrumbLiCSS,
+    className: 'DGN-UI-Breadcrumb-li',
+    key: `child-${idx}`
+  }, item !== null && item !== void 0 && item.icon ? jsx(Icon, {
+    className: 'DGN-UI-Breadcrumb-li-icon',
+    name: item === null || item === void 0 ? void 0 : item.icon,
+    color: color,
+    width: sizeIcon,
+    height: sizeIcon
+  }) : null, jsx(Typography, {
+    className: 'DGN-UI-Breadcrumb-li-label',
+    type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? sizeTypographyH : sizeTypographyP,
+    mapping: 'a',
+    color: 'currentColor',
+    href: item === null || item === void 0 ? void 0 : item.href,
+    onClick: item === null || item === void 0 ? void 0 : item.onClick
+  }, (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name)), (data === null || data === void 0 ? void 0 : data.length) !== idx + 1 ? renderSeparator : null)) : React.Children.toArray(children).filter(child => {
     return /*#__PURE__*/React.isValidElement(child);
   }).map((child, idx) => {
     var _React$Children$toArr;
@@ -184,6 +181,7 @@ Breadcrumb.propTypes = {
   /** Class for component. */
   data: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
+    icon: PropTypes.string,
     href: PropTypes.string,
     onClick: PropTypes.func
   })),

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

@@ -48,7 +48,7 @@ const icons = {
 };
 const oldAttached = [];
 const allNewAttached = new FormData();
-const attached = [];
+const attached = []; // attached = [...dataState, ...newDataState]
 const chosenItems = [];
 const getType = data => {
   if (data.type !== undefined) {
@@ -155,10 +155,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [showModal, setShowModal] = useState(false);
   const [showPopup, setShowPopup] = useState(false);
   const [viewTypeState, setViewTypeState] = useState(viewType);
-  const [isEmpty, setIsEmpty] = useState(null);
   const [newDataState, setNewDataState] = useState([]);
   const [dataState, setDataState] = useState([]);
   const isEnable = !readOnly && !disabled;
+  const isEmpty = !((dataState === null || dataState === void 0 ? void 0 : dataState.length) + (newDataState === null || newDataState === void 0 ? void 0 : newDataState.length));
   const _AttachmentRootCSS = AttachmentRootCSS(isEmpty, isEnable);
 
   // Start handler
@@ -222,9 +222,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       attachedRef.current.appendChild(el);
     });
   };
-  const afterChangeFile = (length = 0) => {
-    setIsEmpty(!length);
-  };
+
+  // const afterChangeFile = (length = 0) => {
+  //     setIsEmpty(!length);
+  // };
+
   const onChangeFiles = async e => {
     var _e$target, _e$target$files;
     if (!isEnable) return;
@@ -253,10 +255,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
       const length = files.length;
       if (!lengthAttached && !length) {
-        afterChangeFile();
+        // afterChangeFile();
         return;
       }
-      afterChangeFile(lengthAttached + length);
+      // afterChangeFile(lengthAttached + length);
       if (multiple || inputProps && inputProps.multiple) {
         for (let i = 0; i < length; i++) {
           files[i].FileName = files[i].name;
@@ -281,10 +283,12 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         newAttached: files,
         allNewAttached: allNewAttached.getAll('files')
       });
-    } else if (!attached.length) {
-      afterChangeFile();
     }
+    // else if (!attached.length) {
+    //     afterChangeFile();
+    // }
   };
+
   const onProgressing = file => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -357,28 +361,35 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
   const onRemoveMultiple = () => {
+    const attachedItems = [...dataState, ...newDataState];
     const nodeList = attachedRef.current.querySelectorAll('.chosen');
     const recentRemovedAttached = [];
+    const tempDataState = [...dataState];
+    const tempNewDataState = [...newDataState];
     nodeList.forEach(itemEl => {
       const parent = itemEl.parentNode;
       const index = Array.from(attachedRef.current.children).indexOf(parent);
-      const deletedFile = attached.splice(index, 1)[0];
+      const deletedFile = attachedItems[index];
       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));
+      if (Object.prototype.toString.call(deletedFile) === '[object File]' && tempNewDataState !== null && tempNewDataState !== void 0 && tempNewDataState.length) {
+        removeFileOutInputFiles(tempNewDataState.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)));
+        tempNewDataState.splice(tempNewDataState.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)), 1);
+        setNewDataState(tempNewDataState);
       } 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));
+        oldAttached.splice(oldAttached.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)), 1);
+        tempDataState.splice(tempDataState.findIndex(attach => (attach === null || attach === void 0 ? void 0 : attach.FileName) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.FileName) && (attach === null || attach === void 0 ? void 0 : attach.CreateDate) === (deletedFile === null || deletedFile === void 0 ? void 0 : deletedFile.CreateDate)), 1);
+        setDataState(tempDataState);
       }
     });
-    if (attached.length < 2) {
-      afterChangeFile(attached.length);
-    }
+    const tempAttachedItems = [...tempDataState, ...tempNewDataState];
+    // if (tempAttachedItems.length < 2) {
+    //     afterChangeFile(tempAttachedItems?.length || 0);
+    // }
     stripDomain();
     if (onChange) onChange({
       element: nodeList,
-      attached,
+      attached: tempAttachedItems,
       recentRemovedAttached,
       removedAttached: removedAttachedRef.current,
       oldAttached,
@@ -442,8 +453,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       allNewAttached.delete('files');
       files.forEach(file => allNewAttached.append('files', file));
       // newAttachedRef.current = files || [];
-      setNewDataState(files || []);
+      // setNewDataState(files || []);
     }
+
     attachmentInputRef.current.files = dt.files;
     return dt.files;
   };
@@ -735,7 +747,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [maxFile, maxSizeProp, multiple, accept]);
   useEffect(() => {
     oldAttached.length = 0;
-    afterChangeFile(((data === null || data === void 0 ? void 0 : data.length) || 0) + ((newDataState === null || newDataState === void 0 ? void 0 : newDataState.length) || 0));
+    // afterChangeFile((data?.length || 0) + (newDataState?.length || 0));
     if (data) {
       // Load files data was uploaded
       const length = data.length;
@@ -830,7 +842,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       uppercase: true,
       required: required,
       type: 'h5',
-      color: 'text.sub',
+      color: 'text/sub',
       ref: attachTextRef
     }, label), error ? jsx(HelperText, null, error) : null), jsx("div", {
       css: AttachmentHeaderIconCSS
@@ -868,11 +880,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }), isEmpty ? jsx(Typography, {
       css: userSelectNone,
       type: 'p3',
-      color: 'system.rest'
+      color: 'system/rest'
     }, hintText) : null) : isEmpty ? jsx(Typography, {
       css: userSelectNone,
       type: 'p3',
-      color: 'system.rest'
+      color: 'system/rest'
     }, getGlobal('noFileText')) : null)), allowSort && !isEmpty ? jsx(Popover, {
       ref: popoverRef,
       anchor: jsx(ButtonIcon, {
@@ -958,15 +970,15 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(Typography, {
       className: 'username',
       type: 'p2',
-      color: 'text.sub'
+      color: 'text/sub'
     }, (item === null || item === void 0 ? void 0 : item.UserName) || item.lastModifiedDate && ownerName || ''), jsx(Typography, {
       className: 'datetime',
       type: 'p2',
-      color: 'text.sub'
+      color: 'text/sub'
     }, getDateTime(date)), jsx(Typography, {
       className: 'filesize',
       type: 'p2',
-      color: 'text.sub'
+      color: 'text/sub'
     }, calculateSize(item.FileSize || item.size))) : null, isNew ? jsx("span", {
       css: AttachedLinearCSS
     }, jsx(LinearProgress, {
@@ -1108,9 +1120,9 @@ const AttachedItemInfoIconCSS = css`
         ${positionAbsolute};
         ${borderRadius50};
         ${parseWidthHeight(4, 4)};
-        ${bgColor('semantic.success')};
+        ${bgColor('semantic/success')};
         ${top(4.5)};
-        ${left(-2)}
+        ${left(-2)};
     }
 `;
 const AttachedItemOwnerCSS = css`
@@ -1119,7 +1131,7 @@ const AttachedItemOwnerCSS = css`
     ${itemsCenter};
     ${userSelectNone};
     ${parseHeight('100%')};
-    ${textColor('text.sub')};
+    ${textColor('text/sub')};
 `;
 const DetailInfoCSS = css`
     ${displayFlex};
@@ -1145,7 +1157,7 @@ const AttachedLinearCSS = css`
     ${displayFlex};
     ${positionAbsolute};
     ${itemsCenter};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     ${parseWidthHeight('100%')};
     ${top(0)};
 `;
@@ -1242,27 +1254,27 @@ const AttachmentRootCSS = (isEmpty, isEnable) => css`
     ${positionRelative};
     ${borderRadius4px};
     ${boxBorder};
-    ${border(1, 'line.normal')};
+    ${border(1, 'line/normal')};
     ${parseHeight(isEmpty && !isEnable ? 120 : 280)};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     .css-${AttachedCSS.name} {
         .css-${AttachedItemCSS.name} {
             &:hover {
-                ${bgColor('fill.hover')};
+                ${bgColor('fill/hover')};
                 .css-${AttachedLinearCSS.name} {
-                    ${bgColor('fill.hover')};
+                    ${bgColor('fill/hover')};
                 }
             }
             &:active {
-                ${bgColor('fill.pressed')};
+                ${bgColor('fill/pressed')};
                 .css-${AttachedLinearCSS.name} {
-                    ${bgColor('fill.pressed')};
+                    ${bgColor('fill/pressed')};
                 }
             }
             &.chosen {
-                ${bgColor('fill.focus')};
+                ${bgColor('fill/focus')};
                 .css-${AttachedItemInfoCSS.name}, .css-${AttachedItemOwnerCSS.name} {
-                    ${bgColor('fill.focus')};
+                    ${bgColor('fill/focus')};
                 }
             }
         }
@@ -1277,22 +1289,18 @@ const AttachmentRootCSS = (isEmpty, isEnable) => css`
     }
 `;
 Attachment.defaultProps = {
-  allowSort: true,
-  className: '',
-  data: [],
   deleteNotifyText: getGlobal('deleteNotifyText'),
-  disabled: false,
   hintText: getGlobal('dropFileHere'),
   label: getGlobal('attachText'),
-  maxFile: Infinity,
-  multiple: true,
-  style: {},
+  maxSize: getGlobal('maxSizeUpload'),
   uploadErrorInfo: {
     maxFile: getGlobal(['errorDefault', 'maxFile']),
     maxSize: getGlobal(['errorDefault', 'maxSize']),
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
-  }
+  },
+  viewType: 'detail',
+  ...getGlobal(['components', 'attachment', 'defaultProps'])
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */
@@ -1333,7 +1341,7 @@ Attachment.propTypes = {
   /** Limit the number of uploaded files. */
   maxFile: PropTypes.number,
   /** Limit the size of uploaded files. */
-  maxSize: PropTypes.string,
+  maxSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /** Allows to attach multiple files. */
   multiple: PropTypes.bool,
   /** Callback fired when the files attached is changed. */

package/components/form-control/date-range-picker/index.js

@@ -7,7 +7,7 @@ import locale from "../../../locale";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { render } from 'react-dom';
-import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidthHeight, pd, pointerEventsNone, positionFixed, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, pd, pointerEventsNone, positionFixed, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { capitalizeSentenceCase, classNames, date as moment, isEqual, randomString, updatePosition } from "../../../utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
@@ -123,6 +123,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [, setValueFr] = useState(Date.now());
   const [, setValueTo] = useState(Date.now());
   const [, setSelected] = useState(Date.now());
+  const [valueState, setValueState] = useState();
   const navigatorFromRefs = {
     doubleLeft: useRef(null),
     doubleRight: useRef(null),
@@ -332,7 +333,11 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const timeFr = new Date(times[0]);
     const timeTo = new Date(times[1]);
     const from = new Date(timeFr.getFullYear(), timeFr.getMonth());
-    const to = new Date(timeTo.getFullYear(), +moment(timeTo).diff(timeFr, 'months') === 0 ? timeTo.getMonth() + 1 : timeTo.getMonth());
+    const to = new Date(timeTo.getFullYear(), timeTo.getMonth());
+    // const to = new Date(
+    //     timeTo.getFullYear(),
+    //     +moment(timeTo).diff(timeFr, 'months') === 0 ? timeTo.getMonth() + 1 : timeTo.getMonth()
+    // );
     updateValueFr(from);
     updateValueTo(to);
   };
@@ -365,8 +370,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const {
       left,
       height,
-      top,
-      width
+      top
     } = anchor instanceof Element ? anchor.getBoundingClientRect() : ref.current.getBoundingClientRect();
     const pickerHeight = innerWidth < 567 ? controls ? 550 : 495 : controls ? 310 : 256;
     let style = {};
@@ -388,7 +392,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         style.left = (innerWidth - pickerWidth) / 2;
       }
     }
-    return pickerCSS.picker(style, width).styles;
+    return pickerCSS.picker(style).styles;
   };
   const clearDayHovering = arr => {
     if (values.current.length !== 2) {
@@ -740,6 +744,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tempValue = formatValue(time, displayFormat);
     }
     el.value = capitalizeSentenceCase(tempValue);
+    setValueState(capitalizeSentenceCase(tempValue));
     clearAble && onSwap(false);
   };
   const onClear = () => {
@@ -932,7 +937,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     startIconProps: {
       className: 'non-effect allow-disabled'
     },
-    endIcon: endIcon
+    endIcon: endIcon,
+    value: valueState,
+    onClick: onInputFocus
   }), error ? jsx(HelperText, {
     ...helperTextProps,
     disabled: disabled
@@ -1062,10 +1069,10 @@ const pickerCSS = {
             }
         }
     `,
-  picker: (position, width) => css`
+  picker: position => css`
         ${borderRadius4px};
         ${positionFixed};
-        ${parseWidthHeight(width, 'max-content')};
+        ${parseHeight('max-content')};
         ${parseMinWidth(window.innerWidth <= 633 ? 300 : 633)};
         ${parseMaxWidth(805)};
         ${top(position.top)};