Skip to content

Commit

Permalink
Drawer: Fix setting of visibility: hidden
Browse files Browse the repository at this point in the history
  • Loading branch information
@marker-dao
marker-dao authored May 21, 2024
1 parent 50e39a3 commit bb3a287
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 17 deletions.
24 changes: 18 additions & 6 deletions packages/devextreme/js/__internal/ui/drawer/m_drawer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import registerComponent from '@js/core/component_registrator';
import { getPublicElement } from '@js/core/element';
import $ from '@js/core/renderer';
import { EmptyTemplate } from '@js/core/templates/empty_template';
import { Deferred } from '@js/core/utils/deferred';
import { Deferred, when } from '@js/core/utils/deferred';
import { extend } from '@js/core/utils/extend';
import { getBoundingRect } from '@js/core/utils/position';
import { isDefined, isFunction } from '@js/core/utils/type';
Expand All @@ -21,7 +21,7 @@ import ShrinkStrategy from './m_drawer.rendering.strategy.shrink';
const DRAWER_CLASS = 'dx-drawer';
const DRAWER_WRAPPER_CLASS = 'dx-drawer-wrapper';
const DRAWER_PANEL_CONTENT_CLASS = 'dx-drawer-panel-content';
const DRAWER_PANEL_CONTENT_HAS_MIN_SIZE_CLASS = 'dx-drawer-panel-content-has-min-size';
const DRAWER_PANEL_CONTENT_HIDDEN_CLASS = 'dx-drawer-panel-content-hidden';
const DRAWER_VIEW_CONTENT_CLASS = 'dx-drawer-content';
const DRAWER_SHADER_CLASS = 'dx-drawer-shader';
const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
Expand Down Expand Up @@ -167,15 +167,26 @@ const Drawer = (Widget as any).inherit({
}
},

_togglePanelContentHasMinSizeClass(shouldBeSet) {
this._$panelContentWrapper.toggleClass(DRAWER_PANEL_CONTENT_HAS_MIN_SIZE_CLASS, shouldBeSet);
_togglePanelContentHiddenClass() {
const callback = (): void => {
const { minSize, opened } = this.option();
const shouldBeSet = minSize ? false : !opened;

this._$panelContentWrapper.toggleClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS, shouldBeSet);
};

if (this._whenAnimationCompleted) {
when(this._whenAnimationCompleted).done(callback);
} else {
callback();
}
},

_renderPanelContentWrapper() {
const { openedStateMode, opened, minSize } = this.option();

this._$panelContentWrapper = $('<div>').addClass(DRAWER_PANEL_CONTENT_CLASS);
this._togglePanelContentHasMinSizeClass(!!minSize);
this._togglePanelContentHiddenClass();

const position = this.calcTargetPosition();

Expand Down Expand Up @@ -497,6 +508,7 @@ const Drawer = (Widget as any).inherit({
case 'opened':
this._renderPosition(this.option('opened'));
this._toggleOpenedStateClass(args.value);
this._togglePanelContentHiddenClass();
break;
case 'position':
this._refreshPositionClass(args.previousValue);
Expand All @@ -516,7 +528,7 @@ const Drawer = (Widget as any).inherit({
case 'minSize':
this._initMinMaxSize();
this._renderPosition(this.option('opened'), true);
this._togglePanelContentHasMinSizeClass(!!args.value);
this._togglePanelContentHiddenClass();
break;
case 'maxSize':
this._initMinMaxSize();
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme/scss/widgets/base/_drawer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
height: 100%;
width: 100%;

&:not(.dx-drawer-opened) > {
.dx-drawer-wrapper > .dx-drawer-panel-content:not(.dx-drawer-panel-content-has-min-size) {
.dx-drawer-wrapper > .dx-drawer-panel-content {
&.dx-drawer-panel-content-hidden {
visibility: hidden;
}
}
Expand Down
36 changes: 27 additions & 9 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets/drawer.markup.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import 'ui/drawer';
const DRAWER_CLASS = 'dx-drawer';
const DRAWER_WRAPPER_CLASS = 'dx-drawer-wrapper';
const DRAWER_PANEL_CONTENT_CLASS = 'dx-drawer-panel-content';
const DRAWER_PANEL_CONTENT_HAS_MIN_SIZE_CLASS = 'dx-drawer-panel-content-has-min-size';
const DRAWER_PANEL_CONTENT_HIDDEN_CLASS = 'dx-drawer-panel-content-hidden';
const DRAWER_VIEW_CONTENT_CLASS = 'dx-drawer-content';
const DRAWER_SHADER_CLASS = 'dx-drawer-shader';
const OPENED_STATE_CLASS = 'dx-drawer-opened';
Expand Down Expand Up @@ -58,23 +58,41 @@ QUnit.module('rendering', () => {
assert.ok($element.hasClass(DRAWER_CLASS + '-slide'), 'drawer class is correct');
});

QUnit.test('drawer panel should have dx-drawer-panel-content-has-min-size class if minSize set', function(assert) {
QUnit.test('drawer panel should not have dx-drawer-panel-content-hidden class if drawer is closed', function(assert) {
const $element = $('#drawer').dxDrawer();
const $panel = $element.find(`.${DRAWER_PANEL_CONTENT_CLASS}`);

assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS), true, 'dx-drawer-panel-content-hidden is set');
});

QUnit.test('drawer panel should not have dx-drawer-panel-content-hidden class if drawer is opened', function(assert) {
const $element = $('#drawer').dxDrawer({ opened: true });
const $panel = $element.find(`.${DRAWER_PANEL_CONTENT_CLASS}`);

assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS), false, 'dx-drawer-panel-content-hidden is not set');
});

QUnit.test('drawer panel should not have dx-drawer-panel-content-hidden class if minSize is set', function(assert) {
const $element = $('#drawer').dxDrawer({ minSize: 1 });
const $panel = $element.find(`.${DRAWER_PANEL_CONTENT_CLASS}`);

assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS), false, 'dx-drawer-panel-content-hidden is not set');
});

QUnit.test('drawer panel should not have dx-drawer-panel-content-hidden class if minSize was changed in runtime', function(assert) {
const $element = $('#drawer').dxDrawer({ minSize: 1 });
const instance = $element.dxDrawer('instance');
const $panel = $element.find(`.${DRAWER_PANEL_CONTENT_CLASS}`);

assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HAS_MIN_SIZE_CLASS), true, 'dx-drawer-panel-content-has-min-size is set');
assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS), false, 'dx-drawer-panel-content-hidden is not set');

instance.option({ minSize: null });

assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HAS_MIN_SIZE_CLASS), false, 'dx-drawer-panel-content-has-min-size is not set');
});
assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS), true, 'dx-drawer-panel-content-hidden is set');

QUnit.test('drawer panel should not have dx-drawer-panel-content-has-min-size class if minSize is not set on init', function(assert) {
const $element = $('#drawer').dxDrawer({ minSize: null });
const $panel = $element.find(`.${DRAWER_PANEL_CONTENT_CLASS}`);
instance.option({ minSize: 1 });

assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HAS_MIN_SIZE_CLASS), false, 'dx-drawer-panel-content-has-min-size is not set');
assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS), false, 'dx-drawer-panel-content-hidden is not set');
});

QUnit.test('drawer panel should have visibility: hidden if drawer is closed', function(assert) {
Expand Down
16 changes: 16 additions & 0 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets/drawer.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import Overlay from 'ui/overlay/ui.overlay';

const DRAWER_WRAPPER_CLASS = 'dx-drawer-wrapper';
const DRAWER_PANEL_CONTENT_CLASS = 'dx-drawer-panel-content';
const DRAWER_PANEL_CONTENT_HIDDEN_CLASS = 'dx-drawer-panel-content-hidden';
const DRAWER_VIEW_CONTENT_CLASS = 'dx-drawer-content';
const DRAWER_SHADER_CLASS = 'dx-drawer-shader';

Expand Down Expand Up @@ -160,6 +161,21 @@ QUnit.module('Drawer behavior', () => {
assert.equal(count, 0, 'callback not fired at animation start');
});

QUnit.test('drawer panel should have dx-drawer-panel-content-hidden class before it was shown', function(assert) {
const $element = $('#drawer').dxDrawer({ animationDuration: 0 });
const instance = $element.dxDrawer('instance');
const $panel = $element.find(`.${DRAWER_PANEL_CONTENT_CLASS}`);

const done = assert.async();

instance.toggle().then(() => {
assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS), false, 'dx-drawer-panel-content-hidden is not set');
done();
});

assert.strictEqual($panel.hasClass(DRAWER_PANEL_CONTENT_HIDDEN_CLASS), true, 'dx-drawer-panel-content-hidden is set');
});

QUnit.test('Check dxresize event: opened:false,animationEnabled:true -> drawer.toggle()', function(assert) {
const done = assert.async();
const drawer = $('#drawer').dxDrawer({
Expand Down

0 comments on commit bb3a287

Please sign in to comment.