@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, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
import ErrorFormTooltip from "../ErrorFormTooltip";
import FormLabel from "../FormLabel";
import { SIZE_OPTIONS, RESIZE_OPTIONS } from "./consts";
import { rtlSpacing } from "../utils/rtl";
import getSpacingToken from "../common/getSpacingToken";
import useErrorTooltip from "../ErrorFormTooltip/hooks/useErrorTooltip";
import formElementFocus from "../InputField/helpers/formElementFocus";
import getFieldDataState from "../common/getFieldDataState";
import mq from "../utils/mediaQuery";
const Field = styled.label.withConfig({
  displayName: "Textarea__Field",
  componentId: "sc-sjij2g-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); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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-sjij2g-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:", ";border:1px solid transparent;overflow:auto;&::placeholder{color:", ";}&:hover{box-shadow:", ";}&:focus{", " outline:none;}"], ({
  fullHeight
}) => fullHeight && "100%", getPadding, ({
  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, getLineHeight, ({
  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); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTextArea.defaultProps = {
  theme: defaultTheme
};
const Textarea = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    size = SIZE_OPTIONS.NORMAL,
    disabled,
    resize = RESIZE_OPTIONS.VERTICAL,
    dataTest,
    spaceAfter,
    fullHeight,
    value,
    label,
    name,
    error,
    placeholder,
    helpClosable = true,
    maxLength,
    onChange,
    onFocus,
    onBlur,
    tabIndex,
    help,
    rows,
    readOnly
  } = props;
  const {
    tooltipShown,
    tooltipShownHover,
    setTooltipShown,
    setTooltipShownHover,
    labelRef,
    iconRef,
    handleFocus
  } = useErrorTooltip({
    onFocus
  });
  const shown = tooltipShown || tooltipShownHover;
  return /*#__PURE__*/React.createElement(Field, {
    fullHeight: fullHeight,
    spaceAfter: spaceAfter,
    ref: labelRef
  }, label && /*#__PURE__*/React.createElement(FormLabel, {
    filled: !!value,
    error: !!error,
    help: !!help,
    disabled: disabled,
    iconRef: iconRef,
    onMouseEnter: () => setTooltipShownHover(true),
    onMouseLeave: () => setTooltipShownHover(false)
  }, label), /*#__PURE__*/React.createElement(StyledTextArea, {
    "data-state": getFieldDataState(!!error),
    "data-test": dataTest,
    name: name,
    value: value,
    size: size,
    fullHeight: fullHeight,
    disabled: disabled,
    error: error,
    placeholder: placeholder,
    maxLength: maxLength,
    onChange: onChange,
    rows: rows,
    onFocus: handleFocus,
    onBlur: onBlur,
    resize: resize,
    tabIndex: tabIndex,
    readOnly: readOnly,
    ref: ref
  }), /*#__PURE__*/React.createElement(ErrorFormTooltip, {
    help: help,
    inputSize: size,
    helpClosable: helpClosable,
    error: error,
    onShown: setTooltipShown,
    shown: shown,
    referenceElement: labelRef
  }));
});
Textarea.displayName = "Textarea";
export default Textarea;