fix: wrap components with a 'withToolOptions' HOC

sanity-io · Jul 18, 2024 · a42d3f1 · a42d3f1
1 parent ae03251
commit a42d3f1
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/src/components/Tool/index.tsx b/src/components/Tool/index.tsx
@@ -1,17 +1,12 @@
 import {Flex} from '@sanity/ui'
-import React, {ComponentProps} from 'react'
+import React from 'react'
 import Browser from '../Browser'
-import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
-import {Tool as SanityTool} from 'sanity'
-import {MediaToolOptions} from '@types'
 
-const Tool = ({tool: {options}}: ComponentProps<SanityTool<MediaToolOptions>['component']>) => {
+const Tool = () => {
   return (
-    <ToolOptionsProvider options={options}>
-      <Flex direction="column" height="fill" flex={1}>
-        <Browser />
-      </Flex>
-    </ToolOptionsProvider>
+    <Flex direction="column" height="fill" flex={1}>
+      <Browser />
+    </Flex>
   )
 }
 

diff --git a/src/contexts/ToolOptionsContext.tsx b/src/contexts/ToolOptionsContext.tsx
@@ -1,5 +1,5 @@
 import {MediaToolOptions} from '@types'
-import React, {PropsWithChildren, createContext, useContext, useMemo} from 'react'
+import React, {ComponentType, PropsWithChildren, createContext, useContext, useMemo} from 'react'
 import {DropzoneOptions} from 'react-dropzone'
 
 type ContextProps = {
@@ -9,10 +9,10 @@ type ContextProps = {
 const ToolOptionsContext = createContext<ContextProps | null>(null)
 
 type Props = {
-  options?: MediaToolOptions
+  options?: MediaToolOptions | void
 }
 
-export const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props>) => {
+const ToolOptionsProvider = ({options, children}: PropsWithChildren<Props>) => {
   const value = useMemo<ContextProps>(
     () => ({dropzone: {maxSize: options?.maximumUploadSize}}),
     [options?.maximumUploadSize]
@@ -31,4 +31,14 @@ export const useToolOptions = () => {
   return context
 }
 
+export const withToolOptions =
+  (options: MediaToolOptions | void) =>
+  <P extends object>(Component: ComponentType<P>) => {
+    return (props: P) => (
+      <ToolOptionsProvider options={options}>
+        <Component {...props} />
+      </ToolOptionsProvider>
+    )
+  }
+
 export default ToolOptionsContext
diff --git a/src/index.ts b/src/index.ts
@@ -1,33 +1,40 @@
 import {definePlugin} from 'sanity'
 import {ImageIcon} from '@sanity/icons'
-import type {AssetSource} from 'sanity'
 import FormBuilderTool from './components/FormBuilderTool'
 import Tool from './components/Tool'
 import mediaTag from './schemas/tag'
 import {MediaToolOptions} from '@types'
+import {withToolOptions} from './contexts/ToolOptionsContext'
 
 const plugin = {
   icon: ImageIcon,
   name: 'media',
   title: 'Media'
 }
 
-export const mediaAssetSource: AssetSource = {
-  ...plugin,
-  component: FormBuilderTool
-}
-
 export const media = definePlugin<MediaToolOptions | void>(options => ({
   name: 'media',
   form: {
     file: {
       assetSources: prev => {
-        return [...prev, mediaAssetSource]
+        return [
+          ...prev,
+          {
+            ...plugin,
+            component: withToolOptions(options)(FormBuilderTool)
+          }
+        ]
       }
     },
     image: {
       assetSources: prev => {
-        return [...prev, mediaAssetSource]
+        return [
+          ...prev,
+          {
+            ...plugin,
+            component: withToolOptions(options)(FormBuilderTool)
+          }
+        ]
       }
     }
   },
@@ -40,7 +47,7 @@ export const media = definePlugin<MediaToolOptions | void>(options => ({
       {
         ...plugin,
         options,
-        component: Tool
+        component: withToolOptions(options)(Tool)
       }
     ]
   }