1
0
mirror of https://github.com/Sonarr/Sonarr.git synced 2024-10-29 23:12:39 +01:00

Refactoring: Spinner button component

This commit is contained in:
Treycos 2024-08-15 17:20:40 +02:00
parent e1cbc4a782
commit bf4e7143f2
2 changed files with 40 additions and 58 deletions

View File

@ -1,58 +0,0 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Icon from 'Components/Icon';
import { icons } from 'Helpers/Props';
import Button from './Button';
import styles from './SpinnerButton.css';
function SpinnerButton(props) {
const {
className,
isSpinning,
isDisabled,
spinnerIcon,
children,
...otherProps
} = props;
return (
<Button
className={classNames(
className,
styles.button,
isSpinning && styles.isSpinning
)}
isDisabled={isDisabled || isSpinning}
{...otherProps}
>
<span className={styles.spinnerContainer}>
<Icon
className={styles.spinner}
name={spinnerIcon}
isSpinning={true}
/>
</span>
<span className={styles.label}>
{children}
</span>
</Button>
);
}
SpinnerButton.propTypes = {
...Button.Props,
className: PropTypes.string.isRequired,
isSpinning: PropTypes.bool.isRequired,
isDisabled: PropTypes.bool,
spinnerIcon: PropTypes.object.isRequired,
children: PropTypes.node
};
SpinnerButton.defaultProps = {
className: styles.button,
spinnerIcon: icons.SPINNER
};
export default SpinnerButton;

View File

@ -0,0 +1,40 @@
import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import React from 'react';
import Icon from 'Components/Icon';
import { icons } from 'Helpers/Props';
import Button, { ButtonProps } from './Button';
import styles from './SpinnerButton.css';
export interface SpinnerButtonProps extends ButtonProps {
isSpinning: boolean;
isDisabled?: boolean;
spinnerIcon?: FontAwesomeIconProps['icon'];
}
export default function SpinnerButton({
className = styles.button,
isSpinning,
isDisabled,
spinnerIcon = icons.SPINNER,
children,
...otherProps
}: SpinnerButtonProps) {
return (
<Button
className={classNames(
className,
styles.button,
isSpinning && styles.isSpinning
)}
isDisabled={isDisabled || isSpinning}
{...otherProps}
>
<span className={styles.spinnerContainer}>
<Icon className={styles.spinner} name={spinnerIcon} isSpinning={true} />
</span>
<span className={styles.label}>{children}</span>
</Button>
);
}