@wordpress/components
Version:
UI components for WordPress.
71 lines (70 loc) • 2.21 kB
JavaScript
// packages/components/src/font-size-picker/font-size-picker-select.tsx
import { __, sprintf } from "@wordpress/i18n";
import { useMemo } from "@wordpress/element";
import { generateFontSizeHint } from "./utils";
import { StyledCustomSelectControl } from "./styles";
import { jsx as _jsx } from "react/jsx-runtime";
var DEFAULT_OPTION = {
key: "default",
name: __("Default"),
value: void 0
};
var FontSizePickerSelect = (props) => {
const {
__next40pxDefaultSize,
fontSizes,
value,
size,
valueMode = "literal",
onChange
} = props;
const options = [DEFAULT_OPTION, ...fontSizes.map((fontSize) => {
const hint = generateFontSizeHint(fontSize);
return {
key: fontSize.slug,
name: fontSize.name || fontSize.slug,
value: fontSize.size,
hint
};
})];
const selectedOption = useMemo(() => {
var _options$find;
if (value === void 0) {
return DEFAULT_OPTION;
}
if (valueMode === "slug") {
const optionBySlug = options.find((option) => option.key === value);
if (optionBySlug) {
return optionBySlug;
}
}
return (_options$find = options.find((option) => option.value === value)) !== null && _options$find !== void 0 ? _options$find : DEFAULT_OPTION;
}, [value, valueMode, options]);
return /* @__PURE__ */ _jsx(StyledCustomSelectControl, {
__next40pxDefaultSize,
__shouldNotWarnDeprecated36pxSize: true,
className: "components-font-size-picker__select",
label: __("Font size"),
hideLabelFromVision: true,
describedBy: sprintf(
// translators: %s: Currently selected font size.
__("Currently selected font size: %s"),
selectedOption.name
),
options,
value: selectedOption,
showSelectedHint: true,
onChange: ({
selectedItem
}) => {
const matchingFontSize = selectedItem.key === "default" ? void 0 : fontSizes.find((fontSize) => fontSize.slug === selectedItem.key);
onChange(selectedItem.value, matchingFontSize);
},
size
});
};
var font_size_picker_select_default = FontSizePickerSelect;
export {
font_size_picker_select_default as default
};
//# sourceMappingURL=font-size-picker-select.js.map