First steps with <Snackbar/>
parent
4430c0ab80
commit
edee162e37
|
@ -0,0 +1,51 @@
|
||||||
|
import React from 'react';
|
||||||
|
import style from './style';
|
||||||
|
|
||||||
|
import FontIcon from '../font_icon';
|
||||||
|
|
||||||
|
export default React.createClass({
|
||||||
|
displayName: 'Slider',
|
||||||
|
|
||||||
|
propTypes: {
|
||||||
|
actions: React.PropTypes.array,
|
||||||
|
caption: React.PropTypes.string,
|
||||||
|
className: React.PropTypes.string,
|
||||||
|
icon: React.PropTypes.string,
|
||||||
|
timeout: React.PropTypes.number,
|
||||||
|
type: React.PropTypes.string
|
||||||
|
},
|
||||||
|
|
||||||
|
getDefaultProps () {
|
||||||
|
return {
|
||||||
|
className: '',
|
||||||
|
timeout: 10
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState () {
|
||||||
|
return {
|
||||||
|
active: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
componentDidMount () {
|
||||||
|
setInterval( function () {
|
||||||
|
console.log('destroy');
|
||||||
|
}, this.props.timeout * 1000)
|
||||||
|
},
|
||||||
|
|
||||||
|
render () {
|
||||||
|
let className = `${style.root} ${style[this.props.type]}`;
|
||||||
|
if (this.props.className) className += ` ${this.props.className}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div data-react-toolbox='snackbar' className={className}>
|
||||||
|
<FontIcon value={this.props.icon} className={style.icon} />
|
||||||
|
<small>{this.props.caption}</small>
|
||||||
|
<nav>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
|
@ -0,0 +1,17 @@
|
||||||
|
@import "../variables";
|
||||||
|
@import "../mixins";
|
||||||
|
$snackbar-background-color: $color-overlay;
|
||||||
|
$snackbar-color: unquote("rgb(#{$color-white})");
|
||||||
|
|
||||||
|
.root {
|
||||||
|
padding: $offset;
|
||||||
|
margin-top: $offset;
|
||||||
|
background-color: $snackbar-background-color;
|
||||||
|
color: $snackbar-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-right: $offset;
|
||||||
|
}
|
|
@ -0,0 +1,21 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Snackbar from '../../components/snackbar';
|
||||||
|
|
||||||
|
export default React.createClass({
|
||||||
|
displayName: 'ButtonTest',
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<h5>Snackbars & Toasts</h5>
|
||||||
|
<p>lorem ipsum...</p>
|
||||||
|
<Snackbar caption='Message sent' />
|
||||||
|
<Snackbar caption='Message sent' icon='question-answer' />
|
||||||
|
<Snackbar caption='Marked as read' />
|
||||||
|
<Snackbar caption='Marked as read' />
|
||||||
|
|
||||||
|
<p>lorem ipsum...</p>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
Loading…
Reference in New Issue