@wordpress/block-editor
Version:
99 lines (96 loc) • 3.92 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _mediaPanel = require("./media-panel");
var _check = _interopRequireDefault(require("../../media-upload/check"));
var _mediaUpload = _interopRequireDefault(require("../../media-upload"));
var _hooks = require("./hooks");
var _utils = require("./utils");
var _mobileTabNavigation = _interopRequireDefault(require("../mobile-tab-navigation"));
var _categoryTabs = _interopRequireDefault(require("../category-tabs"));
var _noResults = _interopRequireDefault(require("../no-results"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ALLOWED_MEDIA_TYPES = ['image', 'video', 'audio'];
function MediaTab({
rootClientId,
selectedCategory,
onSelectCategory,
onInsert,
children
}) {
const mediaCategories = (0, _hooks.useMediaCategories)(rootClientId);
const isMobile = (0, _compose.useViewportMatch)('medium', '<');
const baseCssClass = 'block-editor-inserter__media-tabs';
const onSelectMedia = (0, _element.useCallback)(media => {
if (!media?.url) {
return;
}
const [block] = (0, _utils.getBlockAndPreviewFromMedia)(media, media.type);
onInsert(block);
}, [onInsert]);
const categories = (0, _element.useMemo)(() => mediaCategories.map(mediaCategory => ({
...mediaCategory,
label: mediaCategory.labels.name
})), [mediaCategories]);
if (!categories.length) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_noResults.default, {});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [!isMobile && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: `${baseCssClass}-container`,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_categoryTabs.default, {
categories: categories,
selectedCategory: selectedCategory,
onSelectCategory: onSelectCategory,
children: children
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_check.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mediaUpload.default, {
multiple: false,
onSelect: onSelectMedia,
allowedTypes: ALLOWED_MEDIA_TYPES,
render: ({
open
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
onClick: event => {
// Safari doesn't emit a focus event on button elements when
// clicked and we need to manually focus the button here.
// The reason is that core's Media Library modal explicitly triggers a
// focus event and therefore a `blur` event is triggered on a different
// element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`
// attribute making the Inserter dialog to close.
event.target.focus();
open();
},
className: "block-editor-inserter__media-library-button",
variant: "secondary",
"data-unstable-ignore-focus-outside-for-relatedtarget": ".media-modal",
children: (0, _i18n.__)('Open Media Library')
})
})
})]
}), isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileTabNavigation.default, {
categories: categories,
children: category => /*#__PURE__*/(0, _jsxRuntime.jsx)(_mediaPanel.MediaCategoryPanel, {
onInsert: onInsert,
rootClientId: rootClientId,
category: category
})
})]
});
}
var _default = exports.default = MediaTab;
//# sourceMappingURL=media-tab.js.map