Merge pull request NotionX#379 from NotionX/show-search

made search be able to be shown from outside

Author: normdoow

packages/react-notion-x/src/components/header.tsx

@@ -87,10 +87,14 @@ export const Search: React.FC<{
   search?: SearchNotionFn
   title?: React.ReactNode
 }> = ({ block, search, title = 'Search' }) => {
-  const { searchNotion, rootPageId } = useNotionContext()
+  const { searchNotion, rootPageId, isShowingSearch } = useNotionContext()
   const onSearchNotion = search || searchNotion
 
-  const [isSearchOpen, setIsSearchOpen] = React.useState(false)
+  const [isSearchOpen, setIsSearchOpen] = React.useState(isShowingSearch)
+  React.useEffect(() => {
+    setIsSearchOpen(isShowingSearch)
+  }, [isShowingSearch])
+
   const onOpenSearch = React.useCallback(() => {
     setIsSearchOpen(true)
   }, [])

packages/react-notion-x/src/context.tsx

@@ -20,6 +20,7 @@ export interface NotionContext {
   mapPageUrl: MapPageUrlFn
   mapImageUrl: MapImageUrlFn
   searchNotion?: SearchNotionFn
+  isShowingSearch?: boolean
 
   rootPageId?: string
   rootDomain?: string
@@ -47,6 +48,7 @@ export interface PartialNotionContext {
   mapPageUrl?: MapPageUrlFn
   mapImageUrl?: MapImageUrlFn
   searchNotion?: SearchNotionFn
+  isShowingSearch?: boolean
 
   rootPageId?: string
   rootDomain?: string
@@ -148,6 +150,7 @@ const defaultNotionContext: NotionContext = {
   mapPageUrl: defaultMapPageUrl(),
   mapImageUrl: defaultMapImageUrl,
   searchNotion: null,
+  isShowingSearch: false,
 
   fullPage: false,
   darkMode: false,

packages/react-notion-x/src/index.tsx

@@ -6,4 +6,3 @@ export * from './context'
 export * from './components/text'
 export * from './components/header'
 export * from './components/page-icon'
-export * from './components/search-dialog'

packages/react-notion-x/src/renderer.tsx

@@ -18,6 +18,7 @@ export const NotionRenderer: React.FC<{
   mapPageUrl?: MapPageUrlFn
   mapImageUrl?: MapImageUrlFn
   searchNotion?: SearchNotionFn
+  isShowingSearch?: boolean
 
   rootPageId?: string
   rootDomain?: string
@@ -60,6 +61,7 @@ export const NotionRenderer: React.FC<{
   mapPageUrl,
   mapImageUrl,
   searchNotion,
+  isShowingSearch,
   fullPage,
   rootPageId,
   rootDomain,
@@ -94,6 +96,7 @@ export const NotionRenderer: React.FC<{
       mapPageUrl={mapPageUrl}
       mapImageUrl={mapImageUrl}
       searchNotion={searchNotion}
+      isShowingSearch={isShowingSearch}
       fullPage={fullPage}
       rootPageId={rootPageId}
       rootDomain={rootDomain}