pburtchaell / react-notification Goto Github PK

Sir, hello. I wanted to give you thanks for the help that you have provided me. I will join the community and report back to you on my progress. You are most kind and I thanks the gods for your presence in this world. Blessings to you and your family as you make your way on this most sacred planet.

Thanks you. Most blessings upon you.

Let's take this code:

const notifications = Immutable.List();

...

return <NotificationStack
      notifications={notifications}
      ...
    />);

The code works, but in the console I have this error:

app.js:9323 Warning: Failed prop type: Invalid prop `notifications` of type `object` supplied to `NotificationStack`, expected `array`.
    in NotificationStack (created by SnackBar)
    in SnackBar (created by Connect(SnackBar))
    in Connect(SnackBar) (created by Sidebar)
    in div (created by Sidebar)
    in Sidebar (created by Connect(Sidebar))
    in Connect(Sidebar) (created by CompanyPage)
    in CompanyPage (created by Connect(CompanyPage))
    in Connect(CompanyPage) (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by Root)
    in Provider (created by Root)
    in Root
    in AppContainer

I will lose the benefits of Immutable if I change the code to Immutable.List().toArray (or toJS)) as presented here

Also here.

Other comment:

Good question. I Wouldn't do it in the store though, since then you lose the abillity to do a simple object comparison (prevState !== this.state) if you'd want to optimize rendering with shouldComponentUpdate

componentWillReceiveProps: function (nextProps) {
    if (!nextProps.dismissAfter) return;

    if (this.state.timeoutId) clearTimeout( this.state.timeoutId );
    this.state.timeoutId = setTimeout( this.hide(), nextProps.dismissAfter );

    this.setState(this.state);
  }

this.hide is undefined since this is Window object.
please change to

componentWillReceiveProps: function (nextProps) {
   var that = this;
    if (!nextProps.dismissAfter) return;

    if (this.state.timeoutId) clearTimeout( this.state.timeoutId );
    this.state.timeoutId = setTimeout( that.hide(), nextProps.dismissAfter );

    this.setState(this.state);
  }

Hi.

I want to use these classes , but when I add them nothing is changing.

If I set style to false, the animation is no longer working

Let's take this code:

const notifications = Immutable.List();

...

return <NotificationStack
      notifications={notifications}
      ...
    />);

The code works, but in the console I have this error:

app.js:9323 Warning: Failed prop type: Invalid prop `notifications` of type `object` supplied to `NotificationStack`, expected `array`.
    in NotificationStack (created by SnackBar)
    in SnackBar (created by Connect(SnackBar))
    in Connect(SnackBar) (created by Sidebar)
    in div (created by Sidebar)
    in Sidebar (created by Connect(Sidebar))
    in Connect(Sidebar) (created by CompanyPage)
    in CompanyPage (created by Connect(CompanyPage))
    in Connect(CompanyPage) (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by Root)
    in Provider (created by Root)
    in Root
    in AppContainer

Hi,
I'm using the component and packaging via gulp however I'm getting this error:

Parsing file ... /node_modules/react-notification/index.js: Expecting Unicode escape sequence \uXXXX (50:24)

It seems #61 broke the onDismiss behavior completely.
The event doesnt fire at all now.

The last working version is 5.0.1

Is it possible to show multiple notifications at the same time? I've check the source, but didn't see a way to do it.

I feel like I must be missing something obvious here. I'm getting the error:

Uncaught TypeError: Object.assign is not a function

The error is caused by the isActive ternary:

return isActive ? Object.assign({}, baseStyle, {
        left: '1rem'
      }, barStyle, activeBarStyle) : Object.assign({}, baseStyle, barStyle);

Do I need to add a polyfill in order to get this package to work?

I'm using webpack and babel for compilation. If you want to see my config, I can add it.

Hi, i have some notifications that i don't want to hide (dismiss) unless user clicks on it...
{dismissAfter:0} not working

Action option is required...

Can you please help me understand. How can I display Notification after a dispatch of action? Let say, I want to display "UNDO" notification after I dispatch "delete" action.

An example would be very helpful.

Can you package it for meteor? As there is no notification system package for meteor-react at atmospherejs.

When I add

var Notification = require('react-notification');

to the top of my jsx component (even with no <Notification> tags yet), I get the error:

.../node_modules/react-notification/index.js:57
      <div className={classes}>
      ^
ParseError: Unexpected token
    at wrapWithPluginError (.../node_modules/gulp-browserify/index.js:44:10)
...

Have you seen this? I'm using React 0.12.2. Thanks!

(PS. Did you mean for your class names to be missing one of the 'i's in notification?)

JSX isn't precompiled so when compiling it I get:

ERROR in ./~/react-notification/web_modules/notification.js
Module parse failed: /home/[..]/node_modules/react-notification/web_modules/notification.js Line 128: 
Unexpected token <
You may need an appropriate loader to handle this file type.
|   render: function () {
|     return (
|       <div className="notificiation-bar" style={this.getBarStyles()}>
|         <div className="notification-bar-wrapper" onClick={this.handleClick}>
|           <span className="notification-bar-message">{this.props.message}</span>

Everything else seems to be working fine but in both Safari and Chrome, the dismissAfter doesn't hide the notification. Is this a known issue?

Need to create unit tests.

onDismiss={props.onDismiss.bind(this, notification)}

If onDismiss isn't present, we get an undefined method error. However, the proptypes don't require this:

NotificationStack.propTypes = {
  notifications: PropTypes.array.isRequired,
  onDismiss: PropTypes.func
};

Not sure if bug in propTypes or bug in how onDismiss is used.

Nevermind, I wasnt passing the key property...

I am not sure why its hardcoded to not display action on NotificationStack.
https://github.com/pburtchaell/react-notification/blob/master/src/stackedNotification.js#L34

Hi,

I have a notification stack, where I first removed items on my onClick() handler. This works, but the notifications disappears without the nice animation. (The animation works when items are dismissed on timeout.)

I then switched to keeping all the notifications in the list, but instead toggling isActive on the item in the data structure passed to the stack. Nothing happens.

What would be the correct way to "programmatically" dismiss an item in the notification stack, so that the animation is preserved?

my calculation of bottom depends on Notification.key

I think the issue is here. The onDismiss function doesn't check to see if this.props.onDismiss exists or not.

Hey! I love this package, it's wonderful. However, right now I'm trying to pass some HTML markup as the message, but as far as I understand I can only pass it as a string or a React component.

Am I doing something wrong, or will you be adding this feature if it doesn't already exist?

Thanks!

NotificationStack is overlapping over each other instead of adding it at the top of the previous stack.

Anyway to add support for the 'active' style, so that you could add the 'active' object to the element props?

Maybe something like:

styles.active = {
  left: '1rem'
};

if (this.props.styles && this.props.styles.active) {
  styles.active = objectAssign(this.props.styles.active);
}

styles.default = {
  padding: '1rem',
  background: '#212121',
  color: '#FAFAFA',
  width: 'auto',
  position: 'fixed',
  left: '-100%',
  top: '6rem',
  boxShadow: '0 0 1px 1px rgba(10,10,11,0.125)',
  borderRadius: '5px',
  cursor: 'default',
  font: '1rem normal Roboto, sans-serif',
  transition: '.5s ease'
};

if (this.props.styles && this.props.styles.bar) {
  styles.default = objectAssign(styles.default, this.props.styles.bar);
}

styles = !this.state.active ? styles.default : objectAssign(styles.default, styles.active);

return styles;

I also modified the order of how the styles are build allowing the active style to be set, then a merge of prop styles and default, then finally figuring out if you're sending the active or simply merged styles

Proposed changes

• Click on action area to dismiss: When clicking on an action, for instance a submit action, this should also remove the active status of the notification and initiate dismiss.
• Click on non-action area to dismiss (originally #79): Dismiss when clicking anywhere on the notification, but the action.

From issue #79:

Some of our notifications are longed lived. It would be nice to give the user the option to dismiss a notification simply by interacting with it. According to Google Material docs, this is usually done with a swiping action, but I think just a simple click is sufficient.

I want to change the animation. Instead of slideIn from left, I want to use slideUp from bottom. Any idea about this ?

Hi,
I like how minimalistic yet functional this is.

One thing I am missing is being able to have mulitple stacks in different positions.

Although I can see how bottom left is the right way to do it for today's apps, migrating an app that has multiple/different positioned stacks into react-notification means to get the team involved even if all you want to do is to use a different library.

Update: I just realised I need sticky notifications as well so as much as I like the minimalistic approach, its a bit too minimal for me right now.

Totally down to create a PR.

I looked through the code for this component and it appears that the bottom CSS attribute is hard coded in this component with the logic for placement passed on to each notifications. Are you opposed to a solution that would allow the barStyle property to also set bottom in a dynamic way?

I think it would be useful to have a way to trigger OS/browser notifications that use this.state.message. Perhaps Notification.dispatch() or Notification.sendOSNotification().

Not every notification need an action, right?

Hi, I just tried installing your package with npm, and it did not install the dependency on react-classes. I think you need to put "react-classes": "^1.0.3" into dependencies, not devDependencies. Thanks!

In the props table and example you define "styles" (notice the extra 's').

I had to look into your code example to find out it was without the extra 's'.

I see some code in the NotifcationStack component, but when I try to provide a style key to my messages, it doesn't seem to be recognized.

errors.push({
      message: 'FOOBAR',
      key: 1,
      style: {background: 'red'},
    })
return <NotificationStack notifications={errors} onDismiss={() => {}} />

Hello, yes. I would like for you to please tell me how to write an application to use this. Your README does not tell me how.

Thanks you for your help, I am most grateful.

Hi, nice component!

I'm having some trouble with the dismissAfter. I followed your guidelines and have the following in my render component.

<Notification
          isActive={true}
          message={'Saved! (Speech will also save automatically every few seconds)'}
          action={''}
          onClick={this._onNotificationClick}
          onDismiss={this._onNotificationDismiss}
          style={{ bar: { bottom: '6rem', fontSize: '1.5rem', zIndex: '1'}}}
          dismissAfter={2000}
        />

But it doesn't dismiss after 2 seconds. Is there something I'm missing?

The following code works with the onClick but does not dismiss after 2 seconds. I tried with manually adding in a dismissAfter value, still doesn't seem to work. I tried logging from the function and it just never gets called. Any ideas why?

<Notification
  isActive={true}
  message={notification.message}
  action={"Dismiss"}
  onClick={removeNotification}
  onDismiss={removeNotification}
/>

Hi, why I can't import 'notificationStack' to my projects when using
var NotficationiStack = require('notificationStack');. I can only use this component like this:

var NotificationStack = require('../../node_modules/react-notification/dist/notificationStack');

And I see your projects's package.json file, found that you mainly import "dist/notification.js" to this npm module.

I advice you can sort all the Notification components to an obj and then export, and then we can using the module like this:

var Notification = require('react-notification');
var SingleNotification = Notification.SingleNotification;
var NotificationStack = Notification.NotificationStack;

I would like to add an x or close link on NotificationStack.
Currently, NotificationStack will just fade away after several secs that is set.
How can I stack multiple Notification with action and onClick props?

On this page, click

results in 404

hey, nice component! what do you think about using css transform instead of left values?

The behavior of using isActive to perform the slide in/out transitions does not work if you render multiple notifications based on an array like so:

return notifications.map(message => 
      <Notification
        isActive={true}
        message={message} />
    );

(Instead, the components just mount/unmount instantly and never do the slide in/out animation)

Using isActive to show/hide notifications works fine if you only have one or two notifications, like in the example, but I believe in the real world many apps push notifications arbitrarily based on events, rather than keeping some persistent/hidden notifications around at all times.

Is there a way around using isActive? (Perhaps with the CSSTransitionGroup addon?)

IE11

Object.assign error cause

why?

When using the stack like this:

const notifications = [
  {
    key: 1,
    message: "Some Message",
    dismissAfter: 10000
  }
]

<NotificationStack
  notifications={notifications} />

The dismissAfter property is always 2000. I found here:

https://github.com/pburtchaell/react-notification/blob/master/src/notificationStack.js#L23

that the dismissAfter property is not being honored when the property is passed to stacked notification and the 2000 values is hardcoded.

Is it possible to use an icon as action instead of text for example using Bootstrap glyphicons, font awesome or a regular png? Thanks for an awesome library anyhow!

Hello.

I'm working on a dashboard that receives notification data at 10 second intervals. I was wondering if there's a way to add a new notification whenever I receive this data?

Thanks!