@wordpress/components
Version:
UI components for WordPress.
61 lines (60 loc) • 1.98 kB
JavaScript
// packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
import { __ } from "@wordpress/i18n";
import { ToggleGroupControl, ToggleGroupControlOption } from "../toggle-group-control";
import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from "./constants";
import { jsx as _jsx } from "react/jsx-runtime";
var FontSizePickerToggleGroup = (props) => {
const {
fontSizes,
value,
valueMode = "literal",
__next40pxDefaultSize,
size,
onChange
} = props;
const currentValue = (() => {
if (!value) {
return void 0;
}
if (valueMode === "slug") {
return String(value);
}
const matchingFontSizes = fontSizes.filter((fontSize) => fontSize.size === value);
if (matchingFontSizes.length > 1) {
return void 0;
}
const fontSizeBySize = fontSizes.find((fontSize) => fontSize.size === value);
return fontSizeBySize?.slug;
})();
return /* @__PURE__ */ _jsx(ToggleGroupControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize,
__shouldNotWarnDeprecated36pxSize: true,
label: __("Font size"),
hideLabelFromVision: true,
value: currentValue,
onChange: (newSlug) => {
if (newSlug === void 0) {
onChange(void 0);
} else {
const selectedFontSize = fontSizes.find((fontSize) => fontSize.slug === String(newSlug));
if (selectedFontSize) {
onChange(selectedFontSize.size, selectedFontSize);
}
}
},
isBlock: true,
size,
children: fontSizes.map((fontSize, index) => /* @__PURE__ */ _jsx(ToggleGroupControlOption, {
value: fontSize.slug,
label: T_SHIRT_ABBREVIATIONS[index],
"aria-label": fontSize.name || T_SHIRT_NAMES[index],
showTooltip: true
}, fontSize.slug))
});
};
var font_size_picker_toggle_group_default = FontSizePickerToggleGroup;
export {
font_size_picker_toggle_group_default as default
};
//# sourceMappingURL=font-size-picker-toggle-group.js.map