@wordpress/block-editor
Version:
152 lines (148 loc) • 5.21 kB
JavaScript
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BlockMoverUpButton = exports.BlockMoverDownButton = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _blocks = require("@wordpress/blocks");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _moverDescription = require("./mover-description");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const getArrowIcon = (direction, orientation) => {
if (direction === 'up') {
if (orientation === 'horizontal') {
return (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft;
}
return _icons.chevronUp;
} else if (direction === 'down') {
if (orientation === 'horizontal') {
return (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight;
}
return _icons.chevronDown;
}
return null;
};
const getMovementDirectionLabel = (moveDirection, orientation) => {
if (moveDirection === 'up') {
if (orientation === 'horizontal') {
return (0, _i18n.isRTL)() ? (0, _i18n.__)('Move right') : (0, _i18n.__)('Move left');
}
return (0, _i18n.__)('Move up');
} else if (moveDirection === 'down') {
if (orientation === 'horizontal') {
return (0, _i18n.isRTL)() ? (0, _i18n.__)('Move left') : (0, _i18n.__)('Move right');
}
return (0, _i18n.__)('Move down');
}
return null;
};
const BlockMoverButton = (0, _element.forwardRef)(({
clientIds,
direction,
orientation: moverOrientation,
...props
}, ref) => {
const instanceId = (0, _compose.useInstanceId)(BlockMoverButton);
const normalizedClientIds = Array.isArray(clientIds) ? clientIds : [clientIds];
const blocksCount = normalizedClientIds.length;
const {
disabled
} = props;
const {
blockType,
isDisabled,
rootClientId,
isFirst,
isLast,
firstIndex,
orientation = 'vertical'
} = (0, _data.useSelect)(select => {
const {
getBlockIndex,
getBlockRootClientId,
getBlockOrder,
getBlock,
getBlockListSettings
} = select(_store.store);
const firstClientId = normalizedClientIds[0];
const blockRootClientId = getBlockRootClientId(firstClientId);
const firstBlockIndex = getBlockIndex(firstClientId);
const lastBlockIndex = getBlockIndex(normalizedClientIds[normalizedClientIds.length - 1]);
const blockOrder = getBlockOrder(blockRootClientId);
const block = getBlock(firstClientId);
const isFirstBlock = firstBlockIndex === 0;
const isLastBlock = lastBlockIndex === blockOrder.length - 1;
const {
orientation: blockListOrientation
} = getBlockListSettings(blockRootClientId) || {};
return {
blockType: block ? (0, _blocks.getBlockType)(block.name) : null,
isDisabled: disabled || (direction === 'up' ? isFirstBlock : isLastBlock),
rootClientId: blockRootClientId,
firstIndex: firstBlockIndex,
isFirst: isFirstBlock,
isLast: isLastBlock,
orientation: moverOrientation || blockListOrientation
};
}, [clientIds, direction]);
const {
moveBlocksDown,
moveBlocksUp
} = (0, _data.useDispatch)(_store.store);
const moverFunction = direction === 'up' ? moveBlocksUp : moveBlocksDown;
const onClick = event => {
moverFunction(clientIds, rootClientId);
if (props.onClick) {
props.onClick(event);
}
};
const descriptionId = `block-editor-block-mover-button__description-${instanceId}`;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
ref: ref,
className: (0, _clsx.default)('block-editor-block-mover-button', `is-${direction}-button`),
icon: getArrowIcon(direction, orientation),
label: getMovementDirectionLabel(direction, orientation),
"aria-describedby": descriptionId,
...props,
onClick: isDisabled ? null : onClick,
disabled: isDisabled,
accessibleWhenDisabled: true
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
id: descriptionId,
children: (0, _moverDescription.getBlockMoverDescription)(blocksCount, blockType && blockType.title, firstIndex, isFirst, isLast, direction === 'up' ? -1 : 1, orientation)
})]
});
});
const BlockMoverUpButton = exports.BlockMoverUpButton = (0, _element.forwardRef)((props, ref) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockMoverButton, {
direction: "up",
ref: ref,
...props
});
});
const BlockMoverDownButton = exports.BlockMoverDownButton = (0, _element.forwardRef)((props, ref) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockMoverButton, {
direction: "down",
ref: ref,
...props
});
});
//# sourceMappingURL=button.js.map
;