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

React components that implement Google's Material Design.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { Popover, withStyles } from '@krowdy-ui/core';
import { ArrowDropDown as ArrowDropDownIcon } from '@material-ui/icons';
import { ListInfoItem } from '@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.createElement(ArrowDropDownIcon, 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.useState(null),
      _React$useState2 = _slicedToArray(_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.createElement("div", {
    className: classes.container
  }, /*#__PURE__*/React.createElement(ListInfoItem, {
    classes: {
      avatar: clsx(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.createElement(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.bool,
  icon: PropTypes.element,
  rightIcon: PropTypes.element,
  src: PropTypes.string,
  subtitle: PropTypes.string,
  title: PropTypes.string,
  width: PropTypes.number
} : void 0;
export default withStyles(styles, {
  name: 'SelectInfo'
})(SelectInfo);