change(popup): added most important popup properties from Semantic ui…

… implementation

src/ui/Popup/Popup.jsx

@@ -1,6 +1,23 @@
+/* Simplified popup with several options found in the semantic ui implementation
+ * https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Popup/Popup.js
+ *  */
 import React from 'react';
 import { createPopper } from '@popperjs/core';
 import EventStack from '@semantic-ui-react/event-stack';
+import cx from 'classnames';
+
+export const positionsMapping = {
+  'top center': 'top',
+  'top left': 'top-start',
+  'top right': 'top-end',
+
+  'bottom center': 'bottom',
+  'bottom left': 'bottom-start',
+  'bottom right': 'bottom-end',
+
+  'right center': 'right',
+  'left center': 'left',
+};
 
 class Popup extends React.Component {
   constructor(props) {
@@ -19,16 +36,16 @@ class Popup extends React.Component {
 
   componentDidMount() {
     this.popper = createPopper(this.triggerRef.current, this.popupRef.current, {
-      placement: this.props.position || 'bottom-end',
+      placement: positionsMapping[this.props.position] || 'bottom-end',
       strategy: this.props.positionFixed || 'absolute',
       modifiers: [
         {
           name: 'offset',
           options: {
-            offset: this.props.offset || [0, 0],
+            offset: this.props.offset,
           },
         },
-        ...(this.props.popperModifiers || []),
+        ...this.props.popperModifiers,
       ],
     });
   }
@@ -60,11 +77,14 @@ class Popup extends React.Component {
   }
 
   render() {
+    const { trigger, className, size, position, content } = this.props;
+    const event = this.props.on;
+    const onEvent = 'on' + event.charAt(0).toUpperCase() + event.slice(1);
     return (
       <React.Fragment>
-        {this.props.trigger &&
-          React.cloneElement(this.props.trigger, {
-            onClick: this.togglePopup,
+        {trigger &&
+          React.cloneElement(trigger, {
+            [onEvent]: this.togglePopup,
             ref: this.triggerRef,
           })}
 
@@ -74,11 +94,15 @@ class Popup extends React.Component {
           )}
           <React.Fragment>
             <div
-              className={`ui bottom center small popup transition ${
-                this.props.className ? this.props.className : ''
-              } ${this.state.isOpen ? 'visible' : ''}`}
+              className={cx(
+                'ui popup transition',
+                className,
+                size,
+                position,
+                this.state.isOpen ? 'visible' : '',
+              )}
             >
-              {this.props.content}
+              {content}
             </div>
           </React.Fragment>
         </div>
@@ -87,4 +111,24 @@ class Popup extends React.Component {
   }
 }
 
+Popup.defaultProps = {
+  position: 'bottom center',
+  basic: false,
+  size: 'small',
+  offset: [0, 0],
+  positionFixed: false,
+  className: '',
+  wide: false,
+  on: 'click',
+  popperModifiers: [],
+  // disabled,
+  // flowing,
+  // header,
+  // inverted,
+  // pinned,
+  // popper,
+  // popperDependencies,
+  // style,
+};
+
 export default Popup;