opensource/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2025-11-01 10:56:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feature (prompt): proper prompt system

Browse Source
This commit is contained in:
Mickael KERJEAN
2018-04-06 13:18:38 +10:00
parent 4b06b8a802
commit 0eb59521ab
5 changed files with 93 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
client/components/prompt.js
View File

@ -8,48 +8,61 @@ export class ModalPrompt extends React.Component {
constructor(props){
super(props);
this.state = {
appear: false
appear: false,
value: ''
};
this.onCancel = this.onCancel.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.onEscapeKeyPress = this.onEscapeKeyPress.bind(this);
}
componentDidMount(){
prompt.subscribe((text, okCallback, cancelCallback, type) => {
console.log("REQUEST FOR PROMPT");
this.setState({
appear: true,
value: '',
error: null,
type: type || 'text',
text: text || '',
fns: {ok: okCallback, cancel: cancelCallback}
});
});
window.addEventListener('keydown', this.onEscapeKeyPress);
}
componentDidUmount(){
window.removeEventListener('keydown', this.onEscapeKeyPress);
}
onCancel(){
this.setState({appear: false});
this.state.fns.cancelCallback();
this.state.fns.cancel();
}
onSubmit(e){
e && e.preventDefault && e.preventDefault();
this.state.fns.okCallback(this.state.value)
this.state.fns.ok(this.state.value)
.then(() => this.setState({appear: false}))
.catch((message) => this.setState({error: message}));
}
onEscapeKeyPress(e){
if(e.keyCode === 27 && this.state.fns){ this.onCancel(); }
}
render() {
return (
<Modal isActive={this.state.appear} onQuit={this.onCancel.bind(this)}>
<Modal isActive={this.state.appear} onQuit={this.onCancel}>
<div className="component_prompt">
<p className="modal-message">
{this.state.text}
</p>
<form onSubmit={this.onSubmit.bind(this)}>
<form onSubmit={this.onSubmit}>
<Input autoFocus={true} value={this.state.value} type={this.state.type} autoComplete="new-password" onChange={(e) => this.setState({value: e.target.value})} />
<div className="modal-error-message">{this.state.error}&nbsp;</div>
<div className="buttons">
<Button type="button" onClick={this.onCancel.bind(this)}>CANCEL</Button>
<Button type="submit" theme="secondary" onClick={this.onSubmit.bind(this)}>OK</Button>
<Button type="button" onClick={this.onCancel}>CANCEL</Button>
<Button type="submit" theme="secondary" onClick={this.onSubmit}>OK</Button>
</div>
</form>
</div>