NotebookListBar

import type { NotebookListBarProps } from '@inkdropapp/types'

const NotebookListBar =
  env.components.getComponentClass<NotebookListBarProps>('NotebookListBar')

type NotebookListBarProps = {
  // Placeholder text for the search input. Defaults to 'Search'.
  placeholder?: string
  // Icon name for the search input. Defaults to 'book-close-2'.
  icon?: string
  // Whether to show a "(Root)" option at the top.
  showRoot?: boolean
  // Book IDs to hide from the list.
  hiddenBooks?: string[]
  // Called when a notebook is selected. `bookId` is null if "(Root)" was selected.
  onItemSelect: (bookId: string | null) => any
}

import React, { useCallback } from 'react'
import { logger } from 'inkdrop'
import type { NotebookListBarProps } from '@inkdropapp/types'

import { getEnv } from './env'

const NotebookPicker: React.FC = () => {
  const NotebookListBar =
    getEnv().components.getComponentClass<NotebookListBarProps>('NotebookListBar')

  const onItemSelect = useCallback((bookId: string | null) => {
    logger.debug('Selected notebook:', bookId)
  }, [])

  return (
    <NotebookListBar
      placeholder="Move to notebook"
      showRoot
      onItemSelect={onItemSelect}
    />
  )
}

export default NotebookPicker