@wordpress/block-editor
Version:
212 lines (205 loc) • 6.59 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ColorGradientSettingsDropdown;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _control = _interopRequireDefault(require("./control"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Internal dependencies
*/
// When the `ColorGradientSettingsDropdown` controls are being rendered to a
// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
const WithToolsPanelItem = ({
setting,
children,
panelId,
...props
}) => {
const clearValue = () => {
if (setting.colorValue) {
setting.onColorChange();
} else if (setting.gradientValue) {
setting.onGradientChange();
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => {
return !!setting.colorValue || !!setting.gradientValue;
},
label: setting.label,
onDeselect: clearValue,
isShownByDefault: setting.isShownByDefault !== undefined ? setting.isShownByDefault : true,
...props,
className: "block-editor-tools-panel-color-gradient-settings__item",
panelId: panelId
// Pass resetAllFilter if supplied due to rendering via SlotFill
// into parent ToolsPanel.
,
resetAllFilter: setting.resetAllFilter,
children: children
});
};
const LabeledColorIndicator = ({
colorValue,
label
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
justify: "flex-start",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorIndicator, {
className: "block-editor-panel-color-gradient-settings__color-indicator",
colorValue: colorValue
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
className: "block-editor-panel-color-gradient-settings__color-name",
title: label,
children: label
})]
});
// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
// or as a `Button` if it isn't e.g. the controls are being rendered in
// a `ToolsPanel`.
const renderToggle = settings => ({
onToggle,
isOpen
}) => {
const {
clearable,
colorValue,
gradientValue,
onColorChange,
onGradientChange,
label
} = settings;
const colorButtonRef = (0, _element.useRef)(undefined);
const toggleProps = {
onClick: onToggle,
className: (0, _clsx.default)('block-editor-panel-color-gradient-settings__dropdown', {
'is-open': isOpen
}),
'aria-expanded': isOpen,
ref: colorButtonRef
};
const clearValue = () => {
if (colorValue) {
onColorChange();
} else if (gradientValue) {
onGradientChange();
}
};
const value = colorValue !== null && colorValue !== void 0 ? colorValue : gradientValue;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
...toggleProps,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(LabeledColorIndicator, {
colorValue: value,
label: label
})
}), clearable && value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
label: (0, _i18n.__)('Reset'),
className: "block-editor-panel-color-gradient-settings__reset",
size: "small",
icon: _icons.reset,
onClick: () => {
clearValue();
if (isOpen) {
onToggle();
}
// Return focus to parent button
colorButtonRef.current?.focus();
}
})]
});
};
// Renders a collection of color controls as dropdowns. Depending upon the
// context in which these dropdowns are being rendered, they may be wrapped
// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,
// the may be individually wrapped in a `ToolsPanelItem` with the toggle as
// a regular `Button`.
//
// For more context see: https://github.com/WordPress/gutenberg/pull/40084
function ColorGradientSettingsDropdown({
colors,
disableCustomColors,
disableCustomGradients,
enableAlpha,
gradients,
settings,
__experimentalIsRenderedInSidebar,
...props
}) {
let popoverProps;
if (__experimentalIsRenderedInSidebar) {
popoverProps = {
placement: 'left-start',
offset: 36,
shift: true
};
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: settings.map((setting, index) => {
const controlProps = {
clearable: false,
colorValue: setting.colorValue,
colors,
disableCustomColors,
disableCustomGradients,
enableAlpha,
gradientValue: setting.gradientValue,
gradients,
label: setting.label,
onColorChange: setting.onColorChange,
onGradientChange: setting.onGradientChange,
showTitle: false,
__experimentalIsRenderedInSidebar,
...setting
};
const toggleSettings = {
clearable: setting.clearable,
label: setting.label,
colorValue: setting.colorValue,
gradientValue: setting.gradientValue,
onColorChange: setting.onColorChange,
onGradientChange: setting.onGradientChange
};
return setting &&
/*#__PURE__*/
// If not in an `ItemGroup` wrap the dropdown in a
// `ToolsPanelItem`
(0, _jsxRuntime.jsx)(WithToolsPanelItem, {
setting: setting,
...props,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
popoverProps: popoverProps,
className: "block-editor-tools-panel-color-gradient-settings__dropdown",
renderToggle: renderToggle(toggleSettings),
renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalDropdownContentWrapper, {
paddingSize: "none",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-panel-color-gradient-settings__dropdown-content",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_control.default, {
...controlProps
})
})
})
})
}, index);
})
});
}
//# sourceMappingURL=dropdown.js.map