40 lines
1.4 KiB
TypeScript
Executable File
40 lines
1.4 KiB
TypeScript
Executable File
import { h, Component } from 'preact';
|
|
import "./modal.scss"
|
|
import { Modal } from './Modal';
|
|
|
|
|
|
export class InputModal extends Component<{ title: string, fieldname: string, type: "text" | "password", onResult: (result) => void }, {}> {
|
|
input: HTMLInputElement;
|
|
rand: string;
|
|
constructor(props) {
|
|
super(props);
|
|
this.rand = Math.random().toString();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.input)
|
|
this.input.value = "";
|
|
}
|
|
|
|
render() {
|
|
return <Modal title={this.props.title} onClose={() => this.props.onResult(null)}>
|
|
<fieldset style="border:none;">
|
|
<label for={this.rand}>{this.props.fieldname}</label>
|
|
<input style="min-width: 85%" autofocus ref={elm => {
|
|
this.input = elm
|
|
if (this.input)
|
|
setTimeout(() => this.input.focus(), 0)
|
|
}} type={this.props.type} id={this.rand} placeholder={this.props.fieldname} onKeyDown={evt => {
|
|
if (evt.keyCode === 13) {
|
|
this.props.onResult(this.input.value)
|
|
}
|
|
}} />
|
|
<div style="text-align: right;">
|
|
<button class="primary" style="display: inline-block;" onClick={() => {
|
|
this.props.onResult(this.input.value);
|
|
}}>Enter</button>
|
|
</div>
|
|
</fieldset>
|
|
</Modal>
|
|
}
|
|
} |