sanity-plugin-media 4.3.5 → 5.0.0

package/src/components/UploadDropzone/index.tsx

@@ -1,173 +0,0 @@
-import {white} from '@sanity/color'
-import {Flex, Text} from '@sanity/ui'
-import {type ReactNode} from 'react'
-import {type DropEvent, type DropzoneOptions, useDropzone} from 'react-dropzone'
-import {useDispatch} from 'react-redux'
-import {styled} from 'styled-components'
-
-import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
-import {DropzoneDispatchProvider} from '../../contexts/DropzoneDispatchContext'
-import {useToolOptions} from '../../contexts/ToolOptionsContext'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {notificationsActions} from '../../modules/notifications'
-import {uploadsActions} from '../../modules/uploads'
-
-type Props = {
-  children: ReactNode
-}
-
-const UploadContainer = styled.div`
-  color: white;
-  height: 100%;
-  min-height: 100%;
-  right: 0;
-  top: 0;
-  width: 100%;
-
-  &:focus {
-    outline: none;
-  }
-`
-
-const DragActiveContainer = styled.div`
-  align-items: center;
-  background: rgba(0, 0, 0, 0.75);
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 100%;
-  z-index: 3;
-`
-
-// Iterate through all files and only return non-folders / packages.
-// We check for files by reading the first byte of the file
-async function filterFiles(fileList: FileList) {
-  const files = Array.from(fileList)
-
-  const filteredFiles: File[] = []
-
-  for (const file of files) {
-    try {
-      await file.slice(0, 1).arrayBuffer()
-      filteredFiles.push(file)
-    } catch (err) {
-      // do nothing: file is a package or folder
-    }
-  }
-
-  return filteredFiles
-}
-
-const UploadDropzone = (props: Props) => {
-  const {children} = props
-
-  const {
-    dropzone: {maxSize},
-    directUploads,
-  } = useToolOptions()
-
-  const {onSelect} = useAssetSourceActions()
-
-  // Redux
-  const dispatch = useDispatch()
-  const assetTypes = useTypedSelector((state) => state.assets.assetTypes)
-
-  const isImageAssetType = assetTypes.length === 1 && assetTypes[0] === 'image'
-
-  // Callbacks
-  const handleDrop = async (acceptedFiles: File[]) => {
-    acceptedFiles.forEach((file) =>
-      dispatch(
-        uploadsActions.uploadRequest({
-          file,
-          forceAsAssetType: assetTypes.length === 1 ? assetTypes[0] : undefined,
-        }),
-      ),
-    )
-  }
-
-  const handleDropRejected: DropzoneOptions['onDropRejected'] = (rejections) => {
-    const errorCodes = rejections.flatMap(({errors}) => errors.map(({code}) => code))
-
-    if (errorCodes.includes('file-too-large')) {
-      dispatch(
-        notificationsActions.add({
-          status: 'error',
-          title: 'One or more files exceed the maximum upload size.',
-        }),
-      )
-    }
-  }
-
-  // Use custom file selector to obtain files on file drop + change events (excluding folders and packages)
-  const handleFileGetter = async (event: DropEvent) => {
-    let fileList: FileList | undefined
-    if (event.type === 'drop' && 'dataTransfer' in event) {
-      fileList = event?.dataTransfer?.files
-    }
-    if (event.type === 'change') {
-      const target = event?.target as HTMLInputElement
-      if (target?.files) {
-        fileList = target.files
-      }
-    }
-
-    if (!fileList) {
-      return []
-    }
-
-    // Filter out non-folders / packages
-    const files: File[] = await filterFiles(fileList)
-
-    // Dispatch error if some files have been filtered out
-    if (fileList?.length !== files.length) {
-      dispatch(
-        notificationsActions.add({
-          status: 'error',
-          title: `Unable to upload some items (folders and packages aren't supported)`,
-        }),
-      )
-    }
-
-    return files
-  }
-
-  // Limit file picking to only images if we're specifically within an image selection context (e.g. picking from image fields)
-  const {getRootProps, getInputProps, isDragActive, open} = useDropzone({
-    accept: isImageAssetType ? 'image/*' : '',
-    getFilesFromEvent: handleFileGetter,
-    noClick: true,
-    // HACK: Disable drag and drop functionality when in a selecting context
-    // (This is currently due to Sanity's native image input taking precedence with drag and drop)
-    noDrag: !!onSelect,
-    onDrop: handleDrop,
-    maxSize,
-    onDropRejected: handleDropRejected,
-    disabled: !directUploads,
-  })
-
-  return (
-    <DropzoneDispatchProvider open={open}>
-      <UploadContainer {...getRootProps()}>
-        <input {...getInputProps()} />
-
-        {isDragActive && (
-          <DragActiveContainer>
-            <Flex direction="column" justify="center" style={{color: white.hex}}>
-              <Text size={3} style={{color: 'inherit'}}>
-                Drop files to upload
-              </Text>
-            </Flex>
-          </DragActiveContainer>
-        )}
-
-        {children}
-      </UploadContainer>
-    </DropzoneDispatchProvider>
-  )
-}
-
-export default UploadDropzone

package/src/config/orders.ts

@@ -1,28 +0,0 @@
-import type {OrderDirection} from '../types'
-
-const ORDER_DICTIONARY: Record<string, {asc: string; desc: string}> = {
-  _createdAt: {
-    asc: 'Last created: Oldest first',
-    desc: 'Last created: Newest first',
-  },
-  _updatedAt: {
-    asc: 'Last updated: Oldest first',
-    desc: 'Last updated: Newest first',
-  },
-  mimeType: {
-    asc: 'MIME type: A to Z',
-    desc: 'MIME type: Z to A',
-  },
-  originalFilename: {
-    asc: 'File name: A to Z',
-    desc: 'File name: Z to A',
-  },
-  size: {
-    asc: 'File size: Smallest first',
-    desc: 'File size: Largest first',
-  },
-}
-
-export const getOrderTitle = (field: string, direction: OrderDirection): string => {
-  return ORDER_DICTIONARY[field][direction]
-}

package/src/config/searchFacets.ts

@@ -1,312 +0,0 @@
-import groq from 'groq'
-
-import type {
-  SearchFacetDivider,
-  SearchFacetInputProps,
-  SearchFacetName,
-  SearchFacetOperators,
-} from '../types'
-
-export const divider: SearchFacetDivider = {type: 'divider'}
-
-export const inputs: Record<SearchFacetName, SearchFacetInputProps> = {
-  altText: {
-    assetTypes: ['file', 'image'],
-    field: 'altText',
-    name: 'altText',
-    operatorType: 'empty',
-    operatorTypes: ['empty', 'notEmpty', null, 'includes', 'doesNotInclude'],
-    title: 'Alt text',
-    type: 'string',
-    value: '',
-  },
-  creditLine: {
-    assetTypes: ['file', 'image'],
-    field: 'creditLine',
-    name: 'creditLine',
-    operatorType: 'empty',
-    operatorTypes: ['empty', 'notEmpty', null, 'includes', 'doesNotInclude'],
-    title: 'Credit',
-    type: 'string',
-    value: '',
-  },
-  description: {
-    assetTypes: ['file', 'image'],
-    field: 'description',
-    name: 'description',
-    operatorType: 'empty',
-    operatorTypes: ['empty', 'notEmpty', null, 'includes', 'doesNotInclude'],
-    title: 'Description',
-    type: 'string',
-    value: '',
-  },
-  fileName: {
-    assetTypes: ['file', 'image'],
-    field: 'originalFilename',
-    name: 'filename',
-    operatorType: 'includes',
-    operatorTypes: ['includes', 'doesNotInclude'],
-    title: 'File name',
-    type: 'string',
-    value: '',
-  },
-  height: {
-    assetTypes: ['image'],
-    field: 'metadata.dimensions.height',
-    name: 'height',
-    operatorType: 'greaterThan',
-    operatorTypes: [
-      'greaterThan',
-      'greaterThanOrEqualTo',
-      'lessThan',
-      'lessThanOrEqualTo',
-      null,
-      'equalTo',
-    ],
-    title: 'Height',
-    type: 'number',
-    value: 400,
-  },
-  inCurrentDocument: {
-    assetTypes: ['file', 'image'],
-    name: 'inCurrentDocument',
-    operatorType: 'is',
-    options: [
-      {
-        name: 'true',
-        title: 'True',
-        value: groq`_id in $documentAssetIds`,
-      },
-      {
-        name: 'false',
-        title: 'False',
-        value: groq`!(_id in $documentAssetIds)`,
-      },
-    ],
-    selectOnly: true,
-    title: 'In use in current document',
-    type: 'select',
-    value: 'true',
-  },
-  inUse: {
-    assetTypes: ['file', 'image'],
-    name: 'inUse',
-    operatorType: 'is',
-    options: [
-      {
-        name: 'true',
-        title: 'True',
-        value: groq`count(*[references(^._id)]) > 0`,
-      },
-      {
-        name: 'false',
-        title: 'False',
-        value: groq`count(*[references(^._id)]) == 0`,
-      },
-    ],
-    title: 'In use',
-    type: 'select',
-    value: 'true',
-  },
-  isOpaque: {
-    assetTypes: ['image'],
-    field: 'metadata.isOpaque',
-    name: 'isOpaque',
-    operatorType: 'equalTo',
-    options: [
-      {
-        name: 'true',
-        title: 'True',
-        value: `false`,
-      },
-      {
-        name: 'false',
-        title: 'False',
-        value: `true`,
-      },
-    ],
-    title: 'Has transparency',
-    type: 'select',
-    value: 'true',
-  },
-  orientation: {
-    assetTypes: ['image'],
-    name: 'orientation',
-    operatorType: 'is',
-    operatorTypes: ['is', 'isNot'],
-    options: [
-      {
-        name: 'portrait',
-        title: 'Portrait',
-        value: 'metadata.dimensions.aspectRatio < 1',
-      },
-      {
-        name: 'landscape',
-        title: 'Landscape',
-        value: 'metadata.dimensions.aspectRatio > 1',
-      },
-      {
-        name: 'square',
-        title: 'Square',
-        value: 'metadata.dimensions.aspectRatio == 1',
-      },
-    ],
-    title: 'Orientation',
-    type: 'select',
-    value: 'portrait',
-  },
-  size: {
-    assetTypes: ['file', 'image'],
-    field: 'size',
-    modifier: 'kb',
-    modifiers: [
-      {
-        name: 'kb',
-        title: 'KB',
-        fieldModifier: (fieldName) => `round(${fieldName} / 1000)`,
-      },
-      {
-        name: 'mb',
-        title: 'MB',
-        fieldModifier: (fieldName) => `round(${fieldName} / 1000000)`,
-      },
-    ],
-    name: 'size',
-    operatorType: 'greaterThan',
-    operatorTypes: [
-      'greaterThan',
-      'greaterThanOrEqualTo',
-      'lessThan',
-      'lessThanOrEqualTo',
-      null,
-      'equalTo',
-    ],
-    title: 'File size',
-    type: 'number',
-    value: 0,
-  },
-  tag: {
-    assetTypes: ['file', 'image'],
-    field: 'opt.media.tags',
-    name: 'tag',
-    operatorType: 'references',
-    operatorTypes: ['references', 'doesNotReference', null, 'empty', 'notEmpty'],
-    title: 'Tags',
-    type: 'searchable',
-  },
-  title: {
-    assetTypes: ['file', 'image'],
-    field: 'title',
-    name: 'title',
-    operatorType: 'empty',
-    operatorTypes: ['empty', 'notEmpty', null, 'includes', 'doesNotInclude'],
-    title: 'Title',
-    type: 'string',
-    value: '',
-  },
-  type: {
-    assetTypes: ['file', 'image'],
-    name: 'type',
-    operatorType: 'is',
-    operatorTypes: ['is', 'isNot'],
-    options: [
-      {
-        name: 'image',
-        title: 'Image',
-        value: 'mimeType match "image*"',
-      },
-      {
-        name: 'video',
-        title: 'Video',
-        value: 'mimeType match "video*"',
-      },
-      {
-        name: 'audio',
-        title: 'Audio',
-        value: 'mimeType match "audio*"',
-      },
-      {
-        name: 'pdf',
-        title: 'PDF',
-        value: 'mimeType == "application/pdf"',
-      },
-    ],
-    title: 'File type',
-    type: 'select',
-    value: 'image',
-  },
-  width: {
-    assetTypes: ['image'],
-    field: 'metadata.dimensions.width',
-    name: 'width',
-    operatorType: 'greaterThan',
-    operatorTypes: [
-      'greaterThan',
-      'greaterThanOrEqualTo',
-      'lessThan',
-      'lessThanOrEqualTo',
-      null,
-      'equalTo',
-    ],
-    title: 'Width',
-    type: 'number',
-    value: 400,
-  },
-}
-
-export const operators: SearchFacetOperators = {
-  doesNotInclude: {
-    fn: (value, field) => (value ? `!(${field} match '*${value}*')` : undefined),
-    label: 'does not include',
-  },
-  doesNotReference: {
-    fn: (value, _field) => (value ? `!references('${value}')` : undefined),
-    label: 'does not include',
-  },
-  empty: {
-    fn: (_value, field) => `!defined(${field})`,
-    hideInput: true,
-    label: 'is empty',
-  },
-  equalTo: {
-    fn: (value, field) => (value ? `${field} == ${value}` : undefined),
-    label: 'is equal to',
-  },
-  greaterThan: {
-    fn: (value, field) => (value ? `${field} > ${value}` : undefined),
-    label: 'is greater than',
-  },
-  greaterThanOrEqualTo: {
-    fn: (value, field) => (value ? `${field} >= ${value}` : undefined),
-    label: 'is greater than or equal to',
-  },
-  includes: {
-    fn: (value, field) => (value ? `${field} match '*${value}*'` : undefined),
-    label: 'includes',
-  },
-  is: {
-    fn: (value, _field) => `${value}`,
-    label: 'is',
-  },
-  isNot: {
-    fn: (value, _field) => `!(${value})`,
-    label: 'is not',
-  },
-  lessThan: {
-    fn: (value, field) => (value ? `${field} < ${value}` : undefined),
-    label: 'is less than',
-  },
-  lessThanOrEqualTo: {
-    fn: (value, field) => (value ? `${field} <= ${value}` : undefined),
-    label: 'is less than or equal to',
-  },
-  notEmpty: {
-    fn: (_value, field) => `defined(${field})`,
-    hideInput: true,
-    label: 'is not empty',
-  },
-  references: {
-    fn: (value, _field) => (value ? `references('${value}')` : undefined),
-    label: 'includes',
-  },
-}

package/src/constants.ts

@@ -1,87 +0,0 @@
-import type {AssetSourceComponentProps} from 'sanity'
-
-import {divider, inputs} from './config/searchFacets'
-import type {
-  SearchFacetInputProps,
-  SearchFacetDivider,
-  SearchFacetGroup,
-  OrderDirection,
-} from './types'
-
-export const SUPPORTED_ASSET_TYPES = [
-  'file',
-  'image',
-] as const satisfies AssetSourceComponentProps['assetType'][]
-
-// Sort order dropdown options
-// null values are represented as menu dividers
-export const ORDER_OPTIONS: ({direction: OrderDirection; field: string} | null)[] = [
-  {
-    direction: 'desc',
-    field: '_createdAt',
-  },
-  {
-    direction: 'asc',
-    field: '_createdAt',
-  },
-  // Divider
-  null,
-  {
-    direction: 'desc',
-    field: '_updatedAt',
-  },
-  {
-    direction: 'asc' as OrderDirection,
-    field: '_updatedAt',
-  },
-  // Divider
-  null,
-  {
-    direction: 'asc',
-    field: 'originalFilename',
-  },
-  {
-    direction: 'desc',
-    field: 'originalFilename',
-  },
-  // Divider
-  null,
-  {
-    direction: 'desc',
-    field: 'size',
-  },
-  {
-    direction: 'asc',
-    field: 'size',
-  },
-]
-
-export const FACETS: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputProps)[] = [
-  inputs.tag,
-  divider,
-  inputs.inUse,
-  inputs.inCurrentDocument,
-  divider,
-  inputs.title,
-  inputs.altText,
-  inputs.creditLine,
-  inputs.description,
-  divider,
-  inputs.isOpaque,
-  divider,
-  inputs.fileName,
-  inputs.size,
-  inputs.type,
-  divider,
-  inputs.orientation,
-  inputs.width,
-  inputs.height,
-]
-
-export const GRID_TEMPLATE_COLUMNS = {
-  SMALL: '3rem 100px auto 1.5rem',
-  LARGE: '3rem 100px auto 5.5rem 5.5rem 3.5rem 8.5rem 4.75rem 2rem',
-}
-export const PANEL_HEIGHT = 32 // px
-export const TAG_DOCUMENT_NAME = 'media.tag'
-export const TAGS_PANEL_WIDTH = 250 // px

package/src/contexts/AssetSourceDispatchContext.tsx

@@ -1,37 +0,0 @@
-import {type ReactNode, createContext, useContext} from 'react'
-import type {AssetSourceComponentProps} from 'sanity'
-
-type ContextProps = {
-  onSelect?: AssetSourceComponentProps['onSelect']
-}
-
-type Props = {
-  children: ReactNode
-  onSelect?: AssetSourceComponentProps['onSelect']
-}
-
-const AssetSourceDispatchContext = createContext<ContextProps | undefined>(undefined)
-
-export const AssetBrowserDispatchProvider = (props: Props) => {
-  const {children, onSelect} = props
-
-  const contextValue: ContextProps = {
-    onSelect,
-  }
-
-  return (
-    <AssetSourceDispatchContext.Provider value={contextValue}>
-      {children}
-    </AssetSourceDispatchContext.Provider>
-  )
-}
-
-export const useAssetSourceActions = () => {
-  const context = useContext(AssetSourceDispatchContext)
-  if (context === undefined) {
-    throw new Error('useAssetSourceActions must be used within an AssetSourceDispatchProvider')
-  }
-  return context
-}
-
-export default AssetSourceDispatchContext

package/src/contexts/DropzoneDispatchContext.tsx

@@ -1,34 +0,0 @@
-import {type ReactNode, createContext, useContext} from 'react'
-
-type ContextProps = {
-  open: () => void
-}
-
-type Props = {
-  children: ReactNode
-  open: () => void
-}
-
-const DropzoneDispatchContext = createContext<ContextProps | undefined>(undefined)
-
-export const DropzoneDispatchProvider = (props: Props) => {
-  const {children, open} = props
-
-  const contextValue: ContextProps = {open}
-
-  return (
-    <DropzoneDispatchContext.Provider value={contextValue}>
-      {children}
-    </DropzoneDispatchContext.Provider>
-  )
-}
-
-export const useDropzoneActions = () => {
-  const context = useContext(DropzoneDispatchContext)
-  if (context === undefined) {
-    throw new Error('useDropzoneActions must be used within an DropzoneDispatchProvider')
-  }
-  return context
-}
-
-export default DropzoneDispatchContext