feat(Popup): Multiple event triggering a Popup

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

@@ -5,7 +5,7 @@ const PopupExampleClick = () => (
   <Popup
     trigger={<Button color='red' icon='flask' content='Activate doomsday device' />}
     content={<Button color='green' content='Confirm the launch' />}
-    on='click'
+    on={['click']}
     position='top right'
   />
 )

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

@@ -26,7 +26,7 @@ class PopupExampleControlled extends React.Component {
           <Popup
             trigger={<Button content='Open controlled popup' />}
             content={`This message will self-destruct in ${timeoutLength / 1000} seconds!`}
-            on='click'
+            on={['click']}
             open={this.state.isOpen}
             onClose={this.handleClose}
             onOpen={this.handleOpen}

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

@@ -6,7 +6,7 @@ const PopupExampleFocus = () => (
     trigger={<Input icon='search' placeholder='Search...' />}
     header='Movie Search'
     content='You may search by genre, header, year and actors'
-    on='focus'
+    on={['focus']}
   />
 )
 

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

@@ -5,7 +5,7 @@ const PopupExampleHover = () => (
   <Popup
     trigger={<Button icon='add' content='Add a friend' />}
     content='Sends an email invite to a friend.'
-    on='hover'
+    on={['hover']}
   />
 )
 

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Input, Popup } from 'semantic-ui-react'
+
+const PopupExampleMultiple = () => (
+  <Popup
+    trigger={<Input icon='search' placeholder='Search...' />}
+    header='Movie Search'
+    content='You may search by genre, header, year and actors'
+    on={['focus', 'hover']}
+  />
+)
+
+export default PopupExampleMultiple

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { Button, Grid, Popup } from 'semantic-ui-react'
 
 const PopupExampleNested = () => (
-  <Popup wide trigger={<Button content='Are you the one?' />} on='click'>
+  <Popup wide trigger={<Button content='Are you the one?' />} on={['click']}>
     <Grid divided columns='equal'>
       <Grid.Column>
         <Popup

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.'

docs/app/Examples/modules/Popup/Variations/PopupExampleHideOnScroll.js

@@ -6,7 +6,7 @@ const PopupExampleHideOnScroll = () => (
     <Popup
       trigger={<Button icon>Click me</Button>}
       content='Hide the popup on any scroll event'
-      on='click'
+      on={['click']}
       hideOnScroll
     />
     <Popup

src/modules/Popup/Popup.d.ts

@@ -39,7 +39,7 @@ export interface PopupProps extends PortalProps {
   offset?: number;
 
   /** Event triggering the popup. */
-  on?: 'hover' | 'click' | 'focus';
+  on?: Array<string>;
 
   /**
    * Called when a close event happens.

src/modules/Popup/Popup.js

@@ -72,7 +72,7 @@ export default class Popup extends Component {
     offset: PropTypes.number,
 
     /** Event triggering the popup. */
-    on: PropTypes.oneOf(['hover', 'click', 'focus']),
+    on: PropTypes.arrayOf(PropTypes.oneOf(['hover', 'click', 'focus'])),
 
     /**
      * Called when a close event happens.
@@ -127,7 +127,7 @@ export default class Popup extends Component {
 
   static defaultProps = {
     position: 'top left',
-    on: 'hover',
+    on: ['hover'],
   }
 
   static _meta = {
@@ -250,15 +250,16 @@ export default class Popup extends Component {
       portalProps.closeOnPortalMouseLeave = true
       portalProps.mouseLeaveDelay = 300
     }
-
-    if (on === 'click') {
+    if (_.indexOf(on, 'click') > -1) {
       portalProps.openOnTriggerClick = true
       portalProps.closeOnTriggerClick = true
       portalProps.closeOnDocumentClick = true
-    } else if (on === 'focus') {
+    }
+    if (_.indexOf(on, 'focus') > -1) {
       portalProps.openOnTriggerFocus = true
       portalProps.closeOnTriggerBlur = true
-    } else if (on === 'hover') {
+    }
+    if (_.indexOf(on, 'hover') > -1) {
       portalProps.openOnTriggerMouseEnter = true
       portalProps.closeOnTriggerMouseLeave = true
       // Taken from SUI: https://git.io/vPmCm

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

@@ -115,7 +115,7 @@ describe('Popup', () => {
             content='_'
             position={position}
             trigger={<button>foo</button>}
-            on='click'
+            on={['click']}
           />,
         )
         wrapper.find('button').simulate('click')
@@ -134,7 +134,7 @@ describe('Popup', () => {
             content='_'
             position={position}
             trigger={<button>foo</button>}
-            on='click'
+            on={['click']}
             offset={999}
           />,
         )
@@ -176,7 +176,7 @@ describe('Popup', () => {
   describe('trigger', () => {
     it('it appears on click', () => {
       const trigger = <button>foo</button>
-      wrapperMount(<Popup on='click' content='foo' header='bar' trigger={trigger} />)
+      wrapperMount(<Popup on={['click']} content='foo' header='bar' trigger={trigger} />)
 
       wrapper.find('button').simulate('click')
       assertInBody('.ui.popup.visible')
@@ -195,7 +195,7 @@ describe('Popup', () => {
 
     it('it appears on focus', () => {
       const trigger = <input type='text' />
-      wrapperMount(<Popup on='focus' content='foo' trigger={trigger} />)
+      wrapperMount(<Popup on={['focus']} content='foo' trigger={trigger} />)
 
       wrapper.find('input').simulate('focus')
       assertInBody('.ui.popup.visible')