zarm-mobile
Version:
UI for react.js
107 lines (94 loc) • 3.04 kB
JSX
import React, { Component } from 'react';
import Header from '../components/Header';
import { Panel, Cell, Toast, Loading, Button, Icon } from '../../components';
class ToastPage extends Component {
constructor(props) {
super(props);
this.state = {
toast: {
visible: false,
onMaskClick: () => {
const toast = this.state.toast;
toast.visible = false;
this.setState({ toast });
},
},
loading: false,
};
}
render() {
const { toast } = this.state;
return (
<div className="toast-page">
<Header title="轻提示 Toast" />
<main>
<Panel>
<Panel.Header>
<Panel.Title>提示信息</Panel.Title>
</Panel.Header>
<Panel.Body>
<Cell
description={
<Button
size="xs"
theme="error"
onClick={() => {
toast.visible = true;
toast.duration = 3000;
toast.children = '默认3秒自动关闭';
this.setState({ toast });
}}>开启</Button>
}>错误提示</Cell>
<Cell
description={
<Button
size="xs"
theme="success"
onClick={() => {
toast.visible = true;
toast.duration = 3000;
toast.children = (
<div>
<Icon type="right-round-fill" style={{ fontSize: '3rem' }} />
<div style={{ marginBottom: 5 }}>预约成功</div>
</div>
);
this.setState({ toast });
}}>开启</Button>
}>成功提示</Cell>
<Cell
description={
<Button
size="xs"
onClick={() => {
toast.visible = true;
toast.duration = 10000;
toast.children = '指定10秒自动关闭';
this.setState({ toast });
}}>开启</Button>
}>指定关闭时间</Cell>
</Panel.Body>
</Panel>
<Panel>
<Panel.Header>
<Panel.Title>加载中</Panel.Title>
</Panel.Header>
<Panel.Body>
<Cell
description={
<Button
size="xs"
onClick={() => this.setState({ loading: true })}>
开启
</Button>
}>Loading</Cell>
</Panel.Body>
</Panel>
<Toast {...this.state.toast} />
<Loading visible={this.state.loading} />
</main>
</div>
);
}
}
export default ToastPage;