diginet-core-ui 1.4.16-beta.2 → 1.4.17-beta.1

package/components/avatar/index.js

@@ -48,7 +48,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =
     lazyLoading,
     matchType,
     maxSize,
-    maxSizeError,
+    maxSizeError: maxSizeErrorProp,
     onChange,
     onClick,
     onRemove,
@@ -57,9 +57,11 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) =
     src,
     style,
     width,
-    wrongTypeError
+    wrongTypeError: wrongTypeErrorProp
   } = props;
   const defaultSrc = defaultSrcProp || AvatarDefault;
+  const maxSizeError = maxSizeErrorProp || `File ${getGlobal(['errorDefault', 'maxSize'])}`;
+  const wrongTypeError = wrongTypeErrorProp || `File ${getGlobal(['errorDefault', 'fileType'])}`;
   const ref = useRef(null);
   const inputRef = useRef(null);
   const avatarRef = useRef(null);
@@ -322,14 +324,14 @@ Avatar.propTypes = {
   className: PropTypes.string,
   /** If `true`, display remove avatar icon. */
   clearAble: PropTypes.bool,
-  /**
-   * data to display when hoverAble is true<br />
-   * data is an object or function return a jsx element
+  /**
+   * data to display when hoverAble is true<br />
+   * data is an object or function return a jsx element
    */
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.node]),
-  /**
-   * it is used to display the default if there is no src<br />
-   * if undefined, will display icons available in the icons store
+  /**
+   * it is used to display the default if there is no src<br />
+   * if undefined, will display icons available in the icons store
    */
   defaultSrc: PropTypes.string,
   /** the direction to display more info */
@@ -366,19 +368,19 @@ Avatar.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** the error to show on wrong type */
   wrongTypeError: PropTypes.string,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   ref: ref
 };

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

@@ -131,16 +131,16 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   allowSort,
   className,
   data,
-  deleteNotifyText,
+  deleteNotifyText: deleteNotifyTextProp,
   disabled,
   domain,
   error,
   height,
-  hintText,
+  hintText: hintTextProp,
   id,
   inputProps,
   isStripDomain,
-  label,
+  label: labelProp,
   maxFile,
   maxSize: maxSizeProp,
   multiple,
@@ -154,11 +154,21 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   required,
   style,
   unitSize,
-  uploadErrorInfo,
+  uploadErrorInfo: uploadErrorInfoProp,
   viewType
 }, reference) => {
   if (!reference) reference = useRef(null);
   if (maxFile === 1) multiple = false;
+  const deleteNotifyText = deleteNotifyTextProp || getGlobal('deleteNotifyText');
+  const hintText = hintTextProp || getGlobal('dropFileHere');
+  const label = labelProp || getGlobal('attachText');
+  const maxSize = maxSizeProp || getGlobal('maxSizeUpload');
+  const uploadErrorInfo = uploadErrorInfoProp || {
+    maxFile: getGlobal(['errorDefault', 'maxFile']),
+    maxSize: getGlobal(['errorDefault', 'maxSize']),
+    fileType: getGlobal(['errorDefault', 'fileType']),
+    existingFile: getGlobal(['errorDefault', 'existingFile'])
+  };
   const ref = useRef(null);
   const attachmentHandleIconRef = useRef(null);
   const attachmentInputRef = useRef(null);
@@ -170,7 +180,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const removedAttachedRef = useRef([]);
   const prevent = useRef(null);
   const existClickOutOfItem = useRef(null);
-  const maxSize = useRef(Infinity);
+  const maxSizeRef = useRef(Infinity);
   const timer = useRef(null);
   const [showModal, setShowModal] = useState(false);
   const [showPopup, setShowPopup] = useState(false);
@@ -277,11 +287,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // const lengthAttached = attached.length;
       const lengthAttached = (_ref = [...dataState, ...newDataState]) === null || _ref === void 0 ? void 0 : _ref.length;
       for (let i = 0; i < files.length; i++) {
-        if (i + 1 > maxFile - lengthAttached && !isSpecialCase || files[i].size > maxSize.current || checkExistingFile(files[i]) || !checkAcceptFileType(files[i])) {
+        if (i + 1 > maxFile - lengthAttached && !isSpecialCase || files[i].size > maxSizeRef.current || checkExistingFile(files[i]) || !checkAcceptFileType(files[i])) {
           if (i + 1 > maxFile - lengthAttached && !isSpecialCase) {
             var _files$i;
             notifyRef.current.instance.show(`${(_files$i = files[i]) === null || _files$i === void 0 ? void 0 : _files$i.name} - ${uploadErrorInfo['maxFile']}`);
-          } else if (files[i].size > maxSize.current) {
+          } else if (files[i].size > maxSizeRef.current) {
             var _files$i2;
             notifyRef.current.instance.show(`${(_files$i2 = files[i]) === null || _files$i2 === void 0 ? void 0 : _files$i2.name} - ${uploadErrorInfo['maxSize']}`);
           } else if (!checkAcceptFileType(files[i])) {
@@ -738,19 +748,19 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setViewTypeState(viewType);
   }, [viewType]);
   useEffect(() => {
-    if (maxSizeProp) {
-      if (!isNaN(maxSizeProp)) {
-        maxSize.current = maxSizeProp * 1024 * 1024;
+    if (maxSize) {
+      if (!isNaN(maxSize)) {
+        maxSizeRef.current = maxSize * 1024 * 1024;
       } else {
-        const [numberSize = ''] = maxSizeProp.match(/\d+/) || [];
-        const [unitMaxSize = ''] = maxSizeProp.match(/\D+/) || [];
-        maxSize.current = getBit(numberSize, unitMaxSize);
+        const [numberSize = ''] = maxSize.match(/\d+/) || [];
+        const [unitMaxSize = ''] = maxSize.match(/\D+/) || [];
+        maxSizeRef.current = getBit(numberSize, unitMaxSize);
       }
     }
     return () => {
-      maxSize.current = Infinity;
+      maxSizeRef.current = Infinity;
     };
-  }, [maxSizeProp]);
+  }, [maxSize]);
   useEffect(() => {
     if (multiple && maxFile > 1) attachmentInputRef.current.multiple = multiple;
   }, [multiple, maxFile]);
@@ -1420,21 +1430,21 @@ Attachment.defaultProps = {
   allowSort: true,
   className: '',
   data: [],
-  deleteNotifyText: getGlobal('deleteNotifyText'),
+  // deleteNotifyText: getGlobal('deleteNotifyText'),
   disabled: false,
   height: 280,
-  hintText: getGlobal('dropFileHere'),
-  label: getGlobal('attachText'),
-  maxSize: getGlobal('maxSizeUpload'),
+  // hintText: getGlobal('dropFileHere'),
+  // label: getGlobal('attachText'),
+  // maxSize: getGlobal('maxSizeUpload'),
   maxFile: Infinity,
   multiple: true,
   style: {},
-  uploadErrorInfo: {
-    maxFile: getGlobal(['errorDefault', 'maxFile']),
-    maxSize: getGlobal(['errorDefault', 'maxSize']),
-    fileType: getGlobal(['errorDefault', 'fileType']),
-    existingFile: getGlobal(['errorDefault', 'existingFile'])
-  },
+  // uploadErrorInfo: {
+  //     maxFile: getGlobal(['errorDefault', 'maxFile']),
+  //     maxSize: getGlobal(['errorDefault', 'maxSize']),
+  //     fileType: getGlobal(['errorDefault', 'fileType']),
+  //     existingFile: getGlobal(['errorDefault', 'existingFile']),
+  // },
   viewType: 'detail'
 };
 Attachment.propTypes = {
@@ -1444,17 +1454,17 @@ Attachment.propTypes = {
   allowSort: PropTypes.bool,
   /** Class for component. */
   className: PropTypes.string,
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
   /** The message to display when deleting files. */
@@ -1485,16 +1495,16 @@ Attachment.propTypes = {
   onChange: PropTypes.func,
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
-  /**
-   * event when removed file(s)
-   *
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+  /**
+   * event when removed file(s)
+   *
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,
   /** View attached event, if not it will use default. */

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

@@ -87,13 +87,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     maximumSelectionLength,
     multilineSelectedItem,
     multiple,
-    noDataText,
+    noDataText: noDataTextProp,
     onChange,
     onClosed,
     onInput,
     onKeyDown,
     onLoadMore,
-    placeholder,
+    placeholder: placeholderProp,
     readOnly,
     renderItem,
     renderSelectedItem,
@@ -115,8 +115,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   } = props;
   const selectBox = multiple && selectBoxProp === undefined ? true : selectBoxProp;
   const searchExpr = typeof searchExprProp === 'string' ? [searchExprProp] : searchExprProp;
-  const searchDelayTime = convertSearchDelayTime(searchDelayTimeProp);
+  const searchDelayTime = convertSearchDelayTime(searchDelayTimeProp === undefined ? getGlobal('delayOnInput') : searchDelayTimeProp);
   let displayExpr = displayExprProp;
+  const noDataText = noDataTextProp || getGlobal('noDataText');
+  const placeholder = placeholderProp || getGlobal('dropdownPlaceholder');
   const ref = useRef(null);
   const dropdownRef = useRef(null);
   const timer = useRef(null);
@@ -360,10 +362,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   //     }
   // };
 
-  /**
-   * So sánh text đầu vào cáo map với txtSearch
-   * @param text
-   * @return {boolean}
+  /**
+   * So sánh text đầu vào cáo map với txtSearch
+   * @param text
+   * @return {boolean}
    */
   const handleRenderBySearch = (text = '') => {
     if (typeof text !== 'string') text = text.toString();
@@ -375,10 +377,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     } else return text.toLowerCase().includes(txtSearch.toLowerCase());
   };
 
-  /**
-   * 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}
+  /**
+   * 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 = '';
@@ -1837,9 +1839,9 @@ Dropdown.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** 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]),
   /**  Style inline of dropdown items. */
@@ -1848,14 +1850,14 @@ Dropdown.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
-  /** 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,
@@ -1889,8 +1891,8 @@ Dropdown.propTypes = {
   onChange: PropTypes.func,
   /** Callback fired when dropdown closed. */
   onClosed: PropTypes.func,
-  /** 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,
   /** Callback fired when key down input */
@@ -1901,21 +1903,21 @@ Dropdown.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, the component is read-only. */
   readOnly: PropTypes.bool,
-  /** 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]),
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
-  /**
-   * 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]),
   /** Specifies a data object's field name or an expression whose value is compared to the search string. */
@@ -1942,19 +1944,19 @@ Dropdown.propTypes = {
   valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   /**The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
-  /**
-   * 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
    */
 };
 

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

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Icon, Typography } from "../..";
+import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { bgColor, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, bottom, boxBorder, displayBlock, displayFlex, displayNone, fill, flexRow, inset, insetX, itemsCenter, outlineNone, parseHeight, parseMaxHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, scaleX, selfEnd, textColor, textEllipsis, top, userSelectNone } from "../../../styles/general";
@@ -27,7 +28,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
     autoWidth: autoWidthProp,
     className,
     defaultValue,
-    delayOnChange,
+    delayOnChange: delayOnChangeProp,
     disabled,
     endIcon,
     endIconProps,
@@ -46,7 +47,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
     onInput,
     onKeyDown,
     onKeyUp,
-    placeholder,
+    placeholder: placeholderProp,
     readOnly,
     resize,
     rows,
@@ -59,6 +60,8 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
     ...other
   } = props;
   const autoWidth = !autoWidthProp && inputProps !== null && inputProps !== void 0 && inputProps.autoWidth ? inputProps.autoWidth : autoWidthProp;
+  const delayOnChange = delayOnChangeProp || getGlobal('delayOnInput');
+  const placeholder = placeholderProp || getGlobal('inputPlaceholder');
   const _onChange = e => {
     onChange && onChange(e);
     dynamicWidth(e);

package/components/paging/page-info.js

@@ -17,7 +17,6 @@ const getLastPage = (totalItems, itemsPerPage) => {
   }
   return _lastPage + 1;
 };
-const delayOnInput = getGlobal('delayOnInput');
 const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   bgColor: bgColorProp,
@@ -36,6 +35,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   typeShort
 }, reference) => {
   if (!reference) reference = useRef(null);
+  const delayOnInput = getGlobal('delayOnInput');
   const ref = useRef(null);
   const timer = useRef(null);
   const currentPageRef = useRef(currentPage);
@@ -532,22 +532,22 @@ PagingInfo.propTypes = {
   onChangePage: PropTypes.func,
   /** Callback fired when quantity on per page changed. */
   onChangePerPage: PropTypes.func,
-  /**
-   * Callback fired when page number is changing.
-   *
-   * * prevPage: Page before changed
-   * * newPage: Page after changed
-   * * cancel(value): Function cancel change page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when page number is changing.
+   *
+   * * prevPage: Page before changed
+   * * newPage: Page after changed
+   * * cancel(value): Function cancel change page
+   *  * @param {value} - bool
    */
   onChangingPage: PropTypes.func,
-  /**
-   * Callback fired when quantity on item per page is changing.
-   *
-   * * prevPerPage: Items per page before changed
-   * * newPerPage: Items per page after changed
-   * * cancel(value): Function cancel change items per page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when quantity on item per page is changing.
+   *
+   * * prevPerPage: Items per page before changed
+   * * newPerPage: Items per page after changed
+   * * cancel(value): Function cancel change items per page
+   *  * @param {value} - bool
    */
   onChangingPerPage: PropTypes.func,
   /** Style inline of component. */
@@ -556,26 +556,26 @@ PagingInfo.propTypes = {
   totalItems: PropTypes.number,
   /** Compact type for mobile. */
   typeShort: PropTypes.bool
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * onChangePage(page): Change page number
-   *  * @param {page} - number
-   * * onChangePerPage(per): Change quantity on per page
-   *  * @param {per} - number
-   * * setTotalItems(items): Set total items
-   *  * @param {items} - number
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * onChangePage(page): Change page number
+   *  * @param {page} - number
+   * * onChangePerPage(per): Change quantity on per page
+   *  * @param {per} - number
+   * * setTotalItems(items): Set total items
+   *  * @param {items} - number
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
 };
 

package/components/paging/page-selector.js

@@ -17,7 +17,6 @@ const getLastPage = (totalItems, itemsPerPage) => {
   }
   return _lastPage + 1;
 };
-const delayOnInput = getGlobal('delayOnInput');
 const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   className,
@@ -33,6 +32,7 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style,
   totalItems
 }, reference) => {
+  const delayOnInput = getGlobal('delayOnInput');
   const ref = useRef(null);
   const timer = useRef(null);
   const currentPageRef = useRef(currentPage);
@@ -333,48 +333,48 @@ PagingSelector.propTypes = {
   onChangePage: PropTypes.func,
   /** Callback fired when quantity on per page changed. */
   onChangePerPage: PropTypes.func,
-  /**
-   * Callback fired when page number is changing.
-   *
-   * * prevPage: Page before changed
-   * * newPage: Page after changed
-   * * cancel(value): Function cancel change page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when page number is changing.
+   *
+   * * prevPage: Page before changed
+   * * newPage: Page after changed
+   * * cancel(value): Function cancel change page
+   *  * @param {value} - bool
    */
   onChangingPage: PropTypes.func,
-  /**
-   * Callback fired when quantity on item per page is changing.
-   *
-   * * prevPerPage: Items per page before changed
-   * * newPerPage: Items per page after changed
-   * * cancel(value): Function cancel change items per page
-   *  * @param {value} - bool
+  /**
+   * Callback fired when quantity on item per page is changing.
+   *
+   * * prevPerPage: Items per page before changed
+   * * newPerPage: Items per page after changed
+   * * cancel(value): Function cancel change items per page
+   *  * @param {value} - bool
    */
   onChangingPerPage: PropTypes.func,
   /** Style inline of component. */
   style: PropTypes.object,
   /** Total items. */
   totalItems: PropTypes.number
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * onChangePage(page): Change page number
-   *  * @param {page} - number
-   * * onChangePerPage(per): Change quantity on per page
-   *  * @param {per} - number
-   * * setTotalItems(items): Set total items
-   *  * @param {items} - number
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * onChangePage(page): Change page number
+   *  * @param {page} - number
+   * * onChangePerPage(per): Change quantity on per page
+   *  * @param {per} - number
+   * * setTotalItems(items): Set total items
+   *  * @param {items} - number
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
 };
 

package/components/tree-view/index.js

@@ -47,7 +47,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
     searchMode,
     searchProps,
     selectAll,
-    selectAllLabel,
+    selectAllLabel: selectAllLabelProp,
     selectBox,
     showChildrenOfResult,
     showSelectedItems,
@@ -57,6 +57,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
   } = props;
   let searchDelayTime = searchDelayTimeProp;
   let value = valueProp;
+  const selectAllLabel = selectAllLabelProp || getGlobal('selectAll');
   const ref = useRef(null);
   const selectAllRef = useRef(null);
   const inputValueRef = useRef(null);
@@ -935,9 +936,9 @@ TreeView.propTypes = {
   disabledBoldResult: PropTypes.bool,
   /** If `true`, disabled parent and children item (only supported for multipleValueMode is single). */
   disabledRelevantValue: PropTypes.bool,
-  /** 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.string,
   /** If `true`, expand immediate after render (shouldn't use this). */
@@ -948,14 +949,14 @@ TreeView.propTypes = {
   multiple: PropTypes.bool,
   /** Return value for the select multiple use case. */
   multipleValueMode: PropTypes.oneOf(['single', 'multiple', 'inheritance']),
-  /**
-   * Callback fired when the value changes.<br />
-   * return 2 parameters (e, data)<br />
-   * * e: element (insist {value, justSelected, data})<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp; + value is one or an array of selected values<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp; + justSelected is value has just been selected (either true or false))<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp; + data is one or an array of selected values with full information<br />
-   * * data: array of selected values (not recommend because it's the same e.value)
+  /**
+   * Callback fired when the value changes.<br />
+   * return 2 parameters (e, data)<br />
+   * * e: element (insist {value, justSelected, data})<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp; + value is one or an array of selected values<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp; + justSelected is value has just been selected (either true or false))<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp; + data is one or an array of selected values with full information<br />
+   * * data: array of selected values (not recommend because it's the same e.value)
    */
   onChange: PropTypes.func,
   /** Used for mapping into a nested list. */
@@ -964,15 +965,15 @@ TreeView.propTypes = {
   renderAsyncFromLevel: PropTypes.oneOf([2, 3, 4, 5]),
   /** Will render asynchronously if the number of elements is greater than this number. */
   renderAsyncWithLength: PropTypes.number,
-  /** 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,
-  /**
-   * 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]),
   /** Specifies a comparison operation used to search items. */
@@ -995,22 +996,22 @@ TreeView.propTypes = {
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
   /** The field name used for the returned result. */
   valueExpr: PropTypes.string
-  /**
-   * get ref of TreeView component, insist:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;disabled: true/false,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;displayExpr: string,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;valueExpr: string,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;id: string,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;parentID: string,<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: string/array<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;getValue: get selected values (instead of onChange function),<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;setValue: set array of value (only multiple),<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;handleCheckbox: checked/unchecked a Checkbox, includes 2 parameters (isChecked, value):<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + isChecked: checked if true (default is false) <br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + value: selected values, use 'all' for all values (default is 'all') <br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;get: get DOM of TreeView component<br/>
-   * }
+  /**
+   * get ref of TreeView component, insist:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;disabled: true/false,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;displayExpr: string,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;valueExpr: string,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;id: string,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;parentID: string,<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: string/array<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;getValue: get selected values (instead of onChange function),<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;setValue: set array of value (only multiple),<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;handleCheckbox: checked/unchecked a Checkbox, includes 2 parameters (isChecked, value):<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + isChecked: checked if true (default is false) <br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + value: selected values, use 'all' for all values (default is 'all') <br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;get: get DOM of TreeView component<br/>
+   * }
    */
 };
 

package/package.json

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

package/readme.md

@@ -38,6 +38,9 @@ npm test
 ```
 
 ## Changelog
+## 1.4.17
+- \[Fixed\]: Attachment – Fix attached, allNewAttached in onChange when add new attachment
+
 ## 1.4.16
 - \[Changed\]: IconMenu – Add MHRM15N0001
 - \[Changed\]: Dropdown – Return recent search in onClosed callback

package/utils/date.js

@@ -107,8 +107,7 @@ export const formatDate = (value, formatOutput = 'DD/MM/YYYY', utc = false) => {
       return 'Invalid Date';
     }
   }
-  const dateTime = (() => {
-    var _value$toTimeString$m;
+  const dateTime = (_value$toTimeString$m => {
     const UTC = utc ? 'UTC' : '';
     const year = value['get' + UTC + 'FullYear']();
     const month = value['get' + UTC + 'Month']();