Skip to content

Commit 678a1c3

Browse files
marker-daomarker dao ®
marker-dao
and
marker dao ®
authored
LoadIndicator: Add _animationType option
Co-authored-by: marker dao ® <[email protected]>
1 parent 3a2cb36 commit 678a1c3

File tree

5 files changed

+177
-89
lines changed

5 files changed

+177
-89
lines changed

‎packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/__snapshots__/options.integration.test.ts.snap‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource 1`] = `
5252
class="dx-loadindicator-wrapper"
5353
>
5454
<div
55-
class="dx-loadindicator-content"
55+
class="dx-loadindicator-content dx-loadindicator-content-circle"
5656
>
5757
<div
5858
class="dx-loadindicator-icon"
@@ -220,7 +220,7 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource 1`] = `
220220
class="dx-loadindicator-wrapper"
221221
>
222222
<div
223-
class="dx-loadindicator-content"
223+
class="dx-loadindicator-content dx-loadindicator-content-circle"
224224
>
225225
<div
226226
class="dx-loadindicator-icon"
@@ -419,7 +419,7 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with exclude
419419
class="dx-loadindicator-wrapper"
420420
>
421421
<div
422-
class="dx-loadindicator-content"
422+
class="dx-loadindicator-content dx-loadindicator-content-circle"
423423
>
424424
<div
425425
class="dx-loadindicator-icon"
@@ -587,7 +587,7 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with exclude
587587
class="dx-loadindicator-wrapper"
588588
>
589589
<div
590-
class="dx-loadindicator-content"
590+
class="dx-loadindicator-content dx-loadindicator-content-circle"
591591
>
592592
<div
593593
class="dx-loadindicator-icon"
@@ -786,7 +786,7 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with exclude
786786
class="dx-loadindicator-wrapper"
787787
>
788788
<div
789-
class="dx-loadindicator-content"
789+
class="dx-loadindicator-content dx-loadindicator-content-circle"
790790
>
791791
<div
792792
class="dx-loadindicator-icon"
@@ -954,7 +954,7 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with exclude
954954
class="dx-loadindicator-wrapper"
955955
>
956956
<div
957-
class="dx-loadindicator-content"
957+
class="dx-loadindicator-content dx-loadindicator-content-circle"
958958
>
959959
<div
960960
class="dx-loadindicator-icon"
@@ -1153,7 +1153,7 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with filter v
11531153
class="dx-loadindicator-wrapper"
11541154
>
11551155
<div
1156-
class="dx-loadindicator-content"
1156+
class="dx-loadindicator-content dx-loadindicator-content-circle"
11571157
>
11581158
<div
11591159
class="dx-loadindicator-icon"
@@ -1321,7 +1321,7 @@ exports[`Options Column.HeaderFilter dataSource: custom dataSource with filter v
13211321
class="dx-loadindicator-wrapper"
13221322
>
13231323
<div
1324-
class="dx-loadindicator-content"
1324+
class="dx-loadindicator-content dx-loadindicator-content-circle"
13251325
>
13261326
<div
13271327
class="dx-loadindicator-icon"
@@ -1520,7 +1520,7 @@ exports[`Options Column.HeaderFilter filterType + values: exclude filter 1`] = `
15201520
class="dx-loadindicator-wrapper"
15211521
>
15221522
<div
1523-
class="dx-loadindicator-content"
1523+
class="dx-loadindicator-content dx-loadindicator-content-circle"
15241524
>
15251525
<div
15261526
class="dx-loadindicator-icon"
@@ -1799,7 +1799,7 @@ exports[`Options Column.HeaderFilter filterType + values: exclude filter 1`] = `
17991799
class="dx-loadindicator-wrapper"
18001800
>
18011801
<div
1802-
class="dx-loadindicator-content"
1802+
class="dx-loadindicator-content dx-loadindicator-content-circle"
18031803
>
18041804
<div
18051805
class="dx-loadindicator-icon"
@@ -1998,7 +1998,7 @@ exports[`Options Column.HeaderFilter filterType + values: exclude filter with va
19981998
class="dx-loadindicator-wrapper"
19991999
>
20002000
<div
2001-
class="dx-loadindicator-content"
2001+
class="dx-loadindicator-content dx-loadindicator-content-circle"
20022002
>
20032003
<div
20042004
class="dx-loadindicator-icon"
@@ -2277,7 +2277,7 @@ exports[`Options Column.HeaderFilter filterType + values: exclude filter with va
22772277
class="dx-loadindicator-wrapper"
22782278
>
22792279
<div
2280-
class="dx-loadindicator-content"
2280+
class="dx-loadindicator-content dx-loadindicator-content-circle"
22812281
>
22822282
<div
22832283
class="dx-loadindicator-icon"
@@ -2476,7 +2476,7 @@ exports[`Options Column.HeaderFilter filterType + values: filter values 1`] = `
24762476
class="dx-loadindicator-wrapper"
24772477
>
24782478
<div
2479-
class="dx-loadindicator-content"
2479+
class="dx-loadindicator-content dx-loadindicator-content-circle"
24802480
>
24812481
<div
24822482
class="dx-loadindicator-icon"
@@ -2755,7 +2755,7 @@ exports[`Options Column.HeaderFilter filterType + values: filter values 1`] = `
27552755
class="dx-loadindicator-wrapper"
27562756
>
27572757
<div
2758-
class="dx-loadindicator-content"
2758+
class="dx-loadindicator-content dx-loadindicator-content-circle"
27592759
>
27602760
<div
27612761
class="dx-loadindicator-icon"
@@ -2954,7 +2954,7 @@ exports[`Options HeaderFilter texts: custom translations 1`] = `
29542954
class="dx-loadindicator-wrapper"
29552955
>
29562956
<div
2957-
class="dx-loadindicator-content"
2957+
class="dx-loadindicator-content dx-loadindicator-content-circle"
29582958
>
29592959
<div
29602960
class="dx-loadindicator-icon"
@@ -3085,7 +3085,7 @@ exports[`Options HeaderFilter texts: custom translations 1`] = `
30853085
class="dx-loadindicator-wrapper"
30863086
>
30873087
<div
3088-
class="dx-loadindicator-content"
3088+
class="dx-loadindicator-content dx-loadindicator-content-circle"
30893089
>
30903090
<div
30913091
class="dx-loadindicator-icon"
@@ -3284,7 +3284,7 @@ exports[`Options HeaderFilter texts: default translation 1`] = `
32843284
class="dx-loadindicator-wrapper"
32853285
>
32863286
<div
3287-
class="dx-loadindicator-content"
3287+
class="dx-loadindicator-content dx-loadindicator-content-circle"
32883288
>
32893289
<div
32903290
class="dx-loadindicator-icon"
@@ -3415,7 +3415,7 @@ exports[`Options HeaderFilter texts: default translation 1`] = `
34153415
class="dx-loadindicator-wrapper"
34163416
>
34173417
<div
3418-
class="dx-loadindicator-content"
3418+
class="dx-loadindicator-content dx-loadindicator-content-circle"
34193419
>
34203420
<div
34213421
class="dx-loadindicator-icon"

‎packages/devextreme/js/__internal/grids/new/grid_core/filtering/header_filter/__snapshots__/view.intergration.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ exports[`HeaderFilter View integration should render popup with list by default
5252
class="dx-loadindicator-wrapper"
5353
>
5454
<div
55-
class="dx-loadindicator-content"
55+
class="dx-loadindicator-content dx-loadindicator-content-circle"
5656
>
5757
<div
5858
class="dx-loadindicator-icon"
@@ -331,7 +331,7 @@ exports[`HeaderFilter View integration should render popup with list by default
331331
class="dx-loadindicator-wrapper"
332332
>
333333
<div
334-
class="dx-loadindicator-content"
334+
class="dx-loadindicator-content dx-loadindicator-content-circle"
335335
>
336336
<div
337337
class="dx-loadindicator-icon"
@@ -530,7 +530,7 @@ exports[`HeaderFilter View integration should render popup with tree list if dat
530530
class="dx-loadindicator-wrapper"
531531
>
532532
<div
533-
class="dx-loadindicator-content"
533+
class="dx-loadindicator-content dx-loadindicator-content-circle"
534534
>
535535
<div
536536
class="dx-loadindicator-icon"
@@ -809,7 +809,7 @@ exports[`HeaderFilter View integration should render popup with tree list if dat
809809
class="dx-loadindicator-wrapper"
810810
>
811811
<div
812-
class="dx-loadindicator-content"
812+
class="dx-loadindicator-content dx-loadindicator-content-circle"
813813
>
814814
<div
815815
class="dx-loadindicator-icon"

‎packages/devextreme/js/__internal/ui/m_load_indicator.ts‎

Lines changed: 68 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,31 @@ import Widget from '@ts/core/widget/widget';
1111

1212
import supportUtils from '../core/utils/m_support';
1313

14-
const LOADINDICATOR_CLASS = 'dx-loadindicator';
15-
const LOADINDICATOR_WRAPPER_CLASS = 'dx-loadindicator-wrapper';
16-
const LOADINDICATOR_CONTENT_CLASS = 'dx-loadindicator-content';
17-
const LOADINDICATOR_ICON_CLASS = 'dx-loadindicator-icon';
18-
const LOADINDICATOR_SEGMENT_CLASS = 'dx-loadindicator-segment';
19-
const LOADINDICATOR_SEGMENT_INNER_CLASS = 'dx-loadindicator-segment-inner';
20-
const LOADINDICATOR_IMAGE_CLASS = 'dx-loadindicator-image';
14+
export const LOADINDICATOR_CLASS = 'dx-loadindicator';
15+
export const LOADINDICATOR_WRAPPER_CLASS = 'dx-loadindicator-wrapper';
16+
export const LOADINDICATOR_CONTENT_CLASS = 'dx-loadindicator-content';
17+
export const LOADINDICATOR_ICON_CLASS = 'dx-loadindicator-icon';
18+
export const LOADINDICATOR_SEGMENT_CLASS = 'dx-loadindicator-segment';
19+
export const LOADINDICATOR_SEGMENT_INNER_CLASS = 'dx-loadindicator-segment-inner';
20+
export const LOADINDICATOR_IMAGE_CLASS = 'dx-loadindicator-image';
21+
22+
export enum AnimationType {
23+
Circle = 'circle',
24+
}
25+
26+
export const ANIMATION_TYPE_CLASSES = {
27+
[AnimationType.Circle]: 'dx-loadindicator-content-circle',
28+
} as const;
2129

2230
export interface LoadIndicatorProperties extends Properties {
2331
_animatingSegmentCount?: number;
2432
_animatingSegmentInner?: boolean;
33+
_animationType: AnimationType;
34+
}
35+
36+
interface SegmentParams {
37+
segmentCount: number;
38+
segmentInner: boolean;
2539
}
2640

2741
class LoadIndicator extends Widget<LoadIndicatorProperties> {
@@ -34,11 +48,12 @@ class LoadIndicator extends Widget<LoadIndicatorProperties> {
3448
_getDefaultOptions(): LoadIndicatorProperties {
3549
return {
3650
...super._getDefaultOptions(),
37-
indicatorSrc: '',
38-
activeStateEnabled: false,
39-
hoverStateEnabled: false,
4051
_animatingSegmentCount: 1,
4152
_animatingSegmentInner: false,
53+
_animationType: AnimationType.Circle,
54+
activeStateEnabled: false,
55+
hoverStateEnabled: false,
56+
indicatorSrc: '',
4257
};
4358
}
4459

@@ -97,8 +112,17 @@ class LoadIndicator extends Widget<LoadIndicatorProperties> {
97112
this.$element().append(this._$wrapper);
98113
}
99114

115+
_getAnimationTypeContentClass(): (typeof ANIMATION_TYPE_CLASSES)[AnimationType] {
116+
const { _animationType: animationType } = this.option();
117+
118+
return ANIMATION_TYPE_CLASSES[animationType];
119+
}
120+
100121
_renderIndicatorContent(): void {
101-
this._$content = $('<div>').addClass(LOADINDICATOR_CONTENT_CLASS);
122+
const animationClass = this._getAnimationTypeContentClass() ?? '';
123+
const contentClasses = [LOADINDICATOR_CONTENT_CLASS, animationClass].join(' ');
124+
125+
this._$content = $('<div>').addClass(contentClasses);
102126
this._$wrapper.append(this._$content);
103127
}
104128

@@ -113,25 +137,47 @@ class LoadIndicator extends Widget<LoadIndicatorProperties> {
113137
}
114138
}
115139

116-
_renderAnimationMarkup(): void {
117-
const animatingSegmentInner = this.option('_animatingSegmentInner');
140+
_getSegmentParams(): SegmentParams {
141+
const {
142+
_animationType: animationType,
143+
_animatingSegmentCount: animatingSegmentCount,
144+
_animatingSegmentInner: animatingSegmentInner,
145+
} = this.option();
146+
147+
const segmentParams = {
148+
[AnimationType.Circle]: {
149+
segmentCount: animatingSegmentCount ?? 0,
150+
segmentInner: Boolean(animatingSegmentInner),
151+
},
152+
};
153+
154+
return segmentParams[animationType];
155+
}
118156

157+
_renderAnimationMarkup(): void {
119158
this._$indicator = $('<div>').addClass(LOADINDICATOR_ICON_CLASS);
120159
this._$content.append(this._$indicator);
121160

122-
// Indicator markup
123-
// @ts-expect-error ts-error
124-
for (let i = this.option('_animatingSegmentCount'); i >= 0; --i) {
161+
const params = this._getSegmentParams();
162+
163+
this._renderSegments(params);
164+
}
165+
166+
_renderSegments(params: SegmentParams): void {
167+
const { segmentCount, segmentInner } = params;
168+
169+
for (let i = segmentCount; i >= 0; i -= 1) {
125170
const $segment = $('<div>')
126171
.addClass(LOADINDICATOR_SEGMENT_CLASS)
127-
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands, @typescript-eslint/no-base-to-string
128-
.addClass(LOADINDICATOR_SEGMENT_CLASS + i);
172+
.addClass(`${LOADINDICATOR_SEGMENT_CLASS}${i}`);
173+
174+
if (segmentInner) {
175+
const $segmentInner = $('<div>').addClass(LOADINDICATOR_SEGMENT_INNER_CLASS);
129176

130-
if (animatingSegmentInner) {
131-
$segment.append($('<div>').addClass(LOADINDICATOR_SEGMENT_INNER_CLASS));
177+
$segment.append($segmentInner);
132178
}
133179

134-
this._$indicator.append($segment);
180+
this._$indicator?.append($segment);
135181
}
136182
}
137183

@@ -192,6 +238,7 @@ class LoadIndicator extends Widget<LoadIndicatorProperties> {
192238
switch (args.name) {
193239
case '_animatingSegmentCount':
194240
case '_animatingSegmentInner':
241+
case '_animationType':
195242
case 'indicatorSrc':
196243
this._invalidate();
197244
break;

0 commit comments

Comments
 (0)