feat(language-filter): add documentTypes option

sanity-io · Apr 26, 2021 · 58df909 · 58df909
1 parent 717becf
commit 58df909
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/header.tsx b/packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/header/header.tsx
@@ -228,7 +228,7 @@ export function DocumentPanelHeader(props: DocumentPanelHeaderProps) {
         <div className={styles.paneActions}>
           {LanguageFilter && (
             <div>
-              <LanguageFilter />
+              <LanguageFilter schemaType={schemaType} />
             </div>
           )}
 

diff --git a/packages/@sanity/language-filter/README.md b/packages/@sanity/language-filter/README.md
@@ -35,11 +35,14 @@ export default {
     //...
   ],
   defaultLanguages: ['nb'],
+  documentTypes: ['page'],
   filterField: (enclosingType, field, selectedLanguageIds) =>
     !enclosingType.name.startsWith('locale') || selectedLanguageIds.includes(field.name)
 }
 ```
 
 - `supportedLanguages` is an array of languages with `id` and `title`. If your localized fields are defined using our recommended way described here (https://www.sanity.io/docs/localization), you probably want to share this list of supported languages between this config and your schema. 
 - `defaultLanguages` (optional) is an array of strings where each entry must match an `id` from the `supportedLanguages` array. These languages will be listed by default and will not be possible to unselect. If no `defaultLanguages` is configured, all localized fields will be selected by default.
+- `documentTypes` (optional) is an array of strings where each entry must match a `name` from your document schemas. If defined, this property will be used to conditionally show the language filter on specific document schema types. If undefined, the language filter will show on all document schema types.
+- `supportedLanguages` array. These languages will be listed by default and will not be possible to unselect. If no `defaultLanguages` is configured, all localized fields will be selected by default.
 - `filterField` is a function that must return true if the field should be displayed. It is passed the enclosing type (e.g the object type containing the localized fields, the field, and an array of the currently selected language ids.
diff --git a/packages/@sanity/language-filter/src/SelectLanguage.js b/packages/@sanity/language-filter/src/SelectLanguage.js
@@ -19,6 +19,7 @@ export default class SelectLanguage extends React.Component {
   static propTypes = {
     languages: PropTypes.arrayOf(LanguagePropType),
     defaultLanguages: PropTypes.arrayOf(PropTypes.string),
+    documentTypes: PropTypes.arrayOf(PropTypes.string),
     selected: PropTypes.arrayOf(PropTypes.string),
     onChange: PropTypes.func,
   }
@@ -68,6 +69,11 @@ export default class SelectLanguage extends React.Component {
     return defaultLanguages && defaultLanguages.includes(langId)
   }
 
+  isValidDocumentType = () => {
+    const {currentDocumentType, documentTypes} = this.props
+    return documentTypes ? documentTypes.includes(currentDocumentType) : true
+  }
+
   handleSelectAll = (event) => {
     const {languages, onChange} = this.props
     onChange(languages.map((l) => l.id))
@@ -92,7 +98,7 @@ export default class SelectLanguage extends React.Component {
       this.togglePoppableRef.current &&
       this.togglePoppableRef.current._element
 
-    return (
+    return this.isValidDocumentType() ? (
       <>
         <button
           type="button"
@@ -122,7 +128,7 @@ export default class SelectLanguage extends React.Component {
           onClickOutside={this.handleClickOutside}
           placement="bottom"
           referenceElement={toggleRef}
-          id={this.id}
+          id={id}
         >
           {isOpen && (
             <div className={styles.root}>
@@ -157,6 +163,8 @@ export default class SelectLanguage extends React.Component {
           )}
         </Poppable>
       </>
+    ) : (
+      <></>
     )
   }
 }
diff --git a/packages/@sanity/language-filter/src/SelectLanguageProvider.js b/packages/@sanity/language-filter/src/SelectLanguageProvider.js
@@ -4,23 +4,31 @@ import {selectedLanguages$, setLangs} from './datastore'
 import SelectLanguage from './SelectLanguage'
 
 export default class SelectLanguageProvider extends React.Component {
-  state = {selected: []}
+  state = {
+    selected: [],
+    currentDocumentType: null,
+  }
 
   componentDidMount(props) {
     this.subscription = selectedLanguages$.subscribe((selected) => {
-      this.setState({selected: selected})
+      this.setState({
+        selected: selected,
+        currentDocumentType: this.props?.schemaType?.name,
+      })
     })
   }
   componentWillUnmount(props) {
     this.subscription.unsubscribe()
   }
 
   render() {
-    const {selected} = this.state
+    const {selected, currentDocumentType} = this.state
     return (
       <SelectLanguage
         languages={config.supportedLanguages}
         defaultLanguages={config.defaultLanguages}
+        documentTypes={config.documentTypes}
+        currentDocumentType={currentDocumentType}
         selected={selected}
         onChange={setLangs}
       />