apps.websight-package-manager.web-resources.components.InfoIconPopup.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of websight-package-manager-view Show documentation

Package Manager View module is responsible for view part of Package Manager.

The newest version!

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from "/apps/websight-atlaskit-esm/web-resources/react.js";
import Popup from "/apps/websight-atlaskit-esm/web-resources/@atlaskit/popup.js";
import styled from "/apps/websight-atlaskit-esm/web-resources/styled-components.js";
import { colors } from "/apps/websight-admin/web-resources/theme.js";
const PopupContainer = styled.div`
    display: inline-block;

    & > div {
        display: inline-block;
    }
`;
const ContentContainer = styled.div`
    max-width: 500px;
    max-height: 300px;
    margin: 10px;
`;
const InfoIcon = styled.i`
    font-size: 21px;
    margin-left: 5px;
    color: ${colors.grey};
    cursor: pointer;
    vertical-align: bottom;
`;
export default class InfoIconPopup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
  }

  render() {
    const {
      content,
      icon,
      iconStyle,
      onClick
    } = this.props;
    const {
      isOpen
    } = this.state;
    return /*#__PURE__*/React.createElement(PopupContainer, null, /*#__PURE__*/React.createElement(Popup, {
      isOpen: isOpen,
      onClose: () => this.setState({
        isOpen: false
      }),
      placement: "bottom-start",
      content: () => /*#__PURE__*/React.createElement(ContentContainer, null, content),
      trigger: triggerProps => /*#__PURE__*/React.createElement("div", _extends({}, triggerProps, {
        style: {
          display: 'inline'
        }
      }), /*#__PURE__*/React.createElement(InfoIcon, {
        className: "material-icons",
        style: iconStyle,
        onClick: () => {
          onClick();
          this.setState(prevState => ({
            isOpen: !prevState.isOpen
          }));
        }
      }, icon))
    }));
  }

}