@kiwicom/orbit-components/lib/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.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));
var _FormFeedback = _interopRequireDefault(require("../FormFeedback"));
var _FormLabel = _interopRequireDefault(require("../../FormLabel"));
var _consts = require("./consts");
var _rtl = require("../../utils/rtl");
var _getSpacingToken = _interopRequireDefault(require("../../common/getSpacingToken"));
var _formElementFocus = _interopRequireDefault(require("../InputField/helpers/formElementFocus"));
var _mediaQuery = _interopRequireDefault(require("../../utils/mediaQuery"));
const Field = _styledComponents.default.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.default);
Field.defaultProps = {
  theme: _defaultTheme.default
};
const getFontSize = ({
  theme,
  size
}) => {
  const tokens = {
    [_consts.SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeInputSmall,
    [_consts.SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeInputNormal
  };
  return tokens[size];
};
const getLineHeight = ({
  theme,
  size
}) => {
  const tokens = {
    [_consts.SIZE_OPTIONS.SMALL]: theme.orbit.lineHeightTextSmall,
    [_consts.SIZE_OPTIONS.NORMAL]: theme.orbit.lineHeightTextNormal
  };
  return tokens[size];
};
const getPadding = ({
  theme,
  size
}) => {
  const tokens = {
    [_consts.SIZE_OPTIONS.SMALL]: theme.orbit.paddingTextareaSmall,
    [_consts.SIZE_OPTIONS.NORMAL]: theme.orbit.paddingTextareaNormal
  };
  return (0, _rtl.rtlSpacing)(tokens[size]);
};
const StyledTextArea = _styledComponents.default.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, _mediaQuery.default.tablet((0, _styledComponents.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.default);
StyledTextArea.defaultProps = {
  theme: _defaultTheme.default
};
const Textarea = /*#__PURE__*/React.forwardRef(({
  size = _consts.SIZE_OPTIONS.NORMAL,
  disabled,
  resize = _consts.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.default, {
    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.default, {
    error: error,
    help: help
  }));
});
Textarea.displayName = "Textarea";
var _default = Textarea;
exports.default = _default;