breaking(Snackbar): removed non-standard onClose handler, replaced wi…

…th new onShow and onHide events from MDC #77
rmwc · Jan 10, 2018 · 4174bfb · 4174bfb
1 parent 9a2c812
commit 4174bfb
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 73 deletions.
diff --git a/src/Snackbar/index.js b/src/Snackbar/index.js
@@ -51,8 +51,10 @@ export const SnackbarActionButton = simpleTag({
 type SnackbarPropsT = {
   /** Show the Snackbar. */
   show?: boolean,
-  /** A callback thats fired when the Snackbar closes. */
-  onClose?: () => mixed,
+  /** A callback thats fired when the Snackbar shows. */
+  onShow?: () => mixed,
+  /** A callback thats fired when the Snackbar hides. */
+  onHide?: () => mixed,
   /** A string or other renderable JSX to be used as the message body. */
   message?: React.Node,
   /** Milliseconds to show the Snackbar for. */
@@ -76,38 +78,33 @@ const showSnackbar = (props, api) => {
     actionHandler,
     actionText,
     multiline,
-    actionOnBottom,
-    onClose
+    actionOnBottom
   } = props;
-  const timer = setTimeout(() => onClose(), timeout || 2750);
-  const wrappedActionHandler =
-    actionHandler && api.dismissesOnAction ?
-      () => {
-        actionHandler();
-        clearTimeout(timer);
-        onClose();
-      } :
-      actionHandler;
 
   api.show({
     message,
     timeout,
-    actionHandler: wrappedActionHandler,
+    actionHandler,
     actionText: actionText || ' ',
     multiline,
     actionOnBottom
   });
 };
 
 /**
- * @name Snackbar
+ * A Snackbar component for notifications.
  */
 export const Snackbar = withMDC({
   mdcConstructor: MDCSnackbar,
   mdcElementRef: true,
+  mdcEvents: {
+    'MDCSnackbar:show': (evt, props, api) => props.onShow(evt),
+    'MDCSnackbar:hide': (evt, props, api) => props.onHide(evt)
+  },
   defaultProps: {
     show: false,
-    onClose: noop,
+    onHide: noop,
+    onShow: noop,
     message: undefined,
     timeout: undefined,
     actionHandler: undefined,
@@ -141,7 +138,8 @@ export const Snackbar = withMDC({
         actionOnBottom,
         mdcElementRef,
         dismissesOnAction,
-        onClose,
+        onHide,
+        onShow,
         children,
         ...rest
       } = this.props;

diff --git a/src/Snackbar/snackbar.md b/src/Snackbar/snackbar.md
@@ -12,7 +12,7 @@ import { Button } from 'rmwc/Button';
 {/* A standard snackbar */}
 <Snackbar
   show={this.state.snackbarIsOpen}
-  onClose={evt => this.setState({snackbarIsOpen: false})}
+  onHide={evt => this.setState({snackbarIsOpen: false})}
   message="This is a new message"
   actionText="Action"
   actionHandler={() => alert('Action clicked')}
@@ -28,7 +28,7 @@ import { Button } from 'rmwc/Button';
 {/* A snackbar that is start aligned on larger devices. */}
 <Snackbar
   show={this.state.snackbarStartIsOpen}
-  onClose={evt => this.setState({snackbarStartIsOpen: false})}
+  onHide={evt => this.setState({snackbarStartIsOpen: false})}
   message="Start aligned"
   actionText="Dismiss"
   actionHandler={() => {}}

diff --git a/src/Snackbar/snackbar.spec.js b/src/Snackbar/snackbar.spec.js
@@ -2,55 +2,31 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { Snackbar } from './';
 
-// <Snackbar
-// show={this.state.snackbarIsOpen}
-// onClose={evt => this.setState({snackbarIsOpen: false})}
-// message="This is a new message"
-// actionText="Action"
-// actionHandler={() => alert('Action clicked')}
-// />
-
-// <Button
-// primary
-// onClick={evt => this.setState({snackbarStartIsOpen: !this.state.snackbarStartIsOpen})}
-// >
-// Show start-aligned
-// </Button>
-
-// <Snackbar
-// show={this.state.snackbarStartIsOpen}
-// onClose={evt => this.setState({snackbarStartIsOpen: false})}
-// message="Start aligned"
-// actionText="Dismiss"
-// actionHandler={() => {}}
-// alignStart
-// />
-
 describe('Snackbar', () => {
-	it('renders', () => {
-		const el = mount(
-			<Snackbar
-				show={true}
-				onClose={evt => {}}
-				message="This is a new message"
-				actionText="Action"
-				actionHandler={() => alert('Action clicked')}
-			/>
-		);
-		expect(!!~el.html().search('mdc-snackbar')).toBe(true);
-	});
+  it('renders', () => {
+    const el = mount(
+      <Snackbar
+        show
+        onHide={evt => {}}
+        message="This is a new message"
+        actionText="Action"
+        actionHandler={() => alert('Action clicked')}
+      />
+    );
+    expect(!!~el.html().search('mdc-snackbar')).toBe(true);
+  });
 
-	it('can be alignStart', () => {
-		const el = mount(
-			<Snackbar
-				show={true}
-				onClose={evt => {}}
-				message="This is a new message"
-				actionText="Action"
-				actionHandler={() => alert('Action clicked')}
-				alignStart
-			/>
-		);
-		expect(!!~el.html().search('mdc-snackbar--align-start')).toBe(true);
-	});
+  it('can be alignStart', () => {
+    const el = mount(
+      <Snackbar
+        show
+        onHide={evt => {}}
+        message="This is a new message"
+        actionText="Action"
+        actionHandler={() => alert('Action clicked')}
+        alignStart
+      />
+    );
+    expect(!!~el.html().search('mdc-snackbar--align-start')).toBe(true);
+  });
 });
diff --git a/src/Snackbar/snackbar.story.js b/src/Snackbar/snackbar.story.js
@@ -31,9 +31,12 @@ const SnackbarStory = storyWithState(
         multiline={this.state.multiline}
         actionText={this.state.actionText}
         timeout={this.state.timeout}
-        onClose={() => {
+        onHide={() => {
           this.setState({ show: false });
-          action('onClose')();
+          action('onHide')();
+        }}
+        onShow={() => {
+          action('onShow')();
         }}
         actionHandler={action('actionHandler')}
       />

diff --git a/src/docs/docgen.json b/src/docs/docgen.json
@@ -2246,7 +2246,7 @@
       "methods": []
     },
     {
-      "description": "@name Snackbar",
+      "description": "A Snackbar component for notifications.",
       "displayName": "Snackbar",
       "methods": [],
       "props": {
@@ -2257,7 +2257,22 @@
           "required": false,
           "description": "Show the Snackbar."
         },
-        "onClose": {
+        "onShow": {
+          "flowType": {
+            "name": "signature",
+            "type": "function",
+            "raw": "() => mixed",
+            "signature": {
+              "arguments": [],
+              "return": {
+                "name": "mixed"
+              }
+            }
+          },
+          "required": false,
+          "description": "A callback thats fired when the Snackbar shows."
+        },
+        "onHide": {
           "flowType": {
             "name": "signature",
             "type": "function",
@@ -2270,7 +2285,7 @@
             }
           },
           "required": false,
-          "description": "A callback thats fired when the Snackbar closes."
+          "description": "A callback thats fired when the Snackbar hides."
         },
         "message": {
           "flowType": {