Convert Components to TypeScript

frontend/src/Components/MonitorToggleButton.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import React, { SyntheticEvent, useCallback, useMemo } from 'react';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './MonitorToggleButton.css';
+
+interface MonitorToggleButtonProps {
+  className?: string;
+  monitored: boolean;
+  size?: number;
+  isDisabled?: boolean;
+  isSaving?: boolean;
+  onPress: (value: boolean, options: { shiftKey: boolean }) => unknown;
+}
+
+function MonitorToggleButton(props: MonitorToggleButtonProps) {
+  const {
+    className = styles.toggleButton,
+    monitored,
+    isDisabled = false,
+    isSaving = false,
+    size,
+    onPress,
+    ...otherProps
+  } = props;
+
+  const iconName = monitored ? icons.MONITORED : icons.UNMONITORED;
+
+  const title = useMemo(() => {
+    if (isDisabled) {
+      return translate('ToggleMonitoredSeriesUnmonitored');
+    }
+
+    if (monitored) {
+      return translate('ToggleMonitoredToUnmonitored');
+    }
+
+    return translate('ToggleUnmonitoredToMonitored');
+  }, [monitored, isDisabled]);
+
+  const handlePress = useCallback(
+    (event: SyntheticEvent<HTMLLinkElement, MouseEvent>) => {
+      const shiftKey = event.nativeEvent.shiftKey;
+
+      onPress(!monitored, { shiftKey });
+    },
+    [monitored, onPress]
+  );
+
+  return (
+    <SpinnerIconButton
+      className={classNames(className, isDisabled && styles.isDisabled)}
+      name={iconName}
+      size={size}
+      title={title}
+      isDisabled={isDisabled}
+      isSpinning={isSaving}
+      {...otherProps}
+      onPress={handlePress}
+    />
+  );
+}
+
+export default MonitorToggleButton;