@blend-ui/core/dist/esm/TextArea.js

Blend core cmponents

import { extends as _extends, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
import React, { forwardRef, useState, useRef, useLayoutEffect } from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { useTheme } from './theme/ThemeProvider.js';
import Input from './Input.js';
var _excluded = ["expand", "onInputEvent"];
var TextareaElement = /*#__PURE__*/forwardRef(function (props, ref) {
  return /*#__PURE__*/React.createElement(Input, _extends({
    as: "textarea",
    rows: "1",
    ref: ref
  }, props));
});
var StyledTextArea = styled(TextareaElement).withConfig({
  displayName: "TextArea__StyledTextArea",
  componentId: "sc-7p0yi8-0"
})(["resize:none;overflow:auto;white-space:pre-wrap;overflow-wrap:break-word;"]);
var StyledExpandTextArea = styled(TextareaElement).withConfig({
  displayName: "TextArea__StyledExpandTextArea",
  componentId: "sc-7p0yi8-1"
})(["resize:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:break-word;"]);
var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var expand = _ref.expand,
      onInputEvent = _ref.onInputEvent,
      props = _objectWithoutProperties(_ref, _excluded); //console.log("TEXTAREA  ", props, expand, onInputEvent);


  if (expand) {
    var _useTheme = useTheme(),
        componentStyles = _useTheme.componentStyles;

    var _useState = useState(componentStyles.textarea.base.lineHeight),
        _useState2 = _slicedToArray(_useState, 2),
        height = _useState2[0],
        setHeight = _useState2[1];

    var componentRef = useRef();
    var textareaRef = ref || componentRef;
    useLayoutEffect(function () {
      if (textareaRef.current) {
        setHeight(textareaRef.current.scrollHeight + 2); // add border width
      }
    }, [textareaRef]);

    var handleInput = function handleInput(event) {
      if (textareaRef.current) {
        setTimeout(function () {
          setHeight("auto");
          setHeight(textareaRef.current.scrollHeight + 2); // add border width
        }, 0);
      }

      onInputEvent && onInputEvent(event);
    };

    var opts = _objectSpread2({
      height: height
    }, props);

    return /*#__PURE__*/React.createElement(StyledExpandTextArea, _extends({
      onInput: handleInput,
      ref: textareaRef
    }, opts));
  } else {
    return /*#__PURE__*/React.createElement(StyledTextArea, _extends({
      ref: ref
    }, props));
  }
});
TextArea.displayName = "Textarea";
TextArea.propTypes = {
  expand: PropTypes.bool
};
TextArea.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Textarea",
  "props": {
    "expand": {
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    }
  }
};
export { TextArea as default };