e50b23d081
* chore(js): be stricter about dead code warnings * chore(js): remove dead code and unused exports * rebase * chore: remove unused files * chore(deps): remove unused prop-types dep * chore(js): remove unused function * chore(deps): remove + check unused deps * chore(js): remove unused exports. Closes #3036
121 lines
3.1 KiB
TypeScript
121 lines
3.1 KiB
TypeScript
// This is a wrapper for the Ant Switch component.
|
|
// This one is styled to match the form-textfield component.
|
|
// If `useSubmit` is true then it will automatically post to the config API onChange.
|
|
|
|
import React, { useState, useContext, FC } from 'react';
|
|
import { Switch } from 'antd';
|
|
import {
|
|
createInputStatus,
|
|
StatusState,
|
|
STATUS_ERROR,
|
|
STATUS_PROCESSING,
|
|
STATUS_SUCCESS,
|
|
} from '../../utils/input-statuses';
|
|
import { FormStatusIndicator } from './FormStatusIndicator';
|
|
|
|
import { RESET_TIMEOUT, postConfigUpdateToAPI } from '../../utils/config-constants';
|
|
import { ServerStatusContext } from '../../utils/server-status-context';
|
|
|
|
export type ToggleSwitchProps = {
|
|
fieldName: string;
|
|
|
|
apiPath?: string;
|
|
checked?: boolean;
|
|
reversed?: boolean;
|
|
configPath?: string;
|
|
disabled?: boolean;
|
|
label?: string;
|
|
tip?: string;
|
|
useSubmit?: boolean;
|
|
onChange?: (arg: boolean) => void;
|
|
};
|
|
|
|
export const ToggleSwitch: FC<ToggleSwitchProps> = ({
|
|
apiPath,
|
|
checked,
|
|
reversed = false,
|
|
configPath = '',
|
|
disabled = false,
|
|
fieldName,
|
|
label,
|
|
tip,
|
|
useSubmit,
|
|
onChange,
|
|
}) => {
|
|
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
|
|
|
|
let resetTimer = null;
|
|
|
|
const serverStatusData = useContext(ServerStatusContext);
|
|
const { setFieldInConfigState } = serverStatusData || {};
|
|
|
|
const resetStates = () => {
|
|
setSubmitStatus(null);
|
|
clearTimeout(resetTimer);
|
|
resetTimer = null;
|
|
};
|
|
|
|
const handleChange = async (isChecked: boolean) => {
|
|
if (useSubmit) {
|
|
setSubmitStatus(createInputStatus(STATUS_PROCESSING));
|
|
const isCheckedSend = reversed ? !isChecked : isChecked;
|
|
|
|
await postConfigUpdateToAPI({
|
|
apiPath,
|
|
data: { value: isCheckedSend },
|
|
onSuccess: () => {
|
|
setFieldInConfigState({ fieldName, value: isCheckedSend, path: configPath });
|
|
setSubmitStatus(createInputStatus(STATUS_SUCCESS));
|
|
},
|
|
onError: (message: string) => {
|
|
setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${message}`));
|
|
},
|
|
});
|
|
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
|
|
}
|
|
if (onChange) {
|
|
onChange(isChecked);
|
|
}
|
|
};
|
|
|
|
const loading = submitStatus !== null && submitStatus.type === STATUS_PROCESSING;
|
|
return (
|
|
<div className="formfield-container toggleswitch-container">
|
|
{label && (
|
|
<div className="label-side">
|
|
<span className="formfield-label">{label}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="input-side">
|
|
<div className="input-group">
|
|
<Switch
|
|
className={`switch field-${fieldName}`}
|
|
loading={loading}
|
|
onChange={handleChange}
|
|
defaultChecked={checked}
|
|
checked={checked}
|
|
checkedChildren="ON"
|
|
unCheckedChildren="OFF"
|
|
disabled={disabled}
|
|
/>
|
|
<FormStatusIndicator status={submitStatus} />
|
|
</div>
|
|
<p className="field-tip">{tip}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
ToggleSwitch.defaultProps = {
|
|
apiPath: '',
|
|
checked: false,
|
|
reversed: false,
|
|
configPath: '',
|
|
disabled: false,
|
|
label: '',
|
|
tip: '',
|
|
useSubmit: false,
|
|
onChange: null,
|
|
};
|