From af2888f9515d6a80ef2a3d64b8da4dc97fffb2b9 Mon Sep 17 00:00:00 2001 From: Shravan Kumar Karnati Date: Mon, 2 Jan 2023 08:39:13 -0800 Subject: [PATCH 1/2] dropdown classes --- es/DockPanel.js | 9 ++------- es/DockTabs.js | 3 ++- es/Utils.d.ts | 1 + es/Utils.js | 6 ++++++ es/dragdrop/DragManager.js | 6 ++---- lib/DockPanel.js | 9 ++------- lib/DockTabs.js | 3 ++- lib/Utils.d.ts | 1 + lib/Utils.js | 10 ++++++++++ lib/dragdrop/DragManager.js | 6 ++---- src/DockPanel.tsx | 9 ++------- src/DockTabs.tsx | 2 ++ src/Utils.ts | 4 ++++ src/dragdrop/DragManager.ts | 8 +++----- 14 files changed, 41 insertions(+), 36 deletions(-) create mode 100644 es/Utils.d.ts create mode 100644 es/Utils.js create mode 100644 lib/Utils.d.ts create mode 100644 lib/Utils.js create mode 100644 src/Utils.ts diff --git a/es/DockPanel.js b/es/DockPanel.js index 9f7dbb37..20941b35 100644 --- a/es/DockPanel.js +++ b/es/DockPanel.js @@ -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); @@ -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'; diff --git a/es/DockTabs.js b/es/DockTabs.js index e4331e54..cac314b1 100644 --- a/es/DockTabs.js +++ b/es/DockTabs.js @@ -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) { @@ -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; diff --git a/es/Utils.d.ts b/es/Utils.d.ts new file mode 100644 index 00000000..f63cbeb0 --- /dev/null +++ b/es/Utils.d.ts @@ -0,0 +1 @@ +export declare const groupClassNames: (groupName?: string, classes?: string[]) => string; diff --git a/es/Utils.js b/es/Utils.js new file mode 100644 index 00000000..a951746b --- /dev/null +++ b/es/Utils.js @@ -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(' '); +}; diff --git a/es/dragdrop/DragManager.js b/es/dragdrop/DragManager.js index 78ee26d4..ded39ae8 100644 --- a/es/dragdrop/DragManager.js +++ b/es/dragdrop/DragManager.js @@ -1,3 +1,4 @@ +import { groupClassNames } from "../Utils"; export class DragState { constructor(event, component, init = false) { this.pageX = 0; @@ -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); } diff --git a/lib/DockPanel.js b/lib/DockPanel.js index 06d88654..2c463d3a 100644 --- a/lib/DockPanel.js +++ b/lib/DockPanel.js @@ -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); @@ -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'; diff --git a/lib/DockTabs.js b/lib/DockTabs.js index dea49e60..65170a93 100644 --- a/lib/DockTabs.js +++ b/lib/DockTabs.js @@ -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) { @@ -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; diff --git a/lib/Utils.d.ts b/lib/Utils.d.ts new file mode 100644 index 00000000..f63cbeb0 --- /dev/null +++ b/lib/Utils.d.ts @@ -0,0 +1 @@ +export declare const groupClassNames: (groupName?: string, classes?: string[]) => string; diff --git a/lib/Utils.js b/lib/Utils.js new file mode 100644 index 00000000..cb6e0abb --- /dev/null +++ b/lib/Utils.js @@ -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; diff --git a/lib/dragdrop/DragManager.js b/lib/dragdrop/DragManager.js index 5921b5b1..e9bbb179 100644 --- a/lib/dragdrop/DragManager.js +++ b/lib/dragdrop/DragManager.js @@ -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; @@ -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); } diff --git a/src/DockPanel.tsx b/src/DockPanel.tsx index 5f8994a2..12b4d1f4 100644 --- a/src/DockPanel.tsx +++ b/src/DockPanel.tsx @@ -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"; interface Props { panelData: PanelData; @@ -277,13 +278,7 @@ export class DockPanel extends React.PureComponent { heightFlex = panelHeightFlex; } } - let panelClass: string; - if (styleName) { - panelClass = styleName - .split(' ') - .map((name) => `dock-style-${name}`) - .join(' '); - } + let panelClass: string = groupClassNames(styleName) let isMax = parent?.mode === 'maximize'; let isFloat = parent?.mode === 'float'; let isHBox = parent?.mode === 'horizontal'; diff --git a/src/DockTabs.tsx b/src/DockTabs.tsx index 56ccd27a..99dbe573 100644 --- a/src/DockTabs.tsx +++ b/src/DockTabs.tsx @@ -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: HTMLElement) { for (let i = 0; i < 10; ++i) { @@ -328,6 +329,7 @@ export class DockTabs extends React.PureComponent { renderTabBar={this.renderTabBar} activeKey={activeId} onChange={this.onTabChange} + popupClassName={groupClassNames(group)} > {children} diff --git a/src/Utils.ts b/src/Utils.ts new file mode 100644 index 00000000..73c2bae5 --- /dev/null +++ b/src/Utils.ts @@ -0,0 +1,4 @@ +export const groupClassNames = (groupName: string = '', classes: string[] = []) => + (groupName.split(' ').map((name) => `dock-style-${name}`) ?? []) + .concat(classes) + .join(' '); diff --git a/src/dragdrop/DragManager.ts b/src/dragdrop/DragManager.ts index 763e1bea..9668e9d0 100644 --- a/src/dragdrop/DragManager.ts +++ b/src/dragdrop/DragManager.ts @@ -1,3 +1,5 @@ +import {groupClassNames} from "../Utils"; + export type DragType = 'left' | 'right' | 'touch'; interface DragDropComponent { @@ -203,11 +205,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 = groupClassNames(tabGroup, ['dragging-layer']); _draggingDiv.appendChild(document.createElement('div')); // place holder for dragging element _draggingDiv.appendChild(_draggingIcon); From 752d9f6699fdda68f598325662e351f4eaf0c35f Mon Sep 17 00:00:00 2001 From: Shravan Kumar Karnati Date: Sat, 14 Jan 2023 09:41:07 -0800 Subject: [PATCH 2/2] feedback-refactor --- src/DockPanel.tsx | 3 ++- src/DockTabs.tsx | 3 ++- src/Utils.ts | 9 +++++---- src/dragdrop/DragManager.ts | 3 ++- 4 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/DockPanel.tsx b/src/DockPanel.tsx index 12b4d1f4..bac87a3d 100644 --- a/src/DockPanel.tsx +++ b/src/DockPanel.tsx @@ -7,6 +7,7 @@ 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; @@ -278,7 +279,7 @@ export class DockPanel extends React.PureComponent { heightFlex = panelHeightFlex; } } - let panelClass: string = groupClassNames(styleName) + let panelClass: string = classNames(groupClassNames(styleName)) let isMax = parent?.mode === 'maximize'; let isFloat = parent?.mode === 'float'; let isHBox = parent?.mode === 'horizontal'; diff --git a/src/DockTabs.tsx b/src/DockTabs.tsx index 99dbe573..e24ab3c2 100644 --- a/src/DockTabs.tsx +++ b/src/DockTabs.tsx @@ -10,6 +10,7 @@ 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) { @@ -329,7 +330,7 @@ export class DockTabs extends React.PureComponent { renderTabBar={this.renderTabBar} activeKey={activeId} onChange={this.onTabChange} - popupClassName={groupClassNames(group)} + popupClassName={classNames(groupClassNames(group))} > {children} diff --git a/src/Utils.ts b/src/Utils.ts index 73c2bae5..eb72f999 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -1,4 +1,5 @@ -export const groupClassNames = (groupName: string = '', classes: string[] = []) => - (groupName.split(' ').map((name) => `dock-style-${name}`) ?? []) - .concat(classes) - .join(' '); +export const groupClassNames = (groupNames: string = ''): string[] => + groupNames + .split(' ') + .filter((value) => value !== '') + .map((name) => `dock-style-${name}`); diff --git a/src/dragdrop/DragManager.ts b/src/dragdrop/DragManager.ts index 9668e9d0..33c34400 100644 --- a/src/dragdrop/DragManager.ts +++ b/src/dragdrop/DragManager.ts @@ -1,3 +1,4 @@ +import classNames from "classnames"; import {groupClassNames} from "../Utils"; export type DragType = 'left' | 'right' | 'touch'; @@ -205,7 +206,7 @@ function _createDraggingDiv(doc: Document) { const tabGroup = (_data && 'tabGroup' in _data ? _data['tabGroup'] : undefined) as string | undefined; - _draggingDiv.className = groupClassNames(tabGroup, ['dragging-layer']); + _draggingDiv.className = classNames(groupClassNames(tabGroup), 'dragging-layer'); _draggingDiv.appendChild(document.createElement('div')); // place holder for dragging element _draggingDiv.appendChild(_draggingIcon);