@wordpress/components
Version:
UI components for WordPress.
239 lines (237 loc) • 9.63 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/components/src/number-control/index.tsx
var number_control_exports = {};
__export(number_control_exports, {
NumberControl: () => NumberControl,
default: () => number_control_default
});
module.exports = __toCommonJS(number_control_exports);
var import_clsx = __toESM(require("clsx"));
var import_element = require("@wordpress/element");
var import_i18n = require("@wordpress/i18n");
var import_icons = require("@wordpress/icons");
var import_compose = require("@wordpress/compose");
var import_deprecated = __toESM(require("@wordpress/deprecated"));
var import_number_control_styles = require("./styles/number-control-styles");
var inputControlActionTypes = __toESM(require("../input-control/reducer/actions"));
var import_math = require("../utils/math");
var import_values = require("../utils/values");
var import_h_stack = require("../h-stack");
var import_spacer = require("../spacer");
var import_utils = require("../utils");
var import_use_deprecated_props = require("../utils/use-deprecated-props");
var import_deprecated_36px_size = require("../utils/deprecated-36px-size");
var import_jsx_runtime = require("react/jsx-runtime");
var 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, import_use_deprecated_props.useDeprecated36pxDefaultSizeProp)(props);
(0, import_deprecated_36px_size.maybeWarnDeprecated36pxSize)({
componentName: "NumberControl",
size,
__next40pxDefaultSize: restProps.__next40pxDefaultSize,
__shouldNotWarnDeprecated36pxSize
});
if (hideHTMLArrows) {
(0, import_deprecated.default)("wp.components.NumberControl hideHTMLArrows prop ", {
alternative: 'spinControls="none"',
since: "6.2",
version: "6.3"
});
}
const inputRef = (0, import_element.useRef)();
const mergedRef = (0, import_compose.useMergeRefs)([inputRef, forwardedRef]);
const isStepAny = step === "any";
const baseStep = isStepAny ? 1 : (0, import_values.ensureNumber)(step);
const baseSpin = (0, import_values.ensureNumber)(spinFactor) * baseStep;
const constrainValue = (value, stepOverride) => {
if (!isStepAny) {
value = (0, import_math.ensureValidStep)(value, min, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
}
return `${(0, import_math.clamp)(value, min, max)}`;
};
const baseValue = constrainValue(0);
const autoComplete = typeProp === "number" ? "off" : void 0;
const classes = (0, import_clsx.default)("components-number-control", className);
const cx = (0, import_utils.useCx)();
const spinButtonClasses = cx(size === "small" && import_number_control_styles.styles.smallSpinButtons);
const spinValue = (value, direction, event) => {
event?.preventDefault();
const shift = event?.shiftKey && isShiftStepEnabled;
const delta = shift ? (0, import_values.ensureNumber)(shiftStep) * baseSpin : baseSpin;
let nextValue = (0, import_values.isValueEmpty)(value) ? baseValue : value;
if (direction === "up") {
nextValue = (0, import_math.add)(nextValue, delta);
} else if (direction === "down") {
nextValue = (0, import_math.subtract)(nextValue, delta);
}
return constrainValue(nextValue, shift ? delta : void 0);
};
const numberControlStateReducer = (state, action) => {
const nextState = {
...state
};
const {
type,
payload
} = action;
const event = payload.event;
const currentValue = nextState.value;
if (type === inputControlActionTypes.PRESS_UP || type === inputControlActionTypes.PRESS_DOWN) {
nextState.value = spinValue(currentValue, type === inputControlActionTypes.PRESS_UP ? "up" : "down", event);
}
if (type === inputControlActionTypes.DRAG && isDragEnabled) {
const [x, y] = payload.delta;
const enableShift = payload.shiftKey && isShiftStepEnabled;
const modifier = enableShift ? (0, import_values.ensureNumber)(shiftStep) * baseSpin : baseSpin;
let directionModifier;
let delta;
switch (dragDirection) {
case "n":
delta = y;
directionModifier = -1;
break;
case "e":
delta = x;
directionModifier = (0, import_i18n.isRTL)() ? -1 : 1;
break;
case "s":
delta = y;
directionModifier = 1;
break;
case "w":
delta = x;
directionModifier = (0, import_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, import_math.add)(currentValue, distance),
enableShift ? modifier : void 0
);
}
}
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, import_jsx_runtime.jsx)(import_number_control_styles.Input, {
autoComplete,
inputMode: "numeric",
...restProps,
className: classes,
dragDirection,
hideHTMLArrows: spinControls !== "native",
isDragEnabled,
label,
max: max === Infinity ? void 0 : max,
min: min === -Infinity ? void 0 : min,
ref: mergedRef,
required,
step,
type: typeProp,
value: valueProp,
__unstableStateReducer: (state, action) => {
var _stateReducerProp;
const baseState = numberControlStateReducer(state, action);
return (_stateReducerProp = stateReducerProp?.(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState;
},
size,
__shouldNotWarnDeprecated36pxSize: true,
suffix: spinControls === "custom" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
children: [suffix, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_spacer.Spacer, {
marginBottom: 0,
marginRight: 2,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_h_stack.HStack, {
spacing: 1,
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_number_control_styles.SpinButton, {
className: spinButtonClasses,
icon: import_icons.plus,
size: "small",
label: (0, import_i18n.__)("Increment"),
onClick: buildSpinButtonClickHandler("up")
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_number_control_styles.SpinButton, {
className: spinButtonClasses,
icon: import_icons.reset,
size: "small",
label: (0, import_i18n.__)("Decrement"),
onClick: buildSpinButtonClickHandler("down")
})]
})
})]
}) : suffix,
onChange
});
}
var NumberControl = (0, import_element.forwardRef)(UnforwardedNumberControl);
var number_control_default = NumberControl;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
NumberControl
});
//# sourceMappingURL=index.js.map