/
ConfirmDialog.jsx
100 lines (90 loc) · 2.24 KB
/
ConfirmDialog.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React, { Component } from 'react';
import { Dialog, Button } from '@alifd/next';
import IceContainer from '@icedesign/container';
import { enquireScreen } from 'enquire-js';
export default class ConfirmDialog extends Component {
static displayName = 'ConfirmDialog';
constructor(props) {
super(props);
this.state = {
visible: false,
isMobile: false,
};
}
componentDidMount() {
this.enquireScreenRegister();
}
enquireScreenRegister = () => {
const mediaCondition = 'only screen and (max-width: 720px)';
enquireScreen((mobile) => {
this.setState({
isMobile: mobile,
});
}, mediaCondition);
};
showDialog = () => {
this.setState({
visible: true,
});
};
hideDialog = () => {
this.setState({
visible: false,
});
};
render() {
const { isMobile } = this.state;
const dialogStyle = {
width: isMobile ? '320px' : '640px',
height: isMobile ? 'auto' : '340px',
};
return (
<IceContainer>
<Dialog
className="confirm-dialog"
style={{ ...dialogStyle }}
autoFocus={false}
footerAlign="center"
title="删除提示"
onOk={this.hideDialog}
onCancel={this.hideDialog}
onClose={this.hideDialog}
{...this.props}
visible={this.state.visible}
>
<div style={styles.dialogContent}>
<img
style={styles.icon}
src="//img.alicdn.com/tfs/TB1PTrfb_nI8KJjy0FfXXcdoVXa-52-52.png"
srcSet="//img.alicdn.com/tfs/TB1c5feb46I8KJjy0FgXXXXzVXa-104-104.png"
alt=""
/>
<p style={styles.text}>
{this.props.text ? this.props.text : '你确定要删除此条内容吗?'}
</p>
</div>
</Dialog>
<Button type="primary" onClick={this.showDialog}>
显示 Dialog
</Button>
</IceContainer>
);
}
}
const styles = {
icon: {
width: '52px',
height: '52px',
marginTop: '26px',
marginBottom: '10px',
},
dialogContent: {
height: '160px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
text: {
fontSize: '16px',
},
};