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

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import * as React from "react";
import styled from "styled-components";

import defaultTokens from "../defaultTokens";
import FormFeedback from "../FormFeedback";
import FormLabel from "../FormLabel";
import { SIZE_OPTIONS, RESIZE_OPTIONS, TOKENS } from "./consts";

const Field = styled.label.withConfig({
  displayName: "Textarea__Field"
})(["font-family:", ";display:flex;width:100%;flex-direction:column;position:relative;"], ({ theme }) => theme.orbit.fontFamily);

Field.defaultProps = {
  theme: defaultTokens
};

const getTokens = name => ({ theme, size }) => {
  const tokens = {
    [TOKENS.fontSizeInput]: {
      [SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeInputSmall,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeInputNormal
    },
    [TOKENS.paddingInput]: {
      [SIZE_OPTIONS.SMALL]: theme.orbit.paddingTextareaSmall,
      [SIZE_OPTIONS.NORMAL]: theme.orbit.paddingTextareaNormal
    }
  };

  return tokens[name][size];
};

const StyledTextArea = styled((_ref) => {
  let { theme, size, error, help } = _ref,
      props = _objectWithoutProperties(_ref, ["theme", "size", "error", "help"]);

  return React.createElement("textarea", props);
}).withConfig({
  displayName: "Textarea__StyledTextArea"
})(["appearance:none;box-sizing:border-box;display:block;width:100%;padding:", ";border-radius:", ";border:0;box-shadow:inset 0 0 0 ", ";background-color:", ";color:", ";font-size:", ";line-height:", ";cursor:", ";font-family:inherit;resize:", ";transition:box-shadow ", " ease-in-out;&::placeholder{color:", ";}&:hover{box-shadow:", ";}&:focus{box-shadow:", ";outline:none;}"], getTokens(TOKENS.paddingInput), ({ 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, getTokens(TOKENS.fontSizeInput), ({ theme }) => theme.orbit.lineHeightText, ({ disabled }) => disabled ? "not-allowed" : "text", ({ resize }) => resize, ({ theme }) => theme.orbit.durationFast, ({ 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: defaultTokens
};

const Textarea = props => {
  const {
    size = SIZE_OPTIONS.NORMAL,
    disabled,
    resize = RESIZE_OPTIONS.VERTICAL,
    dataTest
  } = props;

  return React.createElement(
    Field,
    { "data-test": dataTest },
    props.label && React.createElement(
      FormLabel,
      { filled: !!props.value, disabled: disabled },
      props.label
    ),
    React.createElement(StyledTextArea, {
      name: props.name,
      value: props.value,
      size: size,
      disabled: disabled,
      error: props.error,
      placeholder: props.placeholder,
      maxLength: props.maxLength,
      onChange: props.onChange,
      onFocus: props.onFocus,
      onBlur: props.onBlur,
      resize: resize
    }),
    props.help && !props.error && React.createElement(
      FormFeedback,
      { type: "help" },
      props.help
    ),
    props.error && React.createElement(
      FormFeedback,
      { type: "error" },
      props.error
    )
  );
};

export default Textarea;