Skip to content

Commit e8debc3

Browse files
anna-shakhovaanna-shakhova
committed
Core Animation: fix ts-errors
1 parent ddbb895 commit e8debc3

36 files changed

+1410
-1143
lines changed

‎packages/devextreme/js/__internal/common/core/animation/easing.ts‎

Lines changed: 70 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,93 @@
1-
import { isFunction } from '../../../core/utils/type';
1+
import { isFunction } from '@js/core/utils/type';
22

33
const CSS_TRANSITION_EASING_REGEX = /cubic-bezier\((\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\)/;
44

55
const TransitionTimingFuncMap = {
6-
'linear': 'cubic-bezier(0, 0, 1, 1)',
7-
'swing': 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
8-
'ease': 'cubic-bezier(0.25, 0.1, 0.25, 1)',
9-
'ease-in': 'cubic-bezier(0.42, 0, 1, 1)',
10-
'ease-out': 'cubic-bezier(0, 0, 0.58, 1)',
11-
'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1)'
6+
linear: 'cubic-bezier(0, 0, 1, 1)',
7+
swing: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
8+
ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
9+
'ease-in': 'cubic-bezier(0.42, 0, 1, 1)',
10+
'ease-out': 'cubic-bezier(0, 0, 0.58, 1)',
11+
'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1)',
1212
};
1313

14-
const polynomBezier = function(x1, y1, x2, y2) {
15-
const Cx = 3 * x1;
16-
const Bx = 3 * (x2 - x1) - Cx;
17-
const Ax = 1 - Cx - Bx;
14+
const polynomBezier = (x1: number, y1: number, x2: number, y2: number): ((t: number) => number) => {
15+
const Cx = 3 * x1;
16+
const Bx = 3 * (x2 - x1) - Cx;
17+
const Ax = 1 - Cx - Bx;
1818

19-
const Cy = 3 * y1;
20-
const By = 3 * (y2 - y1) - Cy;
21-
const Ay = 1 - Cy - By;
19+
const Cy = 3 * y1;
20+
const By = 3 * (y2 - y1) - Cy;
21+
const Ay = 1 - Cy - By;
2222

23-
const bezierX = function(t) {
24-
return t * (Cx + t * (Bx + t * Ax));
25-
};
26-
27-
const bezierY = function(t) {
28-
return t * (Cy + t * (By + t * Ay));
29-
};
30-
31-
const derivativeX = function(t) {
32-
return Cx + t * (2 * Bx + t * 3 * Ax);
33-
};
23+
const bezierX = (t: number): number => t * (Cx + t * (Bx + t * Ax));
3424

35-
const findXFor = function(t) {
36-
let x = t;
37-
let i = 0;
38-
let z;
25+
const bezierY = (t: number): number => t * (Cy + t * (By + t * Ay));
3926

40-
while(i < 14) {
41-
z = bezierX(x) - t;
42-
if(Math.abs(z) < 1e-3) {
43-
break;
44-
}
27+
const derivativeX = (t: number): number => Cx + t * (2 * Bx + t * 3 * Ax);
4528

46-
x = x - z / derivativeX(x);
47-
i++;
48-
}
29+
const findXFor = (t: number): number => {
30+
let x = t;
31+
let i = 0;
32+
// eslint-disable-next-line no-undef-init
33+
let z: number | undefined = undefined;
4934

50-
return x;
51-
};
35+
while (i < 14) {
36+
z = bezierX(x) - t;
37+
if (Math.abs(z) < 1e-3) {
38+
break;
39+
}
5240

53-
return function(t) {
54-
return bezierY(findXFor(t));
55-
};
56-
};
57-
58-
let easing = {};
59-
export const convertTransitionTimingFuncToEasing = function(cssTransitionEasing) {
60-
cssTransitionEasing = TransitionTimingFuncMap[cssTransitionEasing] || cssTransitionEasing;
61-
62-
let coeffs = cssTransitionEasing.match(CSS_TRANSITION_EASING_REGEX);
63-
let forceName;
64-
65-
if(!coeffs) {
66-
forceName = 'linear';
67-
coeffs = TransitionTimingFuncMap[forceName].match(CSS_TRANSITION_EASING_REGEX);
41+
x -= z / derivativeX(x);
42+
i += 1;
6843
}
6944

70-
coeffs = coeffs.slice(1, 5);
71-
for(let i = 0; i < coeffs.length; i++) {
72-
coeffs[i] = parseFloat(coeffs[i]);
73-
}
45+
return x;
46+
};
7447

75-
const easingName = forceName || 'cubicbezier_' + coeffs.join('_').replace(/\./g, 'p');
48+
return (t: number): number => bezierY(findXFor(t));
49+
};
7650

77-
if(!isFunction(easing[easingName])) {
78-
easing[easingName] = function(x, t, b, c, d) {
79-
return c * polynomBezier(coeffs[0], coeffs[1], coeffs[2], coeffs[3])(t / d) + b;
80-
};
81-
}
51+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
52+
let easing: Record<string, any> = {};
53+
export const convertTransitionTimingFuncToEasing = (cssTransitionEasing: string): string => {
54+
// eslint-disable-next-line no-param-reassign
55+
cssTransitionEasing = TransitionTimingFuncMap[cssTransitionEasing] || cssTransitionEasing;
56+
57+
// eslint-disable-next-line @stylistic/max-len
58+
let coeffs: RegExpExecArray | string[] | null = CSS_TRANSITION_EASING_REGEX.exec(cssTransitionEasing);
59+
const numCoeffs: number[] = [];
60+
let forceName: string | null = null;
61+
62+
if (!coeffs) {
63+
forceName = 'linear';
64+
coeffs = TransitionTimingFuncMap[forceName].match(CSS_TRANSITION_EASING_REGEX);
65+
}
66+
67+
// @ts-expect-error
68+
coeffs = coeffs.slice(1, 5);
69+
for (let i = 0; i < coeffs.length; i += 1) {
70+
numCoeffs[i] = parseFloat(coeffs[i]);
71+
}
72+
73+
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
74+
const easingName = forceName || `cubicbezier_${numCoeffs.join('_').replace(/\./g, 'p')}`;
75+
76+
if (!isFunction(easing[easingName])) {
77+
easing[easingName] = function (x: number, t: number, b: number, c: number, d: number): number {
78+
return c * polynomBezier(numCoeffs[0], numCoeffs[1], numCoeffs[2], numCoeffs[3])(t / d) + b;
79+
};
80+
}
8281

83-
return easingName;
82+
return easingName;
8483
};
8584

86-
export function setEasing(value) {
87-
easing = value;
85+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
86+
export function setEasing(value: Record<string, any>): void {
87+
easing = value;
8888
}
8989

90-
export function getEasing(name) {
91-
return easing[name];
90+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
91+
export function getEasing(name: string): any {
92+
return easing[name];
9293
}

‎packages/devextreme/js/__internal/common/core/animation/frame.ts‎

Lines changed: 47 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,59 @@
1-
import { hasWindow, getWindow } from '../../../core/utils/window';
2-
const window = hasWindow() ? getWindow() : {};
3-
import callOnce from '../../../core/utils/call_once';
1+
import callOnce from '@js/core/utils/call_once';
2+
import { getWindow, hasWindow } from '@js/core/utils/window';
3+
4+
type ExtendedWindow = Window & {
5+
webkitRequestAnimationFrame?: typeof window.requestAnimationFrame;
6+
mozRequestAnimationFrame?: typeof window.requestAnimationFrame;
7+
oRequestAnimationFrame?: typeof window.requestAnimationFrame;
8+
msRequestAnimationFrame?: typeof window.requestAnimationFrame;
9+
10+
webkitCancelAnimationFrame?: typeof window.cancelAnimationFrame;
11+
mozCancelAnimationFrame?: typeof window.cancelAnimationFrame;
12+
oCancelAnimationFrame?: typeof window.cancelAnimationFrame;
13+
msCancelAnimationFrame?: typeof window.cancelAnimationFrame;
14+
};
15+
16+
const window: ExtendedWindow = (hasWindow() ? getWindow() : {}) as ExtendedWindow;
417

518
const FRAME_ANIMATION_STEP_TIME = 1000 / 60;
619

7-
let request = function(callback) {
8-
return setTimeout(callback, FRAME_ANIMATION_STEP_TIME);
20+
let request = function (callback: FrameRequestCallback): number {
21+
/* eslint-disable no-restricted-globals */
22+
return setTimeout(callback, FRAME_ANIMATION_STEP_TIME);
923
};
1024

11-
let cancel = function(requestID) {
12-
clearTimeout(requestID);
25+
let cancel = function (requestID: number): void {
26+
clearTimeout(requestID);
1327
};
1428

15-
const setAnimationFrameMethods = callOnce(function() {
16-
const nativeRequest = window.requestAnimationFrame ||
17-
window.webkitRequestAnimationFrame ||
18-
window.mozRequestAnimationFrame ||
19-
window.oRequestAnimationFrame ||
20-
window.msRequestAnimationFrame;
21-
22-
const nativeCancel = window.cancelAnimationFrame ||
23-
window.webkitCancelAnimationFrame ||
24-
window.mozCancelAnimationFrame ||
25-
window.oCancelAnimationFrame ||
26-
window.msCancelAnimationFrame;
27-
28-
if(nativeRequest && nativeCancel) {
29-
request = nativeRequest;
30-
cancel = nativeCancel;
31-
}
29+
const setAnimationFrameMethods = callOnce(() => {
30+
const nativeRequest = window.requestAnimationFrame
31+
|| window.webkitRequestAnimationFrame
32+
|| window.mozRequestAnimationFrame
33+
|| window.oRequestAnimationFrame
34+
|| window.msRequestAnimationFrame;
35+
36+
const nativeCancel = window.cancelAnimationFrame
37+
|| window.webkitCancelAnimationFrame
38+
|| window.mozCancelAnimationFrame
39+
|| window.oCancelAnimationFrame
40+
|| window.msCancelAnimationFrame;
41+
42+
if (nativeRequest && nativeCancel) {
43+
request = nativeRequest;
44+
cancel = nativeCancel;
45+
}
3246
});
3347

34-
export function requestAnimationFrame() {
35-
setAnimationFrameMethods();
36-
return request.apply(window, arguments);
48+
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
49+
export function requestAnimationFrame(...args): number {
50+
setAnimationFrameMethods();
51+
52+
// @ts-ignore
53+
return request.apply(window, args);
3754
}
3855

39-
export function cancelAnimationFrame() {
40-
setAnimationFrameMethods();
41-
cancel.apply(window, arguments);
56+
export function cancelAnimationFrame(requestID: number): void {
57+
setAnimationFrameMethods();
58+
cancel.apply(window, [requestID]);
4259
}

‎packages/devextreme/js/__internal/common/core/animation/frameModule.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import * as frameModule from './frame';
2+
3+
export default frameModule;

0 commit comments

Comments
 (0)