Skip to content

Commit

Permalink
Merge pull request #191 from Shravankumarkarnati/drop-down-class
Browse files Browse the repository at this point in the history
GroupName Classes to tab dropdown
  • Loading branch information
rinick authored Feb 10, 2023
2 parents ceb374c + 752d9f6 commit 99ed471
Show file tree
Hide file tree
Showing 14 changed files with 45 additions and 36 deletions.
9 changes: 2 additions & 7 deletions es/DockPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { DragState } from "./dragdrop/DragManager";
import { DockDropLayer } from "./DockDropLayer";
import { getFloatPanelSize, nextZIndex } from "./Algorithm";
import { DockDropEdge } from "./DockDropEdge";
import { groupClassNames } from "./Utils";
export class DockPanel extends React.PureComponent {
constructor() {
super(...arguments);
Expand Down Expand Up @@ -248,13 +249,7 @@ export class DockPanel extends React.PureComponent {
heightFlex = panelHeightFlex;
}
}
let panelClass;
if (styleName) {
panelClass = styleName
.split(' ')
.map((name) => `dock-style-${name}`)
.join(' ');
}
let panelClass = groupClassNames(styleName);
let isMax = (parent === null || parent === void 0 ? void 0 : parent.mode) === 'maximize';
let isFloat = (parent === null || parent === void 0 ? void 0 : parent.mode) === 'float';
let isHBox = (parent === null || parent === void 0 ? void 0 : parent.mode) === 'horizontal';
Expand Down
3 changes: 2 additions & 1 deletion es/DockTabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { DockTabBar } from "./DockTabBar";
import DockTabPane from "./DockTabPane";
import { getFloatPanelSize } from "./Algorithm";
import { WindowBox } from "./WindowBox";
import { groupClassNames } from "./Utils";
function findParentPanel(element) {
for (let i = 0; i < 10; ++i) {
if (!element) {
Expand Down Expand Up @@ -254,7 +255,7 @@ export class DockTabs extends React.PureComponent {
for (let [id, tab] of this._cache) {
children.push(tab.content);
}
return (React.createElement(Tabs, { prefixCls: "dock", moreIcon: moreIcon, animated: animated, renderTabBar: this.renderTabBar, activeKey: activeId, onChange: this.onTabChange }, children));
return (React.createElement(Tabs, { prefixCls: "dock", moreIcon: moreIcon, animated: animated, renderTabBar: this.renderTabBar, activeKey: activeId, onChange: this.onTabChange, popupClassName: groupClassNames(group) }, children));
}
}
DockTabs.contextType = DockContextType;
Expand Down
1 change: 1 addition & 0 deletions es/Utils.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export declare const groupClassNames: (groupName?: string, classes?: string[]) => string;
6 changes: 6 additions & 0 deletions es/Utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export const groupClassNames = (groupName = '', classes = []) => {
var _a;
return ((_a = groupName.split(' ').map((name) => `dock-style-${name}`)) !== null && _a !== void 0 ? _a : [])
.concat(classes)
.join(' ');
};
6 changes: 2 additions & 4 deletions es/dragdrop/DragManager.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { groupClassNames } from "../Utils";
export class DragState {
constructor(event, component, init = false) {
this.pageX = 0;
Expand Down Expand Up @@ -147,13 +148,10 @@ export function removeHandlers(element) {
let _draggingDiv;
let _draggingIcon;
function _createDraggingDiv(doc) {
var _a;
_draggingDiv = doc.createElement('div');
_draggingIcon = doc.createElement('div');
const tabGroup = (_data && 'tabGroup' in _data ? _data['tabGroup'] : undefined);
_draggingDiv.className = ((_a = tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.split(' ').map((name) => `dock-style-${name}`)) !== null && _a !== void 0 ? _a : [])
.concat('dragging-layer')
.join(' ');
_draggingDiv.className = groupClassNames(tabGroup, ['dragging-layer']);
_draggingDiv.appendChild(document.createElement('div')); // place holder for dragging element
_draggingDiv.appendChild(_draggingIcon);
}
Expand Down
9 changes: 2 additions & 7 deletions lib/DockPanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const DragManager_1 = require("./dragdrop/DragManager");
const DockDropLayer_1 = require("./DockDropLayer");
const Algorithm_1 = require("./Algorithm");
const DockDropEdge_1 = require("./DockDropEdge");
const Utils_1 = require("./Utils");
class DockPanel extends React.PureComponent {
constructor() {
super(...arguments);
Expand Down Expand Up @@ -270,13 +271,7 @@ class DockPanel extends React.PureComponent {
heightFlex = panelHeightFlex;
}
}
let panelClass;
if (styleName) {
panelClass = styleName
.split(' ')
.map((name) => `dock-style-${name}`)
.join(' ');
}
let panelClass = Utils_1.groupClassNames(styleName);
let isMax = (parent === null || parent === void 0 ? void 0 : parent.mode) === 'maximize';
let isFloat = (parent === null || parent === void 0 ? void 0 : parent.mode) === 'float';
let isHBox = (parent === null || parent === void 0 ? void 0 : parent.mode) === 'horizontal';
Expand Down
3 changes: 2 additions & 1 deletion lib/DockTabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const DockTabBar_1 = require("./DockTabBar");
const DockTabPane_1 = __importDefault(require("./DockTabPane"));
const Algorithm_1 = require("./Algorithm");
const WindowBox_1 = require("./WindowBox");
const Utils_1 = require("./Utils");
function findParentPanel(element) {
for (let i = 0; i < 10; ++i) {
if (!element) {
Expand Down Expand Up @@ -280,7 +281,7 @@ class DockTabs extends React.PureComponent {
for (let [id, tab] of this._cache) {
children.push(tab.content);
}
return (React.createElement(rc_tabs_1.default, { prefixCls: "dock", moreIcon: moreIcon, animated: animated, renderTabBar: this.renderTabBar, activeKey: activeId, onChange: this.onTabChange }, children));
return (React.createElement(rc_tabs_1.default, { prefixCls: "dock", moreIcon: moreIcon, animated: animated, renderTabBar: this.renderTabBar, activeKey: activeId, onChange: this.onTabChange, popupClassName: Utils_1.groupClassNames(group) }, children));
}
}
exports.DockTabs = DockTabs;
Expand Down
1 change: 1 addition & 0 deletions lib/Utils.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export declare const groupClassNames: (groupName?: string, classes?: string[]) => string;
10 changes: 10 additions & 0 deletions lib/Utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.groupClassNames = void 0;
const groupClassNames = (groupName = '', classes = []) => {
var _a;
return ((_a = groupName.split(' ').map((name) => `dock-style-${name}`)) !== null && _a !== void 0 ? _a : [])
.concat(classes)
.join(' ');
};
exports.groupClassNames = groupClassNames;
6 changes: 2 additions & 4 deletions lib/dragdrop/DragManager.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.removeDragStateListener = exports.addDragStateListener = exports.destroyDraggingElement = exports.removeHandlers = exports.addHandlers = exports.isDragging = exports.DragState = void 0;
const Utils_1 = require("../Utils");
class DragState {
constructor(event, component, init = false) {
this.pageX = 0;
Expand Down Expand Up @@ -154,13 +155,10 @@ exports.removeHandlers = removeHandlers;
let _draggingDiv;
let _draggingIcon;
function _createDraggingDiv(doc) {
var _a;
_draggingDiv = doc.createElement('div');
_draggingIcon = doc.createElement('div');
const tabGroup = (_data && 'tabGroup' in _data ? _data['tabGroup'] : undefined);
_draggingDiv.className = ((_a = tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.split(' ').map((name) => `dock-style-${name}`)) !== null && _a !== void 0 ? _a : [])
.concat('dragging-layer')
.join(' ');
_draggingDiv.className = Utils_1.groupClassNames(tabGroup, ['dragging-layer']);
_draggingDiv.appendChild(document.createElement('div')); // place holder for dragging element
_draggingDiv.appendChild(_draggingIcon);
}
Expand Down
10 changes: 3 additions & 7 deletions src/DockPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {DragState} from "./dragdrop/DragManager";
import {DockDropLayer} from "./DockDropLayer";
import {getFloatPanelSize, nextZIndex} from "./Algorithm";
import {DockDropEdge} from "./DockDropEdge";
import {groupClassNames} from "./Utils";
import classNames from "classnames";

interface Props {
panelData: PanelData;
Expand Down Expand Up @@ -277,13 +279,7 @@ export class DockPanel extends React.PureComponent<Props, State> {
heightFlex = panelHeightFlex;
}
}
let panelClass: string;
if (styleName) {
panelClass = styleName
.split(' ')
.map((name) => `dock-style-${name}`)
.join(' ');
}
let panelClass: string = classNames(groupClassNames(styleName))
let isMax = parent?.mode === 'maximize';
let isFloat = parent?.mode === 'float';
let isHBox = parent?.mode === 'horizontal';
Expand Down
3 changes: 3 additions & 0 deletions src/DockTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {DockTabBar} from "./DockTabBar";
import DockTabPane from "./DockTabPane";
import {getFloatPanelSize} from "./Algorithm";
import {WindowBox} from "./WindowBox";
import {groupClassNames} from "./Utils";
import classNames from "classnames";

function findParentPanel(element: HTMLElement) {
for (let i = 0; i < 10; ++i) {
Expand Down Expand Up @@ -328,6 +330,7 @@ export class DockTabs extends React.PureComponent<Props> {
renderTabBar={this.renderTabBar}
activeKey={activeId}
onChange={this.onTabChange}
popupClassName={classNames(groupClassNames(group))}
>
{children}
</Tabs>
Expand Down
5 changes: 5 additions & 0 deletions src/Utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const groupClassNames = (groupNames: string = ''): string[] =>
groupNames
.split(' ')
.filter((value) => value !== '')
.map((name) => `dock-style-${name}`);
9 changes: 4 additions & 5 deletions src/dragdrop/DragManager.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import classNames from "classnames";
import {groupClassNames} from "../Utils";

export type DragType = 'left' | 'right' | 'touch';

interface DragDropComponent {
Expand Down Expand Up @@ -203,11 +206,7 @@ function _createDraggingDiv(doc: Document) {

const tabGroup = (_data && 'tabGroup' in _data ? _data['tabGroup'] : undefined) as string | undefined;

_draggingDiv.className = (
tabGroup?.split(' ').map((name) => `dock-style-${name}`) ?? []
)
.concat('dragging-layer')
.join(' ');
_draggingDiv.className = classNames(groupClassNames(tabGroup), 'dragging-layer');

_draggingDiv.appendChild(document.createElement('div')); // place holder for dragging element
_draggingDiv.appendChild(_draggingIcon);
Expand Down

0 comments on commit 99ed471

Please sign in to comment.