Merge pull request #14 from palantir/support-multiple-mosaics

Support multiple mosaics

Author: nomcopter

.npmignore

@@ -2,16 +2,10 @@
 .editorconfig
 .gitignore
 .npmignore
-.npmrc
-.tsdrc
 circle.yml
-extra-typings.d.ts
 tsconfig*.json
-tsd.json
 dev/
 docs/
-scripts/
-typings/
 webpack.config*.js
 screencast.gif
 yarn.lock

README.md

@@ -30,7 +30,7 @@ This uses the excellent [Blueprint](http://blueprintjs.com/) React UI Toolkit to
 It is recommended to at least start developing with this theme. 
 To use it install Blueprint `yarn add @blueprintjs/core` and add its CSS to your page.
 
-See [BlueprintTheme.less](./src/BlueprintTheme.less) for an example of creating a theme.
+See [blueprint-theme.less](./styles/blueprint-theme.less) for an example of creating a theme.
 
 ### Examples
 

dev/ExampleApp.ts

@@ -32,8 +32,8 @@ import {
     MosaicZeroStateFactory,
     updateTree,
 } from '../src/index';
-import '../src/index.less';
 import { MosaicDirection } from '../src/types';
+import '../styles/index.less';
 import './example.less';
 
 const { div, h1, a, button, span } = React.DOM;

dev/example.less

@@ -38,7 +38,7 @@ html, body, #app, .react-mosaic-example-app {
     color: @white;
   }
 
-  .mosaic-root {
+  > .mosaic-root {
     height: ~"calc(100% - 50px)";
   }
 }

package.json

@@ -17,7 +17,7 @@
     "docs": "rm -rf docs/ && webpack",
     "test": "tslint --project tsconfig.json && mocha --opts test/mocha.opts 'test/*.ts'",
     "lib.compile.ts": "tsc -p tsconfig-build.json",
-    "lib.compile.less": " lessc --source-map src/index.less react-mosaic-component.css",
+    "lib.compile.less": " lessc --source-map styles/index.less react-mosaic-component.css",
     "lib.remove.type.references": "replace '^/// <reference.+?\\n' '' lib -r --include='*.d.ts'"
   },
   "devDependencies": {
@@ -30,10 +30,11 @@
     "@types/lodash": "^4.14.43",
     "@types/mocha": "^2.2.33",
     "@types/pure-render-decorator": "^0.2.27",
-    "@types/react": "^0.14.55",
+    "@types/react": "^15.0.23",
     "@types/react-dnd": "^2.0.31",
     "@types/react-dnd-html5-backend": "^2.1.6",
-    "@types/react-dom": "^0.14.19",
+    "@types/react-dom": "^15.5.0",
+    "@types/uuid": "^2.0.29",
     "chai": "^3.5.0",
     "css-loader": "^0.26.1",
     "file-loader": "^0.9.0",
@@ -66,7 +67,8 @@
     "lodash": "^4.17.2",
     "pure-render-decorator": "^1.2.1",
     "react-dnd": "^2.1.4",
-    "react-dnd-html5-backend": "^2.1.2"
+    "react-dnd-html5-backend": "^2.1.2",
+    "uuid": "^3.0.1"
   },
   "peerDependencies": {
     "react": "^15.0.0 || ^0.14.0"

src/Mosaic.ts

@@ -20,12 +20,14 @@ import * as PureRenderDecorator from 'pure-render-decorator';
 import * as React from 'react';
 import { DragDropContext } from 'react-dnd';
 import HTML5 from 'react-dnd-html5-backend';
-import { MosaicActionsPropType, MosaicContext, MosaicRootActions } from './contextTypes';
+import { v4 as uuid } from 'uuid';
+import { MosaicContext, MosaicRootActions } from './contextTypes';
+import { MosaicDropTargetPosition } from './internalTypes';
 import { MosaicWindowDropTarget } from './MosaicDropTarget';
 import { MosaicTile } from './MosaicTile';
 import { createExpandUpdate, createHideUpdate, createRemoveUpdate, updateTree } from './mosaicUpdates';
 import { MosaicZeroStateFactory } from './MosaicZeroState';
-import { MosaicDropTargetPosition, MosaicNode, MosaicPath, MosaicUpdate, TileRenderer } from './types';
+import { MosaicNode, MosaicPath, MosaicUpdate, TileRenderer } from './types';
 
 const { div } = React.DOM;
 const DEFAULT_EXPAND_PERCENTAGE = 70;
@@ -77,31 +79,32 @@ function isUncontrolled<T>(props: MosaicProps<T>): props is MosaicUncontrolledPr
     return (props as MosaicUncontrolledProps<T>).initialValue != null;
 }
 
-interface State<T> {
+export interface MosaicState<T> {
     currentNode: MosaicNode<T> | null;
+    mosaicId: string;
 }
 
 @(DragDropContext(HTML5) as ClassDecorator)
 @PureRenderDecorator
-class MosaicComponentClass<T> extends React.Component<MosaicProps<T>, State<T>> {
+export class Mosaic<T> extends React.Component<MosaicProps<T>, MosaicState<T>> {
     static defaultProps = {
         onChange: () => void 0,
         resizeable: true,
         zeroStateView: MosaicZeroStateFactory(),
         className: 'mosaic-blueprint-theme',
     } as any;
 
-    static childContextTypes = {
-        mosaicActions: MosaicActionsPropType,
-    };
+    static childContextTypes = MosaicContext;
 
-    state: State<T> = {
+    state: MosaicState<T> = {
         currentNode: null,
+        mosaicId: uuid(),
     };
 
     getChildContext(): MosaicContext<T> {
         return {
             mosaicActions: this.actions,
+            mosaicId: this.state.mosaicId,
         };
     }
 
@@ -120,7 +123,7 @@ class MosaicComponentClass<T> extends React.Component<MosaicProps<T>, State<T>>
                     getPath: this.getPath,
                 }),
             div({ className: 'drop-target-container' },
-                _.values<string>(MosaicDropTargetPosition).map((position) =>
+                _.values<MosaicDropTargetPosition>(MosaicDropTargetPosition).map((position) =>
                     MosaicWindowDropTarget({
                         position,
                         path: [],
@@ -134,7 +137,6 @@ class MosaicComponentClass<T> extends React.Component<MosaicProps<T>, State<T>>
     componentWillReceiveProps(nextProps: MosaicProps<T>) {
         if (isUncontrolled(nextProps) &&
             nextProps.initialValue !== (this.props as MosaicUncontrolledProps<T>).initialValue) {
-
             this.setState({ currentNode: nextProps.initialValue });
         }
     }
@@ -194,11 +196,10 @@ class MosaicComponentClass<T> extends React.Component<MosaicProps<T>, State<T>>
             }]),
     };
 }
-export const Mosaic: React.ComponentClass<MosaicProps<any>> = MosaicComponentClass;
 
 // Factory that works with generics
 export function MosaicFactory<T>(props: MosaicProps<T> & React.Attributes, ...children: React.ReactNode[]) {
     const element: React.ReactElement<MosaicProps<T>> =
-        React.createElement(MosaicComponentClass as React.ComponentClass<MosaicProps<T>>, props, ...children);
+        React.createElement(Mosaic as React.ComponentClass<MosaicProps<T>>, props, ...children);
     return element;
 }

src/MosaicDropTarget.ts

@@ -18,7 +18,9 @@ import * as classNames from 'classnames';
 import * as PureRenderDecorator from 'pure-render-decorator';
 import * as React from 'react';
 import { ConnectDropTarget, DropTarget } from 'react-dnd';
-import { MosaicDragType, MosaicDropData, MosaicDropTargetPosition, MosaicPath } from './types';
+import { MosaicContext } from './contextTypes';
+import { MosaicDragItem, MosaicDropData, MosaicDropTargetPosition } from './internalTypes';
+import { MosaicDragType, MosaicPath } from './types';
 import DropTargetMonitor = __ReactDnd.DropTargetMonitor;
 
 const { div } = React.DOM;
@@ -31,28 +33,39 @@ export interface MosaicWindowDropTargetProps {
 interface DropTargetProps {
     connectDropTarget: ConnectDropTarget;
     isOver: boolean;
+    draggedMosaicId: string | undefined;
 }
 
 type Props = MosaicWindowDropTargetProps & DropTargetProps;
 
 const dropTarget = {
-    drop: (props: Props, _monitor: DropTargetMonitor): MosaicDropData => ({
-        path: props.path,
-        position: props.position,
-    }),
+    drop: (props: Props, monitor: DropTargetMonitor, component: MosaicWindowDropTargetClass): MosaicDropData => {
+        if (component.context.mosaicId === ((monitor.getItem() || {}) as MosaicDragItem).mosaicId) {
+            return {
+                path: props.path,
+                position: props.position,
+            };
+        } else {
+            return {};
+        }
+    },
 };
 
 @(DropTarget(MosaicDragType.WINDOW, dropTarget, (connect, monitor): DropTargetProps => ({
     connectDropTarget: connect.dropTarget(),
     isOver: monitor.isOver(),
+    draggedMosaicId: ((monitor.getItem() || {}) as MosaicDragItem).mosaicId,
 })) as ClassDecorator)
 @PureRenderDecorator
 class MosaicWindowDropTargetClass extends React.Component<Props, void> {
+    static contextTypes = MosaicContext;
+    context: MosaicContext<any>;
+
     render() {
-        const { position, isOver, connectDropTarget } = this.props;
+        const { position, isOver, connectDropTarget, draggedMosaicId } = this.props;
         return connectDropTarget(div({
             className: classNames('drop-target', position, {
-                'drop-target-hover': isOver,
+                'drop-target-hover': isOver && draggedMosaicId === this.context.mosaicId,
             }),
         }));
     }

src/MosaicZeroState.ts

@@ -27,7 +27,7 @@ export interface MosaicZeroStateProps<T> {
 }
 
 @PureRenderDecorator
-class MosaicZeroStateComponentClass<T> extends React.Component<MosaicZeroStateProps<T>, void> {
+export class MosaicZeroState<T> extends React.Component<MosaicZeroStateProps<T>, void> {
     context: MosaicContext<T>;
 
     static contextTypes = {
@@ -54,11 +54,10 @@ class MosaicZeroStateComponentClass<T> extends React.Component<MosaicZeroStatePr
             .then((node) => this.context.mosaicActions.replaceWith([], node))
             .catch(_.noop); // Swallow rejections (i.e. on user cancel)
 }
-export const MosaicZeroState: React.ComponentClass<MosaicZeroStateProps<any>> = MosaicZeroStateComponentClass;
 
 // Factory that works with generics
 export function MosaicZeroStateFactory<T>(props?: MosaicZeroStateProps<T> & React.Attributes, ...children: React.ReactNode[]) {
     const element: React.ReactElement<MosaicZeroStateProps<T>> = React.createElement(
-        MosaicZeroStateComponentClass as React.ComponentClass<MosaicZeroStateProps<T>>, props, ...children);
+        MosaicZeroState as React.ComponentClass<MosaicZeroStateProps<T>>, props, ...children);
     return element;
 }

src/contextTypes.ts

@@ -27,6 +27,7 @@ import { MosaicNode, MosaicPath, MosaicUpdate } from './types';
  */
 export interface MosaicContext<T> {
     mosaicActions: MosaicRootActions<T>;
+    mosaicId: string;
 }
 
 /**
@@ -122,13 +123,17 @@ export const MosaicWindowActionsPropType = React.PropTypes.shape({
  * Bundled PropTypes for convenience
  */
 
-export const MosaicTileContext = {
+export const MosaicContext = {
     mosaicActions: MosaicActionsPropType,
+    mosaicId: React.PropTypes.string.isRequired,
+};
+
+export const MosaicTileContext = {
+    ...MosaicContext,
     getMosaicPath: MosaicPathGetterPropType,
 };
 
 export const MosaicWindowContext = {
+    ...MosaicTileContext,
     mosaicWindowActions: MosaicWindowActionsPropType,
-    mosaicActions: MosaicActionsPropType,
-    getMosaicPath: MosaicPathGetterPropType,
 };

src/internalTypes.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2016 Palantir Technologies, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MosaicPath } from './types';
+
+export type MosaicDropTargetPosition = 'top' | 'bottom' | 'left' | 'right';
+export const MosaicDropTargetPosition = {
+    TOP: 'top' as 'top',
+    BOTTOM: 'bottom' as 'bottom',
+    LEFT: 'left' as 'left',
+    RIGHT: 'right' as 'right',
+};
+
+export interface MosaicDropData {
+    path?: MosaicPath;
+    position?: MosaicDropTargetPosition;
+}
+
+export interface MosaicDragItem {
+    mosaicId: string;
+}