@wordpress/block-editor
Version:
155 lines (153 loc) • 6.03 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-editor/src/components/font-sizes/with-font-sizes.js
var with_font_sizes_exports = {};
__export(with_font_sizes_exports, {
default: () => with_font_sizes_default
});
module.exports = __toCommonJS(with_font_sizes_exports);
var import_compose = require("@wordpress/compose");
var import_element = require("@wordpress/element");
var import_utils = require("./utils.cjs");
var import_use_settings = require("../use-settings/index.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var DEFAULT_FONT_SIZES = [];
var upperFirst = ([firstLetter, ...rest]) => firstLetter.toUpperCase() + rest.join("");
var with_font_sizes_default = (...fontSizeNames) => {
const fontSizeAttributeNames = fontSizeNames.reduce(
(fontSizeAttributeNamesAccumulator, fontSizeAttributeName) => {
fontSizeAttributeNamesAccumulator[fontSizeAttributeName] = `custom${upperFirst(fontSizeAttributeName)}`;
return fontSizeAttributeNamesAccumulator;
},
{}
);
return (0, import_compose.createHigherOrderComponent)(
(0, import_compose.compose)([
(0, import_compose.createHigherOrderComponent)(
(WrappedComponent) => (props) => {
const [fontSizes] = (0, import_use_settings.useSettings)("typography.fontSizes");
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
WrappedComponent,
{
...props,
fontSizes: fontSizes || DEFAULT_FONT_SIZES
}
);
},
"withFontSizes"
),
(WrappedComponent) => {
return class extends import_element.Component {
constructor(props) {
super(props);
this.setters = this.createSetters();
this.state = {};
}
createSetters() {
return Object.entries(fontSizeAttributeNames).reduce(
(settersAccumulator, [
fontSizeAttributeName,
customFontSizeAttributeName
]) => {
const upperFirstFontSizeAttributeName = upperFirst(fontSizeAttributeName);
settersAccumulator[`set${upperFirstFontSizeAttributeName}`] = this.createSetFontSize(
fontSizeAttributeName,
customFontSizeAttributeName
);
return settersAccumulator;
},
{}
);
}
createSetFontSize(fontSizeAttributeName, customFontSizeAttributeName) {
return (fontSizeValue) => {
const fontSizeObject = this.props.fontSizes?.find(
({ size }) => size === Number(fontSizeValue)
);
this.props.setAttributes({
[fontSizeAttributeName]: fontSizeObject && fontSizeObject.slug ? fontSizeObject.slug : void 0,
[customFontSizeAttributeName]: fontSizeObject && fontSizeObject.slug ? void 0 : fontSizeValue
});
};
}
static getDerivedStateFromProps({ attributes, fontSizes }, previousState) {
const didAttributesChange = (customFontSizeAttributeName, fontSizeAttributeName) => {
if (previousState[fontSizeAttributeName]) {
if (attributes[fontSizeAttributeName]) {
return attributes[fontSizeAttributeName] !== previousState[fontSizeAttributeName].slug;
}
return previousState[fontSizeAttributeName].size !== attributes[customFontSizeAttributeName];
}
return true;
};
if (!Object.values(fontSizeAttributeNames).some(
didAttributesChange
)) {
return null;
}
const newState = Object.entries(
fontSizeAttributeNames
).filter(
([key, value]) => didAttributesChange(value, key)
).reduce(
(newStateAccumulator, [
fontSizeAttributeName,
customFontSizeAttributeName
]) => {
const fontSizeAttributeValue = attributes[fontSizeAttributeName];
const fontSizeObject = (0, import_utils.getFontSize)(
fontSizes,
fontSizeAttributeValue,
attributes[customFontSizeAttributeName]
);
newStateAccumulator[fontSizeAttributeName] = {
...fontSizeObject,
class: (0, import_utils.getFontSizeClass)(
fontSizeAttributeValue
)
};
return newStateAccumulator;
},
{}
);
return {
...previousState,
...newState
};
}
render() {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
WrappedComponent,
{
...{
...this.props,
fontSizes: void 0,
...this.state,
...this.setters
}
}
);
}
};
}
]),
"withFontSizes"
);
};
//# sourceMappingURL=with-font-sizes.cjs.map