perf(form-builder): integrate perf fixes from main

sanity-io · Mar 4, 2021 · a997183 · a997183
1 parent 6f11969
commit a997183
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 34 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/files/ImageInput/ImageInput.tsx b/packages/@sanity/form-builder/src/inputs/files/ImageInput/ImageInput.tsx
@@ -42,6 +42,7 @@ import {UploadState} from '../types'
 import {UploadProgress} from '../common/UploadProgress'
 import {urlToFile, base64ToFile} from './utils/image'
 import {AssetBackground} from './styles'
+import * as PathUtils from '@sanity/util/paths'
 
 export interface Image extends Partial<BaseImage> {
   _upload?: UploadState
@@ -90,6 +91,39 @@ type Focusable = {
   focus: () => void
 }
 
+type ImageInputFieldProps = {
+  field: ObjectField
+  onChange: (event: PatchEvent) => void
+  value: any
+  onBlur: () => void
+  onFocus: (path: Path) => void
+  readOnly: boolean
+  focusPath: Path
+  markers: Marker[]
+  level: number
+  presence: FormFieldPresence[]
+}
+
+function ImageInputField(props: ImageInputFieldProps) {
+  const {onChange, field, ...restProps} = props
+
+  const handleChange = React.useCallback(
+    (ev: PatchEvent) => {
+      onChange(ev.prefixAll(field.name))
+    },
+    [onChange, field]
+  )
+
+  return (
+    <FormBuilderInput
+      {...restProps}
+      type={field.type}
+      path={PathUtils.pathFor([field.name])}
+      onChange={handleChange}
+    />
+  )
+}
+
 export default class ImageInput extends React.PureComponent<Props, ImageInputState> {
   static contextTypes = {
     getValuePath: PropTypes.func,
@@ -230,10 +264,10 @@ export default class ImageInput extends React.PureComponent<Props, ImageInputSta
     this.props.onChange(PatchEvent.from(isEmpty && !isArrayElement ? unset() : removeKeys))
   }
 
-  handleFieldChange = (event: PatchEvent, field: ObjectField) => {
+  handleFieldChange = (event: PatchEvent) => {
     const {onChange, type} = this.props
     onChange(
-      event.prefixAll(field.name).prepend(
+      event.prepend(
         setIfMissing({
           _type: type.name,
         })
@@ -415,20 +449,22 @@ export default class ImageInput extends React.PureComponent<Props, ImageInputSta
   }
 
   renderField(field: ObjectField) {
-    const {value, level, focusPath, onFocus, readOnly, onBlur, presence} = this.props
-    const fieldValue = value && value[field.name]
+    const {value, level, focusPath, onFocus, readOnly, onBlur, presence, markers} = this.props
+    const fieldValue = value?.[field.name]
+    const fieldMarkers = markers.filter((marker) => marker.path[0] === field.name)
+
     return (
-      <FormBuilderInput
+      <ImageInputField
+        field={field}
         value={fieldValue}
-        type={field.type}
-        onChange={(ev) => this.handleFieldChange(ev, field)}
-        path={[field.name]}
+        onChange={this.handleFieldChange}
         onFocus={onFocus}
         onBlur={onBlur}
         readOnly={Boolean(readOnly || field.type.readOnly)}
         focusPath={focusPath}
         level={level}
         presence={presence}
+        markers={fieldMarkers}
       />
     )
   }

diff --git a/packages/@sanity/form-builder/src/sanity/inputs/SanityImageInput.tsx b/packages/@sanity/form-builder/src/sanity/inputs/SanityImageInput.tsx
@@ -12,30 +12,31 @@ const SUPPORT_DIRECT_UPLOADS = formBuilderConfig?.images?.directUploads !== fals
 
 type Props = Omit<React.ComponentProps<typeof ImageInput>, 'assetSources'>
 
-export default withDocument(
-  React.forwardRef(function SanityImageInput(props: Props, forwardedRef: any) {
-    const sourcesFromSchema = props.type.options?.sources
+export default React.forwardRef(function SanityImageInput(props: Props, forwardedRef: any) {
+  const sourcesFromSchema = props.type.options?.sources
 
-    // note: type.options.sources may be an empty array and in that case we're
-    // disabling selecting images from asset source  (it's a feature, not a bug)
-    const assetSources = React.useMemo(
-      () =>
-        (sourcesFromSchema || globalAssetSources).map((source) => ({
-          ...source,
-          component: withDocument(source.component),
-        })),
-      [sourcesFromSchema]
-    )
+  // note: type.options.sources may be an empty array and in that case we're
+  // disabling selecting images from asset source  (it's a feature, not a bug)
+  const assetSources = React.useMemo(
+    () =>
+      (sourcesFromSchema || globalAssetSources).map((source) => ({
+        ...source,
+        // Note: The asset source plugin get's passed the enclosing document by default.
+        // This is a potential performance hog, so we should consider some alternatives here
+        // e.g. we could offer a way to declare the path for the values in the document you're interested in instead
+        component: withDocument(source.component),
+      })),
+    [sourcesFromSchema]
+  )
 
-    return (
-      <ImageInput
-        {...props}
-        resolveUploader={resolveUploader}
-        materialize={materializeReference}
-        assetSources={assetSources}
-        directUploads={SUPPORT_DIRECT_UPLOADS}
-        ref={forwardedRef}
-      />
-    )
-  })
-)
+  return (
+    <ImageInput
+      {...props}
+      resolveUploader={resolveUploader}
+      materialize={materializeReference}
+      assetSources={assetSources}
+      directUploads={SUPPORT_DIRECT_UPLOADS}
+      ref={forwardedRef}
+    />
+  )
+})
diff --git a/packages/@sanity/types/src/assets/types.ts b/packages/@sanity/types/src/assets/types.ts
@@ -113,7 +113,6 @@ export type AssetFromSource = {
 }
 
 export interface AssetSourceComponentProps {
-  document: SanityDocument
   selectedAssets: Asset[]
   selectionType: 'single' | 'multiple'
   onClose: () => void