@gechiui/block-editor
Version:
244 lines (199 loc) • 8.14 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BorderColorEdit = BorderColorEdit;
exports.withBorderColorPaletteStyles = void 0;
var _element = require("@gechiui/element");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _hooks = require("@gechiui/hooks");
var _i18n = require("@gechiui/i18n");
var _compose = require("@gechiui/compose");
var _dropdown = _interopRequireDefault(require("../components/colors-gradients/dropdown"));
var _useMultipleOriginColorsAndGradients = _interopRequireDefault(require("../components/colors-gradients/use-multiple-origin-colors-and-gradients"));
var _colors = require("../components/colors");
var _useSetting = _interopRequireDefault(require("../components/use-setting"));
var _border = require("./border");
var _utils = require("./utils");
/**
* External dependencies
*/
/**
* GeChiUI dependencies
*/
/**
* Internal dependencies
*/
// Defining empty array here instead of inline avoids unnecessary re-renders of
// color control.
const EMPTY_ARRAY = [];
/**
* Inspector control panel containing the border color related configuration.
*
* There is deliberate overlap between the colors and borders block supports
* relating to border color. It can be argued the border color controls could
* be included within either, or both, the colors and borders panels in the
* inspector controls. If they share the same block attributes it should not
* matter.
*
* @param {Object} props Block properties.
*
* @return {GCElement} Border color edit element.
*/
function BorderColorEdit(props) {
const {
attributes: {
borderColor,
style
},
setAttributes
} = props;
const colorGradientSettings = (0, _useMultipleOriginColorsAndGradients.default)();
const availableColors = colorGradientSettings.colors.reduce((colors, origin) => colors.concat(origin.colors), []);
const [colorValue, setColorValue] = (0, _element.useState)(() => {
var _getColorObjectByAttr, _style$border;
return (_getColorObjectByAttr = (0, _colors.getColorObjectByAttributeValues)(availableColors, borderColor, style === null || style === void 0 ? void 0 : (_style$border = style.border) === null || _style$border === void 0 ? void 0 : _style$border.color)) === null || _getColorObjectByAttr === void 0 ? void 0 : _getColorObjectByAttr.color;
});
const onChangeColor = value => {
setColorValue(value);
const colorObject = (0, _colors.getColorObjectByColorValue)(availableColors, value);
const newStyle = { ...style,
border: { ...(style === null || style === void 0 ? void 0 : style.border),
color: colorObject !== null && colorObject !== void 0 && colorObject.slug ? undefined : value
}
}; // If empty slug, ensure undefined to remove attribute.
const newNamedColor = colorObject !== null && colorObject !== void 0 && colorObject.slug ? colorObject.slug : undefined;
setAttributes({
style: (0, _utils.cleanEmptyObject)(newStyle),
borderColor: newNamedColor
});
};
const settings = [{
label: (0, _i18n.__)('颜色'),
onColorChange: onChangeColor,
colorValue,
clearable: false
}];
return (0, _element.createElement)(_dropdown.default, (0, _extends2.default)({
settings: settings,
disableCustomColors: true,
disableCustomGradients: true,
__experimentalHasMultipleOrigins: true,
__experimentalIsRenderedInSidebar: true,
enableAlpha: true
}, colorGradientSettings));
}
/**
* Filters registered block settings, extending attributes to include
* `borderColor` if needed.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Updated block settings.
*/
function addAttributes(settings) {
if (!(0, _border.hasBorderSupport)(settings, 'color')) {
return settings;
} // Allow blocks to specify default value if needed.
if (settings.attributes.borderColor) {
return settings;
} // Add new borderColor attribute to block settings.
return { ...settings,
attributes: { ...settings.attributes,
borderColor: {
type: 'string'
}
}
};
}
/**
* Override props assigned to save component to inject border color.
*
* @param {Object} props Additional props applied to save element.
* @param {Object} blockType Block type definition.
* @param {Object} attributes Block's attributes.
*
* @return {Object} Filtered props to apply to save element.
*/
function addSaveProps(props, blockType, attributes) {
var _style$border2;
if (!(0, _border.hasBorderSupport)(blockType, 'color') || (0, _border.shouldSkipSerialization)(blockType)) {
return props;
}
const {
borderColor,
style
} = attributes;
const borderColorClass = (0, _colors.getColorClassName)('border-color', borderColor);
const newClassName = (0, _classnames.default)(props.className, {
'has-border-color': borderColor || (style === null || style === void 0 ? void 0 : (_style$border2 = style.border) === null || _style$border2 === void 0 ? void 0 : _style$border2.color),
[borderColorClass]: !!borderColorClass
}); // If we are clearing the last of the previous classes in `className`
// set it to `undefined` to avoid rendering empty DOM attributes.
props.className = newClassName ? newClassName : undefined;
return props;
}
/**
* Filters the registered block settings to apply border color styles and
* classnames to the block edit wrapper.
*
* @param {Object} settings Original block settings.
*
* @return {Object} Filtered block settings.
*/
function addEditProps(settings) {
if (!(0, _border.hasBorderSupport)(settings, 'color') || (0, _border.shouldSkipSerialization)(settings)) {
return settings;
}
const existingGetEditWrapperProps = settings.getEditWrapperProps;
settings.getEditWrapperProps = attributes => {
let props = {};
if (existingGetEditWrapperProps) {
props = existingGetEditWrapperProps(attributes);
}
return addSaveProps(props, settings, attributes);
};
return settings;
}
/**
* This adds inline styles for color palette colors.
* Ideally, this is not needed and themes should load their palettes on the editor.
*
* @param {Function} BlockListBlock Original component.
*
* @return {Function} Wrapped component.
*/
const withBorderColorPaletteStyles = (0, _compose.createHigherOrderComponent)(BlockListBlock => props => {
var _getColorObjectByAttr2, _props$wrapperProps;
const {
name,
attributes
} = props;
const {
borderColor
} = attributes;
const colors = (0, _useSetting.default)('color.palette') || EMPTY_ARRAY;
if (!(0, _border.hasBorderSupport)(name, 'color') || (0, _border.shouldSkipSerialization)(name)) {
return (0, _element.createElement)(BlockListBlock, props);
}
const extraStyles = {
borderColor: borderColor ? (_getColorObjectByAttr2 = (0, _colors.getColorObjectByAttributeValues)(colors, borderColor)) === null || _getColorObjectByAttr2 === void 0 ? void 0 : _getColorObjectByAttr2.color : undefined
};
let wrapperProps = props.wrapperProps;
wrapperProps = { ...props.wrapperProps,
style: { ...extraStyles,
...((_props$wrapperProps = props.wrapperProps) === null || _props$wrapperProps === void 0 ? void 0 : _props$wrapperProps.style)
}
};
return (0, _element.createElement)(BlockListBlock, (0, _extends2.default)({}, props, {
wrapperProps: wrapperProps
}));
});
exports.withBorderColorPaletteStyles = withBorderColorPaletteStyles;
(0, _hooks.addFilter)('blocks.registerBlockType', 'core/border/addAttributes', addAttributes);
(0, _hooks.addFilter)('blocks.getSaveContent.extraProps', 'core/border/addSaveProps', addSaveProps);
(0, _hooks.addFilter)('blocks.registerBlockType', 'core/border/addEditProps', addEditProps);
(0, _hooks.addFilter)('editor.BlockListBlock', 'core/border/with-border-color-palette-styles', withBorderColorPaletteStyles);
//# sourceMappingURL=border-color.js.map