@geezee/react-ui/esm/input/input.js

Modern and minimalist React UI library.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import _JSXStyle from "styled-jsx/style";
import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import useTheme from '../styles/use-theme';
import Textarea from '../textarea/textarea';
import InputBlockLabel from './input-block-label';
import InputIcon from './input-icon';
import InputClearIcon from './input-icon-clear';
import InputLabel from './input-label';
import { defaultProps } from './input-props';
import InputPassword from './password';
import { getColors, getSizes } from './styles';
import { useInputHandle } from './use-input-handle';
import { useAutoCompleteContext } from '../auto-complete/auto-complete-context';
export { defaultProps };

var simulateChangeEvent = function simulateChangeEvent(el, event) {
  return _extends(_extends({}, event), {}, {
    target: el,
    currentTarget: el
  });
};

var Input = React.forwardRef(function (_ref, ref) {
  var variant = _ref.variant,
      label = _ref.label,
      labelRight = _ref.labelRight,
      size = _ref.size,
      htmlSize = _ref.htmlSize,
      inputColor = _ref.color,
      icon = _ref.icon,
      iconRight = _ref.iconRight,
      iconClickable = _ref.iconClickable,
      iconRightClickable = _ref.iconRightClickable,
      onIconClick = _ref.onIconClick,
      onIconRightClick = _ref.onIconRightClick,
      onChange = _ref.onChange,
      readOnly = _ref.readOnly,
      onClearClick = _ref.onClearClick,
      clearable = _ref.clearable,
      width = _ref.width,
      htmlWidth = _ref.htmlWidth,
      className = _ref.className,
      onBlur = _ref.onBlur,
      onFocus = _ref.onFocus,
      onMouseOver = _ref.onMouseOver,
      onMouseOut = _ref.onMouseOut,
      autoComplete = _ref.autoComplete,
      placeholder = _ref.placeholder,
      children = _ref.children,
      disabled = _ref.disabled,
      props = _objectWithoutProperties(_ref, ["variant", "label", "labelRight", "size", "htmlSize", "color", "icon", "iconRight", "iconClickable", "iconRightClickable", "onIconClick", "onIconRightClick", "onChange", "readOnly", "onClearClick", "clearable", "width", "htmlWidth", "className", "onBlur", "onFocus", "onMouseOver", "onMouseOut", "autoComplete", "placeholder", "children", "disabled"]);

  var theme = useTheme();
  var isSolid = variant === 'solid';
  var inputRef = useRef(null);
  var isControlled = props.value !== undefined;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      focus = _useState2[0],
      setFocus = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      hover = _useState4[0],
      setHover = _useState4[1];

  var _useMemo = useMemo(function () {
    return getSizes(size);
  }, [size]),
      heightRatio = _useMemo.heightRatio,
      fontSize = _useMemo.fontSize,
      margin = _useMemo.margin;

  var _useAutoCompleteConte = useAutoCompleteContext(),
      autoCompleteRef = _useAutoCompleteConte.ref,
      autoCompleteFocus = _useAutoCompleteConte.focus;

  var inAutoComplete = Boolean(autoCompleteRef && autoCompleteRef.current);
  var labelClasses = useMemo(function () {
    return labelRight ? 'right-label' : label ? 'left-label' : '';
  }, [label, labelRight]);
  var iconClasses = useMemo(function () {
    return iconRight ? 'right-icon' : icon ? 'left-icon' : '';
  }, [icon, iconRight]);
  useImperativeHandle(ref, function () {
    return inputRef.current;
  });

  var _useMemo2 = useMemo(function () {
    return getColors(theme, inputColor, isSolid);
  }, [theme, inputColor, isSolid]),
      color = _useMemo2.color,
      hoverColor = _useMemo2.hoverColor,
      border = _useMemo2.border,
      hoverBorderColor = _useMemo2.hoverBorderColor,
      backgroundColor = _useMemo2.backgroundColor,
      hoverBackgroundColor = _useMemo2.hoverBackgroundColor;

  var changeHandler = function changeHandler(event) {
    if (disabled || readOnly) return;
    onChange && onChange(event);
  };

  var clearHandler = function clearHandler(event) {
    /* istanbul ignore next */
    if (!inputRef.current) return;
    if (disabled || readOnly) return;
    if (!isControlled) inputRef.current.value = '';
    onClearClick && onClearClick(event);

    if (!isControlled) {
      var changeEvent = simulateChangeEvent(inputRef.current, event);
      changeEvent.target.value = '';
      onChange && onChange(changeEvent);
    }

    inputRef.current.focus();
  };

  var focusHandler = function focusHandler(e) {
    setFocus(true);
    onFocus && onFocus(e);
  };

  var blurHandler = function blurHandler(e) {
    if (inAutoComplete && autoCompleteFocus) return;
    setFocus(false);
    onBlur && onBlur(e);
  };

  var mouseOverHandler = function mouseOverHandler(e) {
    setHover(true);
    onMouseOver && onMouseOver(e);
  };

  var mouseOutHandler = function mouseOutHandler(e) {
    setHover(false);
    onMouseOut && onMouseOut(e);
  };

  var iconClickHandler = function iconClickHandler(e) {
    if (disabled) return;
    onIconClick && onIconClick(e);
  };

  var iconRightClickHandler = function iconRightClickHandler(e) {
    if (disabled) return;
    onIconRightClick && onIconRightClick(e);
  };

  var iconProps = useMemo(function () {
    return {
      ratio: heightRatio,
      clickable: iconClickable,
      onClick: iconClickHandler
    };
  }, [heightRatio, iconClickable, iconClickHandler]);
  var iconRightProps = useMemo(function () {
    return {
      ratio: heightRatio,
      clickable: iconRightClickable,
      onClick: iconRightClickHandler
    };
  }, [heightRatio, iconRightClickable, iconRightClickHandler]);
  useEffect(function () {
    if (!autoCompleteFocus) {
      setFocus(false);
    }
  }, [autoCompleteFocus]);

  var inputProps = _extends({}, props);

  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3501851587", [width, width, heightRatio, theme.layout.gap, theme.expressiveness.R2, backgroundColor, border, theme.palette.cNeutral2, hoverBorderColor, hoverBackgroundColor, margin, fontSize, heightRatio, theme.layout.gap, color, theme.palette.cNeutral4, hoverColor, theme.palette.cNeutral5, heightRatio, theme.layout.gap, backgroundColor, color, hoverBackgroundColor, hoverColor]]]) + " " + "with-label"
  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, {
    htmlFor: props.id
  }, children), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3501851587", [width, width, heightRatio, theme.layout.gap, theme.expressiveness.R2, backgroundColor, border, theme.palette.cNeutral2, hoverBorderColor, hoverBackgroundColor, margin, fontSize, heightRatio, theme.layout.gap, color, theme.palette.cNeutral4, hoverColor, theme.palette.cNeutral5, heightRatio, theme.layout.gap, backgroundColor, color, hoverBackgroundColor, hoverColor]]]) + " " + "input-container ".concat(className)
  }, label && /*#__PURE__*/React.createElement(InputLabel, {
    htmlFor: props.id,
    variant: variant,
    fontSize: fontSize
  }, label), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3501851587", [width, width, heightRatio, theme.layout.gap, theme.expressiveness.R2, backgroundColor, border, theme.palette.cNeutral2, hoverBorderColor, hoverBackgroundColor, margin, fontSize, heightRatio, theme.layout.gap, color, theme.palette.cNeutral4, hoverColor, theme.palette.cNeutral5, heightRatio, theme.layout.gap, backgroundColor, color, hoverBackgroundColor, hoverColor]]]) + " " + "input-wrapper ".concat(isSolid ? 'solid' : 'line', " ").concat(hover ? 'hover' : '', " ").concat(focus ? 'focus' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(labelClasses)
  }, icon && /*#__PURE__*/React.createElement(InputIcon, _extends({
    paddingRight: "0.5714rem",
    icon: icon
  }, iconProps)), /*#__PURE__*/React.createElement("input", _extends({
    type: "text",
    size: htmlSize,
    ref: inputRef,
    width: htmlWidth,
    placeholder: placeholder,
    disabled: disabled,
    readOnly: readOnly,
    onFocus: focusHandler,
    onMouseOver: mouseOverHandler,
    onMouseOut: mouseOutHandler,
    onBlur: blurHandler,
    onChange: changeHandler,
    autoComplete: autoComplete
  }, inputProps, {
    className: _JSXStyle.dynamic([["3501851587", [width, width, heightRatio, theme.layout.gap, theme.expressiveness.R2, backgroundColor, border, theme.palette.cNeutral2, hoverBorderColor, hoverBackgroundColor, margin, fontSize, heightRatio, theme.layout.gap, color, theme.palette.cNeutral4, hoverColor, theme.palette.cNeutral5, heightRatio, theme.layout.gap, backgroundColor, color, hoverBackgroundColor, hoverColor]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || "".concat(iconClasses))
  })), clearable && /*#__PURE__*/React.createElement(InputClearIcon, {
    visible: Boolean(inputRef.current && inputRef.current.value !== ''),
    heightRatio: heightRatio,
    disabled: disabled || readOnly,
    onClick: clearHandler
  }), iconRight && /*#__PURE__*/React.createElement(InputIcon, _extends({
    icon: iconRight
  }, iconRightProps))), labelRight && /*#__PURE__*/React.createElement(InputLabel, {
    htmlFor: props.id,
    variant: variant,
    fontSize: fontSize,
    isRight: true
  }, labelRight)), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3501851587",
    dynamic: [width, width, heightRatio, theme.layout.gap, theme.expressiveness.R2, backgroundColor, border, theme.palette.cNeutral2, hoverBorderColor, hoverBackgroundColor, margin, fontSize, heightRatio, theme.layout.gap, color, theme.palette.cNeutral4, hoverColor, theme.palette.cNeutral5, heightRatio, theme.layout.gap, backgroundColor, color, hoverBackgroundColor, hoverColor]
  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;width:".concat(width, ";box-sizing:border-box;-webkit-box-align:center;}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(width, ";height:calc(").concat(heightRatio, " * ").concat(theme.layout.gap, ");}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(theme.expressiveness.R2, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background-color:").concat(backgroundColor, ";border:").concat(border, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;border:0;background-color:").concat(theme.palette.cNeutral2, ";}.focus.input-wrapper.__jsx-style-dynamic-selector:not(.disabled),.hover.input-wrapper.__jsx-style-dynamic-selector:not(.disabled){border-color:").concat(hoverBorderColor, ";background-color:").concat(hoverBackgroundColor, ";}input.__jsx-style-dynamic-selector{margin:").concat(margin, ";padding:0;box-shadow:none;font-size:").concat(fontSize, ";line-height:calc(").concat(heightRatio, " * ").concat(theme.layout.gap, " - 2px);background-color:transparent;font-weight:normal;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;color:").concat(theme.palette.cNeutral4, ";}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.input-wrapper.focus.__jsx-style-dynamic-selector:not(.disabled) input.__jsx-style-dynamic-selector,.input-wrapper.hover.__jsx-style-dynamic-selector:not(.disabled) input.__jsx-style-dynamic-selector{color:").concat(hoverColor, ";}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.cNeutral5, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.cNeutral5, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.cNeutral5, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.cNeutral5, ";}input.__jsx-style-dynamic-selector::-moz-placeholder{line-height:calc(").concat(heightRatio, " * ").concat(theme.layout.gap, " - 1px);}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active{-webkit-box-shadow:0 0 0 30px ").concat(backgroundColor, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(hoverBackgroundColor, " inset !important;-webkit-text-fill-color:").concat(hoverColor, " !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active{-webkit-background-clip:text;}")));
});
Input.defaultProps = defaultProps;
var InputComponent = Input;
InputComponent.Textarea = Textarea;
InputComponent.Password = InputPassword;
InputComponent.useInputHandle = useInputHandle;
export default InputComponent;
export { useInputHandle };