@khanacademy/wonder-blocks-timing 1.2.3 → 2.0.3
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/dist/es/index.js +151 -48
- package/dist/index.js +309 -159
- package/docs.md +28 -18
- package/package.json +4 -4
- package/src/components/__tests__/action-scheduler-provider.test.js +3 -3
- package/src/components/action-scheduler-provider.js +2 -2
- package/src/components/with-action-scheduler.js +8 -4
- package/src/hooks/__tests__/use-timeout.test.js +336 -0
- package/src/hooks/use-timeout.js +70 -0
- package/src/hooks/use-timeout.stories.mdx +152 -0
- package/src/index.js +2 -0
- package/src/util/__tests__/action-scheduler.test.js +103 -88
- package/src/util/__tests__/animation-frame.test.js +29 -20
- package/src/util/__tests__/interval.test.js +51 -25
- package/src/util/__tests__/timeout.test.js +35 -20
- package/src/util/action-scheduler.js +41 -16
- package/src/util/animation-frame.js +26 -13
- package/src/util/interval.js +19 -13
- package/src/util/policies.js +10 -0
- package/src/util/timeout.js +23 -13
- package/src/util/types.js +26 -26
package/src/util/timeout.js
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
// @flow
|
|
2
|
-
import
|
|
2
|
+
import {
|
|
3
|
+
SchedulePolicy as SchedulePolicies,
|
|
4
|
+
ClearPolicy as ClearPolicies,
|
|
5
|
+
} from "./policies.js";
|
|
6
|
+
|
|
7
|
+
import type {ITimeout, SchedulePolicy, ClearPolicy} from "./types.js";
|
|
3
8
|
|
|
4
9
|
/**
|
|
5
10
|
* Encapsulates everything associated with calling setTimeout/clearTimeout, and
|
|
@@ -22,15 +27,16 @@ export default class Timeout implements ITimeout {
|
|
|
22
27
|
* @param {() => mixed} action The action to be invoked when the timeout
|
|
23
28
|
* period has passed.
|
|
24
29
|
* @param {number} timeoutMs The timeout period.
|
|
25
|
-
* @param {
|
|
26
|
-
*
|
|
27
|
-
*
|
|
30
|
+
* @param {SchedulePolicy} [schedulePolicy] When SchedulePolicy.Immediately,
|
|
31
|
+
* the timer is set immediately on instantiation; otherwise, `set` must be
|
|
32
|
+
* called to set the timeout.
|
|
33
|
+
* Defaults to `SchedulePolicy.Immediately`.
|
|
28
34
|
* @memberof Timeout
|
|
29
35
|
*/
|
|
30
36
|
constructor(
|
|
31
37
|
action: () => mixed,
|
|
32
38
|
timeoutMs: number,
|
|
33
|
-
|
|
39
|
+
schedulePolicy: SchedulePolicy = SchedulePolicies.Immediately,
|
|
34
40
|
) {
|
|
35
41
|
if (typeof action !== "function") {
|
|
36
42
|
throw new Error("Action must be a function");
|
|
@@ -43,7 +49,7 @@ export default class Timeout implements ITimeout {
|
|
|
43
49
|
this._action = action;
|
|
44
50
|
this._timeoutMs = timeoutMs;
|
|
45
51
|
|
|
46
|
-
if (
|
|
52
|
+
if (schedulePolicy === SchedulePolicies.Immediately) {
|
|
47
53
|
this.set();
|
|
48
54
|
}
|
|
49
55
|
}
|
|
@@ -70,9 +76,12 @@ export default class Timeout implements ITimeout {
|
|
|
70
76
|
*/
|
|
71
77
|
set(): void {
|
|
72
78
|
if (this.isSet) {
|
|
73
|
-
this.clear(
|
|
79
|
+
this.clear(ClearPolicies.Cancel);
|
|
74
80
|
}
|
|
75
|
-
this._timeoutId = setTimeout(
|
|
81
|
+
this._timeoutId = setTimeout(
|
|
82
|
+
() => this.clear(ClearPolicies.Resolve),
|
|
83
|
+
this._timeoutMs,
|
|
84
|
+
);
|
|
76
85
|
}
|
|
77
86
|
|
|
78
87
|
/**
|
|
@@ -81,21 +90,22 @@ export default class Timeout implements ITimeout {
|
|
|
81
90
|
* If the timeout is pending, this cancels that pending timeout without
|
|
82
91
|
* invoking the action. If no timeout is pending, this does nothing.
|
|
83
92
|
*
|
|
84
|
-
* @param {
|
|
85
|
-
* the
|
|
86
|
-
*
|
|
93
|
+
* @param {ClearPolicy} [policy] When ClearPolicy.Resolve, if the request
|
|
94
|
+
* was set when called, the request action is invoked after cancelling
|
|
95
|
+
* the request; otherwise, the pending action is cancelled.
|
|
96
|
+
* Defaults to `ClearPolicy.Cancel`.
|
|
87
97
|
*
|
|
88
98
|
* @returns {void}
|
|
89
99
|
* @memberof Timeout
|
|
90
100
|
*/
|
|
91
|
-
clear(
|
|
101
|
+
clear(policy: ClearPolicy = ClearPolicies.Cancel): void {
|
|
92
102
|
const timeoutId = this._timeoutId;
|
|
93
103
|
this._timeoutId = null;
|
|
94
104
|
if (timeoutId == null) {
|
|
95
105
|
return;
|
|
96
106
|
}
|
|
97
107
|
clearTimeout(timeoutId);
|
|
98
|
-
if (
|
|
108
|
+
if (policy === ClearPolicies.Resolve) {
|
|
99
109
|
this._action();
|
|
100
110
|
}
|
|
101
111
|
}
|
package/src/util/types.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
// @flow
|
|
2
|
+
export type SchedulePolicy = "schedule-immediately" | "schedule-on-demand";
|
|
3
|
+
|
|
4
|
+
export type ClearPolicy = "resolve-on-clear" | "cancel-on-clear";
|
|
2
5
|
|
|
3
6
|
/**
|
|
4
7
|
* Encapsulates everything associated with calling setTimeout/clearTimeout, and
|
|
@@ -35,13 +38,14 @@ export interface ITimeout {
|
|
|
35
38
|
* If the timeout is pending, this cancels that pending timeout. If no
|
|
36
39
|
* timeout is pending, this does nothing.
|
|
37
40
|
*
|
|
38
|
-
* @param {
|
|
39
|
-
* the
|
|
40
|
-
*
|
|
41
|
+
* @param {ClearPolicy} [policy] When ClearPolicy.Resolve, if the request
|
|
42
|
+
* was set when called, the request action is invoked after cancelling
|
|
43
|
+
* the request; otherwise, the pending action is cancelled.
|
|
44
|
+
* Defaults to `ClearPolicy.Cancel`.
|
|
41
45
|
*
|
|
42
46
|
* @memberof ITimeout
|
|
43
47
|
*/
|
|
44
|
-
clear(
|
|
48
|
+
clear(policy?: ClearPolicy): void;
|
|
45
49
|
}
|
|
46
50
|
|
|
47
51
|
/**
|
|
@@ -77,13 +81,14 @@ export interface IInterval {
|
|
|
77
81
|
* If the interval is active, this cancels that interval. If the interval
|
|
78
82
|
* is not active, this does nothing.
|
|
79
83
|
*
|
|
80
|
-
* @param {
|
|
81
|
-
* called, the
|
|
82
|
-
*
|
|
84
|
+
* @param {ClearPolicy} [policy] When ClearPolicy.Resolve, if the request
|
|
85
|
+
* was set when called, the request action is invoked after cancelling
|
|
86
|
+
* the request; otherwise, the pending action is cancelled.
|
|
87
|
+
* Defaults to `ClearPolicy.Cancel`.
|
|
83
88
|
*
|
|
84
89
|
* @memberof IInterval
|
|
85
90
|
*/
|
|
86
|
-
clear(
|
|
91
|
+
clear(policy?: ClearPolicy): void;
|
|
87
92
|
}
|
|
88
93
|
|
|
89
94
|
/**
|
|
@@ -121,15 +126,21 @@ export interface IAnimationFrame {
|
|
|
121
126
|
* If the request is pending, this cancels that pending request. If no
|
|
122
127
|
* request is pending, this does nothing.
|
|
123
128
|
*
|
|
124
|
-
* @param {
|
|
125
|
-
* the request action is invoked after cancelling
|
|
126
|
-
*
|
|
129
|
+
* @param {ClearPolicy} [policy] When ClearPolicy.Resolve, if the request
|
|
130
|
+
* was set when called, the request action is invoked after cancelling
|
|
131
|
+
* the request; otherwise, the pending action is cancelled.
|
|
132
|
+
* Defaults to `ClearPolicy.Cancel`.
|
|
127
133
|
*
|
|
128
134
|
* @memberof IAnimationFrame
|
|
129
135
|
*/
|
|
130
|
-
clear(
|
|
136
|
+
clear(policy?: ClearPolicy): void;
|
|
131
137
|
}
|
|
132
138
|
|
|
139
|
+
export type Options = {|
|
|
140
|
+
schedulePolicy?: SchedulePolicy,
|
|
141
|
+
clearPolicy?: ClearPolicy,
|
|
142
|
+
|};
|
|
143
|
+
|
|
133
144
|
/**
|
|
134
145
|
* Provides means to request timeouts, intervals, and animation frames, with
|
|
135
146
|
* additional support for clearing all requested actions.
|
|
@@ -161,12 +172,7 @@ export interface IScheduleActions {
|
|
|
161
172
|
* @returns {ITimeout} A interface for manipulating the created timeout.
|
|
162
173
|
* @memberof IScheduleActions
|
|
163
174
|
*/
|
|
164
|
-
timeout(
|
|
165
|
-
action: () => mixed,
|
|
166
|
-
period: number,
|
|
167
|
-
autoSchedule?: boolean,
|
|
168
|
-
resolveOnClear?: boolean,
|
|
169
|
-
): ITimeout;
|
|
175
|
+
timeout(action: () => mixed, period: number, options?: Options): ITimeout;
|
|
170
176
|
|
|
171
177
|
/**
|
|
172
178
|
* Request an interval.
|
|
@@ -189,12 +195,7 @@ export interface IScheduleActions {
|
|
|
189
195
|
* @returns {IInterval} An interface for manipulating the created interval.
|
|
190
196
|
* @memberof IScheduleActions
|
|
191
197
|
*/
|
|
192
|
-
interval(
|
|
193
|
-
action: () => mixed,
|
|
194
|
-
period: number,
|
|
195
|
-
autoSchedule?: boolean,
|
|
196
|
-
resolveOnClear?: boolean,
|
|
197
|
-
): IInterval;
|
|
198
|
+
interval(action: () => mixed, period: number, options?: Options): IInterval;
|
|
198
199
|
|
|
199
200
|
/**
|
|
200
201
|
* Request an animation frame.
|
|
@@ -216,8 +217,7 @@ export interface IScheduleActions {
|
|
|
216
217
|
*/
|
|
217
218
|
animationFrame(
|
|
218
219
|
action: (time: DOMHighResTimeStamp) => void,
|
|
219
|
-
|
|
220
|
-
resolveOnClear?: boolean,
|
|
220
|
+
options?: Options,
|
|
221
221
|
): IAnimationFrame;
|
|
222
222
|
|
|
223
223
|
/**
|