mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 00:36:31 +02:00
Merge pull request #1268 from aaron-seq/fix/move-open-reset-effects-to-onOpenChange
fix(dialogs): move open-reset effects into onOpenChange handlers
This commit is contained in:
commit
6bd4ffb98e
3 changed files with 29 additions and 20 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useCallback, useEffect, useRef, useState } from "react";
|
import { useCallback, useRef, useState } from "react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
|
|
@ -29,12 +29,16 @@ export function CreateFolderDialog({
|
||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
const handleOpenChange = useCallback(
|
||||||
if (open) {
|
(next: boolean) => {
|
||||||
setName("");
|
if (next) {
|
||||||
setTimeout(() => inputRef.current?.focus(), 0);
|
setName("");
|
||||||
}
|
setTimeout(() => inputRef.current?.focus(), 0);
|
||||||
}, [open]);
|
}
|
||||||
|
onOpenChange(next);
|
||||||
|
},
|
||||||
|
[onOpenChange]
|
||||||
|
);
|
||||||
|
|
||||||
const handleSubmit = useCallback(
|
const handleSubmit = useCallback(
|
||||||
(e?: React.FormEvent) => {
|
(e?: React.FormEvent) => {
|
||||||
|
|
@ -50,7 +54,7 @@ export function CreateFolderDialog({
|
||||||
const isSubfolder = !!parentFolderName;
|
const isSubfolder = !!parentFolderName;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||||
<DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
|
<DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
|
||||||
<DialogHeader className="space-y-2 pb-2">
|
<DialogHeader className="space-y-2 pb-2">
|
||||||
<div className="flex items-center gap-2 sm:gap-3">
|
<div className="flex items-center gap-2 sm:gap-3">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { ChevronDown, ChevronRight, Folder, FolderOpen, Home } from "lucide-react";
|
import { ChevronDown, ChevronRight, Folder, FolderOpen, Home } from "lucide-react";
|
||||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
import { useCallback, useMemo, useState } from "react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
|
|
@ -36,12 +36,16 @@ export function FolderPickerDialog({
|
||||||
const [selectedId, setSelectedId] = useState<number | null>(null);
|
const [selectedId, setSelectedId] = useState<number | null>(null);
|
||||||
const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
|
const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
|
||||||
|
|
||||||
useEffect(() => {
|
const handleOpenChange = useCallback(
|
||||||
if (open) {
|
(next: boolean) => {
|
||||||
setSelectedId(null);
|
if (next) {
|
||||||
setExpandedIds(new Set());
|
setSelectedId(null);
|
||||||
}
|
setExpandedIds(new Set());
|
||||||
}, [open]);
|
}
|
||||||
|
onOpenChange(next);
|
||||||
|
},
|
||||||
|
[onOpenChange]
|
||||||
|
);
|
||||||
|
|
||||||
const foldersByParent = useMemo(() => {
|
const foldersByParent = useMemo(() => {
|
||||||
const map: Record<string, FolderDisplay[]> = {};
|
const map: Record<string, FolderDisplay[]> = {};
|
||||||
|
|
@ -123,7 +127,7 @@ export function FolderPickerDialog({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||||
<DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
|
<DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
|
||||||
<DialogHeader className="space-y-2 pb-2">
|
<DialogHeader className="space-y-2 pb-2">
|
||||||
<div className="flex items-center gap-2 sm:gap-3">
|
<div className="flex items-center gap-2 sm:gap-3">
|
||||||
|
|
|
||||||
|
|
@ -27,13 +27,14 @@ export function FreeModelSelector({ className }: { className?: string }) {
|
||||||
anonymousChatApiService.getModels().then(setModels).catch(console.error);
|
anonymousChatApiService.getModels().then(setModels).catch(console.error);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
const handleOpenChange = useCallback((next: boolean) => {
|
||||||
if (open) {
|
if (next) {
|
||||||
setSearchQuery("");
|
setSearchQuery("");
|
||||||
setFocusedIndex(-1);
|
setFocusedIndex(-1);
|
||||||
requestAnimationFrame(() => searchInputRef.current?.focus());
|
requestAnimationFrame(() => searchInputRef.current?.focus());
|
||||||
}
|
}
|
||||||
}, [open]);
|
setOpen(next);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const currentModel = useMemo(
|
const currentModel = useMemo(
|
||||||
() => models.find((m) => m.seo_slug === currentSlug) ?? null,
|
() => models.find((m) => m.seo_slug === currentSlug) ?? null,
|
||||||
|
|
@ -94,7 +95,7 @@ export function FreeModelSelector({ className }: { className?: string }) {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover open={open} onOpenChange={setOpen}>
|
<Popover open={open} onOpenChange={handleOpenChange}>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue