@wordpress/block-editor
Version:
59 lines (56 loc) • 2.05 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MediaCategoryPanel = MediaCategoryPanel;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _mediaList = _interopRequireDefault(require("./media-list"));
var _hooks = require("./hooks");
var _noResults = _interopRequireDefault(require("../no-results"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
function MediaCategoryPanel({
rootClientId,
onInsert,
category
}) {
const [search, setSearch, debouncedSearch] = (0, _compose.useDebouncedInput)();
const {
mediaList,
isLoading
} = (0, _hooks.useMediaResults)(category, {
per_page: !!debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
search: debouncedSearch
});
const baseCssClass = 'block-editor-inserter__media-panel';
const searchLabel = category.labels.search_items || (0, _i18n.__)('Search');
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: baseCssClass,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SearchControl, {
__nextHasNoMarginBottom: true,
className: `${baseCssClass}-search`,
onChange: setSearch,
value: search,
label: searchLabel,
placeholder: searchLabel
}), isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: `${baseCssClass}-spinner`,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
}), !isLoading && !mediaList?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_noResults.default, {}), !isLoading && !!mediaList?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mediaList.default, {
rootClientId: rootClientId,
onClick: onInsert,
mediaList: mediaList,
category: category
})]
});
}
//# sourceMappingURL=media-panel.js.map