diginet-core-ui 1.3.75-beta.2 → 1.3.75-beta.3

package/components/badge/index.js

@@ -213,11 +213,11 @@ Badge.propTypes = {
   /** other icon props when use prop name */
   iconProps: PropTypes.object,
 
-  /** size of Badge
-   *
-   * * medium (dot 8px, typography p3)
-   * * large (button 10px, typography p2)
-   * * giant (button 12px, typography p1)
+  /** size of Badge
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
 

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

@@ -1850,14 +1850,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,
@@ -1872,9 +1872,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]),
 
@@ -1884,10 +1884,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]),
 
@@ -1954,19 +1954,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,
 
@@ -1997,19 +1997,19 @@ Dropdown.propTypes = {
   /** If `true`, show multi-line selected item(s). */
   multilineSelectedItem: PropTypes.bool,
 
-  /**
-   * 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/paging/page-info.js

@@ -601,23 +601,23 @@ PagingInfo.propTypes = {
   /** 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,
 
@@ -630,15 +630,15 @@ PagingInfo.propTypes = {
   /** 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
+  /**
+   * 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
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/paging/page-selector2.js

@@ -380,23 +380,23 @@ PagingSelector.propTypes = {
   /** 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,
 
@@ -406,15 +406,15 @@ PagingSelector.propTypes = {
   /** 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
+  /**
+   * 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
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/popover/index.js

@@ -628,9 +628,9 @@ Popover.propTypes = {
   /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
   anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object, PropTypes.node, ref]),
 
-  /**
-   * This is the point on the anchor where the popover's anchor will attach to.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the anchor where the popover's anchor will attach to.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -652,14 +652,14 @@ Popover.propTypes = {
   /** If `true`, click outside will close component. */
   clickOutsideToClose: PropTypes.bool,
 
-  /**
-   * Direction when Popover shown.
-   * Note: This prop will overwrite anchorOrigin & transformOrigin.
-   *
-   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
-   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
-   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
-   * * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
+  /**
+   * Direction when Popover shown.
+   * Note: This prop will overwrite anchorOrigin & transformOrigin.
+   *
+   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
+   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
+   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
+   * * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
    */
   direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
 
@@ -678,9 +678,9 @@ Popover.propTypes = {
   /** Style inline of component. */
   style: PropTypes.object,
 
-  /**
-   * This is the point on the popover which will attach to the anchor's origin.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the popover which will attach to the anchor's origin.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   transformOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -693,13 +693,13 @@ Popover.propTypes = {
   /** Config z-index of the component. */
   zIndex: PropTypes.number,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show: Show popover
-   * * close: Close popover
-   * * setPosition(element): Set position of popover
-   *  * @param {element} - element
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show: Show popover
+   * * close: Close popover
+   * * setPosition(element): Set position of popover
+   *  * @param {element} - element
    */
   reference: ref
 };

package/components/tree-view/index.js

@@ -1071,10 +1071,10 @@ TreeView.propTypes = {
   /** class on element */
   className: PropTypes.string,
 
-  /**
-   * field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /**
+   * field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.string,
 
@@ -1084,19 +1084,19 @@ TreeView.propTypes = {
   /** return value for the select multiple use case */
   multipleValueMode: PropTypes.oneOf(['single', 'multiple', 'inheritance']),
 
-  /**
-   * return value for the select multiple use case
-   * * contains: "Công ty" contains "công", but not contains "cong"
-   * * similar: "Công ty" contains "công" and "cong"
+  /**
+   * return value for the select multiple use case
+   * * contains: "Công ty" contains "công", but not contains "cong"
+   * * similar: "Công ty" contains "công" and "cong"
    */
   searchMode: PropTypes.oneOf(['contains', 'similar']),
 
   /** The content display for label of checkbox select all */
   selectAllLabel: PropTypes.string,
 
-  /**
-   * duration wait enter search content on search<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -1112,20 +1112,20 @@ TreeView.propTypes = {
   /** the value was selected */
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
 
-  /** 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,
 
-  /**
-   * on change value function<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)
+  /**
+   * on change value function<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,
 
@@ -1138,22 +1138,22 @@ TreeView.propTypes = {
   /** the icon to display for collapse icon */
   collapseIcon: PropTypes.any,
 
-  /**
-   * 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/>
+   * }
    */
   ref: PropTypes.any
 };

package/components/typography/index.js

@@ -172,16 +172,16 @@ Typography.defaultProps = {
   tooltipDirection: 'bottom',
   type: 'p1'
 };
-/** type of text<br/>
- * h1: Title <br/>
- * h2: Header Popup <br/>
- * h3: Header popup <br/>
- * h4: Button, Tab, Title group <br/>
- * h5: Label column, Title group <br/>
- * h6: Label form <br/>
- * p1: Body text <br/>
- * p2: Body text <br/>
- * p3: Notice, Tooltip <br/>
+/** type of text<br/>
+ * h1: Title <br/>
+ * h2: Header Popup <br/>
+ * h3: Header popup <br/>
+ * h4: Button, Tab, Title group <br/>
+ * h5: Label column, Title group <br/>
+ * h6: Label form <br/>
+ * p1: Body text <br/>
+ * p2: Body text <br/>
+ * p3: Notice, Tooltip <br/>
  */
 
 export const arrTypeTypography = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];

package/icons/effect.js

@@ -97,8 +97,8 @@ Icon.propTypes = {
   /** name of icon in icons store */
   name: PropTypes.string.isRequired,
 
-  /** color of icon<br />
-   * default: #7F828E
+  /** color of icon<br />
+   * default: #7F828E
    */
   color: PropTypes.string,
 
@@ -120,19 +120,19 @@ Icon.propTypes = {
   /** have view box if true */
   onClick: PropTypes.func,
 
-  /**
-   * ref methods
-   *
-   * * 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
+   *
+   * * 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
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/package.json

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

package/utils/useInput.js

@@ -1,9 +1,12 @@
-import { useState, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const useInput = (defaultValue, valueProp, onChange, onInput, delayOnChange) => {
   const [value, setValue] = useState(defaultValue || valueProp);
   const timer = useRef(null);
   delayOnChange = Number(delayOnChange || 0);
+  useEffect(() => {
+    setValue(valueProp);
+  }, [valueProp]);
 
   const _onChange = e => {
     e.persist();