From 473de78dbe0421b8c557912175fcc4dc8ca31af9 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Thu, 28 Sep 2017 10:40:55 +0300
Subject: [PATCH] feat(Responsive): add `fireOnMount` prop

---
 .../Usage/ResponsiveExampleFireOnMount.js     | 29 +++++++++++++++++++
 .../Examples/addons/Responsive/Usage/index.js |  5 ++++
 src/addons/Responsive/Responsive.d.ts         |  3 ++
 src/addons/Responsive/Responsive.js           |  6 ++++
 .../addons/Responsive/Responsive-test.js      | 16 ++++++++++
 5 files changed, 59 insertions(+)
 create mode 100644 docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleFireOnMount.js

diff --git a/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleFireOnMount.js b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleFireOnMount.js
new file mode 100644
index 0000000000..9fe5faeca4
--- /dev/null
+++ b/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 onUpdate={this.handleOnUpdate}>
+            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>
+    )
+  }
+}
diff --git a/docs/app/Examples/addons/Responsive/Usage/index.js b/docs/app/Examples/addons/Responsive/Usage/index.js
index e4f3ebe169..89d112ef12 100644
--- a/docs/app/Examples/addons/Responsive/Usage/index.js
+++ b/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>
 )
 
diff --git a/src/addons/Responsive/Responsive.d.ts b/src/addons/Responsive/Responsive.d.ts
index 5a52c3d181..3439073502 100644
--- a/src/addons/Responsive/Responsive.d.ts
+++ b/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;
 
diff --git a/src/addons/Responsive/Responsive.js b/src/addons/Responsive/Responsive.js
index d0c299c6f5..3e47a68fcc 100644
--- a/src/addons/Responsive/Responsive.js
+++ b/src/addons/Responsive/Responsive.js
@@ -21,6 +21,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,
@@ -59,7 +62,10 @@ export default class Responsive extends Component {
   }
 
   componentDidMount() {
+    const { fireOnMount } = this.props
+
     eventStack.sub('resize', this.handleResize, { target: 'window' })
+    if (fireOnMount) this.handleUpdate()
   }
 
   componentWillUnmount() {
diff --git a/test/specs/addons/Responsive/Responsive-test.js b/test/specs/addons/Responsive/Responsive-test.js
index 50849bdcd6..056beda8d9 100644
--- a/test/specs/addons/Responsive/Responsive-test.js
+++ b/test/specs/addons/Responsive/Responsive-test.js
@@ -15,6 +15,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)