@confi/conflux-react-ui-test-package/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, { useEffect, useMemo, useState } from 'react';
import useTheme from '../styles/use-theme';
import withDefaults from '../utils/with-defaults';
import { getColors } from '../input/styles';
var defaultProps = {
  initialValue: '',
  status: 'default',
  width: 'initial',
  minHeight: '6.25rem',
  disabled: false,
  readOnly: false,
  className: ''
};

var Textarea = function Textarea(_ref) {
  var width = _ref.width,
      status = _ref.status,
      minHeight = _ref.minHeight,
      disabled = _ref.disabled,
      readOnly = _ref.readOnly,
      onFocus = _ref.onFocus,
      onBlur = _ref.onBlur,
      className = _ref.className,
      initialValue = _ref.initialValue,
      onChange = _ref.onChange,
      value = _ref.value,
      placeholder = _ref.placeholder,
      props = _objectWithoutProperties(_ref, ["width", "status", "minHeight", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder"]);

  var theme = useTheme();

  var _useState = useState(initialValue),
      _useState2 = _slicedToArray(_useState, 2),
      selfValue = _useState2[0],
      setSelfValue = _useState2[1];

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

  var _useMemo = useMemo(function () {
    return getColors(theme.palette, status);
  }, [theme.palette, status]),
      color = _useMemo.color,
      borderColor = _useMemo.borderColor,
      hoverBorder = _useMemo.hoverBorder;

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

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

  var blurHandler = function blurHandler(e) {
    setHover(false);
    onBlur && onBlur(e);
  };

  useEffect(function () {
    if (value === undefined) return;
    setSelfValue(value);
  }, [value]);
  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1335280583", [width, theme.layout.radius, borderColor, color, hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, minHeight, theme.layout.gapHalf, theme.palette.background]]]) + " " + "wrapper ".concat(hover ? 'hover' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(className)
  }, /*#__PURE__*/React.createElement("textarea", _extends({
    disabled: disabled,
    value: selfValue,
    placeholder: placeholder,
    readOnly: readOnly,
    onFocus: focusHandler,
    onBlur: blurHandler,
    onChange: changeHandler
  }, props, {
    className: _JSXStyle.dynamic([["1335280583", [width, theme.layout.radius, borderColor, color, hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, minHeight, theme.layout.gapHalf, theme.palette.background]]]) + " " + (props && props.className != null && props.className || "")
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1335280583",
    dynamic: [width, theme.layout.radius, borderColor, color, hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, minHeight, theme.layout.gapHalf, theme.palette.background]
  }, ".wrapper.__jsx-style-dynamic-selector{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.layout.radius, ";border:1px solid ").concat(borderColor, ";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;}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}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:").concat(theme.layout.gapHalf, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}")));
};

export default withDefaults(Textarea, defaultProps);