Skip to content

Commit 576aaaa

Browse files
pharret31pharret31
committed
FileManager: fix ts issues (ui.file_manager.* adaptivity,breadcrumbs,command_manager,toolbar)
1 parent 78b1a66 commit 576aaaa

File tree

6 files changed

+1277
-1073
lines changed

6 files changed

+1277
-1073
lines changed

‎packages/devextreme/js/__internal/ui/file_manager/ui.file_manager.adaptivity.ts‎

Lines changed: 187 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { getWidth } from '../../core/utils/size';
2-
import $ from '../../core/renderer';
3-
import { extend } from '../../core/utils/extend';
4-
import { isFunction } from '../../core/utils/type';
5-
import { getWindow, hasWindow } from '../../core/utils/window';
6-
7-
import Widget from '../widget/ui.widget';
8-
import Drawer from '../drawer';
9-
import SplitterControl from '../splitter_control';
1+
import type { dxElementWrapper } from '@js/core/renderer';
2+
import $ from '@js/core/renderer';
3+
import { getWidth } from '@js/core/utils/size';
4+
import { isFunction } from '@js/core/utils/type';
5+
import { getWindow, hasWindow } from '@js/core/utils/window';
6+
import SplitterControl from '@js/ui/splitter_control';
7+
import type { OptionChanged } from '@ts/core/widget/types';
8+
import type { WidgetProperties } from '@ts/core/widget/widget';
9+
import Widget from '@ts/core/widget/widget';
10+
import Drawer from '@ts/ui/drawer/drawer';
1011

1112
const window = getWindow();
1213
const ADAPTIVE_STATE_SCREEN_WIDTH = 573;
@@ -15,159 +16,193 @@ const FILE_MANAGER_ADAPTIVITY_DRAWER_PANEL_CLASS = 'dx-filemanager-adaptivity-dr
1516
const DRAWER_PANEL_CONTENT_INITIAL = 'dx-drawer-panel-content-initial';
1617
const DRAWER_PANEL_CONTENT_ADAPTIVE = 'dx-drawer-panel-content-adaptive';
1718

18-
class FileManagerAdaptivityControl extends Widget {
19-
20-
_initMarkup() {
21-
super._initMarkup();
22-
23-
this._initActions();
24-
25-
this._isInAdaptiveState = false;
26-
27-
const $drawer = $('<div>').appendTo(this.$element());
28-
29-
$('<div>')
30-
.addClass(FILE_MANAGER_ADAPTIVITY_DRAWER_PANEL_CLASS)
31-
.appendTo($drawer);
32-
33-
this._drawer = this._createComponent($drawer, Drawer);
34-
this._drawer.option({
35-
opened: true,
36-
template: this._createDrawerTemplate.bind(this)
37-
});
38-
$(this._drawer.content()).addClass(DRAWER_PANEL_CONTENT_INITIAL);
39-
40-
const $drawerContent = $drawer.find(`.${FILE_MANAGER_ADAPTIVITY_DRAWER_PANEL_CLASS}`).first();
41-
42-
const contentRenderer = this.option('contentTemplate');
43-
if(isFunction(contentRenderer)) {
44-
contentRenderer($drawerContent);
45-
}
46-
this._updateDrawerMaxSize();
47-
}
48-
49-
_createDrawerTemplate(container) {
50-
this.option('drawerTemplate')(container);
51-
this._splitter = this._createComponent('<div>', SplitterControl, {
52-
container: this.$element(),
53-
leftElement: $(this._drawer.content()),
54-
rightElement: $(this._drawer.viewContent()),
55-
onApplyPanelSize: this._onApplyPanelSize.bind(this),
56-
onActiveStateChanged: this._onActiveStateChanged.bind(this)
57-
});
58-
this._splitter.$element().appendTo(container);
59-
this._splitter.disableSplitterCalculation(true);
60-
}
61-
62-
_render() {
63-
super._render();
64-
this._checkAdaptiveState();
65-
}
66-
67-
_onApplyPanelSize(e) {
68-
if(!hasWindow()) {
69-
return;
70-
}
71-
72-
if(!this._splitter.isSplitterMoved()) {
73-
this._setDrawerWidth('');
74-
return;
75-
}
76-
$(this._drawer.content()).removeClass(DRAWER_PANEL_CONTENT_INITIAL);
77-
this._setDrawerWidth(e.leftPanelWidth);
78-
}
79-
80-
_onActiveStateChanged({ isActive }) {
81-
this._splitter.disableSplitterCalculation(!isActive);
82-
!isActive && this._splitter.$element().css('left', 'auto');
83-
}
84-
85-
_setDrawerWidth(width) {
86-
$(this._drawer.content()).css('width', width);
87-
this._updateDrawerMaxSize();
88-
this._drawer.resizeViewContent();
89-
}
90-
91-
_updateDrawerMaxSize() {
92-
this._drawer.option('maxSize', this._drawer.getRealPanelWidth());
93-
}
94-
95-
_dimensionChanged(dimension) {
96-
if(!dimension || dimension !== 'height') {
97-
this._checkAdaptiveState();
98-
}
99-
}
19+
interface PanelSize {
20+
leftPanelWidth: string | number;
21+
rightPanelWidth: string | number;
22+
}
10023

101-
_checkAdaptiveState() {
102-
const oldState = this._isInAdaptiveState;
103-
this._isInAdaptiveState = this._isSmallScreen();
104-
if(oldState !== this._isInAdaptiveState) {
105-
this.toggleDrawer(!this._isInAdaptiveState, true);
106-
$(this._drawer.content()).toggleClass(DRAWER_PANEL_CONTENT_ADAPTIVE, this._isInAdaptiveState);
107-
this._raiseAdaptiveStateChanged(this._isInAdaptiveState);
108-
}
109-
if(this._isInAdaptiveState && this._isDrawerOpened()) {
110-
this._updateDrawerMaxSize();
111-
}
112-
}
24+
interface FileManagerAdaptivityControlOptions extends WidgetProperties {
25+
drawerTemplate?: (container: dxElementWrapper | Element) => void;
26+
contentTemplate?: (container: dxElementWrapper) => void;
27+
onAdaptiveStateChanged?: (e: { enabled: boolean }) => void;
28+
}
11329

114-
_isSmallScreen() {
115-
return getWidth(window) <= ADAPTIVE_STATE_SCREEN_WIDTH;
116-
}
30+
class FileManagerAdaptivityControl extends Widget<FileManagerAdaptivityControlOptions> {
31+
_isInAdaptiveState?: boolean;
11732

118-
_isDrawerOpened() {
119-
return this._drawer.option('opened');
120-
}
33+
_drawer?: Drawer;
12134

122-
_initActions() {
123-
this._actions = {
124-
onAdaptiveStateChanged: this._createActionByOption('onAdaptiveStateChanged')
125-
};
126-
}
35+
_splitter?: SplitterControl;
36+
37+
_actions!: { onAdaptiveStateChanged?: ({ enabled }) => void };
12738

128-
_raiseAdaptiveStateChanged(enabled) {
129-
this._actions.onAdaptiveStateChanged({ enabled });
130-
}
39+
_initMarkup(): void {
40+
super._initMarkup();
13141

132-
_getDefaultOptions() {
133-
return extend(super._getDefaultOptions(), {
134-
drawerTemplate: null,
135-
contentTemplate: null,
136-
onAdaptiveStateChanged: null,
137-
});
138-
}
42+
this._initActions();
13943

140-
_optionChanged(args) {
141-
const name = args.name;
142-
143-
switch(name) {
144-
case 'drawerTemplate':
145-
case 'contentTemplate':
146-
this.repaint();
147-
break;
148-
case 'onAdaptiveStateChanged':
149-
this._actions[name] = this._createActionByOption(name);
150-
break;
151-
default:
152-
super._optionChanged(args);
153-
}
154-
}
44+
this._isInAdaptiveState = false;
15545

156-
isInAdaptiveState() {
157-
return this._isInAdaptiveState;
158-
}
46+
const $drawer = $('<div>').appendTo(this.$element());
15947

160-
toggleDrawer(showing, skipAnimation) {
161-
this._updateDrawerMaxSize();
162-
this._drawer.option('animationEnabled', !skipAnimation);
163-
this._drawer.toggle(showing);
164-
const isSplitterActive = this._isDrawerOpened() && !this.isInAdaptiveState();
165-
this._splitter.toggleDisabled(!isSplitterActive);
166-
}
48+
$('<div>')
49+
.addClass(FILE_MANAGER_ADAPTIVITY_DRAWER_PANEL_CLASS)
50+
.appendTo($drawer);
16751

168-
getSplitterElement() {
169-
return this._splitter.getSplitterBorderElement().get(0);
170-
}
52+
// @ts-expect-error ts-error
53+
this._drawer = this._createComponent($drawer, Drawer);
54+
this._drawer.option({
55+
opened: true,
56+
template: this._createDrawerTemplate.bind(this),
57+
});
58+
$(this._drawer.content()).addClass(DRAWER_PANEL_CONTENT_INITIAL);
59+
60+
const $drawerContent = $drawer
61+
.find(`.${FILE_MANAGER_ADAPTIVITY_DRAWER_PANEL_CLASS}`)
62+
.first();
63+
64+
const { contentTemplate: contentRenderer } = this.option();
65+
if (isFunction(contentRenderer)) {
66+
contentRenderer($drawerContent);
67+
}
68+
this._updateDrawerMaxSize();
69+
}
70+
71+
_createDrawerTemplate(container: HTMLElement | dxElementWrapper | Element): void {
72+
const { drawerTemplate } = this.option();
73+
drawerTemplate?.(container);
74+
this._splitter = this._createComponent('<div>', SplitterControl, {
75+
container: this.$element(),
76+
leftElement: $(this._drawer?.content()),
77+
rightElement: $(this._drawer?.viewContent()),
78+
onApplyPanelSize: this._onApplyPanelSize.bind(this),
79+
onActiveStateChanged: this._onActiveStateChanged.bind(this),
80+
});
81+
this._splitter.$element().appendTo(container);
82+
this._splitter.disableSplitterCalculation(true);
83+
}
84+
85+
_render(): void {
86+
super._render();
87+
this._checkAdaptiveState();
88+
}
89+
90+
_onApplyPanelSize(e: PanelSize): void {
91+
if (!hasWindow()) {
92+
return;
93+
}
94+
95+
if (!this._splitter?.isSplitterMoved()) {
96+
this._setDrawerWidth('');
97+
return;
98+
}
99+
$(this._drawer?.content()).removeClass(DRAWER_PANEL_CONTENT_INITIAL);
100+
this._setDrawerWidth(e.leftPanelWidth);
101+
}
102+
103+
_onActiveStateChanged({ isActive }: { isActive: boolean }): void {
104+
this._splitter?.disableSplitterCalculation(!isActive);
105+
if (!isActive) {
106+
this._splitter?.$element().css('left', 'auto');
107+
}
108+
}
109+
110+
_setDrawerWidth(width: string | number): void {
111+
$(this._drawer?.content()).css('width', width);
112+
this._updateDrawerMaxSize();
113+
this._drawer?.resizeViewContent();
114+
}
115+
116+
_updateDrawerMaxSize(): void {
117+
this._drawer?.option('maxSize', this._drawer.getRealPanelWidth());
118+
}
119+
120+
// @ts-expect-error ts-error
121+
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
122+
_dimensionChanged(dimension): void {
123+
if (!dimension || dimension !== 'height') {
124+
this._checkAdaptiveState();
125+
}
126+
}
127+
128+
_checkAdaptiveState(): void {
129+
const oldState = this._isInAdaptiveState;
130+
this._isInAdaptiveState = this._isSmallScreen();
131+
if (oldState !== this._isInAdaptiveState) {
132+
this.toggleDrawer(!this._isInAdaptiveState, true);
133+
$(this._drawer?.content()).toggleClass(
134+
DRAWER_PANEL_CONTENT_ADAPTIVE,
135+
this._isInAdaptiveState,
136+
);
137+
this._raiseAdaptiveStateChanged(this._isInAdaptiveState);
138+
}
139+
if (this._isInAdaptiveState && this._isDrawerOpened()) {
140+
this._updateDrawerMaxSize();
141+
}
142+
}
143+
144+
_isSmallScreen(): boolean {
145+
return getWidth(window) <= ADAPTIVE_STATE_SCREEN_WIDTH;
146+
}
147+
148+
_isDrawerOpened(): boolean | undefined {
149+
const { opened } = this._drawer?.option() ?? {};
150+
return opened;
151+
}
152+
153+
_initActions(): void {
154+
this._actions = {
155+
onAdaptiveStateChanged: this._createActionByOption(
156+
'onAdaptiveStateChanged',
157+
),
158+
};
159+
}
160+
161+
_raiseAdaptiveStateChanged(enabled: boolean): void {
162+
this._actions?.onAdaptiveStateChanged?.({ enabled });
163+
}
164+
165+
_getDefaultOptions(): FileManagerAdaptivityControlOptions {
166+
return {
167+
...super._getDefaultOptions(),
168+
drawerTemplate: undefined,
169+
contentTemplate: undefined,
170+
onAdaptiveStateChanged: undefined,
171+
};
172+
}
173+
174+
_optionChanged(args: OptionChanged<FileManagerAdaptivityControlOptions>): void {
175+
const { name } = args;
176+
177+
switch (name) {
178+
case 'drawerTemplate':
179+
case 'contentTemplate':
180+
this.repaint();
181+
break;
182+
case 'onAdaptiveStateChanged':
183+
this._actions[name] = this._createActionByOption(name);
184+
break;
185+
default:
186+
super._optionChanged(args);
187+
}
188+
}
189+
190+
isInAdaptiveState(): boolean | undefined {
191+
return this._isInAdaptiveState;
192+
}
193+
194+
toggleDrawer(showing?: boolean, skipAnimation?: boolean): void {
195+
this._updateDrawerMaxSize();
196+
this._drawer?.option('animationEnabled', !skipAnimation);
197+
// eslint-disable-next-line @typescript-eslint/no-floating-promises
198+
this._drawer?.toggle(showing);
199+
const isSplitterActive = this._isDrawerOpened() && !this.isInAdaptiveState();
200+
this._splitter?.toggleDisabled(!isSplitterActive);
201+
}
202+
203+
getSplitterElement(): Element | undefined {
204+
return this._splitter?.getSplitterBorderElement()?.get(0);
205+
}
171206
}
172207

173208
export default FileManagerAdaptivityControl;

0 commit comments

Comments
 (0)