2021-12-14 19:14:53 +00:00
|
|
|
import clsx from 'clsx';
|
|
|
|
|
|
|
|
import { FeatureId } from '@/portainer/feature-flags/enums';
|
2022-06-17 16:18:42 +00:00
|
|
|
|
|
|
|
import { Tooltip } from '@@/Tip/Tooltip';
|
2021-12-14 19:14:53 +00:00
|
|
|
|
|
|
|
import styles from './SwitchField.module.css';
|
|
|
|
import { Switch } from './Switch';
|
|
|
|
|
|
|
|
export interface Props {
|
|
|
|
label: string;
|
|
|
|
checked: boolean;
|
|
|
|
onChange(value: boolean): void;
|
|
|
|
|
|
|
|
name?: string;
|
|
|
|
tooltip?: string;
|
|
|
|
labelClass?: string;
|
2022-07-22 02:16:50 +00:00
|
|
|
switchClass?: string;
|
2022-07-27 01:05:25 +00:00
|
|
|
fieldClass?: string;
|
2021-12-14 19:14:53 +00:00
|
|
|
dataCy?: string;
|
|
|
|
disabled?: boolean;
|
|
|
|
featureId?: FeatureId;
|
2022-07-04 01:05:04 +00:00
|
|
|
switchValues?: {
|
|
|
|
on: string;
|
|
|
|
off: string;
|
|
|
|
};
|
2021-12-14 19:14:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export function SwitchField({
|
|
|
|
tooltip,
|
|
|
|
checked,
|
|
|
|
label,
|
|
|
|
name,
|
|
|
|
labelClass,
|
2022-07-27 01:05:25 +00:00
|
|
|
fieldClass,
|
2021-12-14 19:14:53 +00:00
|
|
|
dataCy,
|
|
|
|
disabled,
|
|
|
|
onChange,
|
|
|
|
featureId,
|
2022-07-04 01:05:04 +00:00
|
|
|
switchValues,
|
2022-07-22 02:16:50 +00:00
|
|
|
switchClass,
|
2021-12-14 19:14:53 +00:00
|
|
|
}: Props) {
|
|
|
|
const toggleName = name ? `toggle_${name}` : '';
|
|
|
|
|
|
|
|
return (
|
2022-07-27 01:05:25 +00:00
|
|
|
<label className={clsx(styles.root, fieldClass)}>
|
2021-12-14 19:14:53 +00:00
|
|
|
<span
|
|
|
|
className={clsx(
|
2022-07-27 01:05:25 +00:00
|
|
|
'text-left space-right control-label',
|
2021-12-14 19:14:53 +00:00
|
|
|
styles.label,
|
|
|
|
labelClass
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{label}
|
2022-07-03 23:21:25 +00:00
|
|
|
{tooltip && <Tooltip message={tooltip} />}
|
2021-12-14 19:14:53 +00:00
|
|
|
</span>
|
|
|
|
<Switch
|
2022-07-22 02:16:50 +00:00
|
|
|
className={clsx('space-right', switchClass)}
|
2021-12-14 19:14:53 +00:00
|
|
|
name={toggleName}
|
|
|
|
id={toggleName}
|
|
|
|
checked={checked}
|
|
|
|
disabled={disabled}
|
|
|
|
onChange={onChange}
|
|
|
|
featureId={featureId}
|
|
|
|
dataCy={dataCy}
|
|
|
|
/>
|
2022-07-04 01:05:04 +00:00
|
|
|
{switchValues && checked && (
|
2022-08-01 04:44:56 +00:00
|
|
|
<span className={`"ml-2" ${styles.switchValues}`}>
|
|
|
|
{switchValues.on}
|
|
|
|
</span>
|
2022-07-04 01:05:04 +00:00
|
|
|
)}
|
|
|
|
{switchValues && !checked && (
|
2022-08-01 04:44:56 +00:00
|
|
|
<span className={`"ml-2" ${styles.switchValues}`}>
|
|
|
|
{switchValues.off}
|
|
|
|
</span>
|
2022-07-04 01:05:04 +00:00
|
|
|
)}
|
2021-12-14 19:14:53 +00:00
|
|
|
</label>
|
|
|
|
);
|
|
|
|
}
|