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

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useImperativeHandle, useMemo, useRef, useState } from 'react';
import { useTextareaHandle } from '../input/use-input-handle';
import { getColors } from '../input/styles';
import useTheme from '../styles/use-theme';
import Counter from './counter';
var defaultProps = {
  variant: 'line',
  color: 'default',
  width: 'initial',
  minHeight: '6.25rem',
  disabled: false,
  readOnly: false,
  className: ''
};
var Textarea = React.forwardRef(function (_ref, ref) {
  var _props$defaultValue;

  var counter = _ref.counter,
      maxLength = _ref.maxLength,
      variant = _ref.variant,
      width = _ref.width,
      textareaColor = _ref.color,
      minHeight = _ref.minHeight,
      disabled = _ref.disabled,
      readOnly = _ref.readOnly,
      onMouseOut = _ref.onMouseOut,
      onMouseOver = _ref.onMouseOver,
      onFocus = _ref.onFocus,
      onBlur = _ref.onBlur,
      className = _ref.className,
      onChange = _ref.onChange,
      placeholder = _ref.placeholder,
      props = _objectWithoutProperties(_ref, ["counter", "maxLength", "variant", "width", "color", "minHeight", "disabled", "readOnly", "onMouseOut", "onMouseOver", "onFocus", "onBlur", "className", "onChange", "placeholder"]);

  var isSolid = variant === 'solid';
  var theme = useTheme();
  var hasLimit = useMemo(function () {
    return Number.isInteger(maxLength) && maxLength > 0;
  }, [maxLength]);
  var textareaRef = useRef(null);
  useImperativeHandle(ref, function () {
    return textareaRef.current;
  });
  var isControlledComponent = useMemo(function () {
    return props.value !== undefined;
  }, [props.value]);

  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 _useState5 = useState(isControlledComponent ? props.value.length : ((_props$defaultValue = props.defaultValue) === null || _props$defaultValue === void 0 ? void 0 : _props$defaultValue.length) || 0),
      _useState6 = _slicedToArray(_useState5, 2),
      count = _useState6[0],
      setCount = _useState6[1];

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

  var changeHandler = function changeHandler(event) {
    var _event$target$value;

    setCount((_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.length);
    if (disabled || readOnly) return;
    if (hasLimit && event.target.value.length > maxLength) return;
    onChange && onChange(event);
  };

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

  var blurHandler = function blurHandler(e) {
    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);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3713332902", [counter ? 'relative' : 'inherit', width, theme.expressiveness.R2, color, backgroundColor, border, hoverBorderColor, hoverBackgroundColor, theme.palette.cNeutral2, theme.palette.cNeutral2, theme.font.sans, minHeight, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral5, theme.palette.background, hoverBackgroundColor]]]) + " " + "wrapper ".concat(hover ? 'hover' : '', " ").concat(focus ? 'focus' : '', " ").concat(isSolid ? 'solid' : 'lined', " ").concat(disabled ? 'disabled' : '', " ").concat(className)
  }, /*#__PURE__*/React.createElement("textarea", _extends({
    ref: textareaRef,
    disabled: disabled,
    placeholder: placeholder,
    readOnly: readOnly,
    onFocus: focusHandler,
    onBlur: blurHandler,
    onMouseOver: mouseOverHandler,
    onMouseOut: mouseOutHandler,
    onChange: changeHandler,
    maxLength: maxLength
  }, props, {
    className: _JSXStyle.dynamic([["3713332902", [counter ? 'relative' : 'inherit', width, theme.expressiveness.R2, color, backgroundColor, border, hoverBorderColor, hoverBackgroundColor, theme.palette.cNeutral2, theme.palette.cNeutral2, theme.font.sans, minHeight, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral5, theme.palette.background, hoverBackgroundColor]]]) + " " + (props && props.className != null && props.className || "")
  })), counter && /*#__PURE__*/React.createElement(Counter, {
    count: count,
    maxLength: maxLength
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3713332902",
    dynamic: [counter ? 'relative' : 'inherit', width, theme.expressiveness.R2, color, backgroundColor, border, hoverBorderColor, hoverBackgroundColor, theme.palette.cNeutral2, theme.palette.cNeutral2, theme.font.sans, minHeight, theme.layout.gap, theme.layout.gap, theme.palette.cNeutral5, theme.palette.background, hoverBackgroundColor]
  }, ".wrapper.__jsx-style-dynamic-selector{position:".concat(counter ? 'relative' : 'inherit', ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:").concat(width, ";min-width:12.5rem;max-width:95vw;height:auto;border-radius:").concat(theme.expressiveness.R2, ";color:").concat(color, ";-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, ";}.wrapper.hover.__jsx-style-dynamic-selector:not(.disabled),.wrapper.focus.__jsx-style-dynamic-selector:not(.disabled){border-color:").concat(hoverBorderColor, ";background-color:").concat(hoverBackgroundColor, ";}.wrapper.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.cNeutral2, ";border-color:").concat(theme.palette.cNeutral2, ";cursor:not-allowed;opacity:0.5;}textarea.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:0.875rem;width:100%;height:100%;min-height:").concat(minHeight, ";resize:none;border:none;outline:none;padding:calc(").concat(theme.layout.gap, " * 0.875) calc(").concat(theme.layout.gap, " * 0.75);}textarea.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;}.__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-textarea-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-textarea-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-textarea-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-textarea-placeholder{color:").concat(theme.palette.cNeutral5, ";}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-background-clip:text;}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(hoverBackgroundColor, " inset !important;}")));
});
Textarea.defaultProps = defaultProps;
var TextareaComponent = Textarea;
TextareaComponent.useTextareaHandle = useTextareaHandle;
export { useTextareaHandle };
export default TextareaComponent;