Skip to content

Commit ffb11aa

Browse files
GeoffCoxGeoffCox
committed
Added demo, fixed bugs
1 parent cc24fc9 commit ffb11aa

21 files changed

+5682
-226
lines changed

‎.vscode/launch.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "chrome",
9+
"request": "launch",
10+
"name": "Launch Chrome against localhost",
11+
"file": "${workspaceFolder}/demo/dist/index.html"
12+
}
13+
]
14+
}

‎demo/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
dist/

‎demo/.vscode/launch.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
8+
{
9+
"type": "chrome",
10+
"request": "launch",
11+
"name": "Launch Chrome against localhost",
12+
"url": "/dist/index.html",
13+
"webRoot": "${workspaceFolder}"
14+
}
15+
]
16+
}

‎demo/package-lock.json

+5,117
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/package.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "demo",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"build-dev": "webpack --config webpack.config.js --mode development",
8+
"build-prod": "webpack --config webpack.config.js --mode production"
9+
},
10+
"author": "",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"@types/react": "^16.9.36",
14+
"@types/react-dom": "^16.9.8",
15+
"awesome-typescript-loader": "^5.2.1",
16+
"html-webpack-plugin": "^4.3.0",
17+
"html-webpack-template": "^6.2.0",
18+
"source-map-loader": "^1.0.0",
19+
"typescript": "3.7.5",
20+
"webpack": "^4.43.0",
21+
"webpack-cli": "^3.3.11"
22+
},
23+
"dependencies": {
24+
"@geoffcox/react-splitter": "^1.0.0",
25+
"@types/styled-components": "4.1.8",
26+
"css-loader": "^3.5.3",
27+
"react": "^16.13.1",
28+
"react-dom": "^16.13.1",
29+
"react-measure": "^2.3.0",
30+
"style-loader": "^1.2.1",
31+
"styled-components": "^5.1.1"
32+
}
33+
}

‎demo/src/components/App.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import * as React from 'react';
2+
import styled, { css } from 'styled-components';
3+
import { DynamicPane } from './DynamicPane';
4+
5+
const fullDivCss = css`
6+
width: 100%;
7+
height: 100%;
8+
outline: none;
9+
overflow: hidden;
10+
`;
11+
12+
const Root = styled.div`
13+
${fullDivCss}
14+
display: grid;
15+
grid-template-rows: auto 1fr;
16+
grid-template-columns: 1fr;
17+
grid-template-areas: 'header' 'content';
18+
`;
19+
20+
const Header = styled.div`
21+
width: 100%;
22+
outline: none;
23+
overflow: hidden;
24+
grid-area: header;
25+
font-family: 'Consolas';
26+
padding: 10px;
27+
`;
28+
29+
const Content = styled.div`
30+
width: 100%;
31+
outline: none;
32+
overflow: hidden;
33+
grid-area: content;
34+
`;
35+
36+
export const App = () => {
37+
return (
38+
<Root>
39+
<Header>This demonstrates the @geoffcox/react-splitter. Click a button to split a view left | right or top / bottom.</Header>
40+
<Content>
41+
<DynamicPane />
42+
</Content>
43+
</Root>
44+
);
45+
};

‎demo/src/components/DynamicPane.tsx

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import * as React from 'react';
2+
import { LeftRightSplit, TopBottomSplit } from '@geoffcox/react-splitter';
3+
import styled, { css } from 'styled-components';
4+
5+
const fullDivCss = css`
6+
width: 100%;
7+
height: 100%;
8+
outline: none;
9+
overflow: hidden;
10+
`;
11+
12+
const Root = styled.div`
13+
${fullDivCss}
14+
display: grid;
15+
grid-template-rows: 1fr;
16+
grid-template-columns: 1fr;
17+
grid-template-areas: 'content';
18+
`;
19+
20+
const DemoActions = styled.div`
21+
display: flex;
22+
flex-direction: row;
23+
justify-content: center;
24+
align-content: center;
25+
align-items: center;
26+
outline: none;
27+
overflow: hidden;
28+
padding: 20px;
29+
background: aliceblue;
30+
margin: auto auto;
31+
`;
32+
33+
const DemoAction = styled.button`
34+
min-width: 150px;
35+
min-height: 25px;
36+
padding: 5px;
37+
margin: 5px;
38+
`;
39+
40+
export const DynamicPane = () => {
41+
const [split, setSplit] = React.useState<'LR' | 'TB' | undefined>(undefined);
42+
43+
const renderActions = () => {
44+
return (
45+
<DemoActions>
46+
<DemoAction onClick={() => setSplit('LR')}>Left | Right</DemoAction>
47+
<DemoAction onClick={() => setSplit('TB')}>Top / Bottom</DemoAction>
48+
</DemoActions>
49+
);
50+
};
51+
52+
const renderLR = () => {
53+
return (
54+
<LeftRightSplit initialLeftGridWidth='50%'>
55+
<DynamicPane />
56+
<DynamicPane />
57+
</LeftRightSplit>
58+
);
59+
};
60+
61+
const renderTB = () => {
62+
return (
63+
<TopBottomSplit initialTopGridHeight='50%'>
64+
<DynamicPane />
65+
<DynamicPane />
66+
</TopBottomSplit>
67+
);
68+
};
69+
70+
const renderLayout = () => {
71+
switch (split) {
72+
case 'TB':
73+
return renderTB();
74+
case 'LR':
75+
return renderLR();
76+
default:
77+
return renderActions();
78+
}
79+
};
80+
81+
return <Root>{renderLayout()}</Root>;
82+
};

‎demo/src/index.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as React from "react";
2+
import * as ReactDOM from "react-dom";
3+
import { App } from "./components/App";
4+
import "./stylesheet.css";
5+
6+
const appElement = document.getElementById("app");
7+
8+
// Creates an application
9+
const createApp = (AppComponent: typeof App) => {
10+
return <AppComponent />;
11+
};
12+
13+
// Initial rendering of the application
14+
ReactDOM.render(createApp(App), appElement);

‎demo/src/stylesheet.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
body {
2+
height: 100vh;
3+
position: absolute;
4+
top: 0;
5+
right: 0;
6+
bottom: 0;
7+
left: 0;
8+
overflow: hidden;
9+
padding: 0;
10+
margin: 0;
11+
border: '5px solid yellow';
12+
}
13+
14+
body,
15+
div {
16+
box-sizing: border-box;
17+
}
18+
19+
#app {
20+
position: relative;
21+
height: 100%;
22+
box-sizing: border-box;
23+
}
24+

‎demo/tsconfig.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"emitDecoratorMetadata": true,
4+
"experimentalDecorators": true,
5+
"jsx": "react",
6+
"module": "commonjs",
7+
"moduleResolution": "node",
8+
"outDir": "./dist/",
9+
"noFallthroughCasesInSwitch": true,
10+
"noImplicitReturns": true,
11+
"noUnusedLocals": true,
12+
"noUnusedParameters": true,
13+
"sourceMap": true,
14+
"strict": true,
15+
"target": "es6"
16+
},
17+
"include": ["./src/**/*"],
18+
"exclude": ["node_modules", "dist"]
19+
}

‎demo/webpack.config.js

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
const { join } = require("path");
2+
const HtmlWebpackPlugin = require("html-webpack-plugin");
3+
const HtmlWebpackTemplate = require("html-webpack-template");
4+
var webpack = require('webpack');
5+
6+
// package.json contains the version number of the dependencies
7+
// that we want to make external. Parsing the package.json
8+
// makes it automatic to keep the package version in sync with
9+
// the CDN URL used in the HtmlWebpackPlugin
10+
const packageJson = require(join(__dirname, 'package.json'));
11+
12+
// This is the object webpack looks at for configuration.
13+
// Webpack doesn't care about any other javascript in the file.
14+
// Because this is javascript, you can write functions to help build up the configuration.
15+
module.exports = {
16+
17+
// Tells webpack what kind of source maps to produce.
18+
// There are a lot of options, but I chose the standalone file option.
19+
devtool: "source-map",
20+
21+
// Tells webpack where start walking the dependencies to build a bundle.
22+
entry: {
23+
app: [
24+
join(__dirname, "src/index.tsx")
25+
]
26+
},
27+
28+
// When importing a module whose path matches one of the following, just
29+
// assume a corresponding global variable exists and use that instead.
30+
// This is important because it allows us to avoid bundling all of our
31+
// dependencies, which allows browsers to cache standard libraries like React once.
32+
externals: {
33+
"react": "React",
34+
"react-dom": "ReactDOM"
35+
},
36+
37+
// When the env is "development", this tells webpack to provide debuggable information in the source maps and turns off some optimizations.
38+
mode: process.env.NODE_ENV,
39+
40+
// Tells webpack how to run file transformation pipeline of webpack.
41+
// Awesome-typescript-loader will run on all typescript files.
42+
// Source-map-loader will run on the JS files.
43+
module: {
44+
rules: [
45+
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
46+
{ test: /\.tsx?$/, loaders: ["awesome-typescript-loader"] },
47+
48+
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
49+
{ enforce: "pre", test: /\.js?$/, loader: "source-map-loader" },
50+
51+
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
52+
]
53+
},
54+
55+
// Tells webpack not to touch __dirname and __filename.
56+
// If you run the bundle in node.js it falls back to these values of node.js.
57+
// https://github.com/webpack/webpack/issues/2010
58+
node: {
59+
__dirname: false,
60+
__filename: false
61+
},
62+
63+
// Tells webpack where to output the bundled javascript
64+
output: {
65+
filename: "index.js",
66+
path: join(__dirname, "dist")
67+
},
68+
69+
// Tells the HTML webpack plug-in to use a template and emit dist/index.html
70+
plugins: [
71+
new HtmlWebpackPlugin({
72+
title: "react-splitter demo",
73+
inject: false,
74+
template: HtmlWebpackTemplate,
75+
appMountId: "app",
76+
scripts: [
77+
`https://unpkg.com/react@${packageJson.dependencies['react']}/umd/react.production.min.js`,
78+
`https://unpkg.com/react-dom@${packageJson.dependencies['react-dom']}/umd/react-dom.production.min.js`,
79+
'index.js'
80+
]
81+
})
82+
],
83+
84+
// Tells webpack what file extesions it should look at.
85+
resolve: {
86+
extensions: [".ts", ".tsx", ".js", ".json"]
87+
}
88+
};

‎.gitignore ‎package/.gitignore

File renamed without changes.

0 commit comments

Comments
 (0)