feat(Responsive): add fireOnMount prop (#2137)

docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleFireOnMount.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import { Grid, Responsive, Segment } from 'semantic-ui-react'
+
+export default class ResponsiveExampleFireOnMount extends Component {
+  state = {}
+
+  handleOnUpdate = (e, { width }) => this.setState({ width })
+
+  render() {
+    const { width } = this.state
+    const textAlign = width >= Responsive.onlyComputer.minWidth ? 'right' : 'left'
+
+    return (
+      <Responsive
+        as={Grid}
+        columns={1}
+        fireOnMount
+        onUpdate={this.handleOnUpdate}
+      >
+        <Grid.Column textAlign={textAlign}>
+          <Segment>
+            This grid has responsive align of the text. It will be right aligned on computer and left aligned on other
+            breakpoins.
+          </Segment>
+        </Grid.Column>
+      </Responsive>
+    )
+  }
+}

docs/app/Examples/addons/Responsive/Usage/index.js

@@ -15,6 +15,11 @@ const ResponsiveUsageExamples = () => (
       description='Responsive listens for window resize events and calls event handler.'
       examplePath='addons/Responsive/Usage/ResponsiveExampleOnUpdate'
     />
+    <ComponentExample
+      title='Fire on mount'
+      description='Responsive can fire callbacks immediately after mount.'
+      examplePath='addons/Responsive/Usage/ResponsiveExampleFireOnMount'
+    />
   </ExampleSection>
 )
 

src/addons/Responsive/Responsive.d.ts

@@ -9,6 +9,9 @@ export interface ResponsiveProps {
   /** Primary content. */
   children?: React.ReactNode;
 
+  /** Fires callbacks immediately after mount. */
+  fireOnMount?: boolean;
+
   /** The maximum width at which content will be displayed. */
   maxWidth?: number | string;
 

src/addons/Responsive/Responsive.js

@@ -22,6 +22,9 @@ export default class Responsive extends Component {
     /** Primary content. */
     children: PropTypes.node,
 
+    /** Fires callbacks immediately after mount. */
+    fireOnMount: PropTypes.bool,
+
     /** The maximum width at which content will be displayed. */
     maxWidth: PropTypes.oneOfType([
       PropTypes.number,
@@ -61,7 +64,10 @@ export default class Responsive extends Component {
   }
 
   componentDidMount() {
+    const { fireOnMount } = this.props
+
     eventStack.sub('resize', this.handleResize, { target: 'window' })
+    if (fireOnMount) this.handleUpdate()
   }
 
   componentWillUnmount() {

test/specs/addons/Responsive/Responsive-test.js

@@ -17,6 +17,22 @@ describe('Responsive', () => {
     })
   })
 
+  describe('fireOnMount', () => {
+    it('do not fire onUpdate by default', () => {
+      const onUpdate = sandbox.spy()
+      mount(<Responsive onUpdate={onUpdate} />)
+
+      onUpdate.should.have.not.been.called()
+    })
+
+    it('fires onUpdate after mount when true', () => {
+      const onUpdate = sandbox.spy()
+      mount(<Responsive fireOnMount onUpdate={onUpdate} />)
+
+      onUpdate.should.have.been.calledOnce()
+    })
+  })
+
   describe('maxWidth', () => {
     it('renders when fits', () => {
       sandbox.stub(window, 'innerWidth').value(Responsive.onlyMobile.maxWidth)