Skip to content

Commit 934cd0e

Browse files
author
fayster
committed
Update indentation
Complete README.md
1 parent c4ea6e3 commit 934cd0e

File tree

12 files changed

+335
-236
lines changed

12 files changed

+335
-236
lines changed

‎.babelrc

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"presets": ["env", "react-app"]
2+
"presets": [
3+
"env",
4+
"react-app"
5+
]
36
}

‎README.md

Lines changed: 93 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ $ yarn add react-toastify-redux
88
```
99

1010
## Usage
11-
1. Import the reducer and pass it to your combineReducers:
11+
Import the reducer and pass it to your combineReducers:
1212
```javascript
1313
import {combineReducers} from 'redux';
1414
import {toastsReducer as toasts} from 'react-toasify-redux';
@@ -19,7 +19,7 @@ export default combineReducers({
1919
});
2020
```
2121

22-
2. Include the toast contoller in main view.
22+
Include the toast controller in main view:
2323
```javascript
2424
import {ToastController} from 'react-toasify-redux';
2525

@@ -33,5 +33,94 @@ export default () => {
3333
};
3434
```
3535

36-
### Properties
37-
It accepts all properties as react-toastify does, actually it pipes them in the react-toastify.
36+
### Actions
37+
Use actions for create, update and remove toasts:
38+
39+
```javascript
40+
import {dismiss, update, error, message, warning, success, info} from 'react-toastify-redux';
41+
42+
dispatch(dismiss(id));
43+
dispatch(dismiss()); // dismiss all toasts
44+
dispatch(update(id, options));
45+
dispatch(message('Default message'));
46+
dispatch(success('Success message'));
47+
dispatch(error('Error message'));
48+
dispatch(warning('Warning message'));
49+
dispatch(info('Info message'));
50+
```
51+
52+
### Customization toast
53+
Create toast component
54+
```javascript
55+
export default ({ type, message }) => (
56+
<div className='toast'>
57+
<div className='header'>{type}</div>
58+
<div className='message'>{message}</div>
59+
</div>
60+
);
61+
```
62+
63+
Include this component in ToastConroller
64+
```javascript
65+
import {ToastController} from 'react-toasify-redux';
66+
import CustomToastComponent from 'awesome-folder/custom-toast-component';
67+
68+
export default () => {
69+
return (
70+
<div>
71+
...
72+
<ToastController toastComponent={CustomToastComponent} />
73+
</div>
74+
);
75+
};
76+
```
77+
78+
## API
79+
80+
### ToastContainer
81+
ToastContainer extends properties from ToastContainer in react-toastify. Also have new properties:
82+
83+
| Props | Type | Default | Description |
84+
|----------------|-------------------------|---------|--------------------------------------------------|
85+
| toastComponent | ComponentClass or false | - | Element that will be displayed after emit toast |
86+
87+
### Dismiss
88+
| Parameter | Type | Required | Description |
89+
|-----------|--------|----------|--------------------------------------------------------------------------|
90+
| toast id | string | ✘ | Id toast for dismiss. If call action without id, then dismiss all toasts |
91+
92+
### Update
93+
| Parameter | Type | Required | Description |
94+
|-----------|--------|----------|----------------------|
95+
| toast id | string | ✓ | Id toast for update |
96+
| options | object | ✘ | Options listed below |
97+
* Available options :
98+
* [See: Toast Base Options](#toast-base-option)
99+
* message: toast message for update
100+
101+
### Toast Actions (Message, Success, Info, Warning, Error)
102+
| Parameter | Type | Required | Description |
103+
|-----------|--------|----------|----------------------|
104+
| message | string | ✓ | Message for toast |
105+
| options | object | ✘ | Options listed below |
106+
* Available options :
107+
* [See: Toast Base Options](#toast-base-option)
108+
* id: custom id for a toast. By default in generated automatically.
109+
110+
### <a name="toast-base-option">Toast Base Options</a>
111+
| Parameter | Type | Default | Description |
112+
|------------------------|---------|---------|----------------------|
113+
| renderDefaultComponent | boolean | false | Render default toast component? Use this propery if using custom toast component. |
114+
| type <td colspan=3>same as ToastContainer
115+
| autoClose <td colspan=3>same as ToastContainer
116+
| hideProgressBar <td colspan=3>same as ToastContainer
117+
| position <td colspan=3>same as ToastContainer
118+
| pauseOnHover <td colspan=3>same as ToastContainer
119+
| className <td colspan=3>same as ToastContainer
120+
| bodyClassName <td colspan=3>same as ToastContainer
121+
| progressClassName <td colspan=3>same as ToastContainer
122+
| draggable <td colspan=3>same as ToastContainer
123+
| draggablePercent <td colspan=3>same as ToastContainer
124+
125+
## License
126+
Licensed under MIT

‎externals.d.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
declare module "react-toastify" {
2-
export const toast: any;
3-
export type ToastType = any;
4-
export const ToastContainer: any;
5-
export type ToastContainerProps = any;
2+
export const toast: any;
3+
export type ToastType = any;
4+
export const ToastContainer: any;
5+
export type ToastContainerProps = any;
66
}

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/actions.ts

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,29 @@ import * as types from './types';
22
import {toast, ToastType} from "react-toastify";
33
import uniqueId from './utils/uniqueId';
44
import {
5-
Action, DismissActionPayload, Toast, ToastBaseOptions, ToastMessage, ToastOptions, UpdateActionPayload
5+
Action, DismissActionPayload, Toast, ToastBaseOptions, ToastMessage, ToastOptions, UpdateActionPayload
66
} from './interfaces';
77

88
export const toastActionCreator = (type: ToastType) => {
9-
return (message: string, options: ToastOptions = {}) : Action<Toast> => ({
10-
type: types.TOAST_MESSAGE,
11-
payload: {
12-
id: options.id || uniqueId('toast'),
13-
...options,
14-
message,
15-
type
16-
}
17-
});
9+
return (message: string, options: ToastOptions = {}): Action<Toast> => ({
10+
type: types.TOAST_MESSAGE,
11+
payload: {
12+
id: options.id || uniqueId('toast'),
13+
...options,
14+
message,
15+
type
16+
}
17+
});
1818
};
1919

2020
export const dismiss = (id?: string): Action<DismissActionPayload> => ({
21-
type: types.TOAST_DISMISS,
22-
payload: {id}
21+
type: types.TOAST_DISMISS,
22+
payload: {id}
2323
});
2424

2525
export const update = (id: string, options: ToastBaseOptions & ToastMessage): Action<UpdateActionPayload> => ({
26-
type: types.TOAST_UPDATE,
27-
payload: {id, options}
26+
type: types.TOAST_UPDATE,
27+
payload: {id, options}
2828
});
2929

3030
export const error = toastActionCreator(toast.TYPE.ERROR as ToastType);

‎src/container.tsx

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -8,71 +8,71 @@ import {Toast, StateProps, DispatchProps, ToastIds, OwnProps} from './interfaces
88
type ToasterContainerProps = OwnProps & StateProps & DispatchProps;
99

1010
class ToasterContainer extends React.Component<ToasterContainerProps> {
11-
private _toastIds: ToastIds = {};
11+
private _toastIds: ToastIds = {};
1212

13-
onCloseHandler = (storageToastId: string) => {
14-
const {[storageToastId]: _toastId, ...toastIds} = this._toastIds;
15-
this._toastIds = toastIds;
13+
onCloseHandler = (storageToastId: string) => {
14+
const {[storageToastId]: _toastId, ...toastIds} = this._toastIds;
15+
this._toastIds = toastIds;
1616

17-
toast.dismiss(_toastId);
18-
this.props.dismiss(storageToastId);
19-
};
17+
toast.dismiss(_toastId);
18+
this.props.dismiss(storageToastId);
19+
};
2020

21-
componentWillReceiveProps(nextProps: ToasterContainerProps) {
22-
nextProps.toastList.forEach((toastItem, toastIndex) => {
23-
// new toast
24-
if (!(toastItem.id in this._toastIds)) {
25-
this._toastIds[toastItem.id] = nextProps.toastComponent
26-
? toast(React.createElement(nextProps.toastComponent, toastItem), {
27-
type: toastItem.type,
28-
onClose: () => this.onCloseHandler(toastItem.id)
29-
})
30-
: toast(toastItem.message, {
31-
type: toastItem.type,
32-
onClose: () => this.onCloseHandler(toastItem.id)
33-
});
34-
}
21+
componentWillReceiveProps(nextProps: ToasterContainerProps) {
22+
nextProps.toastList.forEach((toastItem: Toast) => {
23+
// new toast
24+
if (!(toastItem.id in this._toastIds)) {
25+
this._toastIds[toastItem.id] = (nextProps.toastComponent && !toastItem.renderDefaultComponent)
26+
? toast(React.createElement(nextProps.toastComponent, toastItem), {
27+
type: toastItem.type,
28+
onClose: () => this.onCloseHandler(toastItem.id)
29+
})
30+
: toast(toastItem.message, {
31+
type: toastItem.type,
32+
onClose: () => this.onCloseHandler(toastItem.id)
33+
});
34+
}
3535

36-
// update toast
37-
const fountToast = this.props.toastList.find(toast => toast.id === toastItem.id);
38-
if (fountToast && !compare(toastItem, fountToast)) {
39-
toast.update(this._toastIds[toastItem.id], {
40-
type: toastItem.type,
41-
render: nextProps.toastComponent
42-
? React.createElement(nextProps.toastComponent, toastItem)
43-
: undefined
44-
});
45-
}
46-
});
36+
// update toast
37+
const fountToast = this.props.toastList.find(toast => toast.id === toastItem.id);
38+
if (fountToast && !compare(toastItem, fountToast)) {
39+
toast.update(this._toastIds[toastItem.id], {
40+
type: toastItem.type,
41+
render: (nextProps.toastComponent && !toastItem.renderDefaultComponent)
42+
? React.createElement(nextProps.toastComponent, toastItem)
43+
: undefined
44+
});
45+
}
46+
});
4747

48-
// delete toast
49-
this.props.toastList
50-
.filter((toastItem: Toast) => {
51-
const foundItem = nextProps.toastList.find(nextToastItem => nextToastItem.id === toastItem.id);
52-
return !foundItem && toastItem.id in this._toastIds;
53-
})
54-
.forEach((doomedToast) => this.onCloseHandler(doomedToast.id));
55-
}
48+
// delete toast
49+
this.props.toastList
50+
.filter((toastItem: Toast) => {
51+
const foundItem = nextProps.toastList.find(nextToastItem => nextToastItem.id === toastItem.id);
52+
return !foundItem && toastItem.id in this._toastIds;
53+
})
54+
.forEach((doomedToast) => this.onCloseHandler(doomedToast.id));
55+
}
5656

57-
shouldComponentUpdate(nextProps: ToasterContainerProps) {
58-
return this.props !== nextProps;
59-
}
57+
shouldComponentUpdate(nextProps: ToasterContainerProps) {
58+
return this.props !== nextProps;
59+
}
6060

61-
render() {
62-
const {dismiss, toastList, toastComponent, ...rest} = this.props;
61+
render() {
62+
const {dismiss, toastList, toastComponent, ...rest} = this.props;
6363

64-
return (
65-
<ToastContainer {...rest} />
66-
);
67-
}
64+
return (
65+
<ToastContainer {...rest} />
66+
);
67+
}
6868
}
6969

7070
const mapStateToProps = (state): StateProps => ({
71-
toastList: state.toast
71+
toastList: state.toasts
7272
});
7373

7474
const mapDispatchToProps = (dispatch): DispatchProps => ({
75-
dismiss: (id) => dispatch(dismiss(id))
75+
dismiss: (id) => dispatch(dismiss(id))
7676
});
7777

7878
export default connect<StateProps, DispatchProps, OwnProps>(mapStateToProps, mapDispatchToProps)(ToasterContainer);

‎src/index.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import reducer from './reducer';
33
import ToastContainer from './container';
44

55
export {
6-
dismiss,
7-
update,
8-
error,
9-
message,
10-
warning,
11-
success,
12-
info,
13-
reducer as toastReducer,
14-
ToastContainer
6+
dismiss,
7+
update,
8+
error,
9+
message,
10+
warning,
11+
success,
12+
info,
13+
reducer as toastsReducer,
14+
ToastContainer
1515
};

0 commit comments

Comments
 (0)