@sanity/language-filter 2.31.2-performance-opts.6 → 3.0.0-v3-studio.0

package/src/SelectLanguage.tsx

@@ -1,178 +0,0 @@
-import React, {useState, useCallback} from 'react'
-import {Button, Checkbox, Flex, Box, Text, Stack, Popover, useClickOutside} from '@sanity/ui'
-import {ChevronDownIcon} from '@sanity/icons'
-
-const ACTION_LABEL = 'Filter languages'
-interface LanguageOption {
-  title: string
-  id: string
-}
-
-interface Props {
-  languages: LanguageOption[]
-  currentDocumentType?: string
-  defaultLanguages?: string[]
-  documentTypes?: string[]
-  selected: string[]
-  onChange: (ids: string[]) => void
-}
-
-const STYLES_TOGGLE = {flex: 1}
-const STYLES_CHECKBOX = {display: 'block'}
-
-const SelectLanguage = ({
-  currentDocumentType,
-  selected,
-  languages,
-  defaultLanguages,
-  documentTypes,
-  onChange,
-}: Props) => {
-  const [triggerRef, setTriggerRef] = React.useState<HTMLButtonElement | null>(null)
-  const [popoverRef, setPopoverRef] = React.useState<HTMLElement | null>(null)
-  const [isOpen, setIsOpen] = useState(false)
-  const allIsSelected = languages.length === selected.length
-
-  const handleKeyUp = useCallback((e) => {
-    if (e.key === 'Escape') {
-      handleClose()
-    }
-  }, [])
-
-  const handleOpen = () => {
-    setIsOpen((prev) => !prev)
-  }
-
-  const handleClose = () => {
-    setIsOpen(false)
-  }
-
-  const selectLang = (langId: string) => {
-    onChange(selected.concat(langId))
-  }
-
-  const unselectLang = (langId: string) => {
-    onChange(selected.filter((id) => id !== langId))
-  }
-
-  const isDefaultLang = (langId: string) => {
-    return defaultLanguages && defaultLanguages.includes(langId)
-  }
-
-  const isValidDocumentType = () => {
-    return documentTypes && currentDocumentType ? documentTypes.includes(currentDocumentType) : true
-  }
-
-  const handleSelectAll = () => {
-    onChange(languages.map((language) => language.id))
-  }
-  const handleSelectNone = () => {
-    onChange([])
-  }
-
-  const handleLangCheckboxChange = (event: React.FormEvent<HTMLInputElement>) => {
-    const id = event.currentTarget.getAttribute('data-lang-id')
-    const checked = event.currentTarget.checked
-
-    if (!id) {
-      return
-    }
-
-    if (checked) {
-      selectLang(id)
-    } else {
-      unselectLang(id)
-    }
-  }
-
-  useClickOutside(() => {
-    handleClose()
-  }, [popoverRef, triggerRef])
-
-  if (!isValidDocumentType()) {
-    return <></>
-  }
-
-  const content = (
-    <Box overflow="auto" sizing="border" onKeyUp={handleKeyUp}>
-      <Flex padding={2}>
-        <Button
-          type="button"
-          mode="ghost"
-          tone="default"
-          onClick={allIsSelected ? handleSelectNone : handleSelectAll}
-          paddingX={3}
-          paddingY={2}
-          autoFocus
-          style={STYLES_TOGGLE}
-        >
-          Select {allIsSelected ? 'none' : 'all'}
-        </Button>
-      </Flex>
-      <Box padding={3} paddingX={2}>
-        <Stack as="ul" space={3}>
-          {languages.map((lang) => {
-            const label = lang.title + (isDefaultLang(lang.id) ? ' (Default)' : '')
-            const languageId = `language-${lang.id}`
-            return (
-              <Flex as="li" align="center" key={lang.id}>
-                <Checkbox
-                  id={languageId}
-                  style={STYLES_CHECKBOX}
-                  onChange={handleLangCheckboxChange}
-                  data-lang-id={lang.id}
-                  checked={selected.includes(lang.id)}
-                  disabled={isDefaultLang(lang.id)}
-                />
-                <Box flex={1} paddingLeft={3}>
-                  <Text>
-                    <label htmlFor={languageId} style={STYLES_CHECKBOX}>
-                      {label}
-                    </label>
-                  </Text>
-                </Box>
-              </Flex>
-            )
-          })}
-        </Stack>
-      </Box>
-    </Box>
-  )
-
-  return (
-    <>
-      <Button
-        fontSize={1}
-        iconRight={ChevronDownIcon}
-        mode="bleed"
-        ref={setTriggerRef}
-        onClick={handleOpen}
-        padding={2}
-        title={
-          allIsSelected
-            ? 'Filter language fields'
-            : 'Displaying fields only for the selected languages'
-        }
-        selected={isOpen}
-        text={
-          <>
-            {ACTION_LABEL} ({`${selected.length}/${languages.length}`})
-          </>
-        }
-      />
-      <Popover
-        content={content}
-        open={isOpen}
-        placement="bottom"
-        ref={setPopoverRef}
-        referenceElement={triggerRef}
-        tone="default"
-        constrainSize
-        autoFocus
-        portal
-      />
-    </>
-  )
-}
-
-export default SelectLanguage

package/src/SelectLanguageProvider.tsx

@@ -1,70 +0,0 @@
-// @todo: remove the following line when part imports has been removed from this file
-///<reference types="@sanity/types/parts" />
-
-import React, {useRef, useEffect, useState, useMemo} from 'react'
-import config from 'part:@sanity/language-filter/config'
-import {SchemaType} from '@sanity/types'
-import {Subscription} from 'rxjs'
-import languageFilterImplementations from 'all:part:@sanity/desk-tool/language-select-component'
-import {selectedLanguages$, setLangs} from './datastore'
-import SelectLanguage from './SelectLanguage'
-
-interface Props {
-  schemaType?: SchemaType
-}
-
-const SelectLanguageProvider = ({schemaType}: Props) => {
-  const subscriptionRef$ = useRef<Subscription | null>(null)
-  const [selected, setSelected] = useState<string[]>([])
-  const [currentDocumentType, setCurrentDocumentType] = useState<string | undefined>()
-  const shouldShow = useMemo(() => {
-    const {documentTypes} = config
-    return !!(documentTypes && schemaType?.name && documentTypes.includes(schemaType.name))
-  }, [schemaType])
-  const FallbackImplementation = useMemo(() => {
-    if (languageFilterImplementations && Array.isArray(languageFilterImplementations)) {
-      return (
-        languageFilterImplementations?.filter(
-          (component) => SelectLanguageProvider !== component
-        )?.[0] ?? null
-      )
-    }
-    return null
-  }, [])
-
-  useEffect(() => {
-    setCurrentDocumentType(schemaType?.name)
-  }, [schemaType])
-
-  useEffect(() => {
-    subscriptionRef$.current = selectedLanguages$.subscribe((selectedLangs: string[]) => {
-      setSelected(selectedLangs)
-    })
-    return () => {
-      if (subscriptionRef$.current) {
-        subscriptionRef$.current.unsubscribe()
-      }
-    }
-  }, [])
-
-  if (shouldShow) {
-    return (
-      <SelectLanguage
-        languages={config.supportedLanguages}
-        defaultLanguages={config.defaultLanguages}
-        documentTypes={config.documentTypes}
-        currentDocumentType={currentDocumentType}
-        selected={selected}
-        onChange={setLangs}
-      />
-    )
-  }
-
-  if (FallbackImplementation) {
-    return <FallbackImplementation schemaType={schemaType as any} />
-  }
-
-  return null
-}
-
-export default SelectLanguageProvider

package/src/datastore.ts

@@ -1,70 +0,0 @@
-// @todo: remove the following line when part imports has been removed from this file
-///<reference types="@sanity/types/parts" />
-
-import {Observable, Subject} from 'rxjs'
-import {map, publishReplay, refCount, startWith, tap} from 'rxjs/operators'
-import config from 'part:@sanity/language-filter/config'
-import {intersection, union} from 'lodash'
-import {ObjectField, SchemaType} from '@sanity/types'
-
-export type SelectedLanguages = string[]
-interface SupportedLanguage {
-  id: string
-  title: string
-}
-
-const onSelect$ = new Subject<SelectedLanguages>()
-
-const id = (v: any) => v
-
-export const setLangs = (languages: SelectedLanguages) => onSelect$.next(languages)
-
-const persistOn = (key: string, defaultValue: string[]) => (input$: Observable<string[]>) => {
-  let persisted
-  try {
-    const persistedValue = window.localStorage.getItem(key)
-    if (persistedValue) {
-      persisted = JSON.parse(persistedValue)
-    }
-  } catch (err) {} // eslint-disable-line no-empty
-
-  return input$.pipe(
-    startWith(persisted || defaultValue),
-    tap((value) => {
-      window.localStorage.setItem(key, JSON.stringify(value))
-    })
-  )
-}
-
-const SUPPORTED_LANG_IDS = config.supportedLanguages.map((lang: SupportedLanguage) => lang.id)
-
-export const selectedLanguages$ = onSelect$.pipe(
-  persistOn(
-    '@sanity/plugin/language-filter/selected-languages',
-    config.defaultLanguages || SUPPORTED_LANG_IDS
-  ),
-  // constrain persisted/selected languages to the ones currently supported
-  map((selectedLangs: SelectedLanguages) => intersection(selectedLangs, SUPPORTED_LANG_IDS)),
-  // make sure default languages always gets selected
-  Array.isArray(config.defaultLanguages)
-    ? map((selectedLangs) => union(selectedLangs, config.defaultLanguages || []))
-    : id,
-  publishReplay(1),
-  refCount()
-)
-
-const defaultFilterField = (
-  enclosingType: SchemaType,
-  field: ObjectField,
-  selectedLanguages: string[]
-) => !enclosingType.name.startsWith('locale') || selectedLanguages.includes(field.name)
-
-const filterField = config.filterField || defaultFilterField
-
-export const filterFn$ = selectedLanguages$.pipe(
-  map((langs) => {
-    return (enclosingType: SchemaType, field: ObjectField) => {
-      return filterField(enclosingType, field, langs)
-    }
-  })
-)

package/src/filter-fields.js

@@ -1 +0,0 @@
-export {filterFn$ as default} from './datastore'

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../../tsconfig",
-  "include": ["src"],
-  "compilerOptions": {
-    "composite": true,
-    "rootDir": "./src",
-    "outDir": "./dist/dts",
-    "jsx": "react"
-  },
-  "references": [
-    {"path": "../types"}
-  ]
-}