Initial commit

client/src/lib/popup/Popup.module.css

@@ -0,0 +1,22 @@
+.closeButton {
+  background: transparent !important;
+  box-shadow: none !important;
+  margin: 0 !important;
+  padding: 10px 12px 10px 8px !important;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 40px;
+  z-index: 2000;
+}
+
+.wrapper {
+  border-radius: 3px !important;
+  border-width: 0 !important;
+  box-shadow: 0 8px 16px -4px rgba(9, 45, 66, 0.25),
+    0 0 0 1px rgba(9, 45, 66, 0.08) !important;
+  margin-top: 6px !important;
+  overflow: hidden;
+  padding: 0 12px 12px !important;
+  width: 304px;
+}

client/src/lib/popup/close-popup.js

@@ -0,0 +1,3 @@
+export default () => {
+  document.dispatchEvent(new MouseEvent('click')); // FIXME: hack
+};

client/src/lib/popup/index.js

@@ -0,0 +1,4 @@
+import withPopup from './with-popup';
+import closePopup from './close-popup';
+
+export { withPopup, closePopup };

client/src/lib/popup/with-popup.jsx

@@ -0,0 +1,70 @@
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
+
+import styles from './Popup.module.css';
+
+export default (WrappedComponent) => {
+  const Popup = React.memo(({ children, ...props }) => {
+    const [isOpened, setIsOpened] = useState(false);
+
+    const handleOpen = useCallback(() => {
+      setIsOpened(true);
+    }, []);
+
+    const handleClose = useCallback(() => {
+      setIsOpened(false);
+    }, []);
+
+    const handleMouseDown = useCallback((event) => {
+      event.stopPropagation();
+    }, []);
+
+    const handleClick = useCallback((event) => {
+      event.stopPropagation();
+    }, []);
+
+    const handleTriggerClick = useCallback(
+      (event) => {
+        event.stopPropagation();
+
+        const { onClick } = children;
+
+        if (onClick) {
+          onClick(event);
+        }
+      },
+      [children],
+    );
+
+    const tigger = React.cloneElement(children, {
+      onClick: handleTriggerClick,
+    });
+
+    return (
+      <SemanticUIPopup
+        basic
+        wide
+        trigger={tigger}
+        on="click"
+        open={isOpened}
+        position="bottom left"
+        className={styles.wrapper}
+        onOpen={handleOpen}
+        onClose={handleClose}
+        onMouseDown={handleMouseDown}
+        onClick={handleClick}
+      >
+        <Button icon="close" onClick={handleClose} className={styles.closeButton} />
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <WrappedComponent {...props} onClose={handleClose} />
+      </SemanticUIPopup>
+    );
+  });
+
+  Popup.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  return Popup;
+};