forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-17 04:53:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved server form

Browse Source
This commit is contained in:
Alejandro Celaya
2020-12-12 11:43:16 +01:00
parent d62edb2249
commit 4d969b994e
8 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/servers/helpers/ServerForm.scss Normal file
View File

@@ -0,0 +1,3 @@
.server-form .form-group:last-child {
margin-bottom: 0;
}

19
src/servers/helpers/ServerForm.tsx
View File

@@ -1,14 +1,17 @@
import { FC, useEffect, useState } from 'react';
import { HorizontalFormGroup } from '../../utils/HorizontalFormGroup';
import { FC, ReactNode, useEffect, useState } from 'react';
import { FormGroupContainer } from '../../utils/FormGroupContainer';
import { handleEventPreventingDefault } from '../../utils/utils';
import { ServerData } from '../data';
import { SimpleCard } from '../../utils/SimpleCard';
import './ServerForm.scss';
interface ServerFormProps {
onSubmit: (server: ServerData) => void;
initialValues?: ServerData;
title?: ReactNode;
}
export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children }) => {
export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
const [ name, setName ] = useState('');
const [ url, setUrl ] = useState('');
const [ apiKey, setApiKey ] = useState('');
@@ -21,10 +24,12 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
}, [ initialValues ]);
return (
<form onSubmit={handleSubmit}>
<HorizontalFormGroup value={name} onChange={setName}>Name</HorizontalFormGroup>
<HorizontalFormGroup type="url" value={url} onChange={setUrl}>URL</HorizontalFormGroup>
<HorizontalFormGroup value={apiKey} onChange={setApiKey}>API key</HorizontalFormGroup>
<form className="server-form" onSubmit={handleSubmit}>
<SimpleCard className="mb-4" title={title}>
<FormGroupContainer value={name} onChange={setName}>Name</FormGroupContainer>
<FormGroupContainer type="url" value={url} onChange={setUrl}>URL</FormGroupContainer>
<FormGroupContainer value={apiKey} onChange={setApiKey}>API key</FormGroupContainer>
</SimpleCard>
<div className="text-right">{children}</div>
</form>