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

React components that implement Google's Material Design.

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';

const styles = () => ({
  color: ({
    iconColor
  }) => ({
    backgroundColor: iconColor || 'transparent'
  }),
  container: {
    position: 'relative'
  },
  popper: {
    zIndex: 1200
  },
  primary: {},
  secondary: {}
});

var _ref = /*#__PURE__*/React.createElement(ArrowDropDownIcon, null);

const SelectInfo = ({
  children,
  title,
  subtitle,
  icon,
  src,
  rightIcon = _ref,
  width,
  disabled,
  variant = 'outlined',
  classes,
  secondaryTypographyProps,
  primaryTypographyProps,
  rightIconHover,
  clickAndClose
}) => {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const _handleClick = () => event => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const _handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const 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);