From 7626cfd546f2d30747270e751fc34793b3129ecb Mon Sep 17 00:00:00 2001 From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com> Date: Sun, 25 Aug 2024 21:45:01 +0800 Subject: [PATCH] fix: database tabs (#6067) --- .../as-template/AsTemplateButton.tsx | 2 +- .../components/as-template/AsTemplateForm.tsx | 1 + .../related-template/TemplateItem.tsx | 1 + .../database/components/tabs/DatabaseTabs.tsx | 25 ++++++++++++++++++- .../src/components/publish/DatabaseView.tsx | 10 ++++++-- .../publish/header/duplicate/Duplicate.tsx | 12 ++++----- 6 files changed, 41 insertions(+), 10 deletions(-) diff --git a/frontend/appflowy_web_app/src/components/as-template/AsTemplateButton.tsx b/frontend/appflowy_web_app/src/components/as-template/AsTemplateButton.tsx index fcef1e5385..e0ec762ddd 100644 --- a/frontend/appflowy_web_app/src/components/as-template/AsTemplateButton.tsx +++ b/frontend/appflowy_web_app/src/components/as-template/AsTemplateButton.tsx @@ -11,7 +11,7 @@ function AsTemplateButton () { const viewMeta = useViewMeta(); const navigate = useNavigate(); const handleClick = useCallback(() => { - const url = encodeURIComponent(window.location.href); + const url = encodeURIComponent(window.location.href.replace(window.location.search, '')); navigate(`/as-template?viewUrl=${url}&viewName=${viewMeta?.name || ''}&viewId=${viewMeta?.viewId || ''}`); }, [navigate, viewMeta]); diff --git a/frontend/appflowy_web_app/src/components/as-template/AsTemplateForm.tsx b/frontend/appflowy_web_app/src/components/as-template/AsTemplateForm.tsx index c6ce46c098..9adb9c6c2f 100644 --- a/frontend/appflowy_web_app/src/components/as-template/AsTemplateForm.tsx +++ b/frontend/appflowy_web_app/src/components/as-template/AsTemplateForm.tsx @@ -30,6 +30,7 @@ function AsTemplateForm ({ viewUrl, defaultValues, onSubmit, defaultRelatedTempl const iframeUrl = useMemo(() => { const url = new URL(viewUrl); + url.searchParams.delete('v'); url.searchParams.set('theme', 'light'); url.searchParams.set('template', 'true'); return url.toString(); diff --git a/frontend/appflowy_web_app/src/components/as-template/related-template/TemplateItem.tsx b/frontend/appflowy_web_app/src/components/as-template/related-template/TemplateItem.tsx index cf53d35db2..7960ae8464 100644 --- a/frontend/appflowy_web_app/src/components/as-template/related-template/TemplateItem.tsx +++ b/frontend/appflowy_web_app/src/components/as-template/related-template/TemplateItem.tsx @@ -8,6 +8,7 @@ function TemplateItem ({ template, category }: { template: TemplateSummary; cate const iframeUrl = useMemo(() => { const url = new URL(template.view_url); + url.searchParams.delete('v'); url.searchParams.set('theme', 'light'); url.searchParams.set('template', 'true'); url.searchParams.set('thumbnail', 'true'); diff --git a/frontend/appflowy_web_app/src/components/database/components/tabs/DatabaseTabs.tsx b/frontend/appflowy_web_app/src/components/database/components/tabs/DatabaseTabs.tsx index 94eee7db97..3b5b070110 100644 --- a/frontend/appflowy_web_app/src/components/database/components/tabs/DatabaseTabs.tsx +++ b/frontend/appflowy_web_app/src/components/database/components/tabs/DatabaseTabs.tsx @@ -3,7 +3,16 @@ import { DatabaseContext, useDatabase, useDatabaseView } from '@/application/dat import { ViewMeta } from '@/application/db/tables/view_metas'; import { DatabaseActions } from '@/components/database/components/conditions'; import { Tooltip } from '@mui/material'; -import { forwardRef, FunctionComponent, SVGProps, useContext, useEffect, useMemo, useState } from 'react'; +import { + forwardRef, + FunctionComponent, + SVGProps, + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from 'react'; import { ViewTabs, ViewTab } from 'src/components/_shared/tabs/ViewTabs'; import { useTranslation } from 'react-i18next'; @@ -67,6 +76,14 @@ export const DatabaseTabs = forwardRef( const showActions = !hideConditions && layout !== DatabaseViewLayout.Calendar; + const getSelectedTabWidth = useCallback(() => { + const selectedTab = document.getElementById(`view-tab-${selectedViewId}`); + + if (!selectedTab) return; + + return selectedTab.clientWidth; + }, [selectedViewId]); + if (viewIds.length === 0) return null; return (
@@ -82,6 +99,11 @@ export const DatabaseTabs = forwardRef( allowScrollButtonsMobile value={selectedViewId} onChange={handleChange} + TabIndicatorProps={{ + style: { + width: getSelectedTabWidth(), + }, + }} > {viewIds.map((viewId) => { const view = views?.get(viewId) as YDatabaseView | null; @@ -94,6 +116,7 @@ export const DatabaseTabs = forwardRef( return ( } iconPosition="start" diff --git a/frontend/appflowy_web_app/src/components/publish/DatabaseView.tsx b/frontend/appflowy_web_app/src/components/publish/DatabaseView.tsx index a4a39de0f7..e2914fb2c5 100644 --- a/frontend/appflowy_web_app/src/components/publish/DatabaseView.tsx +++ b/frontend/appflowy_web_app/src/components/publish/DatabaseView.tsx @@ -28,14 +28,20 @@ function DatabaseView ({ viewMeta, ...props }: DatabaseProps) { const handleChangeView = useCallback( (viewId: string) => { - setSearch({ v: viewId }); + setSearch(prev => { + prev.set('v', viewId); + return prev; + }); }, [setSearch], ); const handleNavigateToRow = useCallback( (rowId: string) => { - setSearch({ r: rowId }); + setSearch(prev => { + prev.set('r', rowId); + return prev; + }); }, [setSearch], ); diff --git a/frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx b/frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx index 76a7e58ce1..c106ebf02f 100644 --- a/frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx +++ b/frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx @@ -6,16 +6,16 @@ import { useSearchParams } from 'react-router-dom'; import { useDuplicate } from '@/components/publish/header/duplicate/useDuplicate'; import DuplicateModal from '@/components/publish/header/duplicate/DuplicateModal'; -export function Duplicate() { +export function Duplicate () { const { t } = useTranslation(); const { loginOpen, duplicateOpen, handleDuplicateClose, handleLoginClose, url } = useDuplicate(); - const [search, setSearch] = useSearchParams(); + const [, setSearch] = useSearchParams(); const handleClick = useCallback(() => { - setSearch({ - ...search, - action: 'duplicate', + setSearch(prev => { + prev.set('action', 'duplicate'); + return prev; }); - }, [search, setSearch]); + }, [setSearch]); return ( <>