@wordpress/block-editor
Version:
225 lines (200 loc) • 9.72 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _classnames = _interopRequireDefault(require("classnames"));
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _tips = _interopRequireDefault(require("./tips"));
var _previewPanel = _interopRequireDefault(require("./preview-panel"));
var _blockTypesTab = _interopRequireDefault(require("./block-types-tab"));
var _blockPatternsTab = _interopRequireWildcard(require("./block-patterns-tab"));
var _reusableBlocksTab = _interopRequireDefault(require("./reusable-blocks-tab"));
var _mediaTab = require("./media-tab");
var _searchResults = _interopRequireDefault(require("./search-results"));
var _useDebouncedInput = _interopRequireDefault(require("./hooks/use-debounced-input"));
var _useInsertionPoint = _interopRequireDefault(require("./hooks/use-insertion-point"));
var _tabs = _interopRequireDefault(require("./tabs"));
var _store = require("../../store");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function InserterMenu({
rootClientId,
clientId,
isAppender,
__experimentalInsertionIndex,
onSelect,
showInserterHelpPanel,
showMostUsedBlocks,
__experimentalFilterValue = '',
shouldFocusBlock = true,
prioritizePatterns
}, ref) {
const [filterValue, setFilterValue, delayedFilterValue] = (0, _useDebouncedInput.default)(__experimentalFilterValue);
const [hoveredItem, setHoveredItem] = (0, _element.useState)(null);
const [selectedPatternCategory, setSelectedPatternCategory] = (0, _element.useState)(null);
const [selectedMediaCategory, setSelectedMediaCategory] = (0, _element.useState)(null);
const [selectedTab, setSelectedTab] = (0, _element.useState)(null);
const [destinationRootClientId, onInsertBlocks, onToggleInsertionPoint] = (0, _useInsertionPoint.default)({
rootClientId,
clientId,
isAppender,
insertionIndex: __experimentalInsertionIndex,
shouldFocusBlock
});
const {
showPatterns,
inserterItems
} = (0, _data.useSelect)(select => {
const {
__experimentalGetAllowedPatterns,
getInserterItems
} = select(_store.store);
return {
showPatterns: !!__experimentalGetAllowedPatterns(destinationRootClientId).length,
inserterItems: getInserterItems(destinationRootClientId)
};
}, [destinationRootClientId]);
const hasReusableBlocks = (0, _element.useMemo)(() => {
return inserterItems.some(({
category
}) => category === 'reusable');
}, [inserterItems]);
const mediaCategories = (0, _mediaTab.useMediaCategories)(destinationRootClientId);
const showMedia = !!mediaCategories.length;
const onInsert = (0, _element.useCallback)((blocks, meta, shouldForceFocusBlock) => {
onInsertBlocks(blocks, meta, shouldForceFocusBlock);
onSelect();
}, [onInsertBlocks, onSelect]);
const onInsertPattern = (0, _element.useCallback)((blocks, patternName) => {
onInsertBlocks(blocks, {
patternName
});
onSelect();
}, [onInsertBlocks, onSelect]);
const onHover = (0, _element.useCallback)(item => {
onToggleInsertionPoint(!!item);
setHoveredItem(item);
}, [onToggleInsertionPoint, setHoveredItem]);
const onHoverPattern = (0, _element.useCallback)(item => {
onToggleInsertionPoint(!!item);
}, [onToggleInsertionPoint]);
const onClickPatternCategory = (0, _element.useCallback)(patternCategory => {
setSelectedPatternCategory(patternCategory);
}, [setSelectedPatternCategory]);
const blocksTab = (0, _element.useMemo)(() => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
className: "block-editor-inserter__block-list"
}, (0, _element.createElement)(_blockTypesTab.default, {
rootClientId: destinationRootClientId,
onInsert: onInsert,
onHover: onHover,
showMostUsedBlocks: showMostUsedBlocks
})), showInserterHelpPanel && (0, _element.createElement)("div", {
className: "block-editor-inserter__tips"
}, (0, _element.createElement)(_components.VisuallyHidden, {
as: "h2"
}, (0, _i18n.__)('A tip for using the block editor')), (0, _element.createElement)(_tips.default, null))), [destinationRootClientId, onInsert, onHover, showMostUsedBlocks, showInserterHelpPanel]);
const patternsTab = (0, _element.useMemo)(() => (0, _element.createElement)(_blockPatternsTab.default, {
rootClientId: destinationRootClientId,
onInsert: onInsertPattern,
onSelectCategory: onClickPatternCategory,
selectedCategory: selectedPatternCategory
}), [destinationRootClientId, onInsertPattern, onClickPatternCategory, selectedPatternCategory]);
const reusableBlocksTab = (0, _element.useMemo)(() => (0, _element.createElement)(_reusableBlocksTab.default, {
rootClientId: destinationRootClientId,
onInsert: onInsert,
onHover: onHover
}), [destinationRootClientId, onInsert, onHover]);
const mediaTab = (0, _element.useMemo)(() => (0, _element.createElement)(_mediaTab.MediaTab, {
rootClientId: destinationRootClientId,
selectedCategory: selectedMediaCategory,
onSelectCategory: setSelectedMediaCategory,
onInsert: onInsert
}), [destinationRootClientId, onInsert, selectedMediaCategory, setSelectedMediaCategory]);
const getCurrentTab = (0, _element.useCallback)(tab => {
if (tab.name === 'blocks') {
return blocksTab;
} else if (tab.name === 'patterns') {
return patternsTab;
} else if (tab.name === 'reusable') {
return reusableBlocksTab;
} else if (tab.name === 'media') {
return mediaTab;
}
}, [blocksTab, patternsTab, reusableBlocksTab, mediaTab]);
const searchRef = (0, _element.useRef)();
(0, _element.useImperativeHandle)(ref, () => ({
focusSearch: () => {
searchRef.current.focus();
}
}));
const showPatternPanel = selectedTab === 'patterns' && !delayedFilterValue && selectedPatternCategory;
const showAsTabs = !delayedFilterValue && (showPatterns || hasReusableBlocks || showMedia);
const showMediaPanel = selectedTab === 'media' && !delayedFilterValue && selectedMediaCategory;
return (0, _element.createElement)("div", {
className: "block-editor-inserter__menu"
}, (0, _element.createElement)("div", {
className: (0, _classnames.default)('block-editor-inserter__main-area', {
'show-as-tabs': showAsTabs
})
}, (0, _element.createElement)(_components.SearchControl, {
__nextHasNoMarginBottom: true,
className: "block-editor-inserter__search",
onChange: value => {
if (hoveredItem) setHoveredItem(null);
setFilterValue(value);
},
value: filterValue,
label: (0, _i18n.__)('Search for blocks and patterns'),
placeholder: (0, _i18n.__)('Search'),
ref: searchRef
}), !!delayedFilterValue && (0, _element.createElement)("div", {
className: "block-editor-inserter__no-tab-container"
}, (0, _element.createElement)(_searchResults.default, {
filterValue: delayedFilterValue,
onSelect: onSelect,
onHover: onHover,
rootClientId: rootClientId,
clientId: clientId,
isAppender: isAppender,
__experimentalInsertionIndex: __experimentalInsertionIndex,
showBlockDirectory: true,
shouldFocusBlock: shouldFocusBlock
})), showAsTabs && (0, _element.createElement)(_tabs.default, {
showPatterns: showPatterns,
showReusableBlocks: hasReusableBlocks,
showMedia: showMedia,
prioritizePatterns: prioritizePatterns,
onSelect: setSelectedTab
}, getCurrentTab), !delayedFilterValue && !showAsTabs && (0, _element.createElement)("div", {
className: "block-editor-inserter__no-tab-container"
}, blocksTab)), showMediaPanel && (0, _element.createElement)(_mediaTab.MediaCategoryDialog, {
rootClientId: destinationRootClientId,
onInsert: onInsert,
category: selectedMediaCategory
}), showInserterHelpPanel && hoveredItem && (0, _element.createElement)(_previewPanel.default, {
item: hoveredItem
}), showPatternPanel && (0, _element.createElement)(_blockPatternsTab.BlockPatternsCategoryDialog, {
rootClientId: destinationRootClientId,
onInsert: onInsertPattern,
onHover: onHoverPattern,
category: selectedPatternCategory,
showTitlesAsTooltip: true
}));
}
var _default = (0, _element.forwardRef)(InserterMenu);
exports.default = _default;
//# sourceMappingURL=menu.js.map