Skip to content

Commit 819861a

Browse files
EugeniyKiyashkoalexslavr
EugeniyKiyashko
authored and
alexslavr
committed
Ignore errors after moving ink_ripple, swatch_container, and the selectors utility to TS
1 parent 3dadbd0 commit 819861a

File tree

28 files changed

+173
-169
lines changed

28 files changed

+173
-169
lines changed

‎packages/devextreme/js/__internal/core/utils/m_ink_ripple.ts‎

Lines changed: 96 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { getOuterWidth, getOuterHeight } from '../../core/utils/size';
2-
import $ from '../../core/renderer';
1+
import $ from '@js/core/renderer';
2+
import { getOuterHeight, getOuterWidth } from '@js/core/utils/size';
3+
34
const INKRIPPLE_CLASS = 'dx-inkripple';
45
const INKRIPPLE_WAVE_CLASS = 'dx-inkripple-wave';
56
const INKRIPPLE_SHOWING_CLASS = 'dx-inkripple-showing';
@@ -12,124 +13,131 @@ const HOLD_ANIMATION_DURATION = 1000;
1213
const DEFAULT_WAVE_INDEX = 0;
1314

1415
export const initConfig = (config = {}) => {
15-
const { useHoldAnimation, waveSizeCoefficient, isCentered, wavesNumber } = config;
16-
return {
17-
waveSizeCoefficient: waveSizeCoefficient || DEFAULT_WAVE_SIZE_COEFFICIENT,
18-
isCentered: isCentered || false,
19-
wavesNumber: wavesNumber || 1,
20-
durations: getDurations(useHoldAnimation ?? true)
21-
};
16+
const {
17+
// @ts-expect-error
18+
useHoldAnimation, waveSizeCoefficient, isCentered, wavesNumber,
19+
} = config;
20+
return {
21+
waveSizeCoefficient: waveSizeCoefficient || DEFAULT_WAVE_SIZE_COEFFICIENT,
22+
isCentered: isCentered || false,
23+
wavesNumber: wavesNumber || 1,
24+
durations: getDurations(useHoldAnimation ?? true),
25+
};
2226
};
2327

24-
export const render = function(args) {
25-
const config = initConfig(args);
28+
export const render = function (args?) {
29+
const config = initConfig(args);
2630

27-
return {
28-
showWave: showWave.bind(this, config),
29-
hideWave: hideWave.bind(this, config)
30-
};
31+
return {
32+
showWave: showWave.bind(this, config),
33+
hideWave: hideWave.bind(this, config),
34+
};
3135
};
3236

33-
const getInkRipple = function(element) {
34-
let result = element.children('.' + INKRIPPLE_CLASS);
37+
const getInkRipple = function (element) {
38+
let result = element.children(`.${INKRIPPLE_CLASS}`);
3539

36-
if(result.length === 0) {
37-
result = $('<div>')
38-
.addClass(INKRIPPLE_CLASS)
39-
.appendTo(element);
40-
}
40+
if (result.length === 0) {
41+
result = $('<div>')
42+
.addClass(INKRIPPLE_CLASS)
43+
.appendTo(element);
44+
}
4145

42-
return result;
46+
return result;
4347
};
4448

45-
const getWaves = function(element, wavesNumber) {
46-
const inkRipple = getInkRipple($(element));
47-
const result = inkRipple.children('.' + INKRIPPLE_WAVE_CLASS).toArray();
49+
const getWaves = function (element, wavesNumber) {
50+
const inkRipple = getInkRipple($(element));
51+
const result = inkRipple.children(`.${INKRIPPLE_WAVE_CLASS}`).toArray();
4852

49-
for(let i = result.length; i < wavesNumber; i++) {
50-
const $currentWave = $('<div>')
51-
.appendTo(inkRipple)
52-
.addClass(INKRIPPLE_WAVE_CLASS);
53+
for (let i = result.length; i < wavesNumber; i++) {
54+
const $currentWave = $('<div>')
55+
.appendTo(inkRipple)
56+
.addClass(INKRIPPLE_WAVE_CLASS);
5357

54-
result.push($currentWave[0]);
55-
}
58+
result.push($currentWave[0]);
59+
}
5660

57-
return $(result);
61+
return $(result);
5862
};
5963

60-
const getWaveStyleConfig = function(args, config) {
61-
const element = $(config.element);
62-
const elementWidth = getOuterWidth(element);
63-
const elementHeight = getOuterHeight(element);
64-
const elementDiagonal = parseInt(Math.sqrt(elementWidth * elementWidth + elementHeight * elementHeight));
65-
const waveSize = Math.min(MAX_WAVE_SIZE, parseInt(elementDiagonal * args.waveSizeCoefficient));
66-
let left;
67-
let top;
68-
69-
if(args.isCentered) {
70-
left = (elementWidth - waveSize) / 2;
71-
top = (elementHeight - waveSize) / 2;
72-
} else {
73-
const event = config.event;
74-
const position = element.offset();
75-
const x = event.pageX - position.left;
76-
const y = event.pageY - position.top;
77-
78-
left = x - waveSize / 2;
79-
top = y - waveSize / 2;
80-
}
81-
82-
return {
83-
left,
84-
top,
85-
height: waveSize,
86-
width: waveSize
87-
};
64+
const getWaveStyleConfig = function (args, config) {
65+
const element = $(config.element);
66+
const elementWidth = getOuterWidth(element);
67+
const elementHeight = getOuterHeight(element);
68+
// @ts-expect-error
69+
const elementDiagonal = parseInt(Math.sqrt(elementWidth * elementWidth + elementHeight * elementHeight));
70+
// @ts-expect-error
71+
const waveSize = Math.min(MAX_WAVE_SIZE, parseInt(elementDiagonal * args.waveSizeCoefficient));
72+
let left;
73+
let top;
74+
75+
if (args.isCentered) {
76+
left = (elementWidth - waveSize) / 2;
77+
top = (elementHeight - waveSize) / 2;
78+
} else {
79+
const { event } = config;
80+
const position = element.offset();
81+
// @ts-expect-error
82+
const x = event.pageX - position.left;
83+
// @ts-expect-error
84+
const y = event.pageY - position.top;
85+
86+
left = x - waveSize / 2;
87+
top = y - waveSize / 2;
88+
}
89+
90+
return {
91+
left,
92+
top,
93+
height: waveSize,
94+
width: waveSize,
95+
};
8896
};
8997

9098
export function showWave(args, config) {
91-
const $wave = getWaves(config.element, args.wavesNumber).eq(config.wave || DEFAULT_WAVE_INDEX);
99+
const $wave = getWaves(config.element, args.wavesNumber).eq(config.wave || DEFAULT_WAVE_INDEX);
92100

93-
args.hidingTimeout && clearTimeout(args.hidingTimeout);
94-
hideSelectedWave($wave);
95-
$wave.css(getWaveStyleConfig(args, config));
96-
args.showingTimeout = setTimeout(showingWaveHandler.bind(this, args, $wave), 0);
101+
args.hidingTimeout && clearTimeout(args.hidingTimeout);
102+
hideSelectedWave($wave);
103+
$wave.css(getWaveStyleConfig(args, config));
104+
args.showingTimeout = setTimeout(showingWaveHandler.bind(this, args, $wave), 0);
97105
}
98106

99107
function showingWaveHandler(args, $wave) {
100-
const durationCss = args.durations.showingScale + 'ms';
108+
const durationCss = `${args.durations.showingScale}ms`;
101109

102-
$wave
103-
.addClass(INKRIPPLE_SHOWING_CLASS)
104-
.css('transitionDuration', durationCss);
110+
$wave
111+
.addClass(INKRIPPLE_SHOWING_CLASS)
112+
.css('transitionDuration', durationCss);
105113
}
106114

107115
function getDurations(useHoldAnimation) {
108-
return {
109-
showingScale: useHoldAnimation ? HOLD_ANIMATION_DURATION : ANIMATION_DURATION,
110-
hidingScale: ANIMATION_DURATION,
111-
hidingOpacity: ANIMATION_DURATION
112-
};
116+
return {
117+
showingScale: useHoldAnimation ? HOLD_ANIMATION_DURATION : ANIMATION_DURATION,
118+
hidingScale: ANIMATION_DURATION,
119+
hidingOpacity: ANIMATION_DURATION,
120+
};
113121
}
114122

115123
function hideSelectedWave($wave) {
116-
$wave
117-
.removeClass(INKRIPPLE_HIDING_CLASS)
118-
.css('transitionDuration', '');
124+
$wave
125+
.removeClass(INKRIPPLE_HIDING_CLASS)
126+
.css('transitionDuration', '');
119127
}
120128

121129
export function hideWave(args, config) {
122-
args.showingTimeout && clearTimeout(args.showingTimeout);
130+
args.showingTimeout && clearTimeout(args.showingTimeout);
123131

124-
const $wave = getWaves(config.element, config.wavesNumber).eq(config.wave || DEFAULT_WAVE_INDEX);
125-
const durations = args.durations;
126-
const durationCss = durations.hidingScale + 'ms, ' + durations.hidingOpacity + 'ms';
132+
const $wave = getWaves(config.element, config.wavesNumber).eq(config.wave || DEFAULT_WAVE_INDEX);
133+
const { durations } = args;
134+
const durationCss = `${durations.hidingScale}ms, ${durations.hidingOpacity}ms`;
127135

128-
$wave
129-
.addClass(INKRIPPLE_HIDING_CLASS)
130-
.removeClass(INKRIPPLE_SHOWING_CLASS)
131-
.css('transitionDuration', durationCss);
136+
$wave
137+
.addClass(INKRIPPLE_HIDING_CLASS)
138+
.removeClass(INKRIPPLE_SHOWING_CLASS)
139+
.css('transitionDuration', durationCss);
132140

133-
const animationDuration = Math.max(durations.hidingScale, durations.hidingOpacity);
134-
args.hidingTimeout = setTimeout(hideSelectedWave.bind(this, $wave), animationDuration);
141+
const animationDuration = Math.max(durations.hidingScale, durations.hidingOpacity);
142+
args.hidingTimeout = setTimeout(hideSelectedWave.bind(this, $wave), animationDuration);
135143
}

‎packages/devextreme/js/__internal/core/utils/m_selectors.ts‎

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,45 @@
1-
import $ from '../../core/renderer';
2-
import domAdapter from '../../core/dom_adapter';
1+
import domAdapter from '@js/core/dom_adapter';
2+
import $ from '@js/core/renderer';
33

4-
const focusableFn = function(element, tabIndex) {
5-
if(!visible(element)) {
6-
return false;
7-
}
8-
const nodeName = element.nodeName.toLowerCase();
9-
const isTabIndexNotNaN = !isNaN(tabIndex);
10-
const isDisabled = element.disabled;
11-
const isDefaultFocus = /^(input|select|textarea|button|object|iframe)$/.test(nodeName);
12-
const isHyperlink = nodeName === 'a';
13-
let isFocusable;
14-
const isContentEditable = element.isContentEditable;
4+
const focusableFn = (element, tabIndex) => {
5+
if (!visible(element)) {
6+
return false;
7+
}
8+
const nodeName = element.nodeName.toLowerCase();
9+
const isTabIndexNotNaN = !isNaN(tabIndex);
10+
const isDisabled = element.disabled;
11+
const isDefaultFocus = /^(input|select|textarea|button|object|iframe)$/.test(nodeName);
12+
const isHyperlink = nodeName === 'a';
13+
let isFocusable;
14+
const { isContentEditable } = element;
1515

16-
if(isDefaultFocus || isContentEditable) {
17-
isFocusable = !isDisabled;
18-
} else {
19-
if(isHyperlink) {
20-
isFocusable = element.href || isTabIndexNotNaN;
21-
} else {
22-
isFocusable = isTabIndexNotNaN;
23-
}
24-
}
16+
if (isDefaultFocus || isContentEditable) {
17+
isFocusable = !isDisabled;
18+
} else if (isHyperlink) {
19+
isFocusable = element.href || isTabIndexNotNaN;
20+
} else {
21+
isFocusable = isTabIndexNotNaN;
22+
}
2523

26-
return isFocusable;
24+
return isFocusable;
2725
};
2826

2927
function visible(element) {
30-
const $element = $(element);
31-
return $element.is(':visible') && $element.css('visibility') !== 'hidden' && $element.parents().css('visibility') !== 'hidden';
28+
const $element = $(element);
29+
return $element.is(':visible') && $element.css('visibility') !== 'hidden' && $element.parents().css('visibility') !== 'hidden';
3230
}
3331

34-
export const focusable = function(index, element) {
35-
return focusableFn(element, $(element).attr('tabIndex'));
32+
export const focusable = (index, element) => focusableFn(element, $(element).attr('tabIndex'));
33+
export const tabbable = (index, element) => {
34+
const tabIndex = $(element).attr('tabIndex');
35+
// @ts-expect-error
36+
return (isNaN(tabIndex) || tabIndex >= 0) && focusableFn(element, tabIndex);
3637
};
37-
export const tabbable = function(index, element) {
38-
const tabIndex = $(element).attr('tabIndex');
39-
return (isNaN(tabIndex) || tabIndex >= 0) && focusableFn(element, tabIndex);
40-
};
41-
// note: use this method instead of is(":focus")
42-
export const focused = function($element) {
43-
const element = $($element).get(0);
44-
return domAdapter.getActiveElement(element) === element;
38+
// note: use this method instead of is(":focus")
39+
export const focused = ($element) => {
40+
const element = $($element).get(0);
41+
// @ts-expect-error
42+
return domAdapter.getActiveElement(element) === element;
4543
};
4644

45+
export default { focusable, tabbable, focused };

‎packages/devextreme/js/__internal/core/utils/m_swatch_container.ts‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
import $ from '../../core/renderer';
2-
import { value } from '../../core/utils/view_port';
1+
import $ from '@js/core/renderer';
2+
import { value } from '@js/core/utils/view_port';
33

44
const SWATCH_CONTAINER_CLASS_PREFIX = 'dx-swatch-';
55

6-
const getSwatchContainer = element => {
7-
const $element = $(element);
8-
const swatchContainer = $element.closest(`[class^="${SWATCH_CONTAINER_CLASS_PREFIX}"], [class*=" ${SWATCH_CONTAINER_CLASS_PREFIX}"]`);
9-
const viewport = value();
10-
if(!swatchContainer.length) return viewport;
6+
const getSwatchContainer = (element) => {
7+
const $element = $(element);
8+
const swatchContainer = $element.closest(`[class^="${SWATCH_CONTAINER_CLASS_PREFIX}"], [class*=" ${SWATCH_CONTAINER_CLASS_PREFIX}"]`);
9+
const viewport = value();
10+
if (!swatchContainer.length) return viewport;
1111

12-
const swatchClassRegex = new RegExp(`(\\s|^)(${SWATCH_CONTAINER_CLASS_PREFIX}.*?)(\\s|$)`);
13-
const swatchClass = swatchContainer[0].className.match(swatchClassRegex)[2];
14-
let viewportSwatchContainer = viewport.children('.' + swatchClass);
12+
const swatchClassRegex = new RegExp(`(\\s|^)(${SWATCH_CONTAINER_CLASS_PREFIX}.*?)(\\s|$)`);
13+
const swatchClass = swatchContainer[0].className.match(swatchClassRegex)[2];
14+
let viewportSwatchContainer = viewport.children(`.${swatchClass}`);
1515

16-
if(!viewportSwatchContainer.length) {
17-
viewportSwatchContainer = $('<div>').addClass(swatchClass).appendTo(viewport);
18-
}
16+
if (!viewportSwatchContainer.length) {
17+
viewportSwatchContainer = $('<div>').addClass(swatchClass).appendTo(viewport);
18+
}
1919

20-
return viewportSwatchContainer;
20+
return viewportSwatchContainer;
2121
};
2222

2323
export default { getSwatchContainer: getSwatchContainer };
24-

‎packages/devextreme/js/__internal/core/widget/widget.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import { each } from '@js/core/utils/iterator';
1717
import { isDefined, isPlainObject } from '@js/core/utils/type';
1818
import { compare as compareVersions } from '@js/core/utils/version';
1919
import type { DxEvent } from '@js/events';
20-
import { focusable as focusableSelector } from '@js/ui/widget/selectors';
2120
import type { WidgetOptions } from '@js/ui/widget/ui.widget';
21+
import { focusable as focusableSelector } from '@ts/core/utils/m_selectors';
2222
import type { KeyboardKeyDownEvent } from '@ts/events/core/m_keyboard_processor';
2323

2424
import DOMComponent from './dom_component';

‎packages/devextreme/js/__internal/events/utils/index.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import eventsEngine from '@js/common/core/events/core/events_engine';
22
import $ from '@js/core/renderer';
33
import { extend } from '@js/core/utils/extend';
44
import { each } from '@js/core/utils/iterator';
5-
import { focused } from '@js/ui/widget/selectors';
5+
import { focused } from '@ts/core/utils/m_selectors';
66

77
import mappedAddNamespace from './m_add_namespace';
88
/* eslint-disable spellcheck/spell-checker */
@@ -65,7 +65,6 @@ const EVENT_SOURCES_REGEX = {
6565
pointer: /^(ms)?pointer/i,
6666
};
6767

68-
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
6968
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
7069
/* eslint-disable @typescript-eslint/explicit-function-return-type */
7170
/* eslint-disable @typescript-eslint/no-unsafe-return */
@@ -74,7 +73,6 @@ export const eventSource = ({ type }) => {
7473
/* eslint-disable @typescript-eslint/no-invalid-void-type */
7574
// eslint-disable-next-line consistent-return
7675
each(EVENT_SOURCES_REGEX, function (key): boolean | void {
77-
// eslint-disable-next-line @typescript-eslint/no-invalid-this
7876
if (this.test(type)) {
7977
result = key;
8078

‎packages/devextreme/js/__internal/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
setHeight, setWidth,
2121
} from '@js/core/utils/size';
2222
import { isDefined, isObject, isString } from '@js/core/utils/type';
23-
import swatchContainer from '@js/ui/widget/swatch_container';
23+
import swatchContainer from '@ts/core/utils/m_swatch_container';
2424
import type { EditorFactory } from '@ts/grids/grid_core/editor_factory/m_editor_factory';
2525
import type { ColumnPoint, ModuleType } from '@ts/grids/grid_core/m_types';
2626
import type { RowsView } from '@ts/grids/grid_core/views/m_rows_view';

0 commit comments

Comments
 (0)