@wordpress/editor/build/components/autocompleters/user.js

Enhanced block editor for WordPress posts.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.getUserLabel = getUserLabel;
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _coreData = require("@wordpress/core-data");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */

function getUserLabel(user) {
  const avatar = user.avatar_urls && user.avatar_urls[24] ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
    className: "editor-autocompleters__user-avatar",
    alt: "",
    src: user.avatar_urls[24]
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
    className: "editor-autocompleters__no-avatar"
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [avatar, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "editor-autocompleters__user-name",
      children: user.name
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: "editor-autocompleters__user-slug",
      children: user.slug
    })]
  });
}

/**
 * A user mentions completer.
 *
 * @type {WPCompleter}
 */
var _default = exports.default = {
  name: 'users',
  className: 'editor-autocompleters__user',
  triggerPrefix: '@',
  useItems(filterValue) {
    const users = (0, _data.useSelect)(select => {
      const {
        getUsers
      } = select(_coreData.store);
      return getUsers({
        context: 'view',
        search: encodeURIComponent(filterValue)
      });
    }, [filterValue]);
    const options = (0, _element.useMemo)(() => users ? users.map(user => ({
      key: `user-${user.slug}`,
      value: user,
      label: getUserLabel(user)
    })) : [], [users]);
    return [options];
  },
  getOptionCompletion(user) {
    return `@${user.slug}`;
  }
};
//# sourceMappingURL=user.js.map