@wordpress/components
Version:
UI components for WordPress.
165 lines (159 loc) • 6.24 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
Object.defineProperty(exports, "useCustomUnits", {
enumerable: true,
get: function () {
return _utils.useCustomUnits;
}
});
var _reactNative = require("react-native");
var _rangeCell = _interopRequireDefault(require("../mobile/bottom-sheet/range-cell"));
var _stepperCell = _interopRequireDefault(require("../mobile/bottom-sheet/stepper-cell"));
var _picker = _interopRequireDefault(require("../mobile/picker"));
var _style = _interopRequireDefault(require("./style.scss"));
var _utils = require("./utils");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* Internal dependencies
*/
/**
* WordPress dependencies
*/
function UnitControl({
currentInput,
label,
value,
onChange,
onUnitChange,
initialPosition,
min,
max,
separatorType,
units = _utils.CSS_UNITS,
unit,
getStylesFromColorScheme,
...props
}) {
const pickerRef = (0, _element.useRef)();
const anchorNodeRef = (0, _element.useRef)();
const onPickerPresent = (0, _element.useCallback)(() => {
if (pickerRef?.current) {
pickerRef.current.presentPicker();
}
// It would be great if the deps could be addressed in the context of
// https://github.com/WordPress/gutenberg/pull/39218
}, [pickerRef?.current]);
const currentInputValue = currentInput === null ? value : currentInput;
const initialControlValue = isFinite(currentInputValue) ? currentInputValue : initialPosition;
const unitButtonTextStyle = getStylesFromColorScheme(_style.default.unitButtonText, _style.default.unitButtonTextDark);
/* translators: accessibility text. Inform about current unit value. %s: Current unit value. */
const accessibilityLabel = (0, _i18n.sprintf)((0, _i18n.__)('Current unit is %s'), unit);
const accessibilityHint = _reactNative.Platform.OS === 'ios' ? (0, _i18n.__)('Double tap to open Action Sheet with available options') : (0, _i18n.__)('Double tap to open Bottom Sheet with available options');
const renderUnitButton = (0, _element.useMemo)(() => {
const unitButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _style.default.unitButton,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: unitButtonTextStyle,
children: unit
})
});
if ((0, _utils.hasUnits)(units) && units?.length > 1) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
onPress: onPickerPresent,
accessibilityLabel: accessibilityLabel,
accessibilityRole: "button",
accessibilityHint: accessibilityHint,
children: unitButton
});
}
return unitButton;
}, [onPickerPresent, accessibilityLabel, accessibilityHint, unitButtonTextStyle, unit, units]);
const getAnchor = (0, _element.useCallback)(() => anchorNodeRef?.current ? (0, _reactNative.findNodeHandle)(anchorNodeRef?.current) : undefined,
// It would be great if the deps could be addressed in the context of
// https://github.com/WordPress/gutenberg/pull/39218
[anchorNodeRef?.current]);
const getDecimal = step => {
// Return the decimal offset based on the step size.
// if step size is 0.1 we expect the offset to be 1.
// for example 12 + 0.1 we would expect the see 12.1 (not 12.10 or 12 );
// steps are defined in the CSS_UNITS and they vary from unit to unit.
const stepToString = step;
const splitStep = stepToString.toString().split('.');
return splitStep[1] ? splitStep[1].length : 0;
};
const renderUnitPicker = (0, _element.useCallback)(() => {
// Keeping for legacy reasons, although `false` should not be a valid
// value for the `units` prop anymore.
if (units === false) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: _style.default.unitMenu,
ref: anchorNodeRef,
children: [renderUnitButton, (0, _utils.hasUnits)(units) && units?.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_picker.default, {
ref: pickerRef,
options: units,
onChange: onUnitChange,
hideCancelButton: true,
leftAlign: true,
getAnchor: getAnchor
}) : null]
});
}, [pickerRef, units, onUnitChange, getAnchor, renderUnitButton]);
let step = props.step;
/*
* If no step prop has been passed, lookup the active unit and
* try to get step from `units`, or default to a value of `1`
*/
if (!step && units) {
var _activeUnit$step;
const activeUnit = units.find(option => option.value === unit);
step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
}
const decimalNum = getDecimal(step);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: unit !== '%' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_stepperCell.default, {
label: label,
max: max,
min: min,
onChange: onChange,
separatorType: separatorType,
value: value,
step: step,
defaultValue: initialControlValue,
shouldDisplayTextInput: true,
decimalNum: decimalNum,
openUnitPicker: onPickerPresent,
unitLabel: (0, _utils.getAccessibleLabelForUnit)(unit),
...props,
children: renderUnitPicker()
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeCell.default, {
label: label,
onChange: onChange,
minimumValue: min,
maximumValue: max,
value: value,
step: step,
unit: unit,
defaultValue: initialControlValue,
separatorType: separatorType,
decimalNum: decimalNum,
openUnitPicker: onPickerPresent,
unitLabel: (0, _utils.getAccessibleLabelForUnit)(unit),
...props,
children: renderUnitPicker()
})
});
}
var _default = exports.default = (0, _element.memo)((0, _compose.withPreferredColorScheme)(UnitControl));
//# sourceMappingURL=index.native.js.map