-
Notifications
You must be signed in to change notification settings - Fork 66
/
sideCar.js
71 lines (58 loc) · 1.64 KB
/
sideCar.js
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
import React, {Component} from "react";
import {sidecar} from "use-sidecar";
import {FocusLockUI} from "../src/index";
const styles = {
fontFamily: "sans-serif",
textAlign: "center",
fontSize: "16px"
};
const bg = {
backgroundColor: '#FEE'
};
const FocusLockSidecar = sidecar(() => import("../src/sidecar"));
class Trap extends Component {
state = {
disabled: true
}
toggle = () => this.setState({disabled: !this.state.disabled});
render() {
const {disabled} = this.state;
return (
<FocusLockUI
disabled={this.state.disabled}
sideCar={FocusLockSidecar}
>
{disabled && <div>
! this is a <b>real trap</b>.<br/>
We will steal your focus ! <br/><br/>
<button onClick={this.toggle}>!ACTIVATE THE TRAP!</button>
<br/>
<br/>
</div>
}
You will cycle over this. Never leaving <br/>
<input placeholder="input1"/>
<input placeholder="input2"/>
<input placeholder="input3"/> <br/>
<button>A BUTTON</button>
<br/>
<a href='#'>link somethere</a> <br/>
{!disabled && <div>
<br/><br/>PRESS this to end the trial.<br/><br/>
<button onClick={this.toggle}>ESCAPE!!!</button>
<br/>
All your focus belongs to us!
</div>}
</FocusLockUI>
)
}
}
const App = () =>
<div style={styles}>
<input placeholder="input1"/>
<div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
<Trap/>
<div style={bg}> Inaccessible <a href='#'>Link</a> outside</div>
<input placeholder="input1"/>
</div>;
export default App;