diginet-core-ui 1.3.24

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

@@ -0,0 +1,433 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { InputBase, Label, HelperText, Typography } from '../../';
+import { Vietnam, England } from '../../../icons';
+const ensigns = {
+  Vietnam: {
+    icon: jsx(Vietnam, null),
+    countryCode: 84,
+    mark: '___ ___ ___'
+  },
+  England: {
+    icon: jsx(England, null),
+    countryCode: 44,
+    mark: '____ _______'
+  }
+};
+const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  viewType,
+  ensign,
+  required,
+  hiddenEnsign,
+  label,
+  defaultValue,
+  value,
+  placeholder,
+  autoComplete,
+  autoFocus,
+  disabled,
+  readOnly,
+  multiline,
+  onConfirm,
+  refs,
+  inputRef,
+  inputProps,
+  iconStyle,
+  inputStyle,
+  labelProps,
+  errorProps,
+  error,
+  onChange,
+  onBlur,
+  onFocus,
+  onInput,
+  onKeyDown,
+  onKeyUp,
+  ...props
+}, reference) => {
+  const ref = useRef(null);
+
+  if (!inputRef) {
+    inputRef = useRef(null);
+  }
+  /* Start styled */
+
+
+  const PhoneInputRoot = css`
+        display: block;
+        position: relative;
+    `;
+  const PhoneInputEnsign = css`
+        display: inline-flex;
+        position: relative;
+        max-height: 24px;
+        align-items: center;
+        svg {
+            margin-right: 4px;
+        }
+    `;
+  /* End styled */
+
+  let currentKey,
+      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
+
+    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++;
+      }
+    } else if (['Backspace', 'Delete'].includes(currentKey)) {
+      if (currentKey === 'Backspace' && value[cursor - 1] && !value[cursor - 1].trim()) {
+        cursor--;
+      }
+    }
+
+    e.target.value = result;
+    e.target.setSelectionRange(cursor, cursor);
+
+    if (onChange) {
+      const el = { ...e
+      };
+      el.target = { ...e.targe
+      };
+      el.target.value = '(+' + ensigns[ensign].countryCode + ') ' + result.replaceAll('_', '');
+      el.value = '0' + result.replace(/\s|_/g, '');
+      el.countryCode = ensigns[ensign].countryCode;
+      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;
+      let markIndex = value.indexOf('_');
+      markIndex = markIndex !== -1 ? markIndex : ensigns[ensign].mark.length;
+      inputRef.current.setSelectionRange(markIndex, markIndex);
+    }
+
+    return () => {
+      document.removeEventListener('mouseup', onMouseUpHandler);
+    };
+  }, []);
+  useEffect(() => {
+    if (placeholder !== undefined) {
+      inputRef.current.placeholder = placeholder;
+    }
+  }, [placeholder]);
+  useEffect(() => {
+    if (value !== undefined) {
+      inputRef.current.value = replaceMark(value.replace(/^0/, ''));
+    }
+  }, [value]);
+  /* End handler */
+
+  useImperativeHandle(reference, () => ({
+    get: () => ref.current
+  }));
+  return jsx("div", _extends({
+    ref: ref,
+    css: PhoneInputRoot,
+    style: {
+      marginBottom: '20px'
+    }
+  }, props), jsx(Label, {
+    required: required,
+    disabled: disabled
+  }, label), jsx(InputBase, {
+    inputRef: inputRef,
+    viewType: viewType,
+    defaultValue: ensigns[ensign].mark,
+    value: value,
+    placeholder: placeholder,
+    disabled: disabled,
+    readOnly: readOnly,
+    multiline: multiline,
+    status: error ? 'danger' : 'default',
+    inputProps: inputProps,
+    inputStyle: inputStyle,
+    onChange: onChangeHandler,
+    onBlur: onBlurHandler,
+    onFocus: onFocusHandler,
+    onInput: onInput,
+    onKeyDown: onKeyDownHandler,
+    onKeyUp: onKeyUp,
+    onPaste: onPasteHandler,
+    startIcon: jsx("span", {
+      css: PhoneInputEnsign
+    }, !hiddenEnsign && ensigns[ensign].icon, " ", jsx(Typography, null, "(+", ensigns[ensign].countryCode, ")")),
+    startIconProps: {
+      className: 'non-effect'
+    }
+  }), !!error && jsx(HelperText, {
+    disabled: disabled
+  }, error));
+}));
+PhoneInput.defaultProps = {
+  viewType: 'underlined',
+  ensign: 'Vietnam',
+  label: '',
+  placeholder: '',
+  error: '',
+  autoFocus: true,
+  disabled: false,
+  hiddenEnsign: false,
+  multiline: false,
+  readOnly: false,
+  required: false,
+  inputProps: {}
+};
+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]),
+
+  /** type auto complete of input (like new-password) */
+  autoComplete: 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,
+
+  /** any props of label in PhoneInput component */
+  labelProps: PropTypes.object,
+
+  /** any props of error in PhoneInput component */
+  errorProps: 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/>
+   * }
+   */
+  onChange: PropTypes.func,
+
+  /** on blur function */
+  onBlur: PropTypes.func,
+
+  /** on focus function */
+  onFocus: PropTypes.func,
+
+  /** inputRef of PhoneInput component */
+  inputRef: PropTypes.any
+};
+export default PhoneInput;

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

@@ -0,0 +1,263 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useState, useEffect, useRef } from 'react';
+import theme from '../../../theme/settings';
+import { randomString } from '../../../utils';
+const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
+  disabled,
+  name,
+  defaultChecked,
+  checked,
+  value,
+  label,
+  className,
+  onChange,
+  inputRef,
+  inputProps,
+  ...props
+}, ref) => {
+  if (!inputRef) {
+    inputRef = useRef(null);
+  }
+
+  const [unique] = useState(randomString(10, {
+    allowNumber: false,
+    allowSymbol: false
+  }));
+  const formCheck = css`
+        display: block;
+        position: relative;
+        cursor: pointer;
+        user-select: none;
+        &.disabled {
+            pointer-events: none;
+        }
+        width: max-content;
+    `;
+  const formCheckInput = css`
+        display: none;
+        position: absolute;
+        box-sizing: border-box;
+        padding-left: 2.19rem;
+        height: 1.57rem;
+        line-height: 1.57rem;
+        font-size: 16px;
+        &:disabled + label {
+            pointer-events: none;
+        }
+        &:checked + label::after {
+            background-color: ${theme.colors.primary};
+            border: 1px solid ${theme.colors.primary};
+            transform: scale(.5);
+            z-index: 0;
+            -webkit-transform: scale(.6);
+            -ms-transform: scale(.6);
+        }
+        &:checked + label::before {
+            border: 1px solid ${theme.colors.primary};
+        }
+        &:not(:checked) + label:hover::after,
+        &:not(:checked) + label:hover::before {
+            background: ${theme.colors.hover};
+            border: 1px solid ${theme.colors.primary};
+        }
+        &:not(:checked) + label::after,
+        &:not(:checked) + label::before {
+            background-color: white;
+            border: 1px solid ${theme.colors.border};
+        }
+        &:checked:disabled + label::after{
+            pointer-events: none;
+            cursor: not-allowed;
+            background: ${theme.colors.disabled};
+            border: 1px solid ${theme.colors.disabled};
+        }
+        &:checked:disabled + label::before{
+            pointer-events: none;
+            cursor: not-allowed;
+            background: ${theme.colors.bgDisabled};
+            border: 1px solid ${theme.colors.disabled};
+        }
+        &:not(:checked):disabled + label::after{
+            pointer-events: none;
+            cursor: not-allowed;
+            background:${theme.colors.bgDisabled};
+            border: 1px solid ${theme.colors.disabled};
+        }
+        &:not(:checked):disabled + label::before{
+            pointer-events: none;
+            cursor: not-allowed;
+            background: ${theme.colors.bgDisabled};
+            border: 1px solid ${theme.colors.disabled};
+        }
+        
+    `;
+  const formCheckLabel = css`
+        display: block;
+        cursor: pointer;
+        position: relative;
+        padding-left: 2.19rem;
+        line-height: 1.57rem;
+        font-size: 1rem;
+        font-size: 16px;
+        font-weight: 500;
+        font-family: ${theme.typography.fontFamily};
+        margin-bottom: 0;
+        transition: .28s ease;
+        -o-transition: .28s ease;
+        -webkit-transition: .28s ease;
+        &::after {
+            box-sizing: border-box;
+            content: "";
+            position: absolute;
+            height: 18px;
+            left: 0;
+            margin: 2px;
+            transition: .28s ease;
+            top: 0;
+            width: 18px;
+            z-index: 0;
+            border-radius: 50%;
+            -webkit-transition: .28s ease;
+        }
+        &::before {
+            box-sizing: border-box;
+            content: "";
+            position: absolute;
+            height: 18px;
+            left: 0;
+            margin: 2px;
+            transition: .28s ease;
+            top: 0;
+            width: 18px;
+            z-index: 0;
+            border-radius: 50%;
+            -webkit-transition: .28s ease;
+        }
+        &:hover::after{
+            background: ${theme.colors.hover};
+            border: 1px solid ${theme.colors.primary};
+        }
+        &:hover::before{
+            background: ${theme.colors.hover};
+            border: 1px solid ${theme.colors.primary};
+        }
+        &:hover::after {
+			box-shadow:
+                0 0 2px 2px ${theme.colors.focus};
+			background-color:${theme.colors.focus};
+		}
+        &:hover::before {
+			box-shadow:
+                0 0 2px 2px ${theme.colors.focus};
+			background-color:${theme.colors.focus};
+		}
+    `;
+
+  const handleChange = e => {
+    const el = { ...e
+    };
+    el.value = value || label;
+    onChange(el);
+  };
+
+  useEffect(() => {
+    if (disabled) {
+      inputRef.current.disabled = disabled;
+      inputRef.current.parentNode.classList.add('disabled');
+    }
+
+    return () => {
+      if (disabled) {
+        inputRef.current.disabled = false;
+        inputRef.current.parentNode.classList.remove('disabled');
+      }
+    };
+  }, [disabled, onChange]);
+  useEffect(() => {
+    if (typeof checked === 'boolean') {
+      inputRef.current.checked = checked;
+    }
+
+    return () => {
+      if (typeof checked === 'boolean' && inputRef.current) {
+        inputRef.current.checked = null;
+      }
+    };
+  }, [checked]);
+  return jsx("div", _extends({
+    id: 'DGN-Core-Radio-' + (id || unique),
+    css: formCheck,
+    className: ['DGN-UI-Radio', disabled ? 'disabled' : '', className].join(' ').trim(),
+    ref: ref
+  }, props), jsx("input", _extends({}, inputProps, {
+    disabled: disabled,
+    ref: inputRef,
+    name: name,
+    hidden: true,
+    type: "radio",
+    defaultChecked: defaultChecked,
+    css: formCheckInput,
+    id: id || unique,
+    onChange: !!onChange ? handleChange : null
+  })), jsx("label", {
+    css: formCheckLabel,
+    htmlFor: id || unique
+  }, " ", label || value));
+}));
+Radio.defaultProps = {
+  disabled: false,
+  defaultChecked: false,
+  label: '',
+  value: '',
+  className: ''
+};
+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.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).
+   *  */
+  onChange: PropTypes.func
+};
+export default Radio;