mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Reduced the amount of duplicated code in CreateServer component
This commit is contained in:
parent
ebb94a17ab
commit
be30d62f6f
2 changed files with 19 additions and 29 deletions
|
@ -16,7 +16,10 @@ export class CreateServer extends React.Component {
|
|||
e.preventDefault();
|
||||
this.props.createServer(this.state);
|
||||
};
|
||||
const renderInput = (id, placeholder, type = 'text') =>
|
||||
const renderInputGroup = (id, placeholder, type = 'text') =>
|
||||
<div className="form-group row">
|
||||
<label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">{placeholder}:</label>
|
||||
<div className="col-lg-11 col-md-10">
|
||||
<input
|
||||
type={type}
|
||||
className="form-control"
|
||||
|
@ -24,31 +27,17 @@ export class CreateServer extends React.Component {
|
|||
placeholder={placeholder}
|
||||
value={this.state[id]}
|
||||
onChange={e => this.setState({ [id]: e.target.value })}
|
||||
/>;
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
return (
|
||||
<div className="create-server">
|
||||
<form onSubmit={submit}>
|
||||
<div className="form-group row">
|
||||
<label htmlFor="name" className="col-lg-1 col-md-2 col-form-label create-server__label">Name:</label>
|
||||
<div className="col-lg-11 col-md-10">
|
||||
{renderInput('name', 'Name')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<label htmlFor="url" className="col-lg-1 col-md-2 col-form-label create-server__label">URL:</label>
|
||||
<div className="col-lg-11 col-md-10">
|
||||
{renderInput('url', 'URL', 'url')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<label htmlFor="apiKey" className="col-lg-1 col-md-2 col-form-label create-server__label">API key:</label>
|
||||
<div className="col-lg-11 col-md-10">
|
||||
{renderInput('apiKey', 'API key')}
|
||||
</div>
|
||||
</div>
|
||||
{renderInputGroup('name', 'Name')}
|
||||
{renderInputGroup('url', 'URL', 'url')}
|
||||
{renderInputGroup('apiKey', 'API key')}
|
||||
|
||||
<div className="text-right">
|
||||
<button className="btn btn-primary btn-outline-primary">Create server</button>
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
.create-server__label {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: $mdMin) {
|
||||
text-align: right;
|
||||
|
|
Loading…
Reference in a new issue