@drivy/cobalt/components/Form/TextArea.js

Opinionated design system for Drivy's projects.

import React, { PureComponent } from 'react';
import cx from 'classnames';
import { withFieldLabelAndHint } from './field.js';

class TextArea extends PureComponent {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            length: 0,
            height: 0,
        };
    }
    handleChange(event) {
        if (this.props.autosize || this.props.maxLength) {
            this.setState({
                length: event.target.value.length,
                height: event.target.scrollHeight + 2,
            });
        }
        this.props.onChange && this.props.onChange(event);
    }
    render() {
        const { autosize, className, inputClassName, status, maxLength, ...nativeProps } = this.props;
        return (React.createElement("div", { className: cx("cobalt-TextAreaField", className, {
                "cobalt-TextAreaField--withLimit": maxLength && maxLength > 0,
                "cobalt-TextAreaField--success": status === "success",
                "cobalt-TextAreaField--error": status === "error",
            }) },
            React.createElement("textarea", { ...nativeProps, maxLength: maxLength, style: autosize
                    ? {
                        height: this.state.height + "px",
                    }
                    : {}, onChange: this.handleChange, className: cx("cobalt-TextAreaField__Input", inputClassName) }),
            this.state.length > 0 && maxLength && maxLength > 0 && (React.createElement("div", { className: "cobalt-TextAreaField__RemainingChars" },
                maxLength - this.state.length,
                " remaining characters"))));
    }
}
const wrappedComponent = withFieldLabelAndHint(TextArea);
wrappedComponent.displayName = "TextArea";

export { wrappedComponent as TextArea };
//# sourceMappingURL=TextArea.js.map