@khanacademy/wonder-blocks-timing 7.0.2 → 7.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/CHANGELOG.md +6 -0
- package/dist/es/index.js +10 -291
- package/dist/index.js +10 -291
- package/package.json +15 -8
package/CHANGELOG.md
CHANGED
package/dist/es/index.js
CHANGED
|
@@ -1,304 +1,23 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useRef, useEffect, useMemo } from 'react';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
SchedulePolicy["Immediately"] = "schedule-immediately";
|
|
6
|
-
SchedulePolicy["OnDemand"] = "schedule-on-demand";
|
|
7
|
-
return SchedulePolicy;
|
|
8
|
-
}({});
|
|
9
|
-
let ClearPolicy = function (ClearPolicy) {
|
|
10
|
-
ClearPolicy["Resolve"] = "resolve-on-clear";
|
|
11
|
-
ClearPolicy["Cancel"] = "cancel-on-clear";
|
|
12
|
-
return ClearPolicy;
|
|
13
|
-
}({});
|
|
14
|
-
let ActionPolicy = function (ActionPolicy) {
|
|
15
|
-
ActionPolicy["Reset"] = "reset";
|
|
16
|
-
ActionPolicy["Passive"] = "passive";
|
|
17
|
-
return ActionPolicy;
|
|
18
|
-
}({});
|
|
5
|
+
var SchedulePolicy=/*#__PURE__*/function(SchedulePolicy){SchedulePolicy["Immediately"]="schedule-immediately";SchedulePolicy["OnDemand"]="schedule-on-demand";return SchedulePolicy}({});var ClearPolicy=/*#__PURE__*/function(ClearPolicy){ClearPolicy["Resolve"]="resolve-on-clear";ClearPolicy["Cancel"]="cancel-on-clear";return ClearPolicy}({});var ActionPolicy=/*#__PURE__*/function(ActionPolicy){ActionPolicy["Reset"]="reset";ActionPolicy["Passive"]="passive";return ActionPolicy}({});
|
|
19
6
|
|
|
20
|
-
class Timeout {
|
|
21
|
-
constructor(action, timeoutMs, schedulePolicy = SchedulePolicy.Immediately) {
|
|
22
|
-
this._timeoutId = void 0;
|
|
23
|
-
this._action = void 0;
|
|
24
|
-
this._timeoutMs = void 0;
|
|
25
|
-
if (typeof action !== "function") {
|
|
26
|
-
throw new Error("Action must be a function");
|
|
27
|
-
}
|
|
28
|
-
if (timeoutMs < 0) {
|
|
29
|
-
throw new Error("Timeout period must be >= 0");
|
|
30
|
-
}
|
|
31
|
-
this._action = action;
|
|
32
|
-
this._timeoutMs = timeoutMs;
|
|
33
|
-
if (schedulePolicy === SchedulePolicy.Immediately) {
|
|
34
|
-
this.set();
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
get isSet() {
|
|
38
|
-
return this._timeoutId != null;
|
|
39
|
-
}
|
|
40
|
-
set() {
|
|
41
|
-
if (this.isSet) {
|
|
42
|
-
this.clear(ClearPolicy.Cancel);
|
|
43
|
-
}
|
|
44
|
-
this._timeoutId = setTimeout(() => this.clear(ClearPolicy.Resolve), this._timeoutMs);
|
|
45
|
-
}
|
|
46
|
-
clear(policy = ClearPolicy.Cancel) {
|
|
47
|
-
const timeoutId = this._timeoutId;
|
|
48
|
-
this._timeoutId = null;
|
|
49
|
-
if (timeoutId == null) {
|
|
50
|
-
return;
|
|
51
|
-
}
|
|
52
|
-
clearTimeout(timeoutId);
|
|
53
|
-
if (policy === ClearPolicy.Resolve) {
|
|
54
|
-
this._action();
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
7
|
+
class Timeout{get isSet(){return this._timeoutId!=null}set(){if(this.isSet){this.clear(ClearPolicy.Cancel);}this._timeoutId=setTimeout(()=>this.clear(ClearPolicy.Resolve),this._timeoutMs);}clear(policy=ClearPolicy.Cancel){const timeoutId=this._timeoutId;this._timeoutId=null;if(timeoutId==null){return}clearTimeout(timeoutId);if(policy===ClearPolicy.Resolve){this._action();}}constructor(action,timeoutMs,schedulePolicy=SchedulePolicy.Immediately){if(typeof action!=="function"){throw new Error("Action must be a function")}if(timeoutMs<0){throw new Error("Timeout period must be >= 0")}this._action=action;this._timeoutMs=timeoutMs;if(schedulePolicy===SchedulePolicy.Immediately){this.set();}}}
|
|
58
8
|
|
|
59
|
-
class Interval {
|
|
60
|
-
constructor(action, intervalMs, schedulePolicy = SchedulePolicy.Immediately) {
|
|
61
|
-
this._intervalId = void 0;
|
|
62
|
-
this._action = void 0;
|
|
63
|
-
this._intervalMs = void 0;
|
|
64
|
-
if (typeof action !== "function") {
|
|
65
|
-
throw new Error("Action must be a function");
|
|
66
|
-
}
|
|
67
|
-
if (intervalMs < 1) {
|
|
68
|
-
throw new Error("Interval period must be >= 1");
|
|
69
|
-
}
|
|
70
|
-
this._action = action;
|
|
71
|
-
this._intervalMs = intervalMs;
|
|
72
|
-
if (schedulePolicy === SchedulePolicy.Immediately) {
|
|
73
|
-
this.set();
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
get isSet() {
|
|
77
|
-
return this._intervalId != null;
|
|
78
|
-
}
|
|
79
|
-
set() {
|
|
80
|
-
if (this.isSet) {
|
|
81
|
-
this.clear(ClearPolicy.Cancel);
|
|
82
|
-
}
|
|
83
|
-
this._intervalId = setInterval(() => this._action(), this._intervalMs);
|
|
84
|
-
}
|
|
85
|
-
clear(policy = ClearPolicy.Cancel) {
|
|
86
|
-
const intervalId = this._intervalId;
|
|
87
|
-
this._intervalId = null;
|
|
88
|
-
if (intervalId == null) {
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
|
-
clearInterval(intervalId);
|
|
92
|
-
if (policy === ClearPolicy.Resolve) {
|
|
93
|
-
this._action();
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
}
|
|
9
|
+
class Interval{get isSet(){return this._intervalId!=null}set(){if(this.isSet){this.clear(ClearPolicy.Cancel);}this._intervalId=setInterval(()=>this._action(),this._intervalMs);}clear(policy=ClearPolicy.Cancel){const intervalId=this._intervalId;this._intervalId=null;if(intervalId==null){return}clearInterval(intervalId);if(policy===ClearPolicy.Resolve){this._action();}}constructor(action,intervalMs,schedulePolicy=SchedulePolicy.Immediately){if(typeof action!=="function"){throw new Error("Action must be a function")}if(intervalMs<1){throw new Error("Interval period must be >= 1")}this._action=action;this._intervalMs=intervalMs;if(schedulePolicy===SchedulePolicy.Immediately){this.set();}}}
|
|
97
10
|
|
|
98
|
-
class AnimationFrame {
|
|
99
|
-
constructor(action, schedulePolicy = SchedulePolicy.Immediately) {
|
|
100
|
-
this._animationFrameId = void 0;
|
|
101
|
-
this._action = void 0;
|
|
102
|
-
if (typeof action !== "function") {
|
|
103
|
-
throw new Error("Action must be a function");
|
|
104
|
-
}
|
|
105
|
-
this._action = action;
|
|
106
|
-
if (schedulePolicy === SchedulePolicy.Immediately) {
|
|
107
|
-
this.set();
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
get isSet() {
|
|
111
|
-
return this._animationFrameId != null;
|
|
112
|
-
}
|
|
113
|
-
set() {
|
|
114
|
-
if (this.isSet) {
|
|
115
|
-
this.clear(ClearPolicy.Cancel);
|
|
116
|
-
}
|
|
117
|
-
this._animationFrameId = requestAnimationFrame(time => this.clear(ClearPolicy.Resolve, time));
|
|
118
|
-
}
|
|
119
|
-
clear(policy = ClearPolicy.Cancel, time) {
|
|
120
|
-
const animationFrameId = this._animationFrameId;
|
|
121
|
-
this._animationFrameId = null;
|
|
122
|
-
if (animationFrameId == null) {
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
|
-
cancelAnimationFrame(animationFrameId);
|
|
126
|
-
if (policy === ClearPolicy.Resolve) {
|
|
127
|
-
this._action(time || performance.now());
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
}
|
|
11
|
+
class AnimationFrame{get isSet(){return this._animationFrameId!=null}set(){if(this.isSet){this.clear(ClearPolicy.Cancel);}this._animationFrameId=requestAnimationFrame(time=>this.clear(ClearPolicy.Resolve,time));}clear(policy=ClearPolicy.Cancel,time){const animationFrameId=this._animationFrameId;this._animationFrameId=null;if(animationFrameId==null){return}cancelAnimationFrame(animationFrameId);if(policy===ClearPolicy.Resolve){this._action(time||performance.now());}}constructor(action,schedulePolicy=SchedulePolicy.Immediately){if(typeof action!=="function"){throw new Error("Action must be a function")}this._action=action;if(schedulePolicy===SchedulePolicy.Immediately){this.set();}}}
|
|
131
12
|
|
|
132
|
-
class ActionScheduler {
|
|
133
|
-
constructor() {
|
|
134
|
-
this._disabled = false;
|
|
135
|
-
this._registeredActions = [];
|
|
136
|
-
}
|
|
137
|
-
timeout(action, period, options) {
|
|
138
|
-
if (this._disabled) {
|
|
139
|
-
return ActionScheduler.NoopAction;
|
|
140
|
-
}
|
|
141
|
-
const timeout = new Timeout(action, period, options == null ? void 0 : options.schedulePolicy);
|
|
142
|
-
this._registeredActions.push(() => timeout.clear(options == null ? void 0 : options.clearPolicy));
|
|
143
|
-
return timeout;
|
|
144
|
-
}
|
|
145
|
-
interval(action, period, options) {
|
|
146
|
-
if (this._disabled) {
|
|
147
|
-
return ActionScheduler.NoopAction;
|
|
148
|
-
}
|
|
149
|
-
const interval = new Interval(action, period, options == null ? void 0 : options.schedulePolicy);
|
|
150
|
-
this._registeredActions.push(() => interval.clear(options == null ? void 0 : options.clearPolicy));
|
|
151
|
-
return interval;
|
|
152
|
-
}
|
|
153
|
-
animationFrame(action, options) {
|
|
154
|
-
if (this._disabled) {
|
|
155
|
-
return ActionScheduler.NoopAction;
|
|
156
|
-
}
|
|
157
|
-
const animationFrame = new AnimationFrame(action, options == null ? void 0 : options.schedulePolicy);
|
|
158
|
-
this._registeredActions.push(() => animationFrame.clear(options == null ? void 0 : options.clearPolicy));
|
|
159
|
-
return animationFrame;
|
|
160
|
-
}
|
|
161
|
-
clearAll() {
|
|
162
|
-
const registered = [...this._registeredActions];
|
|
163
|
-
this._registeredActions = [];
|
|
164
|
-
registered.forEach(clearFn => clearFn());
|
|
165
|
-
}
|
|
166
|
-
disable() {
|
|
167
|
-
this._disabled = true;
|
|
168
|
-
this.clearAll();
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
ActionScheduler.NoopAction = {
|
|
172
|
-
set: () => {},
|
|
173
|
-
get isSet() {
|
|
174
|
-
return false;
|
|
175
|
-
},
|
|
176
|
-
clear: () => {}
|
|
177
|
-
};
|
|
13
|
+
class ActionScheduler{timeout(action,period,options){if(this._disabled){return ActionScheduler.NoopAction}const timeout=new Timeout(action,period,options?.schedulePolicy);this._registeredActions.push(()=>timeout.clear(options?.clearPolicy));return timeout}interval(action,period,options){if(this._disabled){return ActionScheduler.NoopAction}const interval=new Interval(action,period,options?.schedulePolicy);this._registeredActions.push(()=>interval.clear(options?.clearPolicy));return interval}animationFrame(action,options){if(this._disabled){return ActionScheduler.NoopAction}const animationFrame=new AnimationFrame(action,options?.schedulePolicy);this._registeredActions.push(()=>animationFrame.clear(options?.clearPolicy));return animationFrame}clearAll(){const registered=[...this._registeredActions];this._registeredActions=[];registered.forEach(clearFn=>clearFn());}disable(){this._disabled=true;this.clearAll();}constructor(){this._disabled=false;this._registeredActions=[];}}ActionScheduler.NoopAction={set:()=>{},get isSet(){return false},clear:()=>{}};
|
|
178
14
|
|
|
179
|
-
class ActionSchedulerProvider extends React.Component {
|
|
180
|
-
constructor(...args) {
|
|
181
|
-
super(...args);
|
|
182
|
-
this._actionScheduler = new ActionScheduler();
|
|
183
|
-
}
|
|
184
|
-
componentWillUnmount() {
|
|
185
|
-
this._actionScheduler.disable();
|
|
186
|
-
}
|
|
187
|
-
render() {
|
|
188
|
-
const {
|
|
189
|
-
children
|
|
190
|
-
} = this.props;
|
|
191
|
-
return children(this._actionScheduler);
|
|
192
|
-
}
|
|
193
|
-
}
|
|
15
|
+
class ActionSchedulerProvider extends React.Component{componentWillUnmount(){this._actionScheduler.disable();}render(){const{children}=this.props;return children(this._actionScheduler)}constructor(...args){super(...args),this._actionScheduler=new ActionScheduler;}}
|
|
194
16
|
|
|
195
|
-
function
|
|
196
|
-
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
197
|
-
for (var e = 1; e < arguments.length; e++) {
|
|
198
|
-
var t = arguments[e];
|
|
199
|
-
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
200
|
-
}
|
|
201
|
-
return n;
|
|
202
|
-
}, _extends.apply(null, arguments);
|
|
203
|
-
}
|
|
17
|
+
function withActionScheduler(WrappedComponent){const displayName=`withActionScheduler(${WrappedComponent.displayName||WrappedComponent.name})`;const C=props=>jsx(ActionSchedulerProvider,{children:schedule=>jsx(WrappedComponent,{...props,schedule:schedule})});C.displayName=displayName;return C}
|
|
204
18
|
|
|
205
|
-
function
|
|
206
|
-
const displayName = `withActionScheduler(${WrappedComponent.displayName || WrappedComponent.name})`;
|
|
207
|
-
const C = props => React.createElement(ActionSchedulerProvider, null, schedule => React.createElement(WrappedComponent, _extends({}, props, {
|
|
208
|
-
schedule: schedule
|
|
209
|
-
})));
|
|
210
|
-
C.displayName = displayName;
|
|
211
|
-
return C;
|
|
212
|
-
}
|
|
19
|
+
function useInterval(action,intervalMs,options={}){const{actionPolicy,clearPolicy,schedulePolicy}=options;const actionProxyRef=useRef(action);const intervalRef=useRef(null);if(typeof action!=="function"){throw new Error("Action must be a function")}if(action!==actionProxyRef.current){actionProxyRef.current=action;if(actionPolicy===ActionPolicy.Reset){intervalRef.current?.set();}}useEffect(()=>{intervalRef.current=new Interval(()=>{actionProxyRef.current?.();},intervalMs,schedulePolicy);return ()=>{intervalRef.current?.clear(clearPolicy);intervalRef.current=null;}},[intervalMs,clearPolicy,schedulePolicy]);const externalApi=useMemo(()=>({set:()=>{intervalRef.current?.set();},clear:(policy=clearPolicy)=>{intervalRef.current?.clear(policy);},get isSet(){return intervalRef.current?.isSet??false}}),[clearPolicy]);return externalApi}
|
|
213
20
|
|
|
214
|
-
function
|
|
215
|
-
const {
|
|
216
|
-
actionPolicy,
|
|
217
|
-
clearPolicy,
|
|
218
|
-
schedulePolicy
|
|
219
|
-
} = options;
|
|
220
|
-
const actionProxyRef = useRef(action);
|
|
221
|
-
const intervalRef = useRef(null);
|
|
222
|
-
if (typeof action !== "function") {
|
|
223
|
-
throw new Error("Action must be a function");
|
|
224
|
-
}
|
|
225
|
-
if (action !== actionProxyRef.current) {
|
|
226
|
-
actionProxyRef.current = action;
|
|
227
|
-
if (actionPolicy === ActionPolicy.Reset) {
|
|
228
|
-
var _intervalRef$current;
|
|
229
|
-
(_intervalRef$current = intervalRef.current) == null || _intervalRef$current.set();
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
useEffect(() => {
|
|
233
|
-
intervalRef.current = new Interval(() => {
|
|
234
|
-
actionProxyRef.current == null || actionProxyRef.current();
|
|
235
|
-
}, intervalMs, schedulePolicy);
|
|
236
|
-
return () => {
|
|
237
|
-
var _intervalRef$current2;
|
|
238
|
-
(_intervalRef$current2 = intervalRef.current) == null || _intervalRef$current2.clear(clearPolicy);
|
|
239
|
-
intervalRef.current = null;
|
|
240
|
-
};
|
|
241
|
-
}, [intervalMs, clearPolicy, schedulePolicy]);
|
|
242
|
-
const externalApi = useMemo(() => ({
|
|
243
|
-
set: () => {
|
|
244
|
-
var _intervalRef$current3;
|
|
245
|
-
(_intervalRef$current3 = intervalRef.current) == null || _intervalRef$current3.set();
|
|
246
|
-
},
|
|
247
|
-
clear: (policy = clearPolicy) => {
|
|
248
|
-
var _intervalRef$current4;
|
|
249
|
-
(_intervalRef$current4 = intervalRef.current) == null || _intervalRef$current4.clear(policy);
|
|
250
|
-
},
|
|
251
|
-
get isSet() {
|
|
252
|
-
var _intervalRef$current$, _intervalRef$current5;
|
|
253
|
-
return (_intervalRef$current$ = (_intervalRef$current5 = intervalRef.current) == null ? void 0 : _intervalRef$current5.isSet) != null ? _intervalRef$current$ : false;
|
|
254
|
-
}
|
|
255
|
-
}), [clearPolicy]);
|
|
256
|
-
return externalApi;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
function useTimeout(action, timeoutMs, options = {}) {
|
|
260
|
-
const {
|
|
261
|
-
actionPolicy,
|
|
262
|
-
clearPolicy,
|
|
263
|
-
schedulePolicy
|
|
264
|
-
} = options;
|
|
265
|
-
const actionProxyRef = useRef(action);
|
|
266
|
-
const timeoutRef = useRef(null);
|
|
267
|
-
if (typeof action !== "function") {
|
|
268
|
-
throw new Error("Action must be a function");
|
|
269
|
-
}
|
|
270
|
-
if (action !== actionProxyRef.current) {
|
|
271
|
-
actionProxyRef.current = action;
|
|
272
|
-
if (actionPolicy === ActionPolicy.Reset) {
|
|
273
|
-
var _timeoutRef$current;
|
|
274
|
-
(_timeoutRef$current = timeoutRef.current) == null || _timeoutRef$current.set();
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
useEffect(() => {
|
|
278
|
-
timeoutRef.current = new Timeout(() => {
|
|
279
|
-
actionProxyRef.current == null || actionProxyRef.current();
|
|
280
|
-
}, timeoutMs, schedulePolicy);
|
|
281
|
-
return () => {
|
|
282
|
-
var _timeoutRef$current2;
|
|
283
|
-
(_timeoutRef$current2 = timeoutRef.current) == null || _timeoutRef$current2.clear(clearPolicy);
|
|
284
|
-
timeoutRef.current = null;
|
|
285
|
-
};
|
|
286
|
-
}, [timeoutMs, clearPolicy, schedulePolicy]);
|
|
287
|
-
const externalApi = useMemo(() => ({
|
|
288
|
-
set: () => {
|
|
289
|
-
var _timeoutRef$current3;
|
|
290
|
-
(_timeoutRef$current3 = timeoutRef.current) == null || _timeoutRef$current3.set();
|
|
291
|
-
},
|
|
292
|
-
clear: (policy = clearPolicy) => {
|
|
293
|
-
var _timeoutRef$current4;
|
|
294
|
-
(_timeoutRef$current4 = timeoutRef.current) == null || _timeoutRef$current4.clear(policy);
|
|
295
|
-
},
|
|
296
|
-
get isSet() {
|
|
297
|
-
var _timeoutRef$current$i, _timeoutRef$current5;
|
|
298
|
-
return (_timeoutRef$current$i = (_timeoutRef$current5 = timeoutRef.current) == null ? void 0 : _timeoutRef$current5.isSet) != null ? _timeoutRef$current$i : false;
|
|
299
|
-
}
|
|
300
|
-
}), [clearPolicy]);
|
|
301
|
-
return externalApi;
|
|
302
|
-
}
|
|
21
|
+
function useTimeout(action,timeoutMs,options={}){const{actionPolicy,clearPolicy,schedulePolicy}=options;const actionProxyRef=useRef(action);const timeoutRef=useRef(null);if(typeof action!=="function"){throw new Error("Action must be a function")}if(action!==actionProxyRef.current){actionProxyRef.current=action;if(actionPolicy===ActionPolicy.Reset){timeoutRef.current?.set();}}useEffect(()=>{timeoutRef.current=new Timeout(()=>{actionProxyRef.current?.();},timeoutMs,schedulePolicy);return ()=>{timeoutRef.current?.clear(clearPolicy);timeoutRef.current=null;}},[timeoutMs,clearPolicy,schedulePolicy]);const externalApi=useMemo(()=>({set:()=>{timeoutRef.current?.set();},clear:(policy=clearPolicy)=>{timeoutRef.current?.clear(policy);},get isSet(){return timeoutRef.current?.isSet??false}}),[clearPolicy]);return externalApi}
|
|
303
22
|
|
|
304
23
|
export { ActionPolicy, ActionSchedulerProvider, ClearPolicy, SchedulePolicy, useInterval, useTimeout, withActionScheduler };
|
package/dist/index.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
7
|
|
|
7
8
|
function _interopNamespace(e) {
|
|
8
9
|
if (e && e.__esModule) return e;
|
|
@@ -24,305 +25,23 @@ function _interopNamespace(e) {
|
|
|
24
25
|
|
|
25
26
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
26
27
|
|
|
27
|
-
|
|
28
|
-
SchedulePolicy["Immediately"] = "schedule-immediately";
|
|
29
|
-
SchedulePolicy["OnDemand"] = "schedule-on-demand";
|
|
30
|
-
return SchedulePolicy;
|
|
31
|
-
}({});
|
|
32
|
-
let ClearPolicy = function (ClearPolicy) {
|
|
33
|
-
ClearPolicy["Resolve"] = "resolve-on-clear";
|
|
34
|
-
ClearPolicy["Cancel"] = "cancel-on-clear";
|
|
35
|
-
return ClearPolicy;
|
|
36
|
-
}({});
|
|
37
|
-
let ActionPolicy = function (ActionPolicy) {
|
|
38
|
-
ActionPolicy["Reset"] = "reset";
|
|
39
|
-
ActionPolicy["Passive"] = "passive";
|
|
40
|
-
return ActionPolicy;
|
|
41
|
-
}({});
|
|
28
|
+
var SchedulePolicy=/*#__PURE__*/function(SchedulePolicy){SchedulePolicy["Immediately"]="schedule-immediately";SchedulePolicy["OnDemand"]="schedule-on-demand";return SchedulePolicy}({});var ClearPolicy=/*#__PURE__*/function(ClearPolicy){ClearPolicy["Resolve"]="resolve-on-clear";ClearPolicy["Cancel"]="cancel-on-clear";return ClearPolicy}({});var ActionPolicy=/*#__PURE__*/function(ActionPolicy){ActionPolicy["Reset"]="reset";ActionPolicy["Passive"]="passive";return ActionPolicy}({});
|
|
42
29
|
|
|
43
|
-
class Timeout {
|
|
44
|
-
constructor(action, timeoutMs, schedulePolicy = SchedulePolicy.Immediately) {
|
|
45
|
-
this._timeoutId = void 0;
|
|
46
|
-
this._action = void 0;
|
|
47
|
-
this._timeoutMs = void 0;
|
|
48
|
-
if (typeof action !== "function") {
|
|
49
|
-
throw new Error("Action must be a function");
|
|
50
|
-
}
|
|
51
|
-
if (timeoutMs < 0) {
|
|
52
|
-
throw new Error("Timeout period must be >= 0");
|
|
53
|
-
}
|
|
54
|
-
this._action = action;
|
|
55
|
-
this._timeoutMs = timeoutMs;
|
|
56
|
-
if (schedulePolicy === SchedulePolicy.Immediately) {
|
|
57
|
-
this.set();
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
get isSet() {
|
|
61
|
-
return this._timeoutId != null;
|
|
62
|
-
}
|
|
63
|
-
set() {
|
|
64
|
-
if (this.isSet) {
|
|
65
|
-
this.clear(ClearPolicy.Cancel);
|
|
66
|
-
}
|
|
67
|
-
this._timeoutId = setTimeout(() => this.clear(ClearPolicy.Resolve), this._timeoutMs);
|
|
68
|
-
}
|
|
69
|
-
clear(policy = ClearPolicy.Cancel) {
|
|
70
|
-
const timeoutId = this._timeoutId;
|
|
71
|
-
this._timeoutId = null;
|
|
72
|
-
if (timeoutId == null) {
|
|
73
|
-
return;
|
|
74
|
-
}
|
|
75
|
-
clearTimeout(timeoutId);
|
|
76
|
-
if (policy === ClearPolicy.Resolve) {
|
|
77
|
-
this._action();
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
30
|
+
class Timeout{get isSet(){return this._timeoutId!=null}set(){if(this.isSet){this.clear(ClearPolicy.Cancel);}this._timeoutId=setTimeout(()=>this.clear(ClearPolicy.Resolve),this._timeoutMs);}clear(policy=ClearPolicy.Cancel){const timeoutId=this._timeoutId;this._timeoutId=null;if(timeoutId==null){return}clearTimeout(timeoutId);if(policy===ClearPolicy.Resolve){this._action();}}constructor(action,timeoutMs,schedulePolicy=SchedulePolicy.Immediately){if(typeof action!=="function"){throw new Error("Action must be a function")}if(timeoutMs<0){throw new Error("Timeout period must be >= 0")}this._action=action;this._timeoutMs=timeoutMs;if(schedulePolicy===SchedulePolicy.Immediately){this.set();}}}
|
|
81
31
|
|
|
82
|
-
class Interval {
|
|
83
|
-
constructor(action, intervalMs, schedulePolicy = SchedulePolicy.Immediately) {
|
|
84
|
-
this._intervalId = void 0;
|
|
85
|
-
this._action = void 0;
|
|
86
|
-
this._intervalMs = void 0;
|
|
87
|
-
if (typeof action !== "function") {
|
|
88
|
-
throw new Error("Action must be a function");
|
|
89
|
-
}
|
|
90
|
-
if (intervalMs < 1) {
|
|
91
|
-
throw new Error("Interval period must be >= 1");
|
|
92
|
-
}
|
|
93
|
-
this._action = action;
|
|
94
|
-
this._intervalMs = intervalMs;
|
|
95
|
-
if (schedulePolicy === SchedulePolicy.Immediately) {
|
|
96
|
-
this.set();
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
get isSet() {
|
|
100
|
-
return this._intervalId != null;
|
|
101
|
-
}
|
|
102
|
-
set() {
|
|
103
|
-
if (this.isSet) {
|
|
104
|
-
this.clear(ClearPolicy.Cancel);
|
|
105
|
-
}
|
|
106
|
-
this._intervalId = setInterval(() => this._action(), this._intervalMs);
|
|
107
|
-
}
|
|
108
|
-
clear(policy = ClearPolicy.Cancel) {
|
|
109
|
-
const intervalId = this._intervalId;
|
|
110
|
-
this._intervalId = null;
|
|
111
|
-
if (intervalId == null) {
|
|
112
|
-
return;
|
|
113
|
-
}
|
|
114
|
-
clearInterval(intervalId);
|
|
115
|
-
if (policy === ClearPolicy.Resolve) {
|
|
116
|
-
this._action();
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
}
|
|
32
|
+
class Interval{get isSet(){return this._intervalId!=null}set(){if(this.isSet){this.clear(ClearPolicy.Cancel);}this._intervalId=setInterval(()=>this._action(),this._intervalMs);}clear(policy=ClearPolicy.Cancel){const intervalId=this._intervalId;this._intervalId=null;if(intervalId==null){return}clearInterval(intervalId);if(policy===ClearPolicy.Resolve){this._action();}}constructor(action,intervalMs,schedulePolicy=SchedulePolicy.Immediately){if(typeof action!=="function"){throw new Error("Action must be a function")}if(intervalMs<1){throw new Error("Interval period must be >= 1")}this._action=action;this._intervalMs=intervalMs;if(schedulePolicy===SchedulePolicy.Immediately){this.set();}}}
|
|
120
33
|
|
|
121
|
-
class AnimationFrame {
|
|
122
|
-
constructor(action, schedulePolicy = SchedulePolicy.Immediately) {
|
|
123
|
-
this._animationFrameId = void 0;
|
|
124
|
-
this._action = void 0;
|
|
125
|
-
if (typeof action !== "function") {
|
|
126
|
-
throw new Error("Action must be a function");
|
|
127
|
-
}
|
|
128
|
-
this._action = action;
|
|
129
|
-
if (schedulePolicy === SchedulePolicy.Immediately) {
|
|
130
|
-
this.set();
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
get isSet() {
|
|
134
|
-
return this._animationFrameId != null;
|
|
135
|
-
}
|
|
136
|
-
set() {
|
|
137
|
-
if (this.isSet) {
|
|
138
|
-
this.clear(ClearPolicy.Cancel);
|
|
139
|
-
}
|
|
140
|
-
this._animationFrameId = requestAnimationFrame(time => this.clear(ClearPolicy.Resolve, time));
|
|
141
|
-
}
|
|
142
|
-
clear(policy = ClearPolicy.Cancel, time) {
|
|
143
|
-
const animationFrameId = this._animationFrameId;
|
|
144
|
-
this._animationFrameId = null;
|
|
145
|
-
if (animationFrameId == null) {
|
|
146
|
-
return;
|
|
147
|
-
}
|
|
148
|
-
cancelAnimationFrame(animationFrameId);
|
|
149
|
-
if (policy === ClearPolicy.Resolve) {
|
|
150
|
-
this._action(time || performance.now());
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
34
|
+
class AnimationFrame{get isSet(){return this._animationFrameId!=null}set(){if(this.isSet){this.clear(ClearPolicy.Cancel);}this._animationFrameId=requestAnimationFrame(time=>this.clear(ClearPolicy.Resolve,time));}clear(policy=ClearPolicy.Cancel,time){const animationFrameId=this._animationFrameId;this._animationFrameId=null;if(animationFrameId==null){return}cancelAnimationFrame(animationFrameId);if(policy===ClearPolicy.Resolve){this._action(time||performance.now());}}constructor(action,schedulePolicy=SchedulePolicy.Immediately){if(typeof action!=="function"){throw new Error("Action must be a function")}this._action=action;if(schedulePolicy===SchedulePolicy.Immediately){this.set();}}}
|
|
154
35
|
|
|
155
|
-
class ActionScheduler {
|
|
156
|
-
constructor() {
|
|
157
|
-
this._disabled = false;
|
|
158
|
-
this._registeredActions = [];
|
|
159
|
-
}
|
|
160
|
-
timeout(action, period, options) {
|
|
161
|
-
if (this._disabled) {
|
|
162
|
-
return ActionScheduler.NoopAction;
|
|
163
|
-
}
|
|
164
|
-
const timeout = new Timeout(action, period, options == null ? void 0 : options.schedulePolicy);
|
|
165
|
-
this._registeredActions.push(() => timeout.clear(options == null ? void 0 : options.clearPolicy));
|
|
166
|
-
return timeout;
|
|
167
|
-
}
|
|
168
|
-
interval(action, period, options) {
|
|
169
|
-
if (this._disabled) {
|
|
170
|
-
return ActionScheduler.NoopAction;
|
|
171
|
-
}
|
|
172
|
-
const interval = new Interval(action, period, options == null ? void 0 : options.schedulePolicy);
|
|
173
|
-
this._registeredActions.push(() => interval.clear(options == null ? void 0 : options.clearPolicy));
|
|
174
|
-
return interval;
|
|
175
|
-
}
|
|
176
|
-
animationFrame(action, options) {
|
|
177
|
-
if (this._disabled) {
|
|
178
|
-
return ActionScheduler.NoopAction;
|
|
179
|
-
}
|
|
180
|
-
const animationFrame = new AnimationFrame(action, options == null ? void 0 : options.schedulePolicy);
|
|
181
|
-
this._registeredActions.push(() => animationFrame.clear(options == null ? void 0 : options.clearPolicy));
|
|
182
|
-
return animationFrame;
|
|
183
|
-
}
|
|
184
|
-
clearAll() {
|
|
185
|
-
const registered = [...this._registeredActions];
|
|
186
|
-
this._registeredActions = [];
|
|
187
|
-
registered.forEach(clearFn => clearFn());
|
|
188
|
-
}
|
|
189
|
-
disable() {
|
|
190
|
-
this._disabled = true;
|
|
191
|
-
this.clearAll();
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
ActionScheduler.NoopAction = {
|
|
195
|
-
set: () => {},
|
|
196
|
-
get isSet() {
|
|
197
|
-
return false;
|
|
198
|
-
},
|
|
199
|
-
clear: () => {}
|
|
200
|
-
};
|
|
36
|
+
class ActionScheduler{timeout(action,period,options){if(this._disabled){return ActionScheduler.NoopAction}const timeout=new Timeout(action,period,options?.schedulePolicy);this._registeredActions.push(()=>timeout.clear(options?.clearPolicy));return timeout}interval(action,period,options){if(this._disabled){return ActionScheduler.NoopAction}const interval=new Interval(action,period,options?.schedulePolicy);this._registeredActions.push(()=>interval.clear(options?.clearPolicy));return interval}animationFrame(action,options){if(this._disabled){return ActionScheduler.NoopAction}const animationFrame=new AnimationFrame(action,options?.schedulePolicy);this._registeredActions.push(()=>animationFrame.clear(options?.clearPolicy));return animationFrame}clearAll(){const registered=[...this._registeredActions];this._registeredActions=[];registered.forEach(clearFn=>clearFn());}disable(){this._disabled=true;this.clearAll();}constructor(){this._disabled=false;this._registeredActions=[];}}ActionScheduler.NoopAction={set:()=>{},get isSet(){return false},clear:()=>{}};
|
|
201
37
|
|
|
202
|
-
class ActionSchedulerProvider extends React__namespace.Component {
|
|
203
|
-
constructor(...args) {
|
|
204
|
-
super(...args);
|
|
205
|
-
this._actionScheduler = new ActionScheduler();
|
|
206
|
-
}
|
|
207
|
-
componentWillUnmount() {
|
|
208
|
-
this._actionScheduler.disable();
|
|
209
|
-
}
|
|
210
|
-
render() {
|
|
211
|
-
const {
|
|
212
|
-
children
|
|
213
|
-
} = this.props;
|
|
214
|
-
return children(this._actionScheduler);
|
|
215
|
-
}
|
|
216
|
-
}
|
|
38
|
+
class ActionSchedulerProvider extends React__namespace.Component{componentWillUnmount(){this._actionScheduler.disable();}render(){const{children}=this.props;return children(this._actionScheduler)}constructor(...args){super(...args),this._actionScheduler=new ActionScheduler;}}
|
|
217
39
|
|
|
218
|
-
function
|
|
219
|
-
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
220
|
-
for (var e = 1; e < arguments.length; e++) {
|
|
221
|
-
var t = arguments[e];
|
|
222
|
-
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
223
|
-
}
|
|
224
|
-
return n;
|
|
225
|
-
}, _extends.apply(null, arguments);
|
|
226
|
-
}
|
|
40
|
+
function withActionScheduler(WrappedComponent){const displayName=`withActionScheduler(${WrappedComponent.displayName||WrappedComponent.name})`;const C=props=>jsxRuntime.jsx(ActionSchedulerProvider,{children:schedule=>jsxRuntime.jsx(WrappedComponent,{...props,schedule:schedule})});C.displayName=displayName;return C}
|
|
227
41
|
|
|
228
|
-
function
|
|
229
|
-
const displayName = `withActionScheduler(${WrappedComponent.displayName || WrappedComponent.name})`;
|
|
230
|
-
const C = props => React__namespace.createElement(ActionSchedulerProvider, null, schedule => React__namespace.createElement(WrappedComponent, _extends({}, props, {
|
|
231
|
-
schedule: schedule
|
|
232
|
-
})));
|
|
233
|
-
C.displayName = displayName;
|
|
234
|
-
return C;
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
function useInterval(action, intervalMs, options = {}) {
|
|
238
|
-
const {
|
|
239
|
-
actionPolicy,
|
|
240
|
-
clearPolicy,
|
|
241
|
-
schedulePolicy
|
|
242
|
-
} = options;
|
|
243
|
-
const actionProxyRef = React.useRef(action);
|
|
244
|
-
const intervalRef = React.useRef(null);
|
|
245
|
-
if (typeof action !== "function") {
|
|
246
|
-
throw new Error("Action must be a function");
|
|
247
|
-
}
|
|
248
|
-
if (action !== actionProxyRef.current) {
|
|
249
|
-
actionProxyRef.current = action;
|
|
250
|
-
if (actionPolicy === ActionPolicy.Reset) {
|
|
251
|
-
var _intervalRef$current;
|
|
252
|
-
(_intervalRef$current = intervalRef.current) == null || _intervalRef$current.set();
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
React.useEffect(() => {
|
|
256
|
-
intervalRef.current = new Interval(() => {
|
|
257
|
-
actionProxyRef.current == null || actionProxyRef.current();
|
|
258
|
-
}, intervalMs, schedulePolicy);
|
|
259
|
-
return () => {
|
|
260
|
-
var _intervalRef$current2;
|
|
261
|
-
(_intervalRef$current2 = intervalRef.current) == null || _intervalRef$current2.clear(clearPolicy);
|
|
262
|
-
intervalRef.current = null;
|
|
263
|
-
};
|
|
264
|
-
}, [intervalMs, clearPolicy, schedulePolicy]);
|
|
265
|
-
const externalApi = React.useMemo(() => ({
|
|
266
|
-
set: () => {
|
|
267
|
-
var _intervalRef$current3;
|
|
268
|
-
(_intervalRef$current3 = intervalRef.current) == null || _intervalRef$current3.set();
|
|
269
|
-
},
|
|
270
|
-
clear: (policy = clearPolicy) => {
|
|
271
|
-
var _intervalRef$current4;
|
|
272
|
-
(_intervalRef$current4 = intervalRef.current) == null || _intervalRef$current4.clear(policy);
|
|
273
|
-
},
|
|
274
|
-
get isSet() {
|
|
275
|
-
var _intervalRef$current$, _intervalRef$current5;
|
|
276
|
-
return (_intervalRef$current$ = (_intervalRef$current5 = intervalRef.current) == null ? void 0 : _intervalRef$current5.isSet) != null ? _intervalRef$current$ : false;
|
|
277
|
-
}
|
|
278
|
-
}), [clearPolicy]);
|
|
279
|
-
return externalApi;
|
|
280
|
-
}
|
|
42
|
+
function useInterval(action,intervalMs,options={}){const{actionPolicy,clearPolicy,schedulePolicy}=options;const actionProxyRef=React.useRef(action);const intervalRef=React.useRef(null);if(typeof action!=="function"){throw new Error("Action must be a function")}if(action!==actionProxyRef.current){actionProxyRef.current=action;if(actionPolicy===ActionPolicy.Reset){intervalRef.current?.set();}}React.useEffect(()=>{intervalRef.current=new Interval(()=>{actionProxyRef.current?.();},intervalMs,schedulePolicy);return ()=>{intervalRef.current?.clear(clearPolicy);intervalRef.current=null;}},[intervalMs,clearPolicy,schedulePolicy]);const externalApi=React.useMemo(()=>({set:()=>{intervalRef.current?.set();},clear:(policy=clearPolicy)=>{intervalRef.current?.clear(policy);},get isSet(){return intervalRef.current?.isSet??false}}),[clearPolicy]);return externalApi}
|
|
281
43
|
|
|
282
|
-
function useTimeout(action, timeoutMs,
|
|
283
|
-
const {
|
|
284
|
-
actionPolicy,
|
|
285
|
-
clearPolicy,
|
|
286
|
-
schedulePolicy
|
|
287
|
-
} = options;
|
|
288
|
-
const actionProxyRef = React.useRef(action);
|
|
289
|
-
const timeoutRef = React.useRef(null);
|
|
290
|
-
if (typeof action !== "function") {
|
|
291
|
-
throw new Error("Action must be a function");
|
|
292
|
-
}
|
|
293
|
-
if (action !== actionProxyRef.current) {
|
|
294
|
-
actionProxyRef.current = action;
|
|
295
|
-
if (actionPolicy === ActionPolicy.Reset) {
|
|
296
|
-
var _timeoutRef$current;
|
|
297
|
-
(_timeoutRef$current = timeoutRef.current) == null || _timeoutRef$current.set();
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
React.useEffect(() => {
|
|
301
|
-
timeoutRef.current = new Timeout(() => {
|
|
302
|
-
actionProxyRef.current == null || actionProxyRef.current();
|
|
303
|
-
}, timeoutMs, schedulePolicy);
|
|
304
|
-
return () => {
|
|
305
|
-
var _timeoutRef$current2;
|
|
306
|
-
(_timeoutRef$current2 = timeoutRef.current) == null || _timeoutRef$current2.clear(clearPolicy);
|
|
307
|
-
timeoutRef.current = null;
|
|
308
|
-
};
|
|
309
|
-
}, [timeoutMs, clearPolicy, schedulePolicy]);
|
|
310
|
-
const externalApi = React.useMemo(() => ({
|
|
311
|
-
set: () => {
|
|
312
|
-
var _timeoutRef$current3;
|
|
313
|
-
(_timeoutRef$current3 = timeoutRef.current) == null || _timeoutRef$current3.set();
|
|
314
|
-
},
|
|
315
|
-
clear: (policy = clearPolicy) => {
|
|
316
|
-
var _timeoutRef$current4;
|
|
317
|
-
(_timeoutRef$current4 = timeoutRef.current) == null || _timeoutRef$current4.clear(policy);
|
|
318
|
-
},
|
|
319
|
-
get isSet() {
|
|
320
|
-
var _timeoutRef$current$i, _timeoutRef$current5;
|
|
321
|
-
return (_timeoutRef$current$i = (_timeoutRef$current5 = timeoutRef.current) == null ? void 0 : _timeoutRef$current5.isSet) != null ? _timeoutRef$current$i : false;
|
|
322
|
-
}
|
|
323
|
-
}), [clearPolicy]);
|
|
324
|
-
return externalApi;
|
|
325
|
-
}
|
|
44
|
+
function useTimeout(action,timeoutMs,options={}){const{actionPolicy,clearPolicy,schedulePolicy}=options;const actionProxyRef=React.useRef(action);const timeoutRef=React.useRef(null);if(typeof action!=="function"){throw new Error("Action must be a function")}if(action!==actionProxyRef.current){actionProxyRef.current=action;if(actionPolicy===ActionPolicy.Reset){timeoutRef.current?.set();}}React.useEffect(()=>{timeoutRef.current=new Timeout(()=>{actionProxyRef.current?.();},timeoutMs,schedulePolicy);return ()=>{timeoutRef.current?.clear(clearPolicy);timeoutRef.current=null;}},[timeoutMs,clearPolicy,schedulePolicy]);const externalApi=React.useMemo(()=>({set:()=>{timeoutRef.current?.set();},clear:(policy=clearPolicy)=>{timeoutRef.current?.clear(policy);},get isSet(){return timeoutRef.current?.isSet??false}}),[clearPolicy]);return externalApi}
|
|
326
45
|
|
|
327
46
|
exports.ActionPolicy = ActionPolicy;
|
|
328
47
|
exports.ActionSchedulerProvider = ActionSchedulerProvider;
|
package/package.json
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-timing",
|
|
3
|
-
"
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"description": "",
|
|
4
|
+
"author": "Khan Academy",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"version": "7.0.3",
|
|
6
7
|
"publishConfig": {
|
|
7
8
|
"access": "public"
|
|
8
9
|
},
|
|
9
|
-
"
|
|
10
|
+
"design": "v1",
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "https://github.com/Khan/wonder-blocks.git",
|
|
14
|
+
"directory": "packages/wonder-blocks-timing"
|
|
15
|
+
},
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/Khan/wonder-blocks/issues"
|
|
18
|
+
},
|
|
10
19
|
"main": "dist/index.js",
|
|
11
20
|
"module": "dist/es/index.js",
|
|
12
21
|
"types": "dist/index.d.ts",
|
|
@@ -14,11 +23,9 @@
|
|
|
14
23
|
"react": "18.2.0"
|
|
15
24
|
},
|
|
16
25
|
"devDependencies": {
|
|
17
|
-
"@khanacademy/wb-dev-build-settings": "2.
|
|
18
|
-
"@khanacademy/wonder-blocks-testing-core": "
|
|
26
|
+
"@khanacademy/wb-dev-build-settings": "3.2.0",
|
|
27
|
+
"@khanacademy/wonder-blocks-testing-core": "4.0.2"
|
|
19
28
|
},
|
|
20
|
-
"author": "",
|
|
21
|
-
"license": "MIT",
|
|
22
29
|
"scripts": {
|
|
23
30
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
24
31
|
}
|