mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-09-13 04:08:22 +02:00
James Brunton
8ab060a4be
# Description of Changes When I added Prettier formatting in #6052, my aim was to use just the default settings in Prettier. Turns out, Prettier looks _really hard_ for any config files if it's not explicitly given one, which means that if a developer has some sort of Prettier config file lying around on their system, Prettier might find it and use it. Also, Prettier changes its defaults based on stuff in `.editorconfig` without any good way of disabling that behaviour explicitly in its config file. To solve both of these issues, I've introduced a `.prettierrc` file which sets Prettier's defaults explicitly, and then reformatted all our code _again_ in Prettier's actual default settings. This should achieve the aim of #6052 and remove the possibility for it breaking on different dev computers.
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import "@app/components/shared/DisabledButtonWithTooltip.css";
|
|
|
|
interface DisabledButtonWithTooltipProps {
|
|
/** Tooltip text shown on hover */
|
|
tooltip: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
/**
|
|
* A visually disabled button that still responds to hover (showing a tooltip).
|
|
* Mantine's disabled prop prevents pointer events entirely, so this is a plain
|
|
* div styled to match a disabled button with a custom hover tooltip.
|
|
*/
|
|
export function DisabledButtonWithTooltip({
|
|
tooltip,
|
|
children,
|
|
className,
|
|
style,
|
|
}: DisabledButtonWithTooltipProps) {
|
|
const [hovered, setHovered] = React.useState(false);
|
|
return (
|
|
<div
|
|
className="relative w-full"
|
|
onMouseEnter={() => setHovered(true)}
|
|
onMouseLeave={() => setHovered(false)}
|
|
>
|
|
<div
|
|
className={`locked-button${className ? ` ${className}` : ""}`}
|
|
style={style}
|
|
>
|
|
{children}
|
|
</div>
|
|
{hovered && (
|
|
<div className="locked-button-tooltip">
|
|
{tooltip}
|
|
<div className="locked-button-tooltip-arrow" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|