diginet-core-ui 1.3.87 → 1.3.88

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

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useState, useEffect, useRef, useImperativeHandle, forwardRef, Fragment } from 'react';
 import { createPortal } from 'react-dom';
@@ -58,8 +59,8 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowSymbol: false
   }));
   const [open, setOpen] = useState(false);
-
   /* Start handler */
+
   const onTriggerDropdown = e => {
     if (!open) {
       openDropdownBox();
@@ -68,16 +69,19 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       e.currentTarget.blur();
     }
   };
+
   const onClickOutsideOfInput = event => {
     if (ref.current && !ref.current.contains(event.target) && dropdownBoxRef.current && !dropdownBoxRef.current.contains(event.target)) {
       closeDropdownBox();
     }
   };
+
   const pressESCHandler = event => {
     if (event.key === 'Escape') {
       closeDropdownBox();
     }
   };
+
   const openDropdownBox = () => {
     setOpen(true);
     setTimeout(() => {
@@ -95,12 +99,16 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       !!onOpened && onOpened(ref.current);
     }, 10);
   };
+
   const closeDropdownBox = certain => {
     var _Array$from, _Array$from$classList;
+
     const portals = document.querySelectorAll('.DGN-UI-Portal');
+
     if (!certain && portals && portals.length > 1 && Array.from(portals)[portals.length - 1] && !Array.from(portals)[portals.length - 1].contains(ref.current) && !((_Array$from = Array.from(portals)[portals.length - 1]) !== null && _Array$from !== void 0 && (_Array$from$classList = _Array$from.classList) !== null && _Array$from$classList !== void 0 && _Array$from$classList.contains('DGN-UI-Modal'))) {
       return;
     }
+
     if (dropdownBoxRef.current) {
       dropdownBoxRef.current.style.pointerEvents = `none`;
       dropdownBoxRef.current.style.opacity = 0;
@@ -113,6 +121,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, 300);
     }
   };
+
   useEffect(() => {
     return () => {
       closeDropdownBox();
@@ -128,6 +137,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closeDropdownBox(true);
     }
   }));
+
   const renderEndIcon = () => {
     return endIcon && jsx(ButtonIcon, {
       viewType: 'ghost',
@@ -135,15 +145,14 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: openOnClickAt === 'icon' ? onTriggerDropdown : null
     });
   };
+
   return jsx(Fragment, null, jsx("div", {
     ref: ref,
     css: DropdownBoxRootCSS(bgColor),
     className: ['DGN-UI-Dropdown-Box', open && 'dropdown-showing', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style
-  }, label ? jsx(Label, {
-    ...labelProps
-  }, label) : null, jsx(InputBase, {
-    ...inputProps,
+  }, label ? jsx(Label, { ...labelProps
+  }, label) : null, jsx(InputBase, { ...inputProps,
     className: open ? 'dropdown-focus' : '',
     style: inputStyle,
     viewType: viewType,
@@ -161,8 +170,8 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: DropdownBoxCSS(zIndex)
   }, children), document.body));
 }));
-
 /* Start styled */
+
 const DropdownBoxRootCSS = bgColor => css`
     &.DGN-UI-Dropdown-Box {
         ${displayBlock}
@@ -192,6 +201,7 @@ const DropdownBoxRootCSS = bgColor => css`
         }
     }
 `;
+
 const DropdownBoxCSS = zIndex => css`
     ${displayBlock};
     ${paragraph1};
@@ -225,6 +235,7 @@ const DropdownBoxCSS = zIndex => css`
 `;
 /* End styled */
 
+
 DropdownBox.defaultProps = {
   className: '',
   label: '',
@@ -240,40 +251,58 @@ DropdownBox.defaultProps = {
 DropdownBox.propTypes = {
   /** class for dropdown */
   className: PropTypes.string,
+
   /** label for input */
   label: PropTypes.string,
+
   /** hints for input */
   placeholder: PropTypes.string,
+
   /** the content to display in input */
   value: PropTypes.string,
+
   /** icon at start */
   startIcon: PropTypes.string,
+
   /** icon at end */
   endIcon: PropTypes.string,
+
   /** background color of DropdownBox input */
   bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
   /** viewType of InputBase */
   viewType: PropTypes.oneOf(['underlined', 'outlined']),
+
   /** viewType of InputBase */
   openOnClickAt: PropTypes.oneOf(['full', 'icon']),
+
   /** style inline for dropdown */
   style: PropTypes.object,
+
   /** props of input in DropdownBox component */
   inputProps: PropTypes.object,
+
   /** style inline of input in DropdownBox component */
   inputStyle: PropTypes.object,
+
   /** the function will run when entering input */
   onChangeInput: PropTypes.func,
+
   /** delay time on input */
   delayOnInput: PropTypes.number,
+
   /** style inline of label in DropdownBox component */
   labelProps: PropTypes.object,
+
   /** z-index for DropdownBox component */
   zIndex: PropTypes.number,
+
   /** the contents in DropdownBox box (Exp: TreeView) */
   children: PropTypes.node.isRequired,
+
   /** the function will run after open */
   onOpened: PropTypes.func,
+
   /** the function will run after close */
   onClosed: PropTypes.func
 };

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

@@ -13,11 +13,13 @@ const Form = /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
+
   const submitHandler = e => {
     e.preventDefault();
     !!onValidate && onValidate();
     !!onSubmit && onSubmit(e);
   };
+
   useEffect(() => {
     !!onLoaded && onLoaded(ref.current);
   }, []);

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

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useRef, useEffect, forwardRef, Children, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -17,8 +18,8 @@ const FormGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const ref = useRef(null);
   const previousError = useRef(false);
-
   /* Start styled */
+
   const FormGroupRoot = css`
             position: relative;
             align-items: flex-end;
@@ -58,9 +59,11 @@ const FormGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* End styled */
 
   /* Start handler */
+
   const resetLabelPosition = () => {
     const allUnderlined = ref.current.querySelectorAll('.DGN-UI-InputBase.underlined');
     const outlined = ref.current.querySelector('.DGN-UI-InputBase.outlined');
+
     if (allUnderlined.length && outlined) {
       allUnderlined.forEach(input => {
         if (input.previousElementSibling) {
@@ -69,6 +72,7 @@ const FormGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
   };
+
   useEffect(() => {
     if (ref.current) {
       resetLabelPosition();
@@ -82,6 +86,7 @@ const FormGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           isError = true;
         }
       });
+
       if (previousError.current !== isError) {
         previousError.current = isError;
         ref.current.querySelectorAll('.DGN-UI-TextInput, .DGN-UI-Dropdown, .DGN-UI-InputBase').forEach(node => {

package/components/form-control/helper-text/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -37,10 +38,11 @@ const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -70,14 +72,19 @@ HelperText.defaultProps = {
 HelperText.propTypes = {
   /** If true, the component is disabled. */
   disabled: PropTypes.bool,
+
   /** status type to display color for input (only available for type is inform) */
   status: PropTypes.oneOf(['default', 'warning', 'success', 'danger', 'info']),
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** Style inline of component. */
   style: PropTypes.object,
+
   /** Content to display in component. */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography) of Typography */
   props: PropTypes.any
 };

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

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Icon, Typography } from "../..";
@@ -76,10 +77,12 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   if (!reference) reference = useRef(null);
   if (!autoWidth && inputProps !== null && inputProps !== void 0 && inputProps.autoWidth) autoWidth = inputProps.autoWidth;
+
   const _onChange = e => {
     onChange && onChange(e);
     dynamicWidth(e);
   };
+
   const {
     bind,
     value
@@ -92,19 +95,28 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const styleInputBase = useRef(null);
   const widthInit = useRef(null);
   const isEnabled = !readOnly && !disabled;
+
   const _InputBaseCSS = InputBaseCSS(readOnly, status);
+
   const _SingleLineCSS = SingleLineCSS(autoWidth, readOnly);
+
   const _InputCSS = InputCSS(autoWidth, isEnabled, hoverTooltip);
+
   const _TypoCSS = TypoCSS(disabled);
+
   const _TextAreaCSS = TextAreaCSS(resize, readOnly);
+
   const _MultilineCSS = MultilineCSS(_TextAreaCSS.name, rows, maxRows);
-  const _InputBaseIconCSS = InputBaseIconCSS(multiline);
 
+  const _InputBaseIconCSS = InputBaseIconCSS(multiline);
   /* Start handler */
+
+
   const onInputTextArea = e => {
     if (!/\d+/.test(rows)) {
       const el = e.target;
       const defaultHeight = 24;
+
       if (el.value) {
         el.style.height = 0;
         el.style.height = Math.max(defaultHeight, el.scrollHeight) + 'px';
@@ -112,8 +124,10 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         el.style.height = defaultHeight + 'px';
       }
     }
+
     !!onInput && onInput(e);
   };
+
   useEffect(() => {
     if (defaultValue !== undefined && defaultValue !== '') {
       if (multiline && !/\d+/.test(rows) && inputRef.current) {
@@ -126,15 +140,18 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (multiline && !/\d+/.test(rows) && inputRef.current && !(inputRef.current.value || inputRef.current.value === 0)) {
       inputRef.current.style.height = '24px';
     }
+
     if (autoFocus) {
       inputRef.current.focus();
     }
   }, [multiline]);
   useEffect(() => {
     const defaultHeight = 24;
+
     if (valueProp !== undefined) {
       valueArray.current.push(valueProp);
-      inputRefProp.current.value = valueProp;
+      inputRef.current.value = valueProp;
+
       if (multiline && !/\d+/.test(rows)) {
         inputRef.current.style.height = 0;
         inputRef.current.style.height = Math.max(defaultHeight, inputRef.current.scrollHeight) + 'px';
@@ -146,6 +163,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         });
       }
     }
+
     return () => {
       if (valueProp !== undefined && multiline && !/\d+/.test(rows) && inputRef.current) {
         inputRef.current.style.height = defaultHeight + 'px';
@@ -155,35 +173,40 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* End handler */
 
   useImperativeHandle(reference, () => {
-    const currentRef = inputRefProp.current || {};
-    const _instance = {
-      ...action
+    const currentRef = inputRef.current || {};
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
+
   const saveInitInfo = refs => {
     if (!autoWidth) return;
     const style = window.getComputedStyle(refs) || refs.currentStyle;
     if (!widthInit.current) widthInit.current = parseInt(style.width);
     styleInputBase.current = style;
   };
+
   const dynamicWidth = e => {
-    if (!autoWidth || !inputRefProp.current) return;
-    if (!canvas || !styleInputBase.current || !inputRefProp.current) return;
+    if (!autoWidth || !inputRef.current) return;
+    if (!canvas || !styleInputBase.current || !inputRef.current) return;
     const context = canvas.getContext('2d');
     context.font = styleInputBase.current.font;
     const {
       width
     } = context.measureText(e.target.value);
-    inputRefProp.current.style.width = `${Math.max(width, widthInit.current)}px`;
+    inputRef.current.style.width = `${Math.max(width, widthInit.current)}px`;
   };
-
   /* Start component */
+
+
   const newClass = viewType + (viewType === 'none' || nonStyle ? ' non-style' : '');
   const StartIcon = useMemo(() => {
     let node = startIcon;
+
     if (typeof node === 'string') {
       node = jsx(Icon, {
         name: startIcon,
@@ -191,6 +214,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         ...startIconProps
       });
     }
+
     return jsx("div", {
       css: _InputBaseIconCSS,
       className: classNames('DGN-UI-InputBase-Start-Icon', startIconProps.className),
@@ -199,6 +223,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [startIcon, startIconProps]);
   const EndIcon = useMemo(() => {
     let node = endIcon;
+
     if (typeof node === 'string') {
       node = jsx(Icon, {
         name: endIcon,
@@ -206,6 +231,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         ...endIconProps
       });
     }
+
     return jsx("div", {
       css: _InputBaseIconCSS,
       className: classNames('DGN-UI-InputBase-End-Icon', endIconProps.className),
@@ -281,6 +307,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   return multiline ? MultipleInputComp : InputComp;
 }));
+
 const InputBaseCSS = (readOnly, status) => css`
     ${flexRow};
     ${positionRelative};
@@ -411,6 +438,7 @@ const InputBaseCSS = (readOnly, status) => css`
         top: 100%;
     }
 `;
+
 const SingleLineCSS = (autoWidth, readOnly) => css`
     ${parseWidthHeight(autoWidth ? 'max-content' : 'auto', 'max-content')}
     ${itemsCenter};
@@ -429,6 +457,7 @@ const SingleLineCSS = (autoWidth, readOnly) => css`
         ${bgColor(systemWhite)};
     }
 `;
+
 const InputCSS = (autoWidth, isEnabled, hoverTooltip) => css`
     ${parseWidthHeight(autoWidth ? '10px' : '100%', 24)};
     ${borderNone};
@@ -458,6 +487,7 @@ const InputCSS = (autoWidth, isEnabled, hoverTooltip) => css`
     }
     ${!isEnabled && hoverTooltip && displayNone};
 `;
+
 const TypoCSS = disabled => css`
     ${parseHeight(24)};
     &:focus {
@@ -469,6 +499,7 @@ const TypoCSS = disabled => css`
     }
     ${disabled && userSelectNone};
 `;
+
 const MultilineCSS = (TextAreaCSSName, rows, maxRows) => css`
     ${parseWidthHeight('100%', 'max-content')};
     &.outlined {
@@ -486,6 +517,7 @@ const MultilineCSS = (TextAreaCSSName, rows, maxRows) => css`
         }
     }
 `;
+
 const TextAreaCSS = (resize, readOnly) => css`
     ${displayBlock};
     ${paragraph1};
@@ -524,6 +556,7 @@ const TextAreaCSS = (resize, readOnly) => css`
         background-clip: content-box;
     }
 `;
+
 const InputBaseIconCSS = multiple => css`
     ${flexRow};
     ${multiple && selfEnd};
@@ -538,6 +571,7 @@ const InputBaseIconCSS = multiple => css`
         ${mgl([1])};
     }
 `;
+
 InputBase.defaultProps = {
   autoComplete: 'off',
   autoFocus: false,
@@ -563,64 +597,94 @@ InputBase.defaultProps = {
 InputBase.propTypes = {
   /** This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). */
   autoComplete: PropTypes.string,
+
   /** If `true`, the input element is focused during the first mount. */
   autoFocus: PropTypes.bool,
+
   /** If `true`, the width of the component will automatically be set according to the contents inside the input, don't run with multiline = true */
   autoWidth: PropTypes.bool,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** The default value. Use when the component is not controlled. */
   defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** The number of milliseconds to wait before call onChange. */
   delayOnChange: PropTypes.number,
+
   /** If `true`, the component is disabled.*/
   disabled: PropTypes.bool,
+
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the right of input. */
   endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
   /** Props of end icon. */
   endIconProps: PropTypes.object,
+
   /** Style inline of icon. */
   iconStyle: PropTypes.object,
+
   /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) applied to the input element. */
   inputProps: PropTypes.object,
+
   /** Pass a ref to the input element. */
   inputRef: ref,
+
   /** Style inline of input element. */
   inputStyle: PropTypes.object,
+
   /** Maximum number of rows to display when multiline option is set to true. */
   maxRows: PropTypes.number,
+
   /** If `true`, a textarea element is rendered. */
   multiline: PropTypes.bool,
+
   /** Callback fired when the input is blurred. */
   onBlur: PropTypes.func,
+
   /** Callback fired when the value is changed. */
   onChange: PropTypes.func,
+
   /** Callback fired when the input is focused. */
   onFocus: PropTypes.func,
+
   /** Callback fired when input. */
   onInput: PropTypes.func,
+
   /** Callback fired when pressing a key. */
   onKeyDown: PropTypes.func,
+
   /** Callback fired when releases a key. */
   onKeyUp: PropTypes.func,
+
   /** The short hint displayed in the input before the user enters a value. */
   placeholder: PropTypes.string,
+
   /** If `true`, the component is readonly. */
   readOnly: PropTypes.bool,
+
   /** If `true`, the input element is required. */
   required: PropTypes.bool,
+
   /** allow resize multiline input (resize css style) */
   resize: PropTypes.string,
+
   /** Number of rows to display when multiline option is set to true. */
   rows: PropTypes.number,
+
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the left of input. */
   startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
   /** Props of start icon. */
   startIconProps: PropTypes.object,
+
   /** Status type to display color for input. */
   status: PropTypes.oneOf(['default', 'warning', 'success', 'danger', 'info']),
+
   /** The value of the input element, required for a controlled component. */
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** The variant to use. */
   viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
 };

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

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Typography } from "../..";
@@ -38,10 +39,11 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -89,20 +91,28 @@ Label.defaultProps = {
 Label.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
+
   /** If `true`, the component is readonly. */
   readOnly: PropTypes.bool,
+
   /** If `true`, the label will indicate that the input is required. */
   required: PropTypes.bool,
+
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
   color: PropTypes.string,
+
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
   lineClamp: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
+
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
   hoverTooltip: PropTypes.bool,
+
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
   type: PropTypes.oneOf(typographyTypes)
 };