/**
 *
 * @Demo: Alerts
 * @User: Longjun.Qu
 * @Date: 2018-06-25
 * @Time: 22:17
 *
 */


import React, {Component, Fragment} from 'react';
import {
    Content,
    Div,
    Portlet,
    Section,
    Alert,
    SubHeader
} from 'omega';

export default class Alerts extends Component {
    constructor(props) {
        super(props);
    }

    render() {

        return (
            <Fragment>
                <SubHeader {...{
                    header: {
                        show: true,
                        name: '消息提醒',
                        separator: true
                    },
                    breadcrumbs: {
                        items: [
                            {
                                icon: {
                                    show: true,
                                    name: 'la la-home'
                                }
                            }, {
                                text: {
                                    value: '基础组件',
                                    href: 'javascript:;'
                                }
                            }, {
                                text: {
                                    value: '消息提醒',
                                    href: 'javascript:;'
                                }
                            }
                        ],
                        separator: {
                            show: true,
                            text: {
                                value: '-'
                            }
                        }
                    }
                }}/>
                <Content>
                    <div className="row">
                        <div className="col-xl-6">
                            <Portlet {...{
                                header: {
                                    show: true,
                                    title: '基础提醒'
                                }
                            }} >
                                <Section>
                                    <Alert {...{
                                        title: 'Hello World!',
                                        message: ' This is default alert message box style.',
                                        closeBtn: false
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: false,
                                        alertColor: 'success'
                                    }}/>
                                    <Alert {...{
                                        title: 'Heads up!',
                                        message: ' This alert needs your attention, but it\'s not super important.',
                                        closeBtn: false,
                                        alertColor: 'info'
                                    }}/>
                                    <Alert {...{
                                        title: 'Warning!',
                                        message: ' Better check yourself, you\'re not looking too good.',
                                        closeBtn: false,
                                        alertColor: 'warning'
                                    }}/>
                                    <Alert {...{
                                        title: 'Oh snap!',
                                        message: ' Change a few things up and try submitting again.',
                                        closeBtn: false,
                                        alertColor: 'danger'
                                    }}/>
                                    <Alert {...{
                                        title: 'Brand!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: false,
                                        alertColor: 'brand'
                                    }}/>
                                    <Alert {...{
                                        title: 'Heads up!',
                                        message: ' This alert needs your attention, but it\'s not super important.',
                                        closeBtn: false,
                                        alertColor: 'primary'
                                    }}/>
                                </Section>
                            </Portlet>
                            <Portlet {...{
                                header: {
                                    show: true,
                                    title: '可关闭的提醒'
                                }
                            }} >
                                <Section>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'success'
                                    }}/>
                                    <Alert {...{
                                        title: 'Heads up!',
                                        message: ' This alert needs your attention, but it\'s not super important.',
                                        closeBtn: true,
                                        alertColor: 'info'
                                    }}/>
                                    <Alert {...{
                                        title: 'Warning!',
                                        message: ' Better check yourself, you\'re not looking too good.',
                                        closeBtn: true,
                                        alertColor: 'warning'
                                    }}/>
                                    <Alert {...{
                                        title: 'Oh snap!',
                                        message: ' Change a few things up and try submitting again.',
                                        closeBtn: true,
                                        alertColor: 'danger'
                                    }}/>
                                    <Alert {...{
                                        title: 'Brand!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'brand'
                                    }}/>
                                    <Alert {...{
                                        title: 'Heads up!',
                                        message: ' This alert needs your attention, but it\'s not super important.',
                                        closeBtn: true,
                                        alertColor: 'primary'
                                    }}/>
                                </Section>
                            </Portlet>
                            <Portlet {...{
                                header: {
                                    show: true,
                                    title: '带图标或按钮的提醒'
                                }
                            }} >
                                <Section>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'success',
                                        icon: 'la la-warning',
                                        types: ['outline']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: false,
                                        alertColor: 'primary',
                                        icon: 'la la-warning',
                                        types: ['outline'],
                                        actions: [{
                                            value: 'Fix',
                                            btnColor: 'primary',
                                            size: 'sm',
                                            isWide: true,
                                            btnStyle: 'pill',
                                            closeBtn: true,
                                            _handle: {
                                                onClick: (e) => {
                                                    console.log(e)
                                                }
                                            }
                                        }, {
                                            value: 'Dismiss',
                                            btnColor: 'danger',
                                            size: 'sm',
                                            isWide: true,
                                            btnStyle: 'pill',
                                            _handle: {
                                                onClick: (e) => {
                                                    $(e.target).alert('close')
                                                }
                                            }
                                        }],
                                        actionStyle: {
                                            width: '40%'
                                        }
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'brand',
                                        icon: 'flaticon-exclamation-1',
                                        iconStyle: 'solid',
                                        types: ['outline']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'danger',
                                        icon: 'flaticon-exclamation-1',
                                        iconStyle: 'solid',
                                        types: ['outline']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'accent',
                                        icon: 'la la-warning',
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'warning',
                                        icon: 'la la-warning',
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: false,
                                        alertColor: 'primary',
                                        icon: 'la la-warning',
                                        actions: [{
                                            value: 'Fix',
                                            btnColor: 'warning',
                                            size: 'sm',
                                            isWide: true,
                                            btnStyle: 'pill',
                                            _handle: {
                                                onClick: () => {
                                                    alert('Fixed');
                                                }
                                            }
                                        }]
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: false,
                                        alertColor: 'danger',
                                        icon: 'la la-warning',
                                        actions: [{
                                            value: 'Dismiss',
                                            btnColor: 'outline-light',
                                            size: 'sm',
                                            _handle: {
                                                onClick: () => {
                                                    alert('Click');
                                                }
                                            }
                                        }]
                                    }}/>
                                </Section>
                            </Portlet>
                        </div>
                        <div className="col-xl-6">
                            <Portlet {...{
                                header: {
                                    show: true,
                                    title: '提醒样式'
                                }
                            }} >
                                <Section title="Outline 样式">
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'success',
                                        types: ['outline']
                                    }}/>
                                    <Alert {...{
                                        title: 'Heads up!',
                                        message: ' This alert needs your attention, but it\'s not super important.',
                                        closeBtn: true,
                                        alertColor: 'info',
                                        types: ['outline']
                                    }}/>
                                    <Alert {...{
                                        title: 'Warning!',
                                        message: ' Better check yourself, you\'re not looking too good.',
                                        closeBtn: true,
                                        alertColor: 'warning',
                                        types: ['outline']
                                    }}/>
                                    <Alert {...{
                                        title: 'Oh snap!',
                                        message: ' Change a few things up and try submitting again.',
                                        closeBtn: true,
                                        alertColor: 'danger',
                                        types: ['outline']
                                    }}/>
                                </Section>
                                <Section title="Outline 2x 样式">
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'success',
                                        types: ['outline', 'outline-2x']
                                    }}/>
                                    <Alert {...{
                                        title: 'Heads up!',
                                        message: ' This alert needs your attention, but it\'s not super important.',
                                        closeBtn: true,
                                        alertColor: 'info',
                                        types: ['outline', 'outline-2x']
                                    }}/>
                                    <Alert {...{
                                        title: 'Warning!',
                                        message: ' Better check yourself, you\'re not looking too good.',
                                        closeBtn: true,
                                        alertColor: 'warning',
                                        types: ['outline', 'outline-2x']
                                    }}/>
                                    <Alert {...{
                                        title: 'Oh snap!',
                                        message: ' Change a few things up and try submitting again.',
                                        closeBtn: true,
                                        alertColor: 'danger',
                                        types: ['outline', 'outline-2x']
                                    }}/>
                                </Section>
                                <Section title="Square 样式">
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'primary',
                                        types: ['square']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'success',
                                        types: ['square', 'outline-2x']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'info',
                                        types: ['square', 'outline-2x']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'success',
                                        icon: 'la la-warning',
                                        types: ['air', 'square']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        icon: 'la la-warning',
                                        types: ['air', 'square']
                                    }}/>
                                </Section>
                                <Section title="Air 样式">
                                    <Alert {...{
                                        title: 'Heads up! ',
                                        message: ' This alert needs your attention, but it\'s not super important.',
                                        closeBtn: true,
                                        types: ['air', 'square']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!  ',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'primary',
                                        types: ['air', 'square']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!  ',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'info',
                                        types: ['air', 'square']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!  ',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'danger',
                                        types: ['air']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!  ',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'warning',
                                        types: ['air', 'outline-2x']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!  ',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'metal',
                                        types: ['air', 'outline-2x']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!  ',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'primary',
                                        types: ['air', 'outline']
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!  ',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        alertColor: 'success',
                                        types: ['air'],
                                        icon: 'la la-warning'
                                    }}/>
                                    <Alert {...{
                                        title: 'Well done!  ',
                                        message: ' You successfully read this important alert message.',
                                        closeBtn: true,
                                        types: ['air'],
                                        icon: 'la la-warning'
                                    }}/>
                                </Section>
                            </Portlet>
                        </div>
                    </div>
                </Content>
            </Fragment>
        );
    }
}