From 126b6eba000528ba75934ebb003b310ab58ce921 Mon Sep 17 00:00:00 2001
From: Treycos <19551067+Treycos@users.noreply.github.com>
Date: Mon, 26 Aug 2024 02:21:06 +0200
Subject: [PATCH] Convert Icon to Typescript
(cherry picked from commit ae7b187e412a080e30fc6826564ce9197ed2f329)
Closes #10347
---
frontend/src/Activity/Queue/QueueStatus.tsx | 4 +-
frontend/src/Components/Icon.js | 73 -------------------
frontend/src/Components/Icon.tsx | 59 +++++++++++++++
.../Overview/DiscoverMovieOverviewInfoRow.tsx | 5 +-
.../Interactive/InteractiveImportRow.tsx | 2 +-
.../InteractiveSearchRow.tsx | 2 +-
.../Overview/MovieIndexOverviewInfoRow.tsx | 4 +-
.../src/System/Tasks/Queued/QueuedTaskRow.tsx | 7 +-
8 files changed, 72 insertions(+), 84 deletions(-)
delete mode 100644 frontend/src/Components/Icon.js
create mode 100644 frontend/src/Components/Icon.tsx
diff --git a/frontend/src/Activity/Queue/QueueStatus.tsx b/frontend/src/Activity/Queue/QueueStatus.tsx
index 64d802df8..2bd7f6d79 100644
--- a/frontend/src/Activity/Queue/QueueStatus.tsx
+++ b/frontend/src/Activity/Queue/QueueStatus.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import Icon from 'Components/Icon';
+import Icon, { IconProps } from 'Components/Icon';
import Popover from 'Components/Tooltip/Popover';
import { icons, kinds } from 'Helpers/Props';
import TooltipPosition from 'Helpers/Props/TooltipPosition';
@@ -61,7 +61,7 @@ function QueueStatus(props: QueueStatusProps) {
// status === 'downloading'
let iconName = icons.DOWNLOADING;
- let iconKind = kinds.DEFAULT;
+ let iconKind: IconProps['kind'] = kinds.DEFAULT;
let title = translate('Downloading');
if (status === 'paused') {
diff --git a/frontend/src/Components/Icon.js b/frontend/src/Components/Icon.js
deleted file mode 100644
index d200b8c08..000000000
--- a/frontend/src/Components/Icon.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-import { kinds } from 'Helpers/Props';
-import styles from './Icon.css';
-
-class Icon extends PureComponent {
-
- //
- // Render
-
- render() {
- const {
- containerClassName,
- className,
- name,
- kind,
- size,
- title,
- isSpinning,
- ...otherProps
- } = this.props;
-
- const icon = (
-
- );
-
- if (title) {
- return (
-
- {icon}
-
- );
- }
-
- return icon;
- }
-}
-
-Icon.propTypes = {
- containerClassName: PropTypes.string,
- className: PropTypes.string,
- name: PropTypes.object.isRequired,
- kind: PropTypes.string.isRequired,
- size: PropTypes.number.isRequired,
- title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
- isSpinning: PropTypes.bool.isRequired,
- fixedWidth: PropTypes.bool.isRequired
-};
-
-Icon.defaultProps = {
- kind: kinds.DEFAULT,
- size: 14,
- isSpinning: false,
- fixedWidth: false
-};
-
-export default Icon;
diff --git a/frontend/src/Components/Icon.tsx b/frontend/src/Components/Icon.tsx
new file mode 100644
index 000000000..86ff57a30
--- /dev/null
+++ b/frontend/src/Components/Icon.tsx
@@ -0,0 +1,59 @@
+import {
+ FontAwesomeIcon,
+ FontAwesomeIconProps,
+} from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import React, { ComponentProps } from 'react';
+import { kinds } from 'Helpers/Props';
+import styles from './Icon.css';
+
+export interface IconProps
+ extends Omit<
+ FontAwesomeIconProps,
+ 'icon' | 'spin' | 'name' | 'title' | 'size'
+ > {
+ containerClassName?: ComponentProps<'span'>['className'];
+ name: FontAwesomeIconProps['icon'];
+ kind?: Extract<(typeof kinds.all)[number], keyof typeof styles>;
+ size?: number;
+ isSpinning?: FontAwesomeIconProps['spin'];
+ title?: string | (() => string);
+}
+
+export default function Icon({
+ containerClassName,
+ className,
+ name,
+ kind = kinds.DEFAULT,
+ size = 14,
+ title,
+ isSpinning = false,
+ fixedWidth = false,
+ ...otherProps
+}: IconProps) {
+ const icon = (
+
+ );
+
+ if (title) {
+ return (
+
+ {icon}
+
+ );
+ }
+
+ return icon;
+}
diff --git a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverviewInfoRow.tsx b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverviewInfoRow.tsx
index fb1525803..7c1f70b04 100644
--- a/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverviewInfoRow.tsx
+++ b/frontend/src/DiscoverMovie/Overview/DiscoverMovieOverviewInfoRow.tsx
@@ -1,11 +1,10 @@
-import { IconDefinition } from '@fortawesome/free-regular-svg-icons';
import React from 'react';
-import Icon from 'Components/Icon';
+import Icon, { IconProps } from 'Components/Icon';
import styles from './DiscoverMovieOverviewInfoRow.css';
interface DiscoverMovieOverviewInfoRowProps {
title?: string;
- iconName?: IconDefinition;
+ iconName: IconProps['name'];
label: string | null;
}
diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.tsx b/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.tsx
index 2e4789683..9abbaed13 100644
--- a/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.tsx
+++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.tsx
@@ -357,7 +357,7 @@ function InteractiveImportRow(props: InteractiveImportRowProps) {
<>
{indexerFlags ? (
}
+ anchor={}
title={translate('IndexerFlags')}
body={}
position={tooltipPositions.LEFT}
diff --git a/frontend/src/InteractiveSearch/InteractiveSearchRow.tsx b/frontend/src/InteractiveSearch/InteractiveSearchRow.tsx
index 497cb0bf3..c2bc0afb0 100644
--- a/frontend/src/InteractiveSearch/InteractiveSearchRow.tsx
+++ b/frontend/src/InteractiveSearch/InteractiveSearchRow.tsx
@@ -283,7 +283,7 @@ function InteractiveSearchRow(props: InteractiveSearchRowProps) {
{indexerFlags.length ? (
}
+ anchor={}
title={translate('IndexerFlags')}
body={
diff --git a/frontend/src/Movie/Index/Overview/MovieIndexOverviewInfoRow.tsx b/frontend/src/Movie/Index/Overview/MovieIndexOverviewInfoRow.tsx
index df22c18af..48f96d5fd 100644
--- a/frontend/src/Movie/Index/Overview/MovieIndexOverviewInfoRow.tsx
+++ b/frontend/src/Movie/Index/Overview/MovieIndexOverviewInfoRow.tsx
@@ -1,10 +1,10 @@
import React from 'react';
-import Icon from 'Components/Icon';
+import Icon, { IconProps } from 'Components/Icon';
import styles from './MovieIndexOverviewInfoRow.css';
interface MovieIndexOverviewInfoRowProps {
title?: string;
- iconName: object;
+ iconName: IconProps['name'];
label: string;
}
diff --git a/frontend/src/System/Tasks/Queued/QueuedTaskRow.tsx b/frontend/src/System/Tasks/Queued/QueuedTaskRow.tsx
index 4511bcbf4..66d762039 100644
--- a/frontend/src/System/Tasks/Queued/QueuedTaskRow.tsx
+++ b/frontend/src/System/Tasks/Queued/QueuedTaskRow.tsx
@@ -2,7 +2,7 @@ import moment from 'moment';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { CommandBody } from 'Commands/Command';
-import Icon from 'Components/Icon';
+import Icon, { IconProps } from 'Components/Icon';
import IconButton from 'Components/Link/IconButton';
import ConfirmModal from 'Components/Modal/ConfirmModal';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -19,7 +19,10 @@ import translate from 'Utilities/String/translate';
import QueuedTaskRowNameCell from './QueuedTaskRowNameCell';
import styles from './QueuedTaskRow.css';
-function getStatusIconProps(status: string, message: string | undefined) {
+function getStatusIconProps(
+ status: string,
+ message: string | undefined
+): IconProps {
const title = titleCase(status);
switch (status) {