@sanity/language-filter 0.147.10-next.23 → 1.0.0-v3-studio.1

package/src/usePaneLanguages.ts

@@ -0,0 +1,78 @@
+import {useCallback, useMemo} from 'react'
+import {LanguageFilterConfig} from './types'
+import {
+  getSelectableLanguages,
+  persistLanguageIds,
+  useSelectedLanguageIds,
+} from './useSelectedLanguageIds'
+
+export interface UsePaneLanguagesParams {
+  options: LanguageFilterConfig
+  /**
+   * We need a way to communicate state changes between the pane menu and input components.
+   * LanguageFilter button lives outside the input-render tree, so Context is out.
+   * This is a workaround for that.
+   */
+  onSelectedIdsChange: (ids: string[]) => void
+}
+
+export function usePaneLanguages(props: UsePaneLanguagesParams): {
+  activeLanguages: string[]
+  allSelected: boolean
+  selectAll: () => void
+  selectNone: () => void
+  toggleLanguage: (languageId: string) => void
+} {
+  const {options, onSelectedIdsChange} = props
+  const {defaultLanguages} = options
+
+  const [selectedIds, setSelectedIds] = useSelectedLanguageIds(options)
+
+  const selectableLanguages = useMemo(() => getSelectableLanguages(options), [options])
+
+  const updateSelectedIds = useCallback(
+    (ids: string[]) => {
+      setSelectedIds(ids)
+      persistLanguageIds(ids)
+      onSelectedIdsChange(ids)
+    },
+    [onSelectedIdsChange, setSelectedIds]
+  )
+
+  const selectAll = useCallback(
+    () => updateSelectedIds(selectableLanguages.map((l) => l.id)),
+    [updateSelectedIds, selectableLanguages]
+  )
+
+  const selectNone = useCallback(() => {
+    updateSelectedIds([])
+  }, [updateSelectedIds])
+
+  const toggleLanguage = useCallback(
+    (languageId: string) => {
+      let lang = selectedIds
+
+      if (lang.includes(languageId)) {
+        lang = lang.filter((l) => l !== languageId)
+      } else {
+        lang = [...lang, languageId]
+      }
+
+      updateSelectedIds(lang)
+    },
+    [updateSelectedIds, selectedIds]
+  )
+
+  const activeLanguages = useMemo(
+    () => [...(defaultLanguages ?? []), ...selectedIds],
+    [defaultLanguages, selectedIds]
+  )
+
+  return {
+    activeLanguages,
+    allSelected: selectedIds.length === selectableLanguages.length,
+    selectAll,
+    selectNone,
+    toggleLanguage,
+  }
+}

package/src/useSelectedLanguageIds.ts

@@ -0,0 +1,40 @@
+import {Language, LanguageFilterConfig} from './types'
+import {useState} from 'react'
+const storageKey = '@sanity/plugin/language-filter/selected-languages'
+
+export function getPersistedLanguageIds(options: LanguageFilterConfig): string[] {
+  const selectableLangs = getSelectableLanguages(options).map((l) => l.id)
+
+  let selected: string[] = selectableLangs
+  try {
+    const persistedValue = window.localStorage.getItem(storageKey)
+    if (persistedValue) {
+      selected = JSON.parse(persistedValue)
+    }
+  } catch (err) {} // eslint-disable-line no-empty
+
+  // constrain persisted/selected languages to the ones currently supported
+  selected = intersection(selected, selectableLangs)
+  return selected
+}
+
+export function persistLanguageIds(languageIds: string[]): void {
+  window.localStorage.setItem(storageKey, JSON.stringify(languageIds))
+}
+
+function intersection(array1: string[], array2: string[]) {
+  return array1.filter((value) => array2.includes(value))
+}
+
+export function getSelectableLanguages({
+  supportedLanguages,
+  defaultLanguages,
+}: LanguageFilterConfig): Language[] {
+  return supportedLanguages.filter((lang) => !defaultLanguages?.includes(lang.id))
+}
+
+export function useSelectedLanguageIds(
+  options: LanguageFilterConfig
+): [string[], (ids: string[]) => void] {
+  return useState(() => getPersistedLanguageIds(options))
+}

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})

package/lib/SelectLanguage.js

@@ -1,139 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _poppable = _interopRequireDefault(require("part:@sanity/components/utilities/poppable"));
-
-var _checkbox = _interopRequireDefault(require("part:@sanity/components/toggles/checkbox"));
-
-var _default = _interopRequireDefault(require("part:@sanity/components/buttons/default"));
-
-var _SelectLanguage = _interopRequireDefault(require("./styles/SelectLanguage.css"));
-
-var _angleDownIcon = _interopRequireDefault(require("part:@sanity/base/angle-down-icon"));
-
-var _angleUpIcon = _interopRequireDefault(require("part:@sanity/base/angle-up-icon"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var LanguagePropType = _propTypes.default.shape({
-  id: _propTypes.default.string,
-  title: _propTypes.default.string
-});
-
-class SelectLanguage extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "state", {
-      isOpen: false
-    });
-
-    _defineProperty(this, "refElement", _react.default.createRef());
-
-    _defineProperty(this, "handleToggle", () => this.setState(prevState => ({
-      isOpen: !prevState.isOpen
-    })));
-
-    _defineProperty(this, "handleOpen", () => this.setState({
-      isOpen: true
-    }));
-
-    _defineProperty(this, "handleClose", () => {
-      this.setState({
-        isOpen: false
-      });
-    });
-
-    _defineProperty(this, "selectLang", langId => {
-      var _this$props = this.props,
-          selected = _this$props.selected,
-          onChange = _this$props.onChange;
-      onChange(selected.concat(langId));
-    });
-
-    _defineProperty(this, "unselectLang", langId => {
-      var _this$props2 = this.props,
-          selected = _this$props2.selected,
-          onChange = _this$props2.onChange;
-      onChange(selected.filter(id => id !== langId));
-    });
-
-    _defineProperty(this, "handleSelectAll", event => {
-      var _this$props3 = this.props,
-          languages = _this$props3.languages,
-          onChange = _this$props3.onChange;
-      onChange(languages.map(l => l.id));
-    });
-
-    _defineProperty(this, "handleSelectNone", event => {
-      var onChange = this.props.onChange;
-      onChange([]);
-    });
-
-    _defineProperty(this, "handleLangCheckboxChange", event => {
-      var id = event.target.getAttribute('data-lang-id');
-      var checked = event.target.checked;
-      this[checked ? 'selectLang' : 'unselectLang'](id);
-    });
-  }
-
-  render() {
-    var isOpen = this.state.isOpen;
-    var _this$props4 = this.props,
-        languages = _this$props4.languages,
-        selected = _this$props4.selected;
-    var allIsSelected = languages.length === selected.length;
-    var refElement = this.refElement && this.refElement.current && this.refElement.current._element;
-    return _react.default.createElement(_react.Fragment, null, _react.default.createElement("span", {
-      className: _SelectLanguage.default.target,
-      onClick: this.handleToggle,
-      ref: this.refElement,
-      title: allIsSelected ? 'Filter language fields' : 'Displaying only fields for selected languages'
-    }, "Filter languages", allIsSelected ? '…' : " (".concat(selected.length, "/").concat(languages.length, ")"), _react.default.createElement("span", {
-      className: _SelectLanguage.default.arrow
-    }, isOpen ? _react.default.createElement(_angleUpIcon.default, null) : _react.default.createElement(_angleDownIcon.default, null))), _react.default.createElement(_poppable.default, {
-      onEscape: this.handleClose,
-      onClickOutside: this.handleClose,
-      placement: "bottom-end",
-      referenceElement: refElement
-    }, isOpen && _react.default.createElement("div", {
-      className: _SelectLanguage.default.root
-    }, _react.default.createElement("div", {
-      className: _SelectLanguage.default.functions
-    }, _react.default.createElement(_default.default, {
-      onClick: allIsSelected ? this.handleSelectNone : this.handleSelectAll
-    }, "Select ", allIsSelected ? 'none' : 'all')), _react.default.createElement("ul", {
-      className: _SelectLanguage.default.list
-    }, languages.map(lang => _react.default.createElement("li", {
-      className: _SelectLanguage.default.item,
-      key: lang.id
-    }, _react.default.createElement(_checkbox.default, {
-      onChange: this.handleLangCheckboxChange,
-      "data-lang-id": lang.id,
-      checked: selected.includes(lang.id)
-    }, lang.title)))))));
-  }
-
-}
-
-exports.default = SelectLanguage;
-
-_defineProperty(SelectLanguage, "propTypes", {
-  languages: _propTypes.default.arrayOf(LanguagePropType),
-  selected: _propTypes.default.arrayOf(LanguagePropType),
-  onChange: _propTypes.default.func
-});

package/lib/SelectLanguageProvider.js

@@ -1,52 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _datastore = require("./datastore");
-
-var _SelectLanguage = _interopRequireDefault(require("./SelectLanguage"));
-
-var _config = _interopRequireDefault(require("part:@sanity/language-filter/config"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-class SelectLanguageProvider extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "state", {
-      selected: []
-    });
-  }
-
-  componentDidMount(props) {
-    this.subscription = _datastore.selectedLanguages$.subscribe(selected => {
-      this.setState({
-        selected: selected
-      });
-    });
-  }
-
-  componentWillUnmount(props) {
-    this.subscription.unsubscribe();
-  }
-
-  render() {
-    var selected = this.state.selected;
-    return _react.default.createElement(_SelectLanguage.default, {
-      languages: _config.default.supportedLanguages,
-      selected: selected,
-      onChange: _datastore.setLangs
-    });
-  }
-
-}
-
-exports.default = SelectLanguageProvider;

package/lib/datastore.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.filterFn$ = exports.selectedLanguages$ = exports.setLangs = void 0;
-
-var _intersection2 = _interopRequireDefault(require("lodash/intersection"));
-
-var _rxjs = require("rxjs");
-
-var _operators = require("rxjs/operators");
-
-var _config = _interopRequireDefault(require("part:@sanity/language-filter/config"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var onSelect$ = new _rxjs.Subject();
-
-var setLangs = langs => onSelect$.next(langs);
-
-exports.setLangs = setLangs;
-
-var persistOn = (key, defaultValue) => input$ => {
-  var persisted;
-
-  try {
-    persisted = JSON.parse(window.localStorage.getItem(key));
-  } catch (err) {} // eslint-disable-line no-empty
-
-
-  return input$.pipe((0, _operators.startWith)(persisted || defaultValue), (0, _operators.tap)(value => {
-    window.localStorage.setItem(key, JSON.stringify(value));
-  }));
-};
-
-var SUPPORTED_LANG_IDS = _config.default.supportedLanguages.map(lang => lang.id);
-
-var selectedLanguages$ = onSelect$.pipe((0, _operators.map)(selectedLangs => (0, _intersection2.default)(selectedLangs, SUPPORTED_LANG_IDS)), (0, _operators.publishReplay)(1), (0, _operators.refCount)(), persistOn('@sanity/plugin/language-filter/selected-languages', SUPPORTED_LANG_IDS));
-exports.selectedLanguages$ = selectedLanguages$;
-
-var defaultFilterField = (enclosingType, field, selectedLanguages) => !enclosingType.name.startsWith('locale') || selectedLanguages.includes(field.name);
-
-var filterField = _config.default.filterField || defaultFilterField;
-var filterFn$ = selectedLanguages$.pipe((0, _operators.map)(langs => {
-  return (enclosingType, field) => filterField(enclosingType, field, langs);
-}));
-exports.filterFn$ = filterFn$;

package/lib/filter-fields.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _datastore.filterFn$;
-  }
-});
-
-var _datastore = require("./datastore");

package/lib/styles/SelectLanguage.css

@@ -1,50 +0,0 @@
-@import 'part:@sanity/base/theme/variables-style';
-
-.target {
-  display: flex;
-  align-items: center;
-  color: var(--text-color);
-  opacity: 1;
-  min-width: 4rem;
-  font-size: var(--font-size-xsmall);
-  white-space: nowrap;
-  height: 2.5rem;
-  align-self: center;
-  margin-right: 1em;
-}
-
-.arrow {
-  margin-left: 0.4em;
-}
-
-.root {
-  padding: 0.5em;
-  background-color: var(--component-bg);
-  color: var(--text-color);
-  composes: shadow-6dp from 'part:@sanity/base/theme/shadows-style';
-  user-select: none;
-  text-align: left;
-  overflow: auto;
-  overflow-x: hidden;
-}
-
-.list {
-  composes: resetList from 'part:@sanity/base/theme/layout/helpers';
-}
-
-.functions {
-  padding: 0.5em;
-  text-align: center;
-}
-
-.selectedNumFilter {
-  color: var(--state-danger-color);
-  font-weight: bold;
-}
-
-.item {
-  padding: 0.5em;
-  composes: resetListItem from 'part:@sanity/base/theme/layout/helpers';
-  composes: item from 'part:@sanity/base/theme/layout/selectable-style';
-  white-space: nowrap;
-}

package/src/SelectLanguage.js

@@ -1,106 +0,0 @@
-/* eslint-disable complexity */
-import React, {Fragment} from 'react'
-import PropTypes from 'prop-types'
-import Poppable from 'part:@sanity/components/utilities/poppable'
-import Checkbox from 'part:@sanity/components/toggles/checkbox'
-import Button from 'part:@sanity/components/buttons/default'
-import styles from './styles/SelectLanguage.css'
-import AngleDown from 'part:@sanity/base/angle-down-icon'
-import AngleUp from 'part:@sanity/base/angle-up-icon'
-
-const LanguagePropType = PropTypes.shape({id: PropTypes.string, title: PropTypes.string})
-export default class SelectLanguage extends React.Component {
-  static propTypes = {
-    languages: PropTypes.arrayOf(LanguagePropType),
-    selected: PropTypes.arrayOf(LanguagePropType),
-    onChange: PropTypes.func
-  }
-
-  state = {isOpen: false}
-  refElement = React.createRef()
-
-  handleToggle = () => this.setState(prevState => ({isOpen: !prevState.isOpen}))
-  handleOpen = () => this.setState({isOpen: true})
-  handleClose = () => {
-    this.setState({isOpen: false})
-  }
-
-  selectLang = langId => {
-    const {selected, onChange} = this.props
-    onChange(selected.concat(langId))
-  }
-
-  unselectLang = langId => {
-    const {selected, onChange} = this.props
-    onChange(selected.filter(id => id !== langId))
-  }
-
-  handleSelectAll = event => {
-    const {languages, onChange} = this.props
-    onChange(languages.map(l => l.id))
-  }
-  handleSelectNone = event => {
-    const {onChange} = this.props
-    onChange([])
-  }
-  handleLangCheckboxChange = event => {
-    const id = event.target.getAttribute('data-lang-id')
-    const checked = event.target.checked
-    this[checked ? 'selectLang' : 'unselectLang'](id)
-  }
-
-  render() {
-    const {isOpen} = this.state
-    const {languages, selected} = this.props
-    const allIsSelected = languages.length === selected.length
-    const refElement =
-      this.refElement && this.refElement.current && this.refElement.current._element
-
-    return (
-      <Fragment>
-        <span
-          className={styles.target}
-          onClick={this.handleToggle}
-          ref={this.refElement}
-          title={
-            allIsSelected
-              ? 'Filter language fields'
-              : 'Displaying only fields for selected languages'
-          }
-        >
-          Filter languages{allIsSelected ? '…' : ` (${selected.length}/${languages.length})`}
-          <span className={styles.arrow}>{isOpen ? <AngleUp /> : <AngleDown />}</span>
-        </span>
-        <Poppable
-          onEscape={this.handleClose}
-          onClickOutside={this.handleClose}
-          placement="bottom-end"
-          referenceElement={refElement}
-        >
-          {isOpen && (
-            <div className={styles.root}>
-              <div className={styles.functions}>
-                <Button onClick={allIsSelected ? this.handleSelectNone : this.handleSelectAll}>
-                  Select {allIsSelected ? 'none' : 'all'}
-                </Button>
-              </div>
-              <ul className={styles.list}>
-                {languages.map(lang => (
-                  <li className={styles.item} key={lang.id}>
-                    <Checkbox
-                      onChange={this.handleLangCheckboxChange}
-                      data-lang-id={lang.id}
-                      checked={selected.includes(lang.id)}
-                    >
-                      {lang.title}
-                    </Checkbox>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </Poppable>
-      </Fragment>
-    )
-  }
-}

package/src/SelectLanguageProvider.js

@@ -1,28 +0,0 @@
-import React from 'react'
-import {selectedLanguages$, setLangs} from './datastore'
-import SelectLanguage from './SelectLanguage'
-import config from 'part:@sanity/language-filter/config'
-
-export default class SelectLanguageProvider extends React.Component {
-  state = {selected: []}
-
-  componentDidMount(props) {
-    this.subscription = selectedLanguages$.subscribe(selected => {
-      this.setState({selected: selected})
-    })
-  }
-  componentWillUnmount(props) {
-    this.subscription.unsubscribe()
-  }
-
-  render() {
-    const {selected} = this.state
-    return (
-      <SelectLanguage
-        languages={config.supportedLanguages}
-        selected={selected}
-        onChange={setLangs}
-      />
-    )
-  }
-}

package/src/datastore.js

@@ -1,42 +0,0 @@
-import {Subject} from 'rxjs'
-import {map, publishReplay, refCount, startWith, tap} from 'rxjs/operators'
-import config from 'part:@sanity/language-filter/config'
-import {intersection} from 'lodash'
-
-const onSelect$ = new Subject()
-
-export const setLangs = langs => onSelect$.next(langs)
-
-const persistOn = (key, defaultValue) => input$ => {
-  let persisted
-  try {
-    persisted = JSON.parse(window.localStorage.getItem(key))
-  } 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 => lang.id)
-
-export const selectedLanguages$ = onSelect$.pipe(
-  map(selectedLangs => intersection(selectedLangs, SUPPORTED_LANG_IDS)),
-  publishReplay(1),
-  refCount(),
-  persistOn('@sanity/plugin/language-filter/selected-languages', SUPPORTED_LANG_IDS)
-)
-
-const defaultFilterField = (enclosingType, field, selectedLanguages) =>
-  !enclosingType.name.startsWith('locale') || selectedLanguages.includes(field.name)
-
-const filterField = config.filterField || defaultFilterField
-
-export const filterFn$ = selectedLanguages$.pipe(
-  map(langs => {
-    return (enclosingType, field) => filterField(enclosingType, field, langs)
-  })
-)

package/src/filter-fields.js

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

package/src/styles/SelectLanguage.css

@@ -1,50 +0,0 @@
-@import 'part:@sanity/base/theme/variables-style';
-
-.target {
-  display: flex;
-  align-items: center;
-  color: var(--text-color);
-  opacity: 1;
-  min-width: 4rem;
-  font-size: var(--font-size-xsmall);
-  white-space: nowrap;
-  height: 2.5rem;
-  align-self: center;
-  margin-right: 1em;
-}
-
-.arrow {
-  margin-left: 0.4em;
-}
-
-.root {
-  padding: 0.5em;
-  background-color: var(--component-bg);
-  color: var(--text-color);
-  composes: shadow-6dp from 'part:@sanity/base/theme/shadows-style';
-  user-select: none;
-  text-align: left;
-  overflow: auto;
-  overflow-x: hidden;
-}
-
-.list {
-  composes: resetList from 'part:@sanity/base/theme/layout/helpers';
-}
-
-.functions {
-  padding: 0.5em;
-  text-align: center;
-}
-
-.selectedNumFilter {
-  color: var(--state-danger-color);
-  font-weight: bold;
-}
-
-.item {
-  padding: 0.5em;
-  composes: resetListItem from 'part:@sanity/base/theme/layout/helpers';
-  composes: item from 'part:@sanity/base/theme/layout/selectable-style';
-  white-space: nowrap;
-}