UNPKG

@wordpress/block-editor

Version:
93 lines (90 loc) 3.06 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _i18n = require("@wordpress/i18n"); var _components = require("@wordpress/components"); var _icons = require("@wordpress/icons"); var _constants = require("./constants"); var _jsxRuntime = require("react/jsx-runtime"); /** * WordPress dependencies */ /** * Internal dependencies */ const Actions = ({ onBlockPatternSelect }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { className: "block-editor-block-pattern-setup__actions", children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, { __next40pxDefaultSize: true, variant: "primary", onClick: onBlockPatternSelect, children: (0, _i18n.__)('Choose') }) }); const CarouselNavigation = ({ handlePrevious, handleNext, activeSlide, totalSlides }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { className: "block-editor-block-pattern-setup__navigation", children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, { size: "compact", icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft, label: (0, _i18n.__)('Previous pattern'), onClick: handlePrevious, disabled: activeSlide === 0, accessibleWhenDisabled: true }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, { size: "compact", icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight, label: (0, _i18n.__)('Next pattern'), onClick: handleNext, disabled: activeSlide === totalSlides - 1, accessibleWhenDisabled: true })] }); const SetupToolbar = ({ viewMode, setViewMode, handlePrevious, handleNext, activeSlide, totalSlides, onBlockPatternSelect }) => { const isCarouselView = viewMode === _constants.VIEWMODES.carousel; const displayControls = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { className: "block-editor-block-pattern-setup__display-controls", children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, { size: "compact", icon: _icons.stretchFullWidth, label: (0, _i18n.__)('Carousel view'), onClick: () => setViewMode(_constants.VIEWMODES.carousel), isPressed: isCarouselView }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, { size: "compact", icon: _icons.grid, label: (0, _i18n.__)('Grid view'), onClick: () => setViewMode(_constants.VIEWMODES.grid), isPressed: viewMode === _constants.VIEWMODES.grid })] }); return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { className: "block-editor-block-pattern-setup__toolbar", children: [isCarouselView && /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselNavigation, { handlePrevious: handlePrevious, handleNext: handleNext, activeSlide: activeSlide, totalSlides: totalSlides }), displayControls, isCarouselView && /*#__PURE__*/(0, _jsxRuntime.jsx)(Actions, { onBlockPatternSelect: onBlockPatternSelect })] }); }; var _default = exports.default = SetupToolbar; //# sourceMappingURL=setup-toolbar.js.map