chore(eslint): add react/self-closing-comp (#2563)
This commit is contained in:
@@ -45,8 +45,10 @@ module.exports = {
|
||||
overrides: [
|
||||
{
|
||||
files: ['**/*.tsx'],
|
||||
plugins: ['react'],
|
||||
rules: {
|
||||
'react/prop-types': 'off',
|
||||
'react/self-closing-comp': 'error',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@@ -24,13 +24,13 @@ const SlideCheckbox = ({ onClick, checked = false }: SlideCheckboxProps) => {
|
||||
className={`${
|
||||
checked ? 'bg-indigo-500' : 'bg-gray-700'
|
||||
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
|
||||
></span>
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`${
|
||||
checked ? 'translate-x-5' : 'translate-x-0'
|
||||
} absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
|
||||
></span>
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -508,7 +508,7 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
|
||||
typeof errors.data === 'string' && (
|
||||
<div className="error">{errors.data}</div>
|
||||
)}
|
||||
<div className="flex-1"></div>
|
||||
<div className="flex-1" />
|
||||
{resultCount === 0 ? (
|
||||
<Tooltip content={intl.formatMessage(messages.needresults)}>
|
||||
<div>
|
||||
|
||||
@@ -58,7 +58,7 @@ const GenreCardPlaceholder = () => {
|
||||
return (
|
||||
<div
|
||||
className={`relative h-32 w-56 animate-pulse rounded-xl bg-gray-700 sm:h-40 sm:w-72`}
|
||||
></div>
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -163,7 +163,7 @@ const Sidebar = ({
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0">
|
||||
<div className="absolute inset-0 bg-gray-900 opacity-90"></div>
|
||||
<div className="absolute inset-0 bg-gray-900 opacity-90" />
|
||||
</div>
|
||||
</Transition.Child>
|
||||
<Transition.Child
|
||||
|
||||
@@ -154,7 +154,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
|
||||
{errors.password && touched.password && (
|
||||
<div className="error">{errors.password}</div>
|
||||
)}
|
||||
<div className="flex-grow"></div>
|
||||
<div className="flex-grow" />
|
||||
{baseUrl && (
|
||||
<a
|
||||
href={
|
||||
|
||||
@@ -120,7 +120,7 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
|
||||
typeof errors.password === 'string' && (
|
||||
<div className="error">{errors.password}</div>
|
||||
)}
|
||||
<div className="flex-grow"></div>
|
||||
<div className="flex-grow" />
|
||||
{passwordResetEnabled && (
|
||||
<Link
|
||||
href="/resetpassword"
|
||||
|
||||
@@ -241,11 +241,11 @@ const Login = () => {
|
||||
{additionalLoginOptions.length > 0 &&
|
||||
(loginFormVisible ? (
|
||||
<div className="flex items-center py-5">
|
||||
<div className="flex-grow border-t border-gray-600"></div>
|
||||
<div className="flex-grow border-t border-gray-600" />
|
||||
<span className="mx-2 flex-shrink text-sm text-gray-400">
|
||||
{intl.formatMessage(messages.orsigninwith)}
|
||||
</span>
|
||||
<div className="flex-grow border-t border-gray-600"></div>
|
||||
<div className="flex-grow border-t border-gray-600" />
|
||||
</div>
|
||||
) : (
|
||||
<h2 className="mb-6 text-center text-lg font-bold text-neutral-200">
|
||||
|
||||
@@ -340,13 +340,13 @@ const CollectionRequestModal = ({
|
||||
className={`${
|
||||
isAllParts() ? 'bg-indigo-500' : 'bg-gray-800'
|
||||
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
|
||||
></span>
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`${
|
||||
isAllParts() ? 'translate-x-5' : 'translate-x-0'
|
||||
} absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
|
||||
></span>
|
||||
/>
|
||||
</span>
|
||||
</th>
|
||||
<th className="bg-gray-700 bg-opacity-80 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
|
||||
@@ -423,7 +423,7 @@ const CollectionRequestModal = ({
|
||||
? 'bg-indigo-500'
|
||||
: 'bg-gray-700'
|
||||
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
|
||||
></span>
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`${
|
||||
@@ -435,7 +435,7 @@ const CollectionRequestModal = ({
|
||||
? 'translate-x-5'
|
||||
: 'translate-x-0'
|
||||
} absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
|
||||
></span>
|
||||
/>
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
|
||||
@@ -557,13 +557,13 @@ const TvRequestModal = ({
|
||||
className={`${
|
||||
isAllSeasons() ? 'bg-indigo-500' : 'bg-gray-800'
|
||||
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
|
||||
></span>
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`${
|
||||
isAllSeasons() ? 'translate-x-5' : 'translate-x-0'
|
||||
} absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
|
||||
></span>
|
||||
/>
|
||||
</span>
|
||||
</th>
|
||||
<th className="bg-gray-700 bg-opacity-80 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
|
||||
@@ -649,7 +649,7 @@ const TvRequestModal = ({
|
||||
? 'bg-indigo-500'
|
||||
: 'bg-gray-700'
|
||||
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
|
||||
></span>
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`${
|
||||
@@ -662,7 +662,7 @@ const TvRequestModal = ({
|
||||
? 'translate-x-5'
|
||||
: 'translate-x-0'
|
||||
} absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
|
||||
></span>
|
||||
/>
|
||||
</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
|
||||
|
||||
@@ -495,7 +495,7 @@ const SettingsJobs = () => {
|
||||
<Table.TH>{intl.formatMessage(messages.jobname)}</Table.TH>
|
||||
<Table.TH>{intl.formatMessage(messages.jobtype)}</Table.TH>
|
||||
<Table.TH>{intl.formatMessage(messages.nextexecution)}</Table.TH>
|
||||
<Table.TH></Table.TH>
|
||||
<Table.TH />
|
||||
</tr>
|
||||
</thead>
|
||||
<Table.TBody>
|
||||
@@ -578,7 +578,7 @@ const SettingsJobs = () => {
|
||||
<Table.TH>{intl.formatMessage(messages.cachekeys)}</Table.TH>
|
||||
<Table.TH>{intl.formatMessage(messages.cacheksize)}</Table.TH>
|
||||
<Table.TH>{intl.formatMessage(messages.cachevsize)}</Table.TH>
|
||||
<Table.TH></Table.TH>
|
||||
<Table.TH />
|
||||
</tr>
|
||||
</thead>
|
||||
<Table.TBody>
|
||||
@@ -639,7 +639,7 @@ const SettingsJobs = () => {
|
||||
<Table.TH>
|
||||
{intl.formatMessage(messages.dnscacheage)}
|
||||
</Table.TH>
|
||||
<Table.TH></Table.TH>
|
||||
<Table.TH />
|
||||
</tr>
|
||||
</thead>
|
||||
<Table.TBody>
|
||||
|
||||
@@ -314,7 +314,7 @@ const SettingsLogs = () => {
|
||||
<Table.TH>{intl.formatMessage(messages.level)}</Table.TH>
|
||||
<Table.TH>{intl.formatMessage(messages.label)}</Table.TH>
|
||||
<Table.TH>{intl.formatMessage(messages.message)}</Table.TH>
|
||||
<Table.TH></Table.TH>
|
||||
<Table.TH />
|
||||
</tr>
|
||||
</thead>
|
||||
<Table.TBody>
|
||||
|
||||
@@ -186,13 +186,13 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
|
||||
className={`${
|
||||
isAllUsers() ? 'bg-indigo-500' : 'bg-gray-800'
|
||||
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
|
||||
></span>
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`${
|
||||
isAllUsers() ? 'translate-x-5' : 'translate-x-0'
|
||||
} absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
|
||||
></span>
|
||||
/>
|
||||
</span>
|
||||
</th>
|
||||
<th className="bg-gray-500 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
|
||||
@@ -230,7 +230,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
|
||||
? 'bg-indigo-500'
|
||||
: 'bg-gray-800'
|
||||
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
|
||||
></span>
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`${
|
||||
@@ -238,7 +238,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
|
||||
? 'translate-x-5'
|
||||
: 'translate-x-0'
|
||||
} absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
|
||||
></span>
|
||||
/>
|
||||
</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
|
||||
|
||||
@@ -152,13 +152,13 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
|
||||
className={`${
|
||||
isAllUsers() ? 'bg-indigo-500' : 'bg-gray-800'
|
||||
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
|
||||
></span>
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`${
|
||||
isAllUsers() ? 'translate-x-5' : 'translate-x-0'
|
||||
} absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
|
||||
></span>
|
||||
/>
|
||||
</span>
|
||||
</th>
|
||||
<th className="bg-gray-500 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
|
||||
@@ -189,7 +189,7 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
|
||||
? 'bg-indigo-500'
|
||||
: 'bg-gray-800'
|
||||
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
|
||||
></span>
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`${
|
||||
@@ -197,7 +197,7 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
|
||||
? 'translate-x-5'
|
||||
: 'translate-x-0'
|
||||
} absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
|
||||
></span>
|
||||
/>
|
||||
</span>
|
||||
</td>
|
||||
<td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
|
||||
|
||||
@@ -53,7 +53,7 @@ const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
|
||||
<span
|
||||
className="absolute inset-0 rounded-full shadow-inner"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-1.5">
|
||||
|
||||
@@ -206,7 +206,7 @@ const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
|
||||
<meta
|
||||
name="viewport"
|
||||
content="initial-scale=1, viewport-fit=cover, width=device-width"
|
||||
></meta>
|
||||
/>
|
||||
<PWAHeader
|
||||
applicationTitle={currentSettings.applicationTitle}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user