Beta

packages/snek-finder/src/components/organisms/Finder/Finder.stories.tsx

@@ -67,3 +67,12 @@ Primary.args = {
   onDataChanged: (data, action) => console.log(data, action),
   onItemOpen: () => null
 }
+
+export const Selector: Story<SnekFinderProps> = Primary.bind({})
+
+Selector.args = {
+  ...Primary.args,
+  mode: 'selector',
+  onSelectorSelect: item => console.log(item),
+  onSelectorClose: () => null
+}

packages/snek-finder/src/components/organisms/Finder/index.tsx

@@ -1,13 +1,23 @@
 import {DeleteIcon} from '@chakra-ui/icons'
 import {Box, Divider} from '@chakra-ui/layout'
 import {
+  AbsoluteCenter,
+  Center,
   Flex,
   HStack,
   Icon,
   Image,
+  Portal,
   Text,
   useDisclosure,
-  useToast
+  useToast,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton
 } from '@chakra-ui/react'
 import {FaFile} from '@react-icons/all-files/fa/FaFile'
 import {FaFilePdf} from '@react-icons/all-files/fa/FaFilePdf'
@@ -31,18 +41,23 @@ import {
   FinderData,
   FinderFileItem,
   FinderFolderItem,
+  FinderItem,
+  FinderMode,
   MimeType,
   SnekFinderAction
 } from './types'
 
 export type SnekFinderProps = {
+  mode?: FinderMode
+  onSelectorClose?: () => void
+  onSelectorSelect?: (item: FinderItem) => void
   data: FinderData
   rootUUID: string
   onItemOpen: (uuid: string) => void
   onDataChanged: (data: FinderData, action: SnekFinderAction) => void
 }
 
-const Finder: React.FC<SnekFinderProps> = props => {
+const Finder: React.FC<SnekFinderProps> = ({mode = 'browser', ...props}) => {
   const toast = useToast()
   const folderCreateContextModal = useDisclosure()
   const itemRenameContextModal = useDisclosure()
@@ -284,12 +299,19 @@ const Finder: React.FC<SnekFinderProps> = props => {
     const uuid = resolveUUIDFromIndex(selectedFiles[0])
     const item = data[uuid]
 
+    setContextMenu(null)
+
     if ((item as FinderFolderItem).isFolder) {
       switchParentNode(uuid)
+    } else {
+      if (mode === 'selector') {
+        if (props.onSelectorSelect) {
+          props.onSelectorSelect(item)
+        }
+      } else {
+        props.onItemOpen(uuid)
+      }
     }
-
-    setContextMenu(null)
-    props.onItemOpen(uuid)
   }
 
   const handleFileRename = () => {
@@ -428,7 +450,7 @@ const Finder: React.FC<SnekFinderProps> = props => {
     }
   }, [isDragActive, isDragAccept, draggedFiles.length])
 
-  return (
+  const finder = (
     <>
       {contextMenu && (
         <Box
@@ -442,7 +464,7 @@ const Finder: React.FC<SnekFinderProps> = props => {
                 ? [
                     {
                       _type: 'ITEM',
-                      content: <>{'Open'}</>,
+                      content: <>{mode === 'selector' ? 'Select' : 'Open'}</>,
                       onItemClick: handleFileOpen
                     },
                     {
@@ -534,6 +556,25 @@ const Finder: React.FC<SnekFinderProps> = props => {
       />
     </>
   )
+
+  if (mode === 'selector' && props.onSelectorClose) {
+    return (
+      <Modal
+        isOpen={true}
+        onClose={props.onSelectorClose}
+        isCentered
+        size="6xl">
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>SnekFinder - Selector</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>{finder}</ModalBody>
+        </ModalContent>
+      </Modal>
+    )
+  }
+
+  return finder
 }
 
 export default Finder

packages/snek-finder/src/components/organisms/Finder/types.ts

@@ -9,6 +9,8 @@ type BasicItem = {
   description?: string
 }
 
+export type FinderMode = 'browser' | 'selector'
+
 export interface FinderFolderItem extends BasicItem {
   isFolder: true
   childUUIDs: string[]

packages/snek-finder/src/containers/SnekFinder/SnekFinder.stories.tsx

@@ -21,3 +21,12 @@ IPFSBackend.initBackendLink =
   'https://ipfs.io/ipfs/QmSw2QEGRx9PzBXsxt5HoKiong1hkWYN8pNwLKqwNPgaiR'
 
 Primary.args = {backend: IPFSBackend}
+
+export const Selector: Story<SnekFinderProps> = Template.bind({})
+
+Selector.args = {
+  backend: IPFSBackend,
+  mode: 'selector',
+  onSelectorSelect: item => console.log(item),
+  onSelectorClose: () => console.log('close')
+}

packages/snek-finder/src/containers/SnekFinder/index.tsx

@@ -6,7 +6,9 @@ import Finder from '../../components/organisms/Finder'
 import type {
   FinderData,
   FinderFileItem,
-  FinderFolderItem
+  FinderFolderItem,
+  FinderItem,
+  FinderMode
 } from '../../components/organisms/Finder/types'
 import {SnekFinderAction} from '../../components/organisms/Finder/types'
 import ImageViewer from '../../components/organisms/ImageViewer'
@@ -15,6 +17,9 @@ import SnekStudio from '../../components/organisms/SnekStudio'
 
 export type SnekFinderProps = {
   backend: Backend
+  mode: FinderMode
+  onSelectorClose?: () => void
+  onSelectorSelect?: (item: FinderItem) => void
 }
 
 const initData: FinderData = {
@@ -76,9 +81,11 @@ const SnekFinder: React.FC<SnekFinderProps> = ({backend, ...props}) => {
   }
 
   const file = showModal && (data[showModal.uuid] as FinderFileItem)
+
   return (
     <div>
       <Finder
+        {...props}
         {...{
           rootUUID: 'ae4b3bf8-6ed2-4ac6-bf18-722321af298c',
           data: data as any,