@wordpress/components
Version:
UI components for WordPress.
258 lines (211 loc) • 9.36 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.NumberControl = void 0;
var _element = require("@wordpress/element");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _numberControlStyles = require("./styles/number-control-styles");
var inputControlActionTypes = _interopRequireWildcard(require("../input-control/reducer/actions"));
var _math = require("../utils/math");
var _values = require("../utils/values");
var _hStack = require("../h-stack");
var _spacer = require("../spacer");
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 noop = () => {};
function UnforwardedNumberControl(_ref, forwardedRef) {
let {
__unstableStateReducer: stateReducerProp,
className,
dragDirection = 'n',
hideHTMLArrows = false,
spinControls = 'native',
isDragEnabled = true,
isShiftStepEnabled = true,
label,
max = Infinity,
min = -Infinity,
required = false,
shiftStep = 10,
step = 1,
type: typeProp = 'number',
value: valueProp,
size = 'default',
suffix,
onChange = noop,
...props
} = _ref;
if (hideHTMLArrows) {
(0, _deprecated.default)('wp.components.NumberControl hideHTMLArrows prop ', {
alternative: 'spinControls="none"',
since: '6.2',
version: '6.3'
});
spinControls = 'none';
}
const inputRef = (0, _element.useRef)();
const mergedRef = (0, _compose.useMergeRefs)([inputRef, forwardedRef]);
const isStepAny = step === 'any';
const baseStep = isStepAny ? 1 : (0, _values.ensureNumber)(step);
const baseValue = (0, _math.roundClamp)(0, min, max, baseStep);
const constrainValue = (value, stepOverride) => {
// When step is "any" clamp the value, otherwise round and clamp it.
return isStepAny ? Math.min(max, Math.max(min, (0, _values.ensureNumber)(value))) : (0, _math.roundClamp)(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
};
const autoComplete = typeProp === 'number' ? 'off' : undefined;
const classes = (0, _classnames.default)('components-number-control', className);
const spinValue = (value, direction, event) => {
event === null || event === void 0 ? void 0 : event.preventDefault();
const shift = (event === null || event === void 0 ? void 0 : event.shiftKey) && isShiftStepEnabled;
const delta = shift ? (0, _values.ensureNumber)(shiftStep) * baseStep : baseStep;
let nextValue = (0, _values.isValueEmpty)(value) ? baseValue : value;
if (direction === 'up') {
nextValue = (0, _math.add)(nextValue, delta);
} else if (direction === 'down') {
nextValue = (0, _math.subtract)(nextValue, delta);
}
return constrainValue(nextValue, shift ? delta : undefined);
};
/**
* "Middleware" function that intercepts updates from InputControl.
* This allows us to tap into actions to transform the (next) state for
* InputControl.
*
* @return The updated state to apply to InputControl
*/
const numberControlStateReducer = (state, action) => {
const nextState = { ...state
};
const {
type,
payload
} = action;
const event = payload.event;
const currentValue = nextState.value;
/**
* Handles custom UP and DOWN Keyboard events
*/
if (type === inputControlActionTypes.PRESS_UP || type === inputControlActionTypes.PRESS_DOWN) {
// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
nextState.value = spinValue(currentValue, type === inputControlActionTypes.PRESS_UP ? 'up' : 'down', event);
}
/**
* Handles drag to update events
*/
if (type === inputControlActionTypes.DRAG && isDragEnabled) {
const [x, y] = payload.delta;
const enableShift = payload.shiftKey && isShiftStepEnabled;
const modifier = enableShift ? (0, _values.ensureNumber)(shiftStep) * baseStep : baseStep;
let directionModifier;
let delta;
switch (dragDirection) {
case 'n':
delta = y;
directionModifier = -1;
break;
case 'e':
delta = x;
directionModifier = (0, _i18n.isRTL)() ? -1 : 1;
break;
case 's':
delta = y;
directionModifier = 1;
break;
case 'w':
delta = x;
directionModifier = (0, _i18n.isRTL)() ? 1 : -1;
break;
}
if (delta !== 0) {
delta = Math.ceil(Math.abs(delta)) * Math.sign(delta);
const distance = delta * modifier * directionModifier; // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
nextState.value = constrainValue( // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
(0, _math.add)(currentValue, distance), enableShift ? modifier : undefined);
}
}
/**
* Handles commit (ENTER key press or blur)
*/
if (type === inputControlActionTypes.PRESS_ENTER || type === inputControlActionTypes.COMMIT) {
const applyEmptyValue = required === false && currentValue === ''; // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
nextState.value = applyEmptyValue ? currentValue : // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
constrainValue(currentValue);
}
return nextState;
};
const buildSpinButtonClickHandler = direction => event => onChange(String(spinValue(valueProp, direction, event)), {
// Set event.target to the <input> so that consumers can use
// e.g. event.target.validity.
event: { ...event,
target: inputRef.current
}
});
return (0, _element.createElement)(_numberControlStyles.Input, (0, _extends2.default)({
autoComplete: autoComplete,
inputMode: "numeric"
}, props, {
className: classes,
dragDirection: dragDirection,
hideHTMLArrows: spinControls !== 'native',
isDragEnabled: isDragEnabled,
label: label,
max: max,
min: min,
ref: mergedRef,
required: required,
step: step,
type: typeProp // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
,
value: valueProp,
__unstableStateReducer: (state, action) => {
var _stateReducerProp;
const baseState = numberControlStateReducer(state, action);
return (_stateReducerProp = stateReducerProp === null || stateReducerProp === void 0 ? void 0 : stateReducerProp(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState;
},
size: size,
suffix: spinControls === 'custom' ? (0, _element.createElement)(_element.Fragment, null, suffix, (0, _element.createElement)(_spacer.Spacer, {
marginBottom: 0,
marginRight: 2
}, (0, _element.createElement)(_hStack.HStack, {
spacing: 1
}, (0, _element.createElement)(_numberControlStyles.SpinButton, {
icon: _icons.plus,
isSmall: true,
"aria-hidden": "true",
"aria-label": (0, _i18n.__)('Increment'),
tabIndex: -1,
onClick: buildSpinButtonClickHandler('up'),
size: size
}), (0, _element.createElement)(_numberControlStyles.SpinButton, {
icon: _icons.reset,
isSmall: true,
"aria-hidden": "true",
"aria-label": (0, _i18n.__)('Decrement'),
tabIndex: -1,
onClick: buildSpinButtonClickHandler('down'),
size: size
})))) : suffix,
onChange: onChange
}));
}
const NumberControl = (0, _element.forwardRef)(UnforwardedNumberControl);
exports.NumberControl = NumberControl;
var _default = NumberControl;
exports.default = _default;
//# sourceMappingURL=index.js.map