gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-06 07:24:25 +01:00
Code Issues Actions 30 Packages Projects Releases Wiki Activity

chore(react/launch_bar): hide dropdown when selecting date

Browse Source
This commit is contained in:
Elian Doran 2025-12-05 09:15:01 +02:00
parent 1af76c4d06
commit d283f5dbb4
No known key found for this signature in database
3 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/src/widgets/launch_bar/CalendarWidget.tsx
View File

@ -1,4 +1,4 @@
import { Dispatch, StateUpdater, useEffect, useMemo, useState } from "preact/hooks";
import { Dispatch, StateUpdater, useEffect, useMemo, useRef, useState } from "preact/hooks";
import FNote from "../../entities/fnote";
import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
import { Dayjs, dayjs } from "@triliumnext/commons";
@ -11,6 +11,7 @@ import FormDropdownList from "../react/FormDropdownList";
import FormTextBox from "../react/FormTextBox";
import toast from "../../services/toast";
import date_notes from "../../services/date_notes";
import { Dropdown } from "bootstrap";
const MONTHS = [
t("calendar.january"),
@ -31,6 +32,7 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
const { title, icon } = useLauncherIconAndTitle(launcherNote);
const [ calendarArgs, setCalendarArgs ] = useState<Pick<CalendarArgs, "activeDate" | "todaysDate">>();
const [ date, setDate ] = useState<Dayjs>();
const dropdownRef = useRef<Dropdown>(null);
return (
<LaunchBarDropdownButton
@ -45,6 +47,7 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
});
setDate(dayjs(activeDate || todaysDate).startOf('month'));
}}
dropdownRef={dropdownRef}
dropdownOptions={{
autoClose: "outside"
}}
@ -57,7 +60,7 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
const note = await date_notes.getDayNote(date);
if (note) {
appContext.tabManager.getActiveContext()?.setNote(note.noteId);
// this.dropdown?.hide();
dropdownRef.current?.hide();
} else {
toast.showError(t("calendar.cannot_find_day_note"));
}

2
apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
View File

@ -20,7 +20,7 @@ export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className"
)
}
export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children" | "onShown" | "dropdownOptions"> & { icon: string }) {
export function LaunchBarDropdownButton({ children, icon, ...props }: Pick<DropdownProps, "title" | "children" | "onShown" | "dropdownOptions" | "dropdownRef"> & { icon: string }) {
return (
<Dropdown
className="right-dropdown-widget"

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

@ -1,7 +1,7 @@
import { Dropdown as BootstrapDropdown } from "bootstrap";
import { ComponentChildren, HTMLAttributes } from "preact";
import { CSSProperties, HTMLProps } from "preact/compat";
import { useCallback, useEffect, useRef, useState } from "preact/hooks";
import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
import { useUniqueName } from "./hooks";
type DataAttributes = {
@ -27,10 +27,11 @@ export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "c
onShown?: () => void;
onHidden?: () => void;
dropdownOptions?: Partial<BootstrapDropdown.Options>;
dropdownRef?: MutableRef<BootstrapDropdown | null>;
}
export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions, buttonProps }: DropdownProps) {
const dropdownRef = useRef<HTMLDivElement | null>(null);
export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown, onShown: externalOnShown, onHidden: externalOnHidden, dropdownOptions, buttonProps, dropdownRef }: DropdownProps) {
const containerRef = useRef<HTMLDivElement | null>(null);
const triggerRef = useRef<HTMLButtonElement | null>(null);
const [ shown, setShown ] = useState(false);
@ -39,6 +40,9 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
if (!triggerRef.current) return;
const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current, dropdownOptions);
if (dropdownRef) {
dropdownRef.current = dropdown;
}
if (forceShown) {
dropdown.show();
setShown(true);
@ -57,9 +61,9 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
}, []);
useEffect(() => {
if (!dropdownRef.current) return;
if (!containerRef.current) return;
const $dropdown = $(dropdownRef.current);
const $dropdown = $(containerRef.current);
$dropdown.on("show.bs.dropdown", onShown);
$dropdown.on("hide.bs.dropdown", onHidden);
@ -73,7 +77,7 @@ export default function Dropdown({ id, className, buttonClassName, isStatic, chi
const ariaId = useUniqueName("button");
return (
<div ref={dropdownRef} class={`dropdown ${className ?? ""}`} style={{ display: "flex" }}>
<div ref={containerRef} class={`dropdown ${className ?? ""}`} style={{ display: "flex" }}>
<button
className={`${iconAction ? "icon-action" : "btn"} ${!noSelectButtonStyle ? "select-button" : ""} ${buttonClassName ?? ""} ${!hideToggleArrow ? "dropdown-toggle" : ""}`}
ref={triggerRef}