@wordpress/block-library/build-module/terms-query/edit/inspector-controls/include-control.mjs

Block library for the WordPress editor.

// packages/block-library/src/terms-query/edit/inspector-controls/include-control.js
import { FormTokenField } from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import { store as coreStore } from "@wordpress/core-data";
import { useState, useEffect, useMemo } from "@wordpress/element";
import { useDebounce } from "@wordpress/compose";
import { decodeEntities } from "@wordpress/html-entities";
import { jsx } from "react/jsx-runtime";
var EMPTY_ARRAY = [];
var BASE_QUERY = {
  order: "asc",
  _fields: "id,name",
  context: "view"
};
function IncludeControl({
  value: include,
  taxonomy,
  onChange,
  ...props
}) {
  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,
        {
          ...BASE_QUERY,
          search,
          orderby: "name",
          exclude: include,
          per_page: 20
        }
      ];
      return {
        searchResults: getEntityRecords(...selectorArgs),
        searchHasResolved: hasFinishedResolution(
          "getEntityRecords",
          selectorArgs
        )
      };
    },
    [search, taxonomy, include]
  );
  const currentTerms = useSelect(
    (select) => {
      if (!include?.length) {
        return EMPTY_ARRAY;
      }
      const { getEntityRecords } = select(coreStore);
      return getEntityRecords("taxonomy", taxonomy, {
        ...BASE_QUERY,
        include,
        per_page: include.length
      });
    },
    [include, taxonomy]
  );
  useEffect(() => {
    if (!include?.length) {
      setValue(EMPTY_ARRAY);
    }
    if (!currentTerms?.length) {
      return;
    }
    const sanitizedValue = include.reduce((accumulator, id) => {
      const entity = currentTerms.find((term) => term.id === id);
      if (entity) {
        accumulator.push({
          id,
          value: decodeEntities(entity.name)
        });
      }
      return accumulator;
    }, []);
    setValue(sanitizedValue);
  }, [include, currentTerms]);
  const entitiesInfo = useMemo(() => {
    if (!searchResults?.length) {
      return { names: EMPTY_ARRAY, mapByName: {} };
    }
    const names = [];
    const mapByName = {};
    searchResults.forEach((result) => {
      const decodedName = decodeEntities(result.name);
      names.push(decodedName);
      mapByName[decodedName] = result;
    });
    return { names, mapByName };
  }, [searchResults]);
  useEffect(() => {
    if (!searchHasResolved) {
      return;
    }
    setSuggestions(entitiesInfo.names);
  }, [entitiesInfo.names, searchHasResolved]);
  const getIdByValue = (entitiesMappedByName, entity) => entity?.id || entitiesMappedByName?.[entity]?.id;
  const onTermChange = (newValue) => {
    const ids = Array.from(
      newValue.reduce((accumulator, entity) => {
        const id = getIdByValue(entitiesInfo.mapByName, entity);
        if (id) {
          accumulator.add(id);
        }
        return accumulator;
      }, /* @__PURE__ */ new Set())
    );
    setSuggestions(EMPTY_ARRAY);
    onChange(ids);
  };
  return /* @__PURE__ */ jsx(
    FormTokenField,
    {
      __next40pxDefaultSize: true,
      value,
      onInputChange: debouncedSearch,
      suggestions,
      onChange: onTermChange,
      __experimentalShowHowTo: false,
      ...props
    }
  );
}
export {
  IncludeControl as default
};
//# sourceMappingURL=include-control.mjs.map