New approach using instance methods show & hide.
parent
c6631787b2
commit
493df0eb95
|
@ -8,51 +8,66 @@ export default React.createClass({
|
|||
displayName: 'Slider',
|
||||
|
||||
propTypes: {
|
||||
action: React.PropTypes.object,
|
||||
active: React.PropTypes.bool,
|
||||
label: React.PropTypes.string,
|
||||
className: React.PropTypes.string,
|
||||
action: React.PropTypes.string,
|
||||
icon: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
onClick: React.PropTypes.func,
|
||||
timeout: React.PropTypes.number,
|
||||
type: React.PropTypes.string
|
||||
},
|
||||
|
||||
getDefaultProps () {
|
||||
return {
|
||||
active: false,
|
||||
className: '',
|
||||
timeout: 10
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState () {
|
||||
return {
|
||||
active: this.props.active
|
||||
active: false
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount () {
|
||||
setTimeout(() => {
|
||||
this.setState({ active: false });
|
||||
}, this.props.timeout * 1000)
|
||||
handleClick (event) {
|
||||
this.setState({active: false});
|
||||
if (this.props.onClick) {
|
||||
this.props.onClick(event, this);
|
||||
}
|
||||
},
|
||||
|
||||
componentWillReceiveProps (next_props) {
|
||||
this.setState({active: next_props.active});
|
||||
renderButton () {
|
||||
if (this.props.action) {
|
||||
return (
|
||||
<Button
|
||||
label={this.props.action}
|
||||
type='flat'
|
||||
className={style.button}
|
||||
onClick={this.handleClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
render () {
|
||||
let className = `${style.root} ${style[this.props.type]}`;
|
||||
if (this.props.active) className += ` ${style.active}`;
|
||||
if (this.state.active) className += ` ${style.active}`;
|
||||
if (this.props.className) className += ` ${this.props.className}`;
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='snackbar' className={className}>
|
||||
{ this.props.icon ? <FontIcon value={this.props.icon} className={style.icon} /> : null }
|
||||
<span className={style.label}>{this.props.label}</span>
|
||||
{ this.props.action ? <Button {...this.props.action} type='flat' className={style.button} /> : null }
|
||||
{ this.renderButton() }
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
// -- Extends
|
||||
hide () {
|
||||
this.setState({active: false});
|
||||
},
|
||||
|
||||
show () {
|
||||
this.setState({active: true});
|
||||
if (this.props.timeout) {
|
||||
setTimeout(() => {
|
||||
this.setState({ active: false });
|
||||
}, this.props.timeout * 1000);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
@ -4,22 +4,14 @@ import Snackbar from '../../components/snackbar';
|
|||
|
||||
export default React.createClass({
|
||||
|
||||
displayName: 'ButtonTest',
|
||||
displayName: 'SnackbarTest',
|
||||
|
||||
getInitialState () {
|
||||
return {
|
||||
snackbar: false,
|
||||
toast: false
|
||||
};
|
||||
},
|
||||
|
||||
handleClick (event) {
|
||||
console.log('handleClick', event);
|
||||
this.setState({ active: false });
|
||||
handleClick (event, snackbar) {
|
||||
console.log('handleClick', event, snackbar);
|
||||
},
|
||||
|
||||
handleSnackbar () {
|
||||
this.setState({ active: true });
|
||||
this.refs.snackbar.show();
|
||||
},
|
||||
|
||||
render () {
|
||||
|
@ -29,10 +21,11 @@ export default React.createClass({
|
|||
<p>lorem ipsum...</p>
|
||||
<Button label='Show snackbar' onClick={this.handleSnackbar} type='raised' />
|
||||
<Snackbar
|
||||
action={{label: 'Push', onClick: this.handleClick}}
|
||||
active={this.state.active}
|
||||
ref='snackbar'
|
||||
action='Dismiss'
|
||||
icon='question-answer'
|
||||
label='Snackbar action cancel'
|
||||
onClick={this.handleClick}
|
||||
type='cancel'
|
||||
/>
|
||||
</section>
|
||||
|
|
Loading…
Reference in New Issue