diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,646 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Icon, Typography } from "../..";
-import { getGlobal } from "../../../global";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, bottom, boxBorder, displayBlock, displayFlex, displayNone, fill, flexRow, inset, insetX, itemsCenter, outlineNone, parseHeight, parseMaxHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, scaleX, selfEnd, textColor, textEllipsis, top, userSelectNone } from "../../../styles/general";
-import { useTheme } from "../../../theme";
-import useThemeProps from "../../../theme/utils/useThemeProps";
-import { classNames, refType as ref, useInput, getProp } from "../../../utils";
-const InputBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    colors
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'InputBase'
-  });
-  const {
-    action = {},
-    autoComplete,
-    autoFocus,
-    autoWidth: autoWidthProp,
-    className,
-    defaultValue,
-    delayOnChange: delayOnChangeProp,
-    disabled,
-    endIcon,
-    endIconProps,
-    hoverTooltip,
-    iconStyle,
-    inputProps,
-    inputRef: inputRefProp = useRef(null),
-    inputStyle,
-    maxRows,
-    multiline,
-    name,
-    nonStyle,
-    onBlur,
-    onChange,
-    onFocus,
-    onInput,
-    onKeyDown,
-    onKeyUp,
-    placeholder: placeholderProp,
-    readOnly,
-    resize,
-    rows,
-    startIcon,
-    startIconProps,
-    status,
-    type,
-    value: valueProp,
-    viewType,
-    ...other
-  } = props;
-  const autoWidth = !autoWidthProp && inputProps !== null && inputProps !== void 0 && inputProps.autoWidth ? inputProps.autoWidth : autoWidthProp;
-  const delayOnChange = delayOnChangeProp || getGlobal('delayOnInput');
-  const placeholder = placeholderProp || getGlobal('inputPlaceholder');
-  const _onChange = e => {
-    onChange && onChange(e);
-    dynamicWidth(e);
-  };
-  const {
-    bind,
-    value
-  } = useInput(defaultValue, valueProp, _onChange, onInput, delayOnChange);
-
-  // if (!inputRefProp) inputRefProp = useRef(null);
-  const inputRef = useRef(null);
-  const ref = useRef(null);
-  const valueArray = useRef([]);
-  const canvas = document.createElement('canvas');
-  const styleInputBase = useRef(null);
-  const widthInit = useRef(null);
-  const isEnabled = !readOnly && !disabled;
-  const _InputBaseCSS = InputBaseCSS(readOnly, getProp(colors, status, status), theme);
-  const _SingleLineCSS = SingleLineCSS(autoWidth, readOnly, theme);
-  const _InputCSS = InputCSS(autoWidth, isEnabled, hoverTooltip, theme);
-  const _TypoCSS = TypoCSS(disabled, theme);
-  const _TextAreaCSS = TextAreaCSS(resize, readOnly, theme);
-  const _MultilineCSS = MultilineCSS(_TextAreaCSS.name, rows, maxRows, theme);
-  const _InputBaseIconCSS = InputBaseIconCSS(multiline, theme);
-
-  /* Start handler */
-  const onInputTextArea = e => {
-    if (!/\d+/.test(rows)) {
-      const el = e.target;
-      const defaultHeight = 24;
-      if (el.value) {
-        el.style.height = 0;
-        el.style.height = Math.max(defaultHeight, el.scrollHeight) + 'px';
-      } else {
-        el.style.height = defaultHeight + 'px';
-      }
-    }
-    !!onInput && onInput(e);
-  };
-  useEffect(() => {
-    if (defaultValue !== undefined && defaultValue !== '') {
-      if (multiline && !/\d+/.test(rows) && inputRef.current) {
-        inputRef.current.style.height = 0;
-        inputRef.current.style.height = Math.max(24, inputRef.current.scrollHeight) + 'px';
-      }
-    }
-  }, []);
-  useEffect(() => {
-    if (multiline && !/\d+/.test(rows) && inputRef.current && !(inputRef.current.value || inputRef.current.value === 0)) {
-      inputRef.current.style.height = '24px';
-    }
-    if (autoFocus) {
-      inputRef.current.focus();
-    }
-  }, [multiline]);
-  useEffect(() => {
-    const defaultHeight = 24;
-    if (valueProp !== undefined) {
-      valueArray.current.push(valueProp);
-      inputRef.current.value = valueProp;
-      if (multiline && !/\d+/.test(rows)) {
-        inputRef.current.style.height = 0;
-        inputRef.current.style.height = Math.max(defaultHeight, inputRef.current.scrollHeight) + 'px';
-      } else {
-        dynamicWidth({
-          target: {
-            value: valueProp
-          }
-        });
-      }
-    }
-    return () => {
-      if (valueProp !== undefined && multiline && !/\d+/.test(rows) && inputRef.current) {
-        inputRef.current.style.height = defaultHeight + 'px';
-      }
-    };
-  }, [valueProp]);
-  /* End handler */
-
-  useImperativeHandle(reference, () => {
-    const currentRef = inputRef.current || {};
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const saveInitInfo = refs => {
-    if (!autoWidth) return;
-    const style = window.getComputedStyle(refs) || refs.currentStyle;
-    if (!widthInit.current) widthInit.current = parseInt(style.width);
-    styleInputBase.current = style;
-  };
-  const dynamicWidth = e => {
-    if (!autoWidth || !inputRef.current) return;
-    if (!canvas || !styleInputBase.current || !inputRef.current) return;
-    const context = canvas.getContext('2d');
-    context.font = styleInputBase.current.font;
-    const {
-      width
-    } = context.measureText(e.target.value);
-    inputRef.current.style.width = `${Math.max(width, widthInit.current)}px`;
-  };
-
-  /* Start component */
-  const newClass = viewType + (viewType === 'none' || nonStyle ? ' non-style' : '');
-  const StartIcon = useMemo(() => {
-    let node = startIcon;
-    if (typeof node === 'string') {
-      node = jsx(Icon, {
-        name: startIcon,
-        style: iconStyle,
-        ...startIconProps
-      });
-    }
-    return jsx("div", {
-      css: _InputBaseIconCSS,
-      className: classNames('DGN-UI-InputBase-Start-Icon', startIconProps.className),
-      ...startIconProps
-    }, node);
-  }, [startIcon, startIconProps, iconStyle]);
-  const EndIcon = useMemo(() => {
-    let node = endIcon;
-    if (typeof node === 'string') {
-      node = jsx(Icon, {
-        name: endIcon,
-        style: iconStyle,
-        ...endIconProps
-      });
-    }
-    return jsx("div", {
-      css: _InputBaseIconCSS,
-      className: classNames('DGN-UI-InputBase-End-Icon', endIconProps.className),
-      ...endIconProps
-    }, node);
-  }, [endIcon, endIconProps, iconStyle]);
-  const MultipleInputComp = jsx("div", {
-    ref: ref,
-    css: [_InputBaseCSS, _MultilineCSS, disabled && DisabledCSS(theme)],
-    className: classNames('DGN-UI-InputBase', newClass, className),
-    ...other
-  }, startIcon ? StartIcon : null, jsx("textarea", {
-    placeholder: isEnabled ? placeholder : '',
-    defaultValue: defaultValue,
-    ...inputProps,
-    css: _TextAreaCSS,
-    readOnly: readOnly,
-    style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
-    className: classNames('DGN-UI-InputBase-Textarea', inputProps.className),
-    ref: refs => {
-      if (!refs) return;
-      inputRef.current = refs;
-      typeof inputRefProp === 'function' ? inputRefProp(refs) : inputRefProp.current = refs;
-    },
-    onKeyDown: onKeyDown,
-    onKeyUp: onKeyUp,
-    onInput: onInputTextArea,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    disabled: disabled,
-    name: name,
-    ...bind
-  }), endIcon ? EndIcon : null);
-  const InputComp = jsx("div", {
-    ref: ref,
-    css: [[_InputBaseCSS, _SingleLineCSS, disabled && DisabledCSS(theme)]],
-    className: classNames('DGN-UI-InputBase', newClass, className),
-    ...other
-  }, startIcon ? StartIcon : null, jsx("input", {
-    type: type,
-    autoComplete: autoComplete,
-    placeholder: isEnabled ? placeholder : '',
-    defaultValue: defaultValue,
-    ...inputProps,
-    readOnly: readOnly,
-    style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
-    className: classNames('DGN-UI-InputBase-Input', newClass, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
-    ref: refs => {
-      if (!refs) return;
-      inputRef.current = refs;
-      typeof inputRefProp === 'function' ? inputRefProp(refs) : inputRefProp.current = refs;
-      saveInitInfo(refs);
-    },
-    css: _InputCSS,
-    onKeyDown: onKeyDown,
-    onKeyUp: onKeyUp,
-    onInput: onInput,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    disabled: disabled,
-    name: name,
-    ...bind
-  }), !isEnabled && hoverTooltip ? jsx(Typography, {
-    css: _TypoCSS,
-    className: classNames(newClass, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className),
-    lineClamp: 1,
-    hoverTooltip: true,
-    type: 'p1',
-    style: {
-      lineHeight: '26px',
-      width: '100%'
-    }
-  }, value !== null && value !== void 0 ? value : '') : null, endIcon ? EndIcon : null);
-  /* End component */
-
-  return multiline ? MultipleInputComp : InputComp;
-}));
-const DisabledCSS = ({
-  colors
-}) => css`
-    ${pointerEventsNone};
-    ${borderColor(getProp(colors, 'system/disabled'))};
-    &::before {
-        ${borderBottomColor(getProp(colors, 'system/disabled'))};
-    }
-    &.outlined {
-        ${bgColor(getProp(colors, 'fill/disabled'))};
-    }
-    .DGN-UI-InputBase-Start-Icon,
-    .DGN-UI-InputBase-End-Icon {
-        &:not(.non-effect),
-        &.allow-disabled {
-            path {
-                ${fill(getProp(colors, 'system/disabled'))};
-            }
-        }
-    }
-`;
-const InputBaseCSS = (readOnly, status, {
-  colors,
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${positionRelative};
-    ${boxBorder};
-    &:hover,
-    &:focus-within {
-        .DGN-UI-InputBase-Start-Icon:not(.non-effect) {
-            path {
-                ${fill(getProp(colors, 'system/active'))};
-            }
-        }
-    }
-    &.outlined {
-        ${border(1, getProp(colors, 'line/normal'))};
-        ${borderRadius(4)};
-        padding: ${spacing([1.75, 4])};
-        &:not(:focus-within):hover {
-            ${!readOnly && css`
-                ${bgColor(getProp(colors, 'fill/hover'))};
-                ${borderColor(getProp(colors, 'line/hover'))};
-                input,
-                textarea {
-                    ::placeholder {
-                        ${textColor(getProp(colors, 'system/active'))};
-                    }
-                }
-            `};
-        }
-        &:focus-within {
-            ${!readOnly && css`
-                ${borderColor(getProp(colors, 'line/focus'))};
-                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-                &::after {
-                    ${borderColor('inherit')};
-                }
-            `}
-        }
-        &::after {
-            content: '';
-            ${positionAbsolute};
-            ${borderRadius(4)};
-            ${pointerEventsNone};
-            ${border(2, 'transparent')};
-            ${inset(-2)};
-        }
-    }
-    &.underlined {
-        padding-top: ${spacing([1])};
-        padding-bottom: ${spacing([1])};
-        &:not(:focus-within):hover {
-            ${!readOnly && css`
-                &::before {
-                    ${borderBottomColor(getProp(colors, 'line/hover'))};
-                }
-            `};
-            input,
-            textarea {
-                ::placeholder {
-                    ${textColor(getProp(colors, 'system/active'))};
-                }
-            }
-        }
-        &:focus-within {
-            ${!readOnly && css`
-                &::after {
-                    ${borderBottomColor(getProp(colors, 'line/focus'))};
-                    ${scaleX(1)};
-                }
-            `}
-        }
-        &::before {
-            content: '';
-            ${positionAbsolute};
-            ${insetX(0)};
-            ${bottom(0)};
-            ${borderBottom(1, getProp(colors, 'line/normal'))};
-        }
-        &::after {
-            content: '';
-            ${positionAbsolute};
-            ${insetX(0)};
-            ${bottom(-1)};
-            ${borderBottom(2, 'transparent')};
-            ${scaleX(0)};
-            transform-origin: center;
-            transition: all 0.2s ease;
-        }
-    }
-    &.non-style {
-        padding-top: ${spacing([1])};
-        padding-bottom: ${spacing([1])};
-        border-color: transparent !important;
-        box-shadow: none !important;
-        background-color: transparent !important;
-        input,
-        textarea {
-            background-color: transparent !important;
-        }
-        &:before,
-        &:after {
-            border-color: transparent !important;
-        }
-    }
-    ${status !== 'default' && css`
-        border-color: ${status} !important;
-        &::before {
-            border-color: ${status} !important;
-        }
-    `}
-    & + .DGN-UI-HelperText {
-        ${positionAbsolute};
-        ${parseMinHeight(16)};
-        ${top('100%')};
-    }
-`;
-const SingleLineCSS = (autoWidth, readOnly, {
-  colors
-}) => css`
-    ${parseWidthHeight(autoWidth ? 'max-content' : 'auto', 'max-content')}
-    ${itemsCenter};
-    flex: 1 1 auto;
-    &:focus-within {
-        ${!readOnly && css`
-            ${borderBottomColor(getProp(colors, 'semantic/info'))};
-            &::after {
-                ${borderBottomColor('inherit')};
-                ${scaleX(1)};
-            }
-        `}
-    }
-    &.outlined {
-        ${parseHeight(40)};
-        ${bgColor(getProp(colors, 'system/standard'))};
-    }
-`;
-const InputCSS = (autoWidth, isEnabled, hoverTooltip, {
-  colors,
-  spacing,
-  typography
-}) => css`
-    ${parseWidthHeight(autoWidth ? 10 : '100%', 24)};
-    ${borderNone};
-    ${outlineNone};
-    transition: all 0.1s;
-    ${textColor(getProp(colors, 'text/main'))};
-    ${bgColor('transparent')};
-    padding-top: ${spacing([0])};
-    padding-bottom: ${spacing([0])};
-    ${typography.paragraph1};
-    ${textEllipsis};
-    &::placeholder {
-        ${textColor(getProp(colors, 'text/sub'))};
-        ${typography.paragraph1};
-    }
-    &:focus {
-        ${bgColor('transparent')};
-        ${textColor(getProp(colors, 'system/active'))};
-    }
-    &:hover {
-        ${textColor(getProp(colors, 'system/active'))};
-    }
-    &.underlined {
-        padding-left: ${spacing([0])};
-        padding-right: ${spacing([0])};
-    }
-    &:disabled {
-        ${bgColor('transparent')};
-    }
-    ${!isEnabled && hoverTooltip && displayNone};
-`;
-const TypoCSS = (disabled, {
-  colors
-}) => css`
-    ${parseHeight(24)};
-    &:focus {
-        ${bgColor('transparent')};
-        ${textColor(getProp(colors, 'system/active'))};
-    }
-    &:hover {
-        ${textColor(getProp(colors, 'system/active'))};
-    }
-    ${disabled && userSelectNone};
-`;
-const MultilineCSS = (TextAreaCSSName, rows, maxRows) => css`
-    ${parseWidthHeight('100%', 'max-content')};
-    &.outlined {
-        .css-${TextAreaCSSName} {
-            ${parseHeight(24)};
-            ${rows && /\d+/.test(rows) && parseHeight(20 * rows + 4)};
-            ${maxRows && /\d+/.test(maxRows) && parseMaxHeight(20 * maxRows + 4)};
-        }
-    }
-    &.underlined {
-        .css-${TextAreaCSSName} {
-            ${parseHeight(24)};
-            ${rows && /\d+/.test(rows) && parseHeight(20 * rows + 4)};
-            ${maxRows && /\d+/.test(maxRows) && parseMaxHeight(20 * maxRows + 4)};
-        }
-    }
-`;
-const TextAreaCSS = (resize, readOnly, {
-  colors,
-  spacing,
-  typography
-}) => css`
-    ${displayBlock};
-    ${typography.paragraph1};
-    ${borderNone};
-    ${outlineNone};
-    ${positionRelative};
-    ${boxBorder};
-    ${parseWidth('100%')};
-    ${parseMinWidthHeight('max-content')};
-    padding: ${spacing([0.5, 0])};
-    ${bgTransparent};
-    ${textColor(getProp(colors, 'text/main'))};
-    overflow-y: auto;
-    resize: ${resize};
-    &:hover:not(:focus-within) {
-        ${!readOnly && css`
-            ${borderColor(getProp(colors, 'system/active'))};
-            ${textColor(getProp(colors, 'system/active'))};
-            ::placeholder {
-                ${textColor(getProp(colors, 'system/active'))};
-            }
-        `};
-    }
-    &:focus-within {
-        ${textColor(getProp(colors, 'system/active'))};
-    }
-    &::-webkit-scrollbar {
-        ${borderRadius(4)};
-        ${parseWidth(4)};
-        ${bgColor(getProp(colors, 'system/standard'))};
-    }
-    &::-webkit-scrollbar-thumb {
-        ${borderRadius(10)};
-        ${bgColor(getProp(colors, 'fill/disabled'))};
-        mix-blend-mode: normal;
-        background-clip: content-box;
-    }
-`;
-const InputBaseIconCSS = (multiple, {
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${multiple && selfEnd};
-    ${textColor('inherit')};
-    &.DGN-UI-InputBase-Start-Icon {
-        margin-right: ${spacing([1])};
-        & + input {
-            padding-left: 0px;
-        }
-    }
-    &.DGN-UI-InputBase-End-Icon {
-        margin-left: ${spacing([1])};
-    }
-`;
-
-// InputBase.defaultProps = {
-//     autoComplete: 'off',
-//     autoFocus: false,
-//     className: '',
-//     defaultValue: '',
-//     delayOnChange: getGlobal('delayOnInput'),
-//     disabled: false,
-//     endIconProps: {},
-//     hoverTooltip: false,
-//     iconStyle: {},
-//     inputProps: {},
-//     inputStyle: {},
-//     multiline: false,
-//     nonStyle: false,
-//     placeholder: getGlobal('inputPlaceholder'),
-//     readOnly: false,
-//     required: false,
-//     resize: 'none',
-//     startIconProps: {},
-//     status: 'default',
-//     type: 'text',
-//     viewType: 'underlined',
-// };
-
-InputBase.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]),
-  /** The number of milliseconds to wait before call onChange. */
-  delayOnChange: PropTypes.number,
-  /** 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.oneOfType([PropTypes.string, PropTypes.node]),
-  /** Props of end icon. */
-  endIconProps: PropTypes.object,
-  /** 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,
-  /** 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,
-  /** allow resize multiline input (resize css style) */
-  resize: PropTypes.string,
-  /** 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. */
-  startIconProps: PropTypes.object,
-  /** Status type to display color for input. */
-  status: PropTypes.oneOf(['default', 'warning', 'success', 'danger', 'info']),
-  /** 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'])
-};
-export default InputBase;