sanity-plugin-internationalized-array 1.10.0 → 1.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/lib/index.esm.js +5 -3
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +4 -2
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/InternationalizedArray.tsx +29 -15
- package/src/fieldActions/index.ts +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
# sanity-plugin-internationalized-array
|
|
6
6
|
|
|
7
|
-
A
|
|
7
|
+
A plugin to register array fields with a custom input component to store field values in multiple languages, queryable by using the language ID as an array `_key`.
|
|
8
8
|
|
|
9
9
|

|
|
10
10
|
|
package/lib/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import*as suspend from'suspend-react';import{suspend as suspend$1}from'suspend-react';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{isSanityDocument,setIfMissing,insert,PatchEvent,useClient,useFormBuilder,defineDocumentFieldAction,useFormValue,set,ArrayOfObjectsItem,MemberItemError,defineField,unset,isDocumentSchemaType,isArraySchemaType,definePlugin,isObjectInputProps}from'sanity';import{useLanguageFilterStudioContext}from'@sanity/language-filter';import{Grid,Button,useToast,Stack,Box,Text,Card,Code,Spinner,Label,MenuButton,Menu,MenuItem,Flex}from'@sanity/ui';import equal from'fast-deep-equal';import{useMemo,useCallback,createContext,useContext,useDeferredValue,memo,useEffect,createElement}from'react';import{useDocumentPane}from'sanity/desk';import{AddIcon,TranslateIcon,RemoveCircleIcon}from'@sanity/icons';const namespace="sanity-plugin-internationalized-array";const version="v0";const preload=fn=>suspend.preload(()=>fn(),[version,namespace]);const clear=()=>suspend.clear([version,namespace]);const peek=selectedValue=>suspend.peek([version,namespace,selectedValue]);const MAX_COLUMNS=7;const CONFIG_DEFAULT={languages:[],select:{},defaultLanguages:[],fieldTypes:[],apiVersion:"2022-11-27",buttonLocations:["field"],buttonAddAll:true};function createValueSchemaTypeName(schemaType){return"".concat(schemaType.name,"Value");}function AddButtons(props){const{languages,readOnly,value,onClick}=props;return languages.length>0?/* @__PURE__ */jsx(Grid,{columns:Math.min(languages.length,MAX_COLUMNS),gap:2,children:languages.map(language=>/* @__PURE__ */jsx(Button,{tone:"primary",mode:"ghost",fontSize:1,disabled:readOnly||Boolean(value==null?void 0:value.find(item=>item._key===language.id)),text:language.id.toUpperCase(),icon:languages.length>MAX_COLUMNS?void 0:AddIcon,value:language.id,onClick},language.id))}):null;}function DocumentAddButtons(props){const{filteredLanguages}=useInternationalizedArrayContext();const{fields}=props.schemaType;const value=isSanityDocument(props.value)?props.value:void 0;const toast=useToast();const{onChange}=useDocumentPane();const internationalizedArrayFields=useMemo(()=>fields.filter(field=>field.type.name.startsWith("internationalizedArray")),[fields]);const handleDocumentButtonClick=useCallback(event=>{const languageId=event.currentTarget.value;if(!languageId){toast.push({status:"error",title:"No language selected"});return;}if(internationalizedArrayFields.length===0){toast.push({status:"error",title:"No internationalizedArray fields found in document root"});return;}const emptyLanguageFields=internationalizedArrayFields.filter(field=>{const fieldValue=value==null?void 0:value[field.name];const fieldValueLanguage=fieldValue&&Array.isArray(fieldValue)?fieldValue.find(v=>v._key===languageId):void 0;return!fieldValueLanguage;});const patches=emptyLanguageFields.map(field=>{const fieldKey=field.name;return[setIfMissing([],[fieldKey]),insert([{_key:languageId,_type:createValueSchemaTypeName(field.type)}],"after",[fieldKey,-1])];}).flat();onChange(PatchEvent.from(patches));},[internationalizedArrayFields,onChange,toast,value]);return/* @__PURE__ */jsxs(Stack,{space:3,children:[/* @__PURE__ */jsx(Box,{children:/* @__PURE__ */jsx(Text,{size:1,weight:"semibold",children:"Add translation to internationalized fields"})}),/* @__PURE__ */jsx(AddButtons,{languages:filteredLanguages,readOnly:false,value:void 0,onClick:handleDocumentButtonClick})]});}var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};var lodash={exports:{}};/**
|
|
1
|
+
import*as suspend from'suspend-react';import{suspend as suspend$1}from'suspend-react';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{isSanityDocument,setIfMissing,insert,PatchEvent,useClient,useFormBuilder,defineDocumentFieldAction,useFormValue,set,ArrayOfObjectsItem,MemberItemError,defineField,unset,isDocumentSchemaType,isArraySchemaType,definePlugin,isObjectInputProps}from'sanity';import{useLanguageFilterStudioContext}from'@sanity/language-filter';import{Grid,Button,useToast,Stack,Box,Text,Card,Code,Spinner,Label,MenuButton,Menu,MenuItem,Flex}from'@sanity/ui';import equal from'fast-deep-equal';import{useMemo,useCallback,createContext,useContext,useDeferredValue,memo,useState,useEffect,createElement}from'react';import{useDocumentPane}from'sanity/desk';import{AddIcon,TranslateIcon,RemoveCircleIcon}from'@sanity/icons';const namespace="sanity-plugin-internationalized-array";const version="v0";const preload=fn=>suspend.preload(()=>fn(),[version,namespace]);const clear=()=>suspend.clear([version,namespace]);const peek=selectedValue=>suspend.peek([version,namespace,selectedValue]);const MAX_COLUMNS=7;const CONFIG_DEFAULT={languages:[],select:{},defaultLanguages:[],fieldTypes:[],apiVersion:"2022-11-27",buttonLocations:["field"],buttonAddAll:true};function createValueSchemaTypeName(schemaType){return"".concat(schemaType.name,"Value");}function AddButtons(props){const{languages,readOnly,value,onClick}=props;return languages.length>0?/* @__PURE__ */jsx(Grid,{columns:Math.min(languages.length,MAX_COLUMNS),gap:2,children:languages.map(language=>/* @__PURE__ */jsx(Button,{tone:"primary",mode:"ghost",fontSize:1,disabled:readOnly||Boolean(value==null?void 0:value.find(item=>item._key===language.id)),text:language.id.toUpperCase(),icon:languages.length>MAX_COLUMNS?void 0:AddIcon,value:language.id,onClick},language.id))}):null;}function DocumentAddButtons(props){const{filteredLanguages}=useInternationalizedArrayContext();const{fields}=props.schemaType;const value=isSanityDocument(props.value)?props.value:void 0;const toast=useToast();const{onChange}=useDocumentPane();const internationalizedArrayFields=useMemo(()=>fields.filter(field=>field.type.name.startsWith("internationalizedArray")),[fields]);const handleDocumentButtonClick=useCallback(event=>{const languageId=event.currentTarget.value;if(!languageId){toast.push({status:"error",title:"No language selected"});return;}if(internationalizedArrayFields.length===0){toast.push({status:"error",title:"No internationalizedArray fields found in document root"});return;}const emptyLanguageFields=internationalizedArrayFields.filter(field=>{const fieldValue=value==null?void 0:value[field.name];const fieldValueLanguage=fieldValue&&Array.isArray(fieldValue)?fieldValue.find(v=>v._key===languageId):void 0;return!fieldValueLanguage;});const patches=emptyLanguageFields.map(field=>{const fieldKey=field.name;return[setIfMissing([],[fieldKey]),insert([{_key:languageId,_type:createValueSchemaTypeName(field.type)}],"after",[fieldKey,-1])];}).flat();onChange(PatchEvent.from(patches));},[internationalizedArrayFields,onChange,toast,value]);return/* @__PURE__ */jsxs(Stack,{space:3,children:[/* @__PURE__ */jsx(Box,{children:/* @__PURE__ */jsx(Text,{size:1,weight:"semibold",children:"Add translation to internationalized fields"})}),/* @__PURE__ */jsx(AddButtons,{languages:filteredLanguages,readOnly:false,value:void 0,onClick:handleDocumentButtonClick})]});}var commonjsGlobal=typeof globalThis!=='undefined'?globalThis:typeof window!=='undefined'?window:typeof global!=='undefined'?global:typeof self!=='undefined'?self:{};var lodash={exports:{}};/**
|
|
2
2
|
* @license
|
|
3
3
|
* Lodash <https://lodash.com/>
|
|
4
4
|
* Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
|
|
@@ -9473,10 +9473,12 @@ addLanguageKeys.map(id=>({...itemBase,_key:id})):// Or one for every missing lan
|
|
|
9473
9473
|
filteredLanguages.filter(language=>(value==null?void 0:value.length)?!value.find(v=>v._key===language.id):true).map(language=>({...itemBase,_key:language.id}));const languagesInUse=(value==null?void 0:value.length)?value.map(v=>v):[];const insertions=newItems.map(item=>{const languageIndex=languages.findIndex(l=>item._key===l.id);const remainingLanguages=languages.slice(languageIndex+1);const nextLanguageIndex=languagesInUse.findIndex(l=>// eslint-disable-next-line max-nested-callbacks
|
|
9474
9474
|
remainingLanguages.find(r=>r.id===l._key));if(nextLanguageIndex<0){languagesInUse.push(item);}else{languagesInUse.splice(nextLanguageIndex,0,item);}return nextLanguageIndex<0?// No next language (-1), add to end of array
|
|
9475
9475
|
insert([item],"after",[...path,nextLanguageIndex]):// Next language found, insert before that
|
|
9476
|
-
insert([item],"before",[...path,nextLanguageIndex]);});return insertions;}const createTranslateFieldActions=(fieldActionProps,_ref)=>{let{languages,filteredLanguages}=_ref;return languages.map(language=>{const value=useFormValue(fieldActionProps.path);const disabled=value&&Array.isArray(value)?Boolean(value==null?void 0:value.find(item=>item._key===language.id)):false;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.
|
|
9476
|
+
insert([item],"before",[...path,nextLanguageIndex]);});return insertions;}const createTranslateFieldActions=(fieldActionProps,_ref)=>{let{languages,filteredLanguages}=_ref;return languages.map(language=>{const value=useFormValue(fieldActionProps.path);const disabled=value&&Array.isArray(value)?Boolean(value==null?void 0:value.find(item=>item._key===language.id)):false;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.title,hidden,disabled};});};const AddMissingTranslationsFieldAction=(fieldActionProps,_ref2)=>{let{languages,filteredLanguages}=_ref2;const value=useFormValue(fieldActionProps.path);const disabled=value&&value.length===filteredLanguages.length;const hidden=checkAllLanguagesArePresent(filteredLanguages,value);const{onChange}=useDocumentPane();const onAction=useCallback(()=>{const{schemaType,path}=fieldActionProps;const addLanguageKeys=[];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};};const internationalizedArrayFieldAction=defineDocumentFieldAction({name:"internationalizedArray",useAction(fieldActionProps){var _a,_b;const isInternationalizedArrayField=(_b=(_a=fieldActionProps==null?void 0:fieldActionProps.schemaType)==null?void 0:_a.type)==null?void 0:_b.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};}});function camelCase(string){return string.replace(/-([a-z])/g,g=>g[1].toUpperCase());}function titleCase(string){return string.split(" ").map(word=>word.charAt(0).toUpperCase()+word.slice(1)).join(" ");}function pascalCase(string){return titleCase(camelCase(string));}function createFieldName(name){let addValue=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;return addValue?["internationalizedArray",pascalCase(name),"Value"].join(""):["internationalizedArray",pascalCase(name)].join("");}const schemaExample={languages:[{id:"en",title:"English"},{id:"no",title:"Norsk"}]};function Feedback(){return/* @__PURE__ */jsx(Card,{tone:"caution",border:true,radius:2,padding:3,children:/* @__PURE__ */jsxs(Stack,{space:4,children:[/* @__PURE__ */jsxs(Text,{children:["An array of language objects must be passed into the"," ",/* @__PURE__ */jsx("code",{children:"internationalizedArray"})," helper function, each with an"," ",/* @__PURE__ */jsx("code",{children:"id"})," and ",/* @__PURE__ */jsx("code",{children:"title"})," field. Example:"]}),/* @__PURE__ */jsx(Card,{padding:2,border:true,radius:2,children:/* @__PURE__ */jsx(Code,{size:1,language:"javascript",children:JSON.stringify(schemaExample,null,2)})})]})});}function InternationalizedArray(props){const{members,value,schemaType,onChange}=props;const readOnly=typeof schemaType.readOnly==="boolean"?schemaType.readOnly:false;const toast=useToast();const{languages,filteredLanguages,defaultLanguages,buttonAddAll,buttonLocations}=useInternationalizedArrayContext();const{selectedLanguageIds,options:languageFilterOptions}=useLanguageFilterStudioContext();const documentType=useFormValue(["_type"]);const languageFilterEnabled=typeof documentType==="string"&&languageFilterOptions.documentTypes.includes(documentType);const filteredMembers=useMemo(()=>languageFilterEnabled?members.filter(member=>{if(member.kind!=="item"){return false;}const valueMember=member.item.members[0];if(valueMember.kind!=="field"){return false;}return languageFilterOptions.filterField(member.item.schemaType,valueMember,selectedLanguageIds);}):members,[languageFilterEnabled,members,languageFilterOptions,selectedLanguageIds]);const handleAddLanguage=useCallback(param=>{var _a;if(!(filteredLanguages==null?void 0:filteredLanguages.length)){return;}const addLanguageKeys=Array.isArray(param)?param:[(_a=param==null?void 0:param.currentTarget)==null?void 0:_a.value].filter(Boolean);const patches=createAddLanguagePatches({addLanguageKeys,schemaType,languages,filteredLanguages,value});onChange([setIfMissing([]),...patches]);},[filteredLanguages,languages,onChange,schemaType,value]);const documentCreatedAt=useFormValue(["_createdAt"]);const[hasAddedDefaultLanguages,setHasAddedDefaultLanguages]=useState(false);useEffect(()=>{if(// Hasn't already added default languages
|
|
9477
|
+
// (This prevents the document being recreated when deleted)
|
|
9478
|
+
!hasAddedDefaultLanguages&&// This array field is empty
|
|
9477
9479
|
!value&&// Document form is in "not yet created" state
|
|
9478
9480
|
!documentCreatedAt&&// Plugin config included default languages
|
|
9479
|
-
defaultLanguages&&(defaultLanguages==null?void 0:defaultLanguages.length)>0){handleAddLanguage(defaultLanguages);}const handleRestoreOrder=useCallback(()=>{if(!(value==null?void 0:value.length)||!(languages==null?void 0:languages.length)){return;}const updatedValue=value.reduce((acc,v)=>{const newIndex=languages.findIndex(l=>l.id===(v==null?void 0:v._key));if(newIndex>-1){acc[newIndex]=v;}return acc;},[]).filter(Boolean);if((value==null?void 0:value.length)!==updatedValue.length){toast.push({title:"There was an error reordering languages",status:"warning"});}onChange(set(updatedValue));},[toast,languages,onChange,value]);const allKeysAreLanguages=useMemo(()=>{if(!(value==null?void 0:value.length)||!(languages==null?void 0:languages.length)){return true;}return value==null?void 0:value.every(v=>languages.find(l=>(l==null?void 0:l.id)===(v==null?void 0:v._key)));},[value,languages]);const languagesInUse=useMemo(()=>languages&&languages.length>1?languages.filter(l=>value==null?void 0:value.find(v=>v._key===l.id)):[],[languages,value]);const languagesOutOfOrder=useMemo(()=>{if(!(value==null?void 0:value.length)||!languagesInUse.length){return[];}return value.map((v,vIndex)=>vIndex===languagesInUse.findIndex(l=>l.id===v._key)?null:v).filter(Boolean);},[value,languagesInUse]);const languagesAreValid=useMemo(()=>!(languages==null?void 0:languages.length)||(languages==null?void 0:languages.length)&&languages.every(item=>item.id&&item.title),[languages]);useEffect(()=>{if(languagesOutOfOrder.length>0&&allKeysAreLanguages){handleRestoreOrder();}},[languagesOutOfOrder,allKeysAreLanguages,handleRestoreOrder]);const allLanguagesArePresent=useMemo(()=>checkAllLanguagesArePresent(filteredLanguages,value),[filteredLanguages,value]);if(!languagesAreValid){return/* @__PURE__ */jsx(Feedback,{});}const addButtonsAreVisible=// Plugin was configured to display buttons here (default!)
|
|
9481
|
+
defaultLanguages&&(defaultLanguages==null?void 0:defaultLanguages.length)>0){handleAddLanguage(defaultLanguages);setHasAddedDefaultLanguages(true);}},[defaultLanguages,documentCreatedAt,handleAddLanguage,hasAddedDefaultLanguages,value]);const handleRestoreOrder=useCallback(()=>{if(!(value==null?void 0:value.length)||!(languages==null?void 0:languages.length)){return;}const updatedValue=value.reduce((acc,v)=>{const newIndex=languages.findIndex(l=>l.id===(v==null?void 0:v._key));if(newIndex>-1){acc[newIndex]=v;}return acc;},[]).filter(Boolean);if((value==null?void 0:value.length)!==updatedValue.length){toast.push({title:"There was an error reordering languages",status:"warning"});}onChange(set(updatedValue));},[toast,languages,onChange,value]);const allKeysAreLanguages=useMemo(()=>{if(!(value==null?void 0:value.length)||!(languages==null?void 0:languages.length)){return true;}return value==null?void 0:value.every(v=>languages.find(l=>(l==null?void 0:l.id)===(v==null?void 0:v._key)));},[value,languages]);const languagesInUse=useMemo(()=>languages&&languages.length>1?languages.filter(l=>value==null?void 0:value.find(v=>v._key===l.id)):[],[languages,value]);const languagesOutOfOrder=useMemo(()=>{if(!(value==null?void 0:value.length)||!languagesInUse.length){return[];}return value.map((v,vIndex)=>vIndex===languagesInUse.findIndex(l=>l.id===v._key)?null:v).filter(Boolean);},[value,languagesInUse]);const languagesAreValid=useMemo(()=>!(languages==null?void 0:languages.length)||(languages==null?void 0:languages.length)&&languages.every(item=>item.id&&item.title),[languages]);useEffect(()=>{if(languagesOutOfOrder.length>0&&allKeysAreLanguages){handleRestoreOrder();}},[languagesOutOfOrder,allKeysAreLanguages,handleRestoreOrder]);const allLanguagesArePresent=useMemo(()=>checkAllLanguagesArePresent(filteredLanguages,value),[filteredLanguages,value]);if(!languagesAreValid){return/* @__PURE__ */jsx(Feedback,{});}const addButtonsAreVisible=// Plugin was configured to display buttons here (default!)
|
|
9480
9482
|
buttonLocations.includes("field")&&// There's at least one language visible
|
|
9481
9483
|
(filteredLanguages==null?void 0:filteredLanguages.length)>0&&// Not every language has a value yet
|
|
9482
9484
|
!allLanguagesArePresent;const fieldHasMembers=(members==null?void 0:members.length)>0;return/* @__PURE__ */jsxs(Stack,{space:2,children:[fieldHasMembers?/* @__PURE__ */jsx(Fragment,{children:filteredMembers.map(member=>{if(member.kind==="item"){return/* @__PURE__ */createElement(ArrayOfObjectsItem,{...props,key:member.key,member});}return/* @__PURE__ */jsx(MemberItemError,{member},member.key);})}):null,!addButtonsAreVisible&&!fieldHasMembers?/* @__PURE__ */jsx(Card,{border:true,tone:"transparent",padding:3,radius:2,children:/* @__PURE__ */jsx(Text,{size:1,children:"This internationalized field currently has no translations."})}):null,addButtonsAreVisible?/* @__PURE__ */jsxs(Stack,{space:2,children:[/* @__PURE__ */jsx(AddButtons,{languages:filteredLanguages,value,readOnly,onClick:handleAddLanguage}),buttonAddAll?/* @__PURE__ */jsx(Button,{tone:"primary",mode:"ghost",disabled:readOnly||allLanguagesArePresent,icon:AddIcon,text:createAddAllTitle(value,filteredLanguages),onClick:handleAddLanguage}):null]}):null]});}var array=config=>{const{apiVersion,select,languages,type}=config;const typeName=typeof type==="string"?type:type.name;const arrayName=createFieldName(typeName);const objectName=createFieldName(typeName,true);return defineField({name:arrayName,title:"Internationalized array",type:"array",components:{input:InternationalizedArray},// These options are required for validation rules – not the custom input component
|