@wordpress/block-editor
Version:
67 lines (63 loc) • 2.28 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = BlockLockToolbar;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _modal = _interopRequireDefault(require("./modal"));
var _useBlockLock = _interopRequireDefault(require("./use-block-lock"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockLockToolbar({
clientId
}) {
const {
canLock,
isLocked
} = (0, _useBlockLock.default)(clientId);
const [isModalOpen, toggleModal] = (0, _element.useReducer)(isActive => !isActive, false);
const hasLockButtonShownRef = (0, _element.useRef)(false);
// If the block lock button has been shown, we don't want to remove it
// from the toolbar until the toolbar is rendered again without it.
// Removing it beforehand can cause focus loss issues, such as when
// unlocking the block from the modal. It needs to return focus from
// whence it came, and to do that, we need to leave the button in the toolbar.
(0, _element.useEffect)(() => {
if (isLocked) {
hasLockButtonShownRef.current = true;
}
}, [isLocked]);
if (!isLocked && !hasLockButtonShownRef.current) {
return null;
}
let label = isLocked ? (0, _i18n.__)('Unlock') : (0, _i18n.__)('Lock');
if (!canLock && isLocked) {
label = (0, _i18n.__)('Locked');
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
className: "block-editor-block-lock-toolbar",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
disabled: !canLock,
icon: isLocked ? _icons.lock : _icons.unlock,
label: label,
onClick: toggleModal,
"aria-expanded": isModalOpen,
"aria-haspopup": "dialog"
})
}), isModalOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.default, {
clientId: clientId,
onClose: toggleModal
})]
});
}
//# sourceMappingURL=toolbar.js.map