sanity-plugin-media 4.3.6 → 5.0.0

package/src/components/SearchFacetsControl/index.tsx

@@ -1,140 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import {Button, Flex, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem} from '@sanity/ui'
-import {useDispatch} from 'react-redux'
-
-import {FACETS} from '../../constants'
-import {useToolOptions} from '../../contexts/ToolOptionsContext'
-import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {searchActions} from '../../modules/search'
-import type {SearchFacetDivider, SearchFacetGroup, SearchFacetInputProps} from '../../types'
-
-const SearchFacetsControl = () => {
-  // Redux
-  const dispatch = useDispatch()
-  const assetTypes = useTypedSelector((state) => state.assets.assetTypes)
-  const searchFacets = useTypedSelector((state) => state.search.facets)
-  const selectedDocument = useTypedSelector((state) => state.selected.document)
-
-  const popoverProps = usePortalPopoverProps()
-
-  const {creditLine} = useToolOptions()
-
-  const isTool = !selectedDocument
-
-  const filteredFacets = FACETS
-    // Filter facets based on current context, whether it's invoked as a tool, or via selection through via custom asset source.
-    .filter((facet) => {
-      // Remove credit line filter if it's not enabled
-      if (!creditLine?.enabled && facet?.type === 'string' && facet?.name === 'creditLine') {
-        return false
-      }
-
-      if (facet.type === 'group' || facet.type === 'divider') {
-        return true
-      }
-
-      if (isTool) {
-        return !facet?.selectOnly
-      }
-
-      const matchingAssetTypes = facet.assetTypes.filter((assetType) =>
-        assetTypes.includes(assetType),
-      )
-      return matchingAssetTypes.length > 0
-    })
-    // Remove adjacent and leading / trailing dividers
-    .filter((facet, index, facets) => {
-      const previousFacet = facets[index - 1]
-      // Ignore leading + trailing dividers
-      if (facet.type === 'divider' && (index === 0 || index === facets.length - 1)) {
-        return false
-      }
-      // Ignore adjacent dividers
-      if (facet.type === 'divider' && previousFacet?.type === 'divider') {
-        return false
-      }
-      return true
-    })
-
-  const hasSearchFacets = filteredFacets.length > 0
-
-  const renderMenuFacets = (
-    facets: (SearchFacetDivider | SearchFacetGroup | SearchFacetInputProps)[],
-    level: number = 0,
-  ) => {
-    return (
-      <>
-        {facets?.map((facet, index) => {
-          if (facet.type === 'divider') {
-            return <MenuDivider key={index} />
-          }
-
-          // Recursively render menu facets
-          if (facet.type === 'group') {
-            return (
-              <MenuGroup key={`group-${level}-${index}`} text={facet.title} title={facet.title}>
-                {renderMenuFacets(facet.facets, level + 1)}
-              </MenuGroup>
-            )
-          }
-
-          if (facet) {
-            const disabled =
-              !facet.operatorTypes && !!searchFacets.find((v) => v.name === facet.name)
-
-            return (
-              <MenuItem
-                disabled={disabled}
-                fontSize={1}
-                key={facet.name}
-                onClick={() => dispatch(searchActions.facetsAdd({facet}))}
-                padding={2}
-                text={facet.title}
-              />
-            )
-          }
-
-          return null
-        })}
-      </>
-    )
-  }
-
-  return (
-    <Flex>
-      {/* Add filter button */}
-      <MenuButton
-        button={
-          <Button
-            disabled={!hasSearchFacets}
-            fontSize={1}
-            icon={AddIcon}
-            mode="bleed"
-            space={2}
-            text="Add filter"
-            tone="primary"
-          />
-        }
-        id="facets"
-        menu={<Menu>{renderMenuFacets(filteredFacets)}</Menu>}
-        popover={{
-          ...popoverProps,
-          placement: 'right-start',
-        }}
-      />
-
-      {/* Clear facets button */}
-      {searchFacets.length > 0 && (
-        <Button
-          fontSize={1}
-          mode="bleed"
-          onClick={() => dispatch(searchActions.facetsClear())}
-          text="Clear"
-        />
-      )}
-    </Flex>
-  )
-}
-
-export default SearchFacetsControl

package/src/components/TableHeader/index.tsx

@@ -1,110 +0,0 @@
-import {Checkbox, Flex, Grid, type ThemeColorSchemeKey, useMediaIndex} from '@sanity/ui'
-import {type MouseEvent} from 'react'
-import {useDispatch} from 'react-redux'
-import {useColorSchemeValue} from 'sanity'
-import {styled, css} from 'styled-components'
-
-import {GRID_TEMPLATE_COLUMNS, PANEL_HEIGHT} from '../../constants'
-import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {assetsActions, selectAssetsLength, selectAssetsPickedLength} from '../../modules/assets'
-import {getSchemeColor} from '../../utils/getSchemeColor'
-import TableHeaderItem from '../TableHeaderItem'
-
-// TODO: DRY
-const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(({
-  $scheme,
-}) => {
-  return css`
-    cursor: pointer;
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        background: ${getSchemeColor($scheme, 'bg')};
-      }
-    }
-  `
-})
-
-const TableHeader = () => {
-  const scheme = useColorSchemeValue()
-
-  // Redux
-  const dispatch = useDispatch()
-  const fetching = useTypedSelector((state) => state.assets.fetching)
-  const itemsLength = useTypedSelector(selectAssetsLength)
-  const numPickedAssets = useTypedSelector(selectAssetsPickedLength)
-
-  const mediaIndex = useMediaIndex()
-  const {onSelect} = useAssetSourceActions()
-
-  const allSelected = numPickedAssets === itemsLength
-
-  // Callbacks
-  const handleContextActionClick = (e: MouseEvent) => {
-    e.stopPropagation()
-
-    if (allSelected) {
-      dispatch(assetsActions.pickClear())
-    } else {
-      dispatch(assetsActions.pickAll())
-    }
-  }
-
-  // Note that even though we hide the table header on smaller breakpoints, we never set it to
-  // `display: none`, as doing so causes issues with react-virtuoso.
-  // Instead, we give it 0 height and hide it with `visibility: hidden`.
-  return (
-    <Grid
-      style={{
-        alignItems: 'center',
-        background: 'var(--card-bg-color)',
-        borderBottom: '1px solid var(--card-border-color)',
-        gridColumnGap: mediaIndex < 3 ? 0 : '16px',
-        gridTemplateColumns: GRID_TEMPLATE_COLUMNS.LARGE,
-        height: mediaIndex < 3 ? 0 : `${PANEL_HEIGHT}px`,
-        letterSpacing: '0.025em',
-        position: 'sticky',
-        textTransform: 'uppercase',
-        top: 0,
-        visibility: mediaIndex < 3 ? 'hidden' : 'visible',
-        width: '100%',
-        zIndex: 1, // force stacking context
-      }}
-    >
-      {onSelect ? (
-        <TableHeaderItem />
-      ) : (
-        <ContextActionContainer
-          align="center"
-          justify="center"
-          onClick={handleContextActionClick}
-          $scheme={scheme}
-          style={{
-            height: '100%',
-            position: 'relative',
-          }}
-        >
-          <Checkbox
-            checked={!fetching && allSelected}
-            readOnly
-            style={{
-              pointerEvents: 'none', // TODO: consider alternative for usability
-              transform: 'scale(0.8)',
-            }}
-          />
-        </ContextActionContainer>
-      )}
-
-      <TableHeaderItem />
-      <TableHeaderItem field="originalFilename" title="Filename" />
-      <TableHeaderItem title="Resolution" />
-      <TableHeaderItem field="mimeType" title="MIME type" />
-      <TableHeaderItem field="size" title="Size" />
-      <TableHeaderItem field="_updatedAt" title="Last updated" />
-      <TableHeaderItem title="References" />
-      <TableHeaderItem />
-    </Grid>
-  )
-}
-
-export default TableHeader

package/src/components/TableHeaderItem/index.tsx

@@ -1,61 +0,0 @@
-import {ChevronDownIcon, ChevronUpIcon} from '@sanity/icons'
-import {Box, Label} from '@sanity/ui'
-import {useDispatch} from 'react-redux'
-
-import useTypedSelector from '../../hooks/useTypedSelector'
-import {assetsActions} from '../../modules/assets'
-
-type Props = {
-  field?: string
-  title?: string
-}
-
-const TableHeaderItem = (props: Props) => {
-  const {field, title} = props
-
-  // Redux
-  const dispatch = useDispatch()
-  const order = useTypedSelector((state) => state.assets.order)
-
-  const isActive = order.field === field
-
-  // Callbacks
-  const handleClick = () => {
-    if (!field || !title) {
-      return
-    }
-
-    if (isActive) {
-      const direction = order.direction === 'asc' ? 'desc' : 'asc'
-      dispatch(assetsActions.orderSet({order: {field, direction}}))
-    } else {
-      dispatch(assetsActions.orderSet({order: {field, direction: 'asc'}}))
-    }
-  }
-
-  return (
-    <Label muted={!field} size={0}>
-      <Box
-        onClick={field ? handleClick : undefined}
-        style={{
-          cursor: field ? 'pointer' : 'default',
-          display: 'inline',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        <span
-          style={{
-            marginRight: '0.4em',
-          }}
-        >
-          {title}
-        </span>
-
-        {isActive && order?.direction === 'asc' && <ChevronUpIcon />}
-        {isActive && order?.direction === 'desc' && <ChevronDownIcon />}
-      </Box>
-    </Label>
-  )
-}
-
-export default TableHeaderItem