diginet-core-ui 1.3.88 → 1.3.89

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useState, useEffect, useRef, useImperativeHandle, forwardRef, Fragment } from 'react';
 import { createPortal } from 'react-dom';
@@ -7,10 +6,9 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, InputBase, Label } from "../../";
 import { randomString } from "../../../utils";
-import { color as colors } from "../../../styles/colors";
 import { typography } from "../../../styles/typography";
 import { boxBorder, borderRadius4px, displayBlock, positionFixed, positionRelative } from "../../../styles/general";
-import { useTheme } from "../../../theme";
+import { useTheme, useColor as colors } from "../../../theme";
 const {
   paragraph1
 } = typography;
@@ -59,8 +57,8 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowSymbol: false
   }));
   const [open, setOpen] = useState(false);
-  /* Start handler */
 
+  /* Start handler */
   const onTriggerDropdown = e => {
     if (!open) {
       openDropdownBox();
@@ -69,19 +67,16 @@ 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(() => {
@@ -99,16 +94,12 @@ 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;
@@ -121,7 +112,6 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }, 300);
     }
   };
-
   useEffect(() => {
     return () => {
       closeDropdownBox();
@@ -137,7 +127,6 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closeDropdownBox(true);
     }
   }));
-
   const renderEndIcon = () => {
     return endIcon && jsx(ButtonIcon, {
       viewType: 'ghost',
@@ -145,14 +134,15 @@ 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,
@@ -170,8 +160,8 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: DropdownBoxCSS(zIndex)
   }, children), document.body));
 }));
-/* Start styled */
 
+/* Start styled */
 const DropdownBoxRootCSS = bgColor => css`
     &.DGN-UI-Dropdown-Box {
         ${displayBlock}
@@ -201,7 +191,6 @@ const DropdownBoxRootCSS = bgColor => css`
         }
     }
 `;
-
 const DropdownBoxCSS = zIndex => css`
     ${displayBlock};
     ${paragraph1};
@@ -235,7 +224,6 @@ const DropdownBoxCSS = zIndex => css`
 `;
 /* End styled */
 
-
 DropdownBox.defaultProps = {
   className: '',
   label: '',
@@ -251,58 +239,40 @@ 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,13 +13,11 @@ 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,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, useEffect, forwardRef, Children, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -18,8 +17,8 @@ const FormGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const ref = useRef(null);
   const previousError = useRef(false);
-  /* Start styled */
 
+  /* Start styled */
   const FormGroupRoot = css`
             position: relative;
             align-items: flex-end;
@@ -59,11 +58,9 @@ 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) {
@@ -72,7 +69,6 @@ const FormGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
   };
-
   useEffect(() => {
     if (ref.current) {
       resetLabelPosition();
@@ -86,7 +82,6 @@ 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,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -38,11 +37,10 @@ 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;
   });
@@ -72,19 +70,14 @@ 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,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Icon, Typography } from "../..";
@@ -77,12 +76,10 @@ 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
@@ -95,28 +92,19 @@ 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);
-  /* Start handler */
-
 
+  /* 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';
@@ -124,10 +112,8 @@ 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) {
@@ -140,18 +126,15 @@ 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);
       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';
@@ -163,7 +146,6 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         });
       }
     }
-
     return () => {
       if (valueProp !== undefined && multiline && !/\d+/.test(rows) && inputRef.current) {
         inputRef.current.style.height = defaultHeight + 'px';
@@ -174,22 +156,19 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   useImperativeHandle(reference, () => {
     const currentRef = inputRef.current || {};
-    const _instance = { ...action
+    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 || !inputRef.current) return;
     if (!canvas || !styleInputBase.current || !inputRef.current) return;
@@ -200,13 +179,11 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } = context.measureText(e.target.value);
     inputRef.current.style.width = `${Math.max(width, widthInit.current)}px`;
   };
-  /* Start component */
-
 
+  /* 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,
@@ -214,7 +191,6 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         ...startIconProps
       });
     }
-
     return jsx("div", {
       css: _InputBaseIconCSS,
       className: classNames('DGN-UI-InputBase-Start-Icon', startIconProps.className),
@@ -223,7 +199,6 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [startIcon, startIconProps]);
   const EndIcon = useMemo(() => {
     let node = endIcon;
-
     if (typeof node === 'string') {
       node = jsx(Icon, {
         name: endIcon,
@@ -231,7 +206,6 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         ...endIconProps
       });
     }
-
     return jsx("div", {
       css: _InputBaseIconCSS,
       className: classNames('DGN-UI-InputBase-End-Icon', endIconProps.className),
@@ -307,7 +281,6 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   return multiline ? MultipleInputComp : InputComp;
 }));
-
 const InputBaseCSS = (readOnly, status) => css`
     ${flexRow};
     ${positionRelative};
@@ -438,7 +411,6 @@ const InputBaseCSS = (readOnly, status) => css`
         top: 100%;
     }
 `;
-
 const SingleLineCSS = (autoWidth, readOnly) => css`
     ${parseWidthHeight(autoWidth ? 'max-content' : 'auto', 'max-content')}
     ${itemsCenter};
@@ -457,7 +429,6 @@ const SingleLineCSS = (autoWidth, readOnly) => css`
         ${bgColor(systemWhite)};
     }
 `;
-
 const InputCSS = (autoWidth, isEnabled, hoverTooltip) => css`
     ${parseWidthHeight(autoWidth ? '10px' : '100%', 24)};
     ${borderNone};
@@ -487,7 +458,6 @@ const InputCSS = (autoWidth, isEnabled, hoverTooltip) => css`
     }
     ${!isEnabled && hoverTooltip && displayNone};
 `;
-
 const TypoCSS = disabled => css`
     ${parseHeight(24)};
     &:focus {
@@ -499,7 +469,6 @@ const TypoCSS = disabled => css`
     }
     ${disabled && userSelectNone};
 `;
-
 const MultilineCSS = (TextAreaCSSName, rows, maxRows) => css`
     ${parseWidthHeight('100%', 'max-content')};
     &.outlined {
@@ -517,7 +486,6 @@ const MultilineCSS = (TextAreaCSSName, rows, maxRows) => css`
         }
     }
 `;
-
 const TextAreaCSS = (resize, readOnly) => css`
     ${displayBlock};
     ${paragraph1};
@@ -556,7 +524,6 @@ const TextAreaCSS = (resize, readOnly) => css`
         background-clip: content-box;
     }
 `;
-
 const InputBaseIconCSS = multiple => css`
     ${flexRow};
     ${multiple && selfEnd};
@@ -571,7 +538,6 @@ const InputBaseIconCSS = multiple => css`
         ${mgl([1])};
     }
 `;
-
 InputBase.defaultProps = {
   autoComplete: 'off',
   autoFocus: false,
@@ -597,94 +563,64 @@ 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,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Typography } from "../..";
@@ -39,11 +38,10 @@ 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;
   });
@@ -91,28 +89,20 @@ 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)
 };