forked from acouzens/open5gs
add snackbar
This commit is contained in:
parent
899234ce25
commit
e0c27b86b1
|
@ -37,6 +37,7 @@
|
||||||
"react-icons": "^2.2.5",
|
"react-icons": "^2.2.5",
|
||||||
"react-immutable-proptypes": "^2.1.0",
|
"react-immutable-proptypes": "^2.1.0",
|
||||||
"react-jsonschema-form": "^0.49.0",
|
"react-jsonschema-form": "^0.49.0",
|
||||||
|
"react-notification": "^6.7.1",
|
||||||
"react-onclickoutside": "^5.11.1",
|
"react-onclickoutside": "^5.11.1",
|
||||||
"react-redux": "^5.0.5",
|
"react-redux": "^5.0.5",
|
||||||
"react-transition-group": "^1.1.3",
|
"react-transition-group": "^1.1.3",
|
||||||
|
|
|
@ -0,0 +1,70 @@
|
||||||
|
import { Component } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
import { Notification } from 'react-notification';
|
||||||
|
|
||||||
|
class Snackbar extends Component {
|
||||||
|
static propTypes = {
|
||||||
|
isActive: PropTypes.bool,
|
||||||
|
message: PropTypes.string
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = this.getStateFromProps(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
this.setState(this.getStateFromProps(this.props));
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) {
|
||||||
|
console.log(nextProps);
|
||||||
|
this.setState(this.getStateFromProps(nextProps));
|
||||||
|
}
|
||||||
|
|
||||||
|
getStateFromProps(props) {
|
||||||
|
const {
|
||||||
|
isActive
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return {
|
||||||
|
isActive
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
isActive
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const {
|
||||||
|
message
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Notification
|
||||||
|
isActive={isActive}
|
||||||
|
message={message}
|
||||||
|
onDismiss={() => this.setState({ isActive: false })}
|
||||||
|
barStyle={{
|
||||||
|
left: '50%',
|
||||||
|
bottom: '-100%',
|
||||||
|
font: '',
|
||||||
|
borderRadius: '0px',
|
||||||
|
WebkitTransform: 'translate(-50%, 0)',
|
||||||
|
MozTransform: 'translate(-50%, 0)',
|
||||||
|
msTransform: 'translate(-50%, 0)',
|
||||||
|
OTransform: 'translate(-50%, 0)',
|
||||||
|
transform: 'translate(-50%, 0)'
|
||||||
|
}}
|
||||||
|
activeBarStyle={{
|
||||||
|
bottom: '0'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Snackbar;
|
|
@ -14,6 +14,7 @@ import Blank from './Shared/Blank';
|
||||||
import Button from './Shared/Button';
|
import Button from './Shared/Button';
|
||||||
import withRipple from './Shared/withRipple';
|
import withRipple from './Shared/withRipple';
|
||||||
import Form from './Shared/Form';
|
import Form from './Shared/Form';
|
||||||
|
import Snackbar from './Shared/Snackbar';
|
||||||
|
|
||||||
import * as Subscriber from './Subscriber';
|
import * as Subscriber from './Subscriber';
|
||||||
|
|
||||||
|
@ -34,6 +35,7 @@ export {
|
||||||
Button,
|
Button,
|
||||||
withRipple,
|
withRipple,
|
||||||
Form,
|
Form,
|
||||||
|
Snackbar,
|
||||||
|
|
||||||
Subscriber
|
Subscriber
|
||||||
}
|
}
|
||||||
|
|
|
@ -3471,6 +3471,12 @@ react-jsonschema-form@^0.49.0:
|
||||||
prop-types "^15.5.8"
|
prop-types "^15.5.8"
|
||||||
setimmediate "^1.0.5"
|
setimmediate "^1.0.5"
|
||||||
|
|
||||||
|
react-notification@^6.7.1:
|
||||||
|
version "6.7.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-notification/-/react-notification-6.7.1.tgz#fec45cc6d369f4bbf7b4072fe58ddb3bc262c898"
|
||||||
|
dependencies:
|
||||||
|
prop-types "^15.5.10"
|
||||||
|
|
||||||
react-onclickoutside@^5.11.1:
|
react-onclickoutside@^5.11.1:
|
||||||
version "5.11.1"
|
version "5.11.1"
|
||||||
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-5.11.1.tgz#00314e52567cf55faba94cabbacd119619070623"
|
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-5.11.1.tgz#00314e52567cf55faba94cabbacd119619070623"
|
||||||
|
|
Loading…
Reference in New Issue