forked from react-component/dialog
/
draggable.tsx
64 lines (60 loc) · 1.79 KB
/
draggable.tsx
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
import 'bootstrap/dist/css/bootstrap.css';
import '../assets/bootstrap.less';
import * as React from 'react';
import Draggable from 'react-draggable';
import Dialog from '../src/DialogWrap';
const MyControl = () => {
const [visible, setVisible] = React.useState(false);
const [disabled, setDisabled] = React.useState(true);
const onClick = () => {
setVisible(true);
}
const onClose = () => {
setVisible(false);
}
return (
<div style={{ margin: 20 }}>
<p>
<button type="button" className="btn btn-primary" onClick={onClick}>show dialog</button>
</p>
<Dialog
visible={visible}
animation="slide-fade"
maskAnimation="fade"
onClose={onClose}
style={{ width: 600 }}
title={(
<div
style={{
width: '100%',
cursor: 'pointer',
}}
onMouseOver={() => {
if (disabled){
setDisabled(false)
}
}}
onMouseOut={() => {
setDisabled(true)
}}
// fix eslintjsx-a11y/mouse-events-have-key-events
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
onFocus={ () => {} }
onBlur={ () => {}}
// end
>modal</div>
)}
modalRender={modal => <Draggable disabled={disabled}>{modal}</Draggable>}
>
<div
style={{
height: 200,
}}
>
Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.
</div>
</Dialog>
</div>
);
};
export default MyControl;