diginet-core-ui 1.3.78 → 1.3.79

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

@@ -1,13 +1,17 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
-import { memo, useEffect, useRef, forwardRef, useState, useImperativeHandle } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import { ButtonIcon, CircularProgress as Circular, HelperText, InputBase, Label } from '../../';
-import { renderIcon, onValidate, refType as ref } from '../../../utils';
-import { cursorNotAllowed, displayBlock, flexRow, positionRelative } from '../../../styles/general';
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { HelperText, InputBase, Label } from '../../';
+import { cursorNotAllowed, displayBlock, positionRelative } from '../../../styles/general';
+import { useTheme } from '../../../theme';
+import { classNames, onValidate, refType as ref } from '../../../utils';
+const {
+  spacing
+} = useTheme();
 const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   autoComplete,
   autoFocus,
   autoWidth,
@@ -19,19 +23,16 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   error,
   helperTextProps,
   hoverTooltip,
-  icon,
-  iconStyle,
   inputProps,
   inputRef,
   inputStyle,
   label,
   labelProps,
-  loading,
   maxRows,
   multiline,
+  nonStyle,
   onBlur,
   onChange,
-  onConfirm,
   onFocus,
   onInput,
   onKeyDown,
@@ -52,197 +53,29 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   ...props
 }, reference) => {
   const ref = useRef(null);
-
   if (!inputRef) {
     inputRef = useRef(null);
   }
-
-  const iconRef = useRef(null);
-  let currentValue = '';
   const [value, setValue] = useState(valueProp || defaultValue);
   const isError = !!error;
-  /* Start handler */
-
-  const onMouseDownHandler = () => {
-    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(() => {
     setValue(valueProp);
   }, [valueProp]);
-  useEffect(() => {
-    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 (!inputRef.current) return;
-    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, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  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 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(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'Edit',
-    className: 'edit-icon-pen',
-    onClick: onClickQuickEdit
-  }), jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'Approval',
-    className: 'edit-icon-confirm',
-    onClick: onConfirmEdit
-  }), jsx("span", {
-    className: 'circular'
-  }, jsx(Circular, {
-    width: 24,
-    strokeWidth: 2
-  })), jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: 'Close',
-    className: 'edit-icon-clear',
-    onClick: onClear,
-    onMouseDown: onMouseDownHandler
-  })) : endIcon;
   return jsx("div", {
     ref: ref,
     css: TextInputRoot,
-    className: ['DGN-UI-TextInput', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: classNames('DGN-UI-TextInput', className, disabled && 'disabled'),
     style: style,
     ...props
   }, !!label && jsx(Label, {
@@ -266,9 +99,9 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     status: isError || validateResult ? 'danger' : status,
     inputProps: inputProps,
     inputStyle: inputStyle,
-    startIcon: startIconCustom,
+    startIcon: startIcon,
     startIconProps: startIconProps,
-    endIcon: endIconCustom,
+    endIcon: endIcon,
     endIconProps: endIconProps,
     onChange: onChange,
     onBlur: onBlur,
@@ -278,39 +111,25 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyUp: onKeyUp,
     onPaste: onPaste,
     value: valueProp,
-    hoverTooltip: hoverTooltip
-  }), isError && jsx(HelperText, { ...helperTextProps,
+    hoverTooltip: hoverTooltip,
+    nonStyle: nonStyle
+  }), isError && jsx(HelperText, {
+    ...helperTextProps,
     disabled: disabled,
     status: status
-  }, error), !isError && validateResult && jsx(HelperText, { ...helperTextProps,
+  }, error), !isError && validateResult && jsx(HelperText, {
+    ...helperTextProps,
     disabled: disabled
   }, validateResult));
 }));
 const TextInputRoot = css`
     ${displayBlock};
     ${positionRelative};
-    margin-bottom: 20px;
+    margin-bottom: ${spacing([5])};
     &.disabled {
         ${cursorNotAllowed};
     }
 `;
-const TextInputIcon = css`
-    ${flexRow};
-    color: inherit;
-    .edit-icon-pen {
-        ${flexRow};
-    }
-    .edit-icon-confirm {
-        display: none;
-    }
-    .edit-icon-clear {
-        display: none;
-        margin-left: 12px;
-    }
-    .circular {
-        display: none;
-    }
-`;
 TextInput.defaultProps = {
   autoComplete: 'off',
   autoFocus: false,
@@ -320,9 +139,7 @@ TextInput.defaultProps = {
   disabled: false,
   hoverTooltip: false,
   error: '',
-  iconStyle: {},
   label: '',
-  loading: false,
   multiline: false,
   readOnly: false,
   required: false,
@@ -333,117 +150,77 @@ 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,
-
-  /** Icon element display in the end of input (only use for type is inform, if not, use startIcon instead). */
-  icon: PropTypes.any,
-
-  /** Style inline of icon. */
-  iconStyle: 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', 'quickEdit', 'text', 'number', 'password']),
-
+  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
    */
   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'])
+  viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
 };
 export default TextInput;