@freelensapp/animate 0.1.4 → 1.1.0
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/index.js +349 -1
- package/package.json +6 -6
package/dist/index.js
CHANGED
|
@@ -1 +1,349 @@
|
|
|
1
|
-
|
|
1
|
+
/******/ (() => { // webpackBootstrap
|
|
2
|
+
/******/ var __webpack_modules__ = ({
|
|
3
|
+
|
|
4
|
+
/***/ 19:
|
|
5
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
6
|
+
|
|
7
|
+
"use strict";
|
|
8
|
+
__webpack_require__.r(__webpack_exports__);
|
|
9
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
10
|
+
/* harmony export */ defaultLeaveDurationForAnimatedInjectable: () => (/* binding */ defaultLeaveDurationForAnimatedInjectable)
|
|
11
|
+
/* harmony export */ });
|
|
12
|
+
/* harmony import */ var _ogre_tools_injectable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(745);
|
|
13
|
+
/* harmony import */ var _ogre_tools_injectable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_ogre_tools_injectable__WEBPACK_IMPORTED_MODULE_0__);
|
|
14
|
+
/**
|
|
15
|
+
* Copyright (c) OpenLens Authors. All rights reserved.
|
|
16
|
+
* Licensed under MIT License. See LICENSE in root directory for more information.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
const defaultLeaveDurationForAnimatedInjectable = (0,_ogre_tools_injectable__WEBPACK_IMPORTED_MODULE_0__.getInjectable)({
|
|
20
|
+
id: "default-leave-duration-for-animated",
|
|
21
|
+
instantiate: () => 100,
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
/***/ }),
|
|
26
|
+
|
|
27
|
+
/***/ 446:
|
|
28
|
+
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
|
|
29
|
+
|
|
30
|
+
var map = {
|
|
31
|
+
"./default-enter-duration.injectable.ts": 846,
|
|
32
|
+
"./default-leave-duration.injectable.ts": 19,
|
|
33
|
+
"./request-animation-frame.injectable.ts": 593
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
function webpackContext(req) {
|
|
38
|
+
var id = webpackContextResolve(req);
|
|
39
|
+
return __webpack_require__(id);
|
|
40
|
+
}
|
|
41
|
+
function webpackContextResolve(req) {
|
|
42
|
+
if(!__webpack_require__.o(map, req)) {
|
|
43
|
+
var e = new Error("Cannot find module '" + req + "'");
|
|
44
|
+
e.code = 'MODULE_NOT_FOUND';
|
|
45
|
+
throw e;
|
|
46
|
+
}
|
|
47
|
+
return map[req];
|
|
48
|
+
}
|
|
49
|
+
webpackContext.keys = function webpackContextKeys() {
|
|
50
|
+
return Object.keys(map);
|
|
51
|
+
};
|
|
52
|
+
webpackContext.resolve = webpackContextResolve;
|
|
53
|
+
module.exports = webpackContext;
|
|
54
|
+
webpackContext.id = 446;
|
|
55
|
+
|
|
56
|
+
/***/ }),
|
|
57
|
+
|
|
58
|
+
/***/ 593:
|
|
59
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
60
|
+
|
|
61
|
+
"use strict";
|
|
62
|
+
__webpack_require__.r(__webpack_exports__);
|
|
63
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
64
|
+
/* harmony export */ requestAnimationFrameInjectable: () => (/* binding */ requestAnimationFrameInjectable)
|
|
65
|
+
/* harmony export */ });
|
|
66
|
+
/* harmony import */ var _ogre_tools_injectable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(745);
|
|
67
|
+
/* harmony import */ var _ogre_tools_injectable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_ogre_tools_injectable__WEBPACK_IMPORTED_MODULE_0__);
|
|
68
|
+
/**
|
|
69
|
+
* Copyright (c) OpenLens Authors. All rights reserved.
|
|
70
|
+
* Licensed under MIT License. See LICENSE in root directory for more information.
|
|
71
|
+
*/
|
|
72
|
+
|
|
73
|
+
const requestAnimationFrameInjectable = (0,_ogre_tools_injectable__WEBPACK_IMPORTED_MODULE_0__.getInjectable)({
|
|
74
|
+
id: "request-animation-frame",
|
|
75
|
+
// NOTE: this cannot be simplified to just `=> requestAnimationFrame` else an Illegal Invocation error will be thrown
|
|
76
|
+
instantiate: () => (callback) => requestAnimationFrame(callback),
|
|
77
|
+
causesSideEffects: true,
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
/***/ }),
|
|
82
|
+
|
|
83
|
+
/***/ 745:
|
|
84
|
+
/***/ ((module) => {
|
|
85
|
+
|
|
86
|
+
"use strict";
|
|
87
|
+
module.exports = require("@ogre-tools/injectable");
|
|
88
|
+
|
|
89
|
+
/***/ }),
|
|
90
|
+
|
|
91
|
+
/***/ 846:
|
|
92
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
93
|
+
|
|
94
|
+
"use strict";
|
|
95
|
+
__webpack_require__.r(__webpack_exports__);
|
|
96
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
97
|
+
/* harmony export */ defaultEnterDurationForAnimatedInjectable: () => (/* binding */ defaultEnterDurationForAnimatedInjectable)
|
|
98
|
+
/* harmony export */ });
|
|
99
|
+
/* harmony import */ var _ogre_tools_injectable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(745);
|
|
100
|
+
/* harmony import */ var _ogre_tools_injectable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_ogre_tools_injectable__WEBPACK_IMPORTED_MODULE_0__);
|
|
101
|
+
/**
|
|
102
|
+
* Copyright (c) OpenLens Authors. All rights reserved.
|
|
103
|
+
* Licensed under MIT License. See LICENSE in root directory for more information.
|
|
104
|
+
*/
|
|
105
|
+
|
|
106
|
+
const defaultEnterDurationForAnimatedInjectable = (0,_ogre_tools_injectable__WEBPACK_IMPORTED_MODULE_0__.getInjectable)({
|
|
107
|
+
id: "default-enter-duration-for-animated",
|
|
108
|
+
instantiate: () => 100,
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
/***/ }),
|
|
113
|
+
|
|
114
|
+
/***/ 859:
|
|
115
|
+
/***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|
116
|
+
|
|
117
|
+
"use strict";
|
|
118
|
+
|
|
119
|
+
// EXPORTS
|
|
120
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
121
|
+
C: () => (/* binding */ animateFeature)
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
;// external "@freelensapp/feature-core"
|
|
125
|
+
const feature_core_namespaceObject = require("@freelensapp/feature-core");
|
|
126
|
+
;// external "@ogre-tools/injectable-extension-for-auto-registration"
|
|
127
|
+
const injectable_extension_for_auto_registration_namespaceObject = require("@ogre-tools/injectable-extension-for-auto-registration");
|
|
128
|
+
;// ./src/feature.ts
|
|
129
|
+
/* module decorator */ module = __webpack_require__.hmd(module);
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
const animateFeature = (0,feature_core_namespaceObject.getFeature)({
|
|
133
|
+
id: "animate-feature",
|
|
134
|
+
register: (di) => {
|
|
135
|
+
(0,injectable_extension_for_auto_registration_namespaceObject.autoRegister)({
|
|
136
|
+
di,
|
|
137
|
+
targetModule: module,
|
|
138
|
+
getRequireContexts: () => [__webpack_require__(446)],
|
|
139
|
+
});
|
|
140
|
+
},
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
/***/ })
|
|
145
|
+
|
|
146
|
+
/******/ });
|
|
147
|
+
/************************************************************************/
|
|
148
|
+
/******/ // The module cache
|
|
149
|
+
/******/ var __webpack_module_cache__ = {};
|
|
150
|
+
/******/
|
|
151
|
+
/******/ // The require function
|
|
152
|
+
/******/ function __webpack_require__(moduleId) {
|
|
153
|
+
/******/ // Check if module is in cache
|
|
154
|
+
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
155
|
+
/******/ if (cachedModule !== undefined) {
|
|
156
|
+
/******/ return cachedModule.exports;
|
|
157
|
+
/******/ }
|
|
158
|
+
/******/ // Create a new module (and put it into the cache)
|
|
159
|
+
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
160
|
+
/******/ id: moduleId,
|
|
161
|
+
/******/ loaded: false,
|
|
162
|
+
/******/ exports: {}
|
|
163
|
+
/******/ };
|
|
164
|
+
/******/
|
|
165
|
+
/******/ // Execute the module function
|
|
166
|
+
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
167
|
+
/******/
|
|
168
|
+
/******/ // Flag the module as loaded
|
|
169
|
+
/******/ module.loaded = true;
|
|
170
|
+
/******/
|
|
171
|
+
/******/ // Return the exports of the module
|
|
172
|
+
/******/ return module.exports;
|
|
173
|
+
/******/ }
|
|
174
|
+
/******/
|
|
175
|
+
/************************************************************************/
|
|
176
|
+
/******/ /* webpack/runtime/compat get default export */
|
|
177
|
+
/******/ (() => {
|
|
178
|
+
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
179
|
+
/******/ __webpack_require__.n = (module) => {
|
|
180
|
+
/******/ var getter = module && module.__esModule ?
|
|
181
|
+
/******/ () => (module['default']) :
|
|
182
|
+
/******/ () => (module);
|
|
183
|
+
/******/ __webpack_require__.d(getter, { a: getter });
|
|
184
|
+
/******/ return getter;
|
|
185
|
+
/******/ };
|
|
186
|
+
/******/ })();
|
|
187
|
+
/******/
|
|
188
|
+
/******/ /* webpack/runtime/define property getters */
|
|
189
|
+
/******/ (() => {
|
|
190
|
+
/******/ // define getter functions for harmony exports
|
|
191
|
+
/******/ __webpack_require__.d = (exports, definition) => {
|
|
192
|
+
/******/ for(var key in definition) {
|
|
193
|
+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
194
|
+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
195
|
+
/******/ }
|
|
196
|
+
/******/ }
|
|
197
|
+
/******/ };
|
|
198
|
+
/******/ })();
|
|
199
|
+
/******/
|
|
200
|
+
/******/ /* webpack/runtime/harmony module decorator */
|
|
201
|
+
/******/ (() => {
|
|
202
|
+
/******/ __webpack_require__.hmd = (module) => {
|
|
203
|
+
/******/ module = Object.create(module);
|
|
204
|
+
/******/ if (!module.children) module.children = [];
|
|
205
|
+
/******/ Object.defineProperty(module, 'exports', {
|
|
206
|
+
/******/ enumerable: true,
|
|
207
|
+
/******/ set: () => {
|
|
208
|
+
/******/ throw new Error('ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ' + module.id);
|
|
209
|
+
/******/ }
|
|
210
|
+
/******/ });
|
|
211
|
+
/******/ return module;
|
|
212
|
+
/******/ };
|
|
213
|
+
/******/ })();
|
|
214
|
+
/******/
|
|
215
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
216
|
+
/******/ (() => {
|
|
217
|
+
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
218
|
+
/******/ })();
|
|
219
|
+
/******/
|
|
220
|
+
/******/ /* webpack/runtime/make namespace object */
|
|
221
|
+
/******/ (() => {
|
|
222
|
+
/******/ // define __esModule on exports
|
|
223
|
+
/******/ __webpack_require__.r = (exports) => {
|
|
224
|
+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
225
|
+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
226
|
+
/******/ }
|
|
227
|
+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
228
|
+
/******/ };
|
|
229
|
+
/******/ })();
|
|
230
|
+
/******/
|
|
231
|
+
/************************************************************************/
|
|
232
|
+
var __webpack_exports__ = {};
|
|
233
|
+
// This entry needs to be wrapped in an IIFE because it needs to be in strict mode.
|
|
234
|
+
(() => {
|
|
235
|
+
"use strict";
|
|
236
|
+
// ESM COMPAT FLAG
|
|
237
|
+
__webpack_require__.r(__webpack_exports__);
|
|
238
|
+
|
|
239
|
+
// EXPORTS
|
|
240
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
241
|
+
Animate: () => (/* reexport */ Animate),
|
|
242
|
+
animateFeature: () => (/* reexport */ feature/* animateFeature */.C),
|
|
243
|
+
defaultEnterDurationForAnimatedInjectable: () => (/* reexport */ default_enter_duration_injectable.defaultEnterDurationForAnimatedInjectable),
|
|
244
|
+
defaultLeaveDurationForAnimatedInjectable: () => (/* reexport */ default_leave_duration_injectable.defaultLeaveDurationForAnimatedInjectable),
|
|
245
|
+
requestAnimationFrameInjectable: () => (/* reexport */ request_animation_frame_injectable.requestAnimationFrameInjectable)
|
|
246
|
+
});
|
|
247
|
+
|
|
248
|
+
;// external "react"
|
|
249
|
+
const external_react_namespaceObject = require("react");
|
|
250
|
+
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
|
|
251
|
+
;// external "@freelensapp/utilities"
|
|
252
|
+
const utilities_namespaceObject = require("@freelensapp/utilities");
|
|
253
|
+
;// external "@ogre-tools/injectable-react"
|
|
254
|
+
const injectable_react_namespaceObject = require("@ogre-tools/injectable-react");
|
|
255
|
+
// EXTERNAL MODULE: ./src/request-animation-frame.injectable.ts
|
|
256
|
+
var request_animation_frame_injectable = __webpack_require__(593);
|
|
257
|
+
// EXTERNAL MODULE: ./src/default-enter-duration.injectable.ts
|
|
258
|
+
var default_enter_duration_injectable = __webpack_require__(846);
|
|
259
|
+
// EXTERNAL MODULE: ./src/default-leave-duration.injectable.ts
|
|
260
|
+
var default_leave_duration_injectable = __webpack_require__(19);
|
|
261
|
+
;// ./src/animate.tsx
|
|
262
|
+
/**
|
|
263
|
+
* Copyright (c) OpenLens Authors. All rights reserved.
|
|
264
|
+
* Licensed under MIT License. See LICENSE in root directory for more information.
|
|
265
|
+
*/
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
|
|
272
|
+
|
|
273
|
+
const NonInjectedAnimate = (propsAndDeps) => {
|
|
274
|
+
const { requestAnimationFrame, defaultEnterDuration, defaultLeaveDuration, ...props } = propsAndDeps;
|
|
275
|
+
const { children, enter = true, enterDuration = defaultEnterDuration, leaveDuration = defaultLeaveDuration, name = "opacity", onEnter: onEnterHandler = (utilities_namespaceObject.noop), onLeave: onLeaveHandler = (utilities_namespaceObject.noop), } = props;
|
|
276
|
+
const [isVisible, setIsVisible] = (0,external_react_namespaceObject.useState)(false);
|
|
277
|
+
const [showClassNameEnter, setShowClassNameEnter] = (0,external_react_namespaceObject.useState)(false);
|
|
278
|
+
const [showClassNameLeave, setShowClassNameLeave] = (0,external_react_namespaceObject.useState)(false);
|
|
279
|
+
// eslint-disable-next-line xss/no-mixed-html
|
|
280
|
+
const contentElem = external_react_default().Children.only(children);
|
|
281
|
+
const classNames = (0,utilities_namespaceObject.cssNames)("Animate", name, contentElem.props.className, {
|
|
282
|
+
enter: showClassNameEnter,
|
|
283
|
+
leave: showClassNameLeave,
|
|
284
|
+
});
|
|
285
|
+
(0,external_react_namespaceObject.useEffect)(() => {
|
|
286
|
+
if (enter) {
|
|
287
|
+
setIsVisible(true);
|
|
288
|
+
requestAnimationFrame(() => {
|
|
289
|
+
setShowClassNameEnter(true);
|
|
290
|
+
onEnterHandler();
|
|
291
|
+
});
|
|
292
|
+
return utilities_namespaceObject.noop;
|
|
293
|
+
}
|
|
294
|
+
else if (isVisible) {
|
|
295
|
+
setShowClassNameLeave(true);
|
|
296
|
+
onLeaveHandler();
|
|
297
|
+
// Cleanup after duration
|
|
298
|
+
const handle = window.setTimeout(() => {
|
|
299
|
+
setIsVisible(false);
|
|
300
|
+
setShowClassNameEnter(false);
|
|
301
|
+
setShowClassNameLeave(false);
|
|
302
|
+
}, leaveDuration);
|
|
303
|
+
return () => clearTimeout(handle);
|
|
304
|
+
}
|
|
305
|
+
return utilities_namespaceObject.noop;
|
|
306
|
+
}, [enter]);
|
|
307
|
+
if (!isVisible) {
|
|
308
|
+
return null;
|
|
309
|
+
}
|
|
310
|
+
const cssVarsForAnimation = {
|
|
311
|
+
"--enter-duration": `${enterDuration}ms`,
|
|
312
|
+
"--leave-duration": `${leaveDuration}ms`,
|
|
313
|
+
};
|
|
314
|
+
return external_react_default().cloneElement(contentElem, {
|
|
315
|
+
className: classNames,
|
|
316
|
+
children: contentElem.props.children,
|
|
317
|
+
style: {
|
|
318
|
+
...contentElem.props.style,
|
|
319
|
+
...cssVarsForAnimation,
|
|
320
|
+
},
|
|
321
|
+
});
|
|
322
|
+
};
|
|
323
|
+
const Animate = (0,injectable_react_namespaceObject.withInjectables)(NonInjectedAnimate, {
|
|
324
|
+
getProps: (di, props) => ({
|
|
325
|
+
...props,
|
|
326
|
+
requestAnimationFrame: di.inject(request_animation_frame_injectable.requestAnimationFrameInjectable),
|
|
327
|
+
defaultEnterDuration: di.inject(default_enter_duration_injectable.defaultEnterDurationForAnimatedInjectable),
|
|
328
|
+
defaultLeaveDuration: di.inject(default_leave_duration_injectable.defaultLeaveDurationForAnimatedInjectable),
|
|
329
|
+
}),
|
|
330
|
+
});
|
|
331
|
+
|
|
332
|
+
// EXTERNAL MODULE: ./src/feature.ts + 2 modules
|
|
333
|
+
var feature = __webpack_require__(859);
|
|
334
|
+
;// ./index.ts
|
|
335
|
+
/**
|
|
336
|
+
* Copyright (c) OpenLens Authors. All rights reserved.
|
|
337
|
+
* Licensed under MIT License. See LICENSE in root directory for more information.
|
|
338
|
+
*/
|
|
339
|
+
|
|
340
|
+
|
|
341
|
+
|
|
342
|
+
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
})();
|
|
346
|
+
|
|
347
|
+
module.exports = __webpack_exports__;
|
|
348
|
+
/******/ })()
|
|
349
|
+
;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@freelensapp/animate",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "1.1.0",
|
|
5
5
|
"description": "Highly extendable animate in the Freelens.",
|
|
6
6
|
"type": "commonjs",
|
|
7
7
|
"files": [
|
|
@@ -33,16 +33,16 @@
|
|
|
33
33
|
"lint:fix": "lens-lint --fix"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"@freelensapp/feature-core": "^
|
|
37
|
-
"@freelensapp/utilities": "^
|
|
36
|
+
"@freelensapp/feature-core": "^1.1.0",
|
|
37
|
+
"@freelensapp/utilities": "^1.1.0",
|
|
38
38
|
"@ogre-tools/injectable": "^17.2.0",
|
|
39
39
|
"@ogre-tools/injectable-extension-for-auto-registration": "^17.2.0",
|
|
40
40
|
"@ogre-tools/injectable-react": "^17.2.0",
|
|
41
41
|
"react": "^17.0.2"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@freelensapp/eslint-config": "^
|
|
45
|
-
"@freelensapp/webpack": "^
|
|
44
|
+
"@freelensapp/eslint-config": "^1.1.0",
|
|
45
|
+
"@freelensapp/webpack": "^1.1.0"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "3c83227539928982d53852416a620cd8afee7da5"
|
|
48
48
|
}
|