@dnanpm/styleguide/build/cjs/components/Textarea/Textarea.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var styledUtils = require('../../utils/styledUtils.js');
var LabelText = require('../LabelText/LabelText.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

const FieldContainer = styledComponents.styled.div `
    color: ${theme.default.color.text.black};
    margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
`;
const StyledTextarea = styledComponents.styled.textarea `
    display: block;
    font-family: ${theme.default.fontFamily.default};
    font-size: ${theme.default.fontSize.default};
    line-height: ${theme.default.lineHeight.default};
    width: 100%;
    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
    border-radius: ${theme.default.radius.s};
    border: 1px solid ${theme.default.color.line.L01};

    &::-ms-clear,
    &::-ms-reveal {
        display: none;
    }

    &:disabled,
    &[disabled] {
        background-color: ${theme.default.color.background.sand.E01};
    }

    &:focus {
        border: 2px solid ${theme.default.color.focus.light};
        outline: 2px solid ${theme.default.color.focus.dark};
    }

    &:invalid {
        box-shadow: none;
    }

    &::placeholder {
        color: ${theme.default.color.text.black}${theme.default.color.transparency.T40};
    }
`;
const Message = styledComponents.styled.div `
    font-size: ${theme.default.fontSize.s};
    font-weight: ${theme.default.fontWeight.book};
    line-height: ${theme.default.lineHeight.s};
    color: ${theme.default.color.text.gray};
    margin-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)};
`;
const ErrorMessage = styledComponents.styled(Message) `
    font-weight: ${theme.default.fontWeight.medium};
    color: ${theme.default.color.notification.error};
`;
const Textarea = (_a) => {
    var { height = 3, 'data-testid': dataTestId, ariaLabel } = _a, props = tslib.__rest(_a, ["height", 'data-testid', "ariaLabel"]);
    const inputRef = React.useRef(null);
    const isErrorStatus = props.status === 'error';
    const handleOnBlur = (e) => {
        if (props.onBlur) {
            props.onBlur(e.target.value, e);
        }
    };
    const handleChange = (e) => {
        if (props.onChange) {
            props.onChange(e.target.value, e);
        }
    };
    const onClick = (e) => {
        e.preventDefault();
        if (inputRef && inputRef.current) {
            inputRef.current.focus();
        }
    };
    const errorId = isErrorStatus && props.errorMessage ? `${props.id}-error` : undefined;
    const commentId = props.commentMessage ? `${props.id}-comment` : undefined;
    const describedBy = [errorId, commentId].filter(Boolean).join(' ') || undefined;
    return (React__default.default.createElement(FieldContainer, { className: props.className },
        props.label && (React__default.default.createElement(LabelText.default, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: isErrorStatus ? 'error' : undefined, isMandatory: props.required }, props.label)),
        React__default.default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-label": !props.label ? ariaLabel : undefined, "aria-invalid": isErrorStatus, "aria-describedby": describedBy, "data-testid": dataTestId }),
        props.commentMessage && (React__default.default.createElement(Message, { id: commentId, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
        isErrorStatus && props.errorMessage && (React__default.default.createElement(ErrorMessage, { id: errorId, role: "alert", "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
};

exports.default = Textarea;