@wordpress/block-library/build/query/edit/inspector-controls/taxonomy-controls.js

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TaxonomyControls = TaxonomyControls;
exports.useTaxonomiesInfo = void 0;

var _element = require("@wordpress/element");

var _components = require("@wordpress/components");

var _data = require("@wordpress/data");

var _coreData = require("@wordpress/core-data");

var _utils = require("../../utils");

var _constants = require("../../constants");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
// Helper function to get the term id based on user input in terms `FormTokenField`.
const getTermIdByTermValue = (termsMappedByName, termValue) => {
  var _termsMappedByName$te;

  // First we check for exact match by `term.id` or case sensitive `term.name` match.
  const termId = (termValue === null || termValue === void 0 ? void 0 : termValue.id) || ((_termsMappedByName$te = termsMappedByName[termValue]) === null || _termsMappedByName$te === void 0 ? void 0 : _termsMappedByName$te.id);
  if (termId) return termId;
  /**
   * Here we make an extra check for entered terms in a non case sensitive way,
   * to match user expectations, due to `FormTokenField` behaviour that shows
   * suggestions which are case insensitive.
   *
   * Although WP tries to discourage users to add terms with the same name (case insensitive),
   * it's still possible if you manually change the name, as long as the terms have different slugs.
   * In this edge case we always apply the first match from the terms list.
   */

  const termValueLower = termValue.toLocaleLowerCase();

  for (const term in termsMappedByName) {
    if (term.toLocaleLowerCase() === termValueLower) {
      return termsMappedByName[term].id;
    }
  }
};

const useTaxonomiesInfo = postType => {
  const taxonomies = (0, _utils.useTaxonomies)(postType);
  const taxonomiesInfo = (0, _data.useSelect)(select => {
    const {
      getEntityRecords
    } = select(_coreData.store);
    const termsQuery = {
      context: 'view',
      per_page: _constants.MAX_FETCHED_TERMS
    };

    const _taxonomiesInfo = taxonomies === null || taxonomies === void 0 ? void 0 : taxonomies.map(_ref => {
      let {
        slug,
        name
      } = _ref;

      const _terms = getEntityRecords('taxonomy', slug, termsQuery);

      return {
        slug,
        name,
        terms: (0, _utils.getEntitiesInfo)(_terms)
      };
    });

    return _taxonomiesInfo;
  }, [taxonomies]);
  return taxonomiesInfo;
};

exports.useTaxonomiesInfo = useTaxonomiesInfo;

function TaxonomyControls(_ref2) {
  let {
    onChange,
    query
  } = _ref2;
  const taxonomiesInfo = useTaxonomiesInfo(query.postType);

  const onTermsChange = taxonomySlug => newTermValues => {
    const taxonomyInfo = taxonomiesInfo.find(_ref3 => {
      let {
        slug
      } = _ref3;
      return slug === taxonomySlug;
    });
    if (!taxonomyInfo) return;
    const termIds = Array.from(newTermValues.reduce((accumulator, termValue) => {
      const termId = getTermIdByTermValue(taxonomyInfo.terms.mapByName, termValue);
      if (termId) accumulator.add(termId);
      return accumulator;
    }, new Set()));
    const newTaxQuery = { ...query.taxQuery,
      [taxonomySlug]: termIds
    };
    onChange({
      taxQuery: newTaxQuery
    });
  }; // Returns only the existing term ids in proper format to be
  // used in `FormTokenField`. This prevents the component from
  // crashing in the editor, when non existing term ids were provided.


  const getExistingTaxQueryValue = taxonomySlug => {
    var _query$taxQuery;

    const taxonomyInfo = taxonomiesInfo.find(_ref4 => {
      let {
        slug
      } = _ref4;
      return slug === taxonomySlug;
    });
    if (!taxonomyInfo) return [];
    return (((_query$taxQuery = query.taxQuery) === null || _query$taxQuery === void 0 ? void 0 : _query$taxQuery[taxonomySlug]) || []).reduce((accumulator, termId) => {
      const term = taxonomyInfo.terms.mapById[termId];

      if (term) {
        accumulator.push({
          id: termId,
          value: term.name
        });
      }

      return accumulator;
    }, []);
  };

  return (0, _element.createElement)(_element.Fragment, null, !!(taxonomiesInfo !== null && taxonomiesInfo !== void 0 && taxonomiesInfo.length) && taxonomiesInfo.map(_ref5 => {
    var _terms$names;

    let {
      slug,
      name,
      terms
    } = _ref5;

    if (!(terms !== null && terms !== void 0 && (_terms$names = terms.names) !== null && _terms$names !== void 0 && _terms$names.length)) {
      return null;
    }

    return (0, _element.createElement)("div", {
      key: slug,
      className: "block-library-query-inspector__taxonomy-control"
    }, (0, _element.createElement)(_components.FormTokenField, {
      label: name,
      value: getExistingTaxQueryValue(slug),
      suggestions: terms.names,
      onChange: onTermsChange(slug)
    }));
  }));
}
//# sourceMappingURL=taxonomy-controls.js.map