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

Convert Label to TypeScript

This commit is contained in:
Treycos 2024-08-19 03:54:30 +02:00 committed by GitHub
parent 8484a8beba
commit 3eca63a67c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 43 additions and 52 deletions

View File

@ -1,48 +0,0 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { kinds, sizes } from 'Helpers/Props';
import styles from './Label.css';
function Label(props) {
const {
className,
kind,
size,
outline,
children,
...otherProps
} = props;
return (
<span
className={classNames(
className,
styles[kind],
styles[size],
outline && styles.outline
)}
{...otherProps}
>
{children}
</span>
);
}
Label.propTypes = {
className: PropTypes.string.isRequired,
title: PropTypes.string,
kind: PropTypes.oneOf(kinds.all).isRequired,
size: PropTypes.oneOf(sizes.all).isRequired,
outline: PropTypes.bool.isRequired,
children: PropTypes.node.isRequired
};
Label.defaultProps = {
className: styles.label,
kind: kinds.DEFAULT,
size: sizes.SMALL,
outline: false
};
export default Label;

View File

@ -0,0 +1,31 @@
import classNames from 'classnames';
import React, { ComponentProps, ReactNode } from 'react';
import { kinds, sizes } from 'Helpers/Props';
import styles from './Label.css';
export interface LabelProps extends ComponentProps<'span'> {
kind?: Extract<(typeof kinds.all)[number], keyof typeof styles>;
size?: Extract<(typeof sizes.all)[number], keyof typeof styles>;
outline?: boolean;
children: ReactNode;
}
export default function Label({
className = styles.label,
kind = kinds.DEFAULT,
size = sizes.SMALL,
outline = false,
...otherProps
}: LabelProps) {
return (
<span
className={classNames(
className,
styles[kind],
styles[size],
outline && styles.outline
)}
{...otherProps}
/>
);
}

View File

@ -19,5 +19,5 @@ export const all = [
PRIMARY,
PURPLE,
SUCCESS,
WARNING
];
WARNING,
] as const;

View File

@ -4,4 +4,12 @@ export const MEDIUM = 'medium';
export const LARGE = 'large';
export const EXTRA_LARGE = 'extraLarge';
export const EXTRA_EXTRA_LARGE = 'extraExtraLarge';
export const all = [EXTRA_SMALL, SMALL, MEDIUM, LARGE, EXTRA_LARGE, EXTRA_EXTRA_LARGE];
export const all = [
EXTRA_SMALL,
SMALL,
MEDIUM,
LARGE,
EXTRA_LARGE,
EXTRA_EXTRA_LARGE,
] as const;

View File

@ -67,7 +67,7 @@ function DiskSpace() {
const { freeSpace, totalSpace } = item;
const diskUsage = 100 - (freeSpace / totalSpace) * 100;
let diskUsageKind = kinds.PRIMARY;
let diskUsageKind: (typeof kinds.all)[number] = kinds.PRIMARY;
if (diskUsage > 90) {
diskUsageKind = kinds.DANGER;