Skip to content
This repository has been archived by the owner on Dec 24, 2019. It is now read-only.

Commit

Permalink
Resolve merge conflicts
Browse files Browse the repository at this point in the history
Patrick Burtchaell committed Aug 7, 2016

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 466eb4b + 02b982b commit fe3df16
Showing 7 changed files with 168 additions and 17 deletions.
35 changes: 31 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -77,7 +77,7 @@ render () {
}
```

See the [examples](/examples/notification-tree) for more context on how to use a notification stack.
See the [examples](examples/notification-tree) for more context on how to use a notification stack.

### Props

@@ -101,9 +101,11 @@ The `style` prop useful if you are not using React inline styles and would like

For NotificationStack component:

| Name | Type | Description | Required | Default |
|----------------|-------|----------------------------------------------|---------- |----------|
| notifications | array | Array of notifications to render | true | |
| Name | Type | Description | Required | Default |
|-----------------------|-------|----------------------------------------------|---------- |----------|
| notifications | array | Array of notifications to render | true | |
| barStyleFactory | func | create the style of the notification | false | fn |
| activeBarStyleFactory | func | create the style of the active notification | false | fn |

**Update** `v5.0.3`: Now notifications used in a stack _can_ have all properties included in the regular notification component.

@@ -144,6 +146,31 @@ To use additional inline styles, return two objects. The `bar` object applies st

I would highly suggest using this method since the styles included in the component by default handle the visibility of the notification. If you remove these styles, the component won't actually show or hide itself.

### barStyleFactory and activeBarStyleFactory NotificationStack props

These two function have the following signature:

```js
(index: Number, style: Object|Void) => Object
```

Where `index` is the index of the notification in the notifications array and
`style` is the style property of the individual notification.

This function is used to dynamically set the style of each notification in the
stack. The default function adds the `bottom` style property to correctly
position of the notification in a stack.

```js
function defaultStyleFactory(index, style) {
return Object.assign(
{},
style,
{ bottom: `${2 + index * 4}rem` }
);
}
```

---
Built with care in New Orleans by [Patrick Burtchaell](http://twitter.com/pburtchaell).

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "react-notification",
"version": "5.0.7",
"version": "6.0.0",
"description": "Snackbar style notification component for React.",
"main": "dist/index.js",
"scripts": {
6 changes: 3 additions & 3 deletions src/notification.js
Original file line number Diff line number Diff line change
@@ -10,10 +10,10 @@ class Notification extends Component {
this.getTitleStyle = this.getTitleStyle.bind(this);
this.handleClick = this.handleClick.bind(this);

if (this.props.onDismiss && this.props.isActive) {
if (props.onDismiss && props.isActive) {
this.dismissTimeout = setTimeout(
this.props.onDismiss,
this.props.dismissAfter
props.onDismiss,
props.dismissAfter
);
}
}
22 changes: 20 additions & 2 deletions src/notificationStack.js
Original file line number Diff line number Diff line change
@@ -2,6 +2,14 @@ import React, { PropTypes } from 'react';
import defaultPropTypes from './defaultPropTypes';
import StackedNotification from './stackedNotification';

function defaultStyleFactory(index, style) {
return Object.assign(
{},
style,
{ bottom: `${2 + index * 4}rem` }
);
}

/**
* The notification list does not have any state, so use a
* pure function here. It just needs to return the stacked array
@@ -13,6 +21,11 @@ const NotificationStack = props => {
{props.notifications.map((notification, index) => {
const dismissAfter = notification.dismissAfter || props.dismissAfter;
const isLast = index === 0 && props.notifications.length === 1;
const barStyle = props.barStyleFactory(index, notification.barStyle);
const activeBarStyle = props.activeBarStyleFactory(
index,
notification.activeBarStyle
);

return (
<StackedNotification
@@ -22,7 +35,8 @@ const NotificationStack = props => {
action={notification.action || props.action}
dismissAfter={isLast ? dismissAfter : dismissAfter + (index * 1000)}
onDismiss={props.onDismiss.bind(this, notification)}
index={index}
activeBarStyle={activeBarStyle}
barStyle={barStyle}
/>
);
})}
@@ -31,12 +45,16 @@ const NotificationStack = props => {
};

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

NotificationStack.defaultProps = {
dismissAfter: 1000
dismissAfter: 1000,
activeBarStyleFactory: defaultStyleFactory,
barStyleFactory: defaultStyleFactory
}

export default NotificationStack;
8 changes: 0 additions & 8 deletions src/stackedNotification.js
Original file line number Diff line number Diff line change
@@ -26,19 +26,11 @@ class StackedNotification extends Component {
}

render() {
const bottomPosition = `${2 + this.props.index * 4}rem`;

return (
<Notification
{...this.props}
onDismiss={() => setTimeout(this.props.onDismiss, 300)}
isActive={this.state.isActive}
barStyle={Object.assign({}, {
bottom: bottomPosition
}, this.props.barStyle)}
activeBarStyle={Object.assign({}, {
bottom: bottomPosition
}, this.props.activeBarStyle)}
/>
);
}
45 changes: 45 additions & 0 deletions test/notification.js
Original file line number Diff line number Diff line change
@@ -7,6 +7,9 @@ describe('<Notification />', () => {
const actionClassName = '.notification-bar-action';
const titleClassName = '.notification-bar-title';

const customClassName = 'foo';
const customActiveClassName = 'bar';

let component = shallow(
<Notification
message={mockNotification.message}
@@ -29,6 +32,48 @@ describe('<Notification />', () => {
expect(component).to.have.className('notification-bar');
});

it('has custom class name', () => {
let classNameComponent = shallow(
<Notification
message={mockNotification.message}
action={mockNotification.action}
barStyle={mockNotification.barStyle}
actionStyle={mockNotification.actionStyle}
activeBarStyle={mockNotification.activeBarStyle}
onClick={mockNotification.onClick}
dismissAfter={mockNotification.dismissAfter}
title={mockNotification.title}
className={customClassName}
/>
);

expect(classNameComponent).to.have.className(customClassName);
});

it('has custom active class name', () => {
let classNameComponent = shallow(
<Notification
message={mockNotification.message}
action={mockNotification.action}
barStyle={mockNotification.barStyle}
actionStyle={mockNotification.actionStyle}
activeBarStyle={mockNotification.activeBarStyle}
onClick={mockNotification.onClick}
dismissAfter={mockNotification.dismissAfter}
title={mockNotification.title}
className={customClassName}
activeClassName={customActiveClassName}
/>
);

expect(classNameComponent).to.have.className(customClassName);

classNameComponent.setProps({ isActive: true });

expect(classNameComponent).to.have.className(customActiveClassName);
});


it('should render message element', () => {
expect(wrapper).to.have.descendants(messageClassName);
});
68 changes: 68 additions & 0 deletions test/notificationStack.js
Original file line number Diff line number Diff line change
@@ -67,4 +67,72 @@ describe('<NotificationStack />', () => {

expect(handleDismiss.calledOnce).to.equal(false);
});

it('barStyleFactory should set correct style on notification', () => {
const styleFactory = (index, style) => Object.assign(
{},
style,
{ bottom: `${index}px` }
);
const stack = mount(
<NotificationStack
notifications={[mockNotification]}
barStyleFactory={styleFactory}
onDismiss={() => {}}
/>
);
const notification = stack.find(Notification);
expect(notification.prop('barStyle').bottom).to.equal('0px');
});

it('barStyleFactory should respect notification barStyle', () => {
const styleFactory = (index, style) => Object.assign(
{},
style,
{ bottom: `${index}px` }
);
const stack = mount(
<NotificationStack
notifications={[mockNotification]}
barStyleFactory={styleFactory}
onDismiss={() => {}}
/>
);
const notification = stack.find(Notification);
expect(notification.prop('barStyle').background).to.equal('rgb(2, 2, 2)');
});

it('activeBarStyleFactory should set correct style on notification', () => {
const styleFactory = (index, style) => Object.assign(
{},
style,
{ bottom: `${index + 2}px` }
);
const stack = mount(
<NotificationStack
notifications={[mockNotification]}
activeBarStyleFactory={styleFactory}
onDismiss={() => {}}
/>
);
const notification = stack.find(Notification);
expect(notification.prop('activeBarStyle').bottom).to.equal('2px');
});

it('activeBarStyleFactory should respect notification actionBarStyle', () => {
const styleFactory = (index, style) => Object.assign(
{},
style,
{ bottom: `${index}px` }
);
const stack = mount(
<NotificationStack
notifications={[mockNotification]}
activeBarStyleFactory={styleFactory}
onDismiss={() => {}}
/>
);
const notification = stack.find(Notification);
expect(notification.prop('activeBarStyle').left).to.equal('4rem');
})
});

0 comments on commit fe3df16

Please sign in to comment.