@wordpress/components
Version:
UI components for WordPress.
227 lines (192 loc) • 9.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.FontSizePicker = void 0;
var _element = require("@wordpress/element");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _button = _interopRequireDefault(require("../button"));
var _rangeControl = _interopRequireDefault(require("../range-control"));
var _flex = require("../flex");
var _unitControl = _interopRequireWildcard(require("../unit-control"));
var _visuallyHidden = require("../visually-hidden");
var _utils = require("./utils");
var _hStack = require("../h-stack");
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 _constants = require("./constants");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const UnforwardedFontSizePicker = (props, ref) => {
var _fontSizes$;
const {
/** Start opting into the new margin-free styles that will become the default in a future version. */
__nextHasNoMarginBottom = false,
fallbackFontSize,
fontSizes = [],
disableCustomFontSizes = false,
onChange,
size = 'default',
units: unitsProp,
value,
withSlider = false,
withReset = true
} = props;
if (!__nextHasNoMarginBottom) {
(0, _deprecated.default)('Bottom margin styles for wp.components.FontSizePicker', {
since: '6.1',
version: '6.4',
hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.'
});
}
const units = (0, _unitControl.useCustomUnits)({
availableUnits: unitsProp || ['px', 'em', 'rem']
});
const shouldUseSelectControl = fontSizes.length > 5;
const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value);
const isCustomValue = !!value && !selectedFontSize;
const [showCustomValueControl, setShowCustomValueControl] = (0, _element.useState)(!disableCustomFontSizes && isCustomValue);
const headerHint = (0, _element.useMemo)(() => {
if (showCustomValueControl) {
return (0, _i18n.__)('Custom');
}
if (!shouldUseSelectControl) {
if (selectedFontSize) {
return selectedFontSize.name || _constants.T_SHIRT_NAMES[fontSizes.indexOf(selectedFontSize)];
}
return '';
}
const commonUnit = (0, _utils.getCommonSizeUnit)(fontSizes);
if (commonUnit) {
return `(${commonUnit})`;
}
return '';
}, [showCustomValueControl, shouldUseSelectControl, selectedFontSize, fontSizes]);
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$ = fontSizes[0]) === null || _fontSizes$ === void 0 ? void 0 : _fontSizes$.size) === 'string';
const [valueQuantity, valueUnit] = (0, _unitControl.parseQuantityAndUnitFromRawValue)(value, units);
const isValueUnitRelative = !!valueUnit && ['em', 'rem'].includes(valueUnit);
return (0, _element.createElement)(_styles.Container, {
ref: ref,
className: "components-font-size-picker"
}, (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
as: "legend"
}, (0, _i18n.__)('Font size')), (0, _element.createElement)(_spacer.Spacer, null, (0, _element.createElement)(_hStack.HStack, {
className: "components-font-size-picker__header"
}, (0, _element.createElement)(_styles.HeaderLabel, {
"aria-label": `${(0, _i18n.__)('Size')} ${headerHint || ''}`
}, (0, _i18n.__)('Size'), headerHint && (0, _element.createElement)(_styles.HeaderHint, {
className: "components-font-size-picker__header__hint"
}, headerHint)), !disableCustomFontSizes && (0, _element.createElement)(_button.default, {
label: showCustomValueControl ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
icon: _icons.settings,
onClick: () => {
setShowCustomValueControl(!showCustomValueControl);
},
isPressed: showCustomValueControl,
isSmall: true
}))), (0, _element.createElement)(_styles.Controls, {
className: "components-font-size-picker__controls",
__nextHasNoMarginBottom: __nextHasNoMarginBottom
}, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_fontSizePickerSelect.default, {
fontSizes: fontSizes,
value: value,
disableCustomFontSizes: disableCustomFontSizes,
size: size,
onChange: newValue => {
if (newValue === undefined) {
onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
} else {
onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
}
},
onSelectCustom: () => setShowCustomValueControl(true)
}), !shouldUseSelectControl && !showCustomValueControl && (0, _element.createElement)(_fontSizePickerToggleGroup.default, {
fontSizes: fontSizes,
value: value,
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
size: size,
onChange: newValue => {
if (newValue === undefined) {
onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
} else {
onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue));
}
}
}), !disableCustomFontSizes && showCustomValueControl && (0, _element.createElement)(_flex.Flex, {
className: "components-font-size-picker__custom-size-control"
}, (0, _element.createElement)(_flex.FlexItem, {
isBlock: true
}, (0, _element.createElement)(_unitControl.default, {
label: (0, _i18n.__)('Custom'),
labelPosition: "top",
hideLabelFromVision: true,
value: value,
onChange: newValue => {
if (newValue === undefined) {
onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
} else {
onChange === null || onChange === void 0 ? void 0 : onChange(hasUnits ? newValue : parseInt(newValue, 10));
}
},
size: size,
units: hasUnits ? units : [],
min: 0
})), withSlider && (0, _element.createElement)(_flex.FlexItem, {
isBlock: true
}, (0, _element.createElement)(_spacer.Spacer, {
marginX: 2,
marginBottom: 0
}, (0, _element.createElement)(_rangeControl.default, {
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
className: "components-font-size-picker__custom-input",
label: (0, _i18n.__)('Custom Size'),
hideLabelFromVision: true,
value: valueQuantity,
initialPosition: fallbackFontSize,
withInputField: false,
onChange: newValue => {
if (newValue === undefined) {
onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
} else if (hasUnits) {
onChange === null || onChange === void 0 ? void 0 : onChange(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : 'px'));
} else {
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
}
},
min: 0,
max: isValueUnitRelative ? 10 : 100,
step: isValueUnitRelative ? 0.1 : 1
}))), withReset && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_styles.ResetButton, {
disabled: value === undefined,
onClick: () => {
onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
},
isSmall: true,
variant: "secondary",
size: size
}, (0, _i18n.__)('Reset'))))));
};
const FontSizePicker = (0, _element.forwardRef)(UnforwardedFontSizePicker);
exports.FontSizePicker = FontSizePicker;
var _default = FontSizePicker;
exports.default = _default;
//# sourceMappingURL=index.js.map