feat(Popup): Multiple event triggering a Popup (#1977)

* fix(Popup): change position(right/left) for small width components

The position of the Popup on elements with smaller width(<25px) not aligned.

* Review changes updated

* feat(Popup): Multiple event triggering a Popup

Popup triggering by multiple events(hover, focus or click)

* test case for proptypes

* Requested changes updated

* Proptypes validation for Popup

* Review changes updated

* Test case for multiple event trigger Popup

* Rectifying indentation

docs/app/Examples/modules/Popup/Usage/PopupExampleMultiple.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Button, Popup } from 'semantic-ui-react'
+
+const PopupExampleMultiple = () => (
+  <Popup
+    trigger={<Button icon>Click me or Hover me</Button>}
+    header='Movie Search'
+    content='Multiple events can trigger a popup'
+    on={['hover', 'click']}
+  />
+)
+
+export default PopupExampleMultiple

docs/app/Examples/modules/Popup/Usage/index.js

@@ -24,6 +24,11 @@ const PopupUsageExamples = () => (
       description='A popup can be nested inside another.'
       examplePath='modules/Popup/Usage/PopupExampleNested'
     />
+    <ComponentExample
+      title='Multiple'
+      description='A popup can be triggered on multiple events.'
+      examplePath='modules/Popup/Usage/PopupExampleMultiple'
+    />
     <ComponentExample
       title='Controlled'
       description='A popup can have its visibility controlled from outside.'

src/modules/Popup/Popup.d.ts

@@ -38,8 +38,8 @@ export interface PopupProps extends PortalProps {
   /** Horizontal offset in pixels to be applied to the popup. */
   offset?: number;
 
-  /** Event triggering the popup. */
-  on?: 'hover' | 'click' | 'focus';
+  /** Events triggering the popup. */
+  on?: 'hover' | 'click' | 'focus' | Array<'hover' | 'click' | 'focus'>;
 
   /**
    * Called when a close event happens.

src/modules/Popup/Popup.js

@@ -71,8 +71,11 @@ export default class Popup extends Component {
     /** Horizontal offset in pixels to be applied to the Popup. */
     offset: PropTypes.number,
 
-    /** Event triggering the popup. */
-    on: PropTypes.oneOf(['hover', 'click', 'focus']),
+    /** Events triggering the popup. */
+    on: PropTypes.oneOfType([
+      PropTypes.oneOf(['hover', 'click', 'focus']),
+      PropTypes.arrayOf(PropTypes.oneOf(['hover', 'click', 'focus'])),
+    ]),
 
     /**
      * Called when a close event happens.
@@ -245,20 +248,22 @@ export default class Popup extends Component {
     const portalProps = {}
 
     const { on, hoverable } = this.props
+    const normalizedOn = _.isArray(on) ? on : [on]
 
     if (hoverable) {
       portalProps.closeOnPortalMouseLeave = true
       portalProps.mouseLeaveDelay = 300
     }
-
-    if (on === 'click') {
+    if (_.includes(normalizedOn, 'click')) {
       portalProps.openOnTriggerClick = true
       portalProps.closeOnTriggerClick = true
       portalProps.closeOnDocumentClick = true
-    } else if (on === 'focus') {
+    }
+    if (_.includes(normalizedOn, 'focus')) {
       portalProps.openOnTriggerFocus = true
       portalProps.closeOnTriggerBlur = true
-    } else if (on === 'hover') {
+    }
+    if (_.includes(normalizedOn, 'hover')) {
       portalProps.openOnTriggerMouseEnter = true
       portalProps.closeOnTriggerMouseLeave = true
       // Taken from SUI: https://git.io/vPmCm

test/specs/modules/Popup/Popup-test.js

@@ -200,6 +200,23 @@ describe('Popup', () => {
       wrapper.find('input').simulate('focus')
       assertInBody('.ui.popup.visible')
     })
+
+    it('it appears on multiple', (done) => {
+      const trigger = <button>foo</button>
+      const button = wrapperMount(<Popup on={['click', 'hover']} content='foo' header='bar' trigger={trigger} />)
+      .find('button')
+
+      button.simulate('click')
+      assertInBody('.ui.popup.visible')
+
+      domEvent.click('body')
+
+      button.simulate('mouseenter')
+      setTimeout(() => {
+        assertInBody('.ui.popup.visible')
+        done()
+      }, 51)
+    })
   })
 
   describe('open', () => {