Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-12 08:15:52 +01:00
Code Issues Packages Projects Releases Activity

feat(react): port note icon

Browse Source
This commit is contained in:
Elian Doran
2025-08-21 14:41:59 +03:00
parent 009fd63ce9
commit aa608510d0
7 changed files with 185 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/client/src/widgets/react/Dropdown.tsx
View File

@@ -1,14 +1,20 @@
import { Dropdown as BootstrapDropdown } from "bootstrap";
import { ComponentChildren } from "preact";
import { CSSProperties } from "preact/compat";
import { useEffect, useRef } from "preact/hooks";
import { useUniqueName } from "./hooks";
interface DropdownProps {
className?: string;
buttonClassName?: string;
isStatic?: boolean;
children: ComponentChildren;
title?: string;
dropdownContainerStyle?: CSSProperties;
hideToggleArrow?: boolean;
}
export default function Dropdown({ className, isStatic, children }: DropdownProps) {
export default function Dropdown({ className, buttonClassName, isStatic, children, title, dropdownContainerStyle, hideToggleArrow }: DropdownProps) {
const dropdownRef = useRef<HTMLDivElement | null>(null);
const triggerRef = useRef<HTMLButtonElement | null>(null);
@@ -35,16 +41,27 @@ export default function Dropdown({ className, isStatic, children }: DropdownProp
};
}, []); // Add dependency array
const ariaId = useUniqueName("button");
return (
<div ref={dropdownRef} class="dropdown" style={{ display: "flex" }}>
<div ref={dropdownRef} class={`dropdown ${className ?? ""}`} style={{ display: "flex" }}>
<button
className={`btn ${buttonClassName ?? ""} ${!hideToggleArrow ? "dropdown-toggle" : ""}`}
ref={triggerRef}
type="button"
style={{ display: "none" }}
data-bs-toggle="dropdown"
data-bs-display={ isStatic ? "static" : undefined } />
data-bs-display={ isStatic ? "static" : undefined }
aria-haspopup="true"
aria-expanded="false"
title={title}
id={ariaId}
/>
<div class={`dropdown-menu ${className ?? ""} ${isStatic ? "static" : undefined}`}>
<div
class={`dropdown-menu ${isStatic ? "static" : undefined}`}
style={dropdownContainerStyle}
aria-labelledby={ariaId}
>
{children}
</div>
</div>