From 465a8bd505e24c789b43cc07722d3c28d2a8abf7 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 10 Jul 2022 11:22:45 +0200 Subject: [PATCH] fix: Version tag should open new tab, related type improvements closes #3737 --- app/components/Breadcrumb.tsx | 2 +- app/components/Button.tsx | 3 ++- app/components/ContextMenu/MenuItem.tsx | 3 ++- app/components/DocumentMeta.tsx | 3 ++- app/components/DocumentMetaWithViews.tsx | 3 ++- app/components/List/Item.tsx | 6 +++++- app/components/Sidebar/components/NavLink.tsx | 12 +++++------- app/components/Sidebar/components/SidebarLink.tsx | 4 ++-- app/components/Sidebar/components/Version.tsx | 1 + app/components/Tab.tsx | 9 +++------ app/types.ts | 4 ++-- 11 files changed, 27 insertions(+), 23 deletions(-) diff --git a/app/components/Breadcrumb.tsx b/app/components/Breadcrumb.tsx index b0c3d205e..d6c8bc324 100644 --- a/app/components/Breadcrumb.tsx +++ b/app/components/Breadcrumb.tsx @@ -37,7 +37,7 @@ function Breadcrumb({ return ( {topLevelItems.map((item, index) => ( - + {item.icon} {item.to ? ( = { primary?: boolean; fullwidth?: boolean; as?: T; - to?: string; + to?: LocationDescriptor; borderOnHover?: boolean; href?: string; "data-on"?: string; diff --git a/app/components/ContextMenu/MenuItem.tsx b/app/components/ContextMenu/MenuItem.tsx index 56330303f..0618bc365 100644 --- a/app/components/ContextMenu/MenuItem.tsx +++ b/app/components/ContextMenu/MenuItem.tsx @@ -1,3 +1,4 @@ +import { LocationDescriptor } from "history"; import { CheckmarkIcon } from "outline-icons"; import * as React from "react"; import { MenuItem as BaseMenuItem } from "reakit/Menu"; @@ -10,7 +11,7 @@ type Props = { selected?: boolean; disabled?: boolean; dangerous?: boolean; - to?: string; + to?: LocationDescriptor; href?: string; target?: "_blank"; as?: string | React.ComponentType; diff --git a/app/components/DocumentMeta.tsx b/app/components/DocumentMeta.tsx index 716ce0657..c3fcba22f 100644 --- a/app/components/DocumentMeta.tsx +++ b/app/components/DocumentMeta.tsx @@ -1,3 +1,4 @@ +import { LocationDescriptor } from "history"; import { observer } from "mobx-react"; import * as React from "react"; import { useTranslation } from "react-i18next"; @@ -35,7 +36,7 @@ type Props = { showLastViewed?: boolean; showParentDocuments?: boolean; document: Document; - to?: string; + to?: LocationDescriptor; }; const DocumentMeta: React.FC = ({ diff --git a/app/components/DocumentMetaWithViews.tsx b/app/components/DocumentMetaWithViews.tsx index 2499e17e0..79c820f64 100644 --- a/app/components/DocumentMetaWithViews.tsx +++ b/app/components/DocumentMetaWithViews.tsx @@ -1,3 +1,4 @@ +import { LocationDescriptor } from "history"; import { observer, useObserver } from "mobx-react"; import * as React from "react"; import { useTranslation } from "react-i18next"; @@ -12,7 +13,7 @@ import useStores from "~/hooks/useStores"; type Props = { document: Document; isDraft: boolean; - to?: string; + to?: LocationDescriptor; rtl?: boolean; }; diff --git a/app/components/List/Item.tsx b/app/components/List/Item.tsx index 46760842d..6a5973585 100644 --- a/app/components/List/Item.tsx +++ b/app/components/List/Item.tsx @@ -69,7 +69,11 @@ const ListItem = ( ); }; -const Wrapper = styled.a<{ $small?: boolean; $border?: boolean; to?: string }>` +const Wrapper = styled.a<{ + $small?: boolean; + $border?: boolean; + to?: string; +}>` display: flex; padding: ${(props) => (props.$border === false ? 0 : "8px 0")}; margin: ${(props) => diff --git a/app/components/Sidebar/components/NavLink.tsx b/app/components/Sidebar/components/NavLink.tsx index 2295e4c66..b318df3b1 100644 --- a/app/components/Sidebar/components/NavLink.tsx +++ b/app/components/Sidebar/components/NavLink.tsx @@ -2,7 +2,7 @@ // This file is pulled almost 100% from react-router with the addition of one // thing, automatic scroll to the active link. It's worth the copy paste because // it avoids recalculating the link match again. -import { Location, createLocation } from "history"; +import { Location, createLocation, LocationDescriptor } from "history"; import * as React from "react"; import { __RouterContext as RouterContext, @@ -13,12 +13,12 @@ import { Link } from "react-router-dom"; import scrollIntoView from "smooth-scroll-into-view-if-needed"; const resolveToLocation = ( - to: string | Record, + to: LocationDescriptor | ((location: Location) => LocationDescriptor), currentLocation: Location ) => (typeof to === "function" ? to(currentLocation) : to); const normalizeToLocation = ( - to: string | Record, + to: LocationDescriptor, currentLocation: Location ) => { return typeof to === "string" @@ -30,17 +30,15 @@ const joinClassnames = (...classnames: (string | undefined)[]) => { return classnames.filter((i) => i).join(" "); }; -export type Props = React.HTMLAttributes & { +export type Props = React.AnchorHTMLAttributes & { activeClassName?: string; activeStyle?: React.CSSProperties; - className?: string; scrollIntoViewIfNeeded?: boolean; exact?: boolean; isActive?: (match: match | null, location: Location) => boolean; location?: Location; strict?: boolean; - style?: React.CSSProperties; - to: string | Record; + to: LocationDescriptor; }; /** diff --git a/app/components/Sidebar/components/SidebarLink.tsx b/app/components/Sidebar/components/SidebarLink.tsx index 4c132f72f..49e6041bd 100644 --- a/app/components/Sidebar/components/SidebarLink.tsx +++ b/app/components/Sidebar/components/SidebarLink.tsx @@ -1,3 +1,4 @@ +import { LocationDescriptor } from "history"; import * as React from "react"; import styled, { useTheme, css } from "styled-components"; import breakpoint from "styled-components-breakpoint"; @@ -14,8 +15,7 @@ export type DragObject = NavigationNode & { }; type Props = Omit & { - to?: string | Record; - href?: string | Record; + to?: LocationDescriptor; innerRef?: (ref: HTMLElement | null | undefined) => void; onClick?: React.MouseEventHandler; onMouseEnter?: React.MouseEventHandler; diff --git a/app/components/Sidebar/components/Version.tsx b/app/components/Sidebar/components/Version.tsx index 25aff4689..7e3784d04 100644 --- a/app/components/Sidebar/components/Version.tsx +++ b/app/components/Sidebar/components/Version.tsx @@ -32,6 +32,7 @@ export default function Version() { return ( diff --git a/app/components/Tab.tsx b/app/components/Tab.tsx index 4d12f6a49..35abeac90 100644 --- a/app/components/Tab.tsx +++ b/app/components/Tab.tsx @@ -1,17 +1,14 @@ import { m } from "framer-motion"; import * as React from "react"; import styled, { useTheme } from "styled-components"; -import NavLinkWithChildrenFunc from "~/components/NavLink"; +import NavLink from "~/components/NavLink"; -type Props = Omit< - React.ComponentProps, - "children" -> & { +type Props = Omit, "children"> & { to: string; exact?: boolean; }; -const TabLink = styled(NavLinkWithChildrenFunc)` +const TabLink = styled(NavLink)` position: relative; display: inline-flex; align-items: center; diff --git a/app/types.ts b/app/types.ts index ed74ee784..bfd3d1e8e 100644 --- a/app/types.ts +++ b/app/types.ts @@ -1,4 +1,4 @@ -import { Location } from "history"; +import { Location, LocationDescriptor } from "history"; import { TFunction } from "react-i18next"; import RootStore from "~/stores/RootStore"; import Document from "~/models/Document"; @@ -40,7 +40,7 @@ export type MenuHeading = { export type MenuInternalLink = { type: "route"; title: React.ReactNode; - to: string; + to: LocationDescriptor; visible?: boolean; selected?: boolean; disabled?: boolean;