owncast/web/components/config/form-textfield-with-submit.tsx

149 lines
4.7 KiB
TypeScript
Raw Normal View History

2021-01-31 11:48:39 +03:00
import React, { useEffect, useState, useContext } from 'react';
import { Button } from 'antd';
import classNames from 'classnames';
import { RESET_TIMEOUT, postConfigUpdateToAPI } from '../../utils/config-constants';
2021-01-31 11:48:39 +03:00
import { ServerStatusContext } from '../../utils/server-status-context';
import TextField, { TextFieldProps } from './form-textfield';
2021-01-31 12:38:20 +03:00
import {
createInputStatus,
StatusState,
STATUS_ERROR,
STATUS_PROCESSING,
STATUS_SUCCESS,
} from '../../utils/input-statuses';
import { UpdateArgs } from '../../types/config-section';
import FormStatusIndicator from './form-status-indicator';
2021-01-31 11:48:39 +03:00
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';
interface TextFieldWithSubmitProps extends TextFieldProps {
apiPath: string;
configPath?: string;
initialValue?: string;
}
export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
2021-02-01 09:07:00 +03:00
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
2021-01-31 11:48:39 +03:00
const [hasChanged, setHasChanged] = useState(false);
const serverStatusData = useContext(ServerStatusContext);
const { setFieldInConfigState } = serverStatusData || {};
let resetTimer = null;
const {
apiPath,
configPath = '',
initialValue,
...textFieldProps // rest of props
} = props;
const { fieldName, required, tip, status, value, onChange, onSubmit } = textFieldProps;
2021-01-31 11:48:39 +03:00
// Clear out any validation states and messaging
const resetStates = () => {
2021-02-01 09:07:00 +03:00
setSubmitStatus(null);
2021-01-31 11:48:39 +03:00
setHasChanged(false);
clearTimeout(resetTimer);
resetTimer = null;
};
useEffect(() => {
// TODO: Add native validity checks here, somehow
// https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
// const hasValidity = (type !== TEXTFIELD_TYPE_NUMBER && e.target.validity.valid) || type === TEXTFIELD_TYPE_NUMBER ;
if ((required && (value === '' || value === null)) || value === initialValue) {
setHasChanged(false);
} else {
// show submit button
resetStates();
setHasChanged(true);
}
}, [value]);
// 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 = ({ fieldName: changedFieldName, value: changedValue }: UpdateArgs) => {
if (onChange) {
onChange({ fieldName: changedFieldName, value: changedValue });
}
};
// if you blur a required field with an empty value, restore its original value in state (parent's state), if an onChange from parent is available.
const handleBlur = ({ value: changedValue }: UpdateArgs) => {
if (onChange && required && changedValue === '') {
onChange({ fieldName, value: initialValue });
}
};
// how to get current value of input
const handleSubmit = async () => {
2021-01-31 12:55:19 +03:00
if ((required && value !== '') || value !== initialValue) {
2021-02-01 09:07:00 +03:00
setSubmitStatus(createInputStatus(STATUS_PROCESSING));
2021-01-31 11:48:39 +03:00
await postConfigUpdateToAPI({
apiPath,
2021-01-31 12:55:19 +03:00
data: { value },
2021-01-31 11:48:39 +03:00
onSuccess: () => {
2021-01-31 12:55:19 +03:00
setFieldInConfigState({ fieldName, value, path: configPath });
2021-02-01 09:07:00 +03:00
setSubmitStatus(createInputStatus(STATUS_SUCCESS));
2021-01-31 11:48:39 +03:00
},
onError: (message: string) => {
2021-02-01 09:07:00 +03:00
setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
2021-01-31 11:48:39 +03:00
},
});
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
// if an extra onSubmit handler was sent in as a prop, let's run that too.
if (onSubmit) {
onSubmit();
}
}
2021-01-31 12:38:20 +03:00
};
2021-01-31 11:48:39 +03:00
const textfieldContainerClass = classNames({
'textfield-with-submit-container': true,
submittable: hasChanged,
});
2021-01-31 11:48:39 +03:00
return (
<div className={textfieldContainerClass}>
<div className="textfield-component">
<TextField
{...textFieldProps}
onSubmit={null}
onBlur={handleBlur}
onChange={handleChange}
/>
</div>
<div className="formfield-container lower-container">
<p className="label-spacer" />
<div className="lower-content">
<div className="field-tip">{tip}</div>
<FormStatusIndicator status={status || submitStatus} />
<div className="update-button-container">
<Button
type="primary"
size="small"
className="submit-button"
onClick={handleSubmit}
disabled={!hasChanged}
>
Update
</Button>
</div>
2021-01-31 21:13:35 +03:00
</div>
</div>
2021-01-31 11:48:39 +03:00
</div>
2021-01-31 12:38:20 +03:00
);
2021-01-31 11:48:39 +03:00
}
TextFieldWithSubmit.defaultProps = {
configPath: '',
initialValue: '',
};