@wordpress/components
Version:
UI components for WordPress.
190 lines (189 loc) • 7.5 kB
JavaScript
// packages/components/src/font-size-picker/index.tsx
import { __ } from "@wordpress/i18n";
import { settings } from "@wordpress/icons";
import { useState, forwardRef } from "@wordpress/element";
import { useInstanceId } from "@wordpress/compose";
import { Button } from "../button";
import RangeControl from "../range-control";
import { Flex, FlexItem } from "../flex";
import { default as UnitControl, parseQuantityAndUnitFromRawValue, useCustomUnits } from "../unit-control";
import { Container, Header, HeaderLabel, HeaderToggle } from "./styles";
import { Spacer } from "../spacer";
import FontSizePickerSelect from "./font-size-picker-select";
import FontSizePickerToggleGroup from "./font-size-picker-toggle-group";
import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var DEFAULT_UNITS = ["px", "em", "rem", "vw", "vh"];
var MAX_TOGGLE_GROUP_SIZES = 5;
var UnforwardedFontSizePicker = (props, ref) => {
const {
__next40pxDefaultSize = false,
fallbackFontSize,
fontSizes = [],
disableCustomFontSizes = false,
onChange,
size = "default",
units: unitsProp = DEFAULT_UNITS,
value,
valueMode = "literal",
withSlider = false,
withReset = true
} = props;
const labelId = useInstanceId(UnforwardedFontSizePicker, "font-size-picker-label");
const units = useCustomUnits({
availableUnits: unitsProp
});
const selectedFontSize = (() => {
if (!value) {
return void 0;
}
if (valueMode === "slug") {
return fontSizes.find((fontSize) => fontSize.slug === value);
}
return fontSizes.find((fontSize) => fontSize.size === value);
})();
const isCustomValue = !!value && !selectedFontSize;
const [userRequestedCustom, setUserRequestedCustom] = useState(isCustomValue);
const resolvedValueForControls = valueMode === "slug" ? selectedFontSize?.size : value;
let currentPickerType;
if (!disableCustomFontSizes && userRequestedCustom) {
currentPickerType = "custom";
} else {
currentPickerType = fontSizes.length > MAX_TOGGLE_GROUP_SIZES ? "select" : "togglegroup";
}
if (fontSizes.length === 0 && disableCustomFontSizes) {
return null;
}
const hasUnits = typeof resolvedValueForControls === "string" || typeof fontSizes[0]?.size === "string";
const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(resolvedValueForControls, units);
const isValueUnitRelative = !!valueUnit && ["em", "rem", "vw", "vh"].includes(valueUnit);
const isDisabled = value === void 0;
maybeWarnDeprecated36pxSize({
componentName: "FontSizePicker",
__next40pxDefaultSize,
size
});
return /* @__PURE__ */ _jsxs(Container, {
ref,
className: "components-font-size-picker",
"aria-labelledby": labelId,
children: [/* @__PURE__ */ _jsx(Spacer, {
children: /* @__PURE__ */ _jsxs(Header, {
className: "components-font-size-picker__header",
children: [/* @__PURE__ */ _jsx(HeaderLabel, {
id: labelId,
children: __("Font size")
}), !disableCustomFontSizes && /* @__PURE__ */ _jsx(HeaderToggle, {
label: currentPickerType === "custom" ? __("Use size preset") : __("Set custom size"),
icon: settings,
onClick: () => setUserRequestedCustom(!userRequestedCustom),
isPressed: currentPickerType === "custom",
size: "small"
})]
})
}), /* @__PURE__ */ _jsxs("div", {
children: [currentPickerType === "select" && /* @__PURE__ */ _jsx(FontSizePickerSelect, {
__next40pxDefaultSize,
fontSizes,
value,
valueMode,
disableCustomFontSizes,
size,
onChange: (newValue, selectedItem) => {
if (newValue === void 0) {
onChange?.(void 0, selectedItem);
} else {
onChange?.(hasUnits ? newValue : Number(newValue), selectedItem);
}
},
onSelectCustom: () => setUserRequestedCustom(true)
}), currentPickerType === "togglegroup" && /* @__PURE__ */ _jsx(FontSizePickerToggleGroup, {
fontSizes,
value,
valueMode,
__next40pxDefaultSize,
size,
onChange: (newValue, selectedItem) => {
if (newValue === void 0) {
onChange?.(void 0, selectedItem);
} else {
onChange?.(hasUnits ? newValue : Number(newValue), selectedItem);
}
}
}), currentPickerType === "custom" && /* @__PURE__ */ _jsxs(Flex, {
className: "components-font-size-picker__custom-size-control",
children: [/* @__PURE__ */ _jsx(FlexItem, {
isBlock: true,
children: /* @__PURE__ */ _jsx(UnitControl, {
__next40pxDefaultSize,
__shouldNotWarnDeprecated36pxSize: true,
label: __("Font size"),
labelPosition: "top",
hideLabelFromVision: true,
value: hasUnits ? `${valueQuantity !== null && valueQuantity !== void 0 ? valueQuantity : ""}${valueUnit !== null && valueUnit !== void 0 ? valueUnit : ""}` : resolvedValueForControls,
onChange: (newValue) => {
setUserRequestedCustom(true);
if (newValue === void 0 || newValue === "") {
onChange?.(void 0);
} else {
onChange?.(hasUnits ? newValue : parseInt(newValue, 10));
}
},
size,
units: hasUnits ? units : [],
min: 0
})
}), withSlider && /* @__PURE__ */ _jsx(FlexItem, {
isBlock: true,
children: /* @__PURE__ */ _jsx(Spacer, {
marginX: 2,
marginBottom: 0,
children: /* @__PURE__ */ _jsx(RangeControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize,
__shouldNotWarnDeprecated36pxSize: true,
className: "components-font-size-picker__custom-input",
label: __("Font size"),
hideLabelFromVision: true,
value: valueQuantity,
initialPosition: fallbackFontSize,
withInputField: false,
onChange: (newValue) => {
setUserRequestedCustom(true);
if (newValue === void 0) {
onChange?.(void 0);
} else if (hasUnits) {
onChange?.(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : "px"));
} else {
onChange?.(newValue);
}
},
min: 0,
max: isValueUnitRelative ? 10 : 100,
step: isValueUnitRelative ? 0.1 : 1
})
})
}), withReset && /* @__PURE__ */ _jsx(FlexItem, {
children: /* @__PURE__ */ _jsx(Button, {
disabled: isDisabled,
accessibleWhenDisabled: true,
onClick: () => {
onChange?.(void 0);
},
variant: "secondary",
__next40pxDefaultSize: true,
size: size === "__unstable-large" || props.__next40pxDefaultSize ? "default" : "small",
children: __("Reset")
})
})]
})]
})]
});
};
var FontSizePicker = forwardRef(UnforwardedFontSizePicker);
var font_size_picker_default = FontSizePicker;
export {
FontSizePicker,
font_size_picker_default as default
};
//# sourceMappingURL=index.js.map