@wordpress/block-editor
Version:
121 lines (116 loc) • 3.94 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = QuickInserter;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _searchResults = _interopRequireDefault(require("./search-results"));
var _useInsertionPoint = _interopRequireDefault(require("./hooks/use-insertion-point"));
var _useBlockTypesState = _interopRequireDefault(require("./hooks/use-block-types-state"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const SEARCH_THRESHOLD = 6;
const SHOWN_BLOCK_TYPES = 6;
const SHOWN_BLOCK_PATTERNS = 2;
function QuickInserter({
onSelect,
rootClientId,
clientId,
isAppender,
selectBlockOnInsert,
hasSearch = true
}) {
const [filterValue, setFilterValue] = (0, _element.useState)('');
const [destinationRootClientId, onInsertBlocks] = (0, _useInsertionPoint.default)({
onSelect,
rootClientId,
clientId,
isAppender,
selectBlockOnInsert
});
const [blockTypes] = (0, _useBlockTypesState.default)(destinationRootClientId, onInsertBlocks, true);
const {
setInserterIsOpened,
insertionIndex
} = (0, _data.useSelect)(select => {
const {
getSettings,
getBlockIndex,
getBlockCount
} = select(_store.store);
const settings = getSettings();
const index = getBlockIndex(clientId);
const blockCount = getBlockCount();
return {
setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
insertionIndex: index === -1 ? blockCount : index
};
}, [clientId]);
const showSearch = hasSearch && blockTypes.length > SEARCH_THRESHOLD;
(0, _element.useEffect)(() => {
if (setInserterIsOpened) {
setInserterIsOpened(false);
}
}, [setInserterIsOpened]);
// When clicking Browse All select the appropriate block so as
// the insertion point can work as expected.
const onBrowseAll = () => {
setInserterIsOpened({
filterValue,
onSelect,
rootClientId,
insertionIndex
});
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _clsx.default)('block-editor-inserter__quick-inserter', {
'has-search': showSearch,
'has-expand': setInserterIsOpened
}),
children: [showSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SearchControl, {
__nextHasNoMarginBottom: true,
className: "block-editor-inserter__search",
value: filterValue,
onChange: value => {
setFilterValue(value);
},
label: (0, _i18n.__)('Search'),
placeholder: (0, _i18n.__)('Search')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-inserter__quick-inserter-results",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_searchResults.default, {
filterValue: filterValue,
onSelect: onSelect,
rootClientId: rootClientId,
clientId: clientId,
isAppender: isAppender,
maxBlockPatterns: !!filterValue ? SHOWN_BLOCK_PATTERNS : 0,
maxBlockTypes: SHOWN_BLOCK_TYPES,
isDraggable: false,
selectBlockOnInsert: selectBlockOnInsert,
isQuick: true
})
}), setInserterIsOpened && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
className: "block-editor-inserter__quick-inserter-expand",
onClick: onBrowseAll,
"aria-label": (0, _i18n.__)('Browse all. This will open the main inserter panel in the editor toolbar.'),
children: (0, _i18n.__)('Browse all')
})]
});
}
//# sourceMappingURL=quick-inserter.js.map