diginet-core-ui 1.4.54-beta.3 → 1.4.55

package/components/button/more.js

@@ -29,7 +29,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
     options,
     optionType,
     popoverProp,
-    style
+    style,
+    onClick
   } = props;
   const isOptionFull = optionType === 'full';
   let anchor = anchorProp;
@@ -38,7 +39,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
   const [iconState, setIconState] = useState(false);
   const _OptionFullCSS = OptionFullCSS(theme);
   const _PopoverCSS = PopoverCSS(isOptionFull, theme);
-  const openPopover = () => {
+  const openPopover = e => {
+    onClick && onClick(e);
     setOpenState(true);
   };
   const closePopover = () => {
@@ -59,6 +61,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
       if (item !== null && item !== void 0 && item.hidden) return null;else if ( /*#__PURE__*/isValidElement(item)) return item;else {
         const icon = item === null || item === void 0 ? void 0 : item.icon;
         const label = item === null || item === void 0 ? void 0 : item.label;
+        const className = (item === null || item === void 0 ? void 0 : item.className) || '';
+        const style = (item === null || item === void 0 ? void 0 : item.style) || {};
         const action = () => {
           closePopover();
           if (typeof (item === null || item === void 0 ? void 0 : item.action) === 'function') item === null || item === void 0 ? void 0 : item.action();
@@ -67,7 +71,8 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
         return isOptionFull ? jsx("button", {
           key: idx,
           css: _OptionFullCSS,
-          className: 'DGN-UI-ButtonMore-Option',
+          className: `DGN-UI-ButtonMore-Option ${className}`,
+          style: style,
           onClick: action
         }, icon ? jsx(Icon, {
           className: 'DGN-UI-ButtonMore-Option-Icon',
@@ -197,14 +202,18 @@ ButtonMore.propTypes = {
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     icon: PropTypes.string,
     action: PropTypes.func,
-    hidden: PropTypes.bool
+    hidden: PropTypes.bool,
+    className: PropTypes.string,
+    style: PropTypes.object
   })),
   /** The variant of option's type. */
   optionType: PropTypes.oneOf(['full', 'icon']),
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-popover) applied to the main `Popover`. */
   popoverProp: PropTypes.object,
   /** Style inline of component. */
-  style: PropTypes.object
+  style: PropTypes.object,
+  /** Callback fired when the component is clicked. */
+  onClick: PropTypes.func
 };
 export { ButtonMore };
 export default OptionWrapper(ButtonMore);

package/components/form-control/calendar/function.js

@@ -652,7 +652,7 @@ const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn,
     color: 'primary',
     type: 'h3',
     ref: refs.content,
-    format: ['sentence']
+    format: ['lowercase']
   }))), jsx("div", {
     className: className.navigator.around
   }, jsx(ButtonIcon, {

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

@@ -226,7 +226,7 @@ const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
    * START EFFECT
    */
   useEffect(() => {
-    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue) && !value) {
+    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
       if (isBeforeLimit(min, defaultValue)) {
         onUpdate(min);
       } else if (isAfterLimit(max, defaultValue)) {

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

@@ -7,9 +7,10 @@ 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, justifyBetween, justifyEnd, left, parseHeight, parseMaxWidth, parseMinWidth, pointerEventsNone, positionFixed, shadowLarge, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyBetween, justifyEnd, itemsCenter, left, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, pointerEventsNone, positionFixed, shadowLarge, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { capitalizeSentenceCase, classNames, isEqual, date as moment, randomString, updatePosition } from "../../../utils";
+import { getColor } from "../../../styles/utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
 import ControlComp from "../control";
 import useThemeProps from "../../../theme/utils/useThemeProps";
@@ -66,6 +67,7 @@ const parseDate = day => {
   return Date.parse(new Date(day));
 };
 const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  var _periodOptions$dataSo;
   // props priority: `inProps` > `themeDefaultProps`
   const props = useThemeProps({
     props: inProps,
@@ -101,6 +103,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     unitCount,
     value,
     viewType,
+    periodOptions,
     ...other
   } = props;
   const placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : `${displayFormat} - ${displayFormat}`;
@@ -128,7 +131,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const [, setValueFr] = useState(Date.now());
   const [, setValueTo] = useState(Date.now());
   const [, setSelected] = useState(Date.now());
-  const [focusBtn, setFocusBtn] = useState('today');
+  const selectedPeriodRef = useRef('');
+  const selectedPeriodIndex = useRef(null);
+  const focusBtnRef = useRef('today');
   const [valueState, setValueState] = useState();
   const navigatorFromRefs = {
     doubleLeft: useRef(null),
@@ -153,9 +158,12 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const yesterdayText = getGlobal(['yesterday']);
   const thisWeekText = getGlobal(['thisWeek']);
   const thisMonthText = getGlobal(['thisMonth']);
+  const selectPeriodText = getGlobal(['selectPeriod']);
   const _ControlContainerCSS = ControlContainerCSS(theme);
   const _FooterContainerCSS = FooterContainerCSS(theme);
   const _DateOptionsCSS = DateOptionsCSS(theme);
+  const _PeriodContainerCSS = PeriodContainerCSS(theme);
+  const _PeriodItemCSS = PeriodItemCSS(theme);
   const updateValues = useCallback(v => {
     values.current = v;
     setValues();
@@ -262,8 +270,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));
@@ -275,8 +283,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);
@@ -302,8 +310,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));
@@ -744,12 +752,13 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     if (!ipRef.current) return;
     const el = ipRef.current;
     let enUnitText = locale.get() === 'en' && selected.current > 1 ? unitText + 's' : unitText;
+    const showPeriod = periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.enable;
     let tempValue;
     if (!reset) {
       if (unshift) {
-        tempValue = formatValue(time, displayFormat) + ' - ' + el.value + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '');
+        tempValue = `${showPeriod && selectedPeriodRef.current ? `${selectedPeriodRef.current} (` : ''}` + formatValue(time, displayFormat) + ' - ' + el.value + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '') + `${showPeriod ? ')' : ''}`;
       } else {
-        tempValue = el.value + ' - ' + formatValue(time, displayFormat) + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '');
+        tempValue = `${showPeriod && selectedPeriodRef.current ? `${selectedPeriodRef.current} (` : ''}` + el.value + ' - ' + formatValue(time, displayFormat) + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '') + `${showPeriod && selectedPeriodRef.current ? ')' : ''}`;
       }
     } else {
       tempValue = formatValue(time, displayFormat);
@@ -768,14 +777,20 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     !!onChange && onChange(e);
     onSwap(true);
   };
-  const onClickPresetDate = type => {
+  const onClickPresetDate = (type, periodData) => {
     if (!type) return;
-    setFocusBtn(type);
     let value = [];
     const currentDay = new Date();
+    if (focusBtnRef.current) {
+      document.getElementById(focusBtnRef.current).style.color = getColor('system/dark');
+    }
+    if (selectedPeriodIndex.current) {
+      document.getElementById(selectedPeriodIndex.current).style.background = getColor('white');
+    }
     switch (type) {
       case 'today':
         value = [new Date(Date.now() - 25200000).valueOf()];
+        valueFr.current = new Date(Date.now() - 25200000);
         break;
       case 'yesterday':
         {
@@ -788,21 +803,48 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         {
           const first = currentDay.getDate() - currentDay.getDay() + 1; // First day is the day of the month - the day of the week
           const last = first + 6; // last day is the first day + 6
-          const firstday = new Date(currentDay.setDate(first)).setHours(0, 0, 0).valueOf();
-          const lastday = new Date(currentDay.setDate(last)).setHours(0, 0, 0).valueOf();
-          value = [firstday, lastday];
+          const firstday = new Date(currentDay.setDate(first)).setHours(0, 0, 0);
+          const lastday = new Date(currentDay.setDate(last)).setHours(0, 0, 0);
+          value = [firstday.valueOf(), lastday.valueOf()];
+          valueFr.current = firstday;
+          valueTo.current = lastday;
           break;
         }
       case 'thisMonth':
         {
-          let firstday = new Date(currentDay.getFullYear(), currentDay.getMonth(), 1).valueOf();
-          let lastday = new Date(currentDay.getFullYear(), currentDay.getMonth() + 1, 0).valueOf();
-          value = [firstday, lastday];
+          let firstday = new Date(currentDay.getFullYear(), currentDay.getMonth(), 1);
+          let lastday = new Date(currentDay.getFullYear(), currentDay.getMonth() + 1, 0);
+          value = [firstday.valueOf(), lastday.valueOf()];
+          valueFr.current = firstday;
+          valueTo.current = lastday;
+          break;
+        }
+      case 'period':
+        {
+          let firstday = periodData === null || periodData === void 0 ? void 0 : periodData[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.valueFromExpr];
+          let lastday = periodData === null || periodData === void 0 ? void 0 : periodData[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.valueToExpr];
+          if ((periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.valueFormat) === 'DD/MM/YYYY') {
+            const firstDayArray = firstday.split('/');
+            const lastDayArray = lastday.split('/');
+            firstday = new Date(firstDayArray[2], firstDayArray[1], firstDayArray[0]);
+            lastday = new Date(lastDayArray[2], lastDayArray[1], lastDayArray[0]);
+          }
+          value = [firstday.valueOf(), lastday.valueOf()];
+          valueFr.current = firstday;
+          valueTo.current = lastday;
+          selectedPeriodIndex.current = `period${periodData === null || periodData === void 0 ? void 0 : periodData.idx}`;
+          selectedPeriodRef.current = periodData === null || periodData === void 0 ? void 0 : periodData[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.displayExpr];
+          document.getElementById(selectedPeriodIndex.current).style.background = getColor('fill/hover');
           break;
         }
       default:
         break;
     }
+    if (type !== 'period') {
+      selectedPeriodRef.current = '';
+      focusBtnRef.current = type;
+      document.getElementById(focusBtnRef.current).style.color = getColor('primary');
+    }
     updateValues(value);
     updateSelected(countDay(values.current));
     renderPicker();
@@ -909,6 +951,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   }, jsx("div", {
     css: _DateOptionsCSS
   }, jsx(Button, {
+    id: 'today',
     size: "medium",
     labelProps: {
       type: 'h4',
@@ -917,8 +960,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       }
     },
     onClick: () => onClickPresetDate('today'),
-    color: focusBtn === 'today' && 'primary'
+    color: focusBtnRef.current === 'today' && 'primary'
   }, todayText), jsx(Button, {
+    id: 'yesterday',
     size: "medium",
     labelProps: {
       type: 'h4',
@@ -927,8 +971,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       }
     },
     onClick: () => onClickPresetDate('yesterday'),
-    color: focusBtn === 'yesterday' && 'primary'
+    color: focusBtnRef.current === 'yesterday' && 'primary'
   }, yesterdayText), jsx(Button, {
+    id: 'thisWeek',
     size: "medium",
     labelProps: {
       type: 'h4',
@@ -937,8 +982,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       }
     },
     onClick: () => onClickPresetDate('thisWeek'),
-    color: focusBtn === 'thisWeek' && 'primary'
+    color: focusBtnRef.current === 'thisWeek' && 'primary'
   }, thisWeekText), jsx(Button, {
+    id: 'thisMonth',
     size: "medium",
     labelProps: {
       type: 'h4',
@@ -947,7 +993,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       }
     },
     onClick: () => onClickPresetDate('thisMonth'),
-    color: focusBtn === 'thisMonth' && 'primary'
+    color: focusBtnRef.current === 'thisMonth' && 'primary'
   }, thisMonthText)), jsx("div", {
     css: _ControlContainerCSS,
     className: unique.footer,
@@ -984,6 +1030,32 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     className: unique.table.table,
     ref: tableToRef
   }, renderHeader(unique), jsx("tbody", null))));
+  const rightCalendarPeriodComp = jsx("div", {
+    css: _PeriodContainerCSS
+  }, jsx(Typography, {
+    color: 'inherit',
+    type: 'h3',
+    style: {
+      marginBottom: 8
+    }
+  }, selectPeriodText), periodOptions === null || periodOptions === void 0 ? void 0 : (_periodOptions$dataSo = periodOptions.dataSource) === null || _periodOptions$dataSo === void 0 ? void 0 : _periodOptions$dataSo.map((p, idx) => {
+    const isSelected = (p === null || p === void 0 ? void 0 : p[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.displayExpr]) === selectedPeriodRef.current;
+    return jsx("div", {
+      id: `period${idx}`,
+      key: `period${idx}`,
+      style: {
+        background: isSelected ? getColor('fill/hover') : ''
+      },
+      css: _PeriodItemCSS,
+      onClick: () => onClickPresetDate('period', {
+        ...p,
+        idx
+      })
+    }, jsx(Typography, {
+      color: 'inherit',
+      type: 'p1'
+    }, p === null || p === void 0 ? void 0 : p[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.displayExpr]));
+  }));
   const tooltipComp = jsx("div", {
     className: unique.tooltip,
     ref: tooltipRef
@@ -1004,7 +1076,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       height: '226px',
       margin: spacing([4.5, 0.5, 0])
     }
-  }), rightCalendarComp), tooltipComp, controls ? footerMemo : null);
+  }), controls && periodOptions !== null && periodOptions !== void 0 && periodOptions.enable ? rightCalendarPeriodComp : rightCalendarComp), tooltipComp, controls ? footerMemo : null);
   return jsx(ControlComp, {
     ...other,
     disabled: disabled,
@@ -1057,6 +1129,7 @@ const unique = {
   }),
   wrapper: 'DGN-UI-DateRangePicker-Wrapper',
   container: 'DGN-UI-DateRangePicker',
+  periodContainer: 'DGN-UI-DateRangePicker-Period',
   icon: 'DGN-UI-DateRangePicker-Icon',
   tooltip: 'DGN-UI-DateRangePicker-Tooltip',
   navigator: {
@@ -1132,6 +1205,29 @@ const DateOptionsCSS = ({
     ${displayFlex};
     padding-left: ${spacing(4)}px;
 `;
+const PeriodContainerCSS = ({
+  spacing
+}) => css`
+    ${displayFlex};
+    ${flexCol};
+    ${parseWidth('100%')};
+    ${itemsCenter}
+    margin: ${spacing([4, 0, 0, 0])} !important;
+`;
+const PeriodItemCSS = ({
+  spacing
+}) => css`
+    ${parseHeight(36)};
+    ${displayFlex};
+    ${itemsCenter};
+    ${parseWidth('100%')};
+    padding: ${spacing([2, 4])};
+    box-sizing: border-box;
+    &:hover {
+        ${bgColor(getColor('fill/hover'))};
+        ${cursorPointer};
+    }
+`;
 const pickerCSS = {
   backGr: ({
     zIndex
@@ -1262,6 +1358,17 @@ DateRangePicker.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, hitting escape will close component. */
   pressESCToClose: PropTypes.bool,
+  /** Options for period selector.
+   * example: {
+   *  enable: true,
+   *  dataSource: [],
+   *  displayExpr: "DisplayName",
+   *  valueFromExpr: "DateFrom",
+   *  valueToExpr: "DateTo",
+   *  valueFormat: "DD/MM/YYYY"
+   * }
+   */
+  periodOptions: PropTypes.object,
   /** If `true`, the component is readOnly. */
   readOnly: PropTypes.bool,
   /** If `true`, the input element is required. */

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

@@ -63,6 +63,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     action = {},
     allowInput,
     allowSearch,
+    allowDuplicateValue,
     children,
     className,
     clearAble,
@@ -112,7 +113,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     valueObjectDefault,
     viewType,
     defaultValue,
-    disabled
+    disabled,
+    selectAll,
+    selectAllLabel
   } = props;
   const selectBox = multiple && selectBoxProp === undefined ? true : selectBoxProp;
   const searchExpr = typeof searchExprProp === 'string' ? [searchExprProp] : searchExprProp;
@@ -176,6 +179,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox, theme);
   const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name, theme);
   const _CheckBoxCSS = CheckBoxCSS(theme);
+  const handleDataSource = data => {
+    let dataCustom = (data !== undefined ? data : dataSource) || [];
+    return selectAll ? [{
+      [valueExpr]: 'all'
+    }, ...dataCustom] : dataCustom;
+  };
 
   /* Start handler */
   const setShowDropdown = () => {
@@ -311,17 +320,21 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
    */
   const displayValue = data => {
     let text = '';
+    let isReplace = true;
     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)) {
+      if (selectAll && (data === null || data === void 0 ? void 0 : data[valueExpr]) === 'all') {
+        isReplace = false;
+        text = selectAllLabel || getGlobal('selectAll');
+      } else 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, '');
+      if (isReplace) text = mask.toString().replace(regexInclude, '');
     }
     return text;
   };
@@ -389,7 +402,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         type: 'p1'
       }, displayText);
       if (multiple && selectBox) {
-        const checked = Array.isArray(valueMulti) ? valueMulti.includes(value) : valueMulti.includes(value);
+        let checked = valueMulti.includes(value);
+        if (selectAll && value === 'all') checked = selectAll && value === 'all' && valueMulti.length > 0;
         const isMaximumSelection = maximumSelectionLength === (valueMulti === null || valueMulti === void 0 ? void 0 : valueMulti.length);
         itemDisabled = itemDisabled || isMaximumSelection && !checked;
         items.push(jsx("div", {
@@ -402,6 +416,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
           },
           tabIndex: -1
         }, jsx(Checkbox, {
+          determinate: !(selectAll && (data === null || data === void 0 ? void 0 : data[valueExpr]) === 'all' && (valueMulti || []).length !== (dataSourceState || []).length - 1),
           css: _CheckBoxCSS,
           forTreeView: true,
           checked: checked,
@@ -437,7 +452,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     }, items !== null && items !== void 0 && items.length ? items : EmptyDataText);
   };
   const mapTreeView = () => {
-    console.log('here');
     return jsx("div", {
       css: _DropdownListCSS,
       ref: dropdownListRef,
@@ -639,7 +653,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
           const total = data && data.total ? data.total : data === null || data === void 0 ? void 0 : data.length;
           setTotalState(total);
         }
-        setDataSourceState(isReset ? rows : dataSourceState.concat(rows));
+        setDataSourceState(handleDataSource(isReset ? rows : dataSourceState.concat(rows)));
       }
     };
     setLoadingState(true);
@@ -703,8 +717,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     } else if (multiple) {
       if (!Array.isArray(currentValue[unique])) currentValue[unique] = [];
       // const newValueArr = [...currentValue[unique]];
-      const newValueArrState = [...valueMulti];
-      if (!newValueArrState.some(v => JSON.stringify(v) === JSON.stringify(value))) {
+      let newValueArrState = [...valueMulti];
+      if (selectAll && value === 'all') {
+        newValueArrState = e !== null && e !== void 0 && e.value ? dataSourceState.flatMap(item => (item === null || item === void 0 ? void 0 : item[valueExpr]) === 'all' ? [] : [item === null || item === void 0 ? void 0 : item[valueExpr]]) : [];
+      } else if (!newValueArrState.some(v => JSON.stringify(v) === JSON.stringify(value))) {
         // newValueArr.push(value);
         newValueArrState.push(value);
       } else {
@@ -717,7 +733,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
         data
       });
     } else {
-      const isChanged = currentValue[unique] !== value;
+      // biến allowDuplicateValue chỉ dùng trong trường hợp đặc biệt ID 300034
+      const isChanged = allowDuplicateValue ? allowDuplicateValue : currentValue[unique] !== value;
       if (isChanged) {
         if (valueProp === undefined) {
           allValue[unique].push(value);
@@ -914,7 +931,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     setTotalState(total);
   }, [total]);
   useEffect(() => {
-    setDataSourceState(dataSource || []);
+    setDataSourceState(handleDataSource(dataSource || []));
   }, [dataSource]);
   useEffect(() => {
     setShowClear(clearAble && checkHasValue(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) && !disabled && !readOnly && !loadingState);
@@ -1708,6 +1725,8 @@ Dropdown.propTypes = {
   }),
   /** If `true`, the input box for searching will be displayed. */
   allowSearch: PropTypes.bool,
+  /** If `true`, click on same item will add its value instead of remove it (better not use this, only for specific situation). */
+  allowDuplicateValue: PropTypes.bool,
   /** If `true`, the input value will be added when user hit Enter. */
   allowInput: PropTypes.bool,
   /** The content to be displayed inside the Dropdown box, such as TreeView. */
@@ -1811,6 +1830,10 @@ Dropdown.propTypes = {
   searchExpr: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
   /** Specifies the comparison operation used to search items. */
   searchMode: PropTypes.oneOf(['contains', 'startswith', 'equals']),
+  /** If `true`, show select all check box. */
+  selectAll: PropTypes.bool,
+  /** The content display for label of checkbox select all */
+  selectAllLabel: PropTypes.string,
   /** If `true`, checkboxes will be shown next to each dropdown item. */
   selectBox: PropTypes.bool,
   /** Inline style for the component. */

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

@@ -1,15 +1,13 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, InputBase, Label, Popover, PopoverBody, HelperText } from "../..";
+import { ButtonIcon, InputBase, Label, Popover, PopoverBody } from "../..";
 import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useMemo } from 'react';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } 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();
@@ -24,14 +22,10 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
   });
   const {
     action = {},
-    allowInput,
     bgColor: bgColorProp,
     children,
     className,
     delayOnInput,
-    disabled,
-    displayExpr: displayExprProp,
-    error,
     endIcon,
     inputProps,
     inputRef,
@@ -45,19 +39,10 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     placeholder,
     startIcon,
     style,
-    value: valueProps,
-    valueExpr,
-    viewType,
-    helperTextProps
+    value,
+    viewType
   } = 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);
@@ -100,28 +85,6 @@ 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 {
@@ -167,17 +130,15 @@ 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, error && 'error'),
+    className: classNames('DGN-UI-Dropdown-Box', className),
     style: style
   }, label ? jsx(Label, {
     ...labelProps
   }, label) : null, jsx(InputBase, {
     ...inputProps,
-    readOnly: !allowInput,
     style: inputStyle,
     viewType: viewType,
     inputRef: inputRef,
@@ -196,7 +157,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referen
     anchor: ref.current,
     width: popoverWidth,
     onClose: closeDropdownBox
-  }, jsx(PopoverBody, null, children)), ErrorView);
+  }, jsx(PopoverBody, null, children)));
 }));
 const DropdownBoxRootCSS = (bgColorProp, {
   colors
@@ -205,17 +166,6 @@ 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`
@@ -233,6 +183,20 @@ 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,
@@ -269,12 +233,6 @@ DropdownBox.propTypes = {
   /** the function will run after open */
   onOpened: PropTypes.func,
   /** the function will run after close */
-  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
+  onClosed: PropTypes.func
 };
 export default DropdownBox;

package/components/form-control/number-input/index2.js

@@ -49,7 +49,7 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     labelProps,
     max: maxProp,
     maxDigit,
-    min: minProp,
+    min,
     nonStyle,
     onBlur,
     onChange,
@@ -69,12 +69,9 @@ const NumberInput = /*#__PURE__*/forwardRef((inProps, reference) => {
     viewType
   } = props;
   let max = maxProp;
-  let min = minProp;
   let thousandSymbol = thousandSeparator;
   let decimalSymbol = decimalSymbolProp;
   let valueProps = valueProp;
-  if (!min && min !== 0) min = -Infinity;
-  if (!max && max !== 0) max = Infinity;
   const pos = useRef(null);
   const ref = useRef(null);
   const globalRef = useRef({});

package/global/index.js

@@ -50,6 +50,7 @@ const globalObject = {
     yesterday: 'Hôm qua',
     thisWeek: 'Tuần này',
     thisMonth: 'Tháng này',
+    selectPeriod: 'Chọn theo kỳ',
     // Time Picker
     months: {
       full: ['tháng 01', 'tháng 02', 'tháng 03', 'tháng 04', 'tháng 05', 'tháng 06', 'tháng 07', 'tháng 08', 'tháng 09', 'tháng 10', 'tháng 11', 'tháng 12'],
@@ -130,6 +131,7 @@ const globalObject = {
     yesterday: 'Yesterday',
     thisWeek: 'This week',
     thisMonth: 'This month',
+    selectPeriod: 'Select period',
     // Time Picker
     months: {
       full: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
@@ -210,6 +212,7 @@ const globalObject = {
     yesterday: '昨天',
     thisWeek: '本周',
     thisMonth: '本月',
+    selectPeriod: '按期选择',
     // Time Picker
     months: {
       full: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],

package/package.json

@@ -1,78 +1,44 @@
-{
-  "name": "diginet-core-ui",
-  "version": "1.4.54-beta.3",
-  "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"
-  }
-}
+{
+  "name": "diginet-core-ui",
+  "version": "1.4.55",
+  "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"
+}

package/readme.md

@@ -42,6 +42,16 @@ npm test
 
 ## Changelog
 
+## 1.4.55
+- \[Added\]: Icon – Add IconMenu MHRM09N1401, MHRM09N1402
+- \[Added\]: Icon – Add Icon Book
+- \[Added\]: Icon – Add Icon PaperCancel, LoadingV2
+- \[Added\]: Icon – Add IconMenu MHRM21N0001
+- \[Added\]: Dropdown  - Add 'selectAll' prop to allow multiple selection
+- \[Added\]: ButtonMore  – Add new property to ButtonMore
+- \[Added\]: Dropdown  – Add support for allowing Dropdown to reselect the same value multiple times
+- \[Added\]: DateRangePicker  – Add a new mode to change the UI of DateRangePicker
+
 ## 1.4.54
 - \[Added\]: Icon – Add Icon Camera
 - \[Fixed\]: Treeview  - Fix bug Treeview keeps the search bar visible while scrolling