@wordpress/components
Version:
UI components for WordPress.
238 lines (230 loc) • 9.34 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.NumberControl = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
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");
var _utils = require("../utils");
var _useDeprecatedProps = require("../utils/use-deprecated-props");
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 noop = () => {};
function UnforwardedNumberControl(props, forwardedRef) {
const {
__unstableStateReducer: stateReducerProp,
className,
dragDirection = 'n',
hideHTMLArrows = false,
spinControls = hideHTMLArrows ? 'none' : 'native',
isDragEnabled = true,
isShiftStepEnabled = true,
label,
max = Infinity,
min = -Infinity,
required = false,
shiftStep = 10,
step = 1,
spinFactor = 1,
type: typeProp = 'number',
value: valueProp,
size = 'default',
suffix,
onChange = noop,
__shouldNotWarnDeprecated36pxSize,
...restProps
} = (0, _useDeprecatedProps.useDeprecated36pxDefaultSizeProp)(props);
(0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
componentName: 'NumberControl',
size,
__next40pxDefaultSize: restProps.__next40pxDefaultSize,
__shouldNotWarnDeprecated36pxSize
});
if (hideHTMLArrows) {
(0, _deprecated.default)('wp.components.NumberControl hideHTMLArrows prop ', {
alternative: 'spinControls="none"',
since: '6.2',
version: '6.3'
});
}
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 baseSpin = (0, _values.ensureNumber)(spinFactor) * baseStep;
const constrainValue = (value, stepOverride) => {
// When step is not "any" the value must be a valid step.
if (!isStepAny) {
value = (0, _math.ensureValidStep)(value, min, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
}
return `${(0, _math.clamp)(value, min, max)}`;
};
const baseValue = constrainValue(0);
const autoComplete = typeProp === 'number' ? 'off' : undefined;
const classes = (0, _clsx.default)('components-number-control', className);
const cx = (0, _utils.useCx)();
const spinButtonClasses = cx(size === 'small' && _numberControlStyles.styles.smallSpinButtons);
const spinValue = (value, direction, event) => {
event?.preventDefault();
const shift = event?.shiftKey && isShiftStepEnabled;
const delta = shift ? (0, _values.ensureNumber)(shiftStep) * baseSpin : baseSpin;
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) {
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) * baseSpin : baseSpin;
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;
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 === '';
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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_numberControlStyles.Input, {
autoComplete: autoComplete,
inputMode: "numeric",
...restProps,
className: classes,
dragDirection: dragDirection,
hideHTMLArrows: spinControls !== 'native',
isDragEnabled: isDragEnabled,
label: label,
max: max === Infinity ? undefined : max,
min: min === -Infinity ? undefined : 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?.(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState;
},
size: size,
__shouldNotWarnDeprecated36pxSize: true,
suffix: spinControls === 'custom' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [suffix, /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
marginBottom: 0,
marginRight: 2,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
spacing: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_numberControlStyles.SpinButton, {
className: spinButtonClasses,
icon: _icons.plus,
size: "small",
label: (0, _i18n.__)('Increment'),
onClick: buildSpinButtonClickHandler('up')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_numberControlStyles.SpinButton, {
className: spinButtonClasses,
icon: _icons.reset,
size: "small",
label: (0, _i18n.__)('Decrement'),
onClick: buildSpinButtonClickHandler('down')
})]
})
})]
}) : suffix,
onChange: onChange
});
}
const NumberControl = exports.NumberControl = (0, _element.forwardRef)(UnforwardedNumberControl);
var _default = exports.default = NumberControl;
//# sourceMappingURL=index.js.map