@fluentui/react-spinbutton 9.0.12 → 9.0.13
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/CHANGELOG.json +60 -1
- package/CHANGELOG.md +16 -2
- package/lib/components/SpinButton/SpinButton.js +0 -1
- package/lib/components/SpinButton/SpinButton.js.map +1 -1
- package/lib/components/SpinButton/renderSpinButton.js +8 -5
- package/lib/components/SpinButton/renderSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButton.js +2 -33
- package/lib/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib/components/SpinButton/useSpinButtonStyles.js +251 -256
- package/lib/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/lib/components/SpinButtonField/SpinButtonField.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/clamp.js +0 -6
- package/lib/utils/clamp.js.map +1 -1
- package/lib/utils/getBound.js +0 -2
- package/lib/utils/getBound.js.map +1 -1
- package/lib/utils/precision.js +0 -5
- package/lib/utils/precision.js.map +1 -1
- package/lib-commonjs/SpinButton.js +0 -2
- package/lib-commonjs/SpinButton.js.map +1 -1
- package/lib-commonjs/SpinButtonField.js +0 -2
- package/lib-commonjs/SpinButtonField.js.map +1 -1
- package/lib-commonjs/components/SpinButton/SpinButton.js +0 -6
- package/lib-commonjs/components/SpinButton/SpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/SpinButton.types.js.map +1 -1
- package/lib-commonjs/components/SpinButton/index.js +0 -6
- package/lib-commonjs/components/SpinButton/index.js.map +1 -1
- package/lib-commonjs/components/SpinButton/renderSpinButton.js +8 -9
- package/lib-commonjs/components/SpinButton/renderSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButton.js +2 -40
- package/lib-commonjs/components/SpinButton/useSpinButton.js.map +1 -1
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js +251 -261
- package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SpinButtonField/SpinButtonField.js +0 -4
- package/lib-commonjs/components/SpinButtonField/SpinButtonField.js.map +1 -1
- package/lib-commonjs/components/SpinButtonField/index.js +0 -2
- package/lib-commonjs/components/SpinButtonField/index.js.map +1 -1
- package/lib-commonjs/index.js +0 -4
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/clamp.js +0 -8
- package/lib-commonjs/utils/clamp.js.map +1 -1
- package/lib-commonjs/utils/getBound.js +0 -4
- package/lib-commonjs/utils/getBound.js.map +1 -1
- package/lib-commonjs/utils/index.js +0 -4
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/precision.js +0 -8
- package/lib-commonjs/utils/precision.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,66 @@
|
|
2
2
|
"name": "@fluentui/react-spinbutton",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "Wed,
|
5
|
+
"date": "Wed, 04 Jan 2023 01:35:49 GMT",
|
6
|
+
"tag": "@fluentui/react-spinbutton_v9.0.13",
|
7
|
+
"version": "9.0.13",
|
8
|
+
"comments": {
|
9
|
+
"patch": [
|
10
|
+
{
|
11
|
+
"author": "olfedias@microsoft.com",
|
12
|
+
"package": "@fluentui/react-spinbutton",
|
13
|
+
"commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
|
14
|
+
"comment": "chore: Update Griffel to latest version"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "beachball",
|
18
|
+
"package": "@fluentui/react-spinbutton",
|
19
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.13",
|
20
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "beachball",
|
24
|
+
"package": "@fluentui/react-spinbutton",
|
25
|
+
"comment": "Bump @fluentui/react-input to v9.2.10",
|
26
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "beachball",
|
30
|
+
"package": "@fluentui/react-spinbutton",
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v9.3.1",
|
32
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
33
|
+
},
|
34
|
+
{
|
35
|
+
"author": "beachball",
|
36
|
+
"package": "@fluentui/react-spinbutton",
|
37
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
|
38
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
39
|
+
},
|
40
|
+
{
|
41
|
+
"author": "beachball",
|
42
|
+
"package": "@fluentui/react-spinbutton",
|
43
|
+
"comment": "Bump @fluentui/react-label to v9.0.15",
|
44
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
45
|
+
}
|
46
|
+
],
|
47
|
+
"none": [
|
48
|
+
{
|
49
|
+
"author": "martinhochel@microsoft.com",
|
50
|
+
"package": "@fluentui/react-spinbutton",
|
51
|
+
"commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
|
52
|
+
"comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
|
53
|
+
},
|
54
|
+
{
|
55
|
+
"author": "martinhochel@microsoft.com",
|
56
|
+
"package": "@fluentui/react-spinbutton",
|
57
|
+
"commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
|
58
|
+
"comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
|
59
|
+
}
|
60
|
+
]
|
61
|
+
}
|
62
|
+
},
|
63
|
+
{
|
64
|
+
"date": "Wed, 21 Dec 2022 10:20:31 GMT",
|
6
65
|
"tag": "@fluentui/react-spinbutton_v9.0.12",
|
7
66
|
"version": "9.0.12",
|
8
67
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,26 @@
|
|
1
1
|
# Change Log - @fluentui/react-spinbutton
|
2
2
|
|
3
|
-
This log was last generated on Wed,
|
3
|
+
This log was last generated on Wed, 04 Jan 2023 01:35:49 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.13)
|
8
|
+
|
9
|
+
Wed, 04 Jan 2023 01:35:49 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.12..@fluentui/react-spinbutton_v9.0.13)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
|
15
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.13 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
16
|
+
- Bump @fluentui/react-input to v9.2.10 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
17
|
+
- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
19
|
+
- Bump @fluentui/react-label to v9.0.15 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
20
|
+
|
7
21
|
## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.0.12)
|
8
22
|
|
9
|
-
Wed, 21 Dec 2022 10:
|
23
|
+
Wed, 21 Dec 2022 10:20:31 GMT
|
10
24
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.0.11..@fluentui/react-spinbutton_v9.0.12)
|
11
25
|
|
12
26
|
### Patches
|
@@ -5,7 +5,6 @@ import { useSpinButtonStyles_unstable } from './useSpinButtonStyles';
|
|
5
5
|
/**
|
6
6
|
* A SpinButton allows someone to incrementally adjust a value in small steps.
|
7
7
|
*/
|
8
|
-
|
9
8
|
export const SpinButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
9
|
const state = useSpinButton_unstable(props, ref);
|
11
10
|
useSpinButtonStyles_unstable(state);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,4BAA4B,QAAQ,uBAAuB;AAIpE;;;AAGA,OAAO,MAAMC,UAAU,gBAAyCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,sBAAsB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEhDJ,4BAA4B,CAACK,KAAK,CAAC;EACnC,OAAON,yBAAyB,CAACM,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFJ,UAAU,CAACK,WAAW,GAAG,YAAY","names":["React","useSpinButton_unstable","renderSpinButton_unstable","useSpinButtonStyles_unstable","SpinButton","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx"],"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';\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 return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"]}
|
@@ -3,7 +3,6 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
4
4
|
* Render the final JSX of SpinButton
|
5
5
|
*/
|
6
|
-
|
7
6
|
export const renderSpinButton_unstable = state => {
|
8
7
|
// Leaving this here for now.
|
9
8
|
// This is the approach using react-input's Input component.
|
@@ -28,10 +27,14 @@ export const renderSpinButton_unstable = state => {
|
|
28
27
|
slots,
|
29
28
|
slotProps
|
30
29
|
} = getSlots(state);
|
31
|
-
return /*#__PURE__*/React.createElement(slots.root, {
|
32
|
-
|
33
|
-
}
|
34
|
-
|
30
|
+
return /*#__PURE__*/React.createElement(slots.root, {
|
31
|
+
...slotProps.root
|
32
|
+
}, /*#__PURE__*/React.createElement(slots.input, {
|
33
|
+
...slotProps.input
|
34
|
+
}), /*#__PURE__*/React.createElement(slots.incrementButton, {
|
35
|
+
...slotProps.incrementButton
|
36
|
+
}), /*#__PURE__*/React.createElement(slots.decrementButton, {
|
37
|
+
...slotProps.decrementButton
|
35
38
|
}));
|
36
39
|
};
|
37
40
|
//# sourceMappingURL=renderSpinButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAsB,IAAI;EAClE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAkBE,KAAK,CAAC;EAE7D,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,eACpCP,oBAACI,KAAK,CAACI,eAAe;IAAA,GAAKH,SAAS,CAACG;EAAe,EAAI,eACxDR,oBAACI,KAAK,CAACK,eAAe;IAAA,GAAKJ,SAAS,CAACI;EAAe,EAAI,CAC7C;AAEjB,CAAC","names":["React","getSlots","renderSpinButton_unstable","state","slots","slotProps","root","input","incrementButton","decrementButton"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/components/SpinButton/renderSpinButton.tsx"],"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 // Leaving this here for now.\n // This is the approach using react-input's Input component.\n // It has some Typescript problems and feels hacky.\n // const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n // const { contentAfter, ...otherInputSlotProps } = slotProps.input as SpinButtonSlots['input'];\n // const inputContentAfter = {\n // ...contentAfter,\n // children: (\n // <>\n // <slots.incrementButton {...slotProps.incrementButton} />\n // <slots.decrementButton {...slotProps.decrementButton} />\n // </>\n // ),\n // };\n\n // return (\n // <slots.root {...slotProps.root}>\n // <slots.input {...otherInputSlotProps} contentAfter={inputContentAfter}/>\n // </slots.root>\n // );\n\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"]}
|
@@ -5,10 +5,10 @@ import { calculatePrecision, precisionRound, getBound, clamp } from '../../utils
|
|
5
5
|
import { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';
|
6
6
|
const DEFAULT_SPIN_DELAY_MS = 150;
|
7
7
|
const MIN_SPIN_DELAY_MS = 80;
|
8
|
-
const MAX_SPIN_TIME_MS = 1000;
|
8
|
+
const MAX_SPIN_TIME_MS = 1000;
|
9
|
+
// This is here to give an ease the mouse held down case.
|
9
10
|
// Exact easing it to be defined. Once it is we'll likely
|
10
11
|
// pull this out into a util function in the SpinButton package.
|
11
|
-
|
12
12
|
const lerp = (start, end, percent) => start + (end - start) * percent;
|
13
13
|
/**
|
14
14
|
* Create the state required to render SpinButton.
|
@@ -19,11 +19,8 @@ const lerp = (start, end, percent) => start + (end - start) * percent;
|
|
19
19
|
* @param props - props from this instance of SpinButton
|
20
20
|
* @param ref - reference to root HTMLElement of SpinButton
|
21
21
|
*/
|
22
|
-
|
23
|
-
|
24
22
|
export const useSpinButton_unstable = (props, ref) => {
|
25
23
|
var _a;
|
26
|
-
|
27
24
|
const nativeProps = getPartitionedNativeProps({
|
28
25
|
props,
|
29
26
|
primarySlotTagName: 'input',
|
@@ -65,37 +62,28 @@ export const useSpinButton_unstable = (props, ref) => {
|
|
65
62
|
atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none'
|
66
63
|
});
|
67
64
|
const [setStepTimeout, clearStepTimeout] = useTimeout();
|
68
|
-
|
69
65
|
const stepValue = (e, direction, startFrom) => {
|
70
66
|
let startValue = internalState.current.value;
|
71
|
-
|
72
67
|
if (startFrom) {
|
73
68
|
const num = parseFloat(startFrom);
|
74
|
-
|
75
69
|
if (!isNaN(num)) {
|
76
70
|
startValue = num;
|
77
71
|
}
|
78
72
|
}
|
79
|
-
|
80
73
|
const val = startValue;
|
81
74
|
const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
|
82
75
|
const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
|
83
|
-
|
84
76
|
if (val === null) {
|
85
77
|
const stepStart = min === undefined ? 0 : min;
|
86
78
|
const nullStep = clamp(stepStart + stepSize * dir, min, max);
|
87
79
|
commit(e, nullStep);
|
88
80
|
return;
|
89
81
|
}
|
90
|
-
|
91
82
|
let newValue = val + stepSize * dir;
|
92
|
-
|
93
83
|
if (!Number.isNaN(newValue)) {
|
94
84
|
newValue = clamp(newValue, min, max);
|
95
85
|
}
|
96
|
-
|
97
86
|
commit(e, newValue);
|
98
|
-
|
99
87
|
if (internalState.current.spinState !== 'rest') {
|
100
88
|
setStepTimeout(() => {
|
101
89
|
// Ease the step speed a bit
|
@@ -105,41 +93,33 @@ export const useSpinButton_unstable = (props, ref) => {
|
|
105
93
|
}, internalState.current.spinDelay);
|
106
94
|
}
|
107
95
|
};
|
108
|
-
|
109
96
|
const handleInputChange = e => {
|
110
97
|
if (!internalState.current.previousTextValue) {
|
111
98
|
internalState.current.previousTextValue = textValue;
|
112
99
|
}
|
113
|
-
|
114
100
|
const newValue = e.target.value;
|
115
101
|
setTextValue(newValue);
|
116
102
|
};
|
117
|
-
|
118
103
|
const handleIncrementMouseDown = e => {
|
119
104
|
internalState.current.spinState = 'up';
|
120
105
|
stepValue(e, 'up');
|
121
106
|
};
|
122
|
-
|
123
107
|
const handleDecrementMouseDown = e => {
|
124
108
|
internalState.current.spinState = 'down';
|
125
109
|
stepValue(e, 'down');
|
126
110
|
};
|
127
|
-
|
128
111
|
const handleStepMouseUpOrLeave = e => {
|
129
112
|
clearStepTimeout();
|
130
113
|
internalState.current.spinState = 'rest';
|
131
114
|
internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;
|
132
115
|
internalState.current.spinTime = 0;
|
133
116
|
};
|
134
|
-
|
135
117
|
const handleBlur = e => {
|
136
118
|
commit(e, currentValue, textValue);
|
137
119
|
internalState.current.previousTextValue = undefined;
|
138
120
|
};
|
139
|
-
|
140
121
|
const handleKeyDown = e => {
|
141
122
|
let nextKeyboardSpinState = 'rest';
|
142
|
-
|
143
123
|
if (e.key === Keys.ArrowUp) {
|
144
124
|
stepValue(e, 'up', textValue);
|
145
125
|
nextKeyboardSpinState = 'up';
|
@@ -169,45 +149,37 @@ export const useSpinButton_unstable = (props, ref) => {
|
|
169
149
|
internalState.current.previousTextValue = undefined;
|
170
150
|
}
|
171
151
|
}
|
172
|
-
|
173
152
|
if (keyboardSpinState !== nextKeyboardSpinState) {
|
174
153
|
setKeyboardSpinState(nextKeyboardSpinState);
|
175
154
|
}
|
176
155
|
};
|
177
|
-
|
178
156
|
const handleKeyUp = e => {
|
179
157
|
if (keyboardSpinState !== 'rest') {
|
180
158
|
setKeyboardSpinState('rest');
|
181
159
|
internalState.current.spinState = 'rest';
|
182
160
|
}
|
183
161
|
};
|
184
|
-
|
185
162
|
const commit = (e, newValue, newDisplayValue) => {
|
186
163
|
const valueChanged = newValue !== undefined && currentValue !== newValue;
|
187
164
|
const displayValueChanged = newDisplayValue !== undefined && internalState.current.previousTextValue !== undefined && internalState.current.previousTextValue !== newDisplayValue;
|
188
165
|
let roundedValue;
|
189
|
-
|
190
166
|
if (valueChanged) {
|
191
167
|
roundedValue = precisionRound(newValue, precision);
|
192
168
|
setCurrentValue(roundedValue);
|
193
169
|
} else if (displayValueChanged && !isControlled) {
|
194
170
|
const nextValue = parseFloat(newDisplayValue);
|
195
|
-
|
196
171
|
if (!isNaN(nextValue)) {
|
197
172
|
setCurrentValue(precisionRound(nextValue, precision));
|
198
173
|
}
|
199
174
|
}
|
200
|
-
|
201
175
|
if (valueChanged || displayValueChanged) {
|
202
176
|
onChange === null || onChange === void 0 ? void 0 : onChange(e, {
|
203
177
|
value: roundedValue,
|
204
178
|
displayValue: newDisplayValue
|
205
179
|
});
|
206
180
|
}
|
207
|
-
|
208
181
|
setTextValue(undefined);
|
209
182
|
};
|
210
|
-
|
211
183
|
const state = {
|
212
184
|
size,
|
213
185
|
appearance,
|
@@ -256,7 +228,6 @@ export const useSpinButton_unstable = (props, ref) => {
|
|
256
228
|
})
|
257
229
|
};
|
258
230
|
let valueToDisplay;
|
259
|
-
|
260
231
|
if (textValue !== undefined) {
|
261
232
|
valueToDisplay = textValue;
|
262
233
|
} else if (value === null || currentValue === null) {
|
@@ -267,14 +238,12 @@ export const useSpinButton_unstable = (props, ref) => {
|
|
267
238
|
const roundedValue = precisionRound(currentValue, precision);
|
268
239
|
internalState.current.value = roundedValue;
|
269
240
|
internalState.current.atBound = getBound(roundedValue, min, max);
|
270
|
-
|
271
241
|
if (isControlled) {
|
272
242
|
valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
|
273
243
|
} else {
|
274
244
|
valueToDisplay = String(roundedValue);
|
275
245
|
}
|
276
246
|
}
|
277
|
-
|
278
247
|
state.input.value = valueToDisplay;
|
279
248
|
state.input['aria-valuemin'] = min;
|
280
249
|
state.input['aria-valuemax'] = max;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"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 * as Keys 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';\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 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 {\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 = '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;\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 === Keys.ArrowUp) {\n stepValue(e, 'up', textValue);\n nextKeyboardSpinState = 'up';\n } else if (e.key === Keys.ArrowDown) {\n stepValue(e, 'down', textValue);\n nextKeyboardSpinState = 'down';\n } else if (e.key === Keys.PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage', textValue);\n nextKeyboardSpinState = 'up';\n } else if (e.key === Keys.PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage', textValue);\n nextKeyboardSpinState = 'down';\n } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n commit(e, min);\n nextKeyboardSpinState = 'down';\n } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n commit(e, max);\n nextKeyboardSpinState = 'up';\n } else if (e.key === Keys.Enter) {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n } else if (e.key === Keys.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"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"mappings":"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","names":["React","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useControllableState","useTimeout","Keys","calculatePrecision","precisionRound","getBound","clamp","ChevronUp16Regular","ChevronDown16Regular","DEFAULT_SPIN_DELAY_MS","MIN_SPIN_DELAY_MS","MAX_SPIN_TIME_MS","lerp","start","end","percent","useSpinButton_unstable","props","ref","nativeProps","primarySlotTagName","excludedPropNames","value","displayValue","defaultValue","min","max","step","stepPage","precision","precisionFromProps","onChange","size","appearance","root","input","incrementButton","decrementButton","useMemo","Math","currentValue","setCurrentValue","state","defaultState","initialState","isControlled","undefined","textValue","setTextValue","useState","keyboardSpinState","setKeyboardSpinState","internalState","useRef","spinState","spinTime","spinDelay","atBound","setStepTimeout","clearStepTimeout","stepValue","e","direction","startFrom","startValue","current","num","parseFloat","isNaN","val","dir","stepSize","stepStart","nullStep","commit","newValue","Number","handleInputChange","previousTextValue","target","handleIncrementMouseDown","handleDecrementMouseDown","handleStepMouseUpOrLeave","handleBlur","handleKeyDown","nextKeyboardSpinState","key","ArrowUp","ArrowDown","PageUp","preventDefault","PageDown","shiftKey","Home","End","Enter","Escape","handleKeyUp","newDisplayValue","valueChanged","displayValueChanged","roundedValue","nextValue","components","required","defaultProps","autoComplete","role","type","primary","tabIndex","children","disabled","valueToDisplay","String","onBlur","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getPartitionedNativeProps,\n mergeCallbacks,\n resolveShorthand,\n useControllableState,\n useTimeout,\n} from '@fluentui/react-utilities';\nimport * as Keys 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';\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 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 {\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 = '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;\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 === Keys.ArrowUp) {\n stepValue(e, 'up', textValue);\n nextKeyboardSpinState = 'up';\n } else if (e.key === Keys.ArrowDown) {\n stepValue(e, 'down', textValue);\n nextKeyboardSpinState = 'down';\n } else if (e.key === Keys.PageUp) {\n e.preventDefault();\n stepValue(e, 'upPage', textValue);\n nextKeyboardSpinState = 'up';\n } else if (e.key === Keys.PageDown) {\n e.preventDefault();\n stepValue(e, 'downPage', textValue);\n nextKeyboardSpinState = 'down';\n } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n commit(e, min);\n nextKeyboardSpinState = 'down';\n } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n commit(e, max);\n nextKeyboardSpinState = 'up';\n } else if (e.key === Keys.Enter) {\n commit(e, currentValue, textValue);\n internalState.current.previousTextValue = undefined;\n } else if (e.key === Keys.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"]}
|