@wordpress/editor/build-module/components/post-author/combobox.js

Enhanced block editor for WordPress posts.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import { debounce } from 'lodash';
/**
 * WordPress dependencies
 */

import { useState, useMemo, useEffect } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { ComboboxControl } from '@wordpress/components';

function PostAuthorCombobox() {
  const [fieldValue, setFieldValue] = useState();
  const {
    authorId,
    isLoading,
    authors,
    postAuthor
  } = useSelect(select => {
    const {
      __unstableGetAuthor,
      getAuthors,
      isResolving
    } = select('core');
    const {
      getEditedPostAttribute
    } = select('core/editor');

    const author = __unstableGetAuthor(getEditedPostAttribute('author'));

    const query = !fieldValue || '' === fieldValue ? {} : {
      search: fieldValue
    };
    return {
      authorId: getEditedPostAttribute('author'),
      postAuthor: author,
      authors: getAuthors(query),
      isLoading: isResolving('core', 'getAuthors', [query])
    };
  }, [fieldValue]);
  const {
    editPost
  } = useDispatch('core/editor');
  const authorOptions = useMemo(() => {
    const fetchedAuthors = (authors !== null && authors !== void 0 ? authors : []).map(author => {
      return {
        value: author.id,
        label: author.name
      };
    }); // Ensure the current author is included in the dropdown list.

    const foundAuthor = fetchedAuthors.findIndex(({
      value
    }) => (postAuthor === null || postAuthor === void 0 ? void 0 : postAuthor.id) === value);

    if (foundAuthor < 0 && postAuthor) {
      return [{
        value: postAuthor.id,
        label: postAuthor.name
      }, ...fetchedAuthors];
    }

    return fetchedAuthors;
  }, [authors, postAuthor]); // Initializes the post author properly
  // Also ensures external changes are reflected.

  useEffect(() => {
    if (postAuthor) {
      setFieldValue(postAuthor.name);
    }
  }, [postAuthor]);
  /**
   * Handle author selection.
   *
   * @param {number} postAuthorId The selected Author.
   */

  const handleSelect = postAuthorId => {
    if (!postAuthorId) {
      return;
    }

    editPost({
      author: postAuthorId
    });
  };
  /**
   * Handle user input.
   *
   * @param {string} inputValue The current value of the input field.
   */


  const handleKeydown = inputValue => {
    setFieldValue(inputValue);
  };

  if (!postAuthor) {
    return null;
  }

  return createElement(ComboboxControl, {
    label: __('Author'),
    options: authorOptions,
    value: authorId,
    onFilterValueChange: debounce(handleKeydown, 300),
    onChange: handleSelect,
    isLoading: isLoading,
    allowReset: false
  });
}

export default PostAuthorCombobox;
//# sourceMappingURL=combobox.js.map