apeman-react-toast/doc/demo/demo.component.jsx

apeman react package for toast components.

"use strict";

import React, {PropTypes as types} from 'react';

import ApToast from '../../lib/ap_toast';
import ApInfoToast from '../../lib/ap_info_toast';
import ApWarnToast from '../../lib/ap_warn_toast';
import ApErrorToast from '../../lib/ap_error_toast';
import ApToastGroup from '../../lib/ap_toast_group';
import {ApButton} from 'apeman-react-basic';

const DISMISS_DURATION = 20 * 1000;
let Demo = React.createClass({
    getInitialState() {
        return {
            message: "Demo message 1",
            count: 0
        }
    },
    render() {
        let s = this,
            state = s.state;
        return (
            <div>
                <div style={{textAlign:'center'}}>
                    <ApButton onTap={s.showToast}>Show toasts</ApButton>
                </div>
                <ApToastGroup>
                    <ApToast message={state.message} duration={DISMISS_DURATION}/>
                    <ApInfoToast message={state.message} duration={DISMISS_DURATION}/>
                    <ApWarnToast message={state.message} duration={DISMISS_DURATION}/>
                    <ApErrorToast message={state.message} duration={DISMISS_DURATION}/>
                </ApToastGroup>
            </div>
        );
    },
    showToast() {
        let s = this,
            state = s.state;

        s.setState({
            message: `Demo message ${state.count}`,
            count: state.count + 1
        })
    }
});

module.exports = Demo;