Skip to content

Commit

Permalink
Tabs/TabPanel: Move indicator position styles to tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@marker-dao
marker-dao authored Oct 25, 2023
1 parent 65a40d4 commit df75978
Show file tree
Hide file tree
Showing 19 changed files with 319 additions and 197 deletions.
52 changes: 35 additions & 17 deletions packages/devextreme/js/ui/tab_panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,13 @@ const TABS_POSITION = {
left: 'left',
};

const TABS_INDICATOR_POSITION_BY_TABS_POSITION = {
top: 'bottom',
right: 'left',
bottom: 'top',
left: 'right',
};

const TABS_ORIENTATION = {
horizontal: 'horizontal',
vertical: 'vertical',
Expand Down Expand Up @@ -83,12 +90,14 @@ const TabPanel = MultiView.inherit({

onTitleRendered: null,

badgeExpr: function(data) { return data ? data.badge : undefined; }
badgeExpr: function(data) { return data ? data.badge : undefined; },

/**
* @name dxTabPanelItem.visible
* @hidden
*/

_tabsIndicatorPosition: null,
});
},

Expand Down Expand Up @@ -242,7 +251,15 @@ const TabPanel = MultiView.inherit({
this.setAria('controls', id, $activeTab);
},

_tabConfig: function() {
_getTabsIndicatorPosition() {
const { _tabsIndicatorPosition, tabsPosition } = this.option();

return _tabsIndicatorPosition ?? TABS_INDICATOR_POSITION_BY_TABS_POSITION[tabsPosition];
},

_tabConfig() {
const tabsIndicatorPosition = this._getTabsIndicatorPosition();

return {
selectOnFocus: true,
focusStateEnabled: this.option('focusStateEnabled'),
Expand Down Expand Up @@ -288,9 +305,8 @@ const TabPanel = MultiView.inherit({
orientation: this._getTabsOrientation(),
iconPosition: this.option('iconPosition'),
stylingMode: this.option('stylingMode'),
_itemAttributes: {
class: TABPANEL_TABS_ITEM_CLASS,
},
_itemAttributes: { class: TABPANEL_TABS_ITEM_CLASS },
_indicatorPosition: tabsIndicatorPosition,
};
},

Expand Down Expand Up @@ -337,15 +353,7 @@ const TabPanel = MultiView.inherit({
_updateTabsOrientation() {
const orientation = this._getTabsOrientation();

this._tabs.option('orientation', orientation);
},

_updateTabsIconPosition(iconPosition) {
this._tabs.option({ iconPosition });
},

_updateTabsStylingMode(stylingMode) {
this._tabs.option({ stylingMode });
this._setTabsOption('orientation', orientation);
},

_toggleWrapperFocusedClass(isFocused) {
Expand Down Expand Up @@ -387,7 +395,7 @@ const TabPanel = MultiView.inherit({
this._isFocusOutHandlerExecuting = false;
},

_setTabsOption: function(name, value) {
_setTabsOption(name, value) {
if(this._tabs) {
this._tabs.option(name, value);
}
Expand All @@ -412,6 +420,12 @@ const TabPanel = MultiView.inherit({
this._tabs.repaint();
},

_updateTabsIndicatorPosition() {
const value = this._getTabsIndicatorPosition();

this.option('_tabsIndicatorPosition', value);
},

_optionChanged: function(args) {
const { name, value, fullName } = args;

Expand Down Expand Up @@ -491,13 +505,17 @@ const TabPanel = MultiView.inherit({
break;
case 'tabsPosition':
this._toggleTabPanelTabsPositionClass();
this._updateTabsIndicatorPosition();
this._updateTabsOrientation();
break;
case 'iconPosition':
this._updateTabsIconPosition(value);
this._setTabsOption('iconPosition', value);
break;
case 'stylingMode':
this._updateTabsStylingMode(value);
this._setTabsOption('stylingMode', value);
break;
case '_tabsIndicatorPosition':
this._setTabsOption('_indicatorPosition', value);
break;
default:
this.callBase(args);
Expand Down
81 changes: 69 additions & 12 deletions packages/devextreme/js/ui/tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,13 @@ const TABS_ORIENTATION_CLASS = {
horizontal: 'dx-tabs-horizontal',
};

const INDICATOR_POSITION_CLASS = {
top: 'dx-tab-indicator-position-top',
right: 'dx-tab-indicator-position-right',
bottom: 'dx-tab-indicator-position-bottom',
left: 'dx-tab-indicator-position-left',
};

const TABS_ICON_POSITION_CLASS = {
top: 'dx-tabs-icon-position-top',
end: 'dx-tabs-icon-position-end',
Expand Down Expand Up @@ -80,6 +87,13 @@ const ORIENTATION = {
vertical: 'vertical',
};

const INDICATOR_POSITION = {
top: 'top',
right: 'right',
bottom: 'bottom',
left: 'left',
};

const SCROLLABLE_DIRECTION = {
horizontal: 'horizontal',
vertical: 'vertical',
Expand Down Expand Up @@ -126,6 +140,7 @@ const Tabs = CollectionWidget.inherit({
useInkRipple: false,
badgeExpr: function(data) { return data ? data.badge : undefined; },
_itemAttributes: { role: 'tab' },
_indicatorPosition: null,
});
},

Expand Down Expand Up @@ -179,10 +194,12 @@ const Tabs = CollectionWidget.inherit({

_init() {
const { orientation, stylingMode } = this.option();
const indicatorPosition = this._getIndicatorPosition();

this.callBase();
this.$element().addClass(TABS_CLASS);
this._toggleOrientationClass(orientation);
this._toggleIndicatorPositionClass(indicatorPosition);
this._toggleIconPositionClass();
this._toggleStylingModeClass(stylingMode);
this._renderWrapper();
Expand Down Expand Up @@ -565,6 +582,32 @@ const Tabs = CollectionWidget.inherit({
this.$element().toggleClass(TABS_ORIENTATION_CLASS.horizontal, value);
},

_getIndicatorPositionClass(indicatorPosition) {
return INDICATOR_POSITION_CLASS[indicatorPosition];
},

_getIndicatorPosition() {
const { _indicatorPosition, rtlEnabled } = this.option();

if(_indicatorPosition) {
return _indicatorPosition;
}

const isVertical = this._isVertical();

if(rtlEnabled) {
return isVertical ? INDICATOR_POSITION.left : INDICATOR_POSITION.bottom;
} else {
return isVertical ? INDICATOR_POSITION.right : INDICATOR_POSITION.bottom;
}
},

_toggleIndicatorPositionClass(indicatorPosition) {
const newClass = this._getIndicatorPositionClass(indicatorPosition);

this._toggleElementClasses(INDICATOR_POSITION_CLASS, newClass);
},

_toggleOrientationClass(orientation) {
const isVertical = orientation === ORIENTATION.vertical;

Expand All @@ -589,12 +632,22 @@ const Tabs = CollectionWidget.inherit({
},

_toggleIconPositionClass() {
for(const key in TABS_ICON_POSITION_CLASS) {
this.$element().removeClass(TABS_ICON_POSITION_CLASS[key]);
}

const newClass = this._getTabsIconPositionClass();

this._toggleElementClasses(TABS_ICON_POSITION_CLASS, newClass);
},

_toggleStylingModeClass(value) {
const newClass = TABS_STYLING_MODE_CLASS[value] ?? TABS_STYLING_MODE_CLASS.primary;

this._toggleElementClasses(TABS_STYLING_MODE_CLASS, newClass);
},

_toggleElementClasses(classMap, newClass) {
for(const key in classMap) {
this.$element().removeClass(classMap[key]);
}

this.$element().addClass(newClass);
},

Expand Down Expand Up @@ -628,14 +681,6 @@ const Tabs = CollectionWidget.inherit({
this._toggleFocusedDisabledPrevClass(currentIndex, shouldPrevClassBeSetted);
},

_toggleStylingModeClass(value) {
for(const key in TABS_STYLING_MODE_CLASS) {
this.$element().removeClass(TABS_STYLING_MODE_CLASS[key]);
}

this.$element().addClass(TABS_STYLING_MODE_CLASS[value] ?? TABS_STYLING_MODE_CLASS.primary);
},

_optionChanged: function(args) {
switch(args.name) {
case 'useInkRipple':
Expand Down Expand Up @@ -664,8 +709,16 @@ const Tabs = CollectionWidget.inherit({
this._scrollToItem(args.value);
break;
}
case 'rtlEnabled': {
this.callBase(args);
const indicatorPosition = this._getIndicatorPosition();
this._toggleIndicatorPositionClass(indicatorPosition);
break;
}
case 'orientation': {
this._toggleOrientationClass(args.value);
const indicatorPosition = this._getIndicatorPosition();
this._toggleIndicatorPositionClass(indicatorPosition);
if(!this._isServerSide()) {
this._updateScrollable();
}
Expand All @@ -685,6 +738,10 @@ const Tabs = CollectionWidget.inherit({
}
break;
}
case '_indicatorPosition': {
this._toggleIndicatorPositionClass(args.value);
break;
}
default:
this.callBase(args);
}
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/scss/widgets/base/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@
}

.dx-tab-content {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
Expand Down
Loading

0 comments on commit df75978

Please sign in to comment.