diff --git a/src/App.js b/src/App.js
index 7a41bd8..aef9b0d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,15 @@
import React, { Component } from 'react';
-import { message } from 'antd';
+//import { message } from 'antd';
import { observer } from 'mobx-react';
+import { DataStore } from './DataStore';
import CoverLyrics from './components/CoverLyrics';
import SongList from './components/SongList';
import ControlBar from './components/ControlBar';
import SearchBar from './components/SearchBar';
-import './App.css';
-
-import { DataStore } from './DataStore';
import PlayList from './components/PlayList';
+import Alert from './components/Alert';
+
+import './App.css';
@observer
class App extends Component {
@@ -20,19 +21,32 @@ class App extends Component {
componentDidMount() {
window.addEventListener('resize', this.onWindowResize);
this.onWindowResize();
+ //DataStore.errMassge = '测试报错！';
+ //console.log(DataStore.errMassge)
}
componentDidUpdate() {
- if(DataStore.errMassge) {
- message.warning(DataStore.errMassge);
- DataStore.errMassge = '';
- }
+ //if(DataStore.errMassge) {
+ //message.warning(DataStore.errMassge);
+ //DataStore.errMassge = '';
+ //}
+ //DataStore.errMassge = '测试报错！';
+ // setInterval(() => {
+ // DataStore.errMassge = '测试报错！';
+ // console.log(DataStore.errMassge)
+ // },2000);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onWindowResize)
}
+ alertClose = (errMassge) => {
+ if(errMassge) {
+ errMassge = '';
+ }
+ }
+
render() {
return (
@@ -50,6 +64,9 @@ class App extends Component {
+
);
}
diff --git a/src/DataStore.js b/src/DataStore.js
index 4fe2c89..bb7b783 100644
--- a/src/DataStore.js
+++ b/src/DataStore.js
@@ -232,7 +232,12 @@ class DataPageStore {
}
set errMassge(value) {
- this._errMassge = value;
+ if(typeof(value) === 'string') {
+ this._errMassge = value;
+ }
+ if(typeof(value) === 'object') {
+ this._errMassge = value.message;
+ }
}
get keyword() {
diff --git a/src/components/Alert.css b/src/components/Alert.css
new file mode 100644
index 0000000..87da58c
--- /dev/null
+++ b/src/components/Alert.css
@@ -0,0 +1,28 @@
+.alert-panel {
+ background-color: rgba(0,0,0,.3);
+ border-radius: 6px;
+ padding: 10px 15px;
+ color: #fff;
+ font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-size: 14px;
+ position: fixed;
+ z-index: 1000;
+ top: 50%;
+ left: 50%;
+}
+
+.alert-panel > div {
+ float: left;
+}
+
+.alert-panel > .alert-icon-box,.alert-panel > .alert-icon-close {
+ width: 30px;
+ height: 30px;
+ cursor: pointer;
+}
+
+.alert-panel > .alert-massge {
+ line-height: 30px;
+ padding: 0 15px;
+ margin-right: 5px;
+}
\ No newline at end of file
diff --git a/src/components/Alert.js b/src/components/Alert.js
new file mode 100644
index 0000000..b0d4063
--- /dev/null
+++ b/src/components/Alert.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+
+import './Alert.css';
+
+class Alert extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ text: this.props.text || '',
+ keep: this.props.keep || false,
+ timeOut: this.props.timeOut || 3000,
+ icon: this.props.icon || 'info',
+ panelWidth: 0,
+ panelHeight: 0,
+ closeCallBack: this.props.closeCallBack || null
+ };
+ }
+
+ setTimeId = 0;
+
+ componentDidMount() {
+ this.setAlertSize();
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if(nextProps.text) {
+ this.setState({
+ text: nextProps.text,
+ keep: nextProps.keep || false,
+ timeOut: nextProps.timeOut || 3000,
+ icon: nextProps.icon || 'info',
+ closeCallBack: nextProps.closeCallBack || null
+ });
+
+ if(!nextProps.keep) {
+ this.setTimeId = setTimeout(()=>{
+ this.hide();
+ },this.state.timeOut);
+ }
+ }
+ }
+
+ componentWillUpdate() {
+
+ }
+
+ componentDidUpdate() {
+ this.setAlertSize();
+ }
+
+ setAlertSize = () => {
+ if(this.refs.panel) {
+ if(this.state.panelWidth !== this.refs.panel.offsetWidth || this.state.panelHeight !== this.refs.panel.offsetHeight) {
+ this.setState({
+ panelWidth: this.refs.panel.offsetWidth,
+ panelHeight: this.refs.panel.offsetHeight
+ });
+ }
+ }
+ }
+
+ closeMassge = (event) => {
+ clearTimeout(this.setTimeId);
+ this.hide();
+ }
+
+ hide = () => {
+ this.setState({text:''});
+ if(this.state.closeCallBack) this.state.closeCallBack();
+ }
+
+ iconType = (type) => {
+ if(type === 'info') {
+ return (
+
+ );
+ }
+ if(type === 'err') {
+ return (
+
+ );
+ }
+
+ if(type === 'success') {
+ return (
+
+ );
+ }
+ }
+
+ render() {
+ if(this.state.text) {
+ return (
+
+
+ {this.iconType(this.state.icon)}
+
+
{this.state.text}
+
+