@fluentui/react-spinbutton 9.2.4 → 9.2.5
Sign up to get free protection for your applications and to get access to all the features.
- package/.swcrc +30 -0
- package/CHANGELOG.json +70 -1
- package/CHANGELOG.md +20 -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":"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","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"]}
|