@kiwicom/orbit-components/es/deprecated/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, { css } 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";
import formElementFocus from "../InputField/helpers/formElementFocus";
import mq from "../../utils/mediaQuery";
const Field = styled.label.withConfig({
  displayName: "Textarea__Field",
  componentId: "sc-1q0mmi8-0"
})(["font-family:", ";display:flex;width:100%;position:relative;height:", ";flex-direction:column;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 getLineHeight = ({
  theme,
  size
}) => {
  const tokens = {
    [SIZE_OPTIONS.SMALL]: theme.orbit.lineHeightTextSmall,
    [SIZE_OPTIONS.NORMAL]: theme.orbit.lineHeightTextNormal
  };
  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-1q0mmi8-1"
})(["appearance:none;box-sizing:border-box;display:block;width:100%;height:", ";padding:", ";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;border-radius:6px;", ";flex:", ";&::placeholder{color:", ";}&:hover{box-shadow:", ";}&:focus{", " outline:none;}"], ({
  fullHeight
}) => fullHeight && "100%", ({
  theme,
  size
}) => getPadding({
  theme,
  size
}), ({
  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, ({
  theme,
  size
}) => getFontSize({
  theme,
  size
}), ({
  theme,
  size
}) => getLineHeight({
  theme,
  size
}), ({
  disabled
}) => disabled ? "not-allowed" : "text", ({
  theme
}) => theme.orbit.fontFamily, ({
  resize
}) => resize, ({
  theme
}) => theme.orbit.durationFast, mq.tablet(css(["border-radius:", ";"], ({
  theme
}) => theme.orbit.borderRadiusNormal)), ({
  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}`, formElementFocus);
StyledTextArea.defaultProps = {
  theme: defaultTheme
};
const Textarea = /*#__PURE__*/React.forwardRef(({
  size = SIZE_OPTIONS.NORMAL,
  disabled,
  resize = RESIZE_OPTIONS.VERTICAL,
  dataTest,
  spaceAfter,
  fullHeight,
  label,
  value,
  name,
  rows,
  readOnly,
  tabIndex,
  error,
  help,
  placeholder,
  maxLength,
  onChange,
  onFocus,
  onBlur,
  required
}, ref) => {
  return /*#__PURE__*/React.createElement(Field, {
    fullHeight: fullHeight,
    spaceAfter: spaceAfter
  }, label && /*#__PURE__*/React.createElement(FormLabel, {
    filled: Boolean(value),
    disabled: disabled
  }, label), /*#__PURE__*/React.createElement(StyledTextArea, {
    "data-test": dataTest,
    name: name,
    value: value,
    rows: rows,
    size: size,
    fullHeight: fullHeight,
    disabled: disabled,
    error: !!error
    // @ts-expect-error conflict between types
    ,
    placeholder: placeholder,
    maxLength: maxLength,
    onChange: onChange,
    onFocus: onFocus,
    onBlur: onBlur,
    resize: resize,
    readOnly: readOnly,
    tabIndex: tabIndex ? Number(tabIndex) : undefined,
    required: required,
    ref: ref
  }), /*#__PURE__*/React.createElement(FormFeedback, {
    error: error,
    help: help
  }));
});
Textarea.displayName = "Textarea";
export default Textarea;