@helpscout/hsds-react/components/Input/Input.BackdropV2.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.InputBackdropV2 = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Input = require("./Input.utils");

var _InputBackdropV = require("./Input.BackdropV2.css");

var _jsxRuntime = require("react/jsx-runtime");

var InputBackdropV2 = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(InputBackdropV2, _React$PureComponent);

  function InputBackdropV2() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;

    _this.getFocusMarkup = function () {
      return _this.shouldShowFocus() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBackdropV.FocusUI, {
        className: _this.getFocusClassNames()
      });
    };

    return _this;
  }

  var _proto = InputBackdropV2.prototype;

  _proto.getClassName = function getClassName() {
    var _this$props = this.props,
        choiceKind = _this$props.choiceKind,
        className = _this$props.className,
        disabled = _this$props.disabled,
        isFilled = _this$props.isFilled,
        isFirst = _this$props.isFirst,
        isNotOnly = _this$props.isNotOnly,
        isLast = _this$props.isLast,
        isSeamless = _this$props.isSeamless,
        kind = _this$props.kind,
        readOnly = _this$props.readOnly,
        state = _this$props.state;
    return (0, _classnames.default)(InputBackdropV2.className, choiceKind && "is-" + choiceKind, disabled && 'is-disabled', isFilled && 'is-filled', this.shouldShowFocus() && 'is-focused', isFirst && 'is-first', isNotOnly && 'is-notOnly', isLast && 'is-last', isSeamless && 'is-seamless', kind && "is-" + kind, readOnly && 'is-readonly', state && "is-" + state, className);
  };

  _proto.getFocusClassNames = function getFocusClassNames() {
    var _this$props2 = this.props,
        choiceKind = _this$props2.choiceKind,
        isFirst = _this$props2.isFirst,
        isNotOnly = _this$props2.isNotOnly,
        isLast = _this$props2.isLast,
        state = _this$props2.state;
    var isRadio = choiceKind === 'radio';
    return (0, _classnames.default)(InputBackdropV2.focusClassName, isFirst && 'is-first', isNotOnly && 'is-notOnly', isLast && 'is-last', // It's being tested, Istanbul not picking it up
    isRadio && 'is-radio', (0, _Input.isStateful)(this.props) && 'is-stateful', state && "is-" + state);
  };

  _proto.shouldShowFocus = function shouldShowFocus() {
    var _this$props3 = this.props,
        isSeamless = _this$props3.isSeamless,
        isFocused = _this$props3.isFocused,
        showFocus = _this$props3.showFocus;
    return !isSeamless && isFocused && showFocus;
  };

  _proto.render = function render() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBackdropV.BackdropUI, (0, _extends2.default)({}, (0, _getValidProps.default)(this.props), {
      className: this.getClassName(),
      role: "presentation",
      children: this.getFocusMarkup()
    }));
  };

  return InputBackdropV2;
}(_react.default.PureComponent);

exports.InputBackdropV2 = InputBackdropV2;
InputBackdropV2.className = 'c-InputBackdropV2';
InputBackdropV2.focusClassName = 'c-InputBackdropV2__focus';
InputBackdropV2.defaultProps = {
  'data-cy': 'InputBackdropV2',
  disabled: false,
  isFilled: false,
  isFocused: false,
  readOnly: false,
  seamless: false,
  showFocus: true,
  state: 'default'
};
InputBackdropV2.propTypes = {
  className: _propTypes.default.string,
  choiceKind: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,
  disabled: _propTypes.default.bool,
  isFilled: _propTypes.default.bool,
  isFocused: _propTypes.default.bool,
  isFirst: _propTypes.default.bool,
  isNotOnly: _propTypes.default.bool,
  isLast: _propTypes.default.bool,
  isSeamless: _propTypes.default.bool,
  kind: _propTypes.default.string,
  readOnly: _propTypes.default.bool,
  showFocus: _propTypes.default.bool,
  state: _propTypes.default.string
};
var _default = InputBackdropV2;
exports.default = _default;