feat: Snackbar component by Trancever · Pull Request #305 · callstack/react-native-paper

Trancever · 2018-04-09T10:10:26Z

Closes #16

callstack-bot · 2018-04-09T18:59:40Z

Hey @Trancever, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

vladikoff · 2018-04-10T17:28:12Z

I am excited for this 😄

satya164 · 2018-04-15T22:34:12Z

 export const grey600 = '#757575';
 export const grey700 = '#616161';
 export const grey800 = '#424242';
+export const grey850 = '#323232';


Since our colors file is just material design colors, maybe move this to the component? We do that for other colors.

satya164 · 2018-04-15T22:35:29Z

+ * });
+ * ```
+ */
+class SnackBar extends React.Component<Props, State> {


Let's name it Snackbar since it's a single word, like Toolbar

satya164 · 2018-04-15T22:36:28Z

+  /**
+   * Text that will be displayed inside SnackBar.
+   */
+  content: string,


Maybe use the children prop for this?

satya164 · 2018-04-15T22:37:22Z

+   * - `onPress` - Callback that is called when action button is pressed, user needs to update the `visible` prop.
+   * - `color` - Color of the action button
+   */
+  action?: {


Maybe we want to support multiple actions?

MD docs say that only one action is allowed, so that's why i did it like that. Do we really want to support more than one?

Yeah 0-1 actions is ok.

satya164 · 2018-04-15T22:38:26Z

+  action?: {
+    text: string,
+    onPress: () => mixed,
+    color?: string,


Probably unnecessary since people can already override the accent color with the theme prop.

satya164 · 2018-04-15T22:49:48Z

+        duration: SNACKBAR_ANIMATION_DURATION,
+        useNativeDriver: true,
+      }),
+    ]).start(this.props.onDismiss);


Since we're calling hide on componentDidUpdate, we shouldn't call this.props.onDismiss again.

satya164 · 2018-04-15T22:50:17Z

+      const { duration } = this.props;
+      if (duration !== 'indefinite') {
+        this.hideTimeout = setTimeout(
+          this.hide,


Let's call this.props.onDismiss here instead of hide. componentDidUpdate will trigger the animation.

satya164 · 2018-04-15T22:50:53Z

+    };
+  }
+
+  hideTimeout: number;


Use _ prefix for private properties and methods.

satya164 · 2018-04-15T22:51:37Z

+              },
+            ]}
+          >
+            <Animated.Text


This shouldn't need Animated

satya164 · 2018-04-15T22:52:45Z

+                <TouchableWithoutFeedback
+                  onPress={() => {
+                    this.hide();
+                    action.onPress();


Maybe call onPress first, then hide

ferrannp · 2018-04-16T10:46:34Z

+                >
+                  <View>
+                    <Text style={{ color: action.color || colors.accent }}>
+                      {action.text}


This needs to be uppercase. You can use our own Button with compact (I think).

I used our button and forgot to add toUpperCase when I changed it, will fix it. I decided not to use button from paper cause it has padding and margin by default and styling was not so clear and also it has ripple effect that we don't want in snackbar.

ferrannp · 2018-04-16T10:47:33Z

+    const contentRightMargin = action ? 0 : 24;
+
+    return (
+      <Animated.View


Can you wrap everything with ThemedPortal

satya164 · 2018-04-17T13:32:23Z

+  };
+
+  _hide = () => {
+    if (this._hideTimeout) {


Let's clear this on unmount too

satya164 · 2018-04-18T09:13:02Z

+    const contentRightMargin = action ? 0 : 24;
+
+    return (
+      <ThemedPortal theme={theme}>


You don't need to pass theme here

satya164 · 2018-04-18T09:13:17Z

 import RadioButtonGroupExample from './RadioButtonGroupExample';
 import RippleExample from './RippleExample';
 import SearchBarExample from './SearchBarExample';
+import SnackBarExample from './SnackBarExample';


Let's rename this too :)

satya164 · 2018-04-18T09:13:32Z

+};
+
+class SnackBarExample extends React.Component<Props, State> {
+  static title = 'Snack bar';


nit: Snackbar

satya164 · 2018-04-18T09:13:51Z

+          }}
+          duration={Snackbar.DURATION_INDEFINITE}
+        >
+          <Text>Put your message here</Text>


Maybe don't need the wrapper <Text>

satya164 · 2018-04-18T09:14:18Z

@@ -0,0 +1,292 @@
+/* @flow */
+import * as React from 'react';


nit: space before

satya164 · 2018-04-18T09:14:36Z

+  /**
+   * Text that will be displayed inside SnackBar.
+   */
+  children: string | React.Node,


React.Node should already include string

satya164 · 2018-04-18T09:15:10Z

+   * Object that determines button text and callback for button press. It should contains following properties:
+   * - `text` - Content of the action button
+   * - `onPress` - Callback that is called when action button is pressed, user needs to update the `visible` prop.
+   * - `color` - Color of the action button


satya164 · 2018-04-18T09:16:33Z

+   */
+  duration?: number,
+  /**
+   * Callback called when Snackbar is dismissed, user needs to update the `visible` prop.


Callback called when Snackbar is dismissed. The `visible` prop needs to be updated when this is called.

vladikoff · 2018-04-22T01:21:13Z

I'm trying to use this but getting this:

I'm not using any theme stuff, that might be the cause, investigating....

vladikoff · 2018-04-22T01:23:23Z

My render fn:

  render() {
    
    return (
      <View style={{ flex: 1 }}>
        { this.renderList() }

        <FAB
          small
          color={COLOR_WHITE}
          style={styles.fab}
          icon="add"
          onPress={() => this.new()}
        />

        <Snackbar
          visible={this.state.visible}
          onDismiss={() => this.setState({ visible: false })}
          action={{
            text: 'Undo',
            onPress: () => {
              this.setState({ visible: false });
            },
          }}
          duration={Snackbar.DURATION_INDEFINITE}
        >
          Put your message here
        </Snackbar>
      </View>
    );
  }

satya164 · 2018-04-22T01:25:37Z

@vladikoff did you follow the getting started guide? you need a <Provider /> at root of your app.

vladikoff · 2018-04-22T01:28:09Z

did you follow the getting started guide? you need a at root of your app.

Yeah I have the rest of paper working. Just trying to add a snackbar from this Pull Request

  render () {
    return (
      <Provider store={store}>
        <App/>
      </Provider>
    )
  }

Removing <ThemedPortal> from Snackbar.js helps remove the red crash but the Snackbar is not visible at the moment.

vladikoff · 2018-04-22T01:30:28Z

@satya164 oh I have import { Provider } from 'react-redux'; not Provider as PaperProvider should I use the PaperProvider?

vladikoff · 2018-04-22T01:32:05Z

Nvm, let me revisit https://callstack.github.io/react-native-paper/getting-started.html again , sorry

vladikoff · 2018-04-22T01:42:15Z

Cool it's working here! I just need to move my fab up now :)

However, note that if you set the initial state to:

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      visible: true // <---------- TRUE here
    }

then it will not show the Snackbar when the view renders for the first time, not sure if bug or something with my setup. Thanks again!

Trancever · 2018-04-22T06:58:59Z

@vladikoff Cool that it's working! We are planning to add support for automatically moving FAB whenever Snackbar shows so stay tuned 😄

vladikoff · 2018-04-24T23:11:15Z

Sorry for a stupid question but what controls the stacking order (like css z-index) for this?

For example if I have a drawer, how do I make sure the Snackbar doesn't overlay it?

Example:

satya164 · 2018-04-25T11:16:03Z

what controls the stacking order (like css z-index) for this

It's controlled by the Provider component. If you place the drawer inside Provider, the drawer will be below the Snack and vice-versa.

vladikoff · 2018-04-25T16:39:18Z

It's controlled by the Provider component. If you place the drawer inside Provider, the drawer will be below the Snack and vice-versa.

Ah right, that helps! I tried doing the animation of the FAB and the Snackbar together but it is very choppy. Probably because it is not using the Animated.parallel call

Trancever · 2018-04-26T10:00:17Z

@vladikoff There is a description in a Portal issue #43 which says how those components (Snackbar, FAB, etc.) should behave together and how we would like to implement it. You can check it out.

Outdated

Trancever added the wip label Apr 9, 2018

Trancever requested review from ferrannp and satya164 April 9, 2018 19:09

Trancever changed the title ~~WIP: feat/SnackBar component~~ feat/SnackBar component Apr 9, 2018

Trancever removed the wip label Apr 9, 2018

Trancever changed the title ~~feat/SnackBar component~~ feat: SnackBar component Apr 10, 2018

satya164 force-pushed the master branch from 7839080 to fa352f3 Compare April 11, 2018 13:33

satya164 requested changes Apr 15, 2018

View reviewed changes

ferrannp previously requested changes Apr 16, 2018

View reviewed changes

ferrannp reviewed Apr 16, 2018

View reviewed changes

satya164 reviewed Apr 17, 2018

View reviewed changes

Trancever added the wip label Apr 17, 2018

satya164 requested changes Apr 18, 2018

View reviewed changes

satya164 force-pushed the master branch from bae1a11 to db26d6c Compare April 18, 2018 09:53

Trancever removed the wip label Apr 20, 2018

Trancever changed the title ~~feat: SnackBar component~~ feat: Snackbar component Apr 20, 2018

ferrannp added the core team label Apr 20, 2018

feat: add snackbar component

a0ef863

satya164 force-pushed the feat/snackbar branch from 3370d6c to a0ef863 Compare May 1, 2018 08:39

satya164 approved these changes May 1, 2018

View reviewed changes

satya164 merged commit 870a457 into master May 1, 2018

satya164 deleted the feat/snackbar branch May 1, 2018 09:13

vladikoff mentioned this pull request May 2, 2018

Implement our own Snackbar so we can Animate.parallel the FAB mozilla/notes#1018

Closed

Uh oh!

Conversation

Trancever commented Apr 9, 2018

Uh oh!

callstack-bot commented Apr 9, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vladikoff commented Apr 10, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Trancever Apr 16, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vladikoff commented Apr 22, 2018

Uh oh!

vladikoff commented Apr 22, 2018

Uh oh!

satya164 commented Apr 22, 2018

Uh oh!

vladikoff commented Apr 22, 2018

Uh oh!

vladikoff commented Apr 22, 2018

Uh oh!

vladikoff commented Apr 22, 2018

Uh oh!

vladikoff commented Apr 22, 2018

Uh oh!

Trancever commented Apr 22, 2018

Uh oh!

vladikoff commented Apr 24, 2018

Uh oh!

satya164 commented Apr 25, 2018

Uh oh!

vladikoff commented Apr 25, 2018

callstack-bot commented Apr 9, 2018 •

edited

Loading

Trancever Apr 16, 2018 •

edited

Loading