@wordpress/block-editor
Version:
206 lines (204 loc) • 6.08 kB
JavaScript
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __experimentalVStack as VStack, __experimentalHeading as Heading, __experimentalHStack as HStack, __experimentalDropdownContentWrapper as DropdownContentWrapper, Button, FlexItem, Dropdown, Composite, Tooltip } from '@wordpress/components';
import { useMemo, useRef } from '@wordpress/element';
import { shadow as shadowIcon, Icon, check, reset } from '@wordpress/icons';
/**
* External dependencies
*/
import clsx from 'clsx';
/**
* Shared reference to an empty array for cases where it is important to avoid
* returning a new array reference on every invocation.
*
* @type {Array}
*/
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const EMPTY_ARRAY = [];
export function ShadowPopoverContainer({
shadow,
onShadowChange,
settings
}) {
const shadows = useShadowPresets(settings);
return /*#__PURE__*/_jsx("div", {
className: "block-editor-global-styles__shadow-popover-container",
children: /*#__PURE__*/_jsxs(VStack, {
spacing: 4,
children: [/*#__PURE__*/_jsx(Heading, {
level: 5,
children: __('Drop shadow')
}), /*#__PURE__*/_jsx(ShadowPresets, {
presets: shadows,
activeShadow: shadow,
onSelect: onShadowChange
}), /*#__PURE__*/_jsx("div", {
className: "block-editor-global-styles__clear-shadow",
children: /*#__PURE__*/_jsx(Button, {
__next40pxDefaultSize: true,
variant: "tertiary",
onClick: () => onShadowChange(undefined),
disabled: !shadow,
accessibleWhenDisabled: true,
children: __('Clear')
})
})]
})
});
}
export function ShadowPresets({
presets,
activeShadow,
onSelect
}) {
return !presets ? null : /*#__PURE__*/_jsx(Composite, {
role: "listbox",
className: "block-editor-global-styles__shadow__list",
"aria-label": __('Drop shadows'),
children: presets.map(({
name,
slug,
shadow
}) => /*#__PURE__*/_jsx(ShadowIndicator, {
label: name,
isActive: shadow === activeShadow,
type: slug === 'unset' ? 'unset' : 'preset',
onSelect: () => onSelect(shadow === activeShadow ? undefined : shadow),
shadow: shadow
}, slug))
});
}
export function ShadowIndicator({
type,
label,
isActive,
onSelect,
shadow
}) {
return /*#__PURE__*/_jsx(Tooltip, {
text: label,
children: /*#__PURE__*/_jsx(Composite.Item, {
role: "option",
"aria-label": label,
"aria-selected": isActive,
className: clsx('block-editor-global-styles__shadow__item', {
'is-active': isActive
}),
render: /*#__PURE__*/_jsx("button", {
className: clsx('block-editor-global-styles__shadow-indicator', {
unset: type === 'unset'
}),
onClick: onSelect,
style: {
boxShadow: shadow
},
"aria-label": label,
children: isActive && /*#__PURE__*/_jsx(Icon, {
icon: check
})
})
})
});
}
export function ShadowPopover({
shadow,
onShadowChange,
settings
}) {
const popoverProps = {
placement: 'left-start',
offset: 36,
shift: true
};
return /*#__PURE__*/_jsx(Dropdown, {
popoverProps: popoverProps,
className: "block-editor-global-styles__shadow-dropdown",
renderToggle: renderShadowToggle(shadow, onShadowChange),
renderContent: () => /*#__PURE__*/_jsx(DropdownContentWrapper, {
paddingSize: "medium",
children: /*#__PURE__*/_jsx(ShadowPopoverContainer, {
shadow: shadow,
onShadowChange: onShadowChange,
settings: settings
})
})
});
}
function renderShadowToggle(shadow, onShadowChange) {
return ({
onToggle,
isOpen
}) => {
const shadowButtonRef = useRef(undefined);
const toggleProps = {
onClick: onToggle,
className: clsx('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: clsx('block-editor-global-styles__shadow-editor__remove-button', {
'is-open': isOpen
}),
label: __('Remove')
};
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Button, {
__next40pxDefaultSize: true,
...toggleProps,
children: /*#__PURE__*/_jsxs(HStack, {
justify: "flex-start",
children: [/*#__PURE__*/_jsx(Icon, {
className: "block-editor-global-styles__toggle-icon",
icon: shadowIcon,
size: 24
}), /*#__PURE__*/_jsx(FlexItem, {
children: __('Drop shadow')
})]
})
}), !!shadow && /*#__PURE__*/_jsx(Button, {
__next40pxDefaultSize: true,
size: "small",
icon: reset,
...removeButtonProps
})]
});
};
}
export function useShadowPresets(settings) {
return 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: __('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