diginet-core-ui 1.4.37 → 1.4.38-beta.2

package/assets/images/menu/dhr/MHRM38N0001.svg

@@ -0,0 +1,16 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1903_45)">
+<path d="M36.5 35C36.5 35.8 35.9 36.5 35 36.5V39C37.2 39 39 37.2 39 35V30.5L36.5 33.3V35ZM36.5 6.7L21 0.3C20.5 0.1 20 0 19.5 0C19 0 18.5 0.1 18 0.3L2.5 6.7C1 7.3 0 8.7 0 10.4V35C0 37.2 1.8 39 4 39H23.3V36.5H4C3.2 36.5 2.5 35.8 2.5 35V10.4C2.5 9.8 2.9 9.3 3.4 9L18.9 2.6C19.1 2.5 19.3 2.5 19.5 2.5C19.7 2.5 19.9 2.5 20.1 2.6L35.6 9C36.2 9.2 36.5 9.8 36.5 10.4V23.5L39 25.8V10.4C39 8.7 38 7.3 36.5 6.7Z" fill="#FF8C00"/>
+<path d="M23.6 14.7C23.6 14.8 23.6 14.9 23.6 15H9.3C8.6 15 8 14.4 8 13.8C8 13.2 8.6 12.5 9.3 12.5H24C23.7 13.2 23.6 13.9 23.6 14.7Z" fill="#FF8C00"/>
+<path d="M26.2 19.5C25.6 19.8 25.1 20.1 24.6 20.6C24.4 20.8 24.2 21.1 24 21.4L23.3 22H18.9L18.7 21.7C18.2 21.1 17.5 20.8 16.7 20.7C16.6 20.7 16.5 20.7 16.4 20.7C15.9 20.7 15.5 20.8 15.1 21L11 19.5H26.2Z" fill="#FF8C00"/>
+<path d="M16.9 29H9.3C8.6 29 8 28.4 8 27.8C8 27.2 8.6 26.5 9.3 26.5H14.7L14.9 26.6L16.9 29Z" fill="#FF8C00"/>
+<path d="M17.9002 22.3999C17.6002 21.9999 17.1002 21.7999 16.6002 21.7999C16.1002 21.7999 15.6002 21.8999 15.2002 22.1999L6.20017 18.9999C6.00017 18.8999 5.60017 19.0999 5.50017 19.3999C5.40017 19.5999 5.50017 19.9999 5.70017 19.9999L12.9002 24.1999L15.6002 25.7999L19.0002 29.6999C19.2002 29.8999 19.4002 30.0999 19.6002 30.1999C19.8002 30.2999 20.1002 30.3999 20.3002 30.3999C20.6002 30.3999 20.8002 30.3999 21.1002 30.2999C21.3002 30.1999 21.6002 30.0999 21.8002 29.8999L23.3002 28.6999V23.4999L20.7002 25.6999L17.9002 22.3999Z" fill="#2680EB"/>
+<path d="M39.0002 27.9999C39.0002 28.2999 39.0002 28.4999 38.9002 28.7999C38.8002 29.0999 38.7002 29.2999 38.5002 29.4999L34.2002 34.2999C34.0002 34.4999 33.8002 34.6999 33.6002 34.7999C33.4002 34.8999 33.1002 34.9999 32.8002 34.9999C32.5002 34.9999 32.3002 34.9999 32.0002 34.8999C31.7002 34.7999 31.5002 34.6999 31.3002 34.4999C31.1002 34.2999 31.0002 34.0999 30.8002 33.8999C30.7002 33.6999 30.6002 33.3999 30.6002 33.0999C30.6002 32.7999 30.6002 32.5999 30.7002 32.2999C30.8002 31.9999 30.9002 31.7999 31.1002 31.5999L34.0002 28.2999L30.0002 24.4999L32.4002 27.7999L30.1002 30.4999C29.8002 30.7999 29.5002 31.2999 29.4002 31.6999C29.3002 32.0999 29.2002 32.5999 29.2002 33.0999C29.2002 33.5999 29.3002 33.9999 29.5002 34.4999C29.7002 34.8999 30.0002 35.2999 30.3002 35.5999C30.8002 35.9999 31.4002 36.2999 32.0002 36.3999C32.6002 36.4999 33.3002 36.4999 33.9002 36.2999V38.9999H24.4002V24.1999C24.4002 23.6999 24.4002 23.1999 24.6002 22.6999C24.8002 22.1999 25.0002 21.7999 25.4002 21.3999C25.8002 20.9999 26.2002 20.6999 26.7002 20.4999C27.2002 20.2999 27.7002 20.1999 28.2002 20.1999H29.9002C30.5002 20.1999 31.1002 20.2999 31.7002 20.5999C32.3002 20.8999 32.7002 21.2999 33.1002 21.7999L38.3002 26.5999C38.5002 26.7999 38.7002 26.9999 38.8002 27.1999C38.9002 27.4999 39.0002 27.6999 39.0002 27.9999Z" fill="#2680EB"/>
+<path d="M27.1002 18.6999C27.8002 18.9999 28.5002 19.1999 29.2002 19.1999C29.9002 19.1999 30.6002 19.0999 31.3002 18.6999C32.0002 18.2999 32.7002 17.6999 33.1002 16.9999C33.6002 16.2999 33.9002 15.4999 34.0002 14.5999C34.0002 13.3999 33.5002 12.1999 32.6002 11.2999C31.7002 10.3999 30.6002 9.8999 29.3002 9.8999C28.1002 9.8999 26.9002 10.3999 26.0002 11.2999C25.1002 12.1999 24.6002 13.3999 24.6002 14.5999C24.6002 15.3999 24.8002 16.2999 25.3002 16.9999C25.8002 17.7999 26.4002 18.3999 27.1002 18.6999Z" fill="#2680EB"/>
+</g>
+<defs>
+<clipPath id="clip0_1903_45">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -420,6 +420,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   };
   const _onDownload = () => {
     var _ref2;
+    console.log('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');
     const index = chosenItems[0];
     const file = mountDomain((_ref2 = [...dataState, ...newDataState]) === null || _ref2 === void 0 ? void 0 : _ref2[index]);
     handleDownload(file === null || file === void 0 ? void 0 : file.URL, file === null || file === void 0 ? void 0 : file.FileName, onDownload);
@@ -1188,7 +1189,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     const index = chosenItems[0];
     const data = mountDomain([...dataState, ...newDataState][index]);
     const dataType = getType(data);
-    if (isBase64URL(data === null || data === void 0 ? void 0 : data.URL) && dataType !== 'image') setShowModal(false);
+    if (isBase64URL(data === null || data === void 0 ? void 0 : data.URL) && !['image', 'pdf'].includes(dataType)) setShowModal(false);
 
     // let data = oldAttached[index] || allNewAttached.getAll('files')[index-oldAttached.length];
     return jsx(ModalSample, {
@@ -1196,6 +1197,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       title: data === null || data === void 0 ? void 0 : data.FileName,
       onClose: () => setShowModal(false)
     }, jsx(Slider, null, jsx(SliderItem, {
+      dataType: dataType,
       url: data === null || data === void 0 ? void 0 : data.URL
     })));
   }, [domain, showModal]);

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

@@ -255,8 +255,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       tableData = [],
       weekDateFirst = getDateOfWeek(firstDay),
       weekDateLast = getDateOfWeek(lastDay);
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
     for (let i = weekDateFirst; i > 0; i--) {
       const day = Date.parse(new Date(time.getFullYear(), time.getMonth(), 1));
@@ -268,8 +268,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * days of current month
      */
     for (let i = 0; i < lastDate; i++) {
       const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
@@ -295,8 +295,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         type: 'h6'
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
     for (let i = 0; i < 13 - weekDateLast; i++) {
       const day = Date.parse(new Date(time.getFullYear(), time.getMonth() + 1, 0));

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

@@ -1087,12 +1087,14 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     css: _DropdownInputCSS,
     onClick: onClickInput
   }, jsx(Typography, {
+    ...inputProps,
     ref: inputRef,
     hoverTooltip: true,
     lineClamp: multilineSelectedItem ? undefined : 1,
     type: 'p1',
     style: {
-      lineHeight: multiple ? '30px' : '24px'
+      lineHeight: multiple ? '30px' : '24px',
+      ...inputStyle
     },
     tabIndex: -1
   }, valueSingle))), jsx("div", {

package/components/form-control/dropdown-box/index.js

@@ -1,13 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
+import { ButtonIcon, InputBase, Label, Popover, PopoverBody, HelperText } from "../..";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useMemo } from 'react';
 import { animation, borderColor, displayBlock, overflowHidden, parseHeight, parseMinWidth, positionRelative, scaleX } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import useThemeProps from "../../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../../utils";
+const regexBetween = /[^{}]+(?=})/g;
+const regexInclude = /{|}/g;
 const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
   const theme = useTheme();
@@ -22,10 +24,14 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
   });
   const {
     action = {},
+    allowInput,
     bgColor: bgColorProp,
     children,
     className,
     delayOnInput,
+    disabled,
+    displayExpr: displayExprProp,
+    error,
     endIcon,
     inputProps,
     inputRef,
@@ -39,10 +45,19 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     placeholder,
     startIcon,
     style,
-    value,
-    viewType
+    value: valueProps,
+    valueExpr,
+    viewType,
+    helperTextProps
   } = props;
+  let displayExpr = displayExprProp;
   const bgColor = typeof bgColorProp === 'string' ? getProp(colors, bgColorProp, bgColorProp) : bgColorProp;
+  const ErrorView = useMemo(() => {
+    return error ? jsx(HelperText, {
+      ...helperTextProps,
+      disabled: disabled
+    }, error) : null;
+  }, [disabled, error, helperTextProps]);
   const ref = useRef(null);
   const dropdownBoxRef = useRef(null);
   const timer = useRef(null);
@@ -85,6 +100,28 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClosed === null || onClosed === void 0 ? void 0 : onClosed();
     }
   };
+
+  /**
+   * Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
+   * @param data {object} rowData of dataSource
+   * @return {string}
+   */
+  const displayValue = data => {
+    let text = '';
+    if (data || data === 0) {
+      displayExpr = displayExpr || valueExpr;
+      let mask = data === null || data === void 0 ? void 0 : data[displayExpr];
+      // convert {id} - {name} to {<data[id]>} - {<data[name]>}
+      if (!mask && regexBetween.test(displayExpr)) {
+        var _displayExpr;
+        mask = (_displayExpr = displayExpr) === null || _displayExpr === void 0 ? void 0 : _displayExpr.replace(regexBetween, _ => (data === null || data === void 0 ? void 0 : data[_]) || '');
+      } else if (!mask) {
+        mask = typeof data !== 'object' ? data : '';
+      }
+      text = mask.toString().replace(regexInclude, '');
+    }
+    return text;
+  };
   useLayoutEffect(() => {
     if (ref.current) {
       const {
@@ -130,15 +167,17 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
       onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
     }) : null;
   };
+  const value = displayValue(valueProps);
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: _DropdownBoxRootCSS,
-    className: classNames('DGN-UI-Dropdown-Box', className),
+    className: classNames('DGN-UI-Dropdown-Box', className, error && 'error'),
     style: style
   }, label ? jsx(Label, {
     ...labelProps
   }, label) : null, jsx(InputBase, {
     ...inputProps,
+    readOnly: !allowInput,
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,
@@ -157,7 +196,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     anchor: ref.current,
     width: popoverWidth,
     onClose: closeDropdownBox
-  }, jsx(PopoverBody, null, children)));
+  }, jsx(PopoverBody, null, children)), ErrorView);
 }));
 const DropdownBoxRootCSS = (bgColorProp, {
   colors
@@ -166,6 +205,17 @@ const DropdownBoxRootCSS = (bgColorProp, {
     ${positionRelative};
     ${parseMinWidth(150)};
     ${parseHeight('max-content')};
+    &.error {
+        .DGN-UI-InputBase {
+            ${borderColor(getProp(colors, 'semantic/danger'))};
+            &::before {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+            &::after {
+                ${borderColor(getProp(colors, 'semantic/danger'))};
+            }
+        }
+    }
     .DGN-UI-InputBase {
         background: ${bgColorProp ? bgColorProp === true ? getProp(colors, 'fill/disabled') : bgColorProp : 'inherit'} !important;
         ${openState && css`
@@ -183,20 +233,6 @@ const DropdownBoxCSS = ({
     margin-top: ${spacing([1])};
     ${overflowHidden};
 `;
-
-// DropdownBox.defaultProps = {
-//     className: '',
-//     label: '',
-//     placeholder: '',
-//     startIcon: 'Search',
-//     endIcon: 'ArrowDown',
-//     openOnClickAt: 'icon',
-//     viewType: 'underlined',
-//     inputProps: {},
-//     delayOnInput: 700,
-//     zIndex: zIndexCORE(1),
-// };
-
 DropdownBox.propTypes = {
   /** class for dropdown */
   className: PropTypes.string,
@@ -233,6 +269,12 @@ DropdownBox.propTypes = {
   /** the function will run after open */
   onOpened: PropTypes.func,
   /** the function will run after close */
-  onClosed: PropTypes.func
+  onClosed: PropTypes.func,
+  /** Error message displayed below the input. */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+  /** If `true`, the input is enable. */
+  allowInput: PropTypes.bool
 };
 export default DropdownBox;

package/components/form-control/time-picker/v2/index.js

@@ -90,10 +90,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   const saveText = getGlobal(['save']);
   const nowText = getGlobal(['now']);
 
-  /**
-   * onChange handler with condition base on min max
-   * @param {*} e
-   * @param {String} key one of ['hour', 'minute', 'second']
+  /**
+   * onChange handler with condition base on min max
+   * @param {*} e
+   * @param {String} key one of ['hour', 'minute', 'second']
    */
   const onChangeHandler = (e, key) => {
     var _e$target;
@@ -149,10 +149,10 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * @param {String} key
-   * @param {Number} value
+  /**
+   *
+   * @param {String} key
+   * @param {Number} value
    */
   const setTimeAfterChange = (key, value) => {
     setTimeValue({
@@ -161,14 +161,14 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     });
   };
 
-  /**
-   *
-   * Arrow up hour input onClick in the following cases:
-   * (1): Increase current hour by 1
-   * (2): If current hour is equal to max hour value, set current hour equal to min hour
-   * (3): If current hour plus 1 is equal to max hour, set current minute equal to max minute if current minute greater than max minute value
-   * (4): If current hour plus 1 is equal to max hour, set current second equal to max second if current second greater than max second value
-   * (5): Set current minute, second to min minute, second if current hour is greater than max hour value and current minute, second is greater than min minute, second value
+  /**
+   *
+   * Arrow up hour input onClick in the following cases:
+   * (1): Increase current hour by 1
+   * (2): If current hour is equal to max hour value, set current hour equal to min hour
+   * (3): If current hour plus 1 is equal to max hour, set current minute equal to max minute if current minute greater than max minute value
+   * (4): If current hour plus 1 is equal to max hour, set current second equal to max second if current second greater than max second value
+   * (5): Set current minute, second to min minute, second if current hour is greater than max hour value and current minute, second is greater than min minute, second value
    */
   const onIncreaseHour = () => {
     if (maxHour === currentHour + 1 && maxMinute < currentMinute) {
@@ -209,15 +209,15 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * @constant {Number} minuteStep
-   * @constant {Number} lastMinute
-   * Arrow up minute input onClick in the following cases:
-   * (1): Increase current minute by minute step (default 1).
-   * (2): If current minute plus minute step is greater than lastMinute, set current minute equal to min minute.
-   * (3): If current second greater than max second value, set current second equal to max second.
-   * (4): (3) and current second is greater than max second value, set current second equal to max second.
+  /**
+   *
+   * @constant {Number} minuteStep
+   * @constant {Number} lastMinute
+   * Arrow up minute input onClick in the following cases:
+   * (1): Increase current minute by minute step (default 1).
+   * (2): If current minute plus minute step is greater than lastMinute, set current minute equal to min minute.
+   * (3): If current second greater than max second value, set current second equal to max second.
+   * (4): (3) and current second is greater than max second value, set current second equal to max second.
    */
   const onIncreaseMinute = () => {
     if (lastMinute < currentMinute + minuteStep) {
@@ -244,11 +244,11 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * Arrow up second input onClick in the following cases:
-   * (1): Increase current second by 1
-   * (2): If current second plus 1 equal to max second value, set current second to min second
+  /**
+   *
+   * Arrow up second input onClick in the following cases:
+   * (1): Increase current second by 1
+   * (2): If current second plus 1 equal to max second value, set current second to min second
    */
   const onIncreaseSecond = () => {
     if (lastSecond < currentSecond + 1) {
@@ -260,15 +260,15 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * Arrow down hour input onClick in the following cases:
-   * (1): Decrease current hour by 1
-   * (2): If current hour is equal to min hour value, set current hour equal to max hour
-   * (3): (2) and current minute is greater than max minute value, set minute to max minute value
-   * (4): (3) and current second is greater than min second value, set second to max second value
-   * (5): If current hour minus 1 is equal to min hour and current minute greater than min minute value, set current minute equal to min minute
-   * (6): (5) and current second is greater than min second value, set current second equal to min second
+  /**
+   *
+   * Arrow down hour input onClick in the following cases:
+   * (1): Decrease current hour by 1
+   * (2): If current hour is equal to min hour value, set current hour equal to max hour
+   * (3): (2) and current minute is greater than max minute value, set minute to max minute value
+   * (4): (3) and current second is greater than min second value, set second to max second value
+   * (5): If current hour minus 1 is equal to min hour and current minute greater than min minute value, set current minute equal to min minute
+   * (6): (5) and current second is greater than min second value, set current second equal to min second
    */
   const onDecreaseHour = () => {
     if (minHour === currentHour - 1 && minMinute > currentMinute) {
@@ -319,15 +319,15 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * @constant {Number} minuteStep
-   * @constant {Number} startMinute
-   * @constant {Number} lastMinute
-   * Arrow down minute input onClick in the following cases:
-   * (1): Decrease current minute by @minuteStep
-   * (2): If current minute minus @minuteStep is smaller than @startMinute , set current minute to @lastMinute - @lastMinute % @minuteStep
-   * (3): (2) and current second is greater than max second, set current second to max second
+  /**
+   *
+   * @constant {Number} minuteStep
+   * @constant {Number} startMinute
+   * @constant {Number} lastMinute
+   * Arrow down minute input onClick in the following cases:
+   * (1): Decrease current minute by @minuteStep
+   * (2): If current minute minus @minuteStep is smaller than @startMinute , set current minute to @lastMinute - @lastMinute % @minuteStep
+   * (3): (2) and current second is greater than max second, set current second to max second
    */
   const onDecreaseMinute = () => {
     if (startMinute > currentMinute - minuteStep) {
@@ -348,13 +348,13 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * @constant {Number} startSecond
-   * @constant {Number} lastSecond
-   * Arrow down second input onClick in the following cases:
-   * (1): Decrease current second by 1
-   * (2): If current second minus 1 is smaller than start second, set current second to last second
+  /**
+   *
+   * @constant {Number} startSecond
+   * @constant {Number} lastSecond
+   * Arrow down second input onClick in the following cases:
+   * (1): Decrease current second by 1
+   * (2): If current second minus 1 is smaller than start second, set current second to last second
    */
   const onDecreaseSecond = () => {
     if (startSecond >= currentSecond - 1) {
@@ -366,30 +366,30 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     }
   };
 
-  /**
-   *
-   * onClose Popover Timepicker when click Save button
+  /**
+   *
+   * onClose Popover Timepicker when click Save button
    */
   const onCloseTimePicker = () => {
     timePickerRef.current.close();
     setCurrentInputFocus(null);
   };
 
-  /**
-   *
-   * Format value using date().format() in utils
-   * @param {Date} value
-   * @param {String} outputFormat
-   * @returns
+  /**
+   *
+   * Format value using date().format() in utils
+   * @param {Date} value
+   * @param {String} outputFormat
+   * @returns
    */
   const formatTime = (value, outputFormat) => {
     return mode12h ? date(value).format(`hh${outputFormat.slice(2)} A`) : date(value).format(outputFormat);
   };
 
-  /**
-   *
-   * Button Save onClick
-   * @param {Boolean} now
+  /**
+   *
+   * Button Save onClick
+   * @param {Boolean} now
    */
   const onSelectTime = (now = false) => {
     let displayTimeValue = '00:00:00';
@@ -443,7 +443,7 @@ const TimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       const valueMinute = Number(value.slice(3, 5)) || '00';
       const valueSecond = Number(value.slice(6, 8)) || '00';
       const valueTime = new Date(new Date().getFullYear(), 0, 1, valueHour, valueMinute, valueSecond);
-      displayTimeValue = formatTime(valueTime, displayFormat).slice(0, -3).concat(returnFormat === 'HH:mm:ss' ? ` ${value.slice(10, 12)}` : ` ${value.slice(6, 8)}`);
+      displayTimeValue = mode12h ? formatTime(valueTime, displayFormat).slice(0, -3).concat(returnFormat === 'HH:mm:ss' ? ` ${value.slice(10, 12)}` : ` ${value.slice(6, 8)}`) : formatTime(valueTime, displayFormat).concat(returnFormat === 'HH:mm:ss' ? ` ${value.slice(10, 12)}` : ` ${value.slice(6, 8)}`);
       if (!mode12h) {
         setTimeValue({
           hour: value.slice(0, 2),

package/components/slider/slider-item.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import CircularProgress from "./..";
+import { CircularProgress } from "./..";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { animations } from "../../styles/animation";
@@ -30,6 +30,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   animation,
   fileName,
   url,
+  dataType,
   ...props
 }, reference) => {
   const theme = useTheme();
@@ -79,7 +80,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             className: IDs.frame,
             css: _FrameCSS,
             frameBorder: 0,
-            src: getIframeLink(),
+            src: getIframeLink(filePath),
             title: fileName,
             onLoad: iframeLoaded,
             onError: updateIframeSrc
@@ -133,7 +134,8 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     clearInterval(iframeTimeoutId);
     setIframeTimeoutId(null);
   };
-  const getIframeLink = () => {
+  const getIframeLink = (data = '') => {
+    if (dataType === 'pdf' && data && data.indexOf('data:application/') > -1) return data;
     return `https://docs.google.com/gview?url=${url}&embedded=true`;
   };
   const updateIframeSrc = () => {
@@ -148,6 +150,9 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
+  const handleGetViewer = () => {
+    return dataType === 'pdf' ? dataType : getFileType(url, undefined, false);
+  };
   return jsx("div", {
     className: classNames(IDs.itemContainer, active && 'active', animation && 'item-animation'),
     css: ItemContainerCSS,
@@ -157,7 +162,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: LoadingCSS
   }, jsx(CircularProgress, {
     size: 'xs'
-  })), getViewer(url, getFileType(url, undefined, false)));
+  })), getViewer(url, handleGetViewer()));
 }));
 const ItemContainerCSS = css`
     ${displayNone};

package/icons/basic.js

@@ -4016,6 +4016,64 @@ export const MoneyHistory = /*#__PURE__*/memo(({
     fill: fillColor(color)
   }));
 });
+export const MoneyList = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = 'system/rest',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 7H21V9H14V7Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 11H21V13H14V11Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14 15H21V17H14V15Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.90099 10.8966C5.94059 10.3448 5.58416 9.88506 5.58416 9.24138C5.58416 8.41379 6.38614 7.86207 7.63366 7.86207C8.88119 7.86207 9.50495 8.41379 9.50495 9.42529V9.6092H11.8218V9.33333C11.7327 7.67816 10.7525 6.29885 9.14851 5.83908V4H6.11881V5.93103C4.24752 6.3908 3.17822 7.67816 3.17822 9.24138C3.17822 11.7241 5.49505 12.6437 7.27723 13.0115C9.32673 13.5632 9.59406 14.2069 9.59406 14.8506C9.59406 15.1264 9.41584 16.1379 7.54455 16.1379C6.11881 16.1379 5.31683 15.5862 5.22772 14.4828V14.2989H3V14.5747C3.08911 16.3218 4.24752 17.6092 6.11881 18.069V20H9.05941V18.069C10.9307 17.6092 12 16.4138 12 14.7586C12 12.3678 9.95049 11.4483 7.90099 10.8966Z",
+    fill: fillColor(color)
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 16,
+    viewBox: "0 0 18 16",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 3H18V5H11V3Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 7H18V9H11V7Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 11H18V13H11V11Z",
+    fill: fillColor(color)
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.90099 6.89655C2.94059 6.34483 2.58416 5.88506 2.58416 5.24138C2.58416 4.41379 3.38614 3.86207 4.63366 3.86207C5.88119 3.86207 6.50495 4.41379 6.50495 5.42529V5.6092H8.82178V5.33333C8.73267 3.67816 7.75247 2.29885 6.14851 1.83908V0H3.11881V1.93103C1.24752 2.3908 0.178218 3.67816 0.178218 5.24138C0.178218 7.72414 2.49505 8.64368 4.27723 9.01149C6.32673 9.56322 6.59406 10.2069 6.59406 10.8506C6.59406 11.1264 6.41584 12.1379 4.54455 12.1379C3.11881 12.1379 2.31683 11.5862 2.22772 10.4828V10.2989H0V10.5747C0.0891089 12.3218 1.24752 13.6092 3.11881 14.069V16H6.05941V14.069C7.93069 13.6092 9 12.4138 9 10.7586C9 8.36782 6.95049 7.44828 4.90099 6.89655Z",
+    fill: fillColor(color)
+  }));
+});
 export const More = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,44 +1,78 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.37",
-  "description": "The DigiNet core ui",
-  "homepage": "https://diginet.com.vn",
-  "main": "index.js",
-  "scripts": {
-    "start-js": "react-scripts start --max_old_space_size=4096",
-    "start": "npx npm-run-all -p start-js",
-    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
-    "eject": "react-scripts eject",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "dependencies": {
-    "@emotion/core": "^10.0.35",
-    "prop-types": "^15.7.2",
-    "@emotion/css": "^11.11.0",
-    "@emotion/react": "^11.10.6"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
-  },
-  "keywords": [
-    "core ui",
-    "diginet"
-  ],
-  "author": "rocachien",
-  "contributors": [
-    {
-      "name": "Chien Do",
-      "email": "rocachien@gmail.com"
-    },
-    {
-      "name": "Nhat Tran",
-      "email": "tranminhnhat1005@gmail.com"
-    },
-    {
-      "name": "Thuan Nguyen",
-      "email": "nt.thuan.hutech@gmail.com"
-    }
-  ],
-  "license": "MIT"
-}
+{
+  "name": "diginet-core-ui",
+  "version": "1.4.38-beta.2",
+  "description": "",
+  "main": "index.js",
+  "license": "UNLICENSED",
+  "scripts": {
+    "start": "npm-run-all --parallel start-sb eslint-test",
+    "start-sb": "start-storybook -p 9050",
+    "build-storybook": "build-storybook -c .storybook -s src",
+    "build": "run-script-os",
+    "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
+    "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
+    "compile": "babel src --out-dir dist --ignore **/*.stories.js",
+    "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
+    "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
+    "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
+    "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
+    "version:add": "run-script-os",
+    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
+    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
+    "version:bump": "npm version patch --no-git-tag-version --silent",
+    "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint --fix --config .eslintrc.js \"**/*.js\"",
+    "eslint-test": "onchange \"src/**/*.{js,jsx,json}\" -- eslint . --fix",
+    "freshtall": "npm cache clean --force && rm -rf node_modules && rm -f package-lock.json && npm install",
+    "test-storybook": "test-storybook --url http://localhost:9050",
+    "preinstall": "echo {} > package-lock.json"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.35",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.10.6",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "date-fns": "^2.30.0",
+    "prop-types": "^15.7.2"
+  },
+  "lint-staged": {
+    "*/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.3",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+    "@babel/preset-react": "^7.13.13",
+    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-essentials": "6.2.9",
+    "@storybook/addon-links": "6.2.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "6.2.9",
+    "@storybook/test-runner": "^0.7.1",
+    "autoprefixer": "^10.3.1",
+    "babel-loader": "^8.2.2",
+    "eslint": "^8.4.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-regex": "^1.10.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "lint-staged": "^12.1.2",
+    "mkdirp": "^1.0.4",
+    "npm-run-all": "^4.1.5",
+    "onchange": "^7.1.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "rimraf": "^3.0.2",
+    "run-script-os": "^1.1.6",
+    "sass": "1.58.3"
+  }
+}

package/readme.md

@@ -42,6 +42,10 @@ npm test
 
 ## Changelog
 
+## 1.4.37
+- \[Fixed\]: Attachment – Fix the bug where PDF attachments cannot be viewed
+- \[Added\]: Icon – Add MoneyList
+
 ## 1.4.36
 
 - \[Fixed\]: TimePicker – Fix show popover when readOnly is true, fix return value contain space