Skip to content

Commit

Permalink
Upgrade dependencies and remove all code-imports of Blueprint.
Browse files Browse the repository at this point in the history
Fixes #163 #138
  • Loading branch information
nomcopter committed May 2, 2021
1 parent a80ebd4 commit 602b0d5
Show file tree
Hide file tree
Showing 8 changed files with 366 additions and 323 deletions.
1 change: 1 addition & 0 deletions .idea/react-mosaic.iml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

43 changes: 22 additions & 21 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,21 @@
"fix": "npm-run-all -lp fix:**",
"fix:format": "yarn run prettier:run --write",
"fix:lint": "yarn run test:lint --fix",
"version": "npm run bundle && git add -A docs/"
"version": "yarn run bundle && git add -A docs/"
},
"devDependencies": {
"@blueprintjs/core": "^3.15.1",
"@blueprintjs/icons": "^3.9.0",
"@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",
"@types/html-webpack-plugin": "2.30.2",
"@types/lodash": "^4.14.134",
"@types/mocha": "^5.2.7",
"@types/prop-types": "^15.7.1",
"@types/react": "^16.9.35",
"@types/react-dnd-multi-backend": "^5.0.0",
"@types/react-dom": "^16.9.8",
"@types/react": "^17.0.4",
"@types/react-dnd-multi-backend": "^6.0.0",
"@types/react-dom": "^17.0.3",
"@types/react-hot-loader": "^3.0.6",
"@types/uuid": "^3.4.4",
"@types/webpack": "^3.8.18",
Expand All @@ -59,35 +59,36 @@
"mocha": "^7.1.0",
"mocha-junit-reporter": "^1.23.3",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"prettier": "^2.2.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",
"ts-loader": "^3.5.0",
"ts-node": "^8.10.1",
"tslint": "^6.1.2",
"tslint": "^6.1.3",
"tslint-config-prettier": "^1.18.0",
"tslint-plugin-prettier": "^2.3.0",
"tslint-react": "^5.0.0",
"typescript": "~3.9.3",
"typescript": "^4.2.4",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.5"
"webpack-dev-server": "^2.11.5",
"yarn-deduplicate": "^3.1.0"
},
"dependencies": {
"classnames": "^2.2.6",
"immutability-helper": "^3.0.1",
"lodash": "^4.17.11",
"classnames": "^2.3.1",
"immutability-helper": "^3.1.1",
"lodash": "^4.17.21",
"prop-types": "^15.7.2",
"react-dnd": "^10.0.2",
"react-dnd-html5-backend": "^10.0.2",
"react-dnd-multi-backend": "^5.0.0",
"react-dnd-touch-backend": "^10.0.2",
"uuid": "^3.3.2"
"react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0",
"react-dnd-multi-backend": "^6.0.2",
"react-dnd-touch-backend": "^14.0.0",
"uuid": "^3.4.0"
},
"peerDependencies": {
"react": "^16.3.0"
"react": "16 - 18"
},
"keywords": [
"ui",
Expand Down
5 changes: 2 additions & 3 deletions src/Mosaic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import countBy from 'lodash/countBy';
import keys from 'lodash/keys';
import pickBy from 'lodash/pickBy';
import React from 'react';
import { DndProvider } from 'react-dnd';
import MultiBackend from 'react-dnd-multi-backend';
import { DndProvider } from 'react-dnd-multi-backend';
import HTML5ToTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';
import { v4 as uuid } from 'uuid';

Expand Down Expand Up @@ -209,7 +208,7 @@ export class MosaicWithoutDragDropContext<T extends MosaicKey = string> extends
export class Mosaic<T extends MosaicKey = string> extends React.PureComponent<MosaicProps<T>> {
render() {
return (
<DndProvider backend={MultiBackend} options={HTML5ToTouch}>
<DndProvider options={HTML5ToTouch}>
<MosaicWithoutDragDropContext<T> {...this.props} />
</DndProvider>
);
Expand Down
2 changes: 1 addition & 1 deletion src/MosaicWindow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export class InternalMosaicWindow<T extends MosaicKey> extends React.Component<
</div>
<div className="mosaic-window-body">
<h4>{title}</h4>
<OptionalBlueprint.Icon iconSize={72} icon="application" />
<OptionalBlueprint.Icon className="default-preview-icon" size="large" icon="APPLICATION" />
</div>
</div>
),
Expand Down
2 changes: 1 addition & 1 deletion src/MosaicZeroState.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export class MosaicZeroState<T extends MosaicKey> extends React.PureComponent<Mo
return (
<div className={classNames('mosaic-zero-state', OptionalBlueprint.getClasses('NON_IDEAL_STATE'))}>
<div className={OptionalBlueprint.getClasses('NON_IDEAL_STATE_VISUAL')}>
<OptionalBlueprint.Icon iconSize={120} icon="applications" />
<OptionalBlueprint.Icon className="default-zero-state-icon" size="large" icon="APPLICATIONS" />
</div>
<h4 className={OptionalBlueprint.getClasses('HEADING')}>No Windows Present</h4>
<div>
Expand Down
49 changes: 20 additions & 29 deletions src/util/OptionalBlueprint.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,29 @@
import { Classes as ClassesImport, IIconProps } from '@blueprintjs/core';
import { IconNames as IconNamesTypeImport } from '@blueprintjs/icons';
import type { Classes } from '@blueprintjs/core';
import type { IconNames } from '@blueprintjs/icons';
import classNames from 'classnames';
import _ from 'lodash';
import * as React from 'react';

export namespace OptionalBlueprint {
type Classes = typeof ClassesImport;
let Classes: Classes | undefined;
export let Icon: React.ReactType<IIconProps>;
type IconNames = typeof IconNamesTypeImport;
let IconNames: IconNames | undefined;
try {
// Webpack is quieter about these errors
// https://github.com/nomcopter/react-mosaic/issues/109
require.resolve('@blueprintjs/core');
require.resolve('@blueprintjs/icons');
({ Classes, Icon } = require('@blueprintjs/core'));
({ IconNames } = require('@blueprintjs/icons'));
} catch {
Icon = ({ icon }: IIconProps) => <span>{icon}</span>;
}
const BP_NAMESPACE = 'bp3';
export const Icon = ({
icon,
className,
size = 'standard',
}: {
icon: keyof typeof IconNames;
className?: string;
size?: 'standard' | 'large';
}) => <span className={classNames(className, getIconClass(icon), `${BP_NAMESPACE}-icon-${size}`)} />;

type BlueprintClass = { [K in keyof Classes]: Classes[K] extends string ? K : never }[keyof Classes];
type BlueprintClass = {
[K in keyof typeof Classes]: typeof Classes[K] extends string ? K : never;
}[keyof typeof Classes];
export function getClasses(...names: BlueprintClass[]): string {
if (Classes) {
return names.map((name) => Classes![name]).join(' ');
}

return '';
return names.map((name) => `${BP_NAMESPACE}-${_.kebabCase(name)}`).join(' ');
}

export function getIconClass(iconName: keyof IconNames): string {
if (Classes && IconNames) {
return Classes.iconClass(IconNames[iconName]);
}

return '';
export function getIconClass(iconName: keyof typeof IconNames): string {
return `${BP_NAMESPACE}-icon-${_.kebabCase(iconName)}`;
}
}
8 changes: 8 additions & 0 deletions styles/blueprint-theme.less
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
background: @light-gray3;
border-radius: @pt-border-radius;
box-shadow: @pt-elevation-shadow-0;

.default-zero-state-icon {
font-size: 120px;
}
}

.mosaic-split:hover {
Expand Down Expand Up @@ -61,6 +65,10 @@
}
}

.default-preview-icon {
font-size: 72px;
}

.mosaic-window-body {
border-top-width: 0;
background: @pt-app-background-color;
Expand Down
Loading

0 comments on commit 602b0d5

Please sign in to comment.