smart-react-components/form/Textarea.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var index = require('../index-6d498b59.js');
require('../DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
require('styled-components');
require('../index-56ba89df.js');
require('../element/Div.js');
require('react-dom');
require('../Transition-48c5648c.js');
var UseInputMethod = require('../UseInputMethod-e6937228.js');
var UseInputOutput = require('../UseInputOutput-6af67949.js');
require('../SlideTransition-b2e129ec.js');
require('../element/Label.js');
require('../element/Input.js');
require('../InputElement-def827fe.js');
var TextareaElement = require('../TextareaElement-ad147a85.js');

const Textarea = ({ size = "default", sizeSm, sizeMd, sizeLg, sizeXl, containerProps = index.DV.JSX_ELEMENT_PROPS, textareaProps = index.DV.JSX_ELEMENT_PROPS, labelProps = index.DV.JSX_ELEMENT_PROPS, label, value, setValue, type, fill, border, shape = "default", hint, error, leftAddon, leftAddonProps = index.DV.JSX_ELEMENT_PROPS, leftAddonAbsolute, rightAddon, rightAddonProps = index.DV.JSX_ELEMENT_PROPS, rightAddonAbsolute, minHeight = 150, maxHeight = 350 }) => {
    const { props, isFocused } = UseInputMethod.useInputMethods({ disabled: textareaProps.disabled, value, setValue, onChange: textareaProps.onChange, onFocus: textareaProps.onFocus, onBlur: textareaProps.onBlur });
    const [style, setStyle] = React__default.useState(() => ({}));
    const [height, setHeight] = React__default.useState(-1);
    const getStyle = () => {
        let _style = {};
        if (textareaProps.style)
            _style = Object.assign({}, textareaProps.style);
        else if (height)
            _style.height = `${height}px`;
        return (_style);
    };
    const getHeight = () => {
        if (minHeight || maxHeight) {
            let el = document.getElementById(textareaProps.id);
            if (el) {
                el.style.height = "auto";
                let _height = el.scrollHeight + 5;
                if (_height < minHeight)
                    _height = minHeight;
                else if (_height > maxHeight && maxHeight > -1)
                    _height = maxHeight;
                el.style.height = `${_height}px`;
                return _height;
            }
        }
        return -1;
    };
    React__default.useEffect(() => {
        setStyle(getStyle());
    }, [textareaProps.style]);
    React__default.useEffect(() => {
        setHeight(getHeight());
    }, [value]);
    return UseInputOutput.useInputOutput({
        element: React__default.createElement(TextareaElement.TextareaElement, Object.assign({}, textareaProps, { style: style, "size$": size, "size$Sm": sizeSm, "size$Md": sizeMd, "size$Lg": sizeLg, "size$Xl": sizeXl, "type$": type, "fill$": fill, "border$": border, shape: shape, leftAddon: leftAddon ? true : false, leftAddonAbsolute: leftAddonAbsolute, rightAddon: rightAddon ? true : false, rightAddonAbsolute: rightAddonAbsolute }, props)),
        leftAddon, leftAddonProps, leftAddonAbsolute, rightAddon, rightAddonProps, rightAddonAbsolute, hint, error, containerProps, inputProps: textareaProps, labelProps, label, isFocused
    });
};

module.exports = Textarea;