import React from 'react';
import PropTypes from 'prop-types';
import './RichTextEditor.scss';
var RichTextEditor = function (_a) {
    var className = _a.className, cols = _a.cols, id = _a.id, label = _a.label, lineHeight = _a.lineHeight, maxLength = _a.maxLength, minLength = _a.minLength, onChange = _a.onChange, placeholder = _a.placeholder, resize = _a.resize, rows = _a.rows, value = _a.value;
    var handleTextAreaChange = function (event) { return onChange(event.target.value, event); };
    return (React.createElement("div", { className: [
            className,
            'rich-text-editor',
        ]
            .filter(Boolean)
            .join(' ') },
        React.createElement("label", { className: "rich-text-editor__label", htmlFor: id }, label),
        React.createElement("textarea", { cols: cols, className: "rich-text-editor__input", id: id, maxLength: maxLength, minLength: minLength, name: id, onChange: handleTextAreaChange, placeholder: placeholder, rows: rows, style: {
                height: rows ?
                    rows * lineHeight + "em" :
                    null,
                lineHeight: lineHeight,
                minHeight: lineHeight + "em",
                resize: resize,
            }, value: value })));
};
RichTextEditor.propTypes = {
    cols: PropTypes.number,
    className: PropTypes.string,
    id: PropTypes.string.isRequired,
    label: PropTypes.node.isRequired,
    lineHeight: PropTypes.number,
    maxLength: PropTypes.number,
    minLength: PropTypes.number,
    onChange: PropTypes.func.isRequired,
    placeholder: PropTypes.string,
    resize: PropTypes.string,
    rows: PropTypes.number,
    value: PropTypes.string.isRequired,
};
RichTextEditor.defaultProps = {
    className: '',
    lineHeight: 1.1,
};
export default RichTextEditor;
//# sourceMappingURL=RichTextEditor.js.map