Skip to content

Commit b0c603a

Browse files
mpreyskurantovmpreyskurantov
authored
CardView - Scrolling & Dragging nesteds inline types vs Pick (DevExpress#30181)
1 parent 0333085 commit b0c603a

File tree

10 files changed

+534
-39
lines changed

10 files changed

+534
-39
lines changed

‎packages/devextreme-angular/src/ui/card-view/index.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export { ExplicitTypes } from 'devextreme/ui/card_view';
2525

2626
import DataSource from 'devextreme/data/data_source';
2727
import { CardCover, CardHeader, ColumnProperties, dxCardViewEditing, HeaderPanel, CardClickEvent, CardDblClickEvent, CardHoverChangedEvent, CardInsertedEvent, CardInsertingEvent, CardPreparedEvent, CardRemovedEvent, CardRemovingEvent, CardSavedEvent, CardSavingEvent, CardUpdatedEvent, CardUpdatingEvent, ContextMenuPreparingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, FieldCaptionClickEvent, FieldCaptionDblClickEvent, FieldCaptionPreparedEvent, FieldValueClickEvent, FieldValueDblClickEvent, FieldValuePreparedEvent, FocusedCardChanged, InitNewCardEvent, SelectionChangedEvent, Paging, RemoteOperations, SelectionConfiguration, Toolbar } from 'devextreme/ui/card_view';
28-
import { Mode } from 'devextreme/common';
28+
import { Mode, ScrollbarMode } from 'devextreme/common';
2929
import { ColumnChooser, FilterPanel, HeaderFilter, Pager, SearchPanel, Sorting } from 'devextreme/common/grids';
3030
import { DataSourceOptions } from 'devextreme/data/data_source';
3131
import { Store } from 'devextreme/data/store';
@@ -72,6 +72,7 @@ import { DxoCardViewColumnHeaderFilterSearchModule } from 'devextreme-angular/ui
7272
import { DxiCardViewCompareRuleModule } from 'devextreme-angular/ui/card-view/nested';
7373
import { DxiCardViewCustomOperationModule } from 'devextreme-angular/ui/card-view/nested';
7474
import { DxiCardViewCustomRuleModule } from 'devextreme-angular/ui/card-view/nested';
75+
import { DxoCardViewDraggingModule } from 'devextreme-angular/ui/card-view/nested';
7576
import { DxoCardViewEditingModule } from 'devextreme-angular/ui/card-view/nested';
7677
import { DxoCardViewEditingTextsModule } from 'devextreme-angular/ui/card-view/nested';
7778
import { DxiCardViewEmailRuleModule } from 'devextreme-angular/ui/card-view/nested';
@@ -104,6 +105,7 @@ import { DxoCardViewPositionModule } from 'devextreme-angular/ui/card-view/neste
104105
import { DxiCardViewRangeRuleModule } from 'devextreme-angular/ui/card-view/nested';
105106
import { DxoCardViewRemoteOperationsModule } from 'devextreme-angular/ui/card-view/nested';
106107
import { DxiCardViewRequiredRuleModule } from 'devextreme-angular/ui/card-view/nested';
108+
import { DxoCardViewScrollingModule } from 'devextreme-angular/ui/card-view/nested';
107109
import { DxoCardViewSearchModule } from 'devextreme-angular/ui/card-view/nested';
108110
import { DxoCardViewSearchPanelModule } from 'devextreme-angular/ui/card-view/nested';
109111
import { DxoCardViewSelectionModule } from 'devextreme-angular/ui/card-view/nested';
@@ -514,10 +516,10 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
514516

515517

516518
@Input()
517-
get scrolling(): Record<string, any> {
519+
get scrolling(): { scrollByContent?: boolean, scrollByThumb?: boolean, showScrollbar?: ScrollbarMode, useNative?: boolean | Mode } {
518520
return this._getOption('scrolling');
519521
}
520-
set scrolling(value: Record<string, any>) {
522+
set scrolling(value: { scrollByContent?: boolean, scrollByThumb?: boolean, showScrollbar?: ScrollbarMode, useNative?: boolean | Mode }) {
521523
this._setOption('scrolling', value);
522524
}
523525

@@ -1115,7 +1117,7 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
11151117
* This member supports the internal infrastructure and is not intended to be used directly from your code.
11161118
11171119
*/
1118-
@Output() scrollingChange: EventEmitter<Record<string, any>>;
1120+
@Output() scrollingChange: EventEmitter<{ scrollByContent?: boolean, scrollByThumb?: boolean, showScrollbar?: ScrollbarMode, useNative?: boolean | Mode }>;
11191121

11201122
/**
11211123
@@ -1362,6 +1364,7 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
13621364
DxiCardViewCompareRuleModule,
13631365
DxiCardViewCustomOperationModule,
13641366
DxiCardViewCustomRuleModule,
1367+
DxoCardViewDraggingModule,
13651368
DxoCardViewEditingModule,
13661369
DxoCardViewEditingTextsModule,
13671370
DxiCardViewEmailRuleModule,
@@ -1394,6 +1397,7 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
13941397
DxiCardViewRangeRuleModule,
13951398
DxoCardViewRemoteOperationsModule,
13961399
DxiCardViewRequiredRuleModule,
1400+
DxoCardViewScrollingModule,
13971401
DxoCardViewSearchModule,
13981402
DxoCardViewSearchPanelModule,
13991403
DxoCardViewSelectionModule,
@@ -1440,6 +1444,7 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
14401444
DxiCardViewCompareRuleModule,
14411445
DxiCardViewCustomOperationModule,
14421446
DxiCardViewCustomRuleModule,
1447+
DxoCardViewDraggingModule,
14431448
DxoCardViewEditingModule,
14441449
DxoCardViewEditingTextsModule,
14451450
DxiCardViewEmailRuleModule,
@@ -1472,6 +1477,7 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
14721477
DxiCardViewRangeRuleModule,
14731478
DxoCardViewRemoteOperationsModule,
14741479
DxiCardViewRequiredRuleModule,
1480+
DxoCardViewScrollingModule,
14751481
DxoCardViewSearchModule,
14761482
DxoCardViewSearchPanelModule,
14771483
DxoCardViewSelectionModule,

‎packages/devextreme-angular/src/ui/card-view/nested/dragging.ts‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/* tslint:disable:max-line-length */
2+
3+
4+
import {
5+
Component,
6+
OnInit,
7+
OnDestroy,
8+
NgModule,
9+
Host,
10+
SkipSelf,
11+
Input
12+
} from '@angular/core';
13+
14+
15+
16+
17+
import { DragHighlight } from 'devextreme/common';
18+
19+
import {
20+
DxIntegrationModule,
21+
NestedOptionHost,
22+
} from 'devextreme-angular/core';
23+
import { NestedOption } from 'devextreme-angular/core';
24+
25+
26+
@Component({
27+
selector: 'dxo-card-view-dragging',
28+
standalone: true,
29+
template: '',
30+
styles: [''],
31+
imports: [ DxIntegrationModule ],
32+
providers: [NestedOptionHost]
33+
})
34+
export class DxoCardViewDraggingComponent extends NestedOption implements OnDestroy, OnInit {
35+
@Input()
36+
get dropFeedbackMode(): DragHighlight {
37+
return this._getOption('dropFeedbackMode');
38+
}
39+
set dropFeedbackMode(value: DragHighlight) {
40+
this._setOption('dropFeedbackMode', value);
41+
}
42+
43+
@Input()
44+
get onDragChange(): ((e: any) => void) {
45+
return this._getOption('onDragChange');
46+
}
47+
set onDragChange(value: ((e: any) => void)) {
48+
this._setOption('onDragChange', value);
49+
}
50+
51+
@Input()
52+
get onDragEnd(): ((e: any) => void) {
53+
return this._getOption('onDragEnd');
54+
}
55+
set onDragEnd(value: ((e: any) => void)) {
56+
this._setOption('onDragEnd', value);
57+
}
58+
59+
@Input()
60+
get onDragMove(): ((e: any) => void) {
61+
return this._getOption('onDragMove');
62+
}
63+
set onDragMove(value: ((e: any) => void)) {
64+
this._setOption('onDragMove', value);
65+
}
66+
67+
@Input()
68+
get onDragStart(): ((e: any) => void) {
69+
return this._getOption('onDragStart');
70+
}
71+
set onDragStart(value: ((e: any) => void)) {
72+
this._setOption('onDragStart', value);
73+
}
74+
75+
@Input()
76+
get onRemove(): ((e: any) => void) {
77+
return this._getOption('onRemove');
78+
}
79+
set onRemove(value: ((e: any) => void)) {
80+
this._setOption('onRemove', value);
81+
}
82+
83+
@Input()
84+
get onReorder(): ((e: any) => void) {
85+
return this._getOption('onReorder');
86+
}
87+
set onReorder(value: ((e: any) => void)) {
88+
this._setOption('onReorder', value);
89+
}
90+
91+
@Input()
92+
get scrollSensitivity(): number {
93+
return this._getOption('scrollSensitivity');
94+
}
95+
set scrollSensitivity(value: number) {
96+
this._setOption('scrollSensitivity', value);
97+
}
98+
99+
@Input()
100+
get scrollSpeed(): number {
101+
return this._getOption('scrollSpeed');
102+
}
103+
set scrollSpeed(value: number) {
104+
this._setOption('scrollSpeed', value);
105+
}
106+
107+
108+
protected get _optionPath() {
109+
return 'dragging';
110+
}
111+
112+
113+
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
114+
@Host() optionHost: NestedOptionHost) {
115+
super();
116+
parentOptionHost.setNestedOption(this);
117+
optionHost.setHost(this, this._fullOptionPath.bind(this));
118+
}
119+
120+
121+
ngOnInit() {
122+
this._addRecreatedComponent();
123+
}
124+
125+
ngOnDestroy() {
126+
this._addRemovedOption(this._getOptionPath());
127+
}
128+
129+
130+
}
131+
132+
@NgModule({
133+
imports: [
134+
DxoCardViewDraggingComponent
135+
],
136+
exports: [
137+
DxoCardViewDraggingComponent
138+
],
139+
})
140+
export class DxoCardViewDraggingModule { }

‎packages/devextreme-angular/src/ui/card-view/nested/header-panel.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414

1515

1616

17+
import { DragHighlight } from 'devextreme/common';
1718

1819
import {
1920
DxIntegrationModule,
@@ -32,10 +33,10 @@ import { NestedOption } from 'devextreme-angular/core';
3233
})
3334
export class DxoCardViewHeaderPanelComponent extends NestedOption implements OnDestroy, OnInit {
3435
@Input()
35-
get dragging(): Record<string, any> {
36+
get dragging(): { dropFeedbackMode?: DragHighlight, onDragChange?: ((e: any) => void), onDragEnd?: ((e: any) => void), onDragMove?: ((e: any) => void), onDragStart?: ((e: any) => void), onRemove?: ((e: any) => void), onReorder?: ((e: any) => void), scrollSensitivity?: number, scrollSpeed?: number } {
3637
return this._getOption('dragging');
3738
}
38-
set dragging(value: Record<string, any>) {
39+
set dragging(value: { dropFeedbackMode?: DragHighlight, onDragChange?: ((e: any) => void), onDragEnd?: ((e: any) => void), onDragMove?: ((e: any) => void), onDragStart?: ((e: any) => void), onRemove?: ((e: any) => void), onReorder?: ((e: any) => void), scrollSensitivity?: number, scrollSpeed?: number }) {
3940
this._setOption('dragging', value);
4041
}
4142

‎packages/devextreme-angular/src/ui/card-view/nested/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export * from './column-header-filter';
2323
export * from './compare-rule-dxi';
2424
export * from './custom-operation-dxi';
2525
export * from './custom-rule-dxi';
26+
export * from './dragging';
2627
export * from './editing-texts';
2728
export * from './editing';
2829
export * from './email-rule-dxi';
@@ -55,6 +56,7 @@ export * from './position';
5556
export * from './range-rule-dxi';
5657
export * from './remote-operations';
5758
export * from './required-rule-dxi';
59+
export * from './scrolling';
5860
export * from './search-panel';
5961
export * from './search';
6062
export * from './selection';

‎packages/devextreme-angular/src/ui/card-view/nested/scrolling.ts‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/* tslint:disable:max-line-length */
2+
3+
4+
import {
5+
Component,
6+
OnInit,
7+
OnDestroy,
8+
NgModule,
9+
Host,
10+
SkipSelf,
11+
Input
12+
} from '@angular/core';
13+
14+
15+
16+
17+
import { ScrollbarMode, Mode } from 'devextreme/common';
18+
19+
import {
20+
DxIntegrationModule,
21+
NestedOptionHost,
22+
} from 'devextreme-angular/core';
23+
import { NestedOption } from 'devextreme-angular/core';
24+
25+
26+
@Component({
27+
selector: 'dxo-card-view-scrolling',
28+
standalone: true,
29+
template: '',
30+
styles: [''],
31+
imports: [ DxIntegrationModule ],
32+
providers: [NestedOptionHost]
33+
})
34+
export class DxoCardViewScrollingComponent extends NestedOption implements OnDestroy, OnInit {
35+
@Input()
36+
get scrollByContent(): boolean {
37+
return this._getOption('scrollByContent');
38+
}
39+
set scrollByContent(value: boolean) {
40+
this._setOption('scrollByContent', value);
41+
}
42+
43+
@Input()
44+
get scrollByThumb(): boolean {
45+
return this._getOption('scrollByThumb');
46+
}
47+
set scrollByThumb(value: boolean) {
48+
this._setOption('scrollByThumb', value);
49+
}
50+
51+
@Input()
52+
get showScrollbar(): ScrollbarMode {
53+
return this._getOption('showScrollbar');
54+
}
55+
set showScrollbar(value: ScrollbarMode) {
56+
this._setOption('showScrollbar', value);
57+
}
58+
59+
@Input()
60+
get useNative(): boolean | Mode {
61+
return this._getOption('useNative');
62+
}
63+
set useNative(value: boolean | Mode) {
64+
this._setOption('useNative', value);
65+
}
66+
67+
68+
protected get _optionPath() {
69+
return 'scrolling';
70+
}
71+
72+
73+
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
74+
@Host() optionHost: NestedOptionHost) {
75+
super();
76+
parentOptionHost.setNestedOption(this);
77+
optionHost.setHost(this, this._fullOptionPath.bind(this));
78+
}
79+
80+
81+
ngOnInit() {
82+
this._addRecreatedComponent();
83+
}
84+
85+
ngOnDestroy() {
86+
this._addRemovedOption(this._getOptionPath());
87+
}
88+
89+
90+
}
91+
92+
@NgModule({
93+
imports: [
94+
DxoCardViewScrollingComponent
95+
],
96+
exports: [
97+
DxoCardViewScrollingComponent
98+
],
99+
})
100+
export class DxoCardViewScrollingModule { }

0 commit comments

Comments
 (0)