@wordpress/block-editor
Version:
101 lines (100 loc) • 2.73 kB
JavaScript
// packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
import { __, isRTL } from "@wordpress/i18n";
import { Button } from "@wordpress/components";
import {
chevronRight,
chevronLeft,
grid,
stretchFullWidth
} from "@wordpress/icons";
import { VIEWMODES } from "./constants";
import { jsx, jsxs } from "react/jsx-runtime";
var Actions = ({ onBlockPatternSelect }) => /* @__PURE__ */ jsx("div", { className: "block-editor-block-pattern-setup__actions", children: /* @__PURE__ */ jsx(
Button,
{
__next40pxDefaultSize: true,
variant: "primary",
onClick: onBlockPatternSelect,
children: __("Choose")
}
) });
var CarouselNavigation = ({
handlePrevious,
handleNext,
activeSlide,
totalSlides
}) => /* @__PURE__ */ jsxs("div", { className: "block-editor-block-pattern-setup__navigation", children: [
/* @__PURE__ */ jsx(
Button,
{
size: "compact",
icon: isRTL() ? chevronRight : chevronLeft,
label: __("Previous pattern"),
onClick: handlePrevious,
disabled: activeSlide === 0,
accessibleWhenDisabled: true
}
),
/* @__PURE__ */ jsx(
Button,
{
size: "compact",
icon: isRTL() ? chevronLeft : chevronRight,
label: __("Next pattern"),
onClick: handleNext,
disabled: activeSlide === totalSlides - 1,
accessibleWhenDisabled: true
}
)
] });
var SetupToolbar = ({
viewMode,
setViewMode,
handlePrevious,
handleNext,
activeSlide,
totalSlides,
onBlockPatternSelect
}) => {
const isCarouselView = viewMode === VIEWMODES.carousel;
const displayControls = /* @__PURE__ */ jsxs("div", { className: "block-editor-block-pattern-setup__display-controls", children: [
/* @__PURE__ */ jsx(
Button,
{
size: "compact",
icon: stretchFullWidth,
label: __("Carousel view"),
onClick: () => setViewMode(VIEWMODES.carousel),
isPressed: isCarouselView
}
),
/* @__PURE__ */ jsx(
Button,
{
size: "compact",
icon: grid,
label: __("Grid view"),
onClick: () => setViewMode(VIEWMODES.grid),
isPressed: viewMode === VIEWMODES.grid
}
)
] });
return /* @__PURE__ */ jsxs("div", { className: "block-editor-block-pattern-setup__toolbar", children: [
isCarouselView && /* @__PURE__ */ jsx(
CarouselNavigation,
{
handlePrevious,
handleNext,
activeSlide,
totalSlides
}
),
displayControls,
isCarouselView && /* @__PURE__ */ jsx(Actions, { onBlockPatternSelect })
] });
};
var setup_toolbar_default = SetupToolbar;
export {
setup_toolbar_default as default
};
//# sourceMappingURL=setup-toolbar.js.map