Comparing version 2.5.6 to 3.0.0-alpha
@@ -147,4 +147,3 @@ import React from 'react'; | ||
/** | ||
* cached tab is disconnected with parent react component | ||
* if react context is needed in the cached tab, the context type need to be specified here | ||
* @deprecated no longer needed | ||
*/ | ||
@@ -183,2 +182,8 @@ cacheContext?: React.Context<any>; | ||
} | ||
export interface TabPaneCache { | ||
id: string; | ||
div: HTMLDivElement; | ||
owner: any; | ||
portal?: React.ReactPortal; | ||
} | ||
export interface LayoutData extends LayoutBase { | ||
@@ -252,2 +257,8 @@ /** | ||
updateTab(id: string, newTab: TabData): boolean; | ||
/** @ignore */ | ||
getTabCache(id: string, owner: any): TabPaneCache; | ||
/** @ignore */ | ||
removeTabCache(id: string, owner: any): void; | ||
/** @ignore */ | ||
updateTabCache(id: string, portal: React.ReactElement): void; | ||
} | ||
@@ -254,0 +265,0 @@ /** @ignore */ |
import React, { CSSProperties } from "react"; | ||
import { BoxData, LayoutData, PanelData, DockContext, DropDirection, TabData, TabGroup, LayoutBase, TabBase, PanelBase } from "./DockData"; | ||
import { BoxData, LayoutData, PanelData, DockContext, DropDirection, TabData, TabGroup, LayoutBase, TabBase, PanelBase, TabPaneCache } from "./DockData"; | ||
interface LayoutProps { | ||
@@ -77,4 +77,16 @@ /** | ||
} | ||
export declare class DockLayout extends React.PureComponent<LayoutProps, LayoutState> implements DockContext { | ||
declare class DockPortalManager extends React.PureComponent<LayoutProps, LayoutState> { | ||
/** @ignore */ | ||
_caches: Map<string, TabPaneCache>; | ||
_pendingDestroy: any; | ||
destroyRemovedPane: () => void; | ||
/** @ignore */ | ||
getTabCache(id: string, owner: any): TabPaneCache; | ||
/** @ignore */ | ||
removeTabCache(id: string, owner: any): void; | ||
/** @ignore */ | ||
updateTabCache(id: string, children: React.ReactElement): void; | ||
} | ||
export declare class DockLayout extends DockPortalManager implements DockContext { | ||
/** @ignore */ | ||
_ref: HTMLDivElement; | ||
@@ -81,0 +93,0 @@ /** @ignore */ |
@@ -35,3 +35,56 @@ "use strict"; | ||
const MaxBox_1 = require("./MaxBox"); | ||
class DockLayout extends react_1.default.PureComponent { | ||
class DockPortalManager extends react_1.default.PureComponent { | ||
constructor() { | ||
super(...arguments); | ||
/** @ignore */ | ||
this._caches = new Map(); | ||
this.destroyRemovedPane = () => { | ||
this._pendingDestroy = null; | ||
let cacheRemoved = false; | ||
for (let [id, cache] of this._caches) { | ||
if (cache.owner == null) { | ||
this._caches.delete(id); | ||
cacheRemoved = true; | ||
} | ||
} | ||
if (cacheRemoved) { | ||
this.forceUpdate(); | ||
} | ||
}; | ||
} | ||
/** @ignore */ | ||
getTabCache(id, owner) { | ||
let cache = this._caches.get(id); | ||
if (!cache) { | ||
let div = document.createElement('div'); | ||
div.className = 'dock-pane-cache'; | ||
cache = { div, id, owner }; | ||
this._caches.set(id, cache); | ||
} | ||
else { | ||
cache.owner = owner; | ||
} | ||
return cache; | ||
} | ||
/** @ignore */ | ||
removeTabCache(id, owner) { | ||
let cache = this._caches.get(id); | ||
if (cache && cache.owner === owner) { | ||
cache.owner = null; | ||
if (!this._pendingDestroy) { | ||
// it could be reused by another component, so let's wait | ||
this._pendingDestroy = setTimeout(this.destroyRemovedPane, 1); | ||
} | ||
} | ||
} | ||
/** @ignore */ | ||
updateTabCache(id, children) { | ||
let cache = this._caches.get(id); | ||
if (cache) { | ||
cache.portal = react_dom_1.default.createPortal(children, cache.div, cache.id); | ||
this.forceUpdate(); | ||
} | ||
} | ||
} | ||
class DockLayout extends DockPortalManager { | ||
constructor(props) { | ||
@@ -297,2 +350,8 @@ super(props); | ||
// } | ||
let portals = []; | ||
for (let [key, cache] of this._caches) { | ||
if (cache.portal) { | ||
portals.push(cache.portal); | ||
} | ||
} | ||
return (react_1.default.createElement("div", { ref: this.getRef, className: 'dock-layout', style: style }, | ||
@@ -302,3 +361,4 @@ react_1.default.createElement(DockData_1.DockContextProvider, { value: this }, | ||
react_1.default.createElement(FloatBox_1.FloatBox, { boxData: layout.floatbox }), | ||
maximize), | ||
maximize, | ||
portals), | ||
react_1.default.createElement("div", { className: 'dock-drop-indicator', style: dropRectStyle }))); | ||
@@ -305,0 +365,0 @@ } |
import React from 'react'; | ||
import { DockContext, TabPaneCache } from "./DockData"; | ||
interface DockTabPaneProps { | ||
@@ -16,2 +17,4 @@ className?: string; | ||
export default class DockTabPane extends React.PureComponent<DockTabPaneProps, any> { | ||
static contextType: React.Context<DockContext>; | ||
context: DockContext; | ||
_ref: HTMLDivElement; | ||
@@ -27,16 +30,2 @@ getRef: (r: HTMLDivElement) => void; | ||
} | ||
declare class TabPaneCache { | ||
static _caches: Map<string, TabPaneCache>; | ||
static remove(id: string, pane: DockTabPane): void; | ||
static create(id: string, pane: DockTabPane): TabPaneCache; | ||
static _pending: any; | ||
static destroyRemovedPane(): void; | ||
id: string; | ||
div: HTMLDivElement; | ||
pane: DockTabPane; | ||
node: React.ReactElement; | ||
update(node: React.ReactElement): void; | ||
destroy(): void; | ||
} | ||
export declare function getContextPaneClass(contextType: React.Context<any>): any; | ||
export {}; |
@@ -7,4 +7,4 @@ "use strict"; | ||
const react_1 = __importDefault(require("react")); | ||
const react_dom_1 = __importDefault(require("react-dom")); | ||
const classnames_1 = __importDefault(require("classnames")); | ||
const DockData_1 = require("./DockData"); | ||
class DockTabPane extends react_1.default.PureComponent { | ||
@@ -21,3 +21,3 @@ constructor() { | ||
if (!cached || cacheId !== this._cache.id) { | ||
TabPaneCache.remove(this._cache.id, this); | ||
this.context.removeTabCache(this._cache.id, this); | ||
this._cache = null; | ||
@@ -27,5 +27,5 @@ } | ||
if (cached && this._ref) { | ||
this._cache = TabPaneCache.create(cacheId, this); | ||
this._cache = this.context.getTabCache(cacheId, this); | ||
this._ref.appendChild(this._cache.div); | ||
this._cache.update(children); | ||
this.context.updateTabCache(this._cache.id, children); | ||
} | ||
@@ -64,3 +64,3 @@ } | ||
if (this._cache) { | ||
TabPaneCache.remove(this._cache.id, this); | ||
this.context.removeTabCache(this._cache.id, this); | ||
} | ||
@@ -70,87 +70,2 @@ } | ||
exports.default = DockTabPane; | ||
class TabPaneCache { | ||
static remove(id, pane) { | ||
let cache = TabPaneCache._caches.get(id); | ||
if (cache && cache.pane === pane) { | ||
cache.pane = null; | ||
if (!TabPaneCache._pending) { | ||
// it could be reused by another component, so let's wait | ||
TabPaneCache._pending = setTimeout(TabPaneCache.destroyRemovedPane, 1); | ||
} | ||
} | ||
} | ||
static create(id, pane) { | ||
let cache = TabPaneCache._caches.get(id); | ||
if (!cache) { | ||
cache = new TabPaneCache(); | ||
cache.id = id; | ||
cache.div = document.createElement('div'); | ||
cache.div.className = 'dock-pane-cache'; | ||
TabPaneCache._caches.set(id, cache); | ||
} | ||
cache.pane = pane; | ||
return cache; | ||
} | ||
static destroyRemovedPane() { | ||
TabPaneCache._pending = null; | ||
for (let [id, cache] of TabPaneCache._caches) { | ||
if (cache.pane == null) { | ||
cache.destroy(); | ||
TabPaneCache._caches.delete(id); | ||
} | ||
} | ||
} | ||
update(node) { | ||
if (node !== this.node) { | ||
this.node = node; | ||
react_dom_1.default.render(node, this.div); | ||
} | ||
} | ||
destroy() { | ||
react_dom_1.default.unmountComponentAtNode(this.div); | ||
} | ||
} | ||
TabPaneCache._caches = new Map(); | ||
let _paneClassCache = new WeakMap(); | ||
function getContextPaneClass(contextType) { | ||
if (_paneClassCache.has(contextType)) { | ||
return _paneClassCache.get(contextType); | ||
} | ||
class NewClass extends DockTabPane { | ||
get context() { | ||
return this._context; | ||
} | ||
set context(ctx) { | ||
if (!Object.is(ctx, this._context)) { | ||
this._context = ctx; | ||
if (this._cache) { | ||
this.updateCache(); | ||
} | ||
} | ||
} | ||
updateCache() { | ||
const { cached, children, cacheId } = this.props; | ||
if (this._cache) { | ||
if (!cached || cacheId !== this._cache.id) { | ||
TabPaneCache.remove(this._cache.id, this); | ||
this._cache = null; | ||
} | ||
} | ||
if (cached && this._ref) { | ||
this._cache = TabPaneCache.create(cacheId, this); | ||
this._ref.appendChild(this._cache.div); | ||
if (contextType) { | ||
let Provider = contextType.Provider; | ||
this._cache.update(react_1.default.createElement(Provider, { value: this._context }, children)); | ||
} | ||
else { | ||
this._cache.update(children); | ||
} | ||
} | ||
} | ||
} | ||
NewClass.contextType = contextType; | ||
_paneClassCache.set(contextType, NewClass); | ||
return NewClass; | ||
} | ||
exports.getContextPaneClass = getContextPaneClass; | ||
DockTabPane.contextType = DockData_1.DockContextType; |
@@ -20,3 +20,3 @@ "use strict"; | ||
const DockTabBar_1 = require("./DockTabBar"); | ||
const DockTabPane_1 = __importStar(require("./DockTabPane")); | ||
const DockTabPane_1 = __importDefault(require("./DockTabPane")); | ||
const Algorithm_1 = require("./Algorithm"); | ||
@@ -133,10 +133,3 @@ function findParentPanel(element) { | ||
: null))); | ||
if (cacheContext) { | ||
// allow DockTabPane to receive context | ||
let DockTabPaneClass = DockTabPane_1.getContextPaneClass(cacheContext); | ||
return (react_1.default.createElement(DockTabPaneClass, { key: id, cacheId: id, cached: cached, tab: tab }, content)); | ||
} | ||
else { | ||
return (react_1.default.createElement(DockTabPane_1.default, { key: id, cacheId: id, cached: cached, tab: tab }, content)); | ||
} | ||
return (react_1.default.createElement(DockTabPane_1.default, { key: id, cacheId: id, cached: cached, tab: tab }, content)); | ||
} | ||
@@ -143,0 +136,0 @@ destroy() { |
{ | ||
"name": "rc-dock", | ||
"version": "2.5.6", | ||
"version": "3.0.0-alpha", | ||
"description": "dock layout for react component", | ||
@@ -32,27 +32,27 @@ "repository": { | ||
"lodash": "^4.17.15", | ||
"rc-tabs": "^10.1.0", | ||
"rc-tabs": "^10.1.1", | ||
"react-new-window": "^0.1.2" | ||
}, | ||
"devDependencies": { | ||
"@babel/core": "^7.8.7", | ||
"@babel/core": "^7.9.6", | ||
"@babel/plugin-proposal-class-properties": "^7.8.3", | ||
"@babel/plugin-proposal-export-default-from": "^7.8.3", | ||
"@babel/preset-env": "^7.8.7", | ||
"@babel/preset-env": "^7.9.6", | ||
"@types/classnames": "^2.2.10", | ||
"@types/lodash": "^4.14.149", | ||
"@types/node": "^13.9.1", | ||
"@types/lodash": "^4.14.150", | ||
"@types/node": "^13.13.4", | ||
"@types/prismjs": "^1.16.0", | ||
"@types/react": "^16.9.23", | ||
"@types/react-dom": "^16.9.5", | ||
"@types/shelljs": "^0.8.6", | ||
"@types/react": "^16.9.34", | ||
"@types/react-dom": "^16.9.7", | ||
"@types/shelljs": "^0.8.7", | ||
"less": "^3.11.1", | ||
"parcel-bundler": "^1.12.4", | ||
"prismjs": "^1.19.0", | ||
"react": "^16.13.0", | ||
"react-dom": "^16.13.0", | ||
"shelljs": "^0.8.3", | ||
"ts-node": "^8.6.2", | ||
"tslint": "^6.1.0", | ||
"tslint-react": "^4.2.0", | ||
"typedoc": "^0.17.0", | ||
"prismjs": "^1.20.0", | ||
"react": "^16.13.1", | ||
"react-dom": "^16.13.1", | ||
"shelljs": "^0.8.4", | ||
"ts-node": "^8.10.1", | ||
"tslint": "^6.1.2", | ||
"tslint-react": "^5.0.0", | ||
"typedoc": "^0.17.6", | ||
"typescript": "^3.8.3" | ||
@@ -59,0 +59,0 @@ }, |
import React from 'react'; | ||
import ReactDOM from "react-dom"; | ||
@@ -175,4 +176,3 @@ export interface TabGroup { | ||
/** | ||
* cached tab is disconnected with parent react component | ||
* if react context is needed in the cached tab, the context type need to be specified here | ||
* @deprecated no longer needed | ||
*/ | ||
@@ -222,2 +222,10 @@ cacheContext?: React.Context<any>; | ||
export interface TabPaneCache { | ||
id: string; | ||
div: HTMLDivElement; | ||
owner: any; | ||
portal?: React.ReactPortal; | ||
} | ||
export interface LayoutData extends LayoutBase { | ||
@@ -247,3 +255,13 @@ /** | ||
export type DropDirection = | ||
'left' | 'right' | 'bottom' | 'top' | 'middle' | 'remove' | 'before-tab' | 'after-tab' | 'float' | 'front' | 'maximize'; | ||
'left' | ||
| 'right' | ||
| 'bottom' | ||
| 'top' | ||
| 'middle' | ||
| 'remove' | ||
| 'before-tab' | ||
| 'after-tab' | ||
| 'float' | ||
| 'front' | ||
| 'maximize'; | ||
@@ -299,2 +317,11 @@ export interface DockContext { | ||
updateTab(id: string, newTab: TabData): boolean; | ||
/** @ignore */ | ||
getTabCache(id: string, owner: any): TabPaneCache; | ||
/** @ignore */ | ||
removeTabCache(id: string, owner: any): void; | ||
/** @ignore */ | ||
updateTabCache(id: string, portal: React.ReactElement): void; | ||
} | ||
@@ -301,0 +328,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
326100
5536
8734
1
2
Updatedrc-tabs@^10.1.1