Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-16 21:29:56 +01:00
Code Issues Packages Projects Releases Activity

chore(react/type_widgets): introduce disabled tooltip

Browse Source
This commit is contained in:
Elian Doran
2025-09-21 12:01:27 +03:00
parent b7574b3ca7
commit 376ef0c679
4 changed files with 21 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/client/src/widgets/react/FormList.tsx
View File

@@ -22,7 +22,7 @@ export default function FormList({ children, onSelect, style, fullHeight }: Form
if (!triggerRef.current || !wrapperRef.current) {
return;
}
const $wrapperRef = $(wrapperRef.current);
const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current);
$wrapperRef.on("hide.bs.dropdown", (e) => e.preventDefault());
@@ -82,6 +82,8 @@ interface FormListItemOpts {
active?: boolean;
badges?: FormListBadge[];
disabled?: boolean;
/** Will indicate the reason why the item is disabled via an icon, when hovered over it. */
disabledTooltip?: string;
checked?: boolean | null;
selected?: boolean;
onClick?: (e: MouseEvent) => void;
@@ -118,21 +120,24 @@ export function FormListItem({ className, icon, value, title, active, disabled,
<Icon icon={icon} />&nbsp;
{description ? (
<div>
<FormListContent description={description} {...contentProps} />
<FormListContent description={description} disabled={disabled} {...contentProps} />
</div>
) : (
<FormListContent description={description} {...contentProps} />
<FormListContent description={description} disabled={disabled} {...contentProps} />
)}
</li>
);
}
function FormListContent({ children, badges, description }: Pick<FormListItemOpts, "children" | "badges" | "description">) {
function FormListContent({ children, badges, description, disabled, disabledTooltip }: Pick<FormListItemOpts, "children" | "badges" | "description" | "disabled" | "disabledTooltip">) {
return <>
{children}
{badges && badges.map(({ className, text }) => (
<span className={`badge ${className ?? ""}`}>{text}</span>
))}
{disabled && disabledTooltip && (
<span class="bx bx-info-circle disabled-tooltip" title={disabledTooltip} />
)}
{description && <div className="description">{description}</div>}
</>;
}
@@ -177,4 +182,4 @@ export function FormDropdownSubmenu({ icon, title, children }: { icon: string, t
</ul>
</li>
)
}
}