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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _ErrorFormTooltip = _interopRequireDefault(require("../ErrorFormTooltip"));

var _FormLabel = _interopRequireDefault(require("../FormLabel"));

var _consts = require("./consts");

var _rtl = require("../utils/rtl");

var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));

var _useErrorTooltip = _interopRequireDefault(require("../ErrorFormTooltip/hooks/useErrorTooltip"));

var _formElementFocus = _interopRequireDefault(require("../InputField/helpers/formElementFocus"));

var _getFieldDataState = _interopRequireDefault(require("../common/getFieldDataState"));

var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));

const Field = _styledComponents.default.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.default); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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-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, _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); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledTextArea.defaultProps = {
  theme: _defaultTheme.default
};
const Textarea = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    size = _consts.SIZE_OPTIONS.NORMAL,
    disabled,
    resize = _consts.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
  } = (0, _useErrorTooltip.default)({
    onFocus
  });
  const shown = tooltipShown || tooltipShownHover;
  return /*#__PURE__*/React.createElement(Field, {
    fullHeight: fullHeight,
    spaceAfter: spaceAfter,
    ref: labelRef
  }, label && /*#__PURE__*/React.createElement(_FormLabel.default, {
    filled: !!value,
    error: !!error,
    help: !!help,
    disabled: disabled,
    iconRef: iconRef,
    onMouseEnter: () => setTooltipShownHover(true),
    onMouseLeave: () => setTooltipShownHover(false)
  }, label), /*#__PURE__*/React.createElement(StyledTextArea, {
    "data-state": (0, _getFieldDataState.default)(!!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.default, {
    help: help,
    inputSize: size,
    helpClosable: helpClosable,
    error: error,
    onShown: setTooltipShown,
    shown: shown,
    referenceElement: labelRef
  }));
});
Textarea.displayName = "Textarea";
var _default = Textarea;
exports.default = _default;