@wordpress/block-editor
Version:
230 lines (228 loc) • 8.63 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-editor/src/components/global-styles/shadow-panel-components.js
var shadow_panel_components_exports = {};
__export(shadow_panel_components_exports, {
ShadowIndicator: () => ShadowIndicator,
ShadowPopover: () => ShadowPopover,
ShadowPopoverContainer: () => ShadowPopoverContainer,
ShadowPresets: () => ShadowPresets,
useShadowPresets: () => useShadowPresets
});
module.exports = __toCommonJS(shadow_panel_components_exports);
var import_i18n = require("@wordpress/i18n");
var import_components = require("@wordpress/components");
var import_element = require("@wordpress/element");
var import_icons = require("@wordpress/icons");
var import_clsx = __toESM(require("clsx"));
var import_jsx_runtime = require("react/jsx-runtime");
var EMPTY_ARRAY = [];
function ShadowPopoverContainer({ shadow, onShadowChange, settings }) {
const shadows = useShadowPresets(settings);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-global-styles__shadow-popover-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { level: 5, children: (0, import_i18n.__)("Drop shadow") }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ShadowPresets,
{
presets: shadows,
activeShadow: shadow,
onSelect: onShadowChange
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-global-styles__clear-shadow", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Button,
{
__next40pxDefaultSize: true,
variant: "tertiary",
onClick: () => onShadowChange(void 0),
disabled: !shadow,
accessibleWhenDisabled: true,
children: (0, import_i18n.__)("Clear")
}
) })
] }) });
}
function ShadowPresets({ presets, activeShadow, onSelect }) {
return !presets ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Composite,
{
role: "listbox",
className: "block-editor-global-styles__shadow__list",
"aria-label": (0, import_i18n.__)("Drop shadows"),
children: presets.map(({ name, slug, shadow }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ShadowIndicator,
{
label: name,
isActive: shadow === activeShadow,
type: slug === "unset" ? "unset" : "preset",
onSelect: () => onSelect(shadow === activeShadow ? void 0 : shadow),
shadow
},
slug
))
}
);
}
function ShadowIndicator({ type, label, isActive, onSelect, shadow }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: label, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Composite.Item,
{
role: "option",
"aria-label": label,
"aria-selected": isActive,
className: (0, import_clsx.default)("block-editor-global-styles__shadow__item", {
"is-active": isActive
}),
render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"button",
{
className: (0, import_clsx.default)(
"block-editor-global-styles__shadow-indicator",
{
unset: type === "unset"
}
),
onClick: onSelect,
style: { boxShadow: shadow },
"aria-label": label,
children: isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.check })
}
)
}
) });
}
function ShadowPopover({ shadow, onShadowChange, settings }) {
const popoverProps = {
placement: "left-start",
offset: 36,
shift: true
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Dropdown,
{
popoverProps,
className: "block-editor-global-styles__shadow-dropdown",
renderToggle: renderShadowToggle(shadow, onShadowChange),
renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalDropdownContentWrapper, { paddingSize: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ShadowPopoverContainer,
{
shadow,
onShadowChange,
settings
}
) })
}
);
}
function renderShadowToggle(shadow, onShadowChange) {
return ({ onToggle, isOpen }) => {
const shadowButtonRef = (0, import_element.useRef)(void 0);
const toggleProps = {
onClick: onToggle,
className: (0, import_clsx.default)(
"block-editor-global-styles__shadow-dropdown-toggle",
{ "is-open": isOpen }
),
"aria-expanded": isOpen,
ref: shadowButtonRef
};
const removeButtonProps = {
onClick: () => {
if (isOpen) {
onToggle();
}
onShadowChange(void 0);
shadowButtonRef.current?.focus();
},
className: (0, import_clsx.default)(
"block-editor-global-styles__shadow-editor__remove-button",
{ "is-open": isOpen }
),
label: (0, import_i18n.__)("Remove")
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Button, { __next40pxDefaultSize: true, ...toggleProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "flex-start", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_icons.Icon,
{
className: "block-editor-global-styles__toggle-icon",
icon: import_icons.shadow,
size: 24
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: (0, import_i18n.__)("Drop shadow") })
] }) }),
!!shadow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Button,
{
__next40pxDefaultSize: true,
size: "small",
icon: import_icons.reset,
...removeButtonProps
}
)
] });
};
}
function useShadowPresets(settings) {
return (0, import_element.useMemo)(() => {
if (!settings?.shadow) {
return EMPTY_ARRAY;
}
const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
const {
default: defaultShadows,
theme: themeShadows,
custom: customShadows
} = settings?.shadow?.presets ?? {};
const unsetShadow = {
name: (0, import_i18n.__)("Unset"),
slug: "unset",
shadow: "none"
};
const shadowPresets = [
...defaultPresetsEnabled && defaultShadows || EMPTY_ARRAY,
...themeShadows || EMPTY_ARRAY,
...customShadows || EMPTY_ARRAY
];
if (shadowPresets.length) {
shadowPresets.unshift(unsetShadow);
}
return shadowPresets;
}, [settings]);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ShadowIndicator,
ShadowPopover,
ShadowPopoverContainer,
ShadowPresets,
useShadowPresets
});
//# sourceMappingURL=shadow-panel-components.js.map