diginet-core-ui 1.3.61-beta.2 → 1.3.62-beta.1

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/date-picker/index.js

@@ -534,7 +534,6 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, jsx(InputBase, {
     placeholder: placeholder,
     ...inputProps,
-    readOnly: true,
     ref: ipConRef,
     inputRef: ipRef,
     disabled: disabled,
@@ -544,7 +543,8 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...inputStyle
     },
     startIcon: startIcon,
-    endIcon: endIcon
+    endIcon: endIcon,
+    onKeyDown: e => e.preventDefault()
   })), isError && jsx(HelperText, { ...errorProps,
     style: {
       minHeight: 16,

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, {
@@ -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);
@@ -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, {
@@ -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, {
@@ -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.62-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/readme.md

@@ -38,6 +38,9 @@ npm test
 ```
 
 ## Changelog
+## 1.3.62
+- \[Changed\]: Radio – Add value to event target
+
 ## 1.3.61
 - \[Added\]: MenuIcon – MHRM09N1035
 - \[Fixed\]: Dropdown – Fix bug not support Firefox browser

package/styles/colors.js

@@ -253,7 +253,17 @@ export const color = {
   blue17: '#B5D9FF',
   blue18: '#ABD3FF',
   blue19: '#A0CEFF',
-  blue20: '#96C8FF'
+  blue20: '#96C8FF',
+  //aqua
+  aqua5: '#00C4DF',
+  //pistachio
+  pistachio5: '#94C800',
+  //pumpkin
+  pumpkin5: '#FF7612',
+  //magenta
+  magenta5: '#DA30B4',
+  //violet
+  violet5: '#A430FF'
 };
 color.semantic = {
   danger: color.danger5,