diginet-core-ui 1.3.78 → 1.3.79

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,58 +307,40 @@ 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/>
@@ -407,19 +350,14 @@ PhoneInput.propTypes = {
    * }
    */
   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';
@@ -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,
@@ -109,7 +105,6 @@ const formCheckCSS = css`
     ${displayBlock};
     padding: ${spacing(0.5)}px;
 `;
-
 const formCheckInputCSS = width => css`
     ${positionAbsolute};
     ${borderBox};
@@ -131,7 +126,6 @@ const formCheckInputCSS = width => css`
         border-color: ${clSystemActive};
     }
 `;
-
 const formCheckLabelCSS = width => css`
     ${displayBlock};
     ${positionRelative};
@@ -170,7 +164,6 @@ const formCheckLabelCSS = width => css`
         transition: 0.28s ease;
     }
 `;
-
 Radio.defaultProps = {
   disabled: false,
   readOnly: false,
@@ -182,31 +175,22 @@ 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.
@@ -214,13 +198,10 @@ Radio.propTypes = {
    * 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
 };