@fluentui/react-spinbutton 9.2.3 → 9.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.swcrc +30 -0
- package/CHANGELOG.json +97 -1
- package/CHANGELOG.md +31 -2
- package/lib/SpinButton.js.map +1 -1
- package/lib/SpinButtonField.js.map +1 -1
- package/lib/components/SpinButton/SpinButton.js.map +1 -1
- package/lib/components/SpinButton/SpinButton.types.js +1 -1
- package/lib/components/SpinButton/SpinButton.types.js.map +1 -1
- package/lib/components/SpinButton/index.js.map +1 -1
- package/lib/components/SpinButton/renderSpinButton.js +1 -9
- package/lib/components/SpinButton/renderSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButton.js +4 -3
- package/lib/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/lib/components/SpinButtonField/SpinButtonField.js +1 -2
- package/lib/components/SpinButtonField/SpinButtonField.js.map +1 -1
- package/lib/components/SpinButtonField/index.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/clamp.js.map +1 -1
- package/lib/utils/getBound.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/precision.js +6 -7
- package/lib/utils/precision.js.map +1 -1
- package/lib-commonjs/SpinButton.js +5 -4
- package/lib-commonjs/SpinButton.js.map +1 -1
- package/lib-commonjs/SpinButtonField.js +5 -4
- package/lib-commonjs/SpinButtonField.js.map +1 -1
- package/lib-commonjs/components/SpinButton/SpinButton.js +19 -20
- package/lib-commonjs/components/SpinButton/SpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/SpinButton.types.js +5 -2
- package/lib-commonjs/components/SpinButton/SpinButton.types.js.map +1 -1
- package/lib-commonjs/components/SpinButton/index.js +9 -8
- package/lib-commonjs/components/SpinButton/index.js.map +1 -1
- package/lib-commonjs/components/SpinButton/renderSpinButton.js +13 -24
- package/lib-commonjs/components/SpinButton/renderSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButton.js +248 -259
- package/lib-commonjs/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +506 -246
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SpinButtonField/SpinButtonField.js +17 -11
- package/lib-commonjs/components/SpinButtonField/SpinButtonField.js.map +1 -1
- package/lib-commonjs/components/SpinButtonField/index.js +5 -4
- package/lib-commonjs/components/SpinButtonField/index.js.map +1 -1
- package/lib-commonjs/index.js +21 -49
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/clamp.js +28 -21
- package/lib-commonjs/utils/clamp.js.map +1 -1
- package/lib-commonjs/utils/getBound.js +16 -14
- package/lib-commonjs/utils/getBound.js.map +1 -1
- package/lib-commonjs/utils/index.js +7 -6
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/precision.js +33 -33
- package/lib-commonjs/utils/precision.js.map +1 -1
- package/package.json +12 -11
- package/lib-amd/SpinButton.js +0 -6
- package/lib-amd/SpinButton.js.map +0 -1
- package/lib-amd/SpinButtonField.js +0 -6
- package/lib-amd/SpinButtonField.js.map +0 -1
- package/lib-amd/components/SpinButton/SpinButton.js +0 -17
- package/lib-amd/components/SpinButton/SpinButton.js.map +0 -1
- package/lib-amd/components/SpinButton/SpinButton.types.js +0 -5
- package/lib-amd/components/SpinButton/SpinButton.types.js.map +0 -1
- package/lib-amd/components/SpinButton/index.js +0 -10
- package/lib-amd/components/SpinButton/index.js.map +0 -1
- package/lib-amd/components/SpinButton/renderSpinButton.js +0 -17
- package/lib-amd/components/SpinButton/renderSpinButton.js.map +0 -1
- package/lib-amd/components/SpinButton/useSpinButton.js +0 -253
- package/lib-amd/components/SpinButton/useSpinButton.js.map +0 -1
- package/lib-amd/components/SpinButton/useSpinButtonStyles.js +0 -420
- package/lib-amd/components/SpinButton/useSpinButtonStyles.js.map +0 -1
- package/lib-amd/components/SpinButtonField/SpinButtonField.js +0 -10
- package/lib-amd/components/SpinButtonField/SpinButtonField.js.map +0 -1
- package/lib-amd/components/SpinButtonField/index.js +0 -6
- package/lib-amd/components/SpinButtonField/index.js.map +0 -1
- package/lib-amd/index.js +0 -13
- package/lib-amd/index.js.map +0 -1
- package/lib-amd/utils/clamp.js +0 -30
- package/lib-amd/utils/clamp.js.map +0 -1
- package/lib-amd/utils/getBound.js +0 -19
- package/lib-amd/utils/getBound.js.map +0 -1
- package/lib-amd/utils/index.js +0 -8
- package/lib-amd/utils/index.js.map +0 -1
- package/lib-amd/utils/precision.js +0 -44
- package/lib-amd/utils/precision.js.map +0 -1
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "react", "./useSpinButton", "./renderSpinButton", "./useSpinButtonStyles", "@fluentui/react-shared-contexts"], function (require, exports, React, useSpinButton_1, renderSpinButton_1, useSpinButtonStyles_1, react_shared_contexts_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.SpinButton = void 0;
|
|
5
|
-
/**
|
|
6
|
-
* A SpinButton allows someone to incrementally adjust a value in small steps.
|
|
7
|
-
*/
|
|
8
|
-
exports.SpinButton = React.forwardRef(function (props, ref) {
|
|
9
|
-
var state = useSpinButton_1.useSpinButton_unstable(props, ref);
|
|
10
|
-
useSpinButtonStyles_1.useSpinButtonStyles_unstable(state);
|
|
11
|
-
var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useSpinButtonStyles_unstable;
|
|
12
|
-
useCustomStyles(state);
|
|
13
|
-
return renderSpinButton_1.renderSpinButton_unstable(state);
|
|
14
|
-
});
|
|
15
|
-
exports.SpinButton.displayName = 'SpinButton';
|
|
16
|
-
});
|
|
17
|
-
//# sourceMappingURL=SpinButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SpinButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,UAAU,GAAyC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,sCAAsB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEjD,kDAA4B,CAAC,KAAK,CAAC,CAAC;QAE5B,IAA8B,eAAe,GAAK,oDAA4B,EAAE,6BAAnC,CAAoC;QACzF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,4CAAyB,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\nimport { useSpinButton_unstable } from './useSpinButton';\nimport { renderSpinButton_unstable } from './renderSpinButton';\nimport { useSpinButtonStyles_unstable } from './useSpinButtonStyles';\nimport type { SpinButtonProps } from './SpinButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A SpinButton allows someone to incrementally adjust a value in small steps.\n */\nexport const SpinButton: ForwardRefComponent<SpinButtonProps> = React.forwardRef((props, ref) => {\n const state = useSpinButton_unstable(props, ref);\n\n useSpinButtonStyles_unstable(state);\n\n const { useSpinButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SpinButton.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type SpinButtonSlots = {\n /**\n * The root element of SpinButton is a container `<div>`.\n * The root slot receives the `className` and `style` specified on the `<SpinButton>`.\n * All other native props are applied to the primary slot: `input`.\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * Input that displays the current value and accepts direct input from the user.\n * Displayed value is formatted.\n *\n * This is the primary slot.\n */\n input: NonNullable<Slot<'input'>>;\n\n /**\n * Renders the increment control.\n */\n incrementButton: NonNullable<Slot<'button'>>;\n\n /**\n * Renders the decrement control.\n */\n decrementButton: NonNullable<Slot<'button'>>;\n};\n\n/**\n * SpinButton Props\n */\nexport type SpinButtonProps = Omit<\n ComponentProps<Partial<SpinButtonSlots>, 'input'>,\n 'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n /**\n * Controls the colors and borders of the input.\n * @default 'outline'\n */\n appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n /**\n * Initial value of the control (assumed to be valid). Updates to this prop will not be respected.\n *\n * Use this if you intend for the SpinButton to be an uncontrolled component which maintains its\n * own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)\n *\n * Use `null` to indicate the control has no value.\n */\n defaultValue?: number | null;\n\n /**\n * String representation of `value`.\n *\n * Use this when displaying the value to users as something other than a plain number.\n * For example, when displaying currency values this might be \"$1.00\" when value is `1`.\n *\n * Only provide this if the SpinButton is a controlled component where you are maintaining its\n * current state and passing updates based on change events. When SpinButton is used as an\n * uncontrolled component this prop is ignored.\n */\n displayValue?: string;\n\n /**\n * Max value of the control. If not provided, the control has no maximum value.\n */\n max?: number;\n\n /**\n * Min value of the control. If not provided, the control has no minimum value.\n */\n min?: number;\n\n /**\n * Callback for when the committed value changes.\n * - User presses the up/down buttons (on single press or every spin)\n * - User presses the up/down arrow keys (on single press or every spin)\n * - User *commits* edits to the input text by focusing away (blurring) or pressing enter.\n * Note that this is NOT called for every key press while the user is editing.\n */\n onChange?: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;\n\n /**\n * How many decimal places the value should be rounded to.\n *\n * The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.\n * step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.\n */\n precision?: number;\n\n /**\n * Size of the input.\n * @default 'medium'\n */\n size?: 'small' | 'medium';\n\n /**\n * Difference between two adjacent values of the control.\n * This value is used to calculate the precision of the input if no `precision` is given.\n * The precision calculated this way will always be greater than or equal 0.\n * @default 1\n */\n step?: number;\n\n /**\n * Large difference between two values. This should be greater than `step` and is used\n * when users hit the Page Up or Page Down keys.\n * @default 1\n */\n stepPage?: number;\n\n /**\n * Current value of the control (assumed to be valid).\n *\n * Only provide this if the SpinButton is a controlled component where you are maintaining its\n * current state and passing updates based on change events; otherwise, use the `defaultValue`\n * property.\n *\n * Use `null` to indicate the control has no value.\n *\n * Mutually exclusive with `defaultValue`.\n */\n value?: number | null;\n};\n\n/**\n * State used in rendering SpinButton\n */\nexport type SpinButtonState = ComponentState<SpinButtonSlots> &\n Required<Pick<SpinButtonProps, 'appearance' | 'size'>> & {\n /**\n * State used to track which direction, if any, SpinButton is currently spinning.\n * @default 'rest'\n */\n spinState: SpinButtonSpinState;\n\n /**\n * State used to track if the value is at the range bounds of [min-max].\n * @default 'none'\n */\n atBound: SpinButtonBounds;\n };\n\nexport type SpinButtonChangeEvent =\n | React.MouseEvent<HTMLButtonElement>\n | React.ChangeEvent<HTMLElement>\n | React.FocusEvent<HTMLInputElement>\n | React.KeyboardEvent<HTMLInputElement>;\n\nexport type SpinButtonOnChangeData = {\n value?: number | null;\n displayValue?: string;\n};\n\nexport type SpinButtonSpinState = 'rest' | 'up' | 'down';\nexport type SpinButtonBounds = 'none' | 'min' | 'max' | 'both';\n"]}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "./SpinButton", "./SpinButton.types", "./renderSpinButton", "./useSpinButton", "./useSpinButtonStyles"], function (require, exports, tslib_1, SpinButton_1, SpinButton_types_1, renderSpinButton_1, useSpinButton_1, useSpinButtonStyles_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
tslib_1.__exportStar(SpinButton_1, exports);
|
|
5
|
-
tslib_1.__exportStar(SpinButton_types_1, exports);
|
|
6
|
-
tslib_1.__exportStar(renderSpinButton_1, exports);
|
|
7
|
-
tslib_1.__exportStar(useSpinButton_1, exports);
|
|
8
|
-
tslib_1.__exportStar(useSpinButtonStyles_1, exports);
|
|
9
|
-
});
|
|
10
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/index.ts"],"names":[],"mappings":";;;IAAA,4CAA6B;IAC7B,kDAAmC;IACnC,kDAAmC;IACnC,+CAAgC;IAChC,qDAAsC","sourcesContent":["export * from './SpinButton';\nexport * from './SpinButton.types';\nexport * from './renderSpinButton';\nexport * from './useSpinButton';\nexport * from './useSpinButtonStyles';\n"]}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.renderSpinButton_unstable = void 0;
|
|
5
|
-
/**
|
|
6
|
-
* Render the final JSX of SpinButton
|
|
7
|
-
*/
|
|
8
|
-
var renderSpinButton_unstable = function (state) {
|
|
9
|
-
var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
|
|
10
|
-
return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
|
|
11
|
-
React.createElement(slots.input, tslib_1.__assign({}, slotProps.input)),
|
|
12
|
-
React.createElement(slots.incrementButton, tslib_1.__assign({}, slotProps.incrementButton)),
|
|
13
|
-
React.createElement(slots.decrementButton, tslib_1.__assign({}, slotProps.decrementButton))));
|
|
14
|
-
};
|
|
15
|
-
exports.renderSpinButton_unstable = renderSpinButton_unstable;
|
|
16
|
-
});
|
|
17
|
-
//# sourceMappingURL=renderSpinButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"renderSpinButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/renderSpinButton.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,yBAAyB,GAAG,UAAC,KAAsB;QACxD,IAAA,KAAuB,0BAAQ,CAAkB,KAAK,CAAC,EAArD,KAAK,WAAA,EAAE,SAAS,eAAqC,CAAC;QAE9D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACpC,oBAAC,KAAK,CAAC,eAAe,uBAAK,SAAS,CAAC,eAAe,EAAI;YACxD,oBAAC,KAAK,CAAC,eAAe,uBAAK,SAAS,CAAC,eAAe,EAAI,CAC7C,CACd,CAAC;IACJ,CAAC,CAAC;IAVW,QAAA,yBAAyB,6BAUpC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinButtonState, SpinButtonSlots } from './SpinButton.types';\n\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = (state: SpinButtonState) => {\n const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.input {...slotProps.input} />\n <slots.incrementButton {...slotProps.incrementButton} />\n <slots.decrementButton {...slotProps.decrementButton} />\n </slots.root>\n );\n};\n"]}
|
|
@@ -1,253 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/keyboard-keys", "../../utils/index", "@fluentui/react-icons", "@fluentui/react-shared-contexts"], function (require, exports, tslib_1, React, react_utilities_1, keyboard_keys_1, index_1, react_icons_1, react_shared_contexts_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.useSpinButton_unstable = void 0;
|
|
5
|
-
var DEFAULT_SPIN_DELAY_MS = 150;
|
|
6
|
-
var MIN_SPIN_DELAY_MS = 80;
|
|
7
|
-
var MAX_SPIN_TIME_MS = 1000;
|
|
8
|
-
// This is here to give an ease for the mouse held down case.
|
|
9
|
-
// Exact easing it to be defined. Once it is we'll likely
|
|
10
|
-
// pull this out into a util function in the SpinButton package.
|
|
11
|
-
var lerp = function (start, end, percent) { return start + (end - start) * percent; };
|
|
12
|
-
/**
|
|
13
|
-
* Create the state required to render SpinButton.
|
|
14
|
-
*
|
|
15
|
-
* The returned state can be modified with hooks such as useSpinButtonStyles_unstable,
|
|
16
|
-
* before being passed to renderSpinButton_unstable.
|
|
17
|
-
*
|
|
18
|
-
* @param props - props from this instance of SpinButton
|
|
19
|
-
* @param ref - reference to root HTMLElement of SpinButton
|
|
20
|
-
*/
|
|
21
|
-
var useSpinButton_unstable = function (props, ref) {
|
|
22
|
-
var _a, _b;
|
|
23
|
-
var nativeProps = react_utilities_1.getPartitionedNativeProps({
|
|
24
|
-
props: props,
|
|
25
|
-
primarySlotTagName: 'input',
|
|
26
|
-
excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],
|
|
27
|
-
});
|
|
28
|
-
var overrides = react_shared_contexts_1.useOverrides_unstable();
|
|
29
|
-
var value = props.value, displayValue = props.displayValue, defaultValue = props.defaultValue, min = props.min, max = props.max, _c = props.step, step = _c === void 0 ? 1 : _c, _d = props.stepPage, stepPage = _d === void 0 ? 1 : _d, precisionFromProps = props.precision, onChange = props.onChange, _e = props.size, size = _e === void 0 ? 'medium' : _e, _f = props.appearance, appearance = _f === void 0 ? (_a = overrides.inputDefaultAppearance) !== null && _a !== void 0 ? _a : 'outline' : _f, root = props.root, input = props.input, incrementButton = props.incrementButton, decrementButton = props.decrementButton;
|
|
30
|
-
var precision = React.useMemo(function () {
|
|
31
|
-
return precisionFromProps !== null && precisionFromProps !== void 0 ? precisionFromProps : Math.max(index_1.calculatePrecision(step), 0);
|
|
32
|
-
}, [precisionFromProps, step]);
|
|
33
|
-
var _g = react_utilities_1.useControllableState({
|
|
34
|
-
state: value,
|
|
35
|
-
defaultState: defaultValue,
|
|
36
|
-
initialState: 0,
|
|
37
|
-
}), currentValue = _g[0], setCurrentValue = _g[1];
|
|
38
|
-
var isControlled = value !== undefined;
|
|
39
|
-
var _h = React.useState(undefined), textValue = _h[0], setTextValue = _h[1];
|
|
40
|
-
var _j = React.useState('rest'), keyboardSpinState = _j[0], setKeyboardSpinState = _j[1];
|
|
41
|
-
var internalState = React.useRef({
|
|
42
|
-
value: currentValue,
|
|
43
|
-
spinState: 'rest',
|
|
44
|
-
spinTime: 0,
|
|
45
|
-
spinDelay: DEFAULT_SPIN_DELAY_MS,
|
|
46
|
-
atBound: currentValue !== null ? index_1.getBound(index_1.precisionRound(currentValue, precision), min, max) : 'none',
|
|
47
|
-
});
|
|
48
|
-
var _k = react_utilities_1.useTimeout(), setStepTimeout = _k[0], clearStepTimeout = _k[1];
|
|
49
|
-
var stepValue = function (e, direction, startFrom) {
|
|
50
|
-
var startValue = internalState.current.value;
|
|
51
|
-
if (startFrom) {
|
|
52
|
-
var num = parseFloat(startFrom);
|
|
53
|
-
if (!isNaN(num)) {
|
|
54
|
-
startValue = num;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
var val = startValue;
|
|
58
|
-
var dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
|
|
59
|
-
var stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
|
|
60
|
-
if (val === null) {
|
|
61
|
-
var stepStart = min === undefined ? 0 : min;
|
|
62
|
-
var nullStep = index_1.clamp(stepStart + stepSize * dir, min, max);
|
|
63
|
-
commit(e, nullStep);
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
var newValue = val + stepSize * dir;
|
|
67
|
-
if (!Number.isNaN(newValue)) {
|
|
68
|
-
newValue = index_1.clamp(newValue, min, max);
|
|
69
|
-
}
|
|
70
|
-
commit(e, newValue);
|
|
71
|
-
if (internalState.current.spinState !== 'rest') {
|
|
72
|
-
setStepTimeout(function () {
|
|
73
|
-
// Ease the step speed a bit
|
|
74
|
-
internalState.current.spinTime += internalState.current.spinDelay;
|
|
75
|
-
internalState.current.spinDelay = lerp(DEFAULT_SPIN_DELAY_MS, MIN_SPIN_DELAY_MS, internalState.current.spinTime / MAX_SPIN_TIME_MS);
|
|
76
|
-
stepValue(e, direction);
|
|
77
|
-
}, internalState.current.spinDelay);
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
var handleInputChange = function (e) {
|
|
81
|
-
if (!internalState.current.previousTextValue) {
|
|
82
|
-
internalState.current.previousTextValue = textValue !== null && textValue !== void 0 ? textValue : String(currentValue);
|
|
83
|
-
}
|
|
84
|
-
var newValue = e.target.value;
|
|
85
|
-
setTextValue(newValue);
|
|
86
|
-
};
|
|
87
|
-
var handleIncrementMouseDown = function (e) {
|
|
88
|
-
internalState.current.spinState = 'up';
|
|
89
|
-
stepValue(e, 'up');
|
|
90
|
-
};
|
|
91
|
-
var handleDecrementMouseDown = function (e) {
|
|
92
|
-
internalState.current.spinState = 'down';
|
|
93
|
-
stepValue(e, 'down');
|
|
94
|
-
};
|
|
95
|
-
var handleStepMouseUpOrLeave = function (e) {
|
|
96
|
-
clearStepTimeout();
|
|
97
|
-
internalState.current.spinState = 'rest';
|
|
98
|
-
internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;
|
|
99
|
-
internalState.current.spinTime = 0;
|
|
100
|
-
};
|
|
101
|
-
var handleBlur = function (e) {
|
|
102
|
-
commit(e, currentValue, textValue);
|
|
103
|
-
internalState.current.previousTextValue = undefined;
|
|
104
|
-
};
|
|
105
|
-
var handleKeyDown = function (e) {
|
|
106
|
-
var nextKeyboardSpinState = 'rest';
|
|
107
|
-
if (e.key === keyboard_keys_1.ArrowUp) {
|
|
108
|
-
stepValue(e, 'up', textValue);
|
|
109
|
-
nextKeyboardSpinState = 'up';
|
|
110
|
-
}
|
|
111
|
-
else if (e.key === keyboard_keys_1.ArrowDown) {
|
|
112
|
-
stepValue(e, 'down', textValue);
|
|
113
|
-
nextKeyboardSpinState = 'down';
|
|
114
|
-
}
|
|
115
|
-
else if (e.key === keyboard_keys_1.PageUp) {
|
|
116
|
-
e.preventDefault();
|
|
117
|
-
stepValue(e, 'upPage', textValue);
|
|
118
|
-
nextKeyboardSpinState = 'up';
|
|
119
|
-
}
|
|
120
|
-
else if (e.key === keyboard_keys_1.PageDown) {
|
|
121
|
-
e.preventDefault();
|
|
122
|
-
stepValue(e, 'downPage', textValue);
|
|
123
|
-
nextKeyboardSpinState = 'down';
|
|
124
|
-
}
|
|
125
|
-
else if (!e.shiftKey && e.key === keyboard_keys_1.Home && min !== undefined) {
|
|
126
|
-
commit(e, min);
|
|
127
|
-
nextKeyboardSpinState = 'down';
|
|
128
|
-
}
|
|
129
|
-
else if (!e.shiftKey && e.key === keyboard_keys_1.End && max !== undefined) {
|
|
130
|
-
commit(e, max);
|
|
131
|
-
nextKeyboardSpinState = 'up';
|
|
132
|
-
}
|
|
133
|
-
else if (e.key === keyboard_keys_1.Enter) {
|
|
134
|
-
commit(e, currentValue, textValue);
|
|
135
|
-
internalState.current.previousTextValue = undefined;
|
|
136
|
-
}
|
|
137
|
-
else if (e.key === keyboard_keys_1.Escape) {
|
|
138
|
-
if (internalState.current.previousTextValue) {
|
|
139
|
-
setTextValue(undefined);
|
|
140
|
-
internalState.current.previousTextValue = undefined;
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
if (keyboardSpinState !== nextKeyboardSpinState) {
|
|
144
|
-
setKeyboardSpinState(nextKeyboardSpinState);
|
|
145
|
-
}
|
|
146
|
-
};
|
|
147
|
-
var handleKeyUp = function (e) {
|
|
148
|
-
if (keyboardSpinState !== 'rest') {
|
|
149
|
-
setKeyboardSpinState('rest');
|
|
150
|
-
internalState.current.spinState = 'rest';
|
|
151
|
-
}
|
|
152
|
-
};
|
|
153
|
-
var commit = function (e, newValue, newDisplayValue) {
|
|
154
|
-
var valueChanged = newValue !== undefined && currentValue !== newValue;
|
|
155
|
-
var displayValueChanged = newDisplayValue !== undefined &&
|
|
156
|
-
internalState.current.previousTextValue !== undefined &&
|
|
157
|
-
internalState.current.previousTextValue !== newDisplayValue;
|
|
158
|
-
var roundedValue;
|
|
159
|
-
if (valueChanged) {
|
|
160
|
-
roundedValue = index_1.precisionRound(newValue, precision);
|
|
161
|
-
setCurrentValue(roundedValue);
|
|
162
|
-
}
|
|
163
|
-
else if (displayValueChanged && !isControlled) {
|
|
164
|
-
var nextValue = parseFloat(newDisplayValue);
|
|
165
|
-
if (!isNaN(nextValue)) {
|
|
166
|
-
setCurrentValue(index_1.precisionRound(nextValue, precision));
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
if (valueChanged || displayValueChanged) {
|
|
170
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(e, { value: roundedValue, displayValue: newDisplayValue });
|
|
171
|
-
}
|
|
172
|
-
setTextValue(undefined);
|
|
173
|
-
};
|
|
174
|
-
var state = {
|
|
175
|
-
size: size,
|
|
176
|
-
appearance: appearance,
|
|
177
|
-
spinState: keyboardSpinState,
|
|
178
|
-
atBound: internalState.current.atBound,
|
|
179
|
-
components: {
|
|
180
|
-
root: 'span',
|
|
181
|
-
input: 'input',
|
|
182
|
-
incrementButton: 'button',
|
|
183
|
-
decrementButton: 'button',
|
|
184
|
-
},
|
|
185
|
-
root: react_utilities_1.resolveShorthand(root, {
|
|
186
|
-
required: true,
|
|
187
|
-
defaultProps: nativeProps.root,
|
|
188
|
-
}),
|
|
189
|
-
input: react_utilities_1.resolveShorthand(input, {
|
|
190
|
-
required: true,
|
|
191
|
-
defaultProps: tslib_1.__assign({ ref: ref, autoComplete: 'off', role: 'spinbutton', appearance: appearance, type: 'text' }, nativeProps.primary),
|
|
192
|
-
}),
|
|
193
|
-
incrementButton: react_utilities_1.resolveShorthand(incrementButton, {
|
|
194
|
-
required: true,
|
|
195
|
-
defaultProps: {
|
|
196
|
-
tabIndex: -1,
|
|
197
|
-
children: React.createElement(react_icons_1.ChevronUp16Regular, null),
|
|
198
|
-
disabled: nativeProps.primary.disabled,
|
|
199
|
-
'aria-label': 'Increment value',
|
|
200
|
-
type: 'button',
|
|
201
|
-
},
|
|
202
|
-
}),
|
|
203
|
-
decrementButton: react_utilities_1.resolveShorthand(decrementButton, {
|
|
204
|
-
required: true,
|
|
205
|
-
defaultProps: {
|
|
206
|
-
tabIndex: -1,
|
|
207
|
-
children: React.createElement(react_icons_1.ChevronDown16Regular, null),
|
|
208
|
-
disabled: nativeProps.primary.disabled,
|
|
209
|
-
'aria-label': 'Decrement value',
|
|
210
|
-
type: 'button',
|
|
211
|
-
},
|
|
212
|
-
}),
|
|
213
|
-
};
|
|
214
|
-
var valueToDisplay;
|
|
215
|
-
if (textValue !== undefined) {
|
|
216
|
-
valueToDisplay = textValue;
|
|
217
|
-
}
|
|
218
|
-
else if (value === null || currentValue === null) {
|
|
219
|
-
valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : '';
|
|
220
|
-
internalState.current.value = null;
|
|
221
|
-
internalState.current.atBound = 'none';
|
|
222
|
-
}
|
|
223
|
-
else {
|
|
224
|
-
var roundedValue = index_1.precisionRound(currentValue, precision);
|
|
225
|
-
internalState.current.value = roundedValue;
|
|
226
|
-
internalState.current.atBound = index_1.getBound(roundedValue, min, max);
|
|
227
|
-
if (isControlled) {
|
|
228
|
-
valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
|
|
229
|
-
}
|
|
230
|
-
else {
|
|
231
|
-
valueToDisplay = String(roundedValue);
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
state.input.value = valueToDisplay;
|
|
235
|
-
state.input['aria-valuemin'] = min;
|
|
236
|
-
state.input['aria-valuemax'] = max;
|
|
237
|
-
state.input['aria-valuenow'] = currentValue !== null && currentValue !== void 0 ? currentValue : undefined;
|
|
238
|
-
state.input['aria-valuetext'] = (_b = state.input['aria-valuetext']) !== null && _b !== void 0 ? _b : ((value !== undefined && displayValue) || undefined);
|
|
239
|
-
state.input.onChange = react_utilities_1.mergeCallbacks(state.input.onChange, handleInputChange);
|
|
240
|
-
state.input.onBlur = react_utilities_1.mergeCallbacks(state.input.onBlur, handleBlur);
|
|
241
|
-
state.input.onKeyDown = react_utilities_1.mergeCallbacks(state.input.onKeyDown, handleKeyDown);
|
|
242
|
-
state.input.onKeyUp = react_utilities_1.mergeCallbacks(state.input.onKeyUp, handleKeyUp);
|
|
243
|
-
state.incrementButton.onMouseDown = react_utilities_1.mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);
|
|
244
|
-
state.incrementButton.onMouseUp = react_utilities_1.mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);
|
|
245
|
-
state.incrementButton.onMouseLeave = react_utilities_1.mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);
|
|
246
|
-
state.decrementButton.onMouseDown = react_utilities_1.mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);
|
|
247
|
-
state.decrementButton.onMouseUp = react_utilities_1.mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);
|
|
248
|
-
state.decrementButton.onMouseLeave = react_utilities_1.mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);
|
|
249
|
-
return state;
|
|
250
|
-
};
|
|
251
|
-
exports.useSpinButton_unstable = useSpinButton_unstable;
|
|
252
|
-
});
|
|
253
|
-
//# sourceMappingURL=useSpinButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useSpinButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx"],"names":[],"mappings":";;;;IA6BA,IAAM,qBAAqB,GAAG,GAAG,CAAC;IAClC,IAAM,iBAAiB,GAAG,EAAE,CAAC;IAC7B,IAAM,gBAAgB,GAAG,IAAI,CAAC;IAE9B,6DAA6D;IAC7D,yDAAyD;IACzD,gEAAgE;IAChE,IAAM,IAAI,GAAG,UAAC,KAAa,EAAE,GAAW,EAAE,OAAe,IAAa,OAAA,KAAK,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,OAAO,EAA/B,CAA+B,CAAC;IAEtG;;;;;;;;OAQG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAsB,EAAE,GAAgC;;QAC7F,IAAM,WAAW,GAAG,2CAAyB,CAAC;YAC5C,KAAK,OAAA;YACL,kBAAkB,EAAE,OAAO;YAC3B,iBAAiB,EAAE,CAAC,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC;SAC/E,CAAC,CAAC;QAEH,IAAM,SAAS,GAAG,6CAAY,EAAE,CAAC;QAG/B,IAAA,KAAK,GAeH,KAAK,MAfF,EACL,YAAY,GAcV,KAAK,aAdK,EACZ,YAAY,GAaV,KAAK,aAbK,EACZ,GAAG,GAYD,KAAK,IAZJ,EACH,GAAG,GAWD,KAAK,IAXJ,EACH,KAUE,KAAK,KAVC,EAAR,IAAI,mBAAG,CAAC,KAAA,EACR,KASE,KAAK,SATK,EAAZ,QAAQ,mBAAG,CAAC,KAAA,EACD,kBAAkB,GAQ3B,KAAK,UARsB,EAC7B,QAAQ,GAON,KAAK,SAPC,EACR,KAME,KAAK,KANQ,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,KAKE,KAAK,WALmD,EAA1D,UAAU,mBAAG,MAAA,SAAS,CAAC,sBAAsB,mCAAI,SAAS,KAAA,EAC1D,IAAI,GAIF,KAAK,KAJH,EACJ,KAAK,GAGH,KAAK,MAHF,EACL,eAAe,GAEb,KAAK,gBAFQ,EACf,eAAe,GACb,KAAK,gBADQ,CACP;QAEV,IAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC;YAC9B,OAAO,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,IAAI,CAAC,GAAG,CAAC,0BAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACrE,CAAC,EAAE,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC,CAAC;QAEzB,IAAA,KAAkC,sCAAoB,CAAC;YAC3D,KAAK,EAAE,KAAK;YACZ,YAAY,EAAE,YAAY;YAC1B,YAAY,EAAE,CAAC;SAChB,CAAC,EAJK,YAAY,QAAA,EAAE,eAAe,QAIlC,CAAC;QAEH,IAAM,YAAY,GAAG,KAAK,KAAK,SAAS,CAAC;QAEnC,IAAA,KAA4B,KAAK,CAAC,QAAQ,CAAqB,SAAS,CAAC,EAAxE,SAAS,QAAA,EAAE,YAAY,QAAiD,CAAC;QAC1E,IAAA,KAA4C,KAAK,CAAC,QAAQ,CAAsB,MAAM,CAAC,EAAtF,iBAAiB,QAAA,EAAE,oBAAoB,QAA+C,CAAC;QAE9F,IAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAgB;YAChD,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,CAAC;YACX,SAAS,EAAE,qBAAqB;YAChC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,gBAAQ,CAAC,sBAAc,CAAC,YAAY,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM;SACtG,CAAC,CAAC;QAEG,IAAA,KAAqC,4BAAU,EAAE,EAAhD,cAAc,QAAA,EAAE,gBAAgB,QAAgB,CAAC;QAExD,IAAM,SAAS,GAAG,UAChB,CAAwB,EACxB,SAAgD,EAChD,SAAkB;YAElB,IAAI,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC;YAC7C,IAAI,SAAS,EAAE;gBACb,IAAM,GAAG,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;gBAClC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;oBACf,UAAU,GAAG,GAAG,CAAC;iBAClB;aACF;YACD,IAAM,GAAG,GAAG,UAAU,CAAC;YACvB,IAAM,GAAG,GAAG,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAClE,IAAM,QAAQ,GAAG,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;YAEtF,IAAI,GAAG,KAAK,IAAI,EAAE;gBAChB,IAAM,SAAS,GAAG,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC9C,IAAM,QAAQ,GAAG,aAAK,CAAC,SAAS,GAAG,QAAQ,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gBAC7D,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;gBACpB,OAAO;aACR;YAED,IAAI,QAAQ,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,CAAC;YACpC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;gBAC3B,QAAQ,GAAG,aAAK,CAAC,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;aACtC;YAED,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;YAEpB,IAAI,aAAa,CAAC,OAAO,CAAC,SAAS,KAAK,MAAM,EAAE;gBAC9C,cAAc,CAAC;oBACb,4BAA4B;oBAC5B,aAAa,CAAC,OAAO,CAAC,QAAQ,IAAI,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC;oBAClE,aAAa,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CACpC,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,CAAC,OAAO,CAAC,QAAQ,GAAG,gBAAgB,CAClD,CAAC;oBACF,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;gBAC1B,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;aACrC;QACH,CAAC,CAAC;QAEF,IAAM,iBAAiB,GAAG,UAAC,CAAsC;YAC/D,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,iBAAiB,EAAE;gBAC5C,aAAa,CAAC,OAAO,CAAC,iBAAiB,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,MAAM,CAAC,YAAY,CAAC,CAAC;aAC7E;YACD,IAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;YAChC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC,CAAC;QAEF,IAAM,wBAAwB,GAAG,UAAC,CAAsC;YACtE,aAAa,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;YACvC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;QACrB,CAAC,CAAC;QAEF,IAAM,wBAAwB,GAAG,UAAC,CAAsC;YACtE,aAAa,CAAC,OAAO,CAAC,SAAS,GAAG,MAAM,CAAC;YACzC,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QACvB,CAAC,CAAC;QAEF,IAAM,wBAAwB,GAAG,UAAC,CAAsC;YACtE,gBAAgB,EAAE,CAAC;YACnB,aAAa,CAAC,OAAO,CAAC,SAAS,GAAG,MAAM,CAAC;YACzC,aAAa,CAAC,OAAO,CAAC,SAAS,GAAG,qBAAqB,CAAC;YACxD,aAAa,CAAC,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC;QACrC,CAAC,CAAC;QAEF,IAAM,UAAU,GAAG,UAAC,CAAqC;YACvD,MAAM,CAAC,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;YACnC,aAAa,CAAC,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC;QACtD,CAAC,CAAC;QAEF,IAAM,aAAa,GAAG,UAAC,CAAwC;YAC7D,IAAI,qBAAqB,GAAwB,MAAM,CAAC;YAExD,IAAI,CAAC,CAAC,GAAG,KAAK,uBAAO,EAAE;gBACrB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;gBAC9B,qBAAqB,GAAG,IAAI,CAAC;aAC9B;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,yBAAS,EAAE;gBAC9B,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;gBAChC,qBAAqB,GAAG,MAAM,CAAC;aAChC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,sBAAM,EAAE;gBAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;gBAClC,qBAAqB,GAAG,IAAI,CAAC;aAC9B;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,wBAAQ,EAAE;gBAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;gBACpC,qBAAqB,GAAG,MAAM,CAAC;aAChC;iBAAM,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,oBAAI,IAAI,GAAG,KAAK,SAAS,EAAE;gBAC7D,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;gBACf,qBAAqB,GAAG,MAAM,CAAC;aAChC;iBAAM,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,mBAAG,IAAI,GAAG,KAAK,SAAS,EAAE;gBAC5D,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;gBACf,qBAAqB,GAAG,IAAI,CAAC;aAC9B;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,qBAAK,EAAE;gBAC1B,MAAM,CAAC,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;gBACnC,aAAa,CAAC,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC;aACrD;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,sBAAM,EAAE;gBAC3B,IAAI,aAAa,CAAC,OAAO,CAAC,iBAAiB,EAAE;oBAC3C,YAAY,CAAC,SAAS,CAAC,CAAC;oBACxB,aAAa,CAAC,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC;iBACrD;aACF;YAED,IAAI,iBAAiB,KAAK,qBAAqB,EAAE;gBAC/C,oBAAoB,CAAC,qBAAqB,CAAC,CAAC;aAC7C;QACH,CAAC,CAAC;QAEF,IAAM,WAAW,GAAG,UAAC,CAAwC;YAC3D,IAAI,iBAAiB,KAAK,MAAM,EAAE;gBAChC,oBAAoB,CAAC,MAAM,CAAC,CAAC;gBAC7B,aAAa,CAAC,OAAO,CAAC,SAAS,GAAG,MAAM,CAAC;aAC1C;QACH,CAAC,CAAC;QAEF,IAAM,MAAM,GAAG,UAAC,CAAwB,EAAE,QAAwB,EAAE,eAAwB;YAC1F,IAAM,YAAY,GAAG,QAAQ,KAAK,SAAS,IAAI,YAAY,KAAK,QAAQ,CAAC;YACzE,IAAM,mBAAmB,GACvB,eAAe,KAAK,SAAS;gBAC7B,aAAa,CAAC,OAAO,CAAC,iBAAiB,KAAK,SAAS;gBACrD,aAAa,CAAC,OAAO,CAAC,iBAAiB,KAAK,eAAe,CAAC;YAE9D,IAAI,YAAY,CAAC;YACjB,IAAI,YAAY,EAAE;gBAChB,YAAY,GAAG,sBAAc,CAAC,QAAS,EAAE,SAAS,CAAC,CAAC;gBACpD,eAAe,CAAC,YAAY,CAAC,CAAC;aAC/B;iBAAM,IAAI,mBAAmB,IAAI,CAAC,YAAY,EAAE;gBAC/C,IAAM,SAAS,GAAG,UAAU,CAAC,eAAyB,CAAC,CAAC;gBACxD,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;oBACrB,eAAe,CAAC,sBAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;iBACvD;aACF;YAED,IAAI,YAAY,IAAI,mBAAmB,EAAE;gBACvC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC,CAAC;aACvE;YAED,YAAY,CAAC,SAAS,CAAC,CAAC;QAC1B,CAAC,CAAC;QAEF,IAAM,KAAK,GAAoB;YAC7B,IAAI,MAAA;YACJ,UAAU,YAAA;YACV,SAAS,EAAE,iBAAiB;YAC5B,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO;YAEtC,UAAU,EAAE;gBACV,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,OAAO;gBACd,eAAe,EAAE,QAAQ;gBACzB,eAAe,EAAE,QAAQ;aAC1B;YACD,IAAI,EAAE,kCAAgB,CAAC,IAAI,EAAE;gBAC3B,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE,WAAW,CAAC,IAAI;aAC/B,CAAC;YACF,KAAK,EAAE,kCAAgB,CAAC,KAAK,EAAE;gBAC7B,QAAQ,EAAE,IAAI;gBACd,YAAY,qBACV,GAAG,KAAA,EACH,YAAY,EAAE,KAAK,EACnB,IAAI,EAAE,YAAY,EAClB,UAAU,YAAA,EACV,IAAI,EAAE,MAAM,IACT,WAAW,CAAC,OAAO,CACvB;aACF,CAAC;YACF,eAAe,EAAE,kCAAgB,CAAC,eAAe,EAAE;gBACjD,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,QAAQ,EAAE,CAAC,CAAC;oBACZ,QAAQ,EAAE,oBAAC,gCAAkB,OAAG;oBAChC,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,QAAQ;oBACtC,YAAY,EAAE,iBAAiB;oBAC/B,IAAI,EAAE,QAAQ;iBACf;aACF,CAAC;YACF,eAAe,EAAE,kCAAgB,CAAC,eAAe,EAAE;gBACjD,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,QAAQ,EAAE,CAAC,CAAC;oBACZ,QAAQ,EAAE,oBAAC,kCAAoB,OAAG;oBAClC,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,QAAQ;oBACtC,YAAY,EAAE,iBAAiB;oBAC/B,IAAI,EAAE,QAAQ;iBACf;aACF,CAAC;SACH,CAAC;QAEF,IAAI,cAAc,CAAC;QACnB,IAAI,SAAS,KAAK,SAAS,EAAE;YAC3B,cAAc,GAAG,SAAS,CAAC;SAC5B;aAAM,IAAI,KAAK,KAAK,IAAI,IAAI,YAAY,KAAK,IAAI,EAAE;YAClD,cAAc,GAAG,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC;YACpC,aAAa,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;YACnC,aAAa,CAAC,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC;SACxC;aAAM;YACL,IAAM,YAAY,GAAG,sBAAc,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;YAC7D,aAAa,CAAC,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC;YAC3C,aAAa,CAAC,OAAO,CAAC,OAAO,GAAG,gBAAQ,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YACjE,IAAI,YAAY,EAAE;gBAChB,cAAc,GAAG,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,MAAM,CAAC,YAAY,CAAC,CAAC;aACvD;iBAAM;gBACL,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;aACvC;SACF;QAED,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC;QACnC,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,GAAG,CAAC;QACnC,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,GAAG,CAAC;QACnC,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,SAAS,CAAC;QACzD,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,GAAG,MAAA,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,mCAAI,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,YAAY,CAAC,IAAI,SAAS,CAAC,CAAC;QACtH,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,gCAAc,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;QAC/E,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,gCAAc,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACpE,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,gCAAc,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC7E,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,gCAAc,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAEvE,KAAK,CAAC,eAAe,CAAC,WAAW,GAAG,gCAAc,CAAC,wBAAwB,EAAE,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QAChH,KAAK,CAAC,eAAe,CAAC,SAAS,GAAG,gCAAc,CAAC,KAAK,CAAC,eAAe,CAAC,SAAS,EAAE,wBAAwB,CAAC,CAAC;QAC5G,KAAK,CAAC,eAAe,CAAC,YAAY,GAAG,gCAAc,CAAC,KAAK,CAAC,eAAe,CAAC,YAAY,EAAE,wBAAwB,CAAC,CAAC;QAElH,KAAK,CAAC,eAAe,CAAC,WAAW,GAAG,gCAAc,CAAC,wBAAwB,EAAE,KAAK,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QAChH,KAAK,CAAC,eAAe,CAAC,SAAS,GAAG,gCAAc,CAAC,KAAK,CAAC,eAAe,CAAC,SAAS,EAAE,wBAAwB,CAAC,CAAC;QAC5G,KAAK,CAAC,eAAe,CAAC,YAAY,GAAG,gCAAc,CAAC,KAAK,CAAC,eAAe,CAAC,YAAY,EAAE,wBAAwB,CAAC,CAAC;QAElH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IA1RW,QAAA,sBAAsB,0BA0RjC","sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n mergeCallbacks,\n resolveShorthand,\n useControllableState,\n useTimeout,\n} from '@fluentui/react-utilities';\nimport { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';\nimport {\n SpinButtonProps,\n SpinButtonState,\n SpinButtonSpinState,\n SpinButtonChangeEvent,\n SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\ntype InternalState = {\n value: number | null;\n spinState: SpinButtonSpinState;\n spinTime: number;\n spinDelay: number;\n previousTextValue?: string;\n atBound: SpinButtonBounds;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease for the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\n });\n\n const overrides = useOverrides();\n\n const {\n value,\n displayValue,\n defaultValue,\n min,\n max,\n step = 1,\n stepPage = 1,\n precision: precisionFromProps,\n onChange,\n size = 'medium',\n appearance = overrides.inputDefaultAppearance ?? 'outline',\n root,\n input,\n incrementButton,\n decrementButton,\n } = props;\n\n const precision = React.useMemo(() => {\n return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n }, [precisionFromProps, step]);\n\n const [currentValue, setCurrentValue] = useControllableState({\n state: value,\n defaultState: defaultValue,\n initialState: 0,\n });\n\n const isControlled = value !== undefined;\n\n const [textValue, setTextValue] = React.useState<string | undefined>(undefined);\n const [keyboardSpinState, setKeyboardSpinState] = React.useState<SpinButtonSpinState>('rest');\n\n const internalState = React.useRef<InternalState>({\n value: currentValue,\n spinState: 'rest',\n spinTime: 0,\n spinDelay: DEFAULT_SPIN_DELAY_MS,\n atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none',\n });\n\n const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n const stepValue = (\n e: SpinButtonChangeEvent,\n direction: 'up' | 'down' | 'upPage' | 'downPage',\n startFrom?: string,\n ) => {\n let startValue = internalState.current.value;\n if (startFrom) {\n const num = parseFloat(startFrom);\n if (!isNaN(num)) {\n startValue = num;\n }\n }\n const val = startValue;\n const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n if (val === null) {\n const stepStart = min === undefined ? 0 : min;\n const nullStep = clamp(stepStart + stepSize * dir, min, max);\n commit(e, nullStep);\n return;\n }\n\n let newValue = val + stepSize * dir;\n if (!Number.isNaN(newValue)) {\n newValue = clamp(newValue, min, max);\n }\n\n commit(e, newValue);\n\n if (internalState.current.spinState !== 'rest') {\n setStepTimeout(() => {\n // Ease the step speed a bit\n internalState.current.spinTime += internalState.current.spinDelay;\n internalState.current.spinDelay = lerp(\n DEFAULT_SPIN_DELAY_MS,\n MIN_SPIN_DELAY_MS,\n internalState.current.spinTime / MAX_SPIN_TIME_MS,\n );\n stepValue(e, direction);\n }, internalState.current.spinDelay);\n }\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!internalState.current.previousTextValue) {\n internalState.current.previousTextValue = textValue ?? String(currentValue);\n }\n const newValue = e.target.value;\n setTextValue(newValue);\n };\n\n const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'up';\n stepValue(e, 'up');\n };\n\n const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n internalState.current.spinState = 'down';\n stepValue(e, 'down');\n };\n\n const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n clearStepTimeout();\n internalState.current.spinState = 'rest';\n internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n internalState.current.spinTime = 0;\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n let nextKeyboardSpinState: SpinButtonSpinState = 'rest';\n\n if (e.key === ArrowUp) {\n stepValue(e, 'up', textValue);\n nextKeyboardSpinState = 'up';\n } else if (e.key === ArrowDown) {\n stepValue(e, 'down', textValue);\n nextKeyboardSpinState = 'down';\n } else if (e.key === PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage', textValue);\n nextKeyboardSpinState = 'up';\n } else if (e.key === PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage', textValue);\n nextKeyboardSpinState = 'down';\n } else if (!e.shiftKey && e.key === Home && min !== undefined) {\n commit(e, min);\n nextKeyboardSpinState = 'down';\n } else if (!e.shiftKey && e.key === End && max !== undefined) {\n commit(e, max);\n nextKeyboardSpinState = 'up';\n } else if (e.key === Enter) {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n } else if (e.key === Escape) {\n if (internalState.current.previousTextValue) {\n setTextValue(undefined);\n internalState.current.previousTextValue = undefined;\n }\n }\n\n if (keyboardSpinState !== nextKeyboardSpinState) {\n setKeyboardSpinState(nextKeyboardSpinState);\n }\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (keyboardSpinState !== 'rest') {\n setKeyboardSpinState('rest');\n internalState.current.spinState = 'rest';\n }\n };\n\n const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n const valueChanged = newValue !== undefined && currentValue !== newValue;\n const displayValueChanged =\n newDisplayValue !== undefined &&\n internalState.current.previousTextValue !== undefined &&\n internalState.current.previousTextValue !== newDisplayValue;\n\n let roundedValue;\n if (valueChanged) {\n roundedValue = precisionRound(newValue!, precision);\n setCurrentValue(roundedValue);\n } else if (displayValueChanged && !isControlled) {\n const nextValue = parseFloat(newDisplayValue as string);\n if (!isNaN(nextValue)) {\n setCurrentValue(precisionRound(nextValue, precision));\n }\n }\n\n if (valueChanged || displayValueChanged) {\n onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n }\n\n setTextValue(undefined);\n };\n\n const state: SpinButtonState = {\n size,\n appearance,\n spinState: keyboardSpinState,\n atBound: internalState.current.atBound,\n\n components: {\n root: 'span',\n input: 'input',\n incrementButton: 'button',\n decrementButton: 'button',\n },\n root: resolveShorthand(root, {\n required: true,\n defaultProps: nativeProps.root,\n }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n ref,\n autoComplete: 'off',\n role: 'spinbutton',\n appearance,\n type: 'text',\n ...nativeProps.primary,\n },\n }),\n incrementButton: resolveShorthand(incrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronUp16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Increment value',\n type: 'button',\n },\n }),\n decrementButton: resolveShorthand(decrementButton, {\n required: true,\n defaultProps: {\n tabIndex: -1,\n children: <ChevronDown16Regular />,\n disabled: nativeProps.primary.disabled,\n 'aria-label': 'Decrement value',\n type: 'button',\n },\n }),\n };\n\n let valueToDisplay;\n if (textValue !== undefined) {\n valueToDisplay = textValue;\n } else if (value === null || currentValue === null) {\n valueToDisplay = displayValue ?? '';\n internalState.current.value = null;\n internalState.current.atBound = 'none';\n } else {\n const roundedValue = precisionRound(currentValue, precision);\n internalState.current.value = roundedValue;\n internalState.current.atBound = getBound(roundedValue, min, max);\n if (isControlled) {\n valueToDisplay = displayValue ?? String(roundedValue);\n } else {\n valueToDisplay = String(roundedValue);\n }\n }\n\n state.input.value = valueToDisplay;\n state.input['aria-valuemin'] = min;\n state.input['aria-valuemax'] = max;\n state.input['aria-valuenow'] = currentValue ?? undefined;\n state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n\n state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n return state;\n};\n"]}
|