UNPKG

@wordpress/block-editor

Version:
152 lines (148 loc) 5.21 kB
"use strict"; 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