├── src
    ├── version.json
    ├── demo
    │   ├── logo.png
    │   ├── index.js
    │   ├── App.css
    │   ├── registerServiceWorker.js
    │   └── App.js
    └── lib
    │   ├── components
    │       ├── View
    │       │   ├── index.js
    │       │   └── View.jsx
    │       └── Layout
    │       │   ├── VerticalLayout.jsx
    │       │   ├── HorizontalLayout.jsx
    │       │   ├── index.js
    │       │   ├── Spacer.jsx
    │       │   ├── Separator.jsx
    │       │   ├── Panel.jsx
    │       │   └── Layout.jsx
    │   └── index.js
├── public
    ├── logo.png
    ├── favicon.ico
    ├── manifest.json
    ├── index.html
    └── logo.svg
├── .gitignore
├── config
    ├── jest
    │   ├── fileTransform.js
    │   └── cssTransform.js
    ├── polyfills.js
    ├── paths.js
    ├── env.js
    ├── webpackDevServer.config.js
    ├── webpack.config.prod.js
    ├── webpack.config.dev.js
    └── webpack.config.demo.js
├── scripts
    ├── test.js
    ├── start.js
    ├── build.js
    └── demo.js
├── LICENSE
├── package.json
└── README.md


/src/version.json:
--------------------------------------------------------------------------------
1 | {
2 |   "number": "0.9.0"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekros/nice-react-layout/HEAD/public/logo.png


--------------------------------------------------------------------------------
/src/demo/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekros/nice-react-layout/HEAD/src/demo/logo.png


--------------------------------------------------------------------------------
/src/lib/components/View/index.js:
--------------------------------------------------------------------------------
1 | import View from "./View.jsx";
2 | 
3 | export { View };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ekros/nice-react-layout/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/lib/components/Layout/VerticalLayout.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Layout from "./Layout.jsx";
3 | 
4 | const VerticalLayout = ({ ...props }) => {
5 | 	return <Layout {...props} orientation="vertical" />;
6 | };
7 | 
8 | export default VerticalLayout;
9 | 


--------------------------------------------------------------------------------
/src/demo/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import registerServiceWorker from './registerServiceWorker';
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'));
7 | registerServiceWorker();
8 | 


--------------------------------------------------------------------------------
/src/lib/components/Layout/HorizontalLayout.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Layout from "./Layout.jsx";
3 | 
4 | const HorizontalLayout = ({ ...props }) => {
5 | 	return <Layout {...props} orientation="horizontal" />;
6 | };
7 | 
8 | export default HorizontalLayout;
9 | 


--------------------------------------------------------------------------------
/src/demo/App.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   display: flex;
 3 |   justify-content: center;
 4 |   margin: 0;
 5 | }
 6 | 
 7 | li > a {
 8 |   color: gray;
 9 |   text-decoration: none;
10 | }
11 | 
12 | li > a.is-active {
13 |   color: black;
14 |   font-weight: bold;
15 | }
16 | 
17 | li > a:hover {
18 |   color: #222222;
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # production
 7 | /demo
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/src/lib/components/Layout/index.js:
--------------------------------------------------------------------------------
 1 | import Layout from "./Layout.jsx";
 2 | import HorizontalLayout from "./HorizontalLayout.jsx";
 3 | import VerticalLayout from "./VerticalLayout.jsx";
 4 | import Panel from "./Panel.jsx";
 5 | import Separator from "./Separator.jsx";
 6 | import Spacer from "./Spacer.jsx";
 7 | 
 8 | export {
 9 | 	Layout,
10 | 	HorizontalLayout,
11 | 	VerticalLayout,
12 | 	Panel,
13 | 	Separator,
14 | 	Spacer,
15 | };
16 | 


--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Layout,
 3 |   HorizontalLayout,
 4 |   VerticalLayout,
 5 |   Panel,
 6 |   Separator,
 7 |   Spacer,
 8 |   FormLayout,
 9 |   TableLayout
10 | } from "./components/Layout";
11 | import { View } from "./components/View";
12 | 
13 | export {
14 |   Layout,
15 |   HorizontalLayout,
16 |   VerticalLayout,
17 |   Panel,
18 |   Separator,
19 |   Spacer,
20 |   FormLayout,
21 |   TableLayout,
22 |   View,
23 | };
24 | 


--------------------------------------------------------------------------------
/src/lib/components/View/View.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | const View = ({ children, width, height }) => {
 5 |   const styles = {
 6 |     view: {
 7 |       width,
 8 |       height,
 9 |     }
10 |   };
11 |   return (
12 |     <div style={styles.view}>{children}</div>
13 |   );
14 | };
15 | 
16 | View.propTypes = {
17 |   children: PropTypes.node,
18 |   width: PropTypes.string,
19 |   height: PropTypes.string,
20 | };
21 | 
22 | View.defaultProps = {
23 |   width: "100vw",
24 |   height: "100vh",
25 | };
26 | 
27 | export default View;
28 | 


--------------------------------------------------------------------------------
/src/lib/components/Layout/Spacer.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import Panel from './Panel.jsx';
 4 | 
 5 | const Spacer = ({ orientation, size }) => {
 6 |   return (
 7 |     <Panel
 8 |       fixed
 9 |       width={orientation === 'horizontal' ? size : null}
10 |       height={orientation === 'vertical' ? size : null}
11 |       flex="none"
12 |     ></Panel>
13 |   );
14 | };
15 | 
16 | Spacer.propTypes = {
17 |   name: PropTypes.string,
18 |   orientation: PropTypes.string,
19 |   size: PropTypes.number,
20 | };
21 | 
22 | Spacer.defaultProps = {
23 |   name: "spacer",
24 | };
25 | 
26 | export default Spacer;
27 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 
18 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
19 | // We don't polyfill it in the browser--this is user's responsibility.
20 | if (process.env.NODE_ENV === 'test') {
21 |   require('raf').polyfill(global);
22 | }
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Eric Ros
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/lib/components/Layout/Separator.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | const Separator = ({
 5 | 	defaultDblClickPos,
 6 | 	disabled,
 7 | 	layoutIndex,
 8 | 	onSeparatorDoubleClick,
 9 | 	onSeparatorMouseDown,
10 | 	orientation,
11 | 	customCss,
12 | }) => {
13 | 	const styles = {
14 | 		horizontalSeparator: {
15 | 			display: "inline-block",
16 | 			width: "100%",
17 | 			height: "3px",
18 | 			background: "hsl(0, 0%, 80%)",
19 | 			cursor: disabled ? "not-allowed" : "row-resize",
20 | 		},
21 | 		verticalSeparator: {
22 | 			display: "inline-block",
23 | 			width: "3px",
24 | 			height: "100%",
25 | 			background: "hsl(0, 0%, 80%)",
26 | 			cursor: disabled ? "not-allowed" : "col-resize",
27 | 		},
28 | 	};
29 | 	return (
30 | 		<div
31 | 			style={Object.assign(
32 | 				{},
33 | 				orientation === "vertical"
34 | 					? styles.horizontalSeparator
35 | 					: styles.verticalSeparator,
36 | 				customCss
37 | 			)}
38 | 			onMouseDown={disabled ? null : () => onSeparatorMouseDown(layoutIndex)}
39 | 			onDoubleClick={
40 | 				disabled
41 | 					? null
42 | 					: () => onSeparatorDoubleClick(layoutIndex, defaultDblClickPos)
43 | 			}
44 | 		/>
45 | 	);
46 | };
47 | 
48 | Separator.propTypes = {
49 | 	id: PropTypes.string, // internal use only
50 | 	defaultDblClickPos: PropTypes.number,
51 | 	disabled: PropTypes.bool,
52 | 	layoutIndex: PropTypes.number,
53 | 	onSeparatorDoubleClick: PropTypes.func,
54 | 	onSeparatorMouseDown: PropTypes.func,
55 | 	orientation: PropTypes.string,
56 | 	customCss: PropTypes.object,
57 | };
58 | 
59 | Separator.defaultProps = {
60 | 	id: "separator"
61 | };
62 | 
63 | export default Separator;
64 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <!--
13 |       Notice the use of %PUBLIC_URL% in the tags above.
14 |       It will be replaced with the URL of the `public` folder during the build.
15 |       Only files inside the `public` folder can be referenced from the HTML.
16 | 
17 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
18 |       work correctly both with client-side routing and a non-root public URL.
19 |       Learn how to configure a non-root public URL by running `npm run build`.
20 |     -->
21 |     <title>Nice React Layout Demo</title>
22 |     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appDemoBuild: resolveApp('demo'),
46 |   appPublic: resolveApp('public'),
47 |   appHtml: resolveApp('public/index.html'),
48 |   appIndexJs: resolveApp('src/demo/index.js'), // CRL: Updated for demo purposes
49 |   appPackageJson: resolveApp('package.json'),
50 |   appSrc: resolveApp('src'),
51 |   yarnLockFile: resolveApp('yarn.lock'),
52 |   testsSetup: resolveApp('src/setupTests.js'),
53 |   appNodeModules: resolveApp('node_modules'),
54 |   publicUrl: getPublicUrl(resolveApp('package.json')),
55 |   servedPath: getServedPath(resolveApp('package.json')),
56 | 
57 |   // CRL: New paths for demo build
58 |   appDemoIndexJs: resolveApp('src/demo/index.js'),
59 |   appDemoSrc: resolveApp('src/demo'),
60 | 
61 |   // CRL: New paths for library
62 |   appLibIndexJs: resolveApp('src/lib/index.js'),
63 |   appLibSrc: resolveApp('src/lib'),
64 | };
65 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg
 3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 4 |    xmlns:cc="http://creativecommons.org/ns#"
 5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 6 |    xmlns:svg="http://www.w3.org/2000/svg"
 7 |    xmlns="http://www.w3.org/2000/svg"
 8 |    id="svg8"
 9 |    version="1.1"
10 |    viewBox="0 0 210 297"
11 |    height="297mm"
12 |    width="210mm">
13 |   <defs
14 |      id="defs2" />
15 |   <metadata
16 |      id="metadata5">
17 |     <rdf:RDF>
18 |       <cc:Work
19 |          rdf:about="">
20 |         <dc:format>image/svg+xml</dc:format>
21 |         <dc:type
22 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
23 |         <dc:title></dc:title>
24 |       </cc:Work>
25 |     </rdf:RDF>
26 |   </metadata>
27 |   <g
28 |      id="layer1">
29 |     <rect
30 |        style="stroke-width:10;fill:none;stroke:#000000;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-linejoin:bevel;paint-order:normal;stroke-linecap:butt"
31 |        y="10.219796"
32 |        x="11.492589"
33 |        height="185.48505"
34 |        width="185.48505"
35 |        id="rect4004" />
36 |     <path
37 |        id="path4817"
38 |        d="M 66.350223,13.424784 65.948191,194.10348"
39 |        style="fill:none;stroke:#000000;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
40 |     <path
41 |        id="path4819"
42 |        d="m 66.282842,148.66545 129.625718,0.26719"
43 |        style="fill:none;stroke:#000000;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
44 |     <rect
45 |        y="15.297917"
46 |        x="16.570711"
47 |        height="175.59608"
48 |        width="44.901279"
49 |        id="rect4825"
50 |        style="fill:#ff5666;stroke:none;stroke-width:10.13665676;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal;fill-opacity:1" />
51 |     <rect
52 |        y="15.297916"
53 |        x="71.093689"
54 |        height="128.55664"
55 |        width="121.34036"
56 |        id="rect4827"
57 |        style="fill:#00d5ff;stroke:none;stroke-width:10.07406044;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal;fill-opacity:1" />
58 |     <rect
59 |        y="152.94173"
60 |        x="70.826424"
61 |        height="37.952271"
62 |        width="121.34036"
63 |        id="rect4829"
64 |        style="fill:#a1b930;stroke:none;stroke-width:10.25213623;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal;fill-opacity:1" />
65 |   </g>
66 | </svg>
67 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "nice-react-layout",
  3 |   "version": "0.9.0",
  4 |   "description": "Create complex and nice Flexbox-based layouts, without even knowing what flexbox means",
  5 |   "repository": "git@github.com:ekros/nice-react-layout.git",
  6 |   "author": "Eric Ros <ericrosbh@gmail.com>",
  7 |   "main": "build/index.js",
  8 |   "homepage": "https://ekros.github.io/nice-react-layout",
  9 |   "scripts": {
 10 |     "start": "node scripts/start.js",
 11 |     "build": "node scripts/build.js",
 12 |     "demo": "node scripts/demo.js",
 13 |     "test": "node scripts/test.js --env=jsdom",
 14 |     "predeploy": "npm run build",
 15 |     "deploy": "gh-pages -d demo"
 16 |   },
 17 |   "license": "MIT",
 18 |   "dependencies": {
 19 |     "gh-pages": "^1.1.0",
 20 |     "react-scrollspy-nav": "^1.2.4",
 21 |     "react-sizeme": "^2.5.2",
 22 |     "underscore": "^1.9.1"
 23 |   },
 24 |   "devDependencies": {
 25 |     "autoprefixer": "7.1.6",
 26 |     "babel-core": "6.26.0",
 27 |     "babel-eslint": "7.2.3",
 28 |     "babel-jest": "20.0.3",
 29 |     "babel-loader": "7.1.2",
 30 |     "babel-preset-react-app": "^3.1.0",
 31 |     "babel-runtime": "6.26.0",
 32 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
 33 |     "chalk": "1.1.3",
 34 |     "copy-webpack-plugin": "^4.3.1",
 35 |     "css-loader": "0.28.7",
 36 |     "dotenv": "4.0.0",
 37 |     "eslint": "4.10.0",
 38 |     "eslint-config-react-app": "^2.0.1",
 39 |     "eslint-loader": "1.9.0",
 40 |     "eslint-plugin-flowtype": "2.39.1",
 41 |     "eslint-plugin-import": "2.8.0",
 42 |     "eslint-plugin-jsx-a11y": "5.1.1",
 43 |     "eslint-plugin-react": "7.4.0",
 44 |     "extract-text-webpack-plugin": "3.0.2",
 45 |     "file-loader": "1.1.5",
 46 |     "fs-extra": "3.0.1",
 47 |     "html-webpack-plugin": "2.29.0",
 48 |     "jest": "20.0.4",
 49 |     "object-assign": "4.1.1",
 50 |     "postcss-flexbugs-fixes": "3.2.0",
 51 |     "postcss-loader": "2.0.8",
 52 |     "promise": "8.0.1",
 53 |     "raf": "3.4.0",
 54 |     "react": "^16.6.0",
 55 |     "react-dev-utils": "^4.2.1",
 56 |     "react-dom": "^16.6.0",
 57 |     "style-loader": "0.19.0",
 58 |     "sw-precache-webpack-plugin": "0.11.4",
 59 |     "url-loader": "0.6.2",
 60 |     "webpack": "3.8.1",
 61 |     "webpack-dev-server": "2.9.4",
 62 |     "webpack-manifest-plugin": "1.3.2",
 63 |     "whatwg-fetch": "2.0.3"
 64 |   },
 65 |   "peerDependencies": {
 66 |     "react": "^16.6.0",
 67 |     "react-dom": "^16.6.0"
 68 |   },
 69 |   "jest": {
 70 |     "collectCoverageFrom": [
 71 |       "src/**/*.{js,jsx,mjs}"
 72 |     ],
 73 |     "setupFiles": [
 74 |       "<rootDir>/config/polyfills.js"
 75 |     ],
 76 |     "testMatch": [
 77 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
 78 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
 79 |     ],
 80 |     "testEnvironment": "node",
 81 |     "testURL": "http://localhost",
 82 |     "transform": {
 83 |       "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
 84 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 85 |       "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 86 |     },
 87 |     "transformIgnorePatterns": [
 88 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
 89 |     ],
 90 |     "moduleNameMapper": {
 91 |       "^react-native$": "react-native-web"
 92 |     },
 93 |     "moduleFileExtensions": [
 94 |       "web.js",
 95 |       "mjs",
 96 |       "js",
 97 |       "json",
 98 |       "web.jsx",
 99 |       "jsx",
100 |       "node"
101 |     ]
102 |   },
103 |   "babel": {
104 |     "presets": [
105 |       "react-app"
106 |     ]
107 |   },
108 |   "eslintConfig": {
109 |     "extends": "react-app"
110 |   }
111 | }
112 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/src/demo/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 |       } else {
 39 |         // Is not local host. Just register service worker
 40 |         registerValidSW(swUrl);
 41 |       }
 42 |     });
 43 |   }
 44 | }
 45 | 
 46 | function registerValidSW(swUrl) {
 47 |   navigator.serviceWorker
 48 |     .register(swUrl)
 49 |     .then(registration => {
 50 |       registration.onupdatefound = () => {
 51 |         const installingWorker = registration.installing;
 52 |         installingWorker.onstatechange = () => {
 53 |           if (installingWorker.state === 'installed') {
 54 |             if (navigator.serviceWorker.controller) {
 55 |               // At this point, the old content will have been purged and
 56 |               // the fresh content will have been added to the cache.
 57 |               // It's the perfect time to display a "New content is
 58 |               // available; please refresh." message in your web app.
 59 |               console.log('New content is available; please refresh.');
 60 |             } else {
 61 |               // At this point, everything has been precached.
 62 |               // It's the perfect time to display a
 63 |               // "Content is cached for offline use." message.
 64 |               console.log('Content is cached for offline use.');
 65 |             }
 66 |           }
 67 |         };
 68 |       };
 69 |     })
 70 |     .catch(error => {
 71 |       console.error('Error during service worker registration:', error);
 72 |     });
 73 | }
 74 | 
 75 | function checkValidServiceWorker(swUrl) {
 76 |   // Check if the service worker can be found. If it can't reload the page.
 77 |   fetch(swUrl)
 78 |     .then(response => {
 79 |       // Ensure service worker exists, and that we really are getting a JS file.
 80 |       if (
 81 |         response.status === 404 ||
 82 |         response.headers.get('content-type').indexOf('javascript') === -1
 83 |       ) {
 84 |         // No service worker found. Probably a different app. Reload the page.
 85 |         navigator.serviceWorker.ready.then(registration => {
 86 |           registration.unregister().then(() => {
 87 |             window.location.reload();
 88 |           });
 89 |         });
 90 |       } else {
 91 |         // Service worker found. Proceed as normal.
 92 |         registerValidSW(swUrl);
 93 |       }
 94 |     })
 95 |     .catch(() => {
 96 |       console.log(
 97 |         'No internet connection found. App is running in offline mode.'
 98 |       );
 99 |     });
100 | }
101 | 
102 | export function unregister() {
103 |   if ('serviceWorker' in navigator) {
104 |     navigator.serviceWorker.ready.then(registration => {
105 |       registration.unregister();
106 |     });
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const chalk = require('chalk');
 18 | const fs = require('fs-extra');
 19 | const webpack = require('webpack');
 20 | const config = require('../config/webpack.config.prod');
 21 | const paths = require('../config/paths');
 22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 23 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 24 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 25 | const printBuildError = require('react-dev-utils/printBuildError');
 26 | 
 27 | const measureFileSizesBeforeBuild =
 28 |   FileSizeReporter.measureFileSizesBeforeBuild;
 29 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 30 | 
 31 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 32 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 33 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 34 | 
 35 | // Warn and crash if required files are missing
 36 | if (!checkRequiredFiles([paths.appLibIndexJs])) { // CRL: Updated with library index file
 37 |   process.exit(1);
 38 | }
 39 | 
 40 | // First, read the current file sizes in build directory.
 41 | // This lets us display how much they changed later.
 42 | measureFileSizesBeforeBuild(paths.appBuild)
 43 |   .then(previousFileSizes => {
 44 |     // Remove all content but keep the directory so that
 45 |     // if you're in it, you don't end up in Trash
 46 |     fs.emptyDirSync(paths.appBuild);
 47 | 
 48 |     // Start the webpack build
 49 |     return build(previousFileSizes);
 50 |   })
 51 |   .then(
 52 |     ({ stats, previousFileSizes, warnings }) => {
 53 |       if (warnings.length) {
 54 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 55 |         console.log(warnings.join('\n\n'));
 56 |         console.log(
 57 |           '\nSearch for the ' +
 58 |             chalk.underline(chalk.yellow('keywords')) +
 59 |             ' to learn more about each warning.'
 60 |         );
 61 |         console.log(
 62 |           'To ignore, add ' +
 63 |             chalk.cyan('// eslint-disable-next-line') +
 64 |             ' to the line before.\n'
 65 |         );
 66 |       } else {
 67 |         console.log(chalk.green('Compiled successfully.\n'));
 68 |       }
 69 | 
 70 |       console.log('File sizes after gzip:\n');
 71 |       printFileSizesAfterBuild(
 72 |         stats,
 73 |         previousFileSizes,
 74 |         paths.appBuild,
 75 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 76 |         WARN_AFTER_CHUNK_GZIP_SIZE
 77 |       );
 78 |       console.log();
 79 |     },
 80 |     err => {
 81 |       console.log(chalk.red('Failed to compile.\n'));
 82 |       printBuildError(err);
 83 |       process.exit(1);
 84 |     }
 85 |   );
 86 | 
 87 | // Create the production build and print the deployment instructions.
 88 | function build(previousFileSizes) {
 89 |   console.log('Creating an optimized production build...');
 90 | 
 91 |   let compiler = webpack(config);
 92 |   return new Promise((resolve, reject) => {
 93 |     compiler.run((err, stats) => {
 94 |       if (err) {
 95 |         return reject(err);
 96 |       }
 97 |       const messages = formatWebpackMessages(stats.toJson({}, true));
 98 |       if (messages.errors.length) {
 99 |         // Only keep the first error. Others are often indicative
100 |         // of the same problem, but confuse the reader with noise.
101 |         if (messages.errors.length > 1) {
102 |           messages.errors.length = 1;
103 |         }
104 |         return reject(new Error(messages.errors.join('\n\n')));
105 |       }
106 |       if (
107 |         process.env.CI &&
108 |         (typeof process.env.CI !== 'string' ||
109 |           process.env.CI.toLowerCase() !== 'false') &&
110 |         messages.warnings.length
111 |       ) {
112 |         console.log(
113 |           chalk.yellow(
114 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
115 |               'Most CI servers set it automatically.\n'
116 |           )
117 |         );
118 |         return reject(new Error(messages.warnings.join('\n\n')));
119 |       }
120 |       return resolve({
121 |         stats,
122 |         previousFileSizes,
123 |         warnings: messages.warnings,
124 |       });
125 |     });
126 |   });
127 | }
128 | 


--------------------------------------------------------------------------------
/scripts/demo.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const chalk = require('chalk');
 18 | const fs = require('fs-extra');
 19 | const webpack = require('webpack');
 20 | const config = require('../config/webpack.config.demo');
 21 | const paths = require('../config/paths');
 22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 23 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 24 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 25 | const printBuildError = require('react-dev-utils/printBuildError');
 26 | 
 27 | const measureFileSizesBeforeBuild =
 28 |   FileSizeReporter.measureFileSizesBeforeBuild;
 29 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 30 | 
 31 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 32 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 33 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 34 | 
 35 | // Warn and crash if required files are missing
 36 | if (!checkRequiredFiles([paths.appDemoIndexJs])) { // CRL: Updated with library index file
 37 |   process.exit(1);
 38 | }
 39 | 
 40 | // First, read the current file sizes in build directory.
 41 | // This lets us display how much they changed later.
 42 | measureFileSizesBeforeBuild(paths.appDemoBuild)
 43 |   .then(previousFileSizes => {
 44 |     // Remove all content but keep the directory so that
 45 |     // if you're in it, you don't end up in Trash
 46 |     fs.emptyDirSync(paths.appDemoBuild);
 47 | 
 48 |     // Start the webpack build
 49 |     return build(previousFileSizes);
 50 |   })
 51 |   .then(
 52 |     ({ stats, previousFileSizes, warnings }) => {
 53 |       if (warnings.length) {
 54 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 55 |         console.log(warnings.join('\n\n'));
 56 |         console.log(
 57 |           '\nSearch for the ' +
 58 |             chalk.underline(chalk.yellow('keywords')) +
 59 |             ' to learn more about each warning.'
 60 |         );
 61 |         console.log(
 62 |           'To ignore, add ' +
 63 |             chalk.cyan('// eslint-disable-next-line') +
 64 |             ' to the line before.\n'
 65 |         );
 66 |       } else {
 67 |         console.log(chalk.green('Compiled successfully.\n'));
 68 |       }
 69 | 
 70 |       console.log('File sizes after gzip:\n');
 71 |       printFileSizesAfterBuild(
 72 |         stats,
 73 |         previousFileSizes,
 74 |         paths.appDemoBuild,
 75 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 76 |         WARN_AFTER_CHUNK_GZIP_SIZE
 77 |       );
 78 |       console.log();
 79 |     },
 80 |     err => {
 81 |       console.log(chalk.red('Failed to compile.\n'));
 82 |       printBuildError(err);
 83 |       process.exit(1);
 84 |     }
 85 |   );
 86 | 
 87 | // Create the production build and print the deployment instructions.
 88 | function build(previousFileSizes) {
 89 |   console.log('Creating a build of the demo app...');
 90 | 
 91 |   let compiler = webpack(config);
 92 |   return new Promise((resolve, reject) => {
 93 |     compiler.run((err, stats) => {
 94 |       if (err) {
 95 |         return reject(err);
 96 |       }
 97 |       const messages = formatWebpackMessages(stats.toJson({}, true));
 98 |       if (messages.errors.length) {
 99 |         // Only keep the first error. Others are often indicative
100 |         // of the same problem, but confuse the reader with noise.
101 |         if (messages.errors.length > 1) {
102 |           messages.errors.length = 1;
103 |         }
104 |         return reject(new Error(messages.errors.join('\n\n')));
105 |       }
106 |       if (
107 |         process.env.CI &&
108 |         (typeof process.env.CI !== 'string' ||
109 |           process.env.CI.toLowerCase() !== 'false') &&
110 |         messages.warnings.length
111 |       ) {
112 |         console.log(
113 |           chalk.yellow(
114 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
115 |               'Most CI servers set it automatically.\n'
116 |           )
117 |         );
118 |         return reject(new Error(messages.warnings.join('\n\n')));
119 |       }
120 |       return resolve({
121 |         stats,
122 |         previousFileSizes,
123 |         warnings: messages.warnings,
124 |       });
125 |     });
126 |   });
127 | }
128 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  5 | const path = require('path');
  6 | const config = require('./webpack.config.dev');
  7 | const paths = require('./paths');
  8 | 
  9 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 10 | const host = process.env.HOST || '0.0.0.0';
 11 | 
 12 | module.exports = function(proxy, allowedHost) {
 13 |   return {
 14 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 15 |     // websites from potentially accessing local content through DNS rebinding:
 16 |     // https://github.com/webpack/webpack-dev-server/issues/887
 17 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 18 |     // However, it made several existing use cases such as development in cloud
 19 |     // environment or subdomains in development significantly more complicated:
 20 |     // https://github.com/facebookincubator/create-react-app/issues/2271
 21 |     // https://github.com/facebookincubator/create-react-app/issues/2233
 22 |     // While we're investigating better solutions, for now we will take a
 23 |     // compromise. Since our WDS configuration only serves files in the `public`
 24 |     // folder we won't consider accessing them a vulnerability. However, if you
 25 |     // use the `proxy` feature, it gets more dangerous because it can expose
 26 |     // remote code execution vulnerabilities in backends like Django and Rails.
 27 |     // So we will disable the host check normally, but enable it if you have
 28 |     // specified the `proxy` setting. Finally, we let you override it if you
 29 |     // really know what you're doing with a special environment variable.
 30 |     disableHostCheck:
 31 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 32 |     // Enable gzip compression of generated files.
 33 |     compress: true,
 34 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 35 |     // It will still show compile warnings and errors with this setting.
 36 |     clientLogLevel: 'none',
 37 |     // By default WebpackDevServer serves physical files from current directory
 38 |     // in addition to all the virtual build products that it serves from memory.
 39 |     // This is confusing because those files won’t automatically be available in
 40 |     // production build folder unless we copy them. However, copying the whole
 41 |     // project directory is dangerous because we may expose sensitive files.
 42 |     // Instead, we establish a convention that only files in `public` directory
 43 |     // get served. Our build script will copy `public` into the `build` folder.
 44 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 45 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 46 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 47 |     // Note that we only recommend to use `public` folder as an escape hatch
 48 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 49 |     // for some reason broken when imported through Webpack. If you just want to
 50 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 51 |     contentBase: paths.appPublic,
 52 |     // By default files from `contentBase` will not trigger a page reload.
 53 |     watchContentBase: true,
 54 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 55 |     // for the WebpackDevServer client so it can learn when the files were
 56 |     // updated. The WebpackDevServer client is included as an entry point
 57 |     // in the Webpack development configuration. Note that only changes
 58 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 59 |     hot: true,
 60 |     // It is important to tell WebpackDevServer to use the same "root" path
 61 |     // as we specified in the config. In development, we always serve from /.
 62 |     publicPath: config.output.publicPath,
 63 |     // WebpackDevServer is noisy by default so we emit custom message instead
 64 |     // by listening to the compiler events with `compiler.plugin` calls above.
 65 |     quiet: true,
 66 |     // Reportedly, this avoids CPU overload on some systems.
 67 |     // https://github.com/facebookincubator/create-react-app/issues/293
 68 |     // src/node_modules is not ignored to support absolute imports
 69 |     // https://github.com/facebookincubator/create-react-app/issues/1065
 70 |     watchOptions: {
 71 |       ignored: new RegExp(
 72 |         `^(?!${path
 73 |           .normalize(paths.appSrc + '/')
 74 |           .replace(/[\\]+/g, '\\\\')}).+[\\\\/]node_modules[\\\\/]`,
 75 |         'g'
 76 |       ),
 77 |     },
 78 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 79 |     https: protocol === 'https',
 80 |     host: host,
 81 |     overlay: false,
 82 |     historyApiFallback: {
 83 |       // Paths with dots should still use the history fallback.
 84 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
 85 |       disableDotRule: true,
 86 |     },
 87 |     public: allowedHost,
 88 |     proxy,
 89 |     before(app) {
 90 |       // This lets us open files from the runtime error overlay.
 91 |       app.use(errorOverlayMiddleware());
 92 |       // This service worker file is effectively a 'no-op' that will reset any
 93 |       // previous service worker registered for the same host:port combination.
 94 |       // We do this in development to avoid hitting the production cache if
 95 |       // it used the same host and port.
 96 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
 97 |       app.use(noopServiceWorkerMiddleware());
 98 |     },
 99 |   };
100 | };
101 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | [![Stable Release](https://img.shields.io/npm/v/nice-react-layout.svg)](https://npm.im/nice-react-layout)
  2 | ![last commit](https://img.shields.io/github/last-commit/google/skia.svg)
  3 | ![license](https://img.shields.io/github/license/mashape/apistatus.svg)
  4 | [![DeepScan grade](https://deepscan.io/api/projects/2670/branches/18301/badge/grade.svg)](https://deepscan.io/dashboard#view=project&pid=2670&bid=18301)
  5 | 
  6 | # ![logo](public/logo.png) Nice React Layout
  7 | 
  8 | A set of React components to create complex flexbox-based layouts without knowing what flexbox is.
  9 | [https://ekros.github.io/nice-react-layout/](https://ekros.github.io/nice-react-layout/)
 10 | 
 11 | ## Installation
 12 | 
 13 | ```sh
 14 | yarn add nice-react-layout
 15 | ```
 16 | 
 17 | ## Motivation
 18 | 
 19 | The aim of this project is to have a reduced set of components to create flexbox-based layouts abstracting the knowledge needed to understand how flexbox works. This library is very useful for web apps with lots of panels.
 20 | 
 21 | ## Features
 22 | 
 23 | - Easy to learn: Just combine layouts and panels.
 24 | - Create collapsible sidebars with ease.
 25 | - Automagically colorize panels with random colors to speed-up prototyping.
 26 | - Resizable panels. Just add separators to your layouts.
 27 | - Swap panels position using Drag and drop!
 28 | 
 29 | ![Simple example](https://i.postimg.cc/W3gMfVCN/preview.gif)
 30 | 
 31 | ![Drag and Drop](https://i.postimg.cc/Xvh8zQv8/cats-demo.gif)
 32 | 
 33 | ## Basic Usage
 34 | 
 35 | Components can be imported using ES6 modules syntax:
 36 | 
 37 | ```javascript
 38 | import {
 39 |   HorizontalLayout,
 40 |   VerticalLayout,
 41 |   Panel,
 42 |   Separator,
 43 |   Spacer,
 44 |   View
 45 | } from "nice-react-layout";
 46 | ```
 47 | 
 48 | Creating a simple layout is as easy as this:
 49 | 
 50 | ```javascript
 51 | <HorizontalLayout mockup>
 52 |   <Panel />
 53 |   <Panel />
 54 | </HorizontalLayout>
 55 | ```
 56 | 
 57 | It renders an horizontal layout with two panels of the same size (they have proportion=1 by default). Thanks to the 'mockup' prop it paints every panel with a random color, easing the layout prototyping process. Layouts get all the available space by default (in the parent element). If you want your layout to fill the viewport you can use the <View> component. Like this:
 58 | 
 59 | ```javascript
 60 | <View>
 61 |   <HorizontalLayout mockup>
 62 |     <Panel />
 63 |     <Panel />
 64 |   </HorizontalLayout>
 65 | </View>
 66 | ```
 67 | 
 68 | <br />
 69 | In both horizontal and vertical layouts add the prop 'proportion' with the proportional part it takes from the available space. This example creates a typical sidebar + content layout:
 70 | 
 71 | ```javascript
 72 | <HorizontalLayout mockup>
 73 |   <Panel proportion={1} />
 74 |   <Panel proportion={4} />
 75 | </HorizontalLayout>
 76 | ```
 77 | 
 78 | <br />
 79 | Do you want to add a separator between both panels? Use the Separator component:
 80 | 
 81 | ```javascript
 82 | <HorizontalLayout mockup>
 83 |   <Panel proportion={1} />
 84 |   <Separator />
 85 |   <Panel proportion={4} />
 86 | </HorizontalLayout>
 87 | ```
 88 | 
 89 | <br />
 90 | You can nest layouts. Let's add a vertical layout, with its own Separator, inside the right panel:
 91 | 
 92 | ```javascript
 93 | <HorizontalLayout mockup>
 94 |   <Panel proportion={1} />
 95 |   <Separator />
 96 |   <Panel proportion={4}>
 97 |     <VerticalLayout mockup>
 98 |       <Panel />
 99 |       <Separator />
100 |       <Panel />
101 |     </VerticalLayout>
102 |   </Panel>
103 | </HorizontalLayout>
104 | ```
105 | 
106 | To enable drag-and-drop feature, use the `draggable` and `droppable` props:
107 | 
108 | ```javascript
109 | <HorizontalLayout mockup>
110 |   <Panel draggable droppable />
111 |   <Panel draggable droppable />
112 | </HorizontalLayout>
113 | ```
114 | 
115 | For a complete example with every feature, see the src/demo/App.js file. Or just run `yarn start`.
116 | 
117 | ## Components
118 | 
119 | ### View
120 | 
121 | The top-level component. It gets all the available viewport space. Use it if you want your layout to fill the viewport or pass width / height props.
122 | 
123 | ##### Props
124 | 
125 | | Prop   | Description                    |
126 | | ------ | ------------------------------ |
127 | | width  | view width (100vw by default)  |
128 | | height | view height (100vh by default) |
129 | 
130 | ### HorizontalLayout
131 | 
132 | It creates an horizontal layout. This is shorthand component for:
133 | 
134 | ```javascript
135 | <Layout orientation="horizontal" />
136 | ```
137 | 
138 | ### VerticalLayout
139 | 
140 | It creates vertical layout layout. This is a shorthand component for:
141 | 
142 | ```javascript
143 | <Layout orientation="vertical" />
144 | ```
145 | 
146 | ### Layout
147 | 
148 | Creates a layout.
149 | 
150 | ##### Props
151 | 
152 | | Prop         | Description                                 |
153 | | ------------ | ------------------------------------------- |
154 | | className    | Top-level element class name                |
155 | | collapseSize | Collapsible panels size when collapsed      |
156 | | customCss    | Custom layout CSS object                    |
157 | | mockup       | Render in mockup mode                       |
158 | | onResize     | Returns (layout, collapsedPanels) on resize |
159 | | orientation  | 'vertical' or 'horizontal'                  |
160 | | reverse      | Render layout in reverse order              |
161 | 
162 | ### Panel
163 | 
164 | Here is where your content goes.
165 | If you are familiar with flexbox, this is like a "flex item" with a flex value of 1 by default. If not, don't worry, you don't need to know that :)
166 | 
167 | ##### Props
168 | 
169 | | Prop                           | Description                                                                        |
170 | | ------------------------------ | ---------------------------------------------------------------------------------- |
171 | | centered                       | Center panel content                                                               |
172 | | className                      | Top-level element class name                                                       |
173 | | collapsible                    | The panel can be collapsed                                                         |
174 | | collapsed                      | Is the panel collapsed?                                                            |
175 | | collapseButtonClass            | Adds a class to the collapse button                                                |
176 | | collapseButtonContent          | A String or element                                                                |
177 | | collapseButtonCollapsedContent | A String or element                                                                |
178 | | collapseButtonStyle            | Inject inline CSS to the collapse button                                           |
179 | | collapsePanel                  | Called when collapse button is clicked                                             |
180 | | collapseSwitch                 | Custom collapse element (renders button if not provided)                           |
181 | | columns                        | Number of columns (uses CSS multiple columns)                                      |
182 | | customCss                      | Custom panel CSS object (injects it as an inline style)                            |
183 | | draggable                      | Enable dragging                                                                    |
184 | | droppable                      | Other panels can be dropped here                                                   |
185 | | minHeight                      | Minimum panel height                                                               |
186 | | minWidth                       | Minimum panel width                                                                |
187 | | mockup                         | Render in mockup mode                                                              |
188 | | orientation                    | 'vertical' or 'horizontal'                                                         |
189 | | proportion                     | Proportion it uses from the available space (default = 1)                          |
190 | | reverse                        | Render layout in reverse order                                                     |
191 | | showSize                       | Show panel size while dragging adjacent separators                                 |
192 | | sidebar                        | Don't do much by it self. It is a requirement for sidebar props like 'collapsible' |
193 | 
194 | ### Separator
195 | 
196 | It separates panels and allows them to be resized. This is optional.
197 | 
198 | ##### Props
199 | 
200 | | Prop                   | Description                                                 |
201 | | ---------------------- | ----------------------------------------------------------- |
202 | | customCss              | Custom separator CSS object (injects it as an inline style) |
203 | | defaultDblClickPos     | Position where the separator goes when double-clicked       |
204 | | disabled               | Is disabled?                                                |
205 | | onSeparatorDoubleClick | Action called when the separator is double-clicked          |
206 | | onSeparatorMouseDown   | Action called when the mouse is over the separator          |
207 | 
208 | ### Spacer
209 | 
210 | It renders a blank space. Useful when you need to leave spaces between panels.
211 | 
212 | ##### Props
213 | 
214 | | Prop | Description              |
215 | | ---- | ------------------------ |
216 | | size | Separator size in pixels |
217 | 
218 | ---
219 | 
220 | Like this project? ★ us on Github :)
221 | 


--------------------------------------------------------------------------------
/src/lib/components/Layout/Panel.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import PropTypes from "prop-types";
  3 | import { SizeMe } from "react-sizeme";
  4 | 
  5 | export default class Panel extends React.PureComponent {
  6 |   constructor(props) {
  7 |     super(props);
  8 |     this.panel = React.createRef();
  9 |     this.lastDragX;
 10 |     this.lastDragY;
 11 |   }
 12 | 
 13 |   static propTypes = {
 14 |     id: PropTypes.string, // internal use only
 15 |     centered: PropTypes.bool,
 16 |     children: PropTypes.node,
 17 |     className: PropTypes.string,
 18 |     customCss: PropTypes.object,
 19 |     draggable: PropTypes.bool,
 20 |     draggingOver: PropTypes.func,
 21 |     draggingPanelIndex: PropTypes.number,
 22 |     draggingSeparator: PropTypes.bool,
 23 |     droppable: PropTypes.bool,
 24 |     collapsed: PropTypes.bool,
 25 |     collapsible: PropTypes.bool,
 26 |     collapseButtonClass: PropTypes.string,
 27 |     collapseSize: PropTypes.string,
 28 |     collapseButtonStyle: PropTypes.object,
 29 |     collapseButtonContent: PropTypes.oneOfType([
 30 |       PropTypes.string,
 31 |       PropTypes.element
 32 |     ]),
 33 |     collapseButtonCollapsedContent: PropTypes.oneOfType([
 34 |       PropTypes.string,
 35 |       PropTypes.element
 36 |     ]),
 37 |     collapsePanel: PropTypes.func,
 38 |     collapseSwitch: PropTypes.element,
 39 |     columns: PropTypes.number,
 40 |     // contentAlign: PropTypes.oneOf([
 41 |     //   "center",
 42 |     //   "top",
 43 |     //   "right",
 44 |     //   "bottom",
 45 |     //   "left",
 46 |     //   "top right",
 47 |     //   "bottom right",
 48 |     //   "bottom left",
 49 |     //   "top left"
 50 |     // ]),
 51 |     flex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 52 |     isDraggingOver: PropTypes.bool,
 53 |     layoutIndex: PropTypes.number,
 54 |     minHeight: PropTypes.number,
 55 |     minWidth: PropTypes.number,
 56 |     mockupStyle: PropTypes.object,
 57 |     order: PropTypes.number,
 58 |     proportion: PropTypes.number,
 59 |     render: PropTypes.func,
 60 |     startDragging: PropTypes.func,
 61 |     stopDragging: PropTypes.func,
 62 |     showSize: PropTypes.bool,
 63 |     sidebar: PropTypes.bool
 64 |   };
 65 | 
 66 |   static defaultProps = {
 67 |     id: "panel",
 68 |     centered: false,
 69 |     className: "",
 70 |     collapseSize: "30px",
 71 |     collapseButtonContent: "Collapse",
 72 |     collapseButtonCollapsedContent: "Extend",
 73 |     columns: undefined,
 74 |     draggable: false,
 75 |     droppable: false,
 76 |     isDraggingOver: false,
 77 |     proportion: 1,
 78 |     render: undefined,
 79 |     showSize: false
 80 |   };
 81 | 
 82 |   componentDidMount() {
 83 |     if (this.props.draggable) {
 84 |       setTimeout(() => {
 85 |         this.panel.current.addEventListener("mousedown", this.startDragging);
 86 |       }, 400);
 87 |     }
 88 |     if (this.props.droppable) {
 89 |       setTimeout(() => {
 90 |         this.panel.current.addEventListener("mousemove", this.draggingOver);
 91 |       }, 500);
 92 |     }
 93 |   }
 94 | 
 95 |   componentWillUnmount() {
 96 |     if (this.props.draggable) {
 97 |       this.panel.current.removeEventListener("mousedown", this.startDragging);
 98 |       this.panel.current.removeEventListener("mouseup", this.cancelDragging);
 99 |     }
100 |     if (this.props.droppable) {
101 |       this.panel.current.removeEventListener("mousemove", this.draggingOver);
102 |     }
103 |   }
104 | 
105 |   calculatePanelFlex = () => {
106 |     const { sidebar, collapsed, collapsible, collapseSize } = this.props;
107 |     let flex;
108 |     if (sidebar && collapsible) {
109 |       if (collapsed) {
110 |         flex = collapseSize;
111 |       } else {
112 |         flex = this.calculatePanelLength();
113 |       }
114 |     } else {
115 |       flex = this.calculatePanelLength();
116 |     }
117 |     return flex;
118 |   };
119 | 
120 |   calculatePanelLength = () => this.props.proportion;
121 | 
122 |   // cancelDragging = ev => {
123 |   //   let ghost = document.getElementById("panel-dragging-ghost");
124 |   //   if (ghost) {
125 |   //     document.body.removeChild(ghost);
126 |   //   }
127 |   //   // WORKAROUND: is there a second ghost??
128 |   //   ghost = document.getElementById("panel-dragging-ghost");
129 |   //   if (ghost) {
130 |   //     document.body.removeChild(ghost);
131 |   //   }
132 |   //
133 |   //   document.removeEventListener("mouseup", this.cancelDragging);
134 |   //   // document.removeEventListener("dragend", this.stopDragging);
135 |   //   this.props.stopDragging();
136 |   // };
137 | 
138 |   draggingOver = ev => {
139 |     if (
140 |       this.props.draggingPanelIndex !== null &&
141 |       this.props.draggingPanelIndex !== undefined
142 |     ) {
143 |       const dragEl = document.getElementById("panel-dragging-ghost");
144 |       if (dragEl) {
145 |         dragEl.style.top = `${ev.clientY + 10}px`;
146 |         dragEl.style.left = `${ev.clientX + 10}px`;
147 |         if (ev.clientX - this.lastDragX > 0) {
148 |           dragEl.style.transform = "rotateZ(10deg)";
149 |         } else if (ev.clientX - this.lastDragX < 0) {
150 |           dragEl.style.transform = "rotateZ(-10deg)";
151 |         } else if (ev.clientY - this.lastDragY > 0) {
152 |           dragEl.style.transform = "rotateZ(-10deg)";
153 |         } else if (ev.clientY - this.lastDragY < 0) {
154 |           dragEl.style.transform = "rotateZ(10deg)";
155 |         } else {
156 |           dragEl.style.transform = "rotateZ(0deg)";
157 |         }
158 |         this.lastDragX = ev.clientX;
159 |         this.lastDragY = ev.clientY;
160 |       }
161 |       const { draggingOver, layoutIndex } = this.props;
162 |       draggingOver(layoutIndex);
163 |     }
164 |   };
165 | 
166 |   // onMouseMove = ev => {
167 |   //   const dragEl = document.getElementById("panel-dragging-ghost");
168 |   //   if (dragEl) {
169 |   //     dragEl.style.top = `${ev.clientY + 10}px`;
170 |   //     dragEl.style.left = `${ev.clientX + 10}px`;
171 |   //   }
172 |   // };
173 | 
174 |   startDragging = ev => {
175 |     // clone the panel element
176 |     const panelClone = this.panel.current.cloneNode(true);
177 |     panelClone.id = "panel-dragging-ghost";
178 |     panelClone.style.position = "fixed";
179 |     panelClone.style.opacity = 0.5;
180 |     panelClone.style.width = `${
181 |       this.panel.current.getBoundingClientRect().width
182 |     }px`;
183 |     panelClone.style.height = `${
184 |       this.panel.current.getBoundingClientRect().height
185 |     }px`;
186 |     panelClone.style.transition = "transform 0.2s";
187 |     panelClone.style.transformOrigin = "0% 0%";
188 |     panelClone.style.zIndex = 10;
189 |     document.body.appendChild(panelClone);
190 | 
191 |     document.addEventListener("mouseup", this.stopDragging);
192 |     const { layoutIndex, startDragging } = this.props;
193 |     startDragging(layoutIndex);
194 |   };
195 | 
196 |   stopDragging = ev => {
197 |     let ghost = document.getElementById("panel-dragging-ghost");
198 |     if (ghost) {
199 |       document.body.removeChild(ghost);
200 |     }
201 |     // WORKAROUND: is there a second ghost??
202 |     ghost = document.getElementById("panel-dragging-ghost");
203 |     if (ghost) {
204 |       document.body.removeChild(ghost);
205 |     }
206 | 
207 |     document.removeEventListener("mouseup", this.stopDragging);
208 |     this.props.stopDragging();
209 |   };
210 | 
211 |   toggleCollapse = () => {
212 |     const { collapsePanel, layoutIndex } = this.props;
213 |     collapsePanel(layoutIndex);
214 |   };
215 | 
216 |   render() {
217 |     const {
218 |       centered,
219 |       children,
220 |       className,
221 |       customCss,
222 |       collapsed,
223 |       collapsible,
224 |       collapseButtonClass,
225 |       collapseButtonContent,
226 |       collapseButtonCollapsedContent,
227 |       collapseSize,
228 |       collapseButtonStyle,
229 |       collapseSwitch,
230 |       columns,
231 |       draggingPanelIndex,
232 |       draggingSeparator,
233 |       flex,
234 |       height,
235 |       isDraggingOver,
236 |       minHeight,
237 |       minWidth,
238 |       mockupStyle,
239 |       order,
240 |       showSize,
241 |       orientation,
242 |       render,
243 |       sidebar,
244 |       width
245 |     } = this.props;
246 |     const styles = {
247 |       sidebarActions: {
248 |         height: "20px"
249 |       },
250 |       centered: {
251 |         display: "flex",
252 |         justifyContent: "center",
253 |         alignItems: "center"
254 |       },
255 |       horizontalPanel: {
256 |         position: "relative",
257 |         borderRight: sidebar ? "1px solid #445161" : "none",
258 |         cursor: draggingSeparator ? "col-resize" : "default",
259 |         flex:
260 |           flex !== null && flex !== undefined
261 |             ? flex
262 |             : this.calculatePanelFlex(), // TODO: remove local calculation???
263 |         minWidth: sidebar && collapsible && collapsed ? collapseSize : minWidth,
264 |         overflowX: "auto",
265 |         overflowY: "auto",
266 |         width: width || "auto"
267 |       },
268 |       draggingPanel: {
269 |         cursor: "grab"
270 |       },
271 |       isDraggingOver: {
272 |         filter: "brightness(120%)"
273 |       },
274 |       panelSize: {
275 |         position: "absolute",
276 |         background: "rgba(255, 255, 255, 0.5)",
277 |         borderRadius: "4px",
278 |         color: "#222222",
279 |         fontSize: "11px",
280 |         right: "5px",
281 |         bottom: "5px",
282 |         width: "90px",
283 |         height: "15px",
284 |         textAlign: "center"
285 |       },
286 |       verticalPanel: {
287 |         position: "relative",
288 |         borderRight: sidebar ? "1px solid #445161" : "none",
289 |         cursor: draggingSeparator ? "row-resize" : "default",
290 |         flex:
291 |           flex !== null && flex !== undefined
292 |             ? flex
293 |             : this.calculatePanelFlex(),
294 |         height: height || "auto",
295 |         minHeight:
296 |           sidebar && collapsible && collapsed ? collapseSize : minHeight,
297 |         overflowX: "hidden",
298 |         overflowY: "auto"
299 |       },
300 |       collapsedPanel: {
301 |         position: "relative",
302 |         boxShadow: "1px 0px 4px black",
303 |         flex: 0
304 |       }
305 |     };
306 |     return (
307 |       <SizeMe monitorHeight refreshRate={200}>
308 |         {({ size }) => (
309 |           <div
310 |             ref={this.panel}
311 |             style={Object.assign(
312 |               {},
313 |               {
314 |                 order,
315 |                 transition: draggingSeparator ? "none" : "flex 0.3s"
316 |               },
317 |               orientation === "vertical"
318 |                 ? styles.verticalPanel
319 |                 : styles.horizontalPanel,
320 |               centered ? styles.centered : null,
321 |               columns ? { columnCount: columns } : null,
322 |               customCss,
323 |               collapsed ? styles.collapsedPanel : null,
324 |               mockupStyle,
325 |               isDraggingOver ? styles.isDraggingOver : null,
326 |               draggingPanelIndex !== null && draggingPanelIndex !== undefined
327 |                 ? styles.draggingPanel
328 |                 : null
329 |             )}
330 |             className={className}
331 |           >
332 |             {collapsible ? (
333 |               <div
334 |                 style={Object.assign(
335 |                   {},
336 |                   styles.sidebarActions,
337 |                   customCss && customCss.sidebarActions
338 |                     ? customCss.sidebarActions
339 |                     : null
340 |                 )}
341 |               >
342 |                 {collapseSwitch || (
343 |                   <button
344 |                     style={collapseButtonStyle || { float: "right" }}
345 |                     onClick={this.toggleCollapse}
346 |                     className={collapseButtonClass}
347 |                   >
348 |                     {!collapsed
349 |                       ? collapseButtonContent
350 |                       : collapseButtonCollapsedContent}
351 |                   </button>
352 |                 )}
353 |               </div>
354 |             ) : null}
355 |             {render ? render({ size }) : children}
356 |             {draggingSeparator && showSize ? (
357 |               <div style={styles.panelSize}>
358 |                 {size
359 |                   ? `${Math.floor(size.width)} x ${Math.floor(size.height)}`
360 |                   : null}
361 |               </div>
362 |             ) : null}
363 |           </div>
364 |         )}
365 |       </SizeMe>
366 |     );
367 |   }
368 | }
369 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  7 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
  8 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
  9 | const paths = require('./paths');
 10 | const getClientEnvironment = require('./env');
 11 | 
 12 | // Webpack uses `publicPath` to determine where the app is being served from.
 13 | // It requires a trailing slash, or the file assets will get an incorrect path.
 14 | const publicPath = paths.servedPath;
 15 | // Some apps do not use client-side routing with pushState.
 16 | // For these, "homepage" can be set to "." to enable relative asset paths.
 17 | const shouldUseRelativeAssetPaths = publicPath === './';
 18 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 19 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 20 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 21 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 22 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 23 | const publicUrl = publicPath.slice(0, -1);
 24 | // Get environment variables to inject into our app.
 25 | const env = getClientEnvironment(publicUrl);
 26 | 
 27 | // Assert this just to be safe.
 28 | // Development builds of React are slow and not intended for production.
 29 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 30 |   throw new Error('Production builds must have NODE_ENV=production.');
 31 | }
 32 | 
 33 | // Note: defined here because it will be used more than once.
 34 | const cssFilename = 'css/index.css';
 35 | 
 36 | // ExtractTextPlugin expects the build output to be flat.
 37 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 38 | // However, our output is structured with css, js and media folders.
 39 | // To have this structure working with relative paths, we have to use custom options.
 40 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 41 |   ? // Making sure that the publicPath goes back to to build folder.
 42 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 43 |   : {};
 44 | 
 45 | // This is the production configuration.
 46 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 47 | // The development configuration is different and lives in a separate file.
 48 | module.exports = {
 49 |   // Don't attempt to continue if there are any errors.
 50 |   bail: true,
 51 |   // We generate sourcemaps in production. This is slow but gives good results.
 52 |   // You can exclude the *.map files from the build during deployment.
 53 |   devtool: shouldUseSourceMap ? 'source-map' : false,
 54 |   // In production, we only want to load the app code.
 55 |   entry: [paths.appLibIndexJs], // CRL: library index file instead of app index
 56 |   output: {
 57 |     // CRL: Updated whole block with library specific info
 58 |     path: paths.appBuild,
 59 |     filename: 'index.js',
 60 |     libraryTarget: 'umd'
 61 |   },
 62 |   resolve: {
 63 |     // This allows you to set a fallback for where Webpack should look for modules.
 64 |     // We placed these paths second because we want `node_modules` to "win"
 65 |     // if there are any conflicts. This matches Node resolution mechanism.
 66 |     // https://github.com/facebookincubator/create-react-app/issues/253
 67 |     modules: ['node_modules', paths.appNodeModules].concat(
 68 |       // It is guaranteed to exist because we tweak it in `env.js`
 69 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 70 |     ),
 71 |     // These are the reasonable defaults supported by the Node ecosystem.
 72 |     // We also include JSX as a common component filename extension to support
 73 |     // some tools, although we do not recommend using it, see:
 74 |     // https://github.com/facebookincubator/create-react-app/issues/290
 75 |     // `web` extension prefixes have been added for better support
 76 |     // for React Native Web.
 77 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 78 |     alias: {
 79 | 
 80 |       // Support React Native Web
 81 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 82 |       'react-native': 'react-native-web',
 83 |     },
 84 |     plugins: [
 85 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 86 |       // This often causes confusion because we only process files within src/ with babel.
 87 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 88 |       // please link the files into your node_modules/ and let module-resolution kick in.
 89 |       // Make sure your source files are compiled, as they will not be processed in any way.
 90 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
 91 |     ],
 92 |   },
 93 |   module: {
 94 |     strictExportPresence: true,
 95 |     rules: [
 96 |       // TODO: Disable require.ensure as it's not a standard language feature.
 97 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
 98 |       // { parser: { requireEnsure: false } },
 99 | 
100 |       // First, run the linter.
101 |       // It's important to do this before Babel processes the JS.
102 |       {
103 |         test: /\.(js|jsx|mjs)$/,
104 |         enforce: 'pre',
105 |         use: [
106 |           {
107 |             options: {
108 |               formatter: eslintFormatter,
109 |               eslintPath: require.resolve('eslint'),
110 | 
111 |             },
112 |             loader: require.resolve('eslint-loader'),
113 |           },
114 |         ],
115 |         include: paths.appLibSrc, // CRL: updated with library src folder
116 |       },
117 |       {
118 |         // "oneOf" will traverse all following loaders until one will
119 |         // match the requirements. When no loader matches it will fall
120 |         // back to the "file" loader at the end of the loader list.
121 |         oneOf: [
122 |           // "url" loader works just like "file" loader but it also embeds
123 |           // assets smaller than specified size as data URLs to avoid requests.
124 |           {
125 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
126 |             loader: require.resolve('url-loader'),
127 |             options: {
128 |               limit: 10000,
129 |               name: 'media/[name].[ext]',
130 |             },
131 |           },
132 |           // Process JS with Babel.
133 |           {
134 |             test: /\.(js|jsx|mjs)$/,
135 |             include: paths.appLibSrc, // CRL: updated with library src folder
136 |             loader: require.resolve('babel-loader'),
137 |             options: {
138 | 
139 |               compact: true,
140 |             },
141 |           },
142 |           // The notation here is somewhat confusing.
143 |           // "postcss" loader applies autoprefixer to our CSS.
144 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
145 |           // "style" loader normally turns CSS into JS modules injecting <style>,
146 |           // but unlike in development configuration, we do something different.
147 |           // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
148 |           // (second argument), then grabs the result CSS and puts it into a
149 |           // separate file in our build process. This way we actually ship
150 |           // a single CSS file in production instead of JS code injecting <style>
151 |           // tags. If you use code splitting, however, any async bundles will still
152 |           // use the "style" loader inside the async code so CSS from them won't be
153 |           // in the main CSS file.
154 |           {
155 |             test: /\.css$/,
156 |             loader: ExtractTextPlugin.extract(
157 |               Object.assign(
158 |                 {
159 |                   fallback: {
160 |                     loader: require.resolve('style-loader'),
161 |                     options: {
162 |                       hmr: false,
163 |                     },
164 |                   },
165 |                   use: [
166 |                     {
167 |                       loader: require.resolve('css-loader'),
168 |                       options: {
169 |                         importLoaders: 1,
170 |                         minimize: true,
171 |                         sourceMap: shouldUseSourceMap,
172 |                       },
173 |                     },
174 |                     {
175 |                       loader: require.resolve('postcss-loader'),
176 |                       options: {
177 |                         // Necessary for external CSS imports to work
178 |                         // https://github.com/facebookincubator/create-react-app/issues/2677
179 |                         ident: 'postcss',
180 |                         plugins: () => [
181 |                           require('postcss-flexbugs-fixes'),
182 |                           autoprefixer({
183 |                             browsers: [
184 |                               '>1%',
185 |                               'last 4 versions',
186 |                               'Firefox ESR',
187 |                               'not ie < 9', // React doesn't support IE8 anyway
188 |                             ],
189 |                             flexbox: 'no-2009',
190 |                           }),
191 |                         ],
192 |                       },
193 |                     },
194 |                   ],
195 |                 },
196 |                 extractTextPluginOptions
197 |               )
198 |             ),
199 |             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
200 |           },
201 |           // "file" loader makes sure assets end up in the `build` folder.
202 |           // When you `import` an asset, you get its filename.
203 |           // This loader doesn't use a "test" so it will catch all modules
204 |           // that fall through the other loaders.
205 |           {
206 |             loader: require.resolve('file-loader'),
207 |             // Exclude `js` files to keep "css" loader working as it injects
208 |             // it's runtime that would otherwise processed through "file" loader.
209 |             // Also exclude `html` and `json` extensions so they get processed
210 |             // by webpacks internal loaders.
211 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
212 |             options: {
213 |               name: 'media/[name].[ext]',
214 |             },
215 |           },
216 |           // ** STOP ** Are you adding a new loader?
217 |           // Make sure to add the new loader(s) before the "file" loader.
218 |         ],
219 |       },
220 |     ],
221 |   },
222 |   plugins: [
223 |     // Makes some environment variables available to the JS code, for example:
224 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
225 |     // It is absolutely essential that NODE_ENV was set to production here.
226 |     // Otherwise React will be compiled in the very slow development mode.
227 |     new webpack.DefinePlugin(env.stringified),
228 |     // Minify the code.
229 |     new webpack.optimize.UglifyJsPlugin({
230 |       compress: {
231 |         warnings: false,
232 |         // Disabled because of an issue with Uglify breaking seemingly valid code:
233 |         // https://github.com/facebookincubator/create-react-app/issues/2376
234 |         // Pending further investigation:
235 |         // https://github.com/mishoo/UglifyJS2/issues/2011
236 |         comparisons: false,
237 |       },
238 |       mangle: {
239 |         safari10: true,
240 |       },
241 |       output: {
242 |         comments: false,
243 |         // Turned on because emoji and regex is not minified properly using default
244 |         // https://github.com/facebookincubator/create-react-app/issues/2488
245 |         ascii_only: true,
246 |       },
247 |       sourceMap: shouldUseSourceMap,
248 |     }),
249 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
250 |     new ExtractTextPlugin({
251 |       filename: cssFilename,
252 |     }),
253 |     // Moment.js is an extremely popular library that bundles large locale files
254 |     // by default due to how Webpack interprets its code. This is a practical
255 |     // solution that requires the user to opt into importing specific locales.
256 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
257 |     // You can remove this if you don't use Moment.js:
258 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
259 |   ],
260 |   // CRL: added externals block for library
261 |   externals: {
262 |    'react': 'react',
263 |    'react-dom': 'react-dom'
264 |   },
265 |   // Some libraries import Node modules but don't use them in the browser.
266 |   // Tell Webpack to provide empty mocks for them so importing them works.
267 |   node: {
268 |     dgram: 'empty',
269 |     fs: 'empty',
270 |     net: 'empty',
271 |     tls: 'empty',
272 |     child_process: 'empty',
273 |   },
274 | };
275 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  8 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 10 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 11 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 12 | const getClientEnvironment = require('./env');
 13 | const paths = require('./paths');
 14 | 
 15 | // Webpack uses `publicPath` to determine where the app is being served from.
 16 | // In development, we always serve from the root. This makes config easier.
 17 | const publicPath = '/';
 18 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 19 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 20 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 21 | const publicUrl = '';
 22 | // Get environment variables to inject into our app.
 23 | const env = getClientEnvironment(publicUrl);
 24 | 
 25 | // This is the development configuration.
 26 | // It is focused on developer experience and fast rebuilds.
 27 | // The production configuration is different and lives in a separate file.
 28 | module.exports = {
 29 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 30 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 31 |   devtool: 'cheap-module-source-map',
 32 |   // These are the "entry points" to our application.
 33 |   // This means they will be the "root" imports that are included in JS bundle.
 34 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 35 |   entry: [
 36 |     // Include an alternative client for WebpackDevServer. A client's job is to
 37 |     // connect to WebpackDevServer by a socket and get notified about changes.
 38 |     // When you save a file, the client will either apply hot updates (in case
 39 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 40 |     // make a syntax error, this client will display a syntax error overlay.
 41 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 42 |     // to bring better experience for Create React App users. You can replace
 43 |     // the line below with these two lines if you prefer the stock client:
 44 |     // require.resolve('webpack-dev-server/client') + '?/',
 45 |     // require.resolve('webpack/hot/dev-server'),
 46 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 47 |     // Finally, this is your app's code:
 48 |     paths.appIndexJs,
 49 |     // We include the app code last so that if there is a runtime error during
 50 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 51 |     // changing JS code would still trigger a refresh.
 52 |   ],
 53 |   output: {
 54 |     // Add /* filename */ comments to generated require()s in the output.
 55 |     pathinfo: true,
 56 |     // This does not produce a real file. It's just the virtual path that is
 57 |     // served by WebpackDevServer in development. This is the JS bundle
 58 |     // containing code from all our entry points, and the Webpack runtime.
 59 |     filename: 'static/js/bundle.js',
 60 |     // There are also additional JS chunk files if you use code splitting.
 61 |     chunkFilename: 'static/js/[name].chunk.js',
 62 |     // This is the URL that app is served from. We use "/" in development.
 63 |     publicPath: publicPath,
 64 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 65 |     devtoolModuleFilenameTemplate: info =>
 66 |       path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
 67 |   },
 68 |   resolve: {
 69 |     // This allows you to set a fallback for where Webpack should look for modules.
 70 |     // We placed these paths second because we want `node_modules` to "win"
 71 |     // if there are any conflicts. This matches Node resolution mechanism.
 72 |     // https://github.com/facebookincubator/create-react-app/issues/253
 73 |     modules: ['node_modules', paths.appNodeModules].concat(
 74 |       // It is guaranteed to exist because we tweak it in `env.js`
 75 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 76 |     ),
 77 |     // These are the reasonable defaults supported by the Node ecosystem.
 78 |     // We also include JSX as a common component filename extension to support
 79 |     // some tools, although we do not recommend using it, see:
 80 |     // https://github.com/facebookincubator/create-react-app/issues/290
 81 |     // `web` extension prefixes have been added for better support
 82 |     // for React Native Web.
 83 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 84 |     alias: {
 85 | 
 86 |       // Support React Native Web
 87 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 88 |       'react-native': 'react-native-web',
 89 |     },
 90 |     plugins: [
 91 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 92 |       // This often causes confusion because we only process files within src/ with babel.
 93 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 94 |       // please link the files into your node_modules/ and let module-resolution kick in.
 95 |       // Make sure your source files are compiled, as they will not be processed in any way.
 96 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
 97 |     ],
 98 |   },
 99 |   module: {
100 |     strictExportPresence: true,
101 |     rules: [
102 |       // TODO: Disable require.ensure as it's not a standard language feature.
103 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
104 |       // { parser: { requireEnsure: false } },
105 | 
106 |       // First, run the linter.
107 |       // It's important to do this before Babel processes the JS.
108 |       {
109 |         test: /\.(js|jsx|mjs)$/,
110 |         enforce: 'pre',
111 |         use: [
112 |           {
113 |             options: {
114 |               formatter: eslintFormatter,
115 |               eslintPath: require.resolve('eslint'),
116 | 
117 |             },
118 |             loader: require.resolve('eslint-loader'),
119 |           },
120 |         ],
121 |         include: paths.appSrc,
122 |       },
123 |       {
124 |         // "oneOf" will traverse all following loaders until one will
125 |         // match the requirements. When no loader matches it will fall
126 |         // back to the "file" loader at the end of the loader list.
127 |         oneOf: [
128 |           // "url" loader works like "file" loader except that it embeds assets
129 |           // smaller than specified limit in bytes as data URLs to avoid requests.
130 |           // A missing `test` is equivalent to a match.
131 |           {
132 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
133 |             loader: require.resolve('url-loader'),
134 |             options: {
135 |               limit: 10000,
136 |               name: 'static/media/[name].[hash:8].[ext]',
137 |             },
138 |           },
139 |           // Process JS with Babel.
140 |           {
141 |             test: /\.(js|jsx|mjs)$/,
142 |             include: paths.appSrc,
143 |             loader: require.resolve('babel-loader'),
144 |             options: {
145 |               // This is a feature of `babel-loader` for webpack (not Babel itself).
146 |               // It enables caching results in ./node_modules/.cache/babel-loader/
147 |               // directory for faster rebuilds.
148 |               cacheDirectory: true,
149 |             },
150 |           },
151 |           // "postcss" loader applies autoprefixer to our CSS.
152 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
153 |           // "style" loader turns CSS into JS modules that inject <style> tags.
154 |           // In production, we use a plugin to extract that CSS to a file, but
155 |           // in development "style" loader enables hot editing of CSS.
156 |           {
157 |             test: /\.css$/,
158 |             use: [
159 |               require.resolve('style-loader'),
160 |               {
161 |                 loader: require.resolve('css-loader'),
162 |                 options: {
163 |                   importLoaders: 1,
164 |                 },
165 |               },
166 |               {
167 |                 loader: require.resolve('postcss-loader'),
168 |                 options: {
169 |                   // Necessary for external CSS imports to work
170 |                   // https://github.com/facebookincubator/create-react-app/issues/2677
171 |                   ident: 'postcss',
172 |                   plugins: () => [
173 |                     require('postcss-flexbugs-fixes'),
174 |                     autoprefixer({
175 |                       browsers: [
176 |                         '>1%',
177 |                         'last 4 versions',
178 |                         'Firefox ESR',
179 |                         'not ie < 9', // React doesn't support IE8 anyway
180 |                       ],
181 |                       flexbox: 'no-2009',
182 |                     }),
183 |                   ],
184 |                 },
185 |               },
186 |             ],
187 |           },
188 |           // "file" loader makes sure those assets get served by WebpackDevServer.
189 |           // When you `import` an asset, you get its (virtual) filename.
190 |           // In production, they would get copied to the `build` folder.
191 |           // This loader doesn't use a "test" so it will catch all modules
192 |           // that fall through the other loaders.
193 |           {
194 |             // Exclude `js` files to keep "css" loader working as it injects
195 |             // it's runtime that would otherwise processed through "file" loader.
196 |             // Also exclude `html` and `json` extensions so they get processed
197 |             // by webpacks internal loaders.
198 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
199 |             loader: require.resolve('file-loader'),
200 |             options: {
201 |               name: 'static/media/[name].[hash:8].[ext]',
202 |             },
203 |           },
204 |         ],
205 |       },
206 |       // ** STOP ** Are you adding a new loader?
207 |       // Make sure to add the new loader(s) before the "file" loader.
208 |     ],
209 |   },
210 |   plugins: [
211 |     // Makes some environment variables available in index.html.
212 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
213 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
214 |     // In development, this will be an empty string.
215 |     new InterpolateHtmlPlugin(env.raw),
216 |     // Generates an `index.html` file with the <script> injected.
217 |     new HtmlWebpackPlugin({
218 |       inject: true,
219 |       template: paths.appHtml,
220 |     }),
221 |     // Add module names to factory functions so they appear in browser profiler.
222 |     new webpack.NamedModulesPlugin(),
223 |     // Makes some environment variables available to the JS code, for example:
224 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
225 |     new webpack.DefinePlugin(env.stringified),
226 |     // This is necessary to emit hot updates (currently CSS only):
227 |     new webpack.HotModuleReplacementPlugin(),
228 |     // Watcher doesn't work well if you mistype casing in a path so we use
229 |     // a plugin that prints an error when you attempt to do this.
230 |     // See https://github.com/facebookincubator/create-react-app/issues/240
231 |     new CaseSensitivePathsPlugin(),
232 |     // If you require a missing module and then `npm install` it, you still have
233 |     // to restart the development server for Webpack to discover it. This plugin
234 |     // makes the discovery automatic so you don't have to restart.
235 |     // See https://github.com/facebookincubator/create-react-app/issues/186
236 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
237 |     // Moment.js is an extremely popular library that bundles large locale files
238 |     // by default due to how Webpack interprets its code. This is a practical
239 |     // solution that requires the user to opt into importing specific locales.
240 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
241 |     // You can remove this if you don't use Moment.js:
242 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
243 |   ],
244 |   // Some libraries import Node modules but don't use them in the browser.
245 |   // Tell Webpack to provide empty mocks for them so importing them works.
246 |   node: {
247 |     dgram: 'empty',
248 |     fs: 'empty',
249 |     net: 'empty',
250 |     tls: 'empty',
251 |     child_process: 'empty',
252 |   },
253 |   // Turn off performance hints during development because we don't do any
254 |   // splitting or minification in interest of speed. These warnings become
255 |   // cumbersome.
256 |   performance: {
257 |     hints: false,
258 |   },
259 | };
260 | 


--------------------------------------------------------------------------------
/config/webpack.config.demo.js:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const CopyWebpackPlugin = require('copy-webpack-plugin');
  8 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 10 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 11 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 12 | const paths = require('./paths');
 13 | const getClientEnvironment = require('./env');
 14 | 
 15 | // Webpack uses `publicPath` to determine where the app is being served from.
 16 | // It requires a trailing slash, or the file assets will get an incorrect path.
 17 | const publicPath = paths.servedPath;
 18 | // Some apps do not use client-side routing with pushState.
 19 | // For these, "homepage" can be set to "." to enable relative asset paths.
 20 | const shouldUseRelativeAssetPaths = publicPath === './';
 21 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 22 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 23 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 24 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 25 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 26 | const publicUrl = '.';
 27 | // Get environment variables to inject into our app.
 28 | const env = getClientEnvironment(publicUrl);
 29 | 
 30 | // Assert this just to be safe.
 31 | // Development builds of React are slow and not intended for production.
 32 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 33 |   throw new Error('Production builds must have NODE_ENV=production.');
 34 | }
 35 | 
 36 | // Note: defined here because it will be used more than once.
 37 | const cssFilename = 'css/index.css';
 38 | 
 39 | // ExtractTextPlugin expects the build output to be flat.
 40 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 41 | // However, our output is structured with css, js and media folders.
 42 | // To have this structure working with relative paths, we have to use custom options.
 43 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 44 |   ? // Making sure that the publicPath goes back to to build folder.
 45 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 46 |   : {};
 47 | 
 48 | // This is the production configuration.
 49 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 50 | // The development configuration is different and lives in a separate file.
 51 | module.exports = {
 52 |   // Don't attempt to continue if there are any errors.
 53 |   bail: true,
 54 |   // We generate sourcemaps in production. This is slow but gives good results.
 55 |   // You can exclude the *.map files from the build during deployment.
 56 |   devtool: shouldUseSourceMap ? 'source-map' : false,
 57 |   // In production, we only want to load the app code.
 58 |   entry: [paths.appDemoIndexJs], // CRL: library index file instead of app index
 59 |   output: {
 60 |     // CRL: Updated whole block with library specific info
 61 |     path: paths.appDemoBuild,
 62 |     filename: 'index.js',
 63 |     libraryTarget: 'umd'
 64 |   },
 65 |   resolve: {
 66 |     // This allows you to set a fallback for where Webpack should look for modules.
 67 |     // We placed these paths second because we want `node_modules` to "win"
 68 |     // if there are any conflicts. This matches Node resolution mechanism.
 69 |     // https://github.com/facebookincubator/create-react-app/issues/253
 70 |     modules: ['node_modules', paths.appNodeModules].concat(
 71 |       // It is guaranteed to exist because we tweak it in `env.js`
 72 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 73 |     ),
 74 |     // These are the reasonable defaults supported by the Node ecosystem.
 75 |     // We also include JSX as a common component filename extension to support
 76 |     // some tools, although we do not recommend using it, see:
 77 |     // https://github.com/facebookincubator/create-react-app/issues/290
 78 |     // `web` extension prefixes have been added for better support
 79 |     // for React Native Web.
 80 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 81 |     alias: {
 82 |       // Support React Native Web
 83 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 84 |       'react-native': 'react-native-web'
 85 |     },
 86 |     plugins: [
 87 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 88 |       // This often causes confusion because we only process files within src/ with babel.
 89 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 90 |       // please link the files into your node_modules/ and let module-resolution kick in.
 91 |       // Make sure your source files are compiled, as they will not be processed in any way.
 92 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson])
 93 |     ]
 94 |   },
 95 |   module: {
 96 |     strictExportPresence: true,
 97 |     rules: [
 98 |       // TODO: Disable require.ensure as it's not a standard language feature.
 99 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
100 |       // { parser: { requireEnsure: false } },
101 | 
102 |       // First, run the linter.
103 |       // It's important to do this before Babel processes the JS.
104 |       {
105 |         test: /\.(js|jsx|mjs)$/,
106 |         enforce: 'pre',
107 |         use: [
108 |           {
109 |             options: {
110 |               formatter: eslintFormatter,
111 |               eslintPath: require.resolve('eslint')
112 |             },
113 |             loader: require.resolve('eslint-loader')
114 |           }
115 |         ],
116 |         include: paths.appDemoSrc // CRL: updated with library src folder
117 |       },
118 |       {
119 |         // "oneOf" will traverse all following loaders until one will
120 |         // match the requirements. When no loader matches it will fall
121 |         // back to the "file" loader at the end of the loader list.
122 |         oneOf: [
123 |           // "url" loader works just like "file" loader but it also embeds
124 |           // assets smaller than specified size as data URLs to avoid requests.
125 |           {
126 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
127 |             loader: require.resolve('url-loader'),
128 |             options: {
129 |               limit: 10000,
130 |               name: 'media/[name].[ext]'
131 |             }
132 |           },
133 |           // Process JS with Babel.
134 |           {
135 |             test: /\.(js|jsx|mjs)$/,
136 |             include: [paths.appLibSrc, paths.appDemoSrc], // CRL: updated with library src folder
137 |             loader: require.resolve('babel-loader'),
138 |             options: {
139 |               compact: true
140 |             }
141 |           },
142 |           // The notation here is somewhat confusing.
143 |           // "postcss" loader applies autoprefixer to our CSS.
144 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
145 |           // "style" loader normally turns CSS into JS modules injecting <style>,
146 |           // but unlike in development configuration, we do something different.
147 |           // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
148 |           // (second argument), then grabs the result CSS and puts it into a
149 |           // separate file in our build process. This way we actually ship
150 |           // a single CSS file in production instead of JS code injecting <style>
151 |           // tags. If you use code splitting, however, any async bundles will still
152 |           // use the "style" loader inside the async code so CSS from them won't be
153 |           // in the main CSS file.
154 |           {
155 |             test: /\.css$/,
156 |             loader: ExtractTextPlugin.extract(
157 |               Object.assign(
158 |                 {
159 |                   fallback: {
160 |                     loader: require.resolve('style-loader'),
161 |                     options: {
162 |                       hmr: false
163 |                     }
164 |                   },
165 |                   use: [
166 |                     {
167 |                       loader: require.resolve('css-loader'),
168 |                       options: {
169 |                         importLoaders: 1,
170 |                         minimize: true,
171 |                         sourceMap: shouldUseSourceMap
172 |                       }
173 |                     },
174 |                     {
175 |                       loader: require.resolve('postcss-loader'),
176 |                       options: {
177 |                         // Necessary for external CSS imports to work
178 |                         // https://github.com/facebookincubator/create-react-app/issues/2677
179 |                         ident: 'postcss',
180 |                         plugins: () => [
181 |                           require('postcss-flexbugs-fixes'),
182 |                           autoprefixer({
183 |                             browsers: [
184 |                               '>1%',
185 |                               'last 4 versions',
186 |                               'Firefox ESR',
187 |                               'not ie < 9' // React doesn't support IE8 anyway
188 |                             ],
189 |                             flexbox: 'no-2009'
190 |                           })
191 |                         ]
192 |                       }
193 |                     }
194 |                   ]
195 |                 },
196 |                 extractTextPluginOptions
197 |               )
198 |             )
199 |             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
200 |           },
201 |           // "file" loader makes sure assets end up in the `build` folder.
202 |           // When you `import` an asset, you get its filename.
203 |           // This loader doesn't use a "test" so it will catch all modules
204 |           // that fall through the other loaders.
205 |           {
206 |             loader: require.resolve('file-loader'),
207 |             // Exclude `js` files to keep "css" loader working as it injects
208 |             // it's runtime that would otherwise processed through "file" loader.
209 |             // Also exclude `html` and `json` extensions so they get processed
210 |             // by webpacks internal loaders.
211 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
212 |             options: {
213 |               name: 'media/[name].[ext]'
214 |             }
215 |           }
216 |           // ** STOP ** Are you adding a new loader?
217 |           // Make sure to add the new loader(s) before the "file" loader.
218 |         ]
219 |       }
220 |     ]
221 |   },
222 |   plugins: [
223 |     // Makes some environment variables available to the JS code, for example:
224 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
225 |     // It is absolutely essential that NODE_ENV was set to production here.
226 |     // Otherwise React will be compiled in the very slow development mode.
227 |     new InterpolateHtmlPlugin(env.raw),
228 |     // Generates an `index.html` file with the <script> injected.
229 |     new HtmlWebpackPlugin({
230 |       inject: true,
231 |       template: paths.appHtml
232 |     }),
233 |     // Add module names to factory functions so they appear in browser profiler.
234 |     new webpack.NamedModulesPlugin(),
235 |     new webpack.DefinePlugin(env.stringified),
236 |     // Minify the code.
237 |     new webpack.optimize.UglifyJsPlugin({
238 |       compress: false,
239 |       mangle: {
240 |         safari10: true
241 |       },
242 |       output: {
243 |         comments: false,
244 |         // Turned on because emoji and regex is not minified properly using default
245 |         // https://github.com/facebookincubator/create-react-app/issues/2488
246 |         ascii_only: true
247 |       },
248 |       sourceMap: shouldUseSourceMap
249 |     }),
250 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
251 |     new ExtractTextPlugin({
252 |       filename: cssFilename
253 |     }),
254 |     // Moment.js is an extremely popular library that bundles large locale files
255 |     // by default due to how Webpack interprets its code. This is a practical
256 |     // solution that requires the user to opt into importing specific locales.
257 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
258 |     // You can remove this if you don't use Moment.js:
259 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
260 |     new CopyWebpackPlugin([
261 |       { from: `${paths.appPublic}/favicon.ico`, to: paths.appDemoBuild },
262 |       { from: `${paths.appPublic}/manifest.json`, to: paths.appDemoBuild }
263 |     ])
264 |   ],
265 |   // CRL: added externals block for library
266 |   // externals: {
267 |   //  'react': 'react',
268 |   //  'react-dom': 'react-dom'
269 |   // },
270 |   // Some libraries import Node modules but don't use them in the browser.
271 |   // Tell Webpack to provide empty mocks for them so importing them works.
272 |   node: {
273 |     dgram: 'empty',
274 |     fs: 'empty',
275 |     net: 'empty',
276 |     tls: 'empty',
277 |     child_process: 'empty'
278 |   }
279 | };
280 | 


--------------------------------------------------------------------------------
/src/lib/components/Layout/Layout.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import PropTypes from "prop-types";
  3 | import reject from "lodash/reject";
  4 | 
  5 | // swap array indexes. Work only for flat arrays
  6 | const swapArrayIndexes = (arr, index1, index2) => {
  7 |   let a = arr.slice(0);
  8 |   const buff = a[index1];
  9 |   a[index1] = a[index2];
 10 |   a[index2] = buff;
 11 |   return a;
 12 | };
 13 | 
 14 | export default class Layout extends React.Component {
 15 |   constructor(props) {
 16 |     super(props);
 17 |     this.layout = React.createRef();
 18 |     this.mockupColors = [
 19 |       "#ffcccc",
 20 |       "#ccffff",
 21 |       "#ffe4cc",
 22 |       "#ccceff",
 23 |       "#fffbcc",
 24 |       "#ecccff",
 25 |       "#d6ffcc",
 26 |       "#ffccf2",
 27 |       "#f5ffcc",
 28 |       "#ccd6ff",
 29 |       "#ffdbcc",
 30 |       "#ccf0ff",
 31 |       "#ffe9cc",
 32 |       "#d8ccff",
 33 |       "#fffecc",
 34 |       "#f3ccff",
 35 |       "#ccffcd",
 36 |       "#ffcce9",
 37 |       "#eaffcc",
 38 |       "#dbccff"
 39 |     ];
 40 |     let layoutInfo = Layout.calculateLayout(props);
 41 |     this.state = {
 42 |       collapsedPanels: [], // array of indexes
 43 |       draggingPanelIndex: undefined,
 44 |       draggingPanelOverIndex: undefined,
 45 |       draggingSeparator: false,
 46 |       draggingSeparatorIndex: undefined,
 47 |       isBusyOnDragging: false, // sidebar dragging throttle
 48 |       ...layoutInfo
 49 |     };
 50 |   }
 51 | 
 52 |   static calculateLayout(props) {
 53 |     let initialLayout = [];
 54 |     let initialOrdering = [];
 55 |     let totalFixedWidth = 0;
 56 |     let totalFixedHeight = 0;
 57 |     let totalSpacerSize = 0;
 58 |     React.Children.map(props.children, (c, index) => {
 59 |       const { id } = c && c.props;
 60 |       if (id === "panel") {
 61 |         initialOrdering.push(index);
 62 |         if (c.props.fixed) {
 63 |           initialLayout.push(0);
 64 |           if (c.props.fixedWidth) {
 65 |             totalFixedWidth += c.props.fixedWidth;
 66 |           } else if (c.props.fixedHeight) {
 67 |             totalFixedHeight += c.props.fixedHeight;
 68 |           }
 69 |         } else {
 70 |           initialLayout.push(c.props.proportion);
 71 |         }
 72 |       } else if (id === "spacer") {
 73 |         totalSpacerSize += c.props.size;
 74 |       }
 75 |     });
 76 |     return {
 77 |       layout: initialLayout,
 78 |       layoutOrdering: initialOrdering,
 79 |       totalFixedWidth,
 80 |       totalFixedHeight,
 81 |       totalSpacerSize
 82 |     };
 83 |   }
 84 | 
 85 |   componentDidUpdate(prevProps, prevState, snapshot) {
 86 |     let layoutInfo = Layout.calculateLayout(this.props);
 87 |     if (layoutInfo.layout.length !== prevState.layout.length) {
 88 |       this.setState({ ...layoutInfo });
 89 |     }
 90 |   }
 91 | 
 92 |   static propTypes = {
 93 |     children: PropTypes.arrayOf(PropTypes.element),
 94 |     className: PropTypes.string,
 95 |     customCss: PropTypes.object,
 96 |     collapseSize: PropTypes.string,
 97 |     mockup: PropTypes.bool,
 98 |     orientation: PropTypes.string,
 99 |     reverse: PropTypes.bool,
100 |     onResize: PropTypes.func
101 |   };
102 | 
103 |   static defaultProps = {
104 |     className: "",
105 |     mockup: false,
106 |     orientation: "horizontal",
107 |     reverse: false,
108 |     separatorsRefreshInterval: 0,
109 |     onResize: null
110 |   };
111 | 
112 |   collapsePanel = layoutIndex => {
113 |     const { collapsedPanels } = this.state;
114 |     if (!collapsedPanels.includes(layoutIndex)) {
115 |       this.setState({ collapsedPanels: collapsedPanels.concat([layoutIndex]) });
116 |     } else {
117 |       this.setState({
118 |         collapsedPanels: reject(collapsedPanels, p => p === layoutIndex)
119 |       });
120 |     }
121 |   };
122 | 
123 |   draggingOver = layoutIndex => {
124 |     this.setState({ draggingPanelOverIndex: layoutIndex });
125 |   };
126 | 
127 |   onSeparatorDoubleClick = (draggingSeparatorIndex, defaultDblClickPos) => {
128 |     this.setState({ draggingSeparatorIndex }, () => {
129 |       this.handleSeparatorMouseMove(
130 |         this.props.orientation === "vertical"
131 |           ? { pageY: defaultDblClickPos }
132 |           : { pageX: defaultDblClickPos }
133 |       );
134 |       this.handleSeparatorMouseUp();
135 |     });
136 |   };
137 |   onSeparatorMouseDown = draggingSeparatorIndex => {
138 |     document.addEventListener("mouseup", this.handleSeparatorMouseUp);
139 |     document.addEventListener("mousemove", this.handleSeparatorMouseMove);
140 |     if (this.props.onResize) {
141 |       this.props.onResize(this.state.layout, this.state.collapsedPanels);
142 |     }
143 |     this.setState({ draggingSeparatorIndex });
144 |   };
145 |   handleSeparatorMouseMove = e => {
146 |     const { orientation, reverse, separatorsRefreshInterval } = this.props;
147 |     const rect = this.layout.current.getBoundingClientRect();
148 |     const { top, left, width, height } = rect;
149 |     const {
150 |       draggingSeparatorIndex,
151 |       isBusyOnDragging,
152 |       layout,
153 |       totalFixedWidth,
154 |       totalFixedHeight,
155 |       totalSpacerSize
156 |     } = this.state;
157 |     const newLayout = layout.slice(0);
158 |     if (!isBusyOnDragging) {
159 |       let separatorPos;
160 |       if (reverse) {
161 |         separatorPos =
162 |           orientation === "vertical"
163 |             ? height - (e.clientY - top)
164 |             : width - (e.clientX - left);
165 |       } else {
166 |         separatorPos =
167 |           orientation === "vertical" ? e.clientY - top : e.clientX - left;
168 |       }
169 | 
170 |       // separator pos limits
171 |       if (separatorPos <= 0) {
172 |         separatorPos = 1;
173 |       } else {
174 |         if (orientation === "vertical" && separatorPos >= height) {
175 |           separatorPos = height;
176 |         } else if (orientation === "horizontal" && separatorPos >= width) {
177 |           separatorPos = width;
178 |         }
179 |       }
180 | 
181 |       let flexUnitsSum = 0;
182 |       let currentFlexValue = 0;
183 |       const layoutSize =
184 |         orientation === "vertical"
185 |           ? height - totalFixedHeight - totalSpacerSize
186 |           : width - totalFixedWidth - totalSpacerSize;
187 |       newLayout.forEach(panel => {
188 |         flexUnitsSum += panel;
189 |       });
190 |       const newFlexValue = (separatorPos * flexUnitsSum) / layoutSize;
191 |       for (let i = 0; i <= draggingSeparatorIndex; i++) {
192 |         currentFlexValue += newLayout[i];
193 |       }
194 |       const relation = newFlexValue / currentFlexValue;
195 |       for (let i = 0; i <= draggingSeparatorIndex; i++) {
196 |         newLayout[i] = newLayout[i] * relation;
197 |       }
198 |       this.setState({
199 |         draggingSeparator: true,
200 |         layout: newLayout,
201 |         isBusyOnDragging: true
202 |       });
203 |       setTimeout(() => {
204 |         this.setState({ isBusyOnDragging: false });
205 |       }, separatorsRefreshInterval);
206 |     }
207 |   };
208 |   handleSeparatorMouseUp = () => {
209 |     document.removeEventListener("mouseup", this.handleSeparatorMouseUp);
210 |     document.removeEventListener("mousemove", this.handleSeparatorMouseMove);
211 |     this.setState({
212 |       draggingSeparator: false,
213 |       draggingSeparatorIndex: undefined
214 |     });
215 |   };
216 | 
217 |   startDraggingPanel = panelIndex => {
218 |     this.setState({ draggingPanelIndex: panelIndex });
219 |   };
220 | 
221 |   stopDraggingPanel = () => {
222 |     // swap panels
223 |     const {
224 |       layoutOrdering,
225 |       draggingPanelIndex,
226 |       draggingPanelOverIndex
227 |     } = this.state;
228 |     if (
229 |       layoutOrdering &&
230 |       draggingPanelIndex !== null &&
231 |       draggingPanelIndex !== undefined &&
232 |       draggingPanelOverIndex !== null &&
233 |       draggingPanelOverIndex !== undefined
234 |     ) {
235 |       const newOrder = swapArrayIndexes(
236 |         layoutOrdering,
237 |         draggingPanelIndex,
238 |         draggingPanelOverIndex
239 |       );
240 |       this.setState({
241 |         draggingPanelIndex: undefined,
242 |         draggingPanelOverIndex: undefined,
243 |         layoutOrdering: newOrder
244 |       });
245 |     } else {
246 |       this.setState({
247 |         draggingPanelIndex: undefined,
248 |         draggingPanelOverIndex: undefined
249 |       });
250 |     }
251 |   };
252 | 
253 |   render() {
254 |     const {
255 |       children,
256 |       className,
257 |       customCss,
258 |       collapseSize,
259 |       mockup,
260 |       orientation,
261 |       reverse
262 |     } = this.props;
263 |     const {
264 |       collapsedPanels,
265 |       draggingPanelIndex,
266 |       draggingPanelOverIndex,
267 |       draggingSeparator,
268 |       layout,
269 |       layoutOrdering
270 |     } = this.state;
271 |     const styles = {
272 |       horizontalLayout: {
273 |         cursor: draggingSeparator ? "col-resize" : "default",
274 |         display: "flex",
275 |         flexDirection: reverse ? "row-reverse" : "row",
276 |         height: "100%"
277 |       },
278 |       verticalLayout: {
279 |         cursor: draggingSeparator ? "row-resize" : "default",
280 |         display: "flex",
281 |         flexDirection: reverse ? "column-reverse" : "column",
282 |         height: "100%"
283 |       }
284 |     };
285 |     let panelIndex = 0;
286 |     const childrenWithProps = React.Children.map(children, (c, index) => {
287 |       const { id } = c && c.props;
288 |       let child;
289 |       if (id === "separator") {
290 |         child = React.cloneElement(c, {
291 |           disabled:
292 |             (index - 1 === 0 && children[index - 1].props.fixed) ||
293 |             (index + 1 === children.length - 1 &&
294 |               children[index + 1].props.fixed) ||
295 |             (collapsedPanels.includes(index - 1) ||
296 |               collapsedPanels.includes(index + 1)),
297 |           draggingSeparator,
298 |           onSeparatorDoubleClick: this.onSeparatorDoubleClick,
299 |           onSeparatorMouseDown: this.onSeparatorMouseDown,
300 |           orientation,
301 |           layoutIndex: panelIndex - 1
302 |         });
303 |       } else if (id === "panel") {
304 |         if (orientation === "vertical") {
305 |           child = React.cloneElement(c, {
306 |             collapseSize,
307 |             collapsed: collapsedPanels.includes(panelIndex),
308 |             collapsePanel: this.collapsePanel,
309 |             draggingOver: this.draggingOver,
310 |             draggingPanelIndex,
311 |             draggingSeparator,
312 |             flex: c.props.fixed ? "none" : layout[panelIndex],
313 |             height: c.props.fixedHeight,
314 |             isDraggingOver: panelIndex === draggingPanelOverIndex,
315 |             layoutIndex: panelIndex,
316 |             mockupStyle: mockup
317 |               ? { background: this.mockupColors[index] }
318 |               : null,
319 |             order: layoutOrdering[index],
320 |             orientation,
321 |             startDragging: this.startDraggingPanel,
322 |             stopDragging: this.stopDraggingPanel
323 |           });
324 |         } else {
325 |           child = React.cloneElement(c, {
326 |             collapseSize,
327 |             collapsed: collapsedPanels.includes(panelIndex),
328 |             collapsePanel: this.collapsePanel,
329 |             draggingOver: this.draggingOver,
330 |             draggingPanelIndex,
331 |             draggingSeparator,
332 |             width: c.props.fixedWidth,
333 |             flex: c.props.fixed ? "none" : layout[panelIndex],
334 |             isDraggingOver: panelIndex === draggingPanelOverIndex,
335 |             layoutIndex: panelIndex,
336 |             mockupStyle: mockup
337 |               ? {
338 |                   background: this.mockupColors[
339 |                     this.mockupColors.length - index
340 |                   ]
341 |                 }
342 |               : null,
343 |             order: layoutOrdering[index],
344 |             orientation,
345 |             startDragging: this.startDraggingPanel,
346 |             stopDragging: this.stopDraggingPanel
347 |           });
348 |         }
349 |         panelIndex += 1;
350 |       } else if (id === "spacer") {
351 |         child = React.cloneElement(c, {
352 |           orientation
353 |         });
354 |       } else {
355 |         if (orientation === "vertical") {
356 |           child = React.cloneElement(c, {
357 |             niceReactLayoutProps: {
358 |               layoutIndex: panelIndex,
359 |               mockupStyle: mockup
360 |                 ? {
361 |                     background: this.mockupColors[
362 |                       this.mockupColors.length - index
363 |                     ]
364 |                   }
365 |                 : null,
366 |               orientation
367 |             }
368 |           });
369 |         } else {
370 |           child = React.cloneElement(c, {
371 |             niceReactLayoutProps: {
372 |               layoutIndex: panelIndex,
373 |               mockupStyle: mockup
374 |                 ? {
375 |                     background: this.mockupColors[
376 |                       this.mockupColors.length - index
377 |                     ]
378 |                   }
379 |                 : null,
380 |               orientation
381 |             }
382 |           });
383 |         }
384 |       }
385 |       return child;
386 |     });
387 |     return (
388 |       <div
389 |         ref={this.layout}
390 |         style={Object.assign(
391 |           {},
392 |           orientation === "vertical"
393 |             ? styles.verticalLayout
394 |             : styles.horizontalLayout,
395 |           customCss
396 |         )}
397 |         className={className}
398 |       >
399 |         {childrenWithProps}
400 |       </div>
401 |     );
402 |   }
403 | }
404 | 


--------------------------------------------------------------------------------
/src/demo/App.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import ScrollspyNav from "react-scrollspy-nav";
  3 | import {
  4 |   HorizontalLayout,
  5 |   VerticalLayout,
  6 |   Panel,
  7 |   Separator
  8 | } from "../lib/components/Layout";
  9 | import "./App.css";
 10 | import version from "../version.json";
 11 | 
 12 | const mockupContent = (
 13 |   <p>
 14 |     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
 15 |     nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
 16 |     wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
 17 |     lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
 18 |     dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
 19 |     dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
 20 |     dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
 21 |     feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
 22 |     congue nihil imperdiet doming id quod mazim placerat facer possim assum.
 23 |   </p>
 24 | );
 25 | 
 26 | const catUrls = [
 27 |   `http://placekitten.com/${300 + Math.floor(Math.random() * 5)}/${200 +
 28 |     Math.floor(Math.random() * 5)}`,
 29 |   `http://placekitten.com/${300 + Math.floor(Math.random() * 5)}/${200 +
 30 |     Math.floor(Math.random() * 5)}`,
 31 |   `http://placekitten.com/${300 + Math.floor(Math.random() * 5)}/${200 +
 32 |     Math.floor(Math.random() * 5)}`,
 33 |   `http://placekitten.com/${300 + Math.floor(Math.random() * 5)}/${200 +
 34 |     Math.floor(Math.random() * 5)}`,
 35 |   `http://placekitten.com/${300 + Math.floor(Math.random() * 5)}/${200 +
 36 |     Math.floor(Math.random() * 5)}`,
 37 |   `http://placekitten.com/${300 + Math.floor(Math.random() * 5)}/${200 +
 38 |     Math.floor(Math.random() * 5)}`
 39 | ];
 40 | 
 41 | const catPanel = (proportion, imageIndex) => (
 42 |   <Panel
 43 |     customCss={{
 44 |       backgroundImage: `url('${catUrls[imageIndex]}')`,
 45 |       backgroundPosition: "center",
 46 |       flex: "0 0 200px",
 47 |       flexWrap: "wrap",
 48 |       height: "200px",
 49 |       overflow: "hidden"
 50 |     }}
 51 |     draggable
 52 |     droppable
 53 |     proportion={proportion}
 54 |     render={({ size }) => <div style={{ width: "100%", height: "100%" }} />}
 55 |   />
 56 | );
 57 | 
 58 | const Header = ({ backgroundColor, message, niceReactLayoutProps }) => (
 59 |   <div style={{ backgroundColor, flex: "0 0 40px" }}>{message}</div>
 60 | );
 61 | 
 62 | const CustomPanel = ({ children, niceReactLayoutProps: { mockupStyle } }) => (
 63 |   <div
 64 |     style={{
 65 |       backgroundColor: (mockupStyle && mockupStyle.background) || "black",
 66 |       flex: "3"
 67 |     }}
 68 |   >
 69 |     {children}
 70 |   </div>
 71 | );
 72 | 
 73 | class App extends Component {
 74 |   constructor(props) {
 75 |     super(props);
 76 |     this.state = {
 77 |       dynamicPanels: [
 78 |         {
 79 |           proportion: 1
 80 |         },
 81 |         { proportion: 2 }
 82 |       ]
 83 |     };
 84 |   }
 85 |   addSmallPanel = () => {
 86 |     this.setState({
 87 |       dynamicPanels: this.state.dynamicPanels.concat({ proportion: 1 })
 88 |     });
 89 |   };
 90 | 
 91 |   addBigPanel = () => {
 92 |     this.setState({
 93 |       dynamicPanels: this.state.dynamicPanels.concat({ proportion: 2 })
 94 |     });
 95 |   };
 96 | 
 97 |   removePanel = () => {
 98 |     this.setState({
 99 |       dynamicPanels: this.state.dynamicPanels.slice(
100 |         0,
101 |         this.state.dynamicPanels.length - 1
102 |       )
103 |     });
104 |   };
105 |   render() {
106 |     const { dynamicPanels } = this.state;
107 |     const styles = {
108 |       collapseButton: {
109 |         background: "azure",
110 |         border: 0,
111 |         float: "right",
112 |         outline: "none"
113 |       },
114 |       example: {
115 |         width: "600px",
116 |         height: "400px",
117 |         border: "1px solid gray",
118 |         borderRadius: "4px",
119 |         margin: "10px 0px"
120 |       },
121 |       github: {
122 |         width: "32px",
123 |         height: "32px"
124 |       },
125 |       app: {
126 |         display: "flex",
127 |         alignItems: "flex-start"
128 |       },
129 |       main: {
130 |         display: "flex",
131 |         flexDirection: "column",
132 |         alignItems: "center",
133 |         marginTop: "20px"
134 |       },
135 |       navList: {
136 |         listStyle: "none"
137 |       },
138 |       scrollSpy: {
139 |         position: "sticky",
140 |         right: "0px",
141 |         top: "0px",
142 |         width: "225px",
143 |         height: "300px"
144 |       },
145 |       tableTop: {
146 |         width: "100%",
147 |         height: "100%",
148 |         background: "rgba(0, 0, 0, 0.5)",
149 |         textAlign: "center"
150 |       },
151 |       tableBottom: {
152 |         width: "100%",
153 |         height: "100%",
154 |         background: "rgba(0, 0, 0, 0.2)",
155 |         textAlign: "center"
156 |       }
157 |     };
158 |     return (
159 |       <div style={styles.app}>
160 |         <div style={styles.scrollSpy}>
161 |           <ScrollspyNav
162 |             scrollTargetIds={[
163 |               "basic",
164 |               "nested-layouts",
165 |               "separator",
166 |               "panels-with-size",
167 |               "collapsible-sidebar",
168 |               "multiple-collapsible-panels",
169 |               "multi-column-panel",
170 |               "render-prop",
171 |               "drag-and-drop",
172 |               "dynamic-panels",
173 |               "custom-panels"
174 |             ]}
175 |             offset={100}
176 |             activeNavClass="is-active"
177 |             scrollDuration="500"
178 |             headerBackground="true"
179 |           >
180 |             <ul style={styles.navList}>
181 |               <li>
182 |                 <a href="#basic">Basic example</a>
183 |               </li>
184 |               <li>
185 |                 <a href="#nested-layouts">Nested layouts</a>
186 |               </li>
187 |               <li>
188 |                 <a href="#separator">Separator</a>
189 |               </li>
190 |               <li>
191 |                 <a href="#panels-with-size">Panels with size</a>
192 |               </li>
193 |               <li>
194 |                 <a href="#collapsible-sidebar">Collapsible sidebar</a>
195 |               </li>
196 |               <li>
197 |                 <a href="#multiple-collapsible-panels">
198 |                   Multiple collapsible panels
199 |                 </a>
200 |               </li>
201 |               <li>
202 |                 <a href="#multi-column-panel">Multi-column panel</a>
203 |               </li>
204 |               <li>
205 |                 <a href="#render-prop">Panels with render prop</a>
206 |               </li>
207 |               <li>
208 |                 <a href="#drag-and-drop">Drag and drop panels</a>
209 |               </li>
210 |               <li>
211 |                 <a href="#dynamic-panels">Dynamic panels</a>
212 |               </li>
213 |               <li>
214 |                 <a href="#custom-panels">Custom panels</a>
215 |               </li>
216 |             </ul>
217 |           </ScrollspyNav>
218 |         </div>
219 |         <div style={styles.main}>
220 |           <div
221 |             style={{
222 |               display: "inline-block",
223 |               position: "relative",
224 |               width: "600px"
225 |             }}
226 |           >
227 |             <div style={{ width: "600px" }}>
228 |               <img src="./logo.png" />
229 |               <h1 style={{ display: "inline-block", marginLeft: "10px" }}>
230 |                 nice-react-layout
231 |                 <small style={{ marginLeft: "20px" }}>{version.number}</small>
232 |               </h1>
233 |               <a
234 |                 style={{ float: "right" }}
235 |                 href="https://github.com/ekros/nice-react-layout"
236 |               >
237 |                 <img
238 |                   style={styles.github}
239 |                   src="https://github.com/favicon.ico"
240 |                   alt="github"
241 |                 />
242 |               </a>
243 |               <p>
244 |                 A set of React components to create complex flexbox-based
245 |                 layouts without knowing what flexbox is.
246 |               </p>
247 |             </div>
248 |             <br />
249 |             <div id="basic" className="pt-card">
250 |               <h4>Basic example</h4>
251 |               <pre className="prettyprint">
252 |                 {`
253 |   <HorizontalLayout mockup>
254 |     <Panel proportion={1} />
255 |     <Panel proportion={3}>Lorem ipsum...</Panel>
256 |   </HorizontalLayout>
257 |                   `}
258 |               </pre>
259 |               <div style={styles.example}>
260 |                 <HorizontalLayout mockup>
261 |                   <Panel proportion={1} />
262 |                   <Panel proportion={3}>
263 |                     {mockupContent}
264 |                     {mockupContent}
265 |                     {mockupContent}
266 |                   </Panel>
267 |                 </HorizontalLayout>
268 |               </div>
269 |             </div>
270 |             <br />
271 |             <div id="nested-layouts" className="pt-card">
272 |               <h4>Nested layouts</h4>
273 |               <pre className="prettyprint">
274 |                 {`
275 |   <VerticalLayout mockup>
276 |     <Panel fixed fixedHeight={50} />
277 |     <Panel>
278 |       <HorizontalLayout mockup>
279 |         <Panel />
280 |         <Panel proportion={3} />
281 |       </HorizontalLayout>
282 |     </Panel>
283 |   </VerticalLayout>
284 |                     `}
285 |               </pre>
286 |               <div style={styles.example}>
287 |                 <VerticalLayout mockup>
288 |                   <Panel fixed fixedHeight={50} />
289 |                   <Panel>
290 |                     <HorizontalLayout mockup>
291 |                       <Panel />
292 |                       <Panel proportion={3} />
293 |                     </HorizontalLayout>
294 |                   </Panel>
295 |                 </VerticalLayout>
296 |               </div>
297 |             </div>
298 |             <br />
299 |             <div id="separator" className="pt-card">
300 |               <h4>Separator</h4>
301 |               <h6>Horizontal</h6>
302 |               <pre className="prettyprint">
303 |                 {`
304 |   <VerticalLayout mockup>
305 |     <Panel fixed fixedHeight={50} />
306 |     <Panel>
307 |       <HorizontalLayout mockup>
308 |         <Panel />
309 |         <Separator />
310 |         <Panel />
311 |         <Panel fixed fixedWidth={100} />
312 |       </HorizontalLayout>
313 |     </Panel>
314 |   </VerticalLayout>
315 |                       `}
316 |               </pre>
317 |               <div style={styles.example}>
318 |                 <VerticalLayout mockup>
319 |                   <Panel fixed fixedHeight={50} />
320 |                   <Panel>
321 |                     <HorizontalLayout mockup>
322 |                       <Panel />
323 |                       <Separator />
324 |                       <Panel />
325 |                       <Panel fixed fixedWidth={100} />
326 |                     </HorizontalLayout>
327 |                   </Panel>
328 |                 </VerticalLayout>
329 |               </div>
330 |               <h6>Vertical</h6>
331 |               <pre className="prettyprint">
332 |                 {`
333 |   <VerticalLayout mockup>
334 |     <Panel fixed fixedHeight={50} />
335 |     <Panel>
336 |       <VerticalLayout mockup>
337 |         <Panel />
338 |         <Separator />
339 |         <Panel />
340 |         <Panel fixed fixedHeight={100} />
341 |       </VerticalLayout>
342 |     </Panel>
343 |   </VerticalLayout>
344 |                         `}
345 |               </pre>
346 |               <div style={styles.example}>
347 |                 <VerticalLayout mockup>
348 |                   <Panel fixed fixedHeight={50} />
349 |                   <Panel>
350 |                     <VerticalLayout mockup>
351 |                       <Panel />
352 |                       <Separator />
353 |                       <Panel />
354 |                       <Panel fixed fixedHeight={100} />
355 |                     </VerticalLayout>
356 |                   </Panel>
357 |                 </VerticalLayout>
358 |               </div>
359 |             </div>
360 |             <br />
361 |             <div id="panels-with-size" className="pt-card">
362 |               <h4>Panels with size (drag separators to see it)</h4>
363 |               <pre className="prettyprint">
364 |                 {`
365 |   <VerticalLayout mockup>
366 |     <Panel fixed fixedHeight={50} />
367 |     <Panel>
368 |       <HorizontalLayout mockup>
369 |         <Panel>
370 |           <VerticalLayout mockup>
371 |             <Panel showSize />
372 |             <Separator />
373 |             <Panel showSize />
374 |           </VerticalLayout>
375 |         </Panel>
376 |         <Separator />
377 |         <Panel showSize />
378 |         <Panel fixed fixedWidth={100} />
379 |       </HorizontalLayout>
380 |     </Panel>
381 |   </VerticalLayout>
382 |                           `}
383 |               </pre>
384 |               <div style={styles.example}>
385 |                 <VerticalLayout mockup>
386 |                   <Panel fixed fixedHeight={50} />
387 |                   <Panel>
388 |                     <HorizontalLayout mockup>
389 |                       <Panel>
390 |                         <VerticalLayout mockup>
391 |                           <Panel showSize />
392 |                           <Separator />
393 |                           <Panel showSize />
394 |                         </VerticalLayout>
395 |                       </Panel>
396 |                       <Separator />
397 |                       <Panel showSize />
398 |                       <Panel fixed fixedWidth={100} />
399 |                     </HorizontalLayout>
400 |                   </Panel>
401 |                 </VerticalLayout>
402 |               </div>
403 |             </div>
404 |             <br />
405 |             <div id="collapsible-sidebar" className="pt-card">
406 |               <h4>Collapsible sidebar</h4>
407 |               <pre className="prettyprint">
408 |                 {`
409 |   <VerticalLayout mockup>
410 |     <Panel fixed fixedHeight={50} />
411 |     <Panel>
412 |       <HorizontalLayout mockup>
413 |         <Panel
414 |           sidebar
415 |           collapsible
416 |           collapseButtonContent="<"
417 |           collapseButtonCollapsedContent=">"
418 |           collapseButtonStyle={{
419 |             background: "white",
420 |             border: "1px solid lightgray"
421 |           }}
422 |           />
423 |         <Separator />
424 |         <Panel proportion={3} />
425 |       </HorizontalLayout>
426 |     </Panel>
427 |   </VerticalLayout>
428 |                             `}
429 |               </pre>
430 |               <div style={styles.example}>
431 |                 <VerticalLayout mockup>
432 |                   <Panel fixed fixedHeight={50} />
433 |                   <Panel>
434 |                     <HorizontalLayout mockup>
435 |                       <Panel
436 |                         sidebar
437 |                         collapsible
438 |                         collapseButtonContent="<"
439 |                         collapseButtonCollapsedContent=">"
440 |                         collapseButtonStyle={{
441 |                           background: "white",
442 |                           border: "1px solid lightgray"
443 |                         }}
444 |                       />
445 |                       <Separator />
446 |                       <Panel proportion={3} />
447 |                     </HorizontalLayout>
448 |                   </Panel>
449 |                 </VerticalLayout>
450 |               </div>
451 |             </div>
452 |             <br />
453 |             <div id="multiple-collapsible-panels" className="pt-card">
454 |               <h4>Multiple collapsible panels</h4>
455 |               <pre className="prettyprint">
456 |                 {`
457 |   <VerticalLayout mockup>
458 |     <Panel fixed fixedHeight={50} />
459 |     <Panel>
460 |       <HorizontalLayout mockup>
461 |         <Panel
462 |           sidebar
463 |           collapsible
464 |           collapseButtonContent="-"
465 |           collapseButtonCollapsedContent="+"
466 |           collapseButtonStyle={{
467 |             background: "white",
468 |             border: "1px solid lightgray"
469 |           }}
470 |           />
471 |         <Panel
472 |           sidebar
473 |           collapsible
474 |           collapseButtonContent="-"
475 |           collapseButtonCollapsedContent="+"
476 |           collapseButtonStyle={{
477 |             background: "white",
478 |             border: "1px solid lightgray"
479 |           }}
480 |           />
481 |         <Panel
482 |           sidebar
483 |           collapsible
484 |           collapseButtonContent="-"
485 |           collapseButtonCollapsedContent="+"
486 |           collapseButtonStyle={{
487 |             background: "white",
488 |             border: "1px solid lightgray"
489 |           }}
490 |           />
491 |       </HorizontalLayout>
492 |     </Panel>
493 |   </VerticalLayout>
494 |                               `}
495 |               </pre>
496 |               <div style={styles.example}>
497 |                 <VerticalLayout mockup>
498 |                   <Panel fixed fixedHeight={50} />
499 |                   <Panel>
500 |                     <HorizontalLayout mockup>
501 |                       <Panel
502 |                         sidebar
503 |                         collapsible
504 |                         collapseButtonContent="-"
505 |                         collapseButtonCollapsedContent="+"
506 |                         collapseButtonStyle={{
507 |                           background: "white",
508 |                           border: "1px solid lightgray"
509 |                         }}
510 |                       />
511 |                       <Panel
512 |                         sidebar
513 |                         collapsible
514 |                         collapseButtonContent="-"
515 |                         collapseButtonCollapsedContent="+"
516 |                         collapseButtonStyle={{
517 |                           background: "white",
518 |                           border: "1px solid lightgray"
519 |                         }}
520 |                       />
521 |                       <Panel
522 |                         sidebar
523 |                         collapsible
524 |                         collapseButtonContent="-"
525 |                         collapseButtonCollapsedContent="+"
526 |                         collapseButtonStyle={{
527 |                           background: "white",
528 |                           border: "1px solid lightgray"
529 |                         }}
530 |                       />
531 |                     </HorizontalLayout>
532 |                   </Panel>
533 |                 </VerticalLayout>
534 |               </div>
535 |             </div>
536 |             <br />
537 |             <div id="multi-column-panel" className="pt-card">
538 |               <h4>Multi-column panel</h4>
539 |               Note you can pass a custom style using the customCss prop
540 |               <pre className="prettyprint">
541 |                 {`
542 |   <VerticalLayout mockup>
543 |     <Panel fixed fixedHeight={50} />
544 |     <Panel>
545 |       <HorizontalLayout mockup>
546 |         <Panel />
547 |         <Separator />
548 |         <Panel
549 |           columns={2}
550 |           customCss={{
551 |             columnRuleStyle: 'solid',
552 |             columnRule: '2px solid gray' }}>
553 |             Lorem ipsum...
554 |           </Panel>
555 |         </HorizontalLayout>
556 |       </Panel>
557 |     </VerticalLayout>
558 |                                   `}
559 |               </pre>
560 |               <div style={styles.example}>
561 |                 <VerticalLayout mockup>
562 |                   <Panel fixed fixedHeight={50} />
563 |                   <Panel>
564 |                     <HorizontalLayout mockup>
565 |                       <Panel />
566 |                       <Separator />
567 |                       <Panel
568 |                         columns={2}
569 |                         customCss={{
570 |                           columnRuleStyle: "solid",
571 |                           columnRule: "2px solid gray"
572 |                         }}
573 |                       >
574 |                         {mockupContent}
575 |                       </Panel>
576 |                     </HorizontalLayout>
577 |                   </Panel>
578 |                 </VerticalLayout>
579 |               </div>
580 |             </div>
581 |             <br />
582 |             <div id="render-prop" className="pt-card">
583 |               <h4>Panels with render prop</h4>
584 |               In this example, we use the panel size to change its background
585 |               <pre className="prettyprint">
586 |                 {`
587 |   <VerticalLayout mockup>
588 |     <Panel fixed fixedHeight={50} />
589 |     <Panel>
590 |       <HorizontalLayout mockup>
591 |         <Panel>
592 |           <VerticalLayout mockup>
593 |             <Panel
594 |               render={({ size }) => (
595 |                 <div
596 |                   style={{
597 |                     position: "absolute",
598 |                     color: "white",
599 |                     width: "100%",
600 |                     height: "100%",
601 |                     lineHeight: \`\${size.height}px\`,
602 |                     background: \`rgb(0, \${size.width /
603 |                       4}, \${size.height / 4})\`,
604 |                       textAlign: "center"
605 |                     }}
606 |                     >
607 |                     Resize me
608 |                   </div>
609 |                 )}
610 |                 />
611 |               <Separator />
612 |               <Panel />
613 |             </VerticalLayout>
614 |           </Panel>
615 |           <Separator />
616 |           <Panel />
617 |         </HorizontalLayout>
618 |       </Panel>
619 |     </VerticalLayout>
620 |                                       `}
621 |               </pre>
622 |               <div style={styles.example}>
623 |                 <VerticalLayout mockup>
624 |                   <Panel fixed fixedHeight={50} />
625 |                   <Panel>
626 |                     <HorizontalLayout mockup>
627 |                       <Panel>
628 |                         <VerticalLayout mockup>
629 |                           <Panel
630 |                             render={({ size }) => (
631 |                               <div
632 |                                 style={{
633 |                                   position: "absolute",
634 |                                   color: "white",
635 |                                   width: "100%",
636 |                                   height: "100%",
637 |                                   lineHeight: `${size.height}px`,
638 |                                   background: `rgb(0, ${size.width /
639 |                                     4}, ${size.height / 4})`,
640 |                                   textAlign: "center"
641 |                                 }}
642 |                               >
643 |                                 Resize me
644 |                               </div>
645 |                             )}
646 |                           />
647 |                           <Separator />
648 |                           <Panel />
649 |                         </VerticalLayout>
650 |                       </Panel>
651 |                       <Separator />
652 |                       <Panel />
653 |                     </HorizontalLayout>
654 |                   </Panel>
655 |                 </VerticalLayout>
656 |               </div>
657 |             </div>
658 |             <br />
659 |             <div id="drag-and-drop" className="pt-card">
660 |               <h4>Drag and drop panels</h4>
661 |               Note: only works on panels in the same layout
662 |               <pre className="prettyprint">
663 |                 {`
664 |   <HorizontalLayout
665 |     customCss={{
666 |       width: "600px",
667 |       overflow: "hidden",
668 |       flexWrap: "wrap"
669 |     }}
670 |     >
671 |     <Panel
672 |       customCss={{
673 |         backgroundImage: url(http://placekitten.com/301/202),
674 |         backgroundPosition: "center",
675 |         flex: "0 0 200px",
676 |         flexWrap: "wrap",
677 |         height: "200px",
678 |         overflow: "hidden"
679 |       }}
680 |       draggable
681 |       droppable
682 |       proportion={proportion}
683 |       render={({ size }) => (
684 |         <div style={{ width: "100%", height: "100%" }} />
685 |       )}
686 |       />
687 |     ...
688 |   </HorizontalLayout>
689 |                                           `}
690 |               </pre>
691 |               <h6>
692 |                 Images provided by{" "}
693 |                 <a
694 |                   href="http://placekitten.com/"
695 |                   target="_blank"
696 |                   rel="noopener noreferrer"
697 |                 >
698 |                   placekitten
699 |                 </a>
700 |               </h6>
701 |               <div style={styles.example}>
702 |                 <HorizontalLayout
703 |                   customCss={{
704 |                     width: "600px",
705 |                     overflow: "hidden",
706 |                     flexWrap: "wrap"
707 |                   }}
708 |                 >
709 |                   {catPanel(0, 0)}
710 |                   {catPanel(0, 1)}
711 |                   {catPanel(0, 2)}
712 |                   {catPanel(0, 3)}
713 |                   {catPanel(0, 4)}
714 |                   {catPanel(0, 5)}
715 |                 </HorizontalLayout>
716 |               </div>
717 |             </div>
718 |             <br />
719 |             <div id="dynamic-panels" className="pt-card">
720 |               <h4>Drag and drop - 2</h4>
721 |               <pre className="prettyprint">
722 |                 {`
723 |   <HorizontalLayout
724 |     mockup
725 |     customCss={{
726 |       width: "600px",
727 |       overflow: "hidden",
728 |       flexWrap: "wrap"
729 |     }}
730 |     >
731 |     <Panel draggable droppable centered>
732 |       Drag and drop!
733 |     </Panel>
734 |     <Panel draggable droppable centered>
735 |       Drag and drop!
736 |     </Panel>
737 |     <Panel proportion={2} draggable centered>
738 |       Only drag
739 |     </Panel>
740 |     <Panel droppable centered>
741 |       Only drop
742 |     </Panel>
743 |   </HorizontalLayout>
744 |                                             `}
745 |               </pre>
746 |               <div style={styles.example}>
747 |                 <HorizontalLayout
748 |                   mockup
749 |                   customCss={{
750 |                     width: "600px",
751 |                     overflow: "hidden",
752 |                     flexWrap: "wrap"
753 |                   }}
754 |                 >
755 |                   <Panel draggable droppable centered>
756 |                     Drag and drop!
757 |                   </Panel>
758 |                   <Panel draggable droppable centered>
759 |                     Drag and drop!
760 |                   </Panel>
761 |                   <Panel proportion={2} draggable centered>
762 |                     Only drag
763 |                   </Panel>
764 |                   <Panel droppable centered>
765 |                     Only drop
766 |                   </Panel>
767 |                 </HorizontalLayout>
768 |               </div>
769 |             </div>
770 |             <div className="pt-card">
771 |               <h4>Dynamic panels</h4>
772 |               <button onClick={this.addSmallPanel}>Add SMALL panel</button>
773 |               <button onClick={this.addBigPanel}>Add BIG panel</button>
774 |               <button onClick={this.removePanel}>Remove panel</button>
775 |               <div style={styles.example}>
776 |                 <HorizontalLayout
777 |                   mockup
778 |                   customCss={{
779 |                     width: "600px",
780 |                     overflow: "hidden",
781 |                     flexWrap: "wrap"
782 |                   }}
783 |                 >
784 |                   {dynamicPanels &&
785 |                     dynamicPanels.map((p, index) => (
786 |                       <Panel
787 |                         key={index}
788 |                         proportion={(p && p.proportion) || undefined}
789 |                         draggable
790 |                         droppable
791 |                       />
792 |                     ))}
793 |                 </HorizontalLayout>
794 |               </div>
795 |             </div>
796 |             <div id="custom-panels" className="pt-card">
797 |               <h4>
798 |                 Custom panel components <b>(EXPERIMENTAL)</b>
799 |               </h4>
800 |               <p>
801 |                 Instead of using the Panel component, you can use your own
802 |                 component (<b>Header</b> and <b>CustomPanel</b> are
803 |                 user-created)
804 |               </p>
805 |               <p>
806 |                 It will receive a niceReactLayoutProps prop with (almost) all
807 |                 you need to make it work as a normal panel.
808 |               </p>
809 |               <pre className="prettyprint">
810 |                 {`
811 |   <VerticalLayout mockup>
812 |     <Header
813 |       backgroundColor="crimson"
814 |       message={"I'm a custom header"}
815 |     />
816 |     <Panel>
817 |       <HorizontalLayout mockup>
818 |         <Panel
819 |           sidebar
820 |           collapsible
821 |           collapseButtonContent="<"
822 |           collapseButtonCollapsedContent=">"
823 |           collapseButtonStyle={{
824 |             background: "white",
825 |             border: "1px solid lightgray"
826 |           }}
827 |         />
828 |       <CustomPanel>I'm a custom panel and I'm getting the mockup
829 |         background color as a prop.</CustomPanel>
830 |       </HorizontalLayout>
831 |     </Panel>
832 |   </VerticalLayout>
833 |        `}
834 |               </pre>
835 |               <div style={styles.example}>
836 |                 <VerticalLayout mockup>
837 |                   <Header
838 |                     backgroundColor="crimson"
839 |                     message={"I'm a custom header"}
840 |                   />
841 |                   <Panel>
842 |                     <HorizontalLayout mockup>
843 |                       <Panel
844 |                         sidebar
845 |                         collapsible
846 |                         collapseButtonContent="<"
847 |                         collapseButtonCollapsedContent=">"
848 |                         collapseButtonStyle={{
849 |                           background: "white",
850 |                           border: "1px solid lightgray"
851 |                         }}
852 |                       />
853 |                       <CustomPanel>
854 |                         I'm a custom panel and I'm getting the mockup background
855 |                         color as a prop.
856 |                       </CustomPanel>
857 |                     </HorizontalLayout>
858 |                   </Panel>
859 |                 </VerticalLayout>
860 |               </div>
861 |             </div>
862 |           </div>
863 |         </div>
864 |       </div>
865 |     );
866 |   }
867 | }
868 | 
869 | export default App;
870 | 


--------------------------------------------------------------------------------