@krowdy-ui/views/SelectInfo/SelectInfo.js

React components that implement Google's Material Design.

"use strict";

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

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

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

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

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

var _clsx = _interopRequireDefault(require("clsx"));

var _core = require("@krowdy-ui/core");

var _icons = require("@material-ui/icons");

var _views = require("@krowdy-ui/views");

var styles = function styles() {
  return {
    color: function color(_ref) {
      var iconColor = _ref.iconColor;
      return {
        backgroundColor: iconColor || 'transparent'
      };
    },
    container: {
      position: 'relative'
    },
    popper: {
      zIndex: 1200
    },
    primary: {},
    secondary: {}
  };
};

var _ref3 = /*#__PURE__*/_react["default"].createElement(_icons.ArrowDropDown, null);

var SelectInfo = function SelectInfo(_ref2) {
  var children = _ref2.children,
      title = _ref2.title,
      subtitle = _ref2.subtitle,
      icon = _ref2.icon,
      src = _ref2.src,
      _ref2$rightIcon = _ref2.rightIcon,
      rightIcon = _ref2$rightIcon === void 0 ? _ref3 : _ref2$rightIcon,
      width = _ref2.width,
      disabled = _ref2.disabled,
      _ref2$variant = _ref2.variant,
      variant = _ref2$variant === void 0 ? 'outlined' : _ref2$variant,
      classes = _ref2.classes,
      secondaryTypographyProps = _ref2.secondaryTypographyProps,
      primaryTypographyProps = _ref2.primaryTypographyProps,
      rightIconHover = _ref2.rightIconHover,
      clickAndClose = _ref2.clickAndClose;

  var _React$useState = _react["default"].useState(null),
      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
      anchorEl = _React$useState2[0],
      setAnchorEl = _React$useState2[1];

  var _handleClick = function _handleClick() {
    return function (event) {
      setAnchorEl(anchorEl ? null : event.currentTarget);
    };
  };

  var _handleClose = function _handleClose() {
    setAnchorEl(null);
  };

  var open = Boolean(anchorEl);
  var id = open ? 'simple-popover' : undefined;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.container
  }, /*#__PURE__*/_react["default"].createElement(_views.ListInfoItem, {
    classes: {
      avatar: (0, _clsx["default"])(src && classes.color),
      primary: classes.primary,
      secondary: classes.secondary
    },
    disabled: disabled,
    icon: icon,
    onChange: _handleClick,
    primaryTypographyProps: primaryTypographyProps,
    rightIcon: rightIcon,
    rightIconHover: rightIconHover,
    secondaryTypographyProps: secondaryTypographyProps,
    src: src,
    subtitle: subtitle,
    title: title,
    variant: variant,
    width: width
  }), children ? /*#__PURE__*/_react["default"].createElement(_core.Popover, {
    anchorEl: anchorEl,
    anchorOrigin: {
      horizontal: 'center',
      vertical: 'center'
    },
    disablePortal: true,
    id: id,
    keepMounted: false,
    onClick: clickAndClose ? _handleClose : undefined,
    onClose: _handleClose,
    open: open,
    transformOrigin: {
      horizontal: 'center',
      vertical: 'center'
    }
  }, children) : null);
};

process.env.NODE_ENV !== "production" ? SelectInfo.propTypes = {
  disabled: _propTypes["default"].bool,
  icon: _propTypes["default"].element,
  rightIcon: _propTypes["default"].element,
  src: _propTypes["default"].string,
  subtitle: _propTypes["default"].string,
  title: _propTypes["default"].string,
  width: _propTypes["default"].number
} : void 0;

var _default = (0, _core.withStyles)(styles, {
  name: 'SelectInfo'
})(SelectInfo);

exports["default"] = _default;