Skip to content

Commit b11bb58

Browse files
czewailczewail
committed
update vision
1 parent 9821f28 commit b11bb58

File tree

5 files changed

+225
-52
lines changed

5 files changed

+225
-52
lines changed

‎README.md

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# Toast for React.js.
2+
[中文 README](README_ZH.md)
23
## Installation
34
use npm
45
```sh
@@ -17,8 +18,8 @@ just do the method
1718
toast.show('i`am a toast!!!');
1819
```
1920
## Options
20-
toast.show function has `message`, `type` attributes
21-
`toast.show(message, type)`
21+
toast.show function has `message`, `type`, `config` attributes
22+
`toast.show(message, type, config)`
2223

2324
`message` is the toast content.
2425

@@ -29,6 +30,16 @@ the `message` attribute must be set
2930
- `success` render success style.
3031
- `warning` render warning style.
3132
- `error` render error style.
33+
- `info` render info style.
3234

35+
`config` is the config set, it is a object
36+
37+
- `timeout` after the time, component will unmount. default value is `3000`
38+
- `position` the place where will show the toast. default value is `default`
39+
* `top` top space.
40+
* `bottom` bottom space.
41+
* `default` middle-bottom space.
42+
- `backgroundColor` custom background-color, it will replace `type` attr's style.
43+
- `textColor` custom color, it will replace `type` attr's style.
3344
## wait more ability ...
3445

‎README_ZH.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# React.js的简易提示信息.
2+
[English README](README.md)
3+
## 安装
4+
使用 npm
5+
```sh
6+
$ npm install ppeerit-react-toast --save
7+
```
8+
## 引入到项目中
9+
```js
10+
// ES6
11+
// ReactToast 是一个react组件，最好将只放到较顶层的DOM中
12+
// toast 是一个对象，里面包含了操作toast的函数
13+
import ReactToast, {toast} from 'ppeerit-react-toast';
14+
```
15+
## 显示提示信息
16+
引入组件后，只需简单的调用函数即可
17+
```js
18+
toast.show('这是一个提示信息!!!');
19+
```
20+
## 参数
21+
toast.show 函数有 `message`, `type`, `config` 3个参数
22+
`toast.show(message, type, config)`
23+
24+
`message` 为显示的内容.
25+
26+
注意： `message` 属性为必须设置
27+
28+
`type` 预置以下可选属性:
29+
30+
- `success` 显示成功的样式.
31+
- `warning` 显示警告的样式.
32+
- `error` 显示错误的样式.
33+
- `info` 显示默认信息的样式.
34+
35+
`config` 是其他配置参数，以下参数为可选参数：
36+
37+
- `timeout` 显示提示信息的持续时间，默认为 `3000`
38+
- `position` 显示提示信息的位置，默认选择 `default`，可选：
39+
* `top` 顶部提示.
40+
* `bottom` 底部提示.
41+
* `default` 中下部分提示.
42+
- `backgroundColor` 提示信息的自定义背景色，此设置会覆盖 `type` 属性的样式.
43+
- `textColor` 提示信息的字体颜色, 此设置会覆盖 `type` 属性的样式.
44+
45+
46+
## 更多功能开发中 ...
47+

‎src/config.js

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1+
// export render dom id
2+
export const wrapper = 'toast-wrapper'
3+
// export duration time
4+
export const duration = 500
15
// default options
2-
export const options = {
3-
wrapperId: 'toast-wrapper',
4-
defaultTimeout: 3000,
5-
animationDuration: 300
6+
export let options = {
7+
timeout: 3000,
8+
position: 'top',
9+
backgroundColor: null,
10+
textColor: null
611
}
712
// default colors
813
export const colors = {
914
white: 'white',
1015
error: '#E85742',
1116
success: '#55CA92',
1217
warning: '#F5E273',
13-
gray: '#333333'
18+
gray: '#333333',
19+
black: 'black'
1420
}

‎src/index.js

Lines changed: 80 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,70 @@ import assign from 'object-assign'
66

77
import {
88
containerStyle,
9+
containerTopStyle,
10+
containerBottomStyle,
11+
containerDefaultStyle,
912
contentBaseStyle,
1013
contentSuccessStyle,
1114
contentErrorStyle,
1215
contentWarningStyle,
13-
contentDefaultStyle,
14-
transformShowStyle,
15-
transformHideStyle
16+
contentInfoStyle,
17+
animateDownStyleToHide,
18+
animateDownStyleToShow,
19+
animateUpStyleToHide,
20+
animateUpStyleToShow,
21+
animateFadeStyleToHide,
22+
animateFadeStyleToShow
1623
} from './styles'
1724
import {
25+
wrapper,
26+
duration,
1827
options
1928
} from './config'
2029

2130
class Toast extends React.Component {
22-
constructor() {
23-
super()
31+
constructor(props) {
32+
super(props)
2433
this.state = {
25-
contentStyleExt: null
34+
containerStyleExt: this.setContainerStyle().container
2635
}
2736
}
28-
37+
// set container style
38+
setContainerStyle() {
39+
// create style object
40+
let style = {}
41+
style.animate = {}
42+
// switch position
43+
switch (this.props.position) {
44+
case 'top':
45+
style.container = assign({}, containerStyle, containerTopStyle)
46+
style.animate.show = assign({}, animateDownStyleToShow)
47+
style.animate.hide = assign({}, animateDownStyleToHide)
48+
break
49+
case 'bottom':
50+
style.container = assign({}, containerStyle, containerBottomStyle)
51+
style.animate.show = assign({}, animateUpStyleToShow)
52+
style.animate.hide = assign({}, animateUpStyleToHide)
53+
break
54+
case 'default':
55+
style.container = assign({}, containerStyle, containerDefaultStyle)
56+
style.animate.show = assign({}, animateFadeStyleToShow)
57+
style.animate.hide = assign({}, animateFadeStyleToHide)
58+
break
59+
default:
60+
style.container = assign({}, containerStyle, containerDefaultStyle)
61+
style.animate.show = assign({}, animateFadeStyleToShow)
62+
style.animate.hide = assign({}, animateFadeStyleToHide)
63+
break
64+
}
65+
// return style
66+
return style
67+
}
68+
// set content style
2969
setContentStyle() {
70+
// create style object
3071
let style = {}
72+
// switch type
3173
switch (this.props.type) {
3274
case 'success':
3375
style = assign({}, contentBaseStyle, contentSuccessStyle)
@@ -38,50 +80,56 @@ class Toast extends React.Component {
3880
case 'warning':
3981
style = assign({}, contentBaseStyle, contentWarningStyle)
4082
break
83+
case 'info':
84+
style = assign({}, contentBaseStyle, contentInfoStyle)
85+
break
4186
default:
4287
style = assign({}, contentBaseStyle)
4388
break
4489
}
90+
// if set backgroundColor attr
91+
if (this.props.backgroundColor) {
92+
style = assign({}, style, {backgroundColor: this.props.backgroundColor})
93+
}
94+
// if set textColor attr
95+
if (this.props.textColor) {
96+
style = assign({}, style, {color: this.props.textColor})
97+
}
98+
// return style
4599
return style
46100
}
47-
48101
// after component mount
49102
componentDidMount() {
50-
// set container base style
51-
this.setState({
52-
contentStyleExt: containerStyle
53-
})
54-
// show toast effect style
103+
let _containerStyle = this.setContainerStyle()
104+
// // show toast effect style
55105
setTimeout(() => {
56106
this.setState({
57-
contentStyleExt: assign({}, containerStyle, transformShowStyle)
107+
containerStyleExt: assign({}, _containerStyle.container, _containerStyle.animate.show)
58108
})
59109
}, 100)
60110
// hide toast effect style, do it after timeout
61111
setTimeout(() => {
62112
this.setState({
63-
contentStyleExt: assign({}, containerStyle, transformHideStyle)
113+
containerStyleExt: assign({}, _containerStyle.container, _containerStyle.animate.hide)
64114
})
65-
}, options.defaultTimeout)
115+
}, this.props.timeout)
66116
}
67117

68118
// render component
69119
render() {
70120
let {text} = this.props
71-
let contentStyle = this.setContentStyle()
121+
let _contentStyle = this.setContentStyle()
72122
return (
73-
<div style={this.state.contentStyleExt}>
74-
<span style={contentStyle}>{text}</span>
123+
<div style={this.state.containerStyleExt}>
124+
<span style={_contentStyle}>{text}</span>
75125
</div>
76126
)
77127
}
78128
}
79129
// component prop types
80130
Toast.PropTypes = {
81131
text: PropTypes.string,
82-
timeout: PropTypes.number,
83132
type: PropTypes.string,
84-
color: PropTypes.object,
85133
style: PropTypes.oneOfType([
86134
PropTypes.object,
87135
PropTypes.bool
@@ -92,33 +140,34 @@ Toast.PropTypes = {
92140
export default class extends React.Component {
93141
render() {
94142
return (
95-
<div id={options.wrapperId}></div>
143+
<div id={wrapper}></div>
96144
);
97145
}
98146
}
99147

100148
// mount toast to wrapper dom
101-
function mountToast(text, type) {
149+
function mountToast(text, type, config) {
102150
ReactDOM.render(
103-
<Toast text={text} type={type}/>,
104-
document.getElementById(options.wrapperId)
151+
<Toast text={text} type={type} {...config} />,
152+
document.getElementById(wrapper)
105153
);
106154
}
107155

108156
// un mount toast to wrapper dom
109157
function umountToast() {
110-
ReactDOM.unmountComponentAtNode(document.getElementById(options.wrapperId))
158+
ReactDOM.unmountComponentAtNode(document.getElementById(wrapper))
111159
}
112160

113161
// show animated toast
114-
function show(text, type) {
115-
if (!document.getElementById(options.wrapperId).hasChildNodes()) {
162+
function show(text, type, config) {
163+
let newConfig = assign({}, options, config)
164+
if (!document.getElementById(wrapper).hasChildNodes()) {
116165
// mount toast
117-
mountToast(text, type)
166+
mountToast(text, type, newConfig)
118167
// un mount after timeout
119-
setTimeout(function () {
168+
setTimeout(() => {
120169
umountToast()
121-
}, options.defaultTimeout + options.animationDuration)
170+
}, newConfig.timeout + duration)
122171
return true
123172
}
124173
return false

0 commit comments

Comments
 (0)