@wordpress/components
Version:
UI components for WordPress.
199 lines (183 loc) • 7.51 kB
JavaScript
import { createElement } from "@wordpress/element";
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
import deprecated from '@wordpress/deprecated';
import { __ } from '@wordpress/i18n';
import { settings } from '@wordpress/icons';
import { useState, useMemo, forwardRef } from '@wordpress/element';
/**
* Internal dependencies
*/
import Button from '../button';
import RangeControl from '../range-control';
import { Flex, FlexItem } from '../flex';
import { default as UnitControl, parseQuantityAndUnitFromRawValue, useCustomUnits } from '../unit-control';
import { VisuallyHidden } from '../visually-hidden';
import { getCommonSizeUnit } from './utils';
import { HStack } from '../h-stack';
import { Container, HeaderHint, HeaderLabel, Controls, ResetButton } from './styles';
import { Spacer } from '../spacer';
import FontSizePickerSelect from './font-size-picker-select';
import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
import { T_SHIRT_NAMES } from './constants';
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) {
deprecated('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 = 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] = useState(!disableCustomFontSizes && isCustomValue);
const headerHint = useMemo(() => {
if (showCustomValueControl) {
return __('Custom');
}
if (!shouldUseSelectControl) {
if (selectedFontSize) {
return selectedFontSize.name || T_SHIRT_NAMES[fontSizes.indexOf(selectedFontSize)];
}
return '';
}
const commonUnit = 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] = parseQuantityAndUnitFromRawValue(value, units);
const isValueUnitRelative = !!valueUnit && ['em', 'rem'].includes(valueUnit);
return createElement(Container, {
ref: ref,
className: "components-font-size-picker"
}, createElement(VisuallyHidden, {
as: "legend"
}, __('Font size')), createElement(Spacer, null, createElement(HStack, {
className: "components-font-size-picker__header"
}, createElement(HeaderLabel, {
"aria-label": `${__('Size')} ${headerHint || ''}`
}, __('Size'), headerHint && createElement(HeaderHint, {
className: "components-font-size-picker__header__hint"
}, headerHint)), !disableCustomFontSizes && createElement(Button, {
label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),
icon: settings,
onClick: () => {
setShowCustomValueControl(!showCustomValueControl);
},
isPressed: showCustomValueControl,
isSmall: true
}))), createElement(Controls, {
className: "components-font-size-picker__controls",
__nextHasNoMarginBottom: __nextHasNoMarginBottom
}, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && createElement(FontSizePickerSelect, {
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 && createElement(FontSizePickerToggleGroup, {
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 && createElement(Flex, {
className: "components-font-size-picker__custom-size-control"
}, createElement(FlexItem, {
isBlock: true
}, createElement(UnitControl, {
label: __('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 && createElement(FlexItem, {
isBlock: true
}, createElement(Spacer, {
marginX: 2,
marginBottom: 0
}, createElement(RangeControl, {
__nextHasNoMarginBottom: __nextHasNoMarginBottom,
className: "components-font-size-picker__custom-input",
label: __('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 && createElement(FlexItem, null, createElement(ResetButton, {
disabled: value === undefined,
onClick: () => {
onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
},
isSmall: true,
variant: "secondary",
size: size
}, __('Reset'))))));
};
export const FontSizePicker = forwardRef(UnforwardedFontSizePicker);
export default FontSizePicker;
//# sourceMappingURL=index.js.map