diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,242 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon, HelperText, InputBase, Label } from "../..";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { cursorNotAllowed, displayBlock, positionRelative } from "../../../styles/general";
-import { useTheme } from "../../../theme";
-import useThemeProps from "../../../theme/utils/useThemeProps";
-import { classNames, onValidate, refType as ref } from "../../../utils";
-const PasswordInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'PasswordInput'
-  });
-  const {
-    action = {},
-    autoComplete,
-    autoFocus,
-    autoWidth,
-    className,
-    defaultValue,
-    delayOnChange,
-    disabled,
-    error,
-    helperTextProps,
-    inputProps,
-    inputRef = useRef(null),
-    inputStyle,
-    label,
-    labelProps,
-    name,
-    nonStyle,
-    onBlur,
-    onChange,
-    onFocus,
-    onInput,
-    onKeyDown,
-    onKeyUp,
-    onPaste,
-    placeholder,
-    readOnly,
-    required,
-    secureText,
-    startIcon,
-    startIconProps,
-    status,
-    style,
-    validates,
-    value: valueProp,
-    viewType,
-    visibilityToggle,
-    ...other
-  } = props;
-  const ref = useRef(null);
-  const [value, setValue] = useState(valueProp || defaultValue);
-  const [showPassword, setShowPassword] = useState(false);
-  const _PasswordInputRoot = PasswordInputRoot(theme);
-  const isError = !!error;
-  useEffect(() => {
-    setValue(valueProp);
-  }, [valueProp]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const validateResult = validates && onValidate(value, validates, true);
-  const setShowHide = () => {
-    setShowPassword(prevState => !prevState);
-  };
-  const VisibilityIcon = visibilityToggle ? jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: showPassword ? 'View' : 'UnView',
-    onClick: setShowHide
-  }) : null;
-  return jsx("div", {
-    ref: ref,
-    css: _PasswordInputRoot,
-    className: classNames('DGN-UI-PasswordInput', className, disabled && 'disabled'),
-    style: style,
-    ...other
-  }, !!label && jsx(Label, {
-    required: required,
-    disabled: disabled,
-    ...labelProps
-  }, label), jsx(InputBase, {
-    autoComplete: autoComplete,
-    autoFocus: autoFocus,
-    autoWidth: autoWidth,
-    className: classNames(secureText && !showPassword && 'DGN-UI-PasswordInput-SecureText'),
-    defaultValue: defaultValue,
-    delayOnChange: delayOnChange,
-    disabled: disabled,
-    endIcon: VisibilityIcon,
-    inputProps: inputProps,
-    inputRef: inputRef,
-    inputStyle: inputStyle,
-    nonStyle: nonStyle,
-    onBlur: onBlur,
-    onChange: onChange,
-    onFocus: onFocus,
-    onInput: onInput,
-    onKeyDown: onKeyDown,
-    onKeyUp: onKeyUp,
-    onPaste: onPaste,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    name: name,
-    startIcon: startIcon,
-    startIconProps: startIconProps,
-    status: isError || validateResult ? 'danger' : status,
-    type: secureText || showPassword ? 'text' : 'password',
-    value: valueProp,
-    viewType: viewType
-  }), isError && jsx(HelperText, {
-    ...helperTextProps,
-    disabled: disabled,
-    status: status
-  }, error), !isError && validateResult && jsx(HelperText, {
-    ...helperTextProps,
-    disabled: disabled
-  }, validateResult));
-}));
-const PasswordInputRoot = ({
-  typography
-}) => css`
-    ${displayBlock};
-    ${positionRelative};
-    &.disabled {
-        ${cursorNotAllowed};
-    }
-    .DGN-UI-PasswordInput-SecureText {
-        input::placeholder {
-            -webkit-text-security: initial;
-            ${typography.fontFamily};
-        }
-        input {
-            -webkit-text-security: disc;
-            ${typography.fontFamilySecurity};
-        }
-    }
-    input::-ms-reveal,
-    input::-ms-clear {
-        display: none;
-    }
-`;
-
-// PasswordInput.defaultProps = {
-//     autoComplete: 'new-password',
-//     autoFocus: false,
-//     autoWidth: false,
-//     className: '',
-//     defaultValue: '',
-//     disabled: false,
-//     error: '',
-//     label: '',
-//     readOnly: false,
-//     required: false,
-//     status: 'default',
-//     viewType: 'underlined',
-//     visibilityToggle: true,
-// };
-
-PasswordInput.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,
-  /** 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,
-  /** 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,
-  /** If `true`, the input type attribute is `text` and use css to secure the content. Use to prevent browser from suggesting password. */
-  secureText: PropTypes.bool,
-  /** [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,
-  /** 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']),
-  /** If `true`, will show an icon to display the password as plain text. */
-  visibilityToggle: PropTypes.bool
-};
-export default PasswordInput;

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

@@ -1,364 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { memo, 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,
-  autoFocus,
-  disabled,
-  readOnly,
-  multiline,
-  refs,
-  inputRef,
-  inputProps,
-  inputStyle,
-  error,
-  onChange,
-  onBlur,
-  onFocus,
-  onInput,
-  onKeyDown,
-  onKeyUp,
-  labelProps,
-  helperTextProps,
-  ...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", {
-    ref: ref,
-    css: PhoneInputRoot,
-    style: {
-      marginBottom: '20px'
-    },
-    ...props
-  }, jsx(Label, {
-    ...labelProps,
-    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, {
-    ...helperTextProps,
-    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]),
-  /** 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/>
-   * }
-   */
-  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
-};
-export default PhoneInput;