@helpscout/hsds-react/components/Dropdown/Dropdown.Card.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.DropdownCard = void 0;

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

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

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

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

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

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

var _EventListener = _interopRequireDefault(require("../EventListener"));

var _wedux = require("@helpscout/wedux");

var _Dropdown = require("./Dropdown.css");

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

var _lodash = _interopRequireDefault(require("lodash.isnil"));

var _lodash2 = _interopRequireDefault(require("lodash.isnumber"));

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

// Deprecated

/* istanbul ignore file */
function noop() {}

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

  function DropdownCard() {
    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.state = {
      width: _this.props.width
    };

    _this.updateWidth = function () {
      _this.setState({
        width: _this.getWidthValue()
      });
    };

    return _this;
  }

  var _proto = DropdownCard.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.updateWidth();
  };

  _proto.getWidthValue = function getWidthValue() {
    var _this$props = this.props,
        triggerNode = _this$props.triggerNode,
        width = _this$props.width;
    if ((0, _lodash.default)(width)) return null;
    if ((0, _lodash2.default)(width)) return width;
    if (!width.includes('%') || !triggerNode) return width;
    return triggerNode.clientWidth * (parseInt(width, 10) / 100);
  };

  _proto.getStyles = function getStyles() {
    var _this$props2 = this.props,
        borderColor = _this$props2.borderColor,
        minWidth = _this$props2.minWidth,
        minHeight = _this$props2.minHeight,
        maxHeight = _this$props2.maxHeight,
        maxWidth = _this$props2.maxWidth,
        style = _this$props2.style;
    return (0, _extends2.default)({}, style, {
      borderColor: borderColor,
      minWidth: minWidth,
      minHeight: minHeight,
      maxHeight: maxHeight,
      maxWidth: maxWidth,
      width: this.state.width
    });
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        className = _this$props3.className,
        children = _this$props3.children,
        cardRef = _this$props3.cardRef,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["className", "children", "cardRef"]);
    var componentClassName = (0, _classnames.default)(DropdownCard.className, className);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.CardUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      ref: cardRef,
      style: this.getStyles(),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EventListener.default, {
        event: "resize",
        handler: this.updateWidth
      }), children]
    }));
  };

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

exports.DropdownCard = DropdownCard;
DropdownCard.className = 'c-DropdownCard';
DropdownCard.defaultProps = {
  cardRef: noop,
  'data-cy': 'DropdownCard',
  style: {}
};
DropdownCard.propTypes = {
  borderColor: _propTypes.PropTypes.string,
  className: _propTypes.PropTypes.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.PropTypes.string,
  innerRef: _propTypes.PropTypes.func,
  minWidth: _propTypes.PropTypes.oneOfType([_propTypes.PropTypes.string, _propTypes.PropTypes.number]),
  minHeight: _propTypes.PropTypes.oneOfType([_propTypes.PropTypes.string, _propTypes.PropTypes.number]),
  maxHeight: _propTypes.PropTypes.oneOfType([_propTypes.PropTypes.string, _propTypes.PropTypes.number]),
  maxWidth: _propTypes.PropTypes.oneOfType([_propTypes.PropTypes.string, _propTypes.PropTypes.number]),
  width: _propTypes.PropTypes.any,
  triggerNode: _propTypes.PropTypes.any,
  style: _propTypes.PropTypes.any
};
var ConnectedCard = (0, _wedux.connect)( // mapStateToProps
function (state) {
  var cardBorderColor = state.cardBorderColor,
      maxHeight = state.maxHeight,
      maxWidth = state.maxWidth,
      minHeight = state.minHeight,
      minWidth = state.minWidth,
      triggerNode = state.triggerNode,
      width = state.width;
  return {
    borderColor: cardBorderColor,
    maxHeight: maxHeight,
    maxWidth: maxWidth,
    minHeight: minHeight,
    minWidth: minWidth,
    triggerNode: triggerNode,
    width: width
  };
})(DropdownCard);
var _default = ConnectedCard;
exports.default = _default;