@gechiui/block-editor
Version:
334 lines (278 loc) • 8.74 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@gechiui/element");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _lodash = require("lodash");
var _classnames = _interopRequireDefault(require("classnames"));
var _a11y = require("@gechiui/a11y");
var _i18n = require("@gechiui/i18n");
var _components = require("@gechiui/components");
var _data = require("@gechiui/data");
var _compose = require("@gechiui/compose");
var _blocks = require("@gechiui/blocks");
var _icons = require("@gechiui/icons");
var _menu = _interopRequireDefault(require("./menu"));
var _quickInserter = _interopRequireDefault(require("./quick-inserter"));
var _store = require("../../store");
/**
* External dependencies
*/
/**
* GeChiUI dependencies
*/
/**
* Internal dependencies
*/
const defaultRenderToggle = _ref => {
let {
onToggle,
disabled,
isOpen,
blockTitle,
hasSingleBlockType,
toggleProps = {}
} = _ref;
let label;
if (hasSingleBlockType) {
label = (0, _i18n.sprintf)( // translators: %s: the name of the block when there is only one
(0, _i18n._x)('Add %s', 'directly add the only allowed block'), blockTitle);
} else {
label = (0, _i18n._x)('Add block', 'Generic label for block inserter button');
}
const {
onClick,
...rest
} = toggleProps; // Handle both onClick functions from the toggle and the parent component
function handleClick(event) {
if (onToggle) {
onToggle(event);
}
if (onClick) {
onClick(event);
}
}
return (0, _element.createElement)(_components.Button, (0, _extends2.default)({
icon: _icons.plus,
label: label,
tooltipPosition: "bottom",
onClick: handleClick,
className: "block-editor-inserter__toggle",
"aria-haspopup": !hasSingleBlockType ? 'true' : false,
"aria-expanded": !hasSingleBlockType ? isOpen : false,
disabled: disabled
}, rest));
};
class Inserter extends _element.Component {
constructor() {
super(...arguments);
this.onToggle = this.onToggle.bind(this);
this.renderToggle = this.renderToggle.bind(this);
this.renderContent = this.renderContent.bind(this);
}
onToggle(isOpen) {
const {
onToggle
} = this.props; // Surface toggle callback to parent component
if (onToggle) {
onToggle(isOpen);
}
}
/**
* Render callback to display Dropdown toggle element.
*
* @param {Object} options
* @param {Function} options.onToggle Callback to invoke when toggle is
* pressed.
* @param {boolean} options.isOpen Whether dropdown is currently open.
*
* @return {GCElement} Dropdown toggle element.
*/
renderToggle(_ref2) {
let {
onToggle,
isOpen
} = _ref2;
const {
disabled,
blockTitle,
hasSingleBlockType,
directInsertBlock,
toggleProps,
hasItems,
renderToggle = defaultRenderToggle
} = this.props;
return renderToggle({
onToggle,
isOpen,
disabled: disabled || !hasItems,
blockTitle,
hasSingleBlockType,
directInsertBlock,
toggleProps
});
}
/**
* Render callback to display Dropdown content element.
*
* @param {Object} options
* @param {Function} options.onClose Callback to invoke when dropdown is
* closed.
*
* @return {GCElement} Dropdown content element.
*/
renderContent(_ref3) {
let {
onClose
} = _ref3;
const {
rootClientId,
clientId,
isAppender,
showInserterHelpPanel,
// This prop is experimental to give some time for the quick inserter to mature
// Feel free to make them stable after a few releases.
__experimentalIsQuick: isQuick
} = this.props;
if (isQuick) {
return (0, _element.createElement)(_quickInserter.default, {
onSelect: () => {
onClose();
},
rootClientId: rootClientId,
clientId: clientId,
isAppender: isAppender
});
}
return (0, _element.createElement)(_menu.default, {
onSelect: () => {
onClose();
},
rootClientId: rootClientId,
clientId: clientId,
isAppender: isAppender,
showInserterHelpPanel: showInserterHelpPanel
});
}
render() {
const {
position,
hasSingleBlockType,
directInsertBlock,
insertOnlyAllowedBlock,
__experimentalIsQuick: isQuick,
onSelectOrClose
} = this.props;
if (hasSingleBlockType || directInsertBlock !== null && directInsertBlock !== void 0 && directInsertBlock.length) {
return this.renderToggle({
onToggle: insertOnlyAllowedBlock
});
}
return (0, _element.createElement)(_components.Dropdown, {
className: "block-editor-inserter",
contentClassName: (0, _classnames.default)('block-editor-inserter__popover', {
'is-quick': isQuick
}),
position: position,
onToggle: this.onToggle,
expandOnMobile: true,
headerTitle: (0, _i18n.__)('添加区块'),
renderToggle: this.renderToggle,
renderContent: this.renderContent,
onClose: onSelectOrClose
});
}
}
var _default = (0, _compose.compose)([(0, _data.withSelect)((select, _ref4) => {
let {
clientId,
rootClientId
} = _ref4;
const {
getBlockRootClientId,
hasInserterItems,
__experimentalGetAllowedBlocks,
__experimentalGetDirectInsertBlock
} = select(_store.store);
const {
getBlockVariations
} = select(_blocks.store);
rootClientId = rootClientId || getBlockRootClientId(clientId) || undefined;
const allowedBlocks = __experimentalGetAllowedBlocks(rootClientId);
const directInsertBlock = __experimentalGetDirectInsertBlock(rootClientId);
const hasSingleBlockType = (0, _lodash.size)(allowedBlocks) === 1 && (0, _lodash.size)(getBlockVariations(allowedBlocks[0].name, 'inserter')) === 0;
let allowedBlockType = false;
if (hasSingleBlockType) {
allowedBlockType = allowedBlocks[0];
}
return {
hasItems: hasInserterItems(rootClientId),
hasSingleBlockType,
blockTitle: allowedBlockType ? allowedBlockType.title : '',
allowedBlockType,
directInsertBlock,
rootClientId
};
}), (0, _data.withDispatch)((dispatch, ownProps, _ref5) => {
let {
select
} = _ref5;
return {
insertOnlyAllowedBlock() {
const {
rootClientId,
clientId,
isAppender,
hasSingleBlockType,
allowedBlockType,
directInsertBlock,
onSelectOrClose
} = ownProps;
if (!hasSingleBlockType && !(directInsertBlock !== null && directInsertBlock !== void 0 && directInsertBlock.length)) {
return;
}
function getInsertionIndex() {
const {
getBlockIndex,
getBlockSelectionEnd,
getBlockOrder,
getBlockRootClientId
} = select(_store.store); // If the clientId is defined, we insert at the position of the block.
if (clientId) {
return getBlockIndex(clientId);
} // If there a selected block, we insert after the selected block.
const end = getBlockSelectionEnd();
if (!isAppender && end && getBlockRootClientId(end) === rootClientId) {
return getBlockIndex(end) + 1;
} // Otherwise, we insert at the end of the current rootClientId
return getBlockOrder(rootClientId).length;
}
const {
insertBlock
} = dispatch(_store.store);
const blockToInsert = directInsertBlock !== null && directInsertBlock !== void 0 && directInsertBlock.length ? (0, _blocks.createBlock)(...directInsertBlock) : (0, _blocks.createBlock)(allowedBlockType.name);
insertBlock(blockToInsert, getInsertionIndex(), rootClientId);
if (onSelectOrClose) {
onSelectOrClose();
}
const message = (0, _i18n.sprintf)( // translators: %s: the name of the block that has been added
(0, _i18n.__)('%s区块已添加'), allowedBlockType.title);
(0, _a11y.speak)(message);
}
};
}), // The global inserter should always be visible, we are using ( ! isAppender && ! rootClientId && ! clientId ) as
// a way to detect the global Inserter.
(0, _compose.ifCondition)(_ref6 => {
let {
hasItems,
isAppender,
rootClientId,
clientId
} = _ref6;
return hasItems || !isAppender && !rootClientId && !clientId;
})])(Inserter);
exports.default = _default;
//# sourceMappingURL=index.js.map