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

rc-dock

Package Overview
Dependencies
Maintainers
1
Versions
102
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-dock - npm Package Compare versions

Comparing version 3.0.5 to 3.0.6

2

es/DockBox.js

@@ -44,3 +44,3 @@ import React from "react";

this.onDragEnd = () => {
this.context.onSilentChange();
this.context.onSilentChange(null, 'move');
};

@@ -47,0 +47,0 @@ }

4

es/DockData.d.ts

@@ -220,3 +220,3 @@ import React from 'react';

}
export declare type DropDirection = 'left' | 'right' | 'bottom' | 'top' | 'middle' | 'remove' | 'before-tab' | 'after-tab' | 'float' | 'front' | 'maximize' | 'new-window';
export declare type DropDirection = 'left' | 'right' | 'bottom' | 'top' | 'middle' | 'remove' | 'before-tab' | 'after-tab' | 'float' | 'front' | 'maximize' | 'new-window' | 'move' | 'active' | 'update';
export interface DockContext {

@@ -242,3 +242,3 @@ /** @ignore */

*/
onSilentChange(currentTabId?: string): void;
onSilentChange(currentTabId?: string, direction?: DropDirection): void;
/**

@@ -245,0 +245,0 @@ * move a tab or a panel, if source or target is already in the layout, you can use the find method to get it with id first

13

es/DockLayout.d.ts
import React, { CSSProperties } from "react";
import { BoxData, DockContext, DropDirection, LayoutBase, LayoutData, PanelBase, PanelData, TabBase, TabData, TabGroup, TabPaneCache } from "./DockData";
import * as Algorithm from "./Algorithm";
interface LayoutProps {
export interface LayoutProps {
/**
* @ignore
* when there are multiple DockLayout, by default, you can't drag panel between them
* but if you assign same dockId, it will allow panels to be from one layout to another
* but if you assign same dockId, it will allow panels to be dragged from one layout to another
*/

@@ -29,4 +28,6 @@ dockId?: string;

* @param newLayout layout data can be set to [[LayoutProps.layout]] directly when used as controlled component
* @param currentTabId id of current tab
* @param direction direction of the dock change
*/
onLayoutChange?(newLayout: LayoutBase, currentTabId: string): void;
onLayoutChange?(newLayout: LayoutBase, currentTabId?: string, direction?: DropDirection): void;
/**

@@ -144,3 +145,3 @@ * - default mode: showing 4 to 9 squares to help picking drop areas

*/
changeLayout(layoutData: LayoutData, currentTabId: string): void;
changeLayout(layoutData: LayoutData, currentTabId: string, direction: DropDirection): void;
/** @ignore

@@ -150,3 +151,3 @@ * some layout change were handled by component silently

*/
onSilentChange(currentTabId?: string): void;
onSilentChange(currentTabId?: string, direction?: DropDirection): void;
saveLayout(): LayoutBase;

@@ -153,0 +154,0 @@ /**

15

es/DockLayout.js

@@ -99,3 +99,3 @@ var __rest = (this && this.__rest) || function (s, e) {

newLayout = Algorithm.fixLayoutData(newLayout); // panel parent might need a fix
this.changeLayout(newLayout, null);
this.changeLayout(newLayout, null, 'move');
}

@@ -228,3 +228,3 @@ }

}
this.changeLayout(layout, currentTabId);
this.changeLayout(layout, currentTabId, direction);
}

@@ -260,3 +260,3 @@ this.onDragStateChange(false);

layout = Algorithm.fixLayoutData(layout);
this.changeLayout(layout, newTab.id);
this.changeLayout(layout, newTab.id, 'update');
return true;

@@ -390,3 +390,3 @@ }

*/
changeLayout(layoutData, currentTabId) {
changeLayout(layoutData, currentTabId, direction) {
let { layout, onLayoutChange } = this.props;

@@ -397,3 +397,3 @@ let savedLayout;

layoutData.loadedFrom = savedLayout;
onLayoutChange(savedLayout, currentTabId);
onLayoutChange(savedLayout, currentTabId, direction);
}

@@ -409,3 +409,3 @@ if (!layout) {

*/
onSilentChange(currentTabId = null) {
onSilentChange(currentTabId = null, direction) {
let { onLayoutChange } = this.props;

@@ -416,3 +416,3 @@ if (onLayoutChange) {

layout.loadedFrom = savedLayout;
onLayoutChange(savedLayout, currentTabId);
onLayoutChange(savedLayout, currentTabId, direction);
}

@@ -429,3 +429,2 @@ }

loadLayout(savedLayout) {
let { defaultLayout, loadTab, afterPanelLoaded } = this.props;
this.setLayout(DockLayout.loadLayoutData(savedLayout, this.props, this._ref.offsetWidth, this._ref.offsetHeight));

@@ -432,0 +431,0 @@ }

4

es/DockPanel.js

@@ -85,3 +85,3 @@ import React from "react";

this.setState({ draggingHeader: false });
this.context.onSilentChange(this.props.panelData.activeId);
this.context.onSilentChange(this.props.panelData.activeId, 'move');
}

@@ -143,3 +143,3 @@ };

this.onPanelCornerDragEnd = (e) => {
this.context.onSilentChange();
this.context.onSilentChange(this.props.panelData.activeId, 'move');
};

@@ -146,0 +146,0 @@ this.onFloatPointerDown = () => {

2

es/DockTabs.js

@@ -195,3 +195,3 @@ import React from "react";

this.props.panelData.activeId = activeId;
this.context.onSilentChange(activeId);
this.context.onSilentChange(activeId, 'active');
this.forceUpdate();

@@ -198,0 +198,0 @@ };

5

HISTORY.md
# History
----
## 3.0.6 / 2021-03-09
- add direction parameter to onLayoutChange callback
## 3.0.5 / 2021-03-08
- allow mouse event handler on tab title
- fix the issue that calling updateTab() doesn't trigger onLayoutChange #71
- fix the issue that calling updateTab() doesn't trigger onLayoutChange

@@ -8,0 +11,0 @@ ## 3.0.2 / 2021-02-06

2

lib/DockBox.js

@@ -50,3 +50,3 @@ "use strict";

this.onDragEnd = () => {
this.context.onSilentChange();
this.context.onSilentChange(null, 'move');
};

@@ -53,0 +53,0 @@ }

4

lib/DockData.d.ts

@@ -220,3 +220,3 @@ import React from 'react';

}
export declare type DropDirection = 'left' | 'right' | 'bottom' | 'top' | 'middle' | 'remove' | 'before-tab' | 'after-tab' | 'float' | 'front' | 'maximize' | 'new-window';
export declare type DropDirection = 'left' | 'right' | 'bottom' | 'top' | 'middle' | 'remove' | 'before-tab' | 'after-tab' | 'float' | 'front' | 'maximize' | 'new-window' | 'move' | 'active' | 'update';
export interface DockContext {

@@ -242,3 +242,3 @@ /** @ignore */

*/
onSilentChange(currentTabId?: string): void;
onSilentChange(currentTabId?: string, direction?: DropDirection): void;
/**

@@ -245,0 +245,0 @@ * move a tab or a panel, if source or target is already in the layout, you can use the find method to get it with id first

13

lib/DockLayout.d.ts
import React, { CSSProperties } from "react";
import { BoxData, DockContext, DropDirection, LayoutBase, LayoutData, PanelBase, PanelData, TabBase, TabData, TabGroup, TabPaneCache } from "./DockData";
import * as Algorithm from "./Algorithm";
interface LayoutProps {
export interface LayoutProps {
/**
* @ignore
* when there are multiple DockLayout, by default, you can't drag panel between them
* but if you assign same dockId, it will allow panels to be from one layout to another
* but if you assign same dockId, it will allow panels to be dragged from one layout to another
*/

@@ -29,4 +28,6 @@ dockId?: string;

* @param newLayout layout data can be set to [[LayoutProps.layout]] directly when used as controlled component
* @param currentTabId id of current tab
* @param direction direction of the dock change
*/
onLayoutChange?(newLayout: LayoutBase, currentTabId: string): void;
onLayoutChange?(newLayout: LayoutBase, currentTabId?: string, direction?: DropDirection): void;
/**

@@ -144,3 +145,3 @@ * - default mode: showing 4 to 9 squares to help picking drop areas

*/
changeLayout(layoutData: LayoutData, currentTabId: string): void;
changeLayout(layoutData: LayoutData, currentTabId: string, direction: DropDirection): void;
/** @ignore

@@ -150,3 +151,3 @@ * some layout change were handled by component silently

*/
onSilentChange(currentTabId?: string): void;
onSilentChange(currentTabId?: string, direction?: DropDirection): void;
saveLayout(): LayoutBase;

@@ -153,0 +154,0 @@ /**

15

lib/DockLayout.js

@@ -124,3 +124,3 @@ "use strict";

newLayout = Algorithm.fixLayoutData(newLayout); // panel parent might need a fix
this.changeLayout(newLayout, null);
this.changeLayout(newLayout, null, 'move');
}

@@ -253,3 +253,3 @@ }

}
this.changeLayout(layout, currentTabId);
this.changeLayout(layout, currentTabId, direction);
}

@@ -285,3 +285,3 @@ this.onDragStateChange(false);

layout = Algorithm.fixLayoutData(layout);
this.changeLayout(layout, newTab.id);
this.changeLayout(layout, newTab.id, 'update');
return true;

@@ -415,3 +415,3 @@ }

*/
changeLayout(layoutData, currentTabId) {
changeLayout(layoutData, currentTabId, direction) {
let { layout, onLayoutChange } = this.props;

@@ -422,3 +422,3 @@ let savedLayout;

layoutData.loadedFrom = savedLayout;
onLayoutChange(savedLayout, currentTabId);
onLayoutChange(savedLayout, currentTabId, direction);
}

@@ -434,3 +434,3 @@ if (!layout) {

*/
onSilentChange(currentTabId = null) {
onSilentChange(currentTabId = null, direction) {
let { onLayoutChange } = this.props;

@@ -441,3 +441,3 @@ if (onLayoutChange) {

layout.loadedFrom = savedLayout;
onLayoutChange(savedLayout, currentTabId);
onLayoutChange(savedLayout, currentTabId, direction);
}

@@ -454,3 +454,2 @@ }

loadLayout(savedLayout) {
let { defaultLayout, loadTab, afterPanelLoaded } = this.props;
this.setLayout(DockLayout.loadLayoutData(savedLayout, this.props, this._ref.offsetWidth, this._ref.offsetHeight));

@@ -457,0 +456,0 @@ }

4

lib/DockPanel.js

@@ -91,3 +91,3 @@ "use strict";

this.setState({ draggingHeader: false });
this.context.onSilentChange(this.props.panelData.activeId);
this.context.onSilentChange(this.props.panelData.activeId, 'move');
}

@@ -149,3 +149,3 @@ };

this.onPanelCornerDragEnd = (e) => {
this.context.onSilentChange();
this.context.onSilentChange(this.props.panelData.activeId, 'move');
};

@@ -152,0 +152,0 @@ this.onFloatPointerDown = () => {

2

lib/DockTabs.js

@@ -221,3 +221,3 @@ "use strict";

this.props.panelData.activeId = activeId;
this.context.onSilentChange(activeId);
this.context.onSilentChange(activeId, 'active');
this.forceUpdate();

@@ -224,0 +224,0 @@ };

2

package.json
{
"name": "rc-dock",
"version": "3.0.5",
"version": "3.0.6",
"description": "dock layout for react component",

@@ -5,0 +5,0 @@ "repository": {

26

README.md

@@ -53,5 +53,5 @@ # Dock Layout for React Component

- use as **uncontrolled layout**
- set layout object in **[DockLayout.defaultLayout](https://ticlo.github.io/rc-dock/interfaces/layoutprops.html#defaultlayout)**
- set layout object in **[DockLayout.defaultLayout](https://ticlo.github.io/rc-dock/interfaces/docklayout.layoutprops.html#defaultlayout)**
- use as **controlled layout**
- set layout object in **[DockLayout.layout](https://ticlo.github.io/rc-dock/interfaces/layoutprops.html#layout)**
- set layout object in **[DockLayout.layout](https://ticlo.github.io/rc-dock/interfaces/docklayout.layoutprops.html#layout)**

@@ -62,3 +62,3 @@

### LayoutData [🗎](https://ticlo.github.io/rc-dock/interfaces/layoutdata.html)
### LayoutData [🗎](https://ticlo.github.io/rc-dock/interfaces/dockdata.layoutdata.html)
| Property | Type | Comments | Default |

@@ -69,3 +69,3 @@ | :---: | :---: | :---: | :---: |

### BoxData [🗎](https://ticlo.github.io/rc-dock/interfaces/boxdata.html)
### BoxData [🗎](https://ticlo.github.io/rc-dock/interfaces/dockdata.boxdata.html)
a box is the layout element that contains other boxes or panels

@@ -78,3 +78,3 @@

### PanelData [🗎](https://ticlo.github.io/rc-dock/interfaces/paneldata.html)
### PanelData [🗎](https://ticlo.github.io/rc-dock/interfaces/dockdata.paneldata.html)
a panel is a visiaul container with tabs button in the title bar

@@ -88,3 +88,3 @@

### TabData [🗎](https://ticlo.github.io/rc-dock/interfaces/tabdata.html)
### TabData [🗎](https://ticlo.github.io/rc-dock/interfaces/dockdata.tabdata.html)
| Property | Type | Comments | Default |

@@ -102,3 +102,3 @@ | :---: | :---: | :---: | :---: |

### saveLayout [🗎](https://ticlo.github.io/rc-dock/interfaces/layoutprops.html)
### saveLayout [🗎](https://ticlo.github.io/rc-dock/interfaces/docklayout.layoutprops.html)
save layout

@@ -110,3 +110,3 @@

### loadLayout [🗎](https://ticlo.github.io/rc-dock/interfaces/layoutprops.html)
### loadLayout [🗎](https://ticlo.github.io/rc-dock/interfaces/docklayout.layoutprops.html)
load layout

@@ -118,10 +118,10 @@

### dockMove [🗎](https://ticlo.github.io/rc-dock/classes/docklayout.html#dockmove)
move a tab or a panel, if source or target is already in the layout, you can use the find method to get it with id first
### dockMove [🗎](https://ticlo.github.io/rc-dock/classes/docklayout.docklayout-1.html#dockmove)
move a tab or a panel, if source is already in the layout, you can use the find method to get it with id first
```typescript
dockMove(source: TabData | PanelData, target: TabData | PanelData | BoxData, direction: DropDirection): void;
dockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData, direction: DropDirection): void;
```
### find [🗎](https://ticlo.github.io/rc-dock/classes/docklayout.html#find)
### find [🗎](https://ticlo.github.io/rc-dock/classes/docklayout.docklayout-1.html#find)
find PanelData or TabData by id

@@ -133,3 +133,3 @@

### updateTab [🗎](https://ticlo.github.io/rc-dock/classes/docklayout.html#updatetab)
### updateTab [🗎](https://ticlo.github.io/rc-dock/classes/docklayout.docklayout-1.html#updatetab)
update a tab with new TabData

@@ -136,0 +136,0 @@

8

src/DockData.ts

@@ -280,3 +280,7 @@ import React from 'react';

| 'maximize'
| 'new-window';
| 'new-window'
| 'move' // dockbox or float panel moved, or float panel resized
| 'active' // become active tab
| 'update' // tab updated with updateTab
;

@@ -301,3 +305,3 @@ export interface DockContext {

*/
onSilentChange(currentTabId?: string): void;
onSilentChange(currentTabId?: string, direction?: DropDirection): void;

@@ -304,0 +308,0 @@ /**

src/DockBox.tsx

Sorry, the diff of this file is not supported yet

src/DockLayout.tsx

Sorry, the diff of this file is not supported yet

src/DockPanel.tsx

Sorry, the diff of this file is not supported yet

src/DockTabs.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc