mirror of
https://github.com/sct/overseerr.git
synced 2025-09-27 04:22:37 +02:00
eb5502a16f
* fix(ui): remove opacity classes from transition enter and leave props The flickering was caused by the opacity classes in the `leave` prop to take effect as the transition ends; when the `leaveTo` prop classes are no longer applied, but the `leave` prop classes are still applied. * fix(ui): resolve transition issues for all components 1. Remove opacity classes from `enter` and `leave` props 2. Fix some class name typos 3. Remove transform classes since those are automatically applied as from TailwindCSS v3.0 4. Narrow down `transition` classes to only the properties being transitioned in Transition components
64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import { CheckIcon, XMarkIcon } from '@heroicons/react/24/solid';
|
|
|
|
interface LibraryItemProps {
|
|
isEnabled?: boolean;
|
|
name: string;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
const LibraryItem = ({ isEnabled, name, onToggle }: LibraryItemProps) => {
|
|
return (
|
|
<li className="col-span-1 flex rounded-md shadow-sm">
|
|
<div className="flex flex-1 items-center justify-between truncate rounded-md border-t border-b border-r border-gray-700 bg-gray-600">
|
|
<div className="flex-1 cursor-default truncate px-4 py-6 text-sm leading-5">
|
|
{name}
|
|
</div>
|
|
<div className="flex-shrink-0 pr-2">
|
|
<span
|
|
role="checkbox"
|
|
tabIndex={0}
|
|
aria-checked={isEnabled}
|
|
onClick={() => onToggle()}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
onToggle();
|
|
}
|
|
}}
|
|
className={`${
|
|
isEnabled ? 'bg-indigo-600' : 'bg-gray-700'
|
|
} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring`}
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
className={`${
|
|
isEnabled ? 'translate-x-5' : 'translate-x-0'
|
|
} relative inline-block h-5 w-5 rounded-full bg-white shadow transition duration-200 ease-in-out`}
|
|
>
|
|
<span
|
|
className={`${
|
|
isEnabled
|
|
? 'opacity-0 duration-100 ease-out'
|
|
: 'opacity-100 duration-200 ease-in'
|
|
} absolute inset-0 flex h-full w-full items-center justify-center transition-opacity`}
|
|
>
|
|
<XMarkIcon className="h-3 w-3 text-gray-400" />
|
|
</span>
|
|
<span
|
|
className={`${
|
|
isEnabled
|
|
? 'opacity-100 duration-200 ease-in'
|
|
: 'opacity-0 duration-100 ease-out'
|
|
} absolute inset-0 flex h-full w-full items-center justify-center transition-opacity`}
|
|
>
|
|
<CheckIcon className="h-3 w-3 text-indigo-600" />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export default LibraryItem;
|