@wordpress/components
Version:
UI components for WordPress.
87 lines (86 loc) • 2.52 kB
JavaScript
// packages/components/src/dimension-control/index.tsx
import clsx from "clsx";
import { __ } from "@wordpress/i18n";
import Icon from "../icon";
import SelectControl from "../select-control";
import sizesTable, { findSizeBySlug } from "./sizes";
import { ContextSystemProvider } from "../context";
import deprecated from "@wordpress/deprecated";
import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var CONTEXT_VALUE = {
BaseControl: {
// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
// via the context system to override the value set by SelectControl.
_overrides: {
__associatedWPComponentName: "DimensionControl"
}
}
};
function DimensionControl(props) {
const {
__next40pxDefaultSize = false,
__nextHasNoMarginBottom = false,
label,
value,
sizes = sizesTable,
icon,
onChange,
className = ""
} = props;
deprecated("wp.components.DimensionControl", {
since: "6.7",
version: "7.0"
});
maybeWarnDeprecated36pxSize({
componentName: "DimensionControl",
__next40pxDefaultSize,
size: void 0
});
const onChangeSpacingSize = (val) => {
const theSize = findSizeBySlug(sizes, val);
if (!theSize || value === theSize.slug) {
onChange?.(void 0);
} else if (typeof onChange === "function") {
onChange(theSize.slug);
}
};
const formatSizesAsOptions = (theSizes) => {
const options = theSizes.map(({
name,
slug
}) => ({
label: name,
value: slug
}));
return [{
label: __("Default"),
value: ""
}, ...options];
};
const selectLabel = /* @__PURE__ */ _jsxs(_Fragment, {
children: [icon && /* @__PURE__ */ _jsx(Icon, {
icon
}), label]
});
return /* @__PURE__ */ _jsx(ContextSystemProvider, {
value: CONTEXT_VALUE,
children: /* @__PURE__ */ _jsx(SelectControl, {
__next40pxDefaultSize,
__shouldNotWarnDeprecated36pxSize: true,
__nextHasNoMarginBottom,
className: clsx(className, "block-editor-dimension-control"),
label: selectLabel,
hideLabelFromVision: false,
value,
onChange: onChangeSpacingSize,
options: formatSizesAsOptions(sizes)
})
});
}
var dimension_control_default = DimensionControl;
export {
DimensionControl,
dimension_control_default as default
};
//# sourceMappingURL=index.js.map