diginet-core-ui 1.3.56 → 1.3.57

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

@@ -13,17 +13,17 @@ import { ButtonIcon, HelperText, InputBase, Label } from '../../index';
 import Button from '../../button';
 import Tooltip from '../../tooltip';
 import { isValidDate } from '../calendar/function';
-import { alignCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexRow, justifyEnd, positionFixed } from '../../../styles/general';
-import { color as colors } from '../../../styles/colors';
-import { useTheme } from '../../../theme';
+import { alignCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexRow, justifyEnd, parseWidth, positionFixed } from '../../../styles/general';
+import theme from '../../../theme/settings';
 const {
-  zIndex
-} = useTheme();
-const {
-  system: {
-    white
-  }
-} = colors;
+  colors: {
+    system: {
+      white
+    }
+  },
+  spacing,
+  zIndex: zIndexCORE
+} = theme;
 const confirmText = getGlobal(['confirm']);
 const cancelText = getGlobal(['cancel']);
 
@@ -85,9 +85,9 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const displayValue = useRef();
   const focusedValue = useRef(null);
   const [, setDisplayValue] = useState(Date.now());
-  const [, setFocusedValue] = useState(Date.now()); // const [actionsState, setActionsState] = useState(true);
+  const [, setFocusedValue] = useState(Date.now());
 
-  const _iconAreaCSS = iconAreaCSS(unique);
+  const _IconAreaCSS = IconAreaCSS(unique);
 
   const handleDisplayValue = useCallback(value => {
     displayValue.current = new Date(value);
@@ -160,7 +160,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    return pickerCSS.picker(style, left + 400 > innerWidth ? innerWidth - 400 : left, width).styles;
+    return PickerCSS.picker(style, left + 400 > innerWidth ? innerWidth - 400 : left, width).styles;
   }; // const createPortal = () => {
   //     let portal = document.getElementById(unique.portal);
   //     if (!portal) {
@@ -183,7 +183,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       document.body.appendChild(background);
     }
 
-    background.style.cssText = pickerCSS.backGr;
+    background.style.cssText = PickerCSS.backGr;
     return background;
   };
 
@@ -241,7 +241,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: onCalendarClick
     }), backGr.appendChild(picker));
     setTimeout(() => {
-      Object.assign(picker.style, { ...pickerCSS.active
+      Object.assign(picker.style, { ...PickerCSS.active
       });
       window.addEventListener('resize', onResize);
       window.addEventListener('scroll', onScroll);
@@ -260,7 +260,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (!backGr) return;
     const picker = backGr.querySelector(`#${unique.picker}`);
     if (!picker) return;
-    Object.assign(picker.style, { ...pickerCSS.remove
+    Object.assign(picker.style, { ...PickerCSS.remove
     });
 
     if (pressESCToClose) {
@@ -330,7 +330,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (!el.classList.contains(unique.focus)) {
       el.classList.add(unique.focus);
-      el.style.zIndex = zIndex(2);
+      el.style.zIndex = zIndexCORE(2);
       openPicker();
     }
   };
@@ -364,7 +364,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const iconComp = jsx("div", {
-    css: _iconAreaCSS,
+    css: _IconAreaCSS,
     ref: iconRef
   }, jsx(ButtonIcon, {
     disabled: disabled || readOnly,
@@ -372,7 +372,7 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClick: triggerFocus,
     className: `${unique.icon} ${unique.icon}-accept`,
     viewBox: true,
-    name: 'CalendarNew'
+    name: 'Calendar'
   }), jsx(ButtonIcon, {
     disabled: disabled || readOnly,
     viewType: 'ghost',
@@ -384,13 +384,13 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const endIcon = actionIconAt === 'end' && iconComp;
   const startIcon = actionIconAt === 'start' && iconComp;
   const footerMemo = jsx("div", {
-    css: controlContainerCSS,
+    css: ControlContainerCSS,
     className: unique.footer,
     ref: footerRef
-  }, jsx(Button, { ...buttonProps,
+  }, jsx(Button, {
     className: unique.cancel,
     onClick: onCancel
-  }, cancelText), jsx(Button, { ...buttonProps,
+  }, cancelText), jsx(Button, {
     color: 'info',
     className: unique.confirm,
     onClick: onConfirm
@@ -481,31 +481,51 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, displayAnotherMonth, max, min, readOnly, returnFormat, viewType]);
-  useImperativeHandle(reference, () => ({
-    get: () => {
-      return ref.current;
-    },
-    getInputContainer: () => {
-      return ipConRef.current;
-    },
-    getInput: () => {
-      return ipRef.current;
-    },
-    getCalendar: () => {
-      return calRef.current;
-    },
-    getIcon: () => {
-      return iconRef.current;
-    }
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {
+      get: () => {
+        return ref.current;
+      },
+      getInputContainer: () => {
+        return ipConRef.current;
+      },
+      getInput: () => {
+        return ipRef.current;
+      },
+      getCalendar: () => {
+        return calRef.current;
+      },
+      getIcon: () => {
+        return iconRef.current;
+      }
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+
+    currentRef.get = () => ref.current;
+
+    currentRef.getInputContainer = () => ipConRef.current;
+
+    currentRef.getInput = () => ipRef.current;
+
+    currentRef.getCalendar = () => calRef.current;
+
+    currentRef.getIcon = () => iconRef.current;
+
+    return currentRef;
+  });
   return jsx(ControlComp, { ...props,
     disabled: disabled,
     error: isError,
     ref: ref,
     style: style
-  }, !!label && jsx(Label, { ...labelProps,
+  }, !!label && jsx(Label, {
     disabled: disabled,
-    required: required
+    required: required,
+    ...labelProps
   }, label), jsx(Tooltip, {
     title: (ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current = ipRef.current) === null || _ipRef$current === void 0 ? void 0 : _ipRef$current.clientWidth) < 200 ? ipRef === null || ipRef === void 0 ? void 0 : (_ipRef$current2 = ipRef.current) === null || _ipRef$current2 === void 0 ? void 0 : _ipRef$current2.value : '',
     style: {
@@ -524,11 +544,13 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...inputStyle
     },
     startIcon: startIcon,
-    startIconProps: {
-      className: 'non-effect allow-disabled'
-    },
     endIcon: endIcon
   })), isError && jsx(HelperText, { ...errorProps,
+    style: {
+      minHeight: 16,
+      position: 'absolute',
+      top: '100%'
+    },
     disabled: disabled
   }, error));
 }));
@@ -541,14 +563,8 @@ const activeStyle = {
   pointerEvents: 'none',
   display: 'block'
 };
-const buttonProps = {
-  style: {
-    margin: '0 2px',
-    padding: '7px 8px'
-  }
-};
 
-const iconAreaCSS = unique => css`
+const IconAreaCSS = unique => css`
     ${flexRow};
     ${alignCenter};
     color: inherit;
@@ -565,19 +581,19 @@ const iconAreaCSS = unique => css`
     }
 `;
 
-const controlContainerCSS = css`
+const ControlContainerCSS = css`
     ${flexRow};
     ${justifyEnd};
-    margin: 0 16px 16px;
+    margin: ${spacing([0, 4, 4])};
 `;
-const pickerCSS = {
-  backGr: `background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: ${zIndex(1)};`,
+const PickerCSS = {
+  backGr: `background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: ${zIndexCORE(1)};`,
   picker: (position, left, width) => css`
         ${positionFixed};
         ${borderRadius4px};
+        ${parseWidth(width)};
         background-color: ${white};
         height: max-content;
-        width: ${width}px;
         left: ${left}px;
         top: ${position.top}px;
         transform-origin: ${position.transformOrigin};
@@ -586,7 +602,7 @@ const pickerCSS = {
         opacity: 0;
         transform: scale(0);
         transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        z-index: ${zIndex(2)};
+        z-index: ${zIndexCORE(2)};
     `,
   active: {
     opacity: 1,
@@ -619,13 +635,13 @@ DatePicker.propTypes = {
   /** Display the clear icon if true. */
   clearAble: PropTypes.bool,
 
-  /** If 'true' the calendar will have a footer controls. */
+  /** If `true`, the calendar will have a footer controls. */
   controls: PropTypes.bool,
 
   /** The default value of the component. */
   defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.object]),
 
-  /** If 'true' the form control will be disabled. */
+  /** If `true`, the form control will be disabled. */
   disabled: PropTypes.bool,
 
   /** Format to display value. */

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

@@ -1785,14 +1785,14 @@ Dropdown.propTypes = {
   /** The icon to display if not found the icon follow `iconExpr`. */
   iconDefault: PropTypes.string,
 
-  /** Field name used for icon display.<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** Field name used for icon display.<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1807,9 +1807,9 @@ Dropdown.propTypes = {
   /** The displayed value of component. */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** Field name used for text display in dropdown list.<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** Field name used for text display in dropdown list.<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1819,10 +1819,10 @@ Dropdown.propTypes = {
   /** The field name used for the returned result. */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * Duration wait enter search content on search.<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   * If `true`, used default delayOnInput.
+  /**
+   * Duration wait enter search content on search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, used default delayOnInput.
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
 
@@ -1889,19 +1889,19 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown list. */
   dataSource: PropTypes.array,
 
-  /** Function displays items by custom.<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** Function displays items by custom.<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /** Function or field name used for display selected items, example:<br/>
-   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** Function or field name used for display selected items, example:<br/>
+   * renderSelectedItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
-  /** Callback fired when the input value changes.<br/>
-   * if undefined: the filter function will run (default)
+  /** Callback fired when the input value changes.<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
 
@@ -1920,19 +1920,19 @@ Dropdown.propTypes = {
   /** The contents in Dropdown box (Exp: TreeView). */
   children: PropTypes.node,
 
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

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

@@ -78,7 +78,7 @@ const num2WordsEn = n => {
 
   let makeGroup = ([ones, tens, huns]) => {
     return [num(huns) === 0 ? '' : a[huns] + ' hundred ', num(ones) === 0 ? b[tens] : b[tens] && b[tens] + '-' || '', a[tens + ones] || a[ones]].join('');
-  }; // "thousands" constructor; no real good names for this, i guess
+  }; // "thousands" constructor; no real good names for this, I guess
 
 
   let thousand = (group, i) => group === '' ? group : `${group} ${g[i]}`; // execute !
@@ -109,7 +109,6 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   readOnly,
   multiline,
-  refs,
   inputRef,
   inputProps,
   inputStyle,
@@ -122,6 +121,8 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onKeyUp,
   validates,
   convertToWords,
+  prefix,
+  suffix,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -140,15 +141,6 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const decimalSymbol = separatorSymbol === '.' ? ',' : '.';
   const thousandSeparatorPattern = new RegExp(`[0-9]|Backspace|Delete|Arrow|Home|End|Tab${decimalDigit === 0 ? '' : '|\\' + decimalSymbol}${disabledNegative ? '' : '|-'}`);
   const isError = !!error && !value && value !== 0;
-  /* Start styled */
-
-  const MoneyInputRoot = css`
-                ${displayBlock}
-                ${positionRelative}
-        margin-bottom: 20px;
-            `;
-  /* End styled */
-
   /* Start handler */
 
   const getThousandSeparator = number => {
@@ -250,6 +242,12 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     !!onKeyDown && onKeyDown(e);
   };
 
+  const parseValueWithFix = value => {
+    if (!value) return value;
+    if (!prefix && !suffix) return value;
+    return `${prefix ? prefix + ' ' : ''}${value}${suffix ? ' ' + suffix : ''}`;
+  };
+
   const onPasteHandler = e => {
     var _local$current$clipbo;
 
@@ -365,8 +363,6 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   useEffect(() => {
-    !!refs && refs(ref);
-
     if (defaultValue !== undefined && defaultValue !== '') {
       const v = getValueWithDecimal(defaultValue.toString().replace('.', decimalSymbol));
       inputRef.current.value = thousandSeparator ? getThousandSeparator(v) : v;
@@ -385,13 +381,19 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         const v = getValueWithDecimal(value.toString().replace('.', decimalSymbol));
 
         if (convertToWords && !decimalDigit && (disabled || readOnly)) {
-          inputRef.current.value = Number.isInteger(value) ? locale.get() === 'vi' ? num2WordsVi.convert(value) : num2WordsEn(value) : getGlobal('helperInvalid');
+          let valueConverted = getGlobal('helperInvalid');
+
+          if (Number.isInteger(value)) {
+            valueConverted = locale.get() === 'vi' ? num2WordsVi.convert(value) : num2WordsEn(value);
+          }
+
+          inputRef.current.value = parseValueWithFix(valueConverted);
         } else {
-          inputRef.current.value = thousandSeparator ? getThousandSeparator(v) : v;
+          inputRef.current.value = parseValueWithFix(thousandSeparator ? getThousandSeparator(v) : v);
         }
       }
     }
-  }, [disabled, readOnly, value]);
+  }, [disabled, readOnly, value, prefix, suffix]);
   useEffect(() => {
     const valueInput = inputRef.current.value;
     inputRef.current.value = getValueWithDecimal(valueInput);
@@ -414,7 +416,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return jsx("div", {
     ref: ref,
     css: MoneyInputRoot,
-    className: ('DGN-UI-Money-Input ' + className).trim(),
+    className: ['DGN-UI-Money-Input', className].join(' ').trim().replace(/\s+/g, ' '),
     ...props
   }, !!label && jsx(Label, {
     required: required,
@@ -448,6 +450,11 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     disabled: disabled
   }, validateResult));
 }));
+const MoneyInputRoot = css`
+    ${displayBlock};
+    ${positionRelative};
+    margin-bottom: 20px;
+`;
 MoneyInput.defaultProps = {
   viewType: 'underlined',
   valueTypeReturn: 'number',
@@ -529,19 +536,22 @@ MoneyInput.propTypes = {
   /** Convert money from number to words when readOnly || disabled */
   convertToWords: PropTypes.bool,
 
+  /** Add a string to first of value when convertToWords. */
+  prefix: PropTypes.string,
+
+  /** Add a string to last of value when convertToWords. */
+  suffix: PropTypes.string,
+
   /** props of input in MoneyInput component */
   inputProps: PropTypes.object,
 
   /** style inline of input in MoneyInput component */
   inputStyle: PropTypes.object,
 
-  /** The function to get ref of MoneyInput component */
-  refs: PropTypes.func,
-
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 
@@ -554,13 +564,13 @@ MoneyInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function, return an object:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
-   * }
+  /**
+   * on change function, return an object:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: is a number or null value<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target.value: value of input<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;...element<br/>
+   * }
    */
   onChange: PropTypes.func,
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.56",
+  "version": "1.3.57",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,13 @@ npm test
 ```
 
 ## Changelog
+## 1.3.57
+- \[Added\]: MenuIcon – MHRM29N0005
+- \[Changed\]: MoneyInput – Update PagingSelector with new design
+- \[Fixed\]: Attachment – Fix bug not set overflow when close
+- \[Fixed\]: Alert, Notify – Fix bug not set overflow when close
+- \[Fixed\]: Datepicker – Fix bug not set overflow when close
+
 ## 1.3.56
 - \[Changed\]: PagingSelector – Update PagingSelector with new design
 - \[Changed\]: NumberInput – Return e.valueString