@kiwicom/orbit-components/es/Textarea/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import styled from "styled-components";
import defaultTheme from "../defaultTheme";
import FormFeedback from "../FormFeedback";
import FormLabel from "../FormLabel";
import { SIZE_OPTIONS, RESIZE_OPTIONS } from "./consts";
import { rtlSpacing } from "../utils/rtl";
import getSpacingToken from "../common/getSpacingToken";
const Field = styled.label.withConfig({
  displayName: "Textarea__Field",
  componentId: "sc-1ezoqgy-0"
})(["font-family:", ";display:flex;width:100%;height:", ";flex-direction:column;position:relative;flex:", ";margin-bottom:", ";"], ({
  theme
}) => theme.orbit.fontFamily, ({
  fullHeight
}) => fullHeight && "100%", ({
  fullHeight
}) => fullHeight && "1", getSpacingToken);
Field.defaultProps = {
  theme: defaultTheme
};

const getFontSize = () => ({
  theme,
  size
}) => {
  const tokens = {
    [SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeInputSmall,
    [SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeInputNormal
  };
  return tokens[size];
};

const getPadding = () => ({
  theme,
  size
}) => {
  const tokens = {
    [SIZE_OPTIONS.SMALL]: theme.orbit.paddingTextareaSmall,
    [SIZE_OPTIONS.NORMAL]: theme.orbit.paddingTextareaNormal
  };
  return rtlSpacing(tokens[size]);
};

const StyledTextArea = styled.textarea.withConfig({
  displayName: "Textarea__StyledTextArea",
  componentId: "sc-1ezoqgy-1"
})(["appearance:none;box-sizing:border-box;display:block;width:100%;height:", ";padding:", ";border-radius:", ";box-shadow:inset 0 0 0 ", ";background-color:", ";color:", ";font-size:", ";line-height:", ";cursor:", ";font-family:", ";resize:", ";transition:box-shadow ", " ease-in-out;min-height:44px;flex:", ";border:1px solid transparent;overflow:auto;&::placeholder{color:", ";}&:hover{box-shadow:", ";}&:focus{box-shadow:", ";outline:none;}"], ({
  fullHeight
}) => fullHeight && "100%", getPadding(), ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  theme,
  error
}) => `${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput}`, ({
  disabled,
  theme
}) => disabled ? theme.orbit.backgroundInputDisabled : theme.orbit.backgroundInput, ({
  disabled,
  theme
}) => disabled ? theme.orbit.colorTextInputDisabled : theme.orbit.colorTextInput, getFontSize(), ({
  theme
}) => theme.orbit.lineHeightText, ({
  disabled
}) => disabled ? "not-allowed" : "text", ({
  theme
}) => theme.orbit.fontFamily, ({
  resize
}) => resize, ({
  theme
}) => theme.orbit.durationFast, ({
  fullHeight
}) => fullHeight && "1", ({
  theme
}) => theme.orbit.colorPlaceholderInput, ({
  disabled,
  theme,
  error
}) => !disabled && `inset 0 0 0 ${theme.orbit.borderWidthInput} ${error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover}`, ({
  theme,
  disabled
}) => !disabled && `inset 0 0 0 2px ${theme.orbit.borderColorInputFocus}`);
StyledTextArea.defaultProps = {
  theme: defaultTheme
}; // $FlowExpected

const Textarea = React.forwardRef((props, ref) => {
  const {
    size = SIZE_OPTIONS.NORMAL,
    disabled,
    resize = RESIZE_OPTIONS.VERTICAL,
    dataTest,
    spaceAfter
  } = props;
  return React.createElement(Field, {
    fullHeight: props.fullHeight,
    spaceAfter: spaceAfter
  }, props.label && React.createElement(FormLabel, {
    filled: !!props.value,
    disabled: disabled
  }, props.label), React.createElement(StyledTextArea, {
    "data-test": dataTest,
    name: props.name,
    value: props.value,
    rows: props.rows,
    size: size,
    fullHeight: props.fullHeight,
    disabled: disabled,
    error: props.error,
    placeholder: props.placeholder,
    maxLength: props.maxLength,
    onChange: props.onChange,
    onFocus: props.onFocus,
    onBlur: props.onBlur,
    resize: resize,
    tabIndex: props.tabIndex,
    ref: ref
  }), props.help && !props.error && React.createElement(FormFeedback, {
    type: "help"
  }, props.help), props.error && React.createElement(FormFeedback, {
    type: "error"
  }, props.error));
});
Textarea.displayName = "Textarea";
export default Textarea;