lbry-desktop/ui/component/settingWalletServer/internal/inputRow.jsx

65 lines
1.9 KiB
React
Raw Normal View History

// @flow
import React, { useState, useEffect } from 'react';
import Button from 'component/button';
2019-12-13 20:47:50 +01:00
import { Form, FormField } from 'component/common/form';
type Props = {
2019-12-13 20:47:50 +01:00
update: ([string, string]) => void,
};
2019-12-13 20:47:50 +01:00
const VALID_IPADDRESS_REGEX = new RegExp(
'^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\\.)){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$'
);
const VALID_HOSTNAME_REGEX = new RegExp(
'^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])(\\.))+([A-Za-z]|[A-Za-z][A-Za-z]*[A-Za-z])$'
);
2019-12-12 21:18:13 +01:00
const VALID_PORT_REGEX = new RegExp('^([0-9]){1,5}$');
function ServerInputRow(props: Props) {
const { update } = props;
const [hostString, setHostString] = useState('');
const [portString, setPortString] = useState('');
2019-12-12 21:18:13 +01:00
const [validServerString, setValidServerString] = useState(false);
useEffect(() => {
2019-12-13 20:47:50 +01:00
setValidServerString(
(VALID_IPADDRESS_REGEX.test(hostString) || VALID_HOSTNAME_REGEX.test(hostString)) &&
VALID_PORT_REGEX.test(portString)
);
2019-12-12 21:18:13 +01:00
}, [hostString, portString, validServerString, setValidServerString]);
2019-12-13 20:47:50 +01:00
function onSubmit() {
update([hostString, portString]);
setHostString('');
setPortString('');
}
return (
2019-12-13 20:47:50 +01:00
<Form onSubmit={onSubmit}>
<div className="section__actions">
<FormField
type="text"
label={__('Host')}
placeholder={'code.freezepeach.fun'}
value={hostString}
onChange={e => setHostString(e.target.value)}
/>
<span className="form-field__conjuction">:</span>
<FormField
2019-12-16 04:51:19 +01:00
type="number"
2019-12-13 20:47:50 +01:00
label={__('Port')}
placeholder={'50001'}
value={portString}
2019-12-16 04:51:19 +01:00
onChange={e => setPortString(String(e.target.value))}
2019-12-13 20:47:50 +01:00
/>
</div>
<div className="section__actions">
<Button type="submit" button="primary" label={__('Add')} disabled={!validServerString} />
</div>
</Form>
);
}
export default ServerInputRow;