Skip to content

Commit a904d15

Browse files
marker-daomarker dao ®
marker-dao
and
marker dao ®
authored
Widgets: Remove code related width, height option as function (FilterBuilder, DateBox, DropDownEditor, DropDownButton, DropDownList, DropDownBox, Lookup, Menu, Toolbar.Menu) (#33177)
Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>
1 parent e9f7f2d commit a904d15

13 files changed

Lines changed: 152 additions & 81 deletions

File tree

‎packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,8 @@ class FilterBuilder extends Widget<any> {
9292

9393
_documentClickHandler!: any;
9494

95+
_popupWithTreeView?: InstanceType<typeof Popup>;
96+
9597
_getDefaultOptions() {
9698
// @ts-expect-error
9799
return extend(super._getDefaultOptions(), {
@@ -871,14 +873,29 @@ class FilterBuilder extends Widget<any> {
871873
return $editor;
872874
}
873875

876+
_dimensionChanged(): void {
877+
// @ts-expect-error 'of' does not exist on type 'PopupProperties'
878+
const positionOf = this._popupWithTreeView?.option('position')?.of;
879+
880+
if (positionOf) {
881+
this._popupWithTreeView?.option('maxHeight', getElementMaxHeightByWindow(positionOf));
882+
}
883+
}
884+
874885
_createPopupWithTreeView(options, $container) {
875886
const that = this;
887+
const { onHidden } = options.menu;
876888
const $popup = $('<div>')
877-
.addClass(options.menu.cssClass).appendTo($container);
889+
.addClass(options.menu.cssClass)
890+
.appendTo($container);
891+
878892
// @ts-expect-error
879-
this._createComponent($popup, Popup, {
893+
this._popupWithTreeView = this._createComponent($popup, Popup, {
880894
onHiding: options.menu.onHiding,
881-
onHidden: options.menu.onHidden,
895+
onHidden: (...args) => {
896+
onHidden?.(...args);
897+
this._popupWithTreeView = undefined;
898+
},
882899
rtlEnabled: options.menu.rtlEnabled,
883900
position: options.menu.position,
884901
animation: options.menu.animation,
@@ -891,10 +908,7 @@ class FilterBuilder extends Widget<any> {
891908
// T852701
892909
this.repaint();
893910
},
894-
_ignoreFunctionValueDeprecation: true,
895-
maxHeight() {
896-
return getElementMaxHeightByWindow(options.menu.position.of);
897-
},
911+
maxHeight: getElementMaxHeightByWindow(options.menu.position.of),
898912
visible: true,
899913
focusStateEnabled: false,
900914
preventScrollEvents: false,

‎packages/devextreme/js/__internal/ui/date_box/date_box.base.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,14 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
290290
}
291291
}
292292

293+
_updatePopupWidth(): void {
294+
if (this._strategy instanceof Calendar || this._strategy instanceof CalendarWithTime) {
295+
return;
296+
}
297+
298+
super._updatePopupWidth();
299+
}
300+
293301
_refreshFormatClass(): void {
294302
const $element = this.$element();
295303
const types = Object.values(TYPE);

‎packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_editor.ts‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ import TextBox from '@ts/ui/text_box/m_text_box';
4141
import type Popover from '../popover/m_popover';
4242
import type { TextEditorButtonInfo } from '../text_box/texteditor_button_collection/index';
4343
import DropDownButton from './m_drop_down_button';
44-
import { getElementWidth, getSizeValue } from './m_utils';
44+
import { getElementWidth } from './m_utils';
4545

4646
export const DROP_DOWN_EDITOR_CLASS = 'dx-dropdowneditor';
4747
const DROP_DOWN_EDITOR_INPUT_WRAPPER = 'dx-dropdowneditor-input-wrapper';
@@ -794,7 +794,9 @@ class DropDownEditor<
794794
_renderPopupContent(): void {}
795795

796796
_renderPopup(): void {
797-
const popupConfig = extend(this._popupConfig(), this._options.cache('dropDownOptions'));
797+
const defaultOptions = this._popupConfig();
798+
const cachedOptions = this._options.cache('dropDownOptions');
799+
const popupConfig = extend(defaultOptions, cachedOptions);
798800

799801
// @ts-expect-error ts-error
800802
this._popup = this._createComponent(this._$popup, Popup, popupConfig);
@@ -808,11 +810,8 @@ class DropDownEditor<
808810
});
809811

810812
this._attachPopupKeyHandler();
811-
812813
this._contentReadyHandler();
813-
814814
this._setPopupContentId(this._popup.$content());
815-
816815
this._bindInnerWidgetOptions(this._popup, 'dropDownOptions');
817816
}
818817

@@ -860,16 +859,14 @@ class DropDownEditor<
860859
_contentReadyHandler(): void {}
861860

862861
_popupConfig(): PopupProperties {
863-
return {
862+
const config: PopupProperties = {
864863
onInitialized: this._getPopupInitializedHandler(),
865864
position: extend(this.option('popupPosition'), {
866865
of: this.$element(),
867866
}),
868867
// @ts-expect-error ts-error
869868
showTitle: this.option('dropDownOptions.showTitle'),
870-
_ignoreFunctionValueDeprecation: true,
871-
// @ts-expect-error ts-error
872-
width: (): number => getElementWidth(this.$element()),
869+
width: getElementWidth(this.$element()),
873870
height: 'auto',
874871
shading: false,
875872
hideOnParentScroll: true,
@@ -897,6 +894,8 @@ class DropDownEditor<
897894
_wrapperClassExternal: DROP_DOWN_EDITOR_OVERLAY,
898895
_ignorePreventScrollEventsDeprecation: true,
899896
};
897+
898+
return config;
900899
}
901900

902901
// eslint-disable-next-line class-methods-use-this
@@ -926,10 +925,10 @@ class DropDownEditor<
926925
}
927926

928927
_updatePopupWidth(): void {
929-
const popupWidth = getSizeValue(this.option('dropDownOptions.width'));
928+
const width = this._options.cache('dropDownOptions')?.width;
930929

931-
if (popupWidth === undefined) {
932-
this._setPopupOption('width', () => getElementWidth(this.$element()));
930+
if (width === undefined) {
931+
this._setPopupOption('width', getElementWidth(this.$element()));
933932
}
934933
}
935934

@@ -1117,6 +1116,7 @@ class DropDownEditor<
11171116
this._setPopupOption(options);
11181117

11191118
const optionsKeys = Object.keys(options);
1119+
11201120
if (optionsKeys.includes('width') || optionsKeys.includes('height')) {
11211121
this._dimensionChanged();
11221122
}
@@ -1169,6 +1169,7 @@ class DropDownEditor<
11691169
case 'width':
11701170
case 'height':
11711171
super._optionChanged(args);
1172+
this._updatePopupWidth();
11721173
this._popup?.repaint();
11731174
break;
11741175
case 'opened':

‎packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_list.ts‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -510,13 +510,15 @@ class DropDownList<
510510
}
511511

512512
_popupConfig(): PopupProperties {
513+
this._updateCustomBoundaryContainer();
514+
const maxHeight = this._getMaxHeight();
515+
513516
return {
514517
...super._popupConfig(),
515518
templatesRenderAsynchronously: false,
516519
autoResizeEnabled: false,
517-
// @ts-expect-error ts-error
518-
maxHeight: this._getMaxHeight.bind(this),
519-
};
520+
maxHeight,
521+
} as PopupProperties;
520522
}
521523

522524
_renderPopupContent(): void {
@@ -907,13 +909,24 @@ class DropDownList<
907909

908910
_popupShowingHandler(): void {
909911
this._updatePopupWidth();
912+
this._updatePopupMaxHeight();
910913
this._updateListDimensions();
911914
}
912915

916+
_updatePopupMaxHeight(): void {
917+
const cachedMaxHeight = this._options.cache('dropDownOptions')?.maxHeight;
918+
919+
if (cachedMaxHeight === undefined) {
920+
const maxHeight = this._getMaxHeight();
921+
this._setPopupOption('maxHeight', maxHeight);
922+
}
923+
}
924+
913925
_dimensionChanged(): void {
914926
super._dimensionChanged();
915927

916928
this._updateListDimensions();
929+
this._updatePopupMaxHeight();
917930
}
918931

919932
_needPopupRepaint(): boolean {

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -297,12 +297,15 @@ class DropDownBox<
297297
of: this.$element(),
298298
}),
299299
_ignoreFunctionValueDeprecation: true,
300-
// @ts-expect-error ts-error
301-
maxHeight: function () {
300+
// @ts-expect-error maxHeight must remain a function because the overlay reevaluates
301+
// it whenever it recalculates content dimensions, and it depends
302+
// on this._popupPosition?.v.location, which is updated after each repositioning.
303+
maxHeight: (): number | undefined => {
304+
// @ts-expect-error typificatipn of this._popupPosition
302305
const popupLocation = this._popupPosition?.v.location;
303306

304307
return getElementMaxHeightByWindow(this.$element(), popupLocation);
305-
}.bind(this),
308+
},
306309
};
307310
}
308311

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

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import ButtonGroup from '@js/ui/button_group';
2121
import type { Item, Properties } from '@js/ui/drop_down_button';
2222
import type { OptionChanged } from '@ts/core/widget/types';
2323
import Widget from '@ts/core/widget/widget';
24-
import { getElementWidth, getSizeValue } from '@ts/ui/drop_down_editor/m_utils';
24+
import { getElementWidth } from '@ts/ui/drop_down_editor/m_utils';
2525
import type { ListBaseProperties } from '@ts/ui/list/list.base';
2626
import List from '@ts/ui/list/list.edit.search';
2727
import type { PopupProperties } from '@ts/ui/popup/m_popup';
@@ -391,6 +391,7 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
391391

392392
_popupOptions() {
393393
const horizontalAlignment = this.option('rtlEnabled') ? 'right' : 'left';
394+
394395
return extend({
395396
dragEnabled: false,
396397
focusStateEnabled: false,
@@ -409,8 +410,7 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
409410
type: 'fade', duration: 400, from: 1, to: 0,
410411
},
411412
},
412-
_ignoreFunctionValueDeprecation: true,
413-
width: () => getElementWidth(this.$element()),
413+
width: getElementWidth(this.$element()),
414414
height: 'auto',
415415
shading: false,
416416
position: {
@@ -476,30 +476,33 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
476476
};
477477
}
478478

479-
_upDownKeyHandler() {
479+
_upDownKeyHandler(): boolean {
480480
if (this._popup?.option('visible') && this._list) {
481481
this._list.focus();
482482
} else {
483+
// eslint-disable-next-line @typescript-eslint/no-floating-promises
483484
this.open();
484485
}
485486

486487
return true;
487488
}
488489

489-
_escHandler() {
490+
_escHandler(): boolean {
491+
// eslint-disable-next-line @typescript-eslint/no-floating-promises
490492
this.close();
491493
this._buttonGroup.focus();
492494

493495
return true;
494496
}
495497

496-
_tabHandler() {
498+
_tabHandler(): boolean {
499+
// eslint-disable-next-line @typescript-eslint/no-floating-promises
497500
this.close();
498501

499502
return true;
500503
}
501504

502-
_renderPopup() {
505+
_renderPopup(): void {
503506
const $popup = $('<div>');
504507
this.$element().append($popup);
505508
this._popup = this._createComponent($popup, Popup, this._popupOptions());
@@ -529,10 +532,10 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
529532
}
530533

531534
_dimensionChanged(): void {
532-
const popupWidth = getSizeValue(this.option('dropDownOptions.width'));
535+
const cachedWidth = this._options.cache('dropDownOptions')?.width;
533536

534-
if (popupWidth === undefined) {
535-
this._setPopupOption('width', () => getElementWidth(this.$element()));
537+
if (cachedWidth === undefined) {
538+
this._setPopupOption('width', getElementWidth(this.$element()));
536539
}
537540
}
538541

@@ -587,19 +590,23 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
587590

588591
_renderButtonGroup(): void {
589592
const $buttonGroup = this._buttonGroup?.$element() || $('<div>');
593+
590594
if (!this._buttonGroup) {
591595
this.$element().append($buttonGroup);
592596
}
593597

594-
this._buttonGroup = this._createComponent($buttonGroup, ButtonGroup, this._getButtonGroupOptions());
598+
this._buttonGroup = this._createComponent(
599+
$buttonGroup,
600+
ButtonGroup,
601+
this._getButtonGroupOptions(),
602+
);
595603

596604
this._buttonGroup.registerKeyHandler('downArrow', this._upDownKeyHandler.bind(this));
597605
this._buttonGroup.registerKeyHandler('tab', this._tabHandler.bind(this));
598606
this._buttonGroup.registerKeyHandler('upArrow', this._upDownKeyHandler.bind(this));
599607
this._buttonGroup.registerKeyHandler('escape', this._escHandler.bind(this));
600608

601609
this._bindInnerWidgetOptions(this._buttonGroup, 'buttonGroupOptions');
602-
603610
this._updateAriaAttributes(this.option('opened'));
604611
}
605612

@@ -792,11 +799,12 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
792799
case 'showArrowIcon':
793800
this._updateArrowClass();
794801
this._renderButtonGroup();
795-
this._popup && this._popup.repaint();
802+
this._popup?.repaint();
796803
break;
797804
case 'width':
798805
case 'height':
799806
super._optionChanged(args);
807+
this._dimensionChanged();
800808
this._popup?.repaint();
801809
break;
802810
case 'stylingMode':

0 commit comments

Comments
 (0)