diginet-core-ui 1.3.88 → 1.3.89

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
@@ -47,13 +46,11 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   const ref = useRef(null);
-
   if (!inputRef) {
     inputRef = useRef(null);
   }
-  /* Start styled */
-
 
+  /* Start styled */
   const PhoneInputRoot = css`
                 display: block;
                 position: relative;
@@ -70,167 +67,133 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   /* End styled */
 
   let currentKey,
-      isUnicode = 0,
-      isFocus = false,
-      isPaste = false,
-      clipboardText = '';
-  /* Start handler */
+    isUnicode = 0,
+    isFocus = false,
+    isPaste = false,
+    clipboardText = '';
 
+  /* Start handler */
   const replaceMark = value => {
     let result = ensigns[ensign].mark;
-
     if (value) {
       value = value.replaceAll(' ', '').replace(/_+$/, '');
       const length = value.length;
-
       if (length) {
         for (let i = 0; i < length; i++) {
           result = result.replace('_', value[i]);
         }
       }
     }
-
     return result;
   };
-
   const onFocusHandler = e => {
     document.addEventListener('mouseup', onMouseUpHandler);
     isFocus = true;
     !!onFocus && onFocus(e);
   };
-
   const onMouseUpHandler = () => {
-    const text = window.getSelection().toString(); // Start focus and don't selection any text
-
+    const text = window.getSelection().toString();
+    // Start focus and don't selection any text
     if (!text) {
       const value = inputRef.current.value;
       const markFirstIndex = value.indexOf('_');
       let cursor = inputRef.current.selectionStart;
-
       if (isFocus) {
         isFocus = false;
-
         if (markFirstIndex !== -1) {
           inputRef.current.setSelectionRange(markFirstIndex, markFirstIndex);
         }
-
         return;
       }
-
       if (value[cursor] === ' ') {
         inputRef.current.setSelectionRange(cursor + 1, cursor + 1);
         return;
       }
-
       if (markFirstIndex !== -1 && markFirstIndex < cursor) {
         inputRef.current.setSelectionRange(markFirstIndex, markFirstIndex);
       }
     }
   };
-
   const onBlurHandler = e => {
     document.removeEventListener('mouseup', onMouseUpHandler);
     !!onBlur && onBlur(e);
   };
-
   const onKeyDownHandler = e => {
     const key = e.key;
     const keyCode = e.keyCode;
-
     if (/Arrow|Home|End/.test(key) || /a|x|c|v/i.test(key) && e.ctrlKey) {
       return;
     }
-
     if (keyCode === 231) {
       isUnicode = isUnicode > 0 ? 0 : 1;
       e.preventDefault();
       return false;
     }
-
     if (keyCode === 8 && /^[12]$/.test(isUnicode)) {
       isUnicode++;
       e.preventDefault();
       return false;
     }
-
     if (!/[0-9]|Backspace|Delete/.test(key)) {
       isUnicode = -1;
       currentKey = key;
       e.preventDefault();
       return false;
     }
-
     const {
       value,
       selectionStart: cursor
     } = inputRef.current;
-
     if (key === 'ArrowRight') {
       if (value[cursor] === '_') {
         e.preventDefault();
         return false;
       }
-
       if (!value[cursor + 1].trim()) {
         inputRef.current.setSelectionRange(cursor + 1, cursor + 1);
       }
     }
-
     if (/[0-9]/.test(key) && !value[cursor]) {
       e.preventDefault();
       return false;
     }
-
     isUnicode = 0;
     currentKey = key;
     !!onKeyDown && onKeyDown(e);
   };
-
   const onPasteHandler = e => {
     clipboardText = (e.clipboardData || window.clipboardData).getData('text');
-
     if (!/\d+/.test(clipboardText)) {
       e.preventDefault();
       return;
     }
-
     isPaste = true;
   };
-
   const onChangeHandler = e => {
     let value = e.target.value;
     let cursor = e.target.selectionStart;
-
     if (isPaste) {
       isPaste = false;
       value = value.replace(/\s/g, '');
       const index = value.indexOf(clipboardText);
-
       if (!index && value[0] === '0') {
         value = value.slice(1);
       }
-
       const cursorOnPaste = index + clipboardText.length;
       const mark = ensigns[ensign].mark;
       const lengthOfMark = mark.length;
-
       if (cursorOnPaste < lengthOfMark) {
         let newCursor = cursorOnPaste;
-
         while (mark.slice(0, newCursor).match(/_/g).length < cursorOnPaste && newCursor < lengthOfMark) {
           newCursor++;
         }
-
         if (!mark[newCursor].trim()) {
           newCursor++;
         }
-
         cursor = newCursor;
       }
     }
-
     const result = replaceMark(value);
-
     if (/\d/.test(currentKey)) {
       if (result[cursor] && (!result[cursor].trim() || !result[cursor - 1].trim())) {
         cursor++;
@@ -240,14 +203,14 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         cursor--;
       }
     }
-
     e.target.value = result;
     e.target.setSelectionRange(cursor, cursor);
-
     if (onChange) {
-      const el = { ...e
+      const el = {
+        ...e
       };
-      el.target = { ...e.targe
+      el.target = {
+        ...e.targe
       };
       el.target.value = '(+' + ensigns[ensign].countryCode + ') ' + result.replaceAll('_', '');
       el.value = '0' + result.replace(/\s|_/g, '');
@@ -255,14 +218,11 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onChange(el);
     }
   };
-
   useEffect(() => {
     !!refs && refs(ref);
-
     if (defaultValue !== undefined && defaultValue !== '') {
       inputRef.current.value = replaceMark(defaultValue.replace(/^0/, ''));
     }
-
     if (autoFocus) {
       inputRef.current.focus();
       const value = inputRef.current.value;
@@ -270,7 +230,6 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       markIndex = markIndex !== -1 ? markIndex : ensigns[ensign].mark.length;
       inputRef.current.setSelectionRange(markIndex, markIndex);
     }
-
     return () => {
       document.removeEventListener('mouseup', onMouseUpHandler);
     };
@@ -297,7 +256,8 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       marginBottom: '20px'
     },
     ...props
-  }, jsx(Label, { ...labelProps,
+  }, jsx(Label, {
+    ...labelProps,
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {
@@ -325,7 +285,8 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     startIconProps: {
       className: 'non-effect'
     }
-  }), !!error && jsx(HelperText, { ...helperTextProps,
+  }), !!error && jsx(HelperText, {
+    ...helperTextProps,
     disabled: disabled
   }, error));
 }));
@@ -346,80 +307,57 @@ PhoneInput.defaultProps = {
 PhoneInput.propTypes = {
   /** the type of border you want to display */
   viewType: PropTypes.oneOf(['underlined', 'outlined']),
-
   /** the ensign to determinate */
   ensign: PropTypes.oneOf(['Vietnam', 'England']),
-
   /** label for input */
   label: PropTypes.string,
-
   /** default value is displayed for first render */
   defaultValue: PropTypes.string,
-
   /** the displayed value for each change */
   value: PropTypes.string,
-
   /** hints for input */
   placeholder: PropTypes.string,
-
   /** error for input */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** prevent all event if true, hide all icon */
   disabled: PropTypes.bool,
-
   /** hidden ensign icon if true */
   hiddenEnsign: PropTypes.bool,
-
   /** prevent all event if true */
   readOnly: PropTypes.bool,
-
   /** auto focus after first render */
   autoFocus: PropTypes.bool,
-
   /** At least one character is required */
   required: PropTypes.bool,
-
   /** props of input in PhoneInput component */
   inputProps: PropTypes.object,
-
   /** style inline of input in PhoneInput component */
   inputStyle: PropTypes.object,
-
   /** The function to get ref of Dropdown component */
   refs: PropTypes.func,
-
   /** on key down function */
   onKeyDown: PropTypes.func,
-
   /** on key up function */
   onKeyUp: PropTypes.func,
-
   /** 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,
-
   /** on blur function */
   onBlur: PropTypes.func,
-
   /** on focus function */
   onFocus: PropTypes.func,
-
   /** inputRef of PhoneInput component */
   inputRef: PropTypes.any,
-
   /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
   labelProps: PropTypes.object,
-
   /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
   helperTextProps: PropTypes.object
 };

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -16,9 +15,9 @@ const {
     },
     system: {
       active: clSystemActive,
-      rest: clSystemRest
+      rest: clSystemRest,
+      disabled: systemDisabled
     },
-    disabled: clDisabled,
     semantic: {
       danger: clDanger
     }
@@ -45,30 +44,26 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!inputRef) {
     inputRef = useRef(null);
   }
-
   const [unique] = useState(randomString(10, {
     allowNumber: false,
     allowSymbol: false
   }));
   const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
-
   const _formCheckInputCSS = formCheckInputCSS(width);
-
   const _formCheckLabelCSS = formCheckLabelCSS(width);
-
   const handleChange = e => {
     if (disabled || readOnly) return;
     if (checked === undefined) setCheckedState(true);
     e = {
       value: value,
-      target: { ...inputRef.current,
+      target: {
+        ...inputRef.current,
         checked: true,
         value: value
       }
     };
     if (onChange) onChange(e);
   };
-
   useEffect(() => {
     if (checked !== undefined) setCheckedState(Boolean(checked));
   }, [checked]);
@@ -79,7 +74,8 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: ['DGN-UI-Radio', className].join(' ').trim().replace(/\s+/g, ' '),
       ref: ref,
       ...props
-    }, jsx("input", { ...inputProps,
+    }, jsx("input", {
+      ...inputProps,
       disabled: disabled,
       ref: inputRef,
       name: name,
@@ -95,12 +91,12 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       htmlFor: id || unique,
       onClick: handleChange
     }, jsx(Typography, {
-      color: disabled ? clDisabled : '',
+      color: disabled ? systemDisabled : '',
       type: 'p1',
       ...labelProps
     }, jsx(Fragment, null, label !== null && label !== void 0 ? label : value, required && jsx("span", {
       style: {
-        color: disabled ? clDisabled : clDanger
+        color: disabled ? systemDisabled : clDanger
       }
     }, "*")))));
   }, [disabled, onChange, readOnly, checkedState]);
@@ -109,7 +105,6 @@ const formCheckCSS = css`
     ${displayBlock};
     padding: ${spacing(0.5)}px;
 `;
-
 const formCheckInputCSS = width => css`
     ${positionAbsolute};
     ${boxBorder};
@@ -131,7 +126,6 @@ const formCheckInputCSS = width => css`
         border-color: ${clSystemActive};
     }
 `;
-
 const formCheckLabelCSS = width => css`
     ${displayBlock};
     ${positionRelative};
@@ -148,12 +142,12 @@ const formCheckLabelCSS = width => css`
         ${cursorNoDrop};
     }
     &.disabled {
-        color: ${clDisabled};
+        color: ${systemDisabled};
         &:after {
-            background: ${clDisabled} !important;
+            background: ${systemDisabled} !important;
         }
         &:before {
-            border-color: ${clDisabled} !important;
+            border-color: ${systemDisabled} !important;
         }
     }
     &:before {
@@ -170,7 +164,6 @@ const formCheckLabelCSS = width => css`
         transition: 0.28s ease;
     }
 `;
-
 Radio.defaultProps = {
   disabled: false,
   readOnly: false,
@@ -182,45 +175,33 @@ Radio.defaultProps = {
 Radio.propTypes = {
   /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-
   /** If `true`, the component is checked. */
   checked: PropTypes.bool,
-
   /** If `true`, the component is defaultChecked. */
   defaultChecked: PropTypes.bool,
-
   /** Id is randomized randomly to avoid duplication. */
   id: PropTypes.string,
-
   /** The id of the `input` element. */
   name: PropTypes.string,
-
   /** The value of the component. The DOM API casts this to a string. */
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** The name of the Radio is displayed on the interface */
   label: PropTypes.string,
-
   /** The class for Radio component */
   className: PropTypes.string,
-
   /** Props for input. */
   inputProps: PropTypes.object,
-
-  /** Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    *  */
   onChange: PropTypes.func,
-
   /** Prevent all event if true. */
   readOnly: PropTypes.bool,
-
   /** Props for Typography of label. */
   labelProps: PropTypes.object,
-
   /** If `true`, the label will indicate that the Radio is required. */
   required: PropTypes.bool
 };

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { HelperText, InputBase, Label } from "../..";
@@ -54,11 +53,9 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   const ref = useRef(null);
-
   if (!inputRef) {
     inputRef = useRef(null);
   }
-
   const [value, setValue] = useState(valueProp || defaultValue);
   const isError = !!error;
   useEffect(() => {
@@ -67,11 +64,10 @@ const TextInput = /*#__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;
   });
@@ -117,10 +113,12 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     value: valueProp,
     hoverTooltip: hoverTooltip,
     nonStyle: nonStyle
-  }), isError && jsx(HelperText, { ...helperTextProps,
+  }), isError && jsx(HelperText, {
+    ...helperTextProps,
     disabled: disabled,
     status: status
-  }, error), !isError && validateResult && jsx(HelperText, { ...helperTextProps,
+  }, error), !isError && validateResult && jsx(HelperText, {
+    ...helperTextProps,
     disabled: disabled
   }, validateResult));
 }));
@@ -152,110 +150,76 @@ TextInput.defaultProps = {
 TextInput.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]),
-
   /** 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.any,
-
   /** Props of end icon in InputBase component. */
   endIconProps: PropTypes.object,
-
   /** Error displayed below input. */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
   helperTextProps: 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,
-
   /** The label of the component. */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
   labelProps: 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,
-
   /** 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 in InputBase component. */
   startIconProps: PropTypes.object,
-
   /** Status type to display color for input. */
   status: PropTypes.oneOf(['default', 'warning', 'success', 'danger']),
-
   /** Style inline of component. */
   style: PropTypes.object,
-
   /** Type of the input element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). */
   type: PropTypes.oneOf(['inform', 'edit', 'text', 'number', 'password']),
-
-  /** 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]),
-
   /** 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'])
 };