@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
59 lines (56 loc) • 2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ResizeHandle;
var _i18n = require("@wordpress/i18n");
var _keycodes = require("@wordpress/keycodes");
var _components = require("@wordpress/components");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
function ResizeHandle({
direction,
resizeWidthBy
}) {
function handleKeyDown(event) {
const {
keyCode
} = event;
if (direction === 'left' && keyCode === _keycodes.LEFT || direction === 'right' && keyCode === _keycodes.RIGHT) {
resizeWidthBy(DELTA_DISTANCE);
} else if (direction === 'left' && keyCode === _keycodes.RIGHT || direction === 'right' && keyCode === _keycodes.LEFT) {
resizeWidthBy(-DELTA_DISTANCE);
}
}
const resizeHandleVariants = {
active: {
opacity: 1,
scaleY: 1.3
}
};
const resizableHandleHelpId = `resizable-editor__resize-help-${direction}`;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
text: (0, _i18n.__)('Drag to resize'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.button, {
className: `editor-resizable-editor__resize-handle is-${direction}`,
"aria-label": (0, _i18n.__)('Drag to resize'),
"aria-describedby": resizableHandleHelpId,
onKeyDown: handleKeyDown,
variants: resizeHandleVariants,
whileFocus: "active",
whileHover: "active",
whileTap: "active",
role: "separator",
"aria-orientation": "vertical"
}, "handle")
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
id: resizableHandleHelpId,
children: (0, _i18n.__)('Use left and right arrow keys to resize the canvas.')
})]
});
}
//# sourceMappingURL=resize-handle.js.map