mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Reduced the amount of duplicated code in CreateServer component

Browse source
This commit is contained in:
Alejandro Celaya 2018-07-16 18:29:14 +02:00
parent ebb94a17ab
commit be30d62f6f
2 changed files with 19 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/servers/CreateServer.js
View file

@ -16,39 +16,28 @@ export class CreateServer extends React.Component {
e.preventDefault(); e.preventDefault();
this.props.createServer(this.state); this.props.createServer(this.state);
}; };
const renderInput = (id, placeholder, type = 'text') => const renderInputGroup = (id, placeholder, type = 'text') =>
<input <div className="form-group row">
type={type} <label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">{placeholder}:</label>
className="form-control" <div className="col-lg-11 col-md-10">
id={id} <input
placeholder={placeholder} type={type}
value={this.state[id]} className="form-control"
onChange={e => this.setState({ [id]: e.target.value })} id={id}
/>; placeholder={placeholder}
value={this.state[id]}
onChange={e => this.setState({ [id]: e.target.value })}
required
/>
</div>
</div>;
return ( return (
<div className="create-server"> <div className="create-server">
<form onSubmit={submit}> <form onSubmit={submit}>
<div className="form-group row"> {renderInputGroup('name', 'Name')}
<label htmlFor="name" className="col-lg-1 col-md-2 col-form-label create-server__label">Name:</label> {renderInputGroup('url', 'URL', 'url')}
<div className="col-lg-11 col-md-10"> {renderInputGroup('apiKey', 'API key')}
{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>
<div className="text-right"> <div className="text-right">
<button className="btn btn-primary btn-outline-primary">Create server</button> <button className="btn btn-primary btn-outline-primary">Create server</button>

1
src/servers/CreateServer.scss
View file

@ -6,6 +6,7 @@
.create-server__label { .create-server__label {
font-weight: bold; font-weight: bold;
cursor: pointer;
@media (min-width: $mdMin) { @media (min-width: $mdMin) {
text-align: right; text-align: right;