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