feat(Popup): add popperDependencies prop (#3657)

* feat(Popup): add `popperDependencies` prop

* Update src/modules/Popup/Popup.js

Co-Authored-By: Youngrok Kim <rok0810@gmail.com>

* add UTs, fix condition

* simplify implemention

Author: layershifter

docs/src/examples/modules/Popup/Usage/PopupExamplePopperDependencies.js

@@ -0,0 +1,52 @@
+import faker from 'faker'
+import React from 'react'
+import { Button, Header, Placeholder, Popup } from 'semantic-ui-react'
+
+const PopupExamplePopperDependencies = () => {
+  const [data, setData] = React.useState(null)
+  const timer = React.useRef()
+
+  return (
+    <Popup
+      on='click'
+      onClose={() => {
+        setData(null)
+        clearTimeout(timer.current)
+      }}
+      onOpen={() => {
+        setData(null)
+
+        timer.current = setTimeout(() => {
+          setData({
+            description: faker.lorem.sentences(5),
+            name: faker.name.firstName(),
+            title: faker.name.title(),
+          })
+        }, 2000)
+      }}
+      popperDependencies={[!!data]}
+      trigger={<Button content='Simulate loading' icon='lab' />}
+      wide
+    >
+      {data === null ? (
+        <Placeholder style={{ minWidth: '200px' }}>
+          <Placeholder.Header>
+            <Placeholder.Line />
+            <Placeholder.Line />
+          </Placeholder.Header>
+          <Placeholder.Paragraph>
+            <Placeholder.Line length='medium' />
+            <Placeholder.Line length='short' />
+          </Placeholder.Paragraph>
+        </Placeholder>
+      ) : (
+        <React.Fragment>
+          <Header as='h2' content={data.name} subheader={data.title} />
+          <p>{data.description}</p>
+        </React.Fragment>
+      )}
+    </Popup>
+  )
+}
+
+export default PopupExamplePopperDependencies

docs/src/examples/modules/Popup/Usage/index.js

@@ -79,6 +79,25 @@ const PopupUsageExamples = () => (
       examplePath='modules/Popup/Usage/PopupExampleDefaultOpen'
       renderHtml={false}
     />
+    <ComponentExample
+      title='Popper Dependencies'
+      description={
+        <span>
+          A popup can have dependencies which update will schedule a position
+          update. Should be used in cases when content is changing, behaves like{' '}
+          <a
+            href='https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect'
+            rel='noopener noreferrer'
+            target='_blank'
+          >
+            <code>dependencies</code>
+          </a>{' '}
+          in React Hooks.
+        </span>
+      }
+      examplePath='modules/Popup/Usage/PopupExamplePopperDependencies'
+      renderHtml={false}
+    />
   </ExampleSection>
 )
 

src/modules/Popup/Popup.d.ts

@@ -107,6 +107,9 @@ export interface StrictPopupProps extends StrictPortalProps {
   /** An object containing custom settings for the Popper.js modifiers. */
   popperModifiers?: object
 
+  /** A popup can have dependencies which update will schedule a position update. */
+  popperDependencies?: any[]
+
   /** Popup size. */
   size?: 'mini' | 'tiny' | 'small' | 'large' | 'huge'
 

src/modules/Popup/Popup.js

@@ -4,6 +4,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component, createRef } from 'react'
 import { Popper } from 'react-popper'
+import shallowEqual from 'shallowequal'
 
 import {
   eventStack,
@@ -126,6 +127,9 @@ export default class Popup extends Component {
     /** An object containing custom settings for the Popper.js modifiers. */
     popperModifiers: PropTypes.object,
 
+    /** A popup can have dependencies which update will schedule a position update. */
+    popperDependencies: PropTypes.array,
+
     /** Popup size. */
     size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big', 'massive')),
 
@@ -151,6 +155,8 @@ export default class Popup extends Component {
   static Header = PopupHeader
 
   state = {}
+
+  open = false
   triggerRef = createRef()
 
   static getDerivedStateFromProps(props, state) {
@@ -171,6 +177,14 @@ export default class Popup extends Component {
     return { contentRestProps, portalRestProps }
   }
 
+  componentDidUpdate(prevProps) {
+    const depsEqual = shallowEqual(this.props.popperDependencies, prevProps.popperDependencies)
+
+    if (!depsEqual) {
+      this.handleUpdate()
+    }
+  }
+
   componentWillUnmount() {
     clearTimeout(this.timeoutId)
   }
@@ -235,10 +249,21 @@ export default class Popup extends Component {
 
   handlePortalUnmount = (e) => {
     debug('handlePortalUnmount()')
+
+    this.positionUpdate = null
     _.invoke(this.props, 'onUnmount', e, this.props)
   }
 
-  renderContent = ({ placement: popperPlacement, ref: popperRef, style: popperStyle }) => {
+  handleUpdate() {
+    if (this.positionUpdate) this.positionUpdate()
+  }
+
+  renderContent = ({
+    placement: popperPlacement,
+    ref: popperRef,
+    scheduleUpdate,
+    style: popperStyle,
+  }) => {
     const {
       basic,
       children,
@@ -254,6 +279,8 @@ export default class Popup extends Component {
     } = this.props
     const { contentRestProps } = this.state
 
+    this.positionUpdate = scheduleUpdate
+
     const classes = cx(
       'ui',
       placementMapping[popperPlacement],

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

@@ -276,7 +276,7 @@ describe('Popup', () => {
   })
 
   describe('popperModifiers', () => {
-    it(`are passed to Popper`, () => {
+    it('are passed to Popper', () => {
       const modifiers = {
         keepTogether: { enabled: false },
         preventOverflow: { padding: 0 },
@@ -290,6 +290,24 @@ describe('Popup', () => {
     })
   })
 
+  describe('popperDependencies', () => {
+    it('will call "scheduleUpdate" if dependencies changed', () => {
+      wrapperMount(<Popup popperDependencies={[1, 2, 3]} />)
+      const scheduleUpdate = sandbox.spy(wrapper.instance(), 'handleUpdate')
+
+      wrapper.setProps({ popperDependencies: [2, 3, 4] })
+      scheduleUpdate.should.have.been.calledOnce()
+    })
+
+    it('will skip "scheduleUpdate" if dependencies are same', () => {
+      wrapperMount(<Popup popperDependencies={[1, 2, 3]} />)
+      const scheduleUpdate = sandbox.spy(wrapper.instance(), 'handleUpdate')
+
+      wrapper.setProps({ popperDependencies: [1, 2, 3] })
+      scheduleUpdate.should.have.not.been.called()
+    })
+  })
+
   describe('size', () => {
     const sizes = _.without(SUI.SIZES, 'medium', 'big', 'massive')