		{
		"name": "rc-dock",
		"version": "0.0.1",
		"version": "0.1.0",
		"description": "ticlo dock panels",
		@@ -15,15 +15,18 @@ "repository": {
		"dependencies": {
		"rc-tabs": "^9.6.1",
		"react": "^16.8.3",
		"react-dom": "^16.8.3"
		"classnames": "^2.2.6",
		"rc-tabs": "^9.6.3",
		"react": "^16.8.5",
		"react-dom": "^16.8.5"
		},
		"devDependencies": {
		"@babel/core": "^7.4.0",
		"@babel/plugin-proposal-class-properties": "^7.4.0",
		"@babel/preset-env": "^7.4.2",
		"@types/chai": "^4.1.7",
		"@types/classnames": "^2.2.7",
		"@types/karma": "^3.0.2",
		"@types/mocha": "^5.2.5",
		"@types/node": "^11.10.4",
		"@types/react": "^16.8.6",
		"@types/react-dom": "^16.8.2",
		"babel-core": "^6.26.3",
		"babel-preset-env": "^1.7.0",
		"@types/node": "^11.11.6",
		"@types/react": "^16.8.8",
		"@types/react-dom": "^16.8.3",
		"chai": "^4.2.0",
		@@ -39,13 +42,15 @@ "coveralls": "^3.0.3",
		"nyc": "^13.1.0",
		"parcel-bundler": "^1.10.3",
		"parcel-bundler": "^1.12.3",
		"simulate-event": "git+https://github.com/ticlo/simulate-event.git",
		"ts-node": "^8.0.2",
		"tslint": "^5.13.1",
		"tslint": "^5.14.0",
		"tslint-react": "^3.6.0",
		"typescript": "^3.3.3333"
		"typedoc": "^0.14.2",
		"typescript": "^3.3.4000"
		},
		"scripts": {
		"example": "parcel example/*.html --open --out-dir temp --no-source-maps",
		"build-dock-less": "lessc --js style/index.less dist/rc-dock.css"
		"example": "parcel example/*.html --open --out-dir temp --no-source-maps --no-hmr",
		"build-dock-less": "lessc --js style/index.less dist/rc-dock.css",
		"build-doc": "typedoc --options ./typedocconfig.js"
		}
		}

src/DockData.ts

		import React from 'react';

		interface MinSize {
		interface DockDataBase {
		minWidth?: number;
		@@ -8,13 +8,15 @@ minHeight?: number;

		export interface Box extends MinSize {
		key: string;
		size: number;
		children: (Box \| Panel)[];
		export type DockMode = 'horizontal' \| 'vertical' \| 'float';

		export interface BoxData extends DockDataBase {
		id?: string \| number;
		parent?: BoxData;
		size?: number;
		mode?: DockMode;
		children: (BoxData \| PanelData)[];
		}


		interface TabFeature extends MinSize {
		group?: string;
		export interface TabGroup {
		floatable?: boolean;
		closable?: boolean;
		multiTabs?: boolean;
		@@ -24,14 +26,68 @@ // when tabs are locked, you can only drag the whole panel
		panelClass?: string;
		animated?: boolean;
		}

		export interface Tab extends TabFeature {
		key: string;
		render: React.ReactNode \| (() => React.ReactNode);
		export interface TabData extends DockDataBase {
		id?: string;
		parent?: PanelData;
		title: string;
		content: React.ReactElement \| (() => React.ReactElement);
		closable?: boolean;
		cached?: boolean;
		group: TabGroup;
		}

		export interface Panel {
		key: string;
		size: number;
		tabs: Tab[];
		default?: TabFeature;
		export interface PanelData extends DockDataBase {
		id?: string \| number;
		parent?: BoxData;
		activeId?: string;
		tabs: TabData[];
		group: TabGroup;

		// docked only
		size?: number;
		panelLocked?: boolean; // panel won't disappear even when all children are gone

		// float mode only
		x?: number;
		y?: number;
		z?: number;
		w?: number;
		h?: number;
		}

		export interface LayoutData {
		dockbox?: BoxData;
		floatbox?: BoxData;
		}

		export type DropDirection =
		'left' \| 'right' \| 'bottom' \| 'top' \| 'middle' \| 'remove' \| 'before-tab' \| 'after-tab' \| 'float';

		export interface DockContext {
		/** @ignore */
		setDropRect(element: HTMLElement, direction?: DropDirection, source?: any, event?: MouseEvent): void;

		dockMove(source: TabData \| PanelData, target: TabData \| PanelData \| BoxData, direction: DropDirection): void;

		/** @ignore */
		nextFloatZIndex(current: number): number;
		}

		/** @ignore */
		let _idCount = 0;

		/** @ignore */
		export function nextId() {
		++_idCount;
		// if (_idCount >= Number.MAX_SAFE_INTEGER) {
		// }
		return `+${_idCount}`;
		}

		/** @ignore */
		export const DockContextType = React.createContext<DockContext>(null);
		/** @ignore */
		export const DockContextProvider = DockContextType.Provider;
		/** @ignore */
		export const DockContextConsumer = DockContextType.Consumer;

src/DragStore.ts

		@@ -5,8 +5,17 @@ let _scope: any;

		let _dragEndListened = false;

		export class DragStore {
		static dragStart(scope: any, element: HTMLElement, data: {[key: string]: any}) {
		static dragStart(scope: any, data: {[key: string]: any}, element?: any) {
		_scope = scope;
		_data = data;
		element.classList.add('dragging');
		document.addEventListener('dragend', DragStore.dragEnd);
		if (element instanceof HTMLElement) {
		element.classList.add('dragging');
		_draggingElement = element;
		}

		if (!_dragEndListened) {
		document.addEventListener('dragend', DragStore.dragEnd);
		_dragEndListened = true;
		}
		}
		@@ -24,4 +33,7 @@
		_data = null;
		_draggingElement.classList.remove('dragging');
		if (_draggingElement) {
		_draggingElement.classList.remove('dragging');
		_draggingElement = null;
		}
		}
		}

tsconfig.json

		@@ -12,16 +12,15 @@ {
		],
		"typeRoots": [
		"./typings",
		"./node_modules/@types"
		],
		"alwaysStrict": true,
		"noImplicitAny": true,
		"sourceMap": true
		"sourceMap": true,
		"declaration": true,
		"newLine": "lf",
		"outDir": "./lib"
		},
		"compileOnSave": true,
		"files": [
		"typings/rc-tabs.d.ts"
		],
		"include": [
		"src/*/",
		"tool/*/",
		"example/*/",
		"playground/*/"
		"src/*/"
		],
		@@ -28,0 +27,0 @@ "exclude": [

dist/rc-dock.css

example/divider.tsx

example/tabs.html

example/tabs.tsx

src/DockTab.tsx

typings/custom-typings.d.ts

typings/index.d.ts

src/index.ts→src/index.ts

example/divider.html