diginet-core-ui 1.3.24

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

@@ -0,0 +1,523 @@
+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, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { CircularProgress as Circular, HelperText, InputBase, Label } from '../../';
+import Icon from '../../../icons';
+import { renderIcon, onValidate } from '../../../utils';
+const icons = {
+  default: `<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M15.5616 19.0007C15.4036 19.0007 15.2446 18.9637 15.0986 18.8877L9.99962 16.2237L4.90162 18.8877C4.56362 19.0627 4.15562 19.0327 3.84962 18.8087C3.54162 18.5847 3.38862 18.2057 3.45362 17.8307L4.42462 12.2027L0.304623 8.21765C0.030623 7.95265 -0.068377 7.55465 0.048623 7.19065C0.165623 6.82865 0.478623 6.56365 0.856623 6.50965L6.55662 5.68165L9.10462 0.555654C9.44262 -0.124346 10.5576 -0.124346 10.8956 0.555654L13.4436 5.68165L19.1436 6.50965C19.5216 6.56365 19.8346 6.82865 19.9516 7.19065C20.0686 7.55465 19.9696 7.95265 19.6956 8.21765L15.5756 12.2027L16.5466 17.8307C16.6116 18.2057 16.4576 18.5847 16.1506 18.8087C15.9766 18.9367 15.7696 19.0007 15.5616 19.0007Z" fill="#7F828E"/>
+    </svg>`,
+  success: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M18.997 8.974H19C19.551 8.974 19.999 9.42 20 9.971C20.008 12.642 18.975 15.157 17.091 17.051C15.208 18.945 12.7 19.992 10.029 20H10C7.33905 20 4.83605 18.968 2.94905 17.091C1.05505 15.208 0.00804612 12.7 4.61203e-05 10.029C-0.00795388 7.357 1.02505 4.843 2.90905 2.949C4.79205 1.055 7.30005 0.008 9.97105 0C10.766 0.012 11.576 0.092 12.352 0.278C12.888 0.408 13.219 0.948 13.089 1.485C12.96 2.021 12.417 2.351 11.883 2.223C11.262 2.073 10.603 2.01 9.97705 2C7.84005 2.006 5.83305 2.844 4.32705 4.359C2.82005 5.874 1.99405 7.886 2.00005 10.023C2.00605 12.16 2.84405 14.166 4.35905 15.673C5.86905 17.174 7.87105 18 10 18H10.023C12.16 17.994 14.167 17.156 15.673 15.641C17.18 14.125 18.006 12.114 18 9.977C17.999 9.425 18.445 8.975 18.997 8.974ZM6.29305 9.2929C6.68405 8.9019 7.31605 8.9019 7.70705 9.2929L9.95105 11.5369L16.248 4.3409C16.612 3.9279 17.243 3.8839 17.659 4.2479C18.074 4.6109 18.116 5.2429 17.752 5.6589L10.752 13.6589C10.57 13.8669 10.31 13.9899 10.033 13.9999H10C9.73505 13.9999 9.48105 13.8949 9.29305 13.7069L6.29305 10.7069C5.90205 10.3159 5.90205 9.6839 6.29305 9.2929Z" fill="#00C875"/>
+    </svg>`,
+  warning: `<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M14.7736 2.56003C14.4236 3.00003 14.5036 3.63003 14.9336 3.97003C16.6136 5.29003 17.6836 7.18003 17.9336 9.31003C18.1936 11.43 17.6036 13.53 16.2836 15.21L16.2736 15.23C14.9536 16.9 13.0636 17.96 10.9536 18.21C8.83361 18.46 6.73361 17.88 5.05361 16.56C3.37361 15.24 2.30361 13.34 2.05361 11.22C1.79361 9.09003 2.38361 7.00003 3.70361 5.32003C4.10361 4.84003 4.55361 4.36003 5.06361 3.96003C5.49361 3.62003 5.57361 2.99003 5.23361 2.56003C4.89361 2.13003 4.26361 2.05003 3.83361 2.39003C3.19361 2.88003 2.63361 3.47003 2.13361 4.08003C0.48361 6.18003 -0.246391 8.80003 0.0736095 11.45C0.393609 14.1 1.72361 16.47 3.82361 18.12C5.92361 19.77 8.54361 20.5 11.1936 20.18C13.8336 19.86 16.1936 18.54 17.8436 16.45L17.8636 16.43C19.5136 14.33 20.2436 11.71 19.9236 9.06003C19.6036 6.41003 18.2736 4.04003 16.1736 2.39003C15.7436 2.05003 15.1136 2.13003 14.7736 2.56003Z" fill="#FFAA00"/>
+        <path d="M12.0835 15.01C12.0535 16.17 11.0935 17.08 9.9335 17.05C8.8235 17.02 7.9235 16.13 7.8935 15.01V14.96C7.9235 13.8 8.8835 12.89 10.0435 12.92C11.1535 12.95 12.0535 13.84 12.0835 14.96V15.01ZM12.1335 1.23L11.0935 10.27C11.0935 10.88 10.6035 11.37 9.9935 11.37C9.3835 11.37 8.8935 10.88 8.8935 10.27L7.8535 1.23C7.7235 0.69 8.0535 0.16 8.5935 0.03C8.6735 0.01 8.7435 0 8.8135 0H11.1635C11.7235 0.01 12.1635 0.47 12.1535 1.02C12.1635 1.09 12.1535 1.16 12.1335 1.23Z" fill="#FFAA00"/>
+    </svg>`,
+  none: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M2 10C2 8.154 2.635 6.458 3.688 5.103L14.897 16.312C13.542 17.366 11.846 18 10 18C5.589 18 2 14.411 2 10ZM18 10C18 11.846 17.365 13.542 16.312 14.897L5.103 3.688C6.458 2.634 8.154 2 10 2C14.411 2 18 5.589 18 10ZM10 0C4.486 0 0 4.486 0 10C0 15.514 4.486 20 10 20C15.514 20 20 15.514 20 10C20 4.486 15.514 0 10 0Z" fill="#FF3D71"/>
+    </svg>`,
+  danger: `<svg width="16" height="22" style="max-height:20px" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M7.11087 22.0002C6.99687 22.0002 6.88187 21.9802 6.76887 21.9392C6.33687 21.7822 6.06687 21.3502 6.11687 20.8932L6.88487 13.8002H0.999871C0.630871 13.8002 0.291871 13.5972 0.117871 13.2712C-0.056129 12.9452 -0.036129 12.5512 0.168871 12.2442L8.05687 0.444182C8.31287 0.0611818 8.79687 -0.0978183 9.22987 0.0611817C9.66287 0.218182 9.93187 0.650182 9.88187 1.10718L9.11387 8.20018H14.9999C15.3689 8.20018 15.7079 8.40318 15.8819 8.72918C16.0549 9.05518 16.0359 9.44918 15.8309 9.75618L7.94187 21.5562C7.75287 21.8402 7.43687 22.0002 7.11087 22.0002Z" fill="#FF3D71"/>
+    </svg>`
+};
+const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  type,
+  viewType,
+  required,
+  loading,
+  autoIncreaseBot,
+  className,
+  label,
+  defaultValue,
+  value,
+  placeholder,
+  resize,
+  startIcon,
+  endIcon,
+  startIconProps,
+  endIconProps,
+  status,
+  icon,
+  autoComplete,
+  autoFocus,
+  disabled,
+  readOnly,
+  multiline,
+  onConfirm,
+  refs,
+  rows,
+  maxRows,
+  style,
+  iconStyle,
+  inputRef,
+  inputProps,
+  inputStyle,
+  labelProps,
+  errorProps,
+  error,
+  onChange,
+  onBlur,
+  onFocus,
+  onInput,
+  onKeyDown,
+  onKeyUp,
+  onPaste,
+  validates,
+  ...props
+}, reference) => {
+  const ref = useRef(null);
+
+  if (!inputRef) {
+    inputRef = useRef(null);
+  }
+
+  const iconRef = useRef(null);
+  let currentValue = '';
+  const isError = !!error && !value && value !== 0;
+  /* Start styled */
+
+  const TextInputRoot = css`
+        display: block;
+        position: relative;
+        margin-bottom: 20px;
+    `;
+  const TextInputIcon = css`
+        display: flex;
+        color: inherit;
+        .edit-icon-pen {
+            display: flex;
+        }
+        .edit-icon-confirm {
+            display: none;
+        }
+        .edit-icon-clear {
+            display: none;
+            margin-left: 12px;
+        }
+        .circular {
+            display: none;
+        }
+    `;
+  /* End styled */
+
+  /* Start handler */
+
+  const onMouseDownHandler = () => {
+    ref.current.querySelector(`.css-${TextInputBox.name}`).style.backgroundColor = 'transparent';
+    inputRef.current.style.backgroundColor = 'transparent';
+  };
+
+  const onPressTab = e => {
+    if (e.key === 'Tab') {
+      onClickOutsideOfInput({
+        target: null
+      });
+    }
+
+    ;
+  };
+
+  const onFocusInput = () => {
+    if (!inputRef.current.readOnly) {
+      iconRef.current.querySelector('.edit-icon-pen').style.display = 'none';
+      iconRef.current.querySelector('.edit-icon-confirm').style.display = 'flex';
+      iconRef.current.querySelector('.edit-icon-clear').style.display = 'flex';
+      document.addEventListener('click', onClickOutsideOfInput);
+    }
+  };
+
+  const onClickOutsideOfInput = event => {
+    if (!inputRef.current || !iconRef.current) {
+      document.removeEventListener('click', onClickOutsideOfInput);
+      return;
+    }
+
+    if (!inputRef.current.contains(event.target) && !iconRef.current.contains(event.target)) {
+      if (!inputRef.current.readOnly) {
+        onConfirmEdit();
+      }
+
+      document.removeEventListener('click', onClickOutsideOfInput);
+    }
+  };
+
+  const onClickQuickEdit = () => {
+    inputRef.current.focus();
+  };
+
+  const onConfirmEdit = () => {
+    const value = inputRef.current.value;
+
+    if (!value || value === currentValue) {
+      inputRef.current.value = currentValue;
+      goToStart();
+      return;
+    }
+
+    ;
+    currentValue = value;
+    if (onConfirm) onConfirm({
+      value
+    });
+  };
+
+  const onClear = () => {
+    inputRef.current.value = '';
+    inputRef.current.focus();
+  };
+
+  const goToStart = () => {
+    iconRef.current.querySelector('.circular').style.display = null;
+    iconRef.current.querySelector('.edit-icon-pen').style.display = null;
+    iconRef.current.querySelector('.edit-icon-confirm').style.display = null;
+    iconRef.current.querySelector('.edit-icon-confirm').style.opacity = null;
+    iconRef.current.querySelector('.edit-icon-clear').style = null;
+    inputRef.current.disabled = false;
+  };
+
+  useEffect(() => {
+    !!refs && refs(ref);
+
+    if (defaultValue !== undefined && defaultValue !== '') {
+      currentValue = defaultValue;
+    }
+  }, []);
+  useEffect(() => {
+    if (/^(quick)?Edit/i.test(type) && !multiline) {
+      inputRef.current.addEventListener('focus', onFocusInput);
+      inputRef.current.addEventListener('keydown', onPressTab);
+    }
+
+    if (autoFocus) {
+      inputRef.current.focus();
+    }
+
+    return () => {
+      if (/^(quick)?Edit/i.test(type) && !multiline) {
+        if (inputRef.current) {
+          inputRef.current.removeEventListener('focus', onFocusInput);
+          inputRef.current.removeEventListener('keydown', onPressTab);
+        }
+      }
+    };
+  }, [type, multiline]);
+  useEffect(() => {
+    if (/inform/i.test(type) && !multiline) {
+      const regexp = /(success)|(warning)|(danger)/ig;
+      const existedClass = ref.current.classList.value.match(regexp);
+
+      if (existedClass) {
+        ref.current.classList.remove(existedClass[0]);
+      }
+
+      ref.current.classList.add(status);
+
+      if (!icon) {
+        iconRef.current.innerHTML = icons[status];
+      }
+    }
+  }, [status]);
+  useEffect(() => {
+    if (error && !value && value !== 0) {
+      ref.current.classList.add('danger');
+
+      if (autoIncreaseBot) {
+        const helperTextNode = ref.current.querySelector('.DGN-UI-HelperText');
+
+        if (helperTextNode) {
+          if (helperTextNode.offsetHeight > 20) {
+            ref.current.style.marginBottom = helperTextNode.offsetHeight + 4 + 'px';
+          }
+        }
+      }
+
+      return () => {
+        if (ref.current) {
+          ref.current.classList.remove('danger');
+          ref.current.style.marginBottom = null;
+        }
+      };
+    }
+  }, [error, value]);
+  useEffect(() => {
+    if (placeholder !== undefined) {
+      inputRef.current.placeholder = placeholder;
+    }
+  }, [placeholder]);
+  useEffect(() => {
+    inputRef.current.readOnly = !!readOnly;
+
+    if (/^(quick)?Edit/i.test(type) && !multiline && readOnly) {
+      inputRef.current.parentNode.parentNode.classList.add('readOnly');
+      iconRef.current.querySelector('.edit-icon-pen').style.pointerEvents = 'none';
+    }
+
+    if (disabled) {
+      ref.current.classList.add('disabled');
+    }
+
+    return () => {
+      if (/^(quick)?Edit/i.test(type) && !multiline && readOnly) {
+        inputRef.current.parentNode.parentNode.classList.remove('readOnly');
+        iconRef.current.querySelector('.edit-icon-pen').style.pointerEvents = null;
+      }
+
+      ref.current && ref.current.classList.remove('disabled');
+    };
+  }, [disabled, readOnly]);
+  useEffect(() => {
+    if (/^(quick)?Edit/i.test(type) && iconRef.current) {
+      if (loading) {
+        iconRef.current.querySelector('.circular').style.display = 'flex';
+        iconRef.current.querySelector('.edit-icon-confirm').style.opacity = 0;
+        iconRef.current.querySelector('.edit-icon-clear').style.pointerEvents = 'none';
+        inputRef.current.disabled = true;
+      }
+
+      return () => {
+        if (loading) {
+          goToStart();
+        }
+      };
+    }
+  }, [loading]);
+  /* End handler */
+
+  useImperativeHandle(reference, () => ref.current);
+  const validateResult = validates && onValidate(value, validates, true);
+  const startIconCustom = icon && type !== 'inform' ? icon : startIcon;
+  const endIconCustom = /^inform$/i.test(type) ? jsx("div", {
+    ref: iconRef,
+    css: TextInputIcon,
+    style: {
+      maxHeight: '20px'
+    }
+  }, renderIcon(icon, null, {
+    style: {
+      maxHeight: '20px',
+      ...iconStyle
+    }
+  })) : /^(quick)?Edit/i.test(type) ? jsx("div", {
+    ref: iconRef,
+    css: TextInputIcon
+  }, jsx(Icon, {
+    name: 'Edit',
+    className: 'edit-icon-pen',
+    width: 20,
+    height: 20,
+    style: {
+      padding: 0
+    },
+    onClick: onClickQuickEdit
+  }), jsx(Icon, {
+    name: 'Approval',
+    className: 'edit-icon-confirm',
+    width: 20,
+    height: 20,
+    style: {
+      padding: 0
+    },
+    onClick: onConfirmEdit
+  }), jsx("span", {
+    className: 'circular'
+  }, jsx(Circular, {
+    width: 24,
+    strokeWidth: 2
+  })), jsx(Icon, {
+    name: 'Close',
+    className: 'edit-icon-clear',
+    width: 16,
+    height: 16,
+    onClick: onClear,
+    onMouseDown: onMouseDownHandler
+  })) : endIcon;
+  return jsx("div", _extends({
+    ref: ref,
+    css: TextInputRoot,
+    className: ['DGN-UI-TextInput', className].join(' ').trim(),
+    style: style
+  }, props), !!label && jsx(Label, _extends({
+    required: required,
+    disabled: disabled
+  }, labelProps), label), jsx(InputBase, {
+    type: /text|number|password/.test(type) ? type : 'text',
+    autoComplete: autoComplete,
+    inputRef: inputRef,
+    viewType: viewType,
+    defaultValue: defaultValue,
+    value: value,
+    placeholder: placeholder,
+    autoFocus: autoFocus,
+    disabled: disabled,
+    readOnly: readOnly,
+    multiline: multiline,
+    rows: rows,
+    maxRows: maxRows,
+    status: isError || validateResult ? 'danger' : 'default',
+    inputProps: inputProps,
+    inputStyle: inputStyle,
+    startIcon: startIconCustom,
+    startIconProps: startIconProps,
+    endIcon: endIconCustom,
+    endIconProps: endIconProps,
+    onChange: onChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onInput: onInput,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onPaste: onPaste
+  }), isError && jsx(HelperText, {
+    disabled: disabled,
+    status: status
+  }, error), !isError && validateResult && jsx(HelperText, {
+    disabled: disabled
+  }, validateResult));
+}));
+TextInput.defaultProps = {
+  type: 'text',
+  viewType: 'underlined',
+  label: '',
+  className: '',
+  defaultValue: '',
+  placeholder: '',
+  status: 'default',
+  error: '',
+  resize: 'none',
+  autoComplete: 'off',
+  required: false,
+  loading: false,
+  autoFocus: false,
+  autoIncreaseBot: false,
+  disabled: false,
+  readOnly: false,
+  multiline: false,
+  iconStyle: {}
+};
+TextInput.propTypes = {
+  /** type of input */
+  type: PropTypes.oneOf(['inform', 'edit', 'quickEdit', 'text', 'number', 'password']),
+
+  /** the type of border you want to display */
+  viewType: PropTypes.oneOf(['underlined', 'outlined']),
+
+  /** label for input */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /** class for input */
+  className: PropTypes.string,
+
+  /** default value is displayed for first render */
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** the displayed value for each change */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** hints for input */
+  placeholder: PropTypes.string,
+
+  /** status type to display color for input (only available for type is inform) */
+  status: PropTypes.oneOf(['default', 'warning', 'success', 'danger']),
+
+  /** error for input */
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
+  /** the number of rows of textarea */
+  rows: PropTypes.number,
+
+  /** the maximum of rows of textarea */
+  maxRows: PropTypes.number,
+
+  /** type auto complete of input (like new-password) */
+  autoComplete: PropTypes.string,
+
+  /** allow resize multiline input (resize css style) */
+  resize: PropTypes.string,
+
+  /** prevent all event if true, hide all icon */
+  disabled: PropTypes.bool,
+
+  /** prevent all event if true */
+  readOnly: PropTypes.bool,
+
+  /** auto focus after first render */
+  autoFocus: PropTypes.bool,
+
+  /** auto increase margin-bottom if error too long */
+  autoIncreaseBot: PropTypes.bool,
+
+  /** At least one character is required */
+  required: PropTypes.bool,
+
+  /** icon element display in the right of input (only use for type is inform, if not, use startIcon instead) */
+  icon: PropTypes.any,
+
+  /** icon element display in the left of input */
+  startIcon: PropTypes.any,
+
+  /** icon element display in the right of input */
+  endIcon: PropTypes.any,
+
+  /** props of start icon in InputBase component */
+  startIconProps: PropTypes.object,
+
+  /** props of end icon in InputBase component */
+  endIconProps: PropTypes.object,
+
+  /** style inline for icon */
+  iconStyle: PropTypes.object,
+
+  /** style inline for dropdown */
+  style: PropTypes.object,
+
+  /** props of input in TextInput component */
+  inputProps: PropTypes.object,
+
+  /** style inline of input in TextInput component */
+  inputStyle: PropTypes.object,
+
+  /** any props of label in TextInput component */
+  labelProps: PropTypes.object,
+
+  /** any props of error in TextInput 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 */
+  onChange: PropTypes.func,
+
+  /** on blur function */
+  onBlur: PropTypes.func,
+
+  /** on focus function */
+  onFocus: PropTypes.func,
+
+  /** 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]),
+
+  /** inputRef of TextInput component */
+  inputRef: PropTypes.any
+};
+export default TextInput;