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

package/components/collapse/index.js

@@ -1,66 +1,106 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, forwardRef } from 'react';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { displayBlock, parseWidthHeight, positionRelative } from '../../styles/general';
 const Collapse = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  open,
   children,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
+  className,
+  id,
+  onClosed,
+  onOpened,
+  open,
+  style
+}, reference) => {
+  const ref = useRef(null);
+  const timer = useRef(null);
+
+  const _onOpen = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+
+    const scrollHeight = ref.current.scrollHeight;
+    const duration = Math.min(scrollHeight, 1500);
+    ref.current.style.transitionDuration = duration + 'ms';
+    ref.current.style.height = scrollHeight + 'px';
+    timer.current = setTimeout(() => {
+      if (ref.current) {
+        ref.current.style.height = 'auto';
+      }
+
+      onOpened && onOpened(ref.current);
+    }, duration);
+  };
+
+  const _onClose = () => {
+    if (ref.current) {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
 
-  const CollapseRoot = css`
-        display: block;
-        position: relative;
-        width: 100%;
-        height: 0;
-        transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        overflow-y: clip;
-    `;
-  useEffect(() => {
-    if (open) {
       const scrollHeight = ref.current.scrollHeight;
-      const duration = Math.min(scrollHeight, 1500);
-      ref.current.style.transitionDuration = duration + 'ms';
       ref.current.style.height = scrollHeight + 'px';
-      setTimeout(() => {
+      timer.current = setTimeout(() => {
         if (ref.current) {
-          ref.current.style.height = 'auto';
+          ref.current.style.height = null;
         }
-      }, duration);
-      return () => {
-        if (ref.current) {
-          ref.current.style.height = scrollHeight + 'px';
-          setTimeout(() => {
-            if (ref.current) {
-              ref.current.style.height = null;
-            }
-          }, 0);
-        }
-      };
+
+        onClosed && onClosed(ref.current);
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      _onOpen();
+    } else {
+      _onClose();
     }
   }, [open]);
-  return jsx("div", {
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  return useMemo(() => jsx("div", {
     css: CollapseRoot,
     ref: ref,
-    ...props
-  }, children);
+    id: id,
+    style: style,
+    className: ['DGN-UI-Collapse', className].join(' ').trim().replace(/\s+/g, ' ')
+  }, children), [children, className, id, onClosed, onOpened, open, style]);
 }));
+const CollapseRoot = css`
+    ${displayBlock};
+    ${positionRelative};
+    ${parseWidthHeight('100%', 0)};
+    transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    overflow-y: clip;
+`;
 Collapse.defaultProps = {
-  open: false
+  className: '',
+  open: false,
+  style: {}
 };
 Collapse.propTypes = {
-  /** expand content if true */
-  open: PropTypes.bool,
-
-  /** The element to display in alert like text props (priority) */
+  /** The content of the component. */
   children: PropTypes.node,
 
-  /** any props else */
-  props: PropTypes.any
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Callback fired when the component closed. */
+  onClosed: PropTypes.func,
+
+  /** Callback fired when the component opened. */
+  onOpened: PropTypes.func,
+
+  /** If `true`, the content is shown. */
+  open: PropTypes.bool,
+
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default Collapse;

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

@@ -123,6 +123,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   convertToWords,
   prefix,
   suffix,
+  labelProps,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -418,7 +419,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: MoneyInputRoot,
     className: ['DGN-UI-Money-Input', className].join(' ').trim().replace(/\s+/g, ' '),
     ...props
-  }, !!label && jsx(Label, {
+  }, !!label && jsx(Label, { ...labelProps,
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {
@@ -548,10 +549,10 @@ MoneyInput.propTypes = {
   /** style inline of input in MoneyInput component */
   inputStyle: PropTypes.object,
 
-  /** 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]),
 
@@ -564,13 +565,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,
 
@@ -581,6 +582,9 @@ MoneyInput.propTypes = {
   onFocus: PropTypes.func,
 
   /** inputRef of MoneyInput component */
-  inputRef: PropTypes.any
+  inputRef: PropTypes.any,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
+  labelProps: PropTypes.object
 };
 export default MoneyInput;

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

@@ -51,7 +51,8 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   delayOnChange,
   fixedDecimalDigit,
   className,
-  maxDigit
+  maxDigit,
+  labelProps
 }, reference) => {
   inputRef = inputRef || useRef(null);
   const pos = useRef(null);
@@ -77,13 +78,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function(*): number}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function(*): number}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
 
   const parseNumberToMoney = useCallback((vl, isNumber) => {
@@ -117,13 +118,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
 
     return number;
   }, [decimalSymbol, max, value]);
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function(*): number}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function(*): number}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
 
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
@@ -269,7 +270,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     ref: ref,
     css: NumberInputRoot,
     className: ['DGN-UI-NumberInput', className].join(' ').trim().replace(/\s+/g, ' ')
-  }, !!label && jsx(Label, {
+  }, !!label && jsx(Label, { ...labelProps,
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {
@@ -394,10 +395,10 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /** 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]),
 
@@ -435,6 +436,9 @@ NumberInput.propTypes = {
   className: PropTypes.string,
 
   /** max character is number of NumberInput component */
-  maxDigit: PropTypes.number
+  maxDigit: PropTypes.number,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
+  labelProps: PropTypes.object
 };
 export default NumberInput;

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

@@ -35,6 +35,7 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   inputRef,
   inputProps,
   inputStyle,
+  labelProps,
   error,
   onChange,
   onBlur,
@@ -295,7 +296,7 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       marginBottom: '20px'
     },
     ...props
-  }, jsx(Label, {
+  }, jsx(Label, { ...labelProps,
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {
@@ -396,13 +397,13 @@ PhoneInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function. Return a object, example:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
-   * }
+  /**
+   * on change function. Return a object, example:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
+   * }
    */
   onChange: PropTypes.func,
 
@@ -413,6 +414,9 @@ PhoneInput.propTypes = {
   onFocus: PropTypes.func,
 
   /** inputRef of PhoneInput component */
-  inputRef: PropTypes.any
+  inputRef: PropTypes.any,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
+  labelProps: PropTypes.object
 };
 export default PhoneInput;

package/components/popover/index.js

@@ -488,9 +488,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]),
 
-  /**
-   * 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']),
@@ -509,14 +509,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' }
-   * * right: 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' }
+   * * right: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
    */
   direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
 
@@ -532,9 +532,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']),
@@ -547,13 +547,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: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/tooltip/index.js

@@ -70,6 +70,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   tooltipMaxWidth,
   viewportPadding,
   className,
+  disabled,
   ...props
 }, reference) => {
   const Id = randomString(6, {
@@ -439,6 +440,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setOpenTrue = () => {
+    if (disabled) return;
     setOpen(true);
   };
 
@@ -540,7 +542,8 @@ Tooltip.defaultProps = {
   textAlign: 'center',
   viewportPadding: defaultViewPadding,
   className: '',
-  style: {}
+  style: {},
+  disabled: false
 };
 Tooltip.propTypes = {
   /** alignMode use to set align-items of the tooltip*/
@@ -564,6 +567,9 @@ Tooltip.propTypes = {
   /** initialize direction of the tooltip */
   direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
 
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+
   /** distance between the tooltip and the children */
   distance: PropTypes.number,
 

package/package.json

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