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

Block library for the WordPress editor.

// packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
import {
  FormTokenField,
  __experimentalVStack as VStack
} from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import { store as coreStore } from "@wordpress/core-data";
import { useState, useEffect } from "@wordpress/element";
import { useDebounce } from "@wordpress/compose";
import { decodeEntities } from "@wordpress/html-entities";
import { useTaxonomies } from "../../utils";
import { jsx } from "react/jsx-runtime";
var EMPTY_ARRAY = [];
var BASE_QUERY = {
  order: "asc",
  _fields: "id,name",
  context: "view"
};
var getTermIdByTermValue = (terms, termValue) => {
  const termId = termValue?.id || terms?.find((term) => term.name === termValue)?.id;
  if (termId) {
    return termId;
  }
  const termValueLower = termValue.toLocaleLowerCase();
  return terms?.find(
    (term) => term.name.toLocaleLowerCase() === termValueLower
  )?.id;
};
function TaxonomyControls({ onChange, query }) {
  const { postType, taxQuery } = query;
  const taxonomies = useTaxonomies(postType);
  if (!taxonomies || taxonomies.length === 0) {
    return null;
  }
  return /* @__PURE__ */ jsx(VStack, { spacing: 4, children: taxonomies.map((taxonomy) => {
    const termIds = taxQuery?.[taxonomy.slug] || [];
    const handleChange = (newTermIds) => onChange({
      taxQuery: {
        ...taxQuery,
        [taxonomy.slug]: newTermIds
      }
    });
    return /* @__PURE__ */ jsx(
      TaxonomyItem,
      {
        taxonomy,
        termIds,
        onChange: handleChange
      },
      taxonomy.slug
    );
  }) });
}
function TaxonomyItem({ taxonomy, termIds, onChange }) {
  const [search, setSearch] = useState("");
  const [value, setValue] = useState(EMPTY_ARRAY);
  const [suggestions, setSuggestions] = useState(EMPTY_ARRAY);
  const debouncedSearch = useDebounce(setSearch, 250);
  const { searchResults, searchHasResolved } = useSelect(
    (select) => {
      if (!search) {
        return { searchResults: EMPTY_ARRAY, searchHasResolved: true };
      }
      const { getEntityRecords, hasFinishedResolution } = select(coreStore);
      const selectorArgs = [
        "taxonomy",
        taxonomy.slug,
        {
          ...BASE_QUERY,
          search,
          orderby: "name",
          exclude: termIds,
          per_page: 20
        }
      ];
      return {
        searchResults: getEntityRecords(...selectorArgs),
        searchHasResolved: hasFinishedResolution(
          "getEntityRecords",
          selectorArgs
        )
      };
    },
    [search, taxonomy.slug, termIds]
  );
  const existingTerms = useSelect(
    (select) => {
      if (!termIds?.length) {
        return EMPTY_ARRAY;
      }
      const { getEntityRecords } = select(coreStore);
      return getEntityRecords("taxonomy", taxonomy.slug, {
        ...BASE_QUERY,
        include: termIds,
        per_page: termIds.length
      });
    },
    [taxonomy.slug, termIds]
  );
  useEffect(() => {
    if (!termIds?.length) {
      setValue(EMPTY_ARRAY);
    }
    if (!existingTerms?.length) {
      return;
    }
    const sanitizedValue = termIds.reduce((accumulator, id) => {
      const entity = existingTerms.find((term) => term.id === id);
      if (entity) {
        accumulator.push({
          id,
          value: entity.name
        });
      }
      return accumulator;
    }, []);
    setValue(sanitizedValue);
  }, [termIds, existingTerms]);
  useEffect(() => {
    if (!searchHasResolved) {
      return;
    }
    setSuggestions(searchResults.map((result) => result.name));
  }, [searchResults, searchHasResolved]);
  const onTermsChange = (newTermValues) => {
    const newTermIds = /* @__PURE__ */ new Set();
    for (const termValue of newTermValues) {
      const termId = getTermIdByTermValue(searchResults, termValue);
      if (termId) {
        newTermIds.add(termId);
      }
    }
    setSuggestions(EMPTY_ARRAY);
    onChange(Array.from(newTermIds));
  };
  return /* @__PURE__ */ jsx("div", { className: "block-library-query-inspector__taxonomy-control", children: /* @__PURE__ */ jsx(
    FormTokenField,
    {
      label: taxonomy.name,
      value,
      onInputChange: debouncedSearch,
      suggestions,
      displayTransform: decodeEntities,
      onChange: onTermsChange,
      __experimentalShowHowTo: false,
      __next40pxDefaultSize: true
    }
  ) });
}
export {
  TaxonomyControls
};
//# sourceMappingURL=taxonomy-controls.js.map