@wordpress/block-editor
Version:
216 lines (213 loc) • 6.91 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ShadowIndicator = ShadowIndicator;
exports.ShadowPopover = ShadowPopover;
exports.ShadowPopoverContainer = ShadowPopoverContainer;
exports.ShadowPresets = ShadowPresets;
exports.useShadowPresets = useShadowPresets;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _clsx = _interopRequireDefault(require("clsx"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* External dependencies
*/
/**
* Shared reference to an empty array for cases where it is important to avoid
* returning a new array reference on every invocation.
*
* @type {Array}
*/const EMPTY_ARRAY = [];
function ShadowPopoverContainer({
shadow,
onShadowChange,
settings
}) {
const shadows = useShadowPresets(settings);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-global-styles__shadow-popover-container",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
spacing: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
level: 5,
children: (0, _i18n.__)('Drop shadow')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowPresets, {
presets: shadows,
activeShadow: shadow,
onSelect: onShadowChange
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-global-styles__clear-shadow",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
variant: "tertiary",
onClick: () => onShadowChange(undefined),
disabled: !shadow,
accessibleWhenDisabled: true,
children: (0, _i18n.__)('Clear')
})
})]
})
});
}
function ShadowPresets({
presets,
activeShadow,
onSelect
}) {
return !presets ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite, {
role: "listbox",
className: "block-editor-global-styles__shadow__list",
"aria-label": (0, _i18n.__)('Drop shadows'),
children: presets.map(({
name,
slug,
shadow
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowIndicator, {
label: name,
isActive: shadow === activeShadow,
type: slug === 'unset' ? 'unset' : 'preset',
onSelect: () => onSelect(shadow === activeShadow ? undefined : shadow),
shadow: shadow
}, slug))
});
}
function ShadowIndicator({
type,
label,
isActive,
onSelect,
shadow
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
text: label,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite.Item, {
role: "option",
"aria-label": label,
"aria-selected": isActive,
className: (0, _clsx.default)('block-editor-global-styles__shadow__item', {
'is-active': isActive
}),
render: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
className: (0, _clsx.default)('block-editor-global-styles__shadow-indicator', {
unset: type === 'unset'
}),
onClick: onSelect,
style: {
boxShadow: shadow
},
"aria-label": label,
children: isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.check
})
})
})
});
}
function ShadowPopover({
shadow,
onShadowChange,
settings
}) {
const popoverProps = {
placement: 'left-start',
offset: 36,
shift: true
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
popoverProps: popoverProps,
className: "block-editor-global-styles__shadow-dropdown",
renderToggle: renderShadowToggle(shadow, onShadowChange),
renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalDropdownContentWrapper, {
paddingSize: "medium",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowPopoverContainer, {
shadow: shadow,
onShadowChange: onShadowChange,
settings: settings
})
})
});
}
function renderShadowToggle(shadow, onShadowChange) {
return ({
onToggle,
isOpen
}) => {
const shadowButtonRef = (0, _element.useRef)(undefined);
const toggleProps = {
onClick: onToggle,
className: (0, _clsx.default)('block-editor-global-styles__shadow-dropdown-toggle', {
'is-open': isOpen
}),
'aria-expanded': isOpen,
ref: shadowButtonRef
};
const removeButtonProps = {
onClick: () => {
if (isOpen) {
onToggle();
}
onShadowChange(undefined);
// Return focus to parent button.
shadowButtonRef.current?.focus();
},
className: (0, _clsx.default)('block-editor-global-styles__shadow-editor__remove-button', {
'is-open': isOpen
}),
label: (0, _i18n.__)('Remove')
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
...toggleProps,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
justify: "flex-start",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
className: "block-editor-global-styles__toggle-icon",
icon: _icons.shadow,
size: 24
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
children: (0, _i18n.__)('Drop shadow')
})]
})
}), !!shadow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
size: "small",
icon: _icons.reset,
...removeButtonProps
})]
});
};
}
function useShadowPresets(settings) {
return (0, _element.useMemo)(() => {
var _settings$shadow$pres;
if (!settings?.shadow) {
return EMPTY_ARRAY;
}
const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
const {
default: defaultShadows,
theme: themeShadows,
custom: customShadows
} = (_settings$shadow$pres = settings?.shadow?.presets) !== null && _settings$shadow$pres !== void 0 ? _settings$shadow$pres : {};
const unsetShadow = {
name: (0, _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]);
}
//# sourceMappingURL=shadow-panel-components.js.map