add number checking

This commit is contained in:
gingervitis 2021-01-03 04:03:18 -08:00 committed by Gabe Kangas
parent c34aba2f5c
commit f385233109
6 changed files with 50 additions and 4 deletions

View file

@ -184,6 +184,27 @@ export const TEXTFIELD_DEFAULTS = {
label: 'Display in the Owncast Directory?',
tip: 'Turn this ON if you want to show up in the Owncast directory at https://directory.owncast.online.',
}
},
videoSettings: {
numberOfPlaylistItems: {
apiPath: '/webserverport', // tbd
defaultValue: 4,
maxLength: 6,
placeholder: '4',
label: 'Segment Length',
tip: '',
required: true,
},
segmentLengthSeconds: {
apiPath: '/webserverport', // tbd
defaultValue: 5,
maxLength: 6,
placeholder: '5',
label: 'Number of segments',
tip: '',
required: true,
},
}
}

View file

@ -30,6 +30,7 @@ export const TEXTFIELD_TYPE_TEXT = 'default';
export const TEXTFIELD_TYPE_PASSWORD = 'password'; // Input.Password
export const TEXTFIELD_TYPE_NUMBER = 'numeric';
export const TEXTFIELD_TYPE_TEXTAREA = 'textarea';
export const TEXTFIELD_TYPE_URL = 'url';
export default function TextField(props: TextFieldProps) {
@ -79,9 +80,14 @@ export default function TextField(props: TextFieldProps) {
// if field is required but value is empty, or equals initial value, then don't show submit/update button. otherwise clear out any result messaging and display button.
const handleChange = (e: any) => {
const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
if ((required && (val === '' || val === null)) || val === initialValue) {
// https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
const hasValidity = type !== TEXTFIELD_TYPE_NUMBER && e.target.validity.valid;
if ((required && (val === '' || val === null)) || val === initialValue || !hasValidity) {
setHasChanged(false);
} else {
// show submit button
resetStates();
setHasChanged(true);
setFieldValueForSubmit(val);
@ -138,6 +144,20 @@ export default function TextField(props: TextFieldProps) {
};
} else if (type === TEXTFIELD_TYPE_NUMBER) {
Field = InputNumber;
fieldProps = {
type: 'number',
min: 0,
max: (10**maxLength) - 1,
onKeyDown: (e: React.KeyboardEvent) => {
if (e.target.value.length > maxLength - 1 )
e.preventDefault()
return false;
}
};
} else if (type === TEXTFIELD_TYPE_URL) {
fieldProps = {
type: 'url',
};
}
return (

View file

@ -1,7 +1,7 @@
import React, { useContext, useEffect } from 'react';
import { Typography, Form } from 'antd';
import TextField, { TEXTFIELD_TYPE_TEXTAREA } from './components/config/form-textfield';
import TextField, { TEXTFIELD_TYPE_TEXTAREA, TEXTFIELD_TYPE_URL } from './components/config/form-textfield';
import EditInstanceTags from './components/config/edit-tags';
import EditDirectoryDetails from './components/config/edit-directory';
@ -73,6 +73,7 @@ export default function PublicFacingDetails() {
fieldName="instanceUrl"
{...extraProps}
configPath="yp"
type={TEXTFIELD_TYPE_URL}
onSubmit={handleSubmitInstanceUrl}
/>

View file

@ -48,7 +48,7 @@ export default function ConfigServerDetails() {
layout="vertical"
>
<TextField fieldName="streamKey" type={TEXTFIELD_TYPE_PASSWORD} {...extraProps} />
<TextField fieldName="ffmpegPath" type={TEXTFIELD_TYPE_TEXTAREA} {...extraProps} />
<TextField fieldName="ffmpegPath" {...extraProps} />
<TextField fieldName="webServerPort" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
<TextField fieldName="rtmpServerPort" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
</Form>

View file

@ -50,6 +50,10 @@
.field {
width: 18rem;
&.ant-input-number {
width: 8em;
}
}
.info-tip {
margin-right: .75rem;

View file

@ -70,5 +70,5 @@ export interface ConfigDetails {
streamKey: string;
webServerPort: string;
yp: ConfigDirectoryFields;
videoSettings: VideoSettingsFields; // tbd
videoSettings: VideoSettingsFields;
}