Skip to content

Commit 3a8c868

Browse files
cdxkerskeptrunedev
cdxker
authored and
skeptrunedev
committed
bugfix(component): make usePortal an optional argument
1 parent 63d1681 commit 3a8c868

8 files changed

Lines changed: 208 additions & 199 deletions

File tree

‎clients/search-component/example/src/routeTree.gen.ts‎

Lines changed: 75 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,137 @@
1-
/* prettier-ignore-start */
2-
31
/* eslint-disable */
42

53
// @ts-nocheck
64

75
// noinspection JSUnusedGlobalSymbols
86

9-
// This file is auto-generated by TanStack Router
7+
// This file was automatically generated by TanStack Router.
8+
// You should NOT make any changes in this file as it will be overwritten.
9+
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
1010

11-
import { createFileRoute } from '@tanstack/react-router'
11+
import { createFileRoute } from "@tanstack/react-router";
1212

1313
// Import Routes
1414

15-
import { Route as rootRoute } from './routes/__root'
16-
import { Route as SearchpageImport } from './routes/searchpage'
17-
import { Route as RecsImport } from './routes/recs'
18-
import { Route as EcommerceImport } from './routes/ecommerce'
15+
import { Route as rootRoute } from "./routes/__root";
16+
import { Route as SearchpageImport } from "./routes/searchpage";
17+
import { Route as RecsImport } from "./routes/recs";
18+
import { Route as EcommerceImport } from "./routes/ecommerce";
1919

2020
// Create Virtual Routes
2121

22-
const IndexLazyImport = createFileRoute('/')()
22+
const IndexLazyImport = createFileRoute("/")();
2323

2424
// Create/Update Routes
2525

2626
const SearchpageRoute = SearchpageImport.update({
27-
path: '/searchpage',
27+
id: "/searchpage",
28+
path: "/searchpage",
2829
getParentRoute: () => rootRoute,
29-
} as any)
30+
} as any);
3031

3132
const RecsRoute = RecsImport.update({
32-
path: '/recs',
33+
id: "/recs",
34+
path: "/recs",
3335
getParentRoute: () => rootRoute,
34-
} as any)
36+
} as any);
3537

3638
const EcommerceRoute = EcommerceImport.update({
37-
path: '/ecommerce',
39+
id: "/ecommerce",
40+
path: "/ecommerce",
3841
getParentRoute: () => rootRoute,
39-
} as any)
42+
} as any);
4043

4144
const IndexLazyRoute = IndexLazyImport.update({
42-
path: '/',
45+
id: "/",
46+
path: "/",
4347
getParentRoute: () => rootRoute,
44-
} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
48+
} as any).lazy(() => import("./routes/index.lazy").then((d) => d.Route));
4549

4650
// Populate the FileRoutesByPath interface
4751

48-
declare module '@tanstack/react-router' {
52+
declare module "@tanstack/react-router" {
4953
interface FileRoutesByPath {
50-
'/': {
51-
id: '/'
52-
path: '/'
53-
fullPath: '/'
54-
preLoaderRoute: typeof IndexLazyImport
55-
parentRoute: typeof rootRoute
56-
}
57-
'/ecommerce': {
58-
id: '/ecommerce'
59-
path: '/ecommerce'
60-
fullPath: '/ecommerce'
61-
preLoaderRoute: typeof EcommerceImport
62-
parentRoute: typeof rootRoute
63-
}
64-
'/recs': {
65-
id: '/recs'
66-
path: '/recs'
67-
fullPath: '/recs'
68-
preLoaderRoute: typeof RecsImport
69-
parentRoute: typeof rootRoute
70-
}
71-
'/searchpage': {
72-
id: '/searchpage'
73-
path: '/searchpage'
74-
fullPath: '/searchpage'
75-
preLoaderRoute: typeof SearchpageImport
76-
parentRoute: typeof rootRoute
77-
}
54+
"/": {
55+
id: "/";
56+
path: "/";
57+
fullPath: "/";
58+
preLoaderRoute: typeof IndexLazyImport;
59+
parentRoute: typeof rootRoute;
60+
};
61+
"/ecommerce": {
62+
id: "/ecommerce";
63+
path: "/ecommerce";
64+
fullPath: "/ecommerce";
65+
preLoaderRoute: typeof EcommerceImport;
66+
parentRoute: typeof rootRoute;
67+
};
68+
"/recs": {
69+
id: "/recs";
70+
path: "/recs";
71+
fullPath: "/recs";
72+
preLoaderRoute: typeof RecsImport;
73+
parentRoute: typeof rootRoute;
74+
};
75+
"/searchpage": {
76+
id: "/searchpage";
77+
path: "/searchpage";
78+
fullPath: "/searchpage";
79+
preLoaderRoute: typeof SearchpageImport;
80+
parentRoute: typeof rootRoute;
81+
};
7882
}
7983
}
8084

8185
// Create and export the route tree
8286

8387
export interface FileRoutesByFullPath {
84-
'/': typeof IndexLazyRoute
85-
'/ecommerce': typeof EcommerceRoute
86-
'/recs': typeof RecsRoute
87-
'/searchpage': typeof SearchpageRoute
88+
"/": typeof IndexLazyRoute;
89+
"/ecommerce": typeof EcommerceRoute;
90+
"/recs": typeof RecsRoute;
91+
"/searchpage": typeof SearchpageRoute;
8892
}
8993

9094
export interface FileRoutesByTo {
91-
'/': typeof IndexLazyRoute
92-
'/ecommerce': typeof EcommerceRoute
93-
'/recs': typeof RecsRoute
94-
'/searchpage': typeof SearchpageRoute
95+
"/": typeof IndexLazyRoute;
96+
"/ecommerce": typeof EcommerceRoute;
97+
"/recs": typeof RecsRoute;
98+
"/searchpage": typeof SearchpageRoute;
9599
}
96100

97101
export interface FileRoutesById {
98-
__root__: typeof rootRoute
99-
'/': typeof IndexLazyRoute
100-
'/ecommerce': typeof EcommerceRoute
101-
'/recs': typeof RecsRoute
102-
'/searchpage': typeof SearchpageRoute
102+
__root__: typeof rootRoute;
103+
"/": typeof IndexLazyRoute;
104+
"/ecommerce": typeof EcommerceRoute;
105+
"/recs": typeof RecsRoute;
106+
"/searchpage": typeof SearchpageRoute;
103107
}
104108

105109
export interface FileRouteTypes {
106-
fileRoutesByFullPath: FileRoutesByFullPath
107-
fullPaths: '/' | '/ecommerce' | '/recs' | '/searchpage'
108-
fileRoutesByTo: FileRoutesByTo
109-
to: '/' | '/ecommerce' | '/recs' | '/searchpage'
110-
id: '__root__' | '/' | '/ecommerce' | '/recs' | '/searchpage'
111-
fileRoutesById: FileRoutesById
110+
fileRoutesByFullPath: FileRoutesByFullPath;
111+
fullPaths: "/" | "/ecommerce" | "/recs" | "/searchpage";
112+
fileRoutesByTo: FileRoutesByTo;
113+
to: "/" | "/ecommerce" | "/recs" | "/searchpage";
114+
id: "__root__" | "/" | "/ecommerce" | "/recs" | "/searchpage";
115+
fileRoutesById: FileRoutesById;
112116
}
113117

114118
export interface RootRouteChildren {
115-
IndexLazyRoute: typeof IndexLazyRoute
116-
EcommerceRoute: typeof EcommerceRoute
117-
RecsRoute: typeof RecsRoute
118-
SearchpageRoute: typeof SearchpageRoute
119+
IndexLazyRoute: typeof IndexLazyRoute;
120+
EcommerceRoute: typeof EcommerceRoute;
121+
RecsRoute: typeof RecsRoute;
122+
SearchpageRoute: typeof SearchpageRoute;
119123
}
120124

121125
const rootRouteChildren: RootRouteChildren = {
122126
IndexLazyRoute: IndexLazyRoute,
123127
EcommerceRoute: EcommerceRoute,
124128
RecsRoute: RecsRoute,
125129
SearchpageRoute: SearchpageRoute,
126-
}
130+
};
127131

128132
export const routeTree = rootRoute
129133
._addFileChildren(rootRouteChildren)
130-
._addFileTypes<FileRouteTypes>()
131-
132-
/* prettier-ignore-end */
134+
._addFileTypes<FileRouteTypes>();
133135

134136
/* ROUTE_MANIFEST_START
135137
{

‎clients/search-component/src/TrieveModal/FloatingActionButton.tsx‎

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { startTransition } from "react";
22
import { useModalState } from "../utils/hooks/modal-context";
33
import { SparklesIcon } from "./icons";
4-
import { createPortal } from "react-dom";
54

65
export const FloatingActionButton = () => {
76
const { props, setOpen, setMode } = useModalState();
@@ -22,32 +21,25 @@ export const FloatingActionButton = () => {
2221
};
2322

2423
return (
25-
<>
26-
{createPortal(
27-
<button
28-
onClick={() => {
29-
startTransition(() => {
30-
setOpen(true);
31-
setMode("chat");
32-
});
33-
}}
34-
className={`floating-action-button${props.theme === "dark" ? " dark" : ""}`}
35-
style={{
36-
...setButtonPosition(
37-
props.floatingButtonPosition || "bottom-right",
38-
),
39-
zIndex: (props.zIndex ?? 1000) - 1,
40-
}}
41-
>
42-
{props.brandLogoImgSrcUrl ? (
43-
<img src={props.brandLogoImgSrcUrl} alt="Brand Logo" />
44-
) : (
45-
<SparklesIcon width={20} height={20} />
46-
)}
47-
Ask AI
48-
</button>,
49-
document.body,
24+
<button
25+
onClick={() => {
26+
startTransition(() => {
27+
setOpen(true);
28+
setMode("chat");
29+
});
30+
}}
31+
className={`floating-action-button${props.theme === "dark" ? " dark" : ""}`}
32+
style={{
33+
...setButtonPosition(props.floatingButtonPosition || "bottom-right"),
34+
zIndex: (props.zIndex ?? 1000) - 1,
35+
}}
36+
>
37+
{props.brandLogoImgSrcUrl ? (
38+
<img src={props.brandLogoImgSrcUrl} alt="Brand Logo" />
39+
) : (
40+
<SparklesIcon width={20} height={20} />
5041
)}
51-
</>
42+
Ask AI
43+
</button>
5244
);
5345
};

‎clients/search-component/src/TrieveModal/FloatingSearchIcon.tsx‎

Lines changed: 37 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useState, startTransition } from "react";
22
import { useModalState } from "../utils/hooks/modal-context";
3-
import { createPortal } from "react-dom";
43

54
export const FloatingSearchIcon = () => {
65
const [isHovered, setIsHovered] = useState(false);
@@ -27,47 +26,42 @@ export const FloatingSearchIcon = () => {
2726
};
2827

2928
return (
30-
<>
31-
{createPortal(
32-
<div
33-
className={`floating-search-btn-container${
34-
props.theme == "dark" ? " dark" : ""
35-
}`}
36-
style={{
37-
...setButtonPosition(props.floatingSearchIconPosition || "right"),
38-
display: "block",
39-
zIndex: (props.zIndex ?? 1000) - 1,
40-
}}
41-
onMouseEnter={() => setIsHovered(true)}
42-
onMouseLeave={() => setIsHovered(false)}
43-
onClick={() => {
44-
if (!props.disableFloatingSearchIconClick) {
45-
startTransition(() => {
46-
setOpen((prev) => {
47-
return !prev;
48-
});
49-
setMode(props.defaultSearchMode || "search");
50-
});
51-
}
52-
}}
53-
>
54-
<div className="floating-search-btn">
55-
<div className="floating-search-icon">
56-
<svg
57-
width="26"
58-
height="26"
59-
viewBox="0 0 32 32"
60-
fill="white"
61-
xmlns="http://www.w3.org/2000/svg"
62-
>
63-
<path d="M13.452 20.1373C11.5994 20.1373 10.03 19.4942 8.7438 18.208C7.45757 16.9217 6.81445 15.3523 6.81445 13.4998C6.81445 11.6473 7.45757 10.0779 8.7438 8.79165C10.03 7.50542 11.5994 6.8623 13.452 6.8623C15.3045 6.8623 16.8739 7.50542 18.1601 8.79165C19.4463 10.0779 20.0895 11.6473 20.0895 13.4998C20.0895 14.2411 19.9768 14.9338 19.7514 15.5778C19.5261 16.2218 19.2213 16.7898 18.8373 17.2819L24.3895 22.84C24.6007 23.0552 24.7063 23.3215 24.7063 23.6387C24.7063 23.9559 24.5987 24.2201 24.3835 24.4313C24.1722 24.6426 23.907 24.7482 23.5878 24.7482C23.2686 24.7482 23.0034 24.6426 22.7922 24.4313L17.246 18.8851C16.75 19.2692 16.1779 19.5739 15.5299 19.7993C14.8819 20.0246 14.1893 20.1373 13.452 20.1373ZM13.452 17.8623C14.6661 17.8623 15.6967 17.4388 16.5438 16.5917C17.3909 15.7446 17.8145 14.7139 17.8145 13.4998C17.8145 12.2857 17.3909 11.2551 16.5438 10.408C15.6967 9.56085 14.6661 9.1373 13.452 9.1373C12.2378 9.1373 11.2072 9.56085 10.3601 10.408C9.513 11.2551 9.08945 12.2857 9.08945 13.4998C9.08945 14.7139 9.513 15.7446 10.3601 16.5917C11.2072 17.4388 12.2378 17.8623 13.452 17.8623Z"></path>
64-
<path d="M22.4282 7.85633L23.5023 5.50232L25.8563 4.42816L23.5023 3.35401L22.4282 1L21.354 3.35401L19 4.42816L21.354 5.50232L22.4282 7.85633Z"></path>
65-
</svg>
66-
</div>
67-
</div>
68-
</div>,
69-
document.body,
70-
)}
71-
</>
29+
<div
30+
className={`floating-search-btn-container${
31+
props.theme == "dark" ? " dark" : ""
32+
}`}
33+
style={{
34+
...setButtonPosition(props.floatingSearchIconPosition || "right"),
35+
display: "block",
36+
zIndex: (props.zIndex ?? 1000) - 1,
37+
}}
38+
onMouseEnter={() => setIsHovered(true)}
39+
onMouseLeave={() => setIsHovered(false)}
40+
onClick={() => {
41+
if (!props.disableFloatingSearchIconClick) {
42+
startTransition(() => {
43+
setOpen((prev) => {
44+
return !prev;
45+
});
46+
setMode(props.defaultSearchMode || "search");
47+
});
48+
}
49+
}}
50+
>
51+
<div className="floating-search-btn">
52+
<div className="floating-search-icon">
53+
<svg
54+
width="26"
55+
height="26"
56+
viewBox="0 0 32 32"
57+
fill="white"
58+
xmlns="http://www.w3.org/2000/svg"
59+
>
60+
<path d="M13.452 20.1373C11.5994 20.1373 10.03 19.4942 8.7438 18.208C7.45757 16.9217 6.81445 15.3523 6.81445 13.4998C6.81445 11.6473 7.45757 10.0779 8.7438 8.79165C10.03 7.50542 11.5994 6.8623 13.452 6.8623C15.3045 6.8623 16.8739 7.50542 18.1601 8.79165C19.4463 10.0779 20.0895 11.6473 20.0895 13.4998C20.0895 14.2411 19.9768 14.9338 19.7514 15.5778C19.5261 16.2218 19.2213 16.7898 18.8373 17.2819L24.3895 22.84C24.6007 23.0552 24.7063 23.3215 24.7063 23.6387C24.7063 23.9559 24.5987 24.2201 24.3835 24.4313C24.1722 24.6426 23.907 24.7482 23.5878 24.7482C23.2686 24.7482 23.0034 24.6426 22.7922 24.4313L17.246 18.8851C16.75 19.2692 16.1779 19.5739 15.5299 19.7993C14.8819 20.0246 14.1893 20.1373 13.452 20.1373ZM13.452 17.8623C14.6661 17.8623 15.6967 17.4388 16.5438 16.5917C17.3909 15.7446 17.8145 14.7139 17.8145 13.4998C17.8145 12.2857 17.3909 11.2551 16.5438 10.408C15.6967 9.56085 14.6661 9.1373 13.452 9.1373C12.2378 9.1373 11.2072 9.56085 10.3601 10.408C9.513 11.2551 9.08945 12.2857 9.08945 13.4998C9.08945 14.7139 9.513 15.7446 10.3601 16.5917C11.2072 17.4388 12.2378 17.8623 13.452 17.8623Z"></path>
61+
<path d="M22.4282 7.85633L23.5023 5.50232L25.8563 4.42816L23.5023 3.35401L22.4282 1L21.354 3.35401L19 4.42816L21.354 5.50232L22.4282 7.85633Z"></path>
62+
</svg>
63+
</div>
64+
</div>
65+
</div>
7266
);
7367
};

0 commit comments

Comments
 (0)