Convert Form Components to TypeScript

Co-authored-by: Mark McDowall <mark@mcdowall.ca>

Remove defaultProps from TypeScript components

(cherry picked from commit a90c13e86f798841cb6db038bb6b6d1408a00585)

Fix multi-select checkboxes not appearing

(cherry picked from commit e199710c15fbfa643a9f71c7a20f70b1722d0df6)

frontend/src/Components/Form/Select/RootFolderSelectInputOption.tsx

@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import React from 'react';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInputOption, {
+  EnhancedSelectInputOptionProps,
+} from './EnhancedSelectInputOption';
+import styles from './RootFolderSelectInputOption.css';
+
+interface RootFolderSelectInputOptionProps
+  extends EnhancedSelectInputOptionProps {
+  id: string;
+  value: string;
+  freeSpace?: number;
+  isMissing?: boolean;
+  movieFolder?: string;
+  isMobile: boolean;
+  isWindows?: boolean;
+}
+
+function RootFolderSelectInputOption(props: RootFolderSelectInputOptionProps) {
+  const {
+    id,
+    value,
+    freeSpace,
+    isMissing,
+    movieFolder,
+    isMobile,
+    isWindows,
+    ...otherProps
+  } = props;
+
+  const slashCharacter = isWindows ? '\\' : '/';
+
+  return (
+    <EnhancedSelectInputOption id={id} isMobile={isMobile} {...otherProps}>
+      <div
+        className={classNames(styles.optionText, isMobile && styles.isMobile)}
+      >
+        <div className={styles.value}>
+          {value}
+
+          {movieFolder && id !== 'addNew' ? (
+            <div className={styles.movieFolder}>
+              {slashCharacter}
+              {movieFolder}
+            </div>
+          ) : null}
+        </div>
+
+        {freeSpace == null ? null : (
+          <div className={styles.freeSpace}>
+            {translate('RootFolderSelectFreeSpace', {
+              freeSpace: formatBytes(freeSpace),
+            })}
+          </div>
+        )}
+
+        {isMissing ? (
+          <div className={styles.isMissing}>{translate('Missing')}</div>
+        ) : null}
+      </div>
+    </EnhancedSelectInputOption>
+  );
+}
+
+export default RootFolderSelectInputOption;