sanity-plugin-internationalized-array 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-internationalized-array",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Store localized fields in an array to save on attributes",
   "keywords": [
     "sanity",
@@ -83,7 +83,7 @@
     "react-dom": "^18",
     "react-is": "^18",
     "rimraf": "^4.1.2",
-    "sanity": "^3.3.1",
+    "sanity": "^3.14.1",
     "semantic-release": "^20.1.0",
     "typescript": "^4.9.5"
   },

package/src/components/InternationalizedArray.tsx

@@ -1,31 +1,27 @@
 import {AddIcon} from '@sanity/icons'
 import {useLanguageFilterStudioContext} from '@sanity/language-filter'
 import {Button, Grid, Stack, useToast} from '@sanity/ui'
-import equal from 'fast-deep-equal'
-import React, {useCallback, useDeferredValue, useEffect, useMemo} from 'react'
+import React, {useCallback, useEffect, useMemo} from 'react'
 import {
   ArrayOfObjectsInputProps,
   ArrayOfObjectsItem,
-  insert,
+  ArraySchemaType,
   set,
   setIfMissing,
-  useClient,
-  useFormBuilder,
   useFormValue,
 } from 'sanity'
-import {suspend} from 'suspend-react'
 
-import {namespace, version} from '../cache'
 import {MAX_COLUMNS} from '../constants'
-import type {ArraySchemaWithLanguageOptions, Value} from '../types'
+import type {Value} from '../types'
+import {checkAllLanguagesArePresent} from '../utils/checkAllLanguagesArePresent'
+import {createAddAllTitle} from '../utils/createAddAllTitle'
+import {createAddLanguagePatches} from '../utils/createAddLanguagePatches'
 import Feedback from './Feedback'
-import {getSelectedValue} from './getSelectedValue'
-// TODO: Move this provider to the root component
-import {LanguageProvider} from './languageContext'
+import {useInternationalizedArrayContext} from './InternationalizedArrayContext'
 
 export type InternationalizedArrayProps = ArrayOfObjectsInputProps<
   Value,
-  ArraySchemaWithLanguageOptions
+  ArraySchemaType
 >
 
 export default function InternationalizedArray(
@@ -35,30 +31,15 @@ export default function InternationalizedArray(
 
   const readOnly =
     typeof schemaType.readOnly === 'boolean' ? schemaType.readOnly : false
-  const {options} = schemaType
   const toast = useToast()
-  const {value: document} = useFormBuilder()
-  const deferredDocument = useDeferredValue(document)
-  const selectedValue = useMemo(
-    () => getSelectedValue(options.select, deferredDocument),
-    [options.select, deferredDocument]
-  )
 
-  const {apiVersion, defaultLanguages} = options
-  const client = useClient({apiVersion})
-  const languages = Array.isArray(options.languages)
-    ? options.languages
-    : suspend(
-        // eslint-disable-next-line require-await
-        async () => {
-          if (typeof options.languages === 'function') {
-            return options.languages(client, selectedValue)
-          }
-          return options.languages
-        },
-        [version, namespace, selectedValue],
-        {equal}
-      )
+  const {
+    languages,
+    filteredLanguages,
+    defaultLanguages,
+    buttonAddAll,
+    buttonLocations,
+  } = useInternationalizedArrayContext()
 
   // Support updating the UI if languageFilter is installed
   const {selectedLanguageIds, options: languageFilterOptions} =
@@ -96,74 +77,27 @@ export default function InternationalizedArray(
     [languageFilterEnabled, members, languageFilterOptions, selectedLanguageIds]
   )
 
-  const filteredLanguages = useMemo(
-    () =>
-      languageFilterEnabled
-        ? languages.filter((language) =>
-            selectedLanguageIds.includes(language.id)
-          )
-        : languages,
-    [languageFilterEnabled, languages, selectedLanguageIds]
-  )
-
   const handleAddLanguage = useCallback(
     (param?: React.MouseEvent<HTMLButtonElement, MouseEvent> | string[]) => {
       if (!filteredLanguages?.length) {
         return
       }
 
-      const languageIds: string[] = Array.isArray(param)
+      const addLanguageKeys: string[] = Array.isArray(param)
         ? param
         : ([param?.currentTarget?.value].filter(Boolean) as string[])
-      const itemBase = {_type: `${schemaType.name}Value`}
-
-      // Create new items
-      const newItems =
-        Array.isArray(languageIds) && languageIds.length > 0
-          ? // Just one for this language
-            languageIds.map((id) => ({...itemBase, _key: id}))
-          : // Or one for every missing language
-            filteredLanguages
-              .filter((language) =>
-                value?.length
-                  ? !value.find((v) => v._key === language.id)
-                  : true
-              )
-              .map((language) => ({...itemBase, _key: language.id}))
-
-      // Insert new items in the correct order
-      const languagesInUse = value?.length ? value.map((v) => v) : []
-
-      const insertions = newItems.map((item) => {
-        // What's the original index of this language?
-        const languageIndex = languages.findIndex((l) => item._key === l.id)
-
-        // What languages are there beyond that index?
-        const remainingLanguages = languages.slice(languageIndex + 1)
 
-        // So what is the index in the current value array of the next language in the language array?
-        const nextLanguageIndex = languagesInUse.findIndex((l) =>
-          // eslint-disable-next-line max-nested-callbacks
-          remainingLanguages.find((r) => r.id === l._key)
-        )
-
-        // Keep local state up to date incase multiple insertions are being made
-        if (nextLanguageIndex < 0) {
-          languagesInUse.push(item)
-        } else {
-          languagesInUse.splice(nextLanguageIndex, 0, item)
-        }
-
-        return nextLanguageIndex < 0
-          ? // No next language (-1), add to end of array
-            insert([item], 'after', [nextLanguageIndex])
-          : // Next language found, insert before that
-            insert([item], 'before', [nextLanguageIndex])
+      const patches = createAddLanguagePatches({
+        addLanguageKeys,
+        schemaType,
+        languages,
+        filteredLanguages,
+        value,
       })
 
-      onChange([setIfMissing([]), ...insertions])
+      onChange([setIfMissing([]), ...patches])
     },
-    [filteredLanguages, onChange, schemaType.name, value]
+    [filteredLanguages, languages, onChange, schemaType, value]
   )
 
   // Create default fields if the document is not yet created
@@ -255,100 +189,88 @@ export default function InternationalizedArray(
   }, [languagesOutOfOrder, allKeysAreLanguages, handleRestoreOrder])
 
   // compare value keys with possible languages
-  const allLanguagesArePresent = useMemo(() => {
-    const filteredLanguageIds = filteredLanguages.map((l) => l.id)
-    const languagesInUseIds = value ? value.map((v) => v._key) : []
-
-    return (
-      languagesInUseIds.length === filteredLanguageIds.length &&
-      languagesInUseIds.every((l) => filteredLanguageIds.includes(l))
-    )
-  }, [filteredLanguages, value])
+  const allLanguagesArePresent = useMemo(
+    () => checkAllLanguagesArePresent(filteredLanguages, value),
+    [filteredLanguages, value]
+  )
 
   if (!languagesAreValid) {
     return <Feedback />
   }
 
+  const addButtonsAreVisible =
+    // Plugin was configured to display buttons here (default!)
+    buttonLocations.includes('field') &&
+    // There's at least one language visible
+    filteredLanguages?.length > 0 &&
+    // Not every language has a value yet
+    !allLanguagesArePresent
+
   return (
-    <LanguageProvider value={{languages: filteredLanguages}}>
-      <Stack space={2}>
-        {members?.length > 0 ? (
-          <>
-            {filteredMembers.map((member) => {
-              if (member.kind === 'item') {
-                return (
-                  <ArrayOfObjectsItem
-                    key={member.key}
-                    member={member}
-                    renderItem={props.renderItem}
-                    renderField={props.renderField}
-                    renderInput={props.renderInput}
-                    renderPreview={props.renderPreview}
-                  />
-                )
-              }
-
-              return null
-            })}
-          </>
-        ) : null}
-
-        {/* Show buttons if languages are configured */}
-        {/* Hide them if all languages have values */}
-        {filteredLanguages?.length > 0 && !allLanguagesArePresent ? (
-          <Stack space={2}>
-            {/* Hide language-specific buttons if there's only one */}
-            {/* No more than 7 columns */}
-            {filteredLanguages.length > 1 ? (
-              <Grid
-                columns={Math.min(filteredLanguages.length, MAX_COLUMNS)}
-                gap={2}
-              >
-                {filteredLanguages.map((language) => (
-                  <Button
-                    key={language.id}
-                    tone="primary"
-                    mode="ghost"
-                    fontSize={1}
-                    disabled={
-                      readOnly ||
-                      Boolean(value?.find((item) => item._key === language.id))
-                    }
-                    text={language.id.toUpperCase()}
-                    // Only show plus icon if there's one row or less
-                    icon={
-                      filteredLanguages.length > MAX_COLUMNS
-                        ? undefined
-                        : AddIcon
-                    }
-                    value={language.id}
-                    onClick={handleAddLanguage}
-                  />
-                ))}
-              </Grid>
-            ) : null}
+    <Stack space={2}>
+      {members?.length > 0 ? (
+        <>
+          {filteredMembers.map((member) => {
+            if (member.kind === 'item') {
+              return (
+                <ArrayOfObjectsItem
+                  key={member.key}
+                  member={member}
+                  renderItem={props.renderItem}
+                  renderField={props.renderField}
+                  renderInput={props.renderInput}
+                  renderPreview={props.renderPreview}
+                />
+              )
+            }
+
+            return null
+          })}
+        </>
+      ) : null}
+
+      {addButtonsAreVisible ? (
+        <Stack space={2}>
+          {/* Hide language-specific buttons if there's only one */}
+          {/* No more than 7 columns */}
+          {filteredLanguages.length > 1 ? (
+            <Grid
+              columns={Math.min(filteredLanguages.length, MAX_COLUMNS)}
+              gap={2}
+            >
+              {filteredLanguages.map((language) => (
+                <Button
+                  key={language.id}
+                  tone="primary"
+                  mode="ghost"
+                  fontSize={1}
+                  disabled={
+                    readOnly ||
+                    Boolean(value?.find((item) => item._key === language.id))
+                  }
+                  text={language.id.toUpperCase()}
+                  // Only show plus icon if there's one row or less
+                  icon={
+                    filteredLanguages.length > MAX_COLUMNS ? undefined : AddIcon
+                  }
+                  value={language.id}
+                  onClick={handleAddLanguage}
+                />
+              ))}
+            </Grid>
+          ) : null}
+          {buttonAddAll ? (
             <Button
               tone="primary"
               mode="ghost"
               disabled={readOnly || allLanguagesArePresent}
               icon={AddIcon}
-              text={
-                // eslint-disable-next-line no-nested-ternary
-                value?.length
-                  ? `Add missing ${
-                      filteredLanguages.length - value.length === 1
-                        ? `language`
-                        : `languages`
-                    }`
-                  : filteredLanguages.length === 1
-                  ? `Add ${filteredLanguages[0].title} Field`
-                  : `Add all languages`
-              }
+              text={createAddAllTitle(value, filteredLanguages)}
               onClick={handleAddLanguage}
             />
-          </Stack>
-        ) : null}
-      </Stack>
-    </LanguageProvider>
+          ) : null}
+        </Stack>
+      ) : null}
+    </Stack>
   )
 }

package/src/components/InternationalizedArrayContext.tsx

@@ -0,0 +1,91 @@
+import {useLanguageFilterStudioContext} from '@sanity/language-filter'
+import equal from 'fast-deep-equal'
+import {createContext, useContext, useDeferredValue, useMemo} from 'react'
+import {ObjectInputProps, useClient, useFormBuilder} from 'sanity'
+import {suspend} from 'suspend-react'
+
+import {namespace, version} from '../cache'
+import {CONFIG_DEFAULT} from '../constants'
+import {Language, PluginConfig} from '../types'
+import {getSelectedValue} from './getSelectedValue'
+
+// This provider makes the plugin config available to all components in the document form
+// But with languages resolved and filtered languages updated base on @sanity/language-filter
+
+type InternationalizedArrayContextProps = Required<PluginConfig> & {
+  languages: Language[]
+  filteredLanguages: Language[]
+}
+
+export const InternationalizedArrayContext =
+  createContext<InternationalizedArrayContextProps>({
+    ...CONFIG_DEFAULT,
+    languages: [],
+    filteredLanguages: [],
+  })
+
+export function useInternationalizedArrayContext() {
+  return useContext(InternationalizedArrayContext)
+}
+
+type InternationalizedArrayProviderProps = ObjectInputProps & {
+  internationalizedArray: Required<PluginConfig>
+}
+
+export function InternationalizedArrayProvider(
+  props: InternationalizedArrayProviderProps
+) {
+  const {internationalizedArray} = props
+
+  const client = useClient({apiVersion: internationalizedArray.apiVersion})
+  const {value: document} = useFormBuilder()
+  const deferredDocument = useDeferredValue(document)
+  const selectedValue = useMemo(
+    () => getSelectedValue(internationalizedArray.select, deferredDocument),
+    [internationalizedArray.select, deferredDocument]
+  )
+
+  // Fetch or return languages
+  const languages = Array.isArray(internationalizedArray.languages)
+    ? internationalizedArray.languages
+    : suspend(
+        // eslint-disable-next-line require-await
+        async () => {
+          if (typeof internationalizedArray.languages === 'function') {
+            return internationalizedArray.languages(client, selectedValue)
+          }
+          return internationalizedArray.languages
+        },
+        [version, namespace],
+        {equal}
+      )
+
+  // Filter out some languages if language filter is enabled
+  const {selectedLanguageIds, options: languageFilterOptions} =
+    useLanguageFilterStudioContext()
+
+  const filteredLanguages = useMemo(() => {
+    const documentType = deferredDocument ? deferredDocument._type : undefined
+    const languageFilterEnabled =
+      typeof documentType === 'string' &&
+      languageFilterOptions.documentTypes.includes(documentType)
+
+    return languageFilterEnabled
+      ? languages.filter((language) =>
+          selectedLanguageIds.includes(language.id)
+        )
+      : languages
+  }, [deferredDocument, languageFilterOptions, languages, selectedLanguageIds])
+
+  return (
+    <InternationalizedArrayContext.Provider
+      value={{
+        ...internationalizedArray,
+        languages,
+        filteredLanguages,
+      }}
+    >
+      {props.renderDefault(props)}
+    </InternationalizedArrayContext.Provider>
+  )
+}

package/src/components/InternationalizedInput.tsx

@@ -10,12 +10,12 @@ import {
   Spinner,
   Stack,
 } from '@sanity/ui'
-import React, {useCallback, useContext, useMemo} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {ObjectItemProps, useFormValue} from 'sanity'
 import {set, unset} from 'sanity'
 
 import {getToneFromValidation} from './getToneFromValidation'
-import {LanguageContext} from './languageContext'
+import {useInternationalizedArrayContext} from './InternationalizedArrayContext'
 
 type InternationalizedValue = {
   _type: string
@@ -44,7 +44,7 @@ export default function InternationalizedInput(
   const {validation, value, onChange, readOnly} = inlineProps
 
   // The parent array contains the languages from the plugin config
-  const {languages} = useContext(LanguageContext)
+  const {languages} = useInternationalizedArrayContext()
 
   const languageKeysInUse = useMemo(
     () => parentValue?.map((v) => v._key) ?? [],

package/src/constants.ts

@@ -1 +1,13 @@
+import {PluginConfig} from './types'
+
 export const MAX_COLUMNS = 7
+
+export const CONFIG_DEFAULT: Required<PluginConfig> = {
+  languages: [],
+  select: {},
+  defaultLanguages: [],
+  fieldTypes: [],
+  apiVersion: '2022-11-27',
+  buttonLocations: ['field'],
+  buttonAddAll: true,
+}

package/src/fieldActions/index.ts

@@ -0,0 +1,132 @@
+import {AddIcon, TranslateIcon} from '@sanity/icons'
+import {useCallback} from 'react'
+import {
+  defineDocumentFieldAction,
+  DocumentFieldActionItem,
+  DocumentFieldActionProps,
+  PatchEvent,
+  setIfMissing,
+  useFormValue,
+} from 'sanity'
+import {useDocumentPane} from 'sanity/desk'
+
+import {useInternationalizedArrayContext} from '../components/InternationalizedArrayContext'
+import {Language, Value} from '../types'
+import {checkAllLanguagesArePresent} from '../utils/checkAllLanguagesArePresent'
+import {createAddAllTitle} from '../utils/createAddAllTitle'
+import {createAddLanguagePatches} from '../utils/createAddLanguagePatches'
+
+const createTranslateFieldActions: (
+  fieldActionProps: DocumentFieldActionProps,
+  context: {languages: Language[]; filteredLanguages: Language[]}
+) => DocumentFieldActionItem[] = (
+  fieldActionProps,
+  {languages, filteredLanguages}
+) =>
+  languages.map((language) => {
+    const value = useFormValue(fieldActionProps.path) as Value[]
+    const disabled =
+      value && Array.isArray(value)
+        ? Boolean(value?.find((item) => item._key === language.id))
+        : true
+    const hidden = !filteredLanguages.some((f) => f.id === language.id)
+
+    const {onChange} = useDocumentPane()
+
+    const onAction = useCallback(() => {
+      const {schemaType, path} = fieldActionProps
+
+      const addLanguageKeys = [language.id]
+      const patches = createAddLanguagePatches({
+        addLanguageKeys,
+        schemaType,
+        languages,
+        filteredLanguages,
+        value,
+        path,
+      })
+
+      onChange(PatchEvent.from([setIfMissing([], path), ...patches]))
+    }, [language.id, value, onChange])
+
+    return {
+      type: 'action',
+      icon: AddIcon,
+      onAction,
+      title: language.id.toLocaleUpperCase(),
+      hidden,
+      disabled,
+    }
+  })
+
+const AddMissingTranslationsFieldAction: (
+  fieldActionProps: DocumentFieldActionProps,
+  context: {languages: Language[]; filteredLanguages: Language[]}
+) => DocumentFieldActionItem = (
+  fieldActionProps,
+  {languages, filteredLanguages}
+) => {
+  const value = useFormValue(fieldActionProps.path) as Value[]
+  const disabled = value.length === filteredLanguages.length
+  const hidden = checkAllLanguagesArePresent(filteredLanguages, value)
+
+  const {onChange} = useDocumentPane()
+
+  const onAction = useCallback(() => {
+    const {schemaType, path} = fieldActionProps
+
+    const addLanguageKeys: string[] = []
+    const patches = createAddLanguagePatches({
+      addLanguageKeys,
+      schemaType,
+      languages,
+      filteredLanguages,
+      value,
+      path,
+    })
+
+    onChange(PatchEvent.from([setIfMissing([], path), ...patches]))
+  }, [fieldActionProps, filteredLanguages, languages, onChange, value])
+
+  return {
+    type: 'action',
+    icon: AddIcon,
+    onAction,
+    title: createAddAllTitle(value, filteredLanguages),
+    disabled,
+    hidden,
+  }
+}
+
+export const internationalizedArrayFieldAction = defineDocumentFieldAction({
+  name: 'internationalizedArray',
+  useAction(fieldActionProps) {
+    const isInternationalizedArrayField =
+      fieldActionProps?.schemaType?.type?.name.startsWith(
+        'internationalizedArray'
+      )
+    const {languages, filteredLanguages} = useInternationalizedArrayContext()
+
+    const translateFieldActions = createTranslateFieldActions(
+      fieldActionProps,
+      {languages, filteredLanguages}
+    )
+
+    return {
+      type: 'group',
+      icon: TranslateIcon,
+      title: 'Add Translation',
+      renderAsButton: true,
+      children: isInternationalizedArrayField
+        ? [
+            ...translateFieldActions,
+            AddMissingTranslationsFieldAction(fieldActionProps, {
+              languages,
+              filteredLanguages,
+            }),
+          ]
+        : [],
+      hidden: !isInternationalizedArrayField,
+    }
+  },
+})