@geezee/react-ui/esm/popover/popover.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
import Tooltip, { defaultProps as tooltipDefaultProps } from '../tooltip/tooltip';
import PopoverItem from '../popover/popover-item';
import { getReactNode } from '../utils/collections';
export var defaultProps = Object.assign({}, tooltipDefaultProps, {
  notSeperateTitle: false,
  trigger: 'click',
  placement: 'bottom',
  color: 'lite'
});

var PopoverText = function PopoverText(_ref) {
  var title = _ref.title,
      titleNode = _ref.titleNode,
      line = _ref.line,
      text = _ref.text;
  var theme = useTheme();
  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["150162698", [theme.palette.cNeutral7]]]) + " " + "inner"
  }, title && /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["150162698", [theme.palette.cNeutral7]]]) + " " + "title"
  }, /*#__PURE__*/React.createElement(PopoverItem, {
    title: true,
    line: line
  }, titleNode)), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["150162698", [theme.palette.cNeutral7]]]) + " " + "items"
  }, text), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "150162698",
    dynamic: [theme.palette.cNeutral7]
  }, ".inner.__jsx-style-dynamic-selector{padding:0;text-align:left;min-width:17.1429rem;max-width:34.2857rem;}.inner.__jsx-style-dynamic-selector .items.__jsx-style-dynamic-selector{max-height:17.1429rem;overflow:auto;}.inner.__jsx-style-dynamic-selector .title.__jsx-style-dynamic-selector .item.title.__jsx-style-dynamic-selector{line-height:1.1429rem;font-weight:500;font-size:1rem;color:".concat(theme.palette.cNeutral7, ";}")));
};

var Popover = function Popover(_ref2) {
  var title = _ref2.title,
      notSeperateTitle = _ref2.notSeperateTitle,
      content = _ref2.content,
      children = _ref2.children,
      className = _ref2.className,
      props = _objectWithoutProperties(_ref2, ["title", "notSeperateTitle", "content", "children", "className"]);

  var theme = useTheme();
  var titleNode = title && useMemo(function () {
    return getReactNode(title);
  }, [title]);
  var textNode = useMemo(function () {
    return getReactNode(content);
  }, [content]);
  return /*#__PURE__*/React.createElement(Tooltip, _extends({
    className: "popover ".concat(className)
  }, _extends(_extends({}, props), {}, {
    text: /*#__PURE__*/React.createElement(PopoverText, {
      title: title,
      titleNode: titleNode,
      line: !notSeperateTitle,
      text: textNode
    })
  })), children, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2072241419",
    dynamic: [theme.expressiveness.D2]
  }, ".tooltip-content.popover.__jsx-style-dynamic-selector{-webkit-filter:drop-shadow(".concat(theme.expressiveness.D2, ");filter:drop-shadow(").concat(theme.expressiveness.D2, ");}")));
};

Popover.defaultProps = defaultProps;
var PopoverComponent = Popover;
PopoverComponent.Item = PopoverItem;
PopoverComponent.Option = PopoverItem;
export default PopoverComponent;