@wordpress/components
Version:
UI components for WordPress.
203 lines (197 loc) • 9.16 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.FontSizePicker = void 0;
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _button = require("../button");
var _rangeControl = _interopRequireDefault(require("../range-control"));
var _flex = require("../flex");
var _unitControl = _interopRequireWildcard(require("../unit-control"));
var _styles = require("./styles");
var _spacer = require("../spacer");
var _fontSizePickerSelect = _interopRequireDefault(require("./font-size-picker-select"));
var _fontSizePickerToggleGroup = _interopRequireDefault(require("./font-size-picker-toggle-group"));
var _deprecated36pxSize = require("../utils/deprecated-36px-size");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh'];
const MAX_TOGGLE_GROUP_SIZES = 5;
const UnforwardedFontSizePicker = (props, ref) => {
const {
__next40pxDefaultSize = false,
fallbackFontSize,
fontSizes = [],
disableCustomFontSizes = false,
onChange,
size = 'default',
units: unitsProp = DEFAULT_UNITS,
value,
withSlider = false,
withReset = true
} = props;
const labelId = (0, _compose.useInstanceId)(UnforwardedFontSizePicker, 'font-size-picker-label');
const units = (0, _unitControl.useCustomUnits)({
availableUnits: unitsProp
});
const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value);
const isCustomValue = !!value && !selectedFontSize;
// Initially request a custom picker if the value is not from the predef list.
const [userRequestedCustom, setUserRequestedCustom] = (0, _element.useState)(isCustomValue);
let currentPickerType;
if (!disableCustomFontSizes && userRequestedCustom) {
// While showing the custom value picker, switch back to predef only if
// `disableCustomFontSizes` is set to `true`.
currentPickerType = 'custom';
} else {
currentPickerType = fontSizes.length > MAX_TOGGLE_GROUP_SIZES ? 'select' : 'togglegroup';
}
if (fontSizes.length === 0 && disableCustomFontSizes) {
return null;
}
// If neither the value or first font size is a string, then FontSizePicker
// operates in a legacy "unitless" mode where UnitControl can only be used
// to select px values and onChange() is always called with number values.
const hasUnits = typeof value === 'string' || typeof fontSizes[0]?.size === 'string';
const [valueQuantity, valueUnit] = (0, _unitControl.parseQuantityAndUnitFromRawValue)(value, units);
const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit);
const isDisabled = value === undefined;
(0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
componentName: 'FontSizePicker',
__next40pxDefaultSize,
size
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
ref: ref,
className: "components-font-size-picker"
// This Container component renders a fieldset element that needs to be labeled.
,
"aria-labelledby": labelId,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Header, {
className: "components-font-size-picker__header",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HeaderLabel, {
id: labelId,
children: (0, _i18n.__)('Font size')
}), !disableCustomFontSizes && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HeaderToggle, {
label: currentPickerType === 'custom' ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
icon: _icons.settings,
onClick: () => setUserRequestedCustom(!userRequestedCustom),
isPressed: currentPickerType === 'custom',
size: "small"
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [currentPickerType === 'select' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSizePickerSelect.default, {
__next40pxDefaultSize: __next40pxDefaultSize,
fontSizes: fontSizes,
value: value,
disableCustomFontSizes: disableCustomFontSizes,
size: size,
onChange: newValue => {
if (newValue === undefined) {
onChange?.(undefined);
} else {
onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
}
},
onSelectCustom: () => setUserRequestedCustom(true)
}), currentPickerType === 'togglegroup' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSizePickerToggleGroup.default, {
fontSizes: fontSizes,
value: value,
__next40pxDefaultSize: __next40pxDefaultSize,
size: size,
onChange: newValue => {
if (newValue === undefined) {
onChange?.(undefined);
} else {
onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
}
}
}), currentPickerType === 'custom' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_flex.Flex, {
className: "components-font-size-picker__custom-size-control",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_unitControl.default, {
__next40pxDefaultSize: __next40pxDefaultSize,
__shouldNotWarnDeprecated36pxSize: true,
label: (0, _i18n.__)('Font size'),
labelPosition: "top",
hideLabelFromVision: true,
value: value,
onChange: newValue => {
setUserRequestedCustom(true);
if (newValue === undefined) {
onChange?.(undefined);
} else {
onChange?.(hasUnits ? newValue : parseInt(newValue, 10));
}
},
size: size,
units: hasUnits ? units : [],
min: 0
})
}), withSlider && /*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexItem, {
isBlock: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
marginX: 2,
marginBottom: 0,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeControl.default, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: __next40pxDefaultSize,
__shouldNotWarnDeprecated36pxSize: true,
className: "components-font-size-picker__custom-input",
label: (0, _i18n.__)('Font size'),
hideLabelFromVision: true,
value: valueQuantity,
initialPosition: fallbackFontSize,
withInputField: false,
onChange: newValue => {
setUserRequestedCustom(true);
if (newValue === undefined) {
onChange?.(undefined);
} 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__*/(0, _jsxRuntime.jsx)(_flex.FlexItem, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
disabled: isDisabled,
accessibleWhenDisabled: true,
onClick: () => {
onChange?.(undefined);
},
variant: "secondary",
__next40pxDefaultSize: true,
size: size === '__unstable-large' || props.__next40pxDefaultSize ? 'default' : 'small',
children: (0, _i18n.__)('Reset')
})
})]
})]
})]
});
};
const FontSizePicker = exports.FontSizePicker = (0, _element.forwardRef)(UnforwardedFontSizePicker);
var _default = exports.default = FontSizePicker;
//# sourceMappingURL=index.js.map