Skip to content

Commit 896e041

Browse files
aeagleaeagle
authored
Merge pull request #22 from aeagle/feature/react-hooks
Feature/react hooks
2 parents b55a67d + 542092e commit 896e041

25 files changed

+8979
-21067
lines changed

‎demo/.env.analyse

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
ANALYSE_BUNDLE=true

‎demo/config/webpack.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpack
2727
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
2828
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
2929
const postcssNormalize = require('postcss-normalize');
30+
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
31+
const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
3032

3133
// Source maps are resource heavy and can cause out of memory issue for large source files.
3234
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -272,6 +274,7 @@ module.exports = function(webpackEnv) {
272274
// Support React Native Web
273275
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
274276
'react-native': 'react-native-web',
277+
'react': path.resolve('./node_modules/react')
275278
},
276279
plugins: [
277280
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
@@ -475,6 +478,8 @@ module.exports = function(webpackEnv) {
475478
],
476479
},
477480
plugins: [
481+
new DuplicatePackageCheckerPlugin(),
482+
process.env.ANALYSE_BUNDLE === 'true' && new BundleAnalyzerPlugin(),
478483
new MonacoWebpackPlugin({
479484
// available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
480485
languages: ['typescript']

‎demo/package-lock.json

Lines changed: 8332 additions & 4845 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/package.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"css-loader": "2.1.1",
2525
"dotenv": "6.2.0",
2626
"dotenv-expand": "4.2.0",
27+
"env-cmd": "^9.0.3",
2728
"eslint": "^5.16.0",
2829
"eslint-config-react-app": "^4.0.1",
2930
"eslint-loader": "2.1.2",
@@ -53,7 +54,7 @@
5354
"postcss-normalize": "7.0.1",
5455
"postcss-preset-env": "6.6.0",
5556
"postcss-safe-parser": "4.0.1",
56-
"react": "^16.8.6",
57+
"react": "^16.9.0",
5758
"react-app-polyfill": "^1.0.1",
5859
"react-dev-utils": "^9.0.1",
5960
"react-dom": "^16.8.6",
@@ -70,14 +71,17 @@
7071
"typescript": "^3.5.3",
7172
"url-loader": "1.1.2",
7273
"webpack": "4.29.6",
74+
"webpack-bundle-analyser": "^1.4.0",
75+
"webpack-bundle-analyzer": "^3.4.1",
7376
"webpack-dev-server": "3.2.1",
7477
"webpack-manifest-plugin": "2.0.4",
7578
"workbox-webpack-plugin": "4.2.0"
7679
},
7780
"scripts": {
7881
"start": "node scripts/start.js",
7982
"build": "node scripts/build.js",
80-
"test": "node scripts/test.js"
83+
"test": "node scripts/test.js",
84+
"analyse": "env-cmd -f .env.analyse node scripts/build.js"
8185
},
8286
"eslintConfig": {
8387
"extends": "react-app"
@@ -144,5 +148,8 @@
144148
"presets": [
145149
"react-app"
146150
]
151+
},
152+
"devDependencies": {
153+
"duplicate-package-checker-webpack-plugin": "^3.0.0"
147154
}
148155
}

‎demo/src/docs/Intro.tsx

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,33 @@ import { Button, Icon } from 'antd';
44
export const Intro = () => {
55
return (
66
<>
7-
<p id="intro" style={{ fontWeight: 400, paddingTop: 30, paddingBottom: 0, fontSize: 28, color: '#777' }}>
7+
<p id="intro" style={{ fontWeight: 400, paddingTop: 30, paddingBottom: 0, fontSize: 28, color: '#777' }}>
88
React Spaces allow you to divide a page or container into nestable, anchored, scrollable and resizable spaces.
9-
</p>
9+
</p>
1010

1111
<div className="mobile" style={{ marginBottom: 15 }}>
1212
<Button type="primary" onClick={() => window.location.href = 'https://github.com/aeagle/react-spaces'}><Icon type="github" /> View on GitHub</Button>
1313
&nbsp; &nbsp;
1414
<img style={{ position: 'relative', top: -2 }} alt="NPM version" src="https://img.shields.io/npm/v/react-spaces.svg" />
1515
</div>
1616

17-
<p>
18-
<h2>Features</h2>
17+
<h2>Features</h2>
1918

20-
<ul>
21-
<li>
22-
No styling to achieve simple or complex layouts.
23-
</li>
24-
<li>
25-
Spaces know how to behave in relation to each other and resize accordingly.
26-
</li>
27-
<li>
28-
Spaces don't have any visual element to them (even padding or margins). You can fill them with whatever you want.
29-
</li>
30-
</ul>
31-
</p>
19+
<ul>
20+
<li>
21+
No styling to achieve simple or complex layouts.
22+
</li>
23+
<li>
24+
Spaces know how to behave in relation to each other and resize accordingly.
25+
</li>
26+
<li>
27+
Spaces don't have any visual element to them (even padding or margins). You can fill them with whatever you want.
28+
</li>
29+
</ul>
3230

33-
<p>
34-
<img src="https://www.allaneagle.com/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
35-
</p>
31+
<p>
32+
<img src="https://www.allaneagle.com/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
33+
</p>
3634
</>
3735
)
3836
}

‎demo/src/docs/KnownIssues.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@ export const KnownIssues = () => {
66
<h2 id="issues">Known issues / limitations</h2>
77

88
<ul>
9+
<li>
10+
The components in <strong>v0.1.13</strong> have been changed to use React Hooks. This can cause problems if there are
11+
multiple versions of React loaded. If you are using webpack you can add to your webpack config:
12+
13+
<pre style={{ marginTop: 15 }}>
14+
{`alias: { 'react': path.resolve('./node_modules/react') }`}
15+
</pre>
16+
17+
This will ensure that all references to React resolve to the same version.
18+
</li>
919
<li>
1020
Rendering an anchored horizontal space and an anchored vertical space within the same parent space will cause a gap
1121
to appear in the corner where the two anchored spaces meet. You can workaround this by using nested <strong>&lt;Fill /&gt;</strong>

‎demo/src/docs/Try.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const Try: React.FC = () => {
55
<>
66
<h2 id="try">Try for yourself</h2>
77

8-
<iframe src="https://codesandbox.io/embed/react-shapes-ml4kl?fontsize=14" title="react-shapes" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style={{ width:'100%', maxWidth: 1000, height: 500, border: 0, borderRadius: 4, overflow: 'hidden' }} sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
8+
{/* <iframe src="https://codesandbox.io/embed/react-shapes-ml4kl?fontsize=14" title="react-shapes" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style={{ width:'100%', maxWidth: 1000, height: 500, border: 0, borderRadius: 4, overflow: 'hidden' }} sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe> */}
99
</>
1010
)
1111
}

‎demo/src/docs/VersionHistory.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,17 @@ export const VersionHistory = () => {
55
<>
66
<h2 id="changes">Version history</h2>
77

8+
<div>
9+
<h3>0.1.13</h3>
10+
<ul>
11+
<li>
12+
Refactored spaces as functional component using hooks.
13+
</li>
14+
<li>
15+
Fixed className type on &lt;ViewPort /&gt; component.
16+
</li>
17+
</ul>
18+
</div>
819
<div>
920
<h3>0.1.11 - 0.1.12</h3>
1021
<ul>
@@ -19,8 +30,8 @@ export const VersionHistory = () => {
1930
<ul>
2031
<li>
2132
Added 'as' property to allow rendered DOM element to be specified (thanks to{" "}
22-
<a href="https://www.reddit.com/user/MahNonAnon/" target="_blank">u/MahNonAnon</a> and{" "}
23-
<a href="https://www.reddit.com/user/trevoreyre/" target="_blank">u/trevoreyre</a> on Reddit
33+
<a href="https://www.reddit.com/user/MahNonAnon/" rel="noopener noreferrer" target="_blank">u/MahNonAnon</a> and{" "}
34+
<a href="https://www.reddit.com/user/trevoreyre/" rel="noopener noreferrer" target="_blank">u/trevoreyre</a> on Reddit
2435
for suggestion of this).
2536
</li>
2637
<li>

‎demo/src/ui-demo/UI.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,14 @@
2222
.spaces-resize-handle {
2323
background-color: #333 !important;
2424
}
25+
26+
button {
27+
margin-right: 10px;
28+
border: none;
29+
background-color: #555;
30+
color: white;
31+
padding: 5px 15px;
32+
}
2533
}
2634

2735
.side-bar-container {

‎demo/src/ui-demo/UI.tsx

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,10 @@ import { CenterType } from 'react-spaces';
77

88
export const UI = () => {
99
return (
10-
<div className="ui-demo">
11-
<Space.ViewPort>
10+
<Space.ViewPort className="ui-demo">
1211
<Header />
1312
<Main />
1413
</Space.ViewPort>
15-
</div>
1614
)
1715
}
1816

@@ -28,18 +26,21 @@ const Header = () => {
2826
}
2927

3028
const Main = () => {
29+
const [ sidebarVisible, setSidebarVisible ] = React.useState(true);
30+
const [ sidebarWide, setSidebarWide ] = React.useState(false);
31+
3132
return (
3233
<Space.Fill style={{ backgroundColor: '#1E1E1E' }}>
3334
<Space.Fill>
3435
<IconPane />
35-
<SideBar />
36-
<Editor />
36+
<SideBar wide={sidebarWide} visible={sidebarVisible} />
37+
<Editor toggleSize={() => setSidebarWide(!sidebarWide)} toggleVisibility={() => setSidebarVisible(!sidebarVisible)} />
3738
</Space.Fill>
3839
</Space.Fill>
3940
)
4041
}
4142

42-
const Editor = () => {
43+
const Editor : React.FC<{ toggleVisibility: () => void, toggleSize: () => void }> = (props) => {
4344
const [ code, setCode ] = React.useState('import * as React from \'react\';\r\nimport * as Space from \'react-spaces\';\r\n\r\nexport const App = () => {\r\n <Space.ViewPort>\r\n <Space.Top size={30}>\r\n Hello!\r\n </Space.Top>\r\n <Space.Fill>\r\n World!\r\n </Space.Fill>\r\n </Space.ViewPort>\r\n}');
4445

4546
const options = {
@@ -61,7 +62,7 @@ const Editor = () => {
6162
theme="vs-dark" />
6263
</Space.Fill>
6364
</Space.Fill>
64-
<BottomPane />
65+
<BottomPane toggleSize={props.toggleSize} toggleVisibility={props.toggleVisibility} />
6566
</Space.Fill>
6667
)
6768
}
@@ -73,9 +74,10 @@ const IconPane = () => {
7374
)
7475
}
7576

76-
const SideBar = () => {
77+
const SideBar : React.FC<{ wide: boolean, visible: boolean }> = (props) => {
7778
return (
78-
<Space.LeftResizable order={2} className="side-bar" size={300} handleSize={2} overlayHandle={false} style={{ backgroundColor: '#252526' }}>
79+
props.visible ?
80+
<Space.LeftResizable order={2} className="side-bar" size={props.wide ? 500 : 300} handleSize={2} overlayHandle={false} style={{ backgroundColor: '#252526' }}>
7981
<SideBarPane order={1} title="Open editors" height={200}>
8082

8183
</SideBarPane>
@@ -85,7 +87,8 @@ const SideBar = () => {
8587
<SideBarPane fill={true} title="Outline">
8688

8789
</SideBarPane>
88-
</Space.LeftResizable>
90+
</Space.LeftResizable> :
91+
null
8992
)
9093
}
9194

@@ -117,9 +120,11 @@ const SideBarPaneInner: React.FC<{ title: string }> = (props) => {
117120
)
118121
}
119122

120-
const BottomPane = () => {
123+
const BottomPane : React.FC<{ toggleVisibility: () => void, toggleSize: () => void }> = (props) => {
121124
return (
122-
<Space.BottomResizable className="bottom-pane" size="25%" handleSize={2}>
125+
<Space.BottomResizable className="bottom-pane" size="25%" handleSize={2} centerContent={Space.CenterType.HorizontalVertical}>
126+
<button onClick={props.toggleVisibility}>Toggle sidebar visibility</button>
127+
<button onClick={props.toggleSize}>Toggle sidebar size</button>
123128
</Space.BottomResizable>
124129
)
125130
}

0 commit comments

Comments
 (0)