forked from jaruba/PowderWeb
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathinputDialog.js
More file actions
111 lines (93 loc) · 3.81 KB
/
Copy pathinputDialog.js
File metadata and controls
111 lines (93 loc) · 3.81 KB
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
101
102
103
104
105
106
107
108
109
110
111
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import _ from 'lodash'
import api from 'utils/api'
import events from 'utils/events'
const focusInput = (elem) => {
const focus = () => {
if (!document.getElementById(elem).focused)
document.getElementById(elem).$.nativeInput.focus()
}
for (var i = 0; i <= 1000; i += 150)
setTimeout(focus, i)
}
export default class Modals extends PureComponent {
constructor (props) {
super(props)
this.state = {
default: ''
}
}
componentDidMount = () => {
focusInput("inputQuery")
document.getElementById("inputDialog").addEventListener('iron-overlay-canceled', this.closingInputDialog)
this.setState(this.props.query)
document.getElementById("inputQuery").addEventListener('paste', this.pasteClipboard);
}
componentWillUnmount = () => {
document.getElementById("inputQuery").removeEventListener('paste', this.pasteClipboard);
}
cancelInputDialog() {
document.getElementById("inputQuery").value = ''
document.getElementById("inputDialog").removeEventListener('iron-overlay-canceled', this.closingInputDialog)
document.getElementById("inputDialog").close()
events.emit('inputDialogClose')
}
closingInputDialog() {
document.getElementById("inputDialog").removeEventListener('iron-overlay-canceled', this.closingInputDialog)
document.getElementById("inputQuery").value = ''
events.emit('inputDialogClose')
}
pasteClipboard(e) {
e.stopPropagation()
e.preventDefault()
var clipboardData = e.clipboardData || window.clipboardData
var pastedData = clipboardData.getData('Text')
document.getElementById("inputQuery").value = pastedData
}
handleInput() {
events.emit('inputDialogValue', document.getElementById("inputQuery").value)
this.cancelInputDialog()
}
render() {
return (
<paper-dialog
id="inputDialog"
style={{display: 'none', width: '440px', textAlign: 'left', borderRadius: '3px', maxWidth: '90%', backgroundColor: '#303030', color: 'white', padding: '20px', textAlign: 'center'}}
on-iron-overlay-closed={this.closingInputDialog.bind(this)}
opened={true}
with-backdrop >
{this.state.label}
<div style={{margin: '0', marginBottom: '5px', fontSize: '16px'}}>
<paper-input
id={'inputQuery'}
value={this.state.default}
style={{cursor: 'pointer', float: 'right', height: '32px', top: '-5px', marginRight: '4px', textAlign: 'left', width: '100%', marginBottom: '15px', padding: '0', marginTop: '0', marginRight: '0'}}
onKeyDown={event => event.keyCode === 13 ? this.handleInput() : void 0}
allowed-pattern={this.state.allowRule || "[\\d]"}
maxlength={this.state.maxLength || 0}
fullWidth={true}
className="dark-input dark-input-large" />
</div>
<div style={{marginTop: '25px', marginBottom: '0', display: 'inline-block'}}>
<paper-button
raised
onClick={this.handleInput.bind(this)}
style={{cursor: 'pointer', float: 'none', margin: '0', marginRight: '15px'}}
className='playerButtons' >
Set Value
</paper-button>
<paper-button
raised
onClick={this.cancelInputDialog.bind(this)}
style={{cursor: 'pointer', float: 'none', margin: '0'}}
className='playerButtons' >
Close
</paper-button>
</div>
</paper-dialog>
)
}
}