Merge pull request #183 from nomcopter/support-bp-4

nomcopter · web-flow · commit 27ac54c9c87e · 2022-03-26T16:35:57.000-07:00
Support bp 4
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -9,14 +9,14 @@ references:
 jobs:
   build:
     docker:
-      - image: circleci/node:dubnium
+      - image: circleci/node:gallium
     working_directory: ~/react-mosaic
     steps:
       - checkout
       - run:
           name: Install Yarn
           command: |
-            curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.16.0
+            curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.22.18
             export PATH="$HOME/.yarn/bin:$PATH"
       - restore_cache:
           keys:
diff --git a/README.md b/README.md
@@ -199,6 +199,12 @@ export interface MosaicBaseProps<T extends MosaicKey> {
    * default: Random UUID
    */
   mosaicId?: string;
+  /**
+   * Make it possible to use different versions of Blueprint with `mosaic-blueprint-theme`
+   * Note: does not support updating after instantiation
+   * default: 'bp3'
+   */
+  blueprintNamespace?: string;
 }
 
 export interface MosaicControlledProps<T extends MosaicKey> extends MosaicBaseProps<T> {
diff --git a/demo/ExampleApp.tsx b/demo/ExampleApp.tsx
@@ -94,6 +94,7 @@ export class ExampleApp extends React.PureComponent<{}, ExampleAppState> {
             onChange={this.onChange}
             onRelease={this.onRelease}
             className={THEMES[this.state.currentTheme]}
+            blueprintNamespace="bp4"
           />
         </div>
       </React.StrictMode>
diff --git a/demo/example.less b/demo/example.less
@@ -1,6 +1,9 @@
 @import (reference) '~@blueprintjs/core/lib/less/variables';
 
-html, body, #app, .react-mosaic-example-app {
+html,
+body,
+#app,
+.react-mosaic-example-app {
   margin: 0;
   height: 100%;
   width: 100%;
@@ -38,7 +41,7 @@ html, body, #app, .react-mosaic-example-app {
   }
 
   > .mosaic {
-    height: ~"calc(100% - 50px)";
+    height: ~'calc(100% - 50px)';
   }
 
   .github-link {
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
   "scripts": {
     "build": "npm-run-all clean -lp build:**",
     "build:ts": "tsc -p tsconfig-build.json",
-    "build:less": "lessc --autoprefix=defaults --source-map styles/index.less react-mosaic-component.css",
+    "build:less": "lessc --autoprefix=defaults styles/index.less react-mosaic-component.css",
     "bundle": "rm -rf docs/ && webpack --config webpack/bundle.ts",
     "clean": "rm -rf lib/",
     "start": "webpack-dev-server --config webpack/hot.ts",
@@ -31,47 +31,47 @@
     "version": "yarn run bundle && git add -A docs/"
   },
   "devDependencies": {
-    "@blueprintjs/core": "^3.44.1",
-    "@blueprintjs/icons": "^3.26.0",
-    "@types/chai": "^4.1.7",
-    "@types/classnames": "^2.2.8",
-    "@types/dom4": "^2.0.1",
+    "@blueprintjs/core": "^4.0.1",
+    "@blueprintjs/icons": "^4.1.0",
+    "@types/chai": "^4.3.0",
+    "@types/classnames": "^2.3.1",
+    "@types/dom4": "^2.0.2",
     "@types/html-webpack-plugin": "2.30.2",
-    "@types/lodash": "^4.14.134",
+    "@types/lodash": "^4.14.180",
     "@types/mocha": "^5.2.7",
-    "@types/prop-types": "^15.7.1",
-    "@types/react": "^17.0.4",
-    "@types/react-dnd-multi-backend": "^6.0.0",
-    "@types/react-dom": "^17.0.3",
+    "@types/prop-types": "^15.7.4",
+    "@types/react": "^17.0.43",
+    "@types/react-dnd-multi-backend": "^6.0.1",
+    "@types/react-dom": "^17.0.14",
     "@types/react-hot-loader": "^3.0.6",
-    "@types/uuid": "^3.4.4",
-    "@types/webpack": "^3.8.18",
-    "chai": "^4.2.0",
+    "@types/uuid": "^3.4.10",
+    "@types/webpack": "^3.8.21",
+    "chai": "^4.3.6",
     "css-loader": "^0.28.11",
     "file-loader": "^1.1.11",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^2.30.1",
-    "jsdom": "^15.1.1",
+    "jsdom": "^15.2.1",
     "jsdom-global": "^3.0.2",
-    "less": "^3.9.0",
+    "less": "^3.13.1",
     "less-loader": "^5.0.0",
     "less-plugin-autoprefix": "^2.0.0",
-    "mocha": "^7.1.0",
+    "mocha": "^7.2.0",
     "mocha-junit-reporter": "^1.23.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.1",
+    "prettier": "^2.6.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-loader": "^3.1.3",
     "source-map-loader": "^0.2.4",
-    "style-loader": "^0.20.2",
+    "style-loader": "^0.20.3",
     "ts-loader": "^3.5.0",
-    "ts-node": "^8.10.1",
+    "ts-node": "^8.10.2",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.3.0",
     "tslint-react": "^5.0.0",
-    "typescript": "^4.2.4",
+    "typescript": "^4.6.3",
     "webpack": "^3.12.0",
     "webpack-dev-server": "^2.11.5",
     "yarn-deduplicate": "^3.1.0"
@@ -80,11 +80,11 @@
     "classnames": "^2.3.1",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
-    "prop-types": "^15.7.2",
-    "react-dnd": "^14.0.2",
-    "react-dnd-html5-backend": "^14.0.0",
+    "prop-types": "^15.8.1",
+    "react-dnd": "^14.0.5",
+    "react-dnd-html5-backend": "^14.1.0",
     "react-dnd-multi-backend": "^6.0.2",
-    "react-dnd-touch-backend": "^14.0.0",
+    "react-dnd-touch-backend": "^14.1.1",
     "uuid": "^3.4.0"
   },
   "peerDependencies": {
diff --git a/src/Mosaic.tsx b/src/Mosaic.tsx
@@ -51,6 +51,12 @@ export interface MosaicBaseProps<T extends MosaicKey> {
    * default: Random UUID
    */
   mosaicId?: string;
+  /**
+   * Make it possible to use different versions of Blueprint with `mosaic-blueprint-theme`
+   * Note: does not support updating after instantiation
+   * default: 'bp3'
+   */
+  blueprintNamespace?: string;
 }
 
 export interface MosaicControlledProps<T extends MosaicKey> extends MosaicBaseProps<T> {
@@ -88,6 +94,7 @@ export class MosaicWithoutDragDropContext<T extends MosaicKey = string> extends
     onChange: () => void 0,
     zeroStateView: <MosaicZeroState />,
     className: 'mosaic-blueprint-theme',
+    blueprintNamespace: 'bp3',
   };
 
   static getDerivedStateFromProps(
@@ -179,6 +186,7 @@ export class MosaicWithoutDragDropContext<T extends MosaicKey = string> extends
   private readonly childContext: MosaicContext<T> = {
     mosaicActions: this.actions,
     mosaicId: this.state.mosaicId,
+    blueprintNamespace: this.props.blueprintNamespace!,
   };
 
   private renderTree() {
diff --git a/src/MosaicDropTarget.tsx b/src/MosaicDropTarget.tsx
@@ -48,12 +48,12 @@ class MosaicDropTargetClass extends React.PureComponent<Props> {
   }
 }
 
-export const MosaicDropTarget = (DropTarget(
+export const MosaicDropTarget = DropTarget(
   MosaicDragType.WINDOW,
   dropTarget,
   (connect, monitor): DropTargetProps => ({
     connectDropTarget: connect.dropTarget(),
     isOver: monitor.isOver(),
     draggedMosaicId: ((monitor.getItem() || {}) as MosaicDragItem).mosaicId,
   }),
-)(MosaicDropTargetClass) as any) as React.ComponentType<MosaicDropTargetProps>;
+)(MosaicDropTargetClass) as any as React.ComponentType<MosaicDropTargetProps>;
diff --git a/src/MosaicWindow.tsx b/src/MosaicWindow.tsx
@@ -165,10 +165,10 @@ export class InternalMosaicWindow<T extends MosaicKey> extends React.Component<
             <button
               onClick={() => this.setAdditionalControlsOpen(!additionalControlsOpen)}
               className={classNames(
-                OptionalBlueprint.getClasses('BUTTON', 'MINIMAL'),
-                OptionalBlueprint.getIconClass('MORE'),
+                OptionalBlueprint.getClasses(this.context.blueprintNamespace, 'BUTTON', 'MINIMAL'),
+                OptionalBlueprint.getIconClass(this.context.blueprintNamespace, 'MORE'),
                 {
-                  [OptionalBlueprint.getClasses('ACTIVE')]: additionalControlsOpen,
+                  [OptionalBlueprint.getClasses(this.context.blueprintNamespace, 'ACTIVE')]: additionalControlsOpen,
                 },
               )}
             >
@@ -231,6 +231,7 @@ export class InternalMosaicWindow<T extends MosaicKey> extends React.Component<
   };
 
   private readonly childContext: MosaicWindowContext = {
+    blueprintNamespace: this.context.blueprintNamespace,
     mosaicWindowActions: {
       split: this.split,
       replaceWithNew: this.swap,
diff --git a/src/MosaicZeroState.tsx b/src/MosaicZeroState.tsx
@@ -16,15 +16,23 @@ export class MosaicZeroState<T extends MosaicKey> extends React.PureComponent<Mo
 
   render() {
     return (
-      <div className={classNames('mosaic-zero-state', OptionalBlueprint.getClasses('NON_IDEAL_STATE'))}>
-        <div className={OptionalBlueprint.getClasses('NON_IDEAL_STATE_VISUAL')}>
+      <div
+        className={classNames(
+          'mosaic-zero-state',
+          OptionalBlueprint.getClasses(this.context.blueprintNamespace, 'NON_IDEAL_STATE'),
+        )}
+      >
+        <div className={OptionalBlueprint.getClasses(this.context.blueprintNamespace, 'NON_IDEAL_STATE_VISUAL')}>
           <OptionalBlueprint.Icon className="default-zero-state-icon" size="large" icon="APPLICATIONS" />
         </div>
-        <h4 className={OptionalBlueprint.getClasses('HEADING')}>No Windows Present</h4>
+        <h4 className={OptionalBlueprint.getClasses(this.context.blueprintNamespace, 'HEADING')}>No Windows Present</h4>
         <div>
           {this.props.createNode && (
             <button
-              className={classNames(OptionalBlueprint.getClasses('BUTTON'), OptionalBlueprint.getIconClass('ADD'))}
+              className={classNames(
+                OptionalBlueprint.getClasses(this.context.blueprintNamespace, 'BUTTON'),
+                OptionalBlueprint.getIconClass(this.context.blueprintNamespace, 'ADD'),
+              )}
               onClick={this.replace}
             >
               Add New Window
diff --git a/src/buttons/ExpandButton.tsx b/src/buttons/ExpandButton.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { MosaicContext, MosaicRootActions, MosaicWindowContext } from '../contextTypes';
 import { OptionalBlueprint } from '../util/OptionalBlueprint';
-import { createDefaultToolbarButton, MosaicButtonProps } from './MosaicButton';
+import { DefaultToolbarButton, MosaicButtonProps } from './MosaicButton';
 
 export class ExpandButton extends React.PureComponent<MosaicButtonProps> {
   static contextType = MosaicWindowContext;
@@ -12,13 +12,16 @@ export class ExpandButton extends React.PureComponent<MosaicButtonProps> {
   render() {
     return (
       <MosaicContext.Consumer>
-        {({ mosaicActions }) =>
-          createDefaultToolbarButton(
-            'Expand',
-            classNames('expand-button', OptionalBlueprint.getIconClass('MAXIMIZE')),
-            this.createExpand(mosaicActions),
-          )
-        }
+        {({ mosaicActions }) => (
+          <DefaultToolbarButton
+            title="Expand"
+            className={classNames(
+              'expand-button',
+              OptionalBlueprint.getIconClass(this.context.blueprintNamespace, 'MAXIMIZE'),
+            )}
+            onClick={this.createExpand(mosaicActions)}
+          />
+        )}
       </MosaicContext.Consumer>
     );
   }
diff --git a/src/buttons/MosaicButton.tsx b/src/buttons/MosaicButton.tsx
@@ -1,24 +1,45 @@
 import classNames from 'classnames';
 import React from 'react';
+import { MosaicContext } from '../contextTypes';
 
 import { OptionalBlueprint } from '../util/OptionalBlueprint';
 
-export function createDefaultToolbarButton(
-  title: string,
-  className: string,
-  onClick: (event: React.MouseEvent<any>) => any,
-  text?: string,
-): React.ReactElement<any> {
+export const DefaultToolbarButton = ({
+  title,
+  className,
+  onClick,
+  text,
+}: {
+  title: string;
+  className: string;
+  onClick: (event: React.MouseEvent<any>) => any;
+  text?: string;
+}) => {
+  const { blueprintNamespace } = React.useContext(MosaicContext);
   return (
     <button
       title={title}
       onClick={onClick}
-      className={classNames('mosaic-default-control', OptionalBlueprint.getClasses('BUTTON', 'MINIMAL'), className)}
+      className={classNames(
+        'mosaic-default-control',
+        OptionalBlueprint.getClasses(blueprintNamespace, 'BUTTON', 'MINIMAL'),
+        className,
+      )}
     >
       {text && <span className="control-text">{text}</span>}
     </button>
   );
-}
+};
+
+/**
+ * @deprecated: see @DefaultToolbarButton
+ */
+export const createDefaultToolbarButton = (
+  title: string,
+  className: string,
+  onClick: (event: React.MouseEvent<any>) => any,
+  text?: string,
+) => <DefaultToolbarButton title={title} className={className} onClick={onClick} text={text} />;
 
 export interface MosaicButtonProps {
   onClick?: () => void;
diff --git a/src/buttons/RemoveButton.tsx b/src/buttons/RemoveButton.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { MosaicContext, MosaicRootActions, MosaicWindowContext } from '../contextTypes';
 import { OptionalBlueprint } from '../util/OptionalBlueprint';
-import { createDefaultToolbarButton, MosaicButtonProps } from './MosaicButton';
+import { DefaultToolbarButton, MosaicButtonProps } from './MosaicButton';
 
 export class RemoveButton extends React.PureComponent<MosaicButtonProps> {
   static contextType = MosaicWindowContext;
@@ -12,13 +12,13 @@ export class RemoveButton extends React.PureComponent<MosaicButtonProps> {
   render() {
     return (
       <MosaicContext.Consumer>
-        {({ mosaicActions }) =>
-          createDefaultToolbarButton(
-            'Close Window',
-            classNames('close-button', OptionalBlueprint.getIconClass('CROSS')),
-            this.createRemove(mosaicActions),
-          )
-        }
+        {({ mosaicActions, blueprintNamespace }) => (
+          <DefaultToolbarButton
+            title="Close Window"
+            className={classNames('close-button', OptionalBlueprint.getIconClass(blueprintNamespace, 'CROSS'))}
+            onClick={this.createRemove(mosaicActions)}
+          />
+        )}
       </MosaicContext.Consumer>
     );
   }
diff --git a/src/buttons/ReplaceButton.tsx b/src/buttons/ReplaceButton.tsx
@@ -4,17 +4,22 @@ import React from 'react';
 
 import { MosaicWindowContext } from '../contextTypes';
 import { OptionalBlueprint } from '../util/OptionalBlueprint';
-import { createDefaultToolbarButton, MosaicButtonProps } from './MosaicButton';
+import { DefaultToolbarButton, MosaicButtonProps } from './MosaicButton';
 
 export class ReplaceButton extends React.PureComponent<MosaicButtonProps> {
   static contextType = MosaicWindowContext;
   context!: MosaicWindowContext;
 
   render() {
-    return createDefaultToolbarButton(
-      'Replace Window',
-      classNames('replace-button', OptionalBlueprint.getIconClass('EXCHANGE')),
-      this.replace,
+    return (
+      <DefaultToolbarButton
+        title="Replace Window"
+        className={classNames(
+          'replace-button',
+          OptionalBlueprint.getIconClass(this.context.blueprintNamespace, 'EXCHANGE'),
+        )}
+        onClick={this.replace}
+      />
     );
   }
 
diff --git a/src/buttons/SplitButton.tsx b/src/buttons/SplitButton.tsx
diff --git a/src/contextTypes.ts b/src/contextTypes.ts
diff --git a/src/index.ts b/src/index.ts
diff --git a/src/util/OptionalBlueprint.tsx b/src/util/OptionalBlueprint.tsx
diff --git a/webpack/base.ts b/webpack/base.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -48,12 +48,12 @@ class MosaicDropTargetClass extends React.PureComponent<Props> {`
`48`	`48`	`}`
`49`	`49`	`}`
`50`	`50`
`51`		`-export const MosaicDropTarget = (DropTarget(`
	`51`	`+export const MosaicDropTarget = DropTarget(`
`52`	`52`	`MosaicDragType.WINDOW,`
`53`	`53`	`dropTarget,`
`54`	`54`	`(connect, monitor): DropTargetProps => ({`
`55`	`55`	`connectDropTarget: connect.dropTarget(),`
`56`	`56`	`isOver: monitor.isOver(),`
`57`	`57`	`draggedMosaicId: ((monitor.getItem() \|\| {}) as MosaicDragItem).mosaicId,`
`58`	`58`	`}),`
`59`		`-)(MosaicDropTargetClass) as any) as React.ComponentType<MosaicDropTargetProps>;`
	`59`	`+)(MosaicDropTargetClass) as any as React.ComponentType<MosaicDropTargetProps>;`