fix(form-builder): allow for upload of items when dropping over text (s…

…anity-io#3234)

* fix(form-builder): allow for upload of items when dropping over text

* refactor(form-builder): fix pointer events to match all message and add useMemo

packages/@sanity/form-builder/src/inputs/files/common/PlaceholderText.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
-
+import React, {useMemo} from 'react'
 import {BinaryDocumentIcon, AccessDeniedIcon, ImageIcon, ReadOnlyIcon} from '@sanity/icons'
 import {Flex, Text} from '@sanity/ui'
+import styled from 'styled-components'
 import {FileLike} from '../../../sanity/uploads/types'
 
 interface Props {
@@ -13,11 +13,15 @@ interface Props {
  directUploads: boolean
 }
 
+const RootFlex = styled(Flex)`
+ pointer-events: none;
+`
+
 export function PlaceholderText(props: Props) {
  const {hoveringFiles, type, readOnly, acceptedFiles, rejectedFilesCount, directUploads} = props
  const isFileType = type === 'file'
 
- function MessageIcon() {
+ const messageIcon = useMemo(() => {
  if (readOnly) {
  return <ReadOnlyIcon />
  }
@@ -27,13 +31,13 @@ export function PlaceholderText(props: Props) {
  }
 
  return isFileType ? <BinaryDocumentIcon /> : <ImageIcon />
- }
+ }, [directUploads, hoveringFiles, isFileType, readOnly, rejectedFilesCount])
 
- function MessageText() {
+ const messageText = useMemo(() => {
  let message = `Drag or paste ${type} here`
 
  if (!directUploads) {
- message = `Can't upload files here`
+ return `Can't upload files here`
  }
 
  if (readOnly) {
@@ -49,23 +53,16 @@ export function PlaceholderText(props: Props) {
  }
  }
 
- return (
- <Text size={1} muted>
- {message}
- </Text>
- )
- }
+ return message
+ }, [acceptedFiles.length, directUploads, hoveringFiles, readOnly, rejectedFilesCount, type])
 
  return (
- <>
- <Flex justify="center">
- <Text muted>
- <MessageIcon />
- </Text>
- </Flex>
- <Flex justify="center">
- <MessageText />
- </Flex>
- </>
+ <RootFlex align="center" gap={2} justify="center">
+ <Text muted>{messageIcon}</Text>
+
+ <Text size={1} muted>
+ {messageText}
+ </Text>
+ </RootFlex>
  )
 }