Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

rc-dock

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-dock - npm Package Compare versions

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