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

improvement (UI): make the UI more engaging and "modern"

Browse Source
This commit is contained in:
Mickael KERJEAN
2018-03-07 02:01:03 +11:00
parent f093f00a4b
commit 59afd3f0a5
15 changed files with 193 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
client/components/prompt.js
View File

@ -2,41 +2,48 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Input, Button, Modal, NgIf } from './';
import './prompt.scss';
export class Prompt extends React.Component {
constructor(props){
super(props);
this.state = {
modal_appear: false,
error: ''
error: this.props.error,
value: ''
};
if(this.props.error) window.setTimeout(() => this.setState({error: ''}), 2000);
}
componentWillReceiveProps(props){
if(props.error !== this.state.error){
this.setState({error: props.error});
window.setTimeout(() => this.setState({error: ''}), 2000);
}
}
onCancel(should_clear){
this.setState({modal_appear: false});
if(this.props.onCancel) this.props.onCancel();
}
onSubmit(e){
e && e.preventDefault && e.preventDefault();
if(this.props.onSubmit) this.props.onSubmit(this.state.value);
}
onInputChange(value){
this.setState({value: value});
}
render() {
return (
<Modal isActive={this.state.modal_appear} onQuit={this.onCancel.bind(this)}>
<Modal isActive={this.props.appear} onQuit={this.onCancel.bind(this)}>
<div className="component_prompt">
<p className="message">
<p className="modal-message">
{this.props.message}
</p>
<form onSubmit={this.onSubmit.bind(this)}>
<Input autoFocus={true} value={this.state.key} type={this.props.type || 'text'} onChange={this.onKeyChange.bind(this)} autoComplete="new-password" />
<Input autoFocus={true} value={this.state.value} type={this.props.type || 'text'} autoComplete="new-password" onChange={(e) => this.onInputChange(e.target.value)} />
<div className="error">{this.props.error}&nbsp;</div>
<div className="modal-error-message">{this.state.error}&nbsp;</div>
<div className="buttons">
<Button type="button" onClick={this.onCancel.bind(this)}>CANCEL</Button>
@ -50,8 +57,10 @@ export class Prompt extends React.Component {
}
Prompt.propTypes = {
appear: PropTypes.bool.isRequired,
type: PropTypes.string,
message: PropTypes.string.isRequired,
error: PropTypes.string,
onCancel: PropTypes.func,
onConfirm: PropTypes.func
};