├── example ├── index.css ├── App.test.js ├── index.js ├── Block.js ├── App.css ├── App.js └── registerServiceWorker.js ├── public ├── favicon.ico ├── manifest.json └── index.html ├── .babelrc ├── src ├── index.js ├── react-minimap.css ├── components │ └── Child.js ├── __tests__ │ └── Minimap.spec.js └── react-minimap.js ├── config ├── jest │ ├── fileTransform.js │ └── cssTransform.js ├── polyfills.js ├── paths.js ├── env.js ├── webpackDevServer.config.js ├── webpack.config.dev.js └── webpack.config.prod.js ├── dist ├── react-minimap.css └── react-minimap.js ├── .gitignore ├── index.html ├── scripts ├── test.js ├── start.js └── build.js ├── webpack.production.config.js ├── LICENCE ├── README.md └── package.json /example/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeremy-carbonne/react-minimap/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react", "stage-0"], 3 | "plugins": ["transform-runtime"] 4 | } 5 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export default Minimap from './react-minimap' 2 | export {default as Child} from './components/Child' -------------------------------------------------------------------------------- /example/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /dist/react-minimap.css: -------------------------------------------------------------------------------- 1 | .minimap-viewport{position:absolute;box-sizing:border-box;background-color:rgba(0,0,0,.4);z-index:1;cursor:move}.minimap{float:right;position:fixed;right:0;z-index:1;margin:10px;background-color:rgba(0,0,0,.29);border:1px solid rgba(0,0,0,.17)}.minimap-container{width:100%;height:100%}.minimap-container-scroll{overflow:scroll;width:100%;height:100%}.minimap-children{background:#ccc;border:1px solid #000;box-sizing:border-box} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | 10 | # misc 11 | .DS_Store 12 | .env.local 13 | .env.development.local 14 | .env.test.local 15 | .env.production.local 16 | 17 | npm-debug.log* 18 | yarn-debug.log* 19 | yarn-error.log* 20 | 21 | 22 | # Build 23 | example/build/app.js 24 | 25 | # Logs 26 | logs 27 | *.log 28 | 29 | # Dependency directory 30 | node_modules 31 | 32 | .idea -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | React minimap
-------------------------------------------------------------------------------- /src/react-minimap.css: -------------------------------------------------------------------------------- 1 | .minimap-viewport { 2 | position: absolute; 3 | box-sizing: border-box; 4 | background-color: rgba(0, 0, 0, 0.4); 5 | z-index: 1; 6 | cursor: move; 7 | } 8 | 9 | .minimap { 10 | float: right; 11 | position: fixed; 12 | right: 0; 13 | z-index: 1; 14 | margin: 10px; 15 | background-color: rgba(0, 0, 0, 0.29); 16 | border: 1px solid rgba(0, 0, 0, 0.17); 17 | } 18 | 19 | .minimap-container { 20 | width: 100%; 21 | height: 100%; 22 | } 23 | 24 | .minimap-container-scroll { 25 | overflow: scroll; 26 | width: 100%; 27 | height: 100%; 28 | } 29 | 30 | .minimap-children { 31 | background: #CCC; 32 | border: 1px solid black; 33 | box-sizing: border-box; 34 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/components/Child.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types' 3 | import '../react-minimap.css' 4 | 5 | 6 | export class Child extends React.Component { 7 | static propTypes = { 8 | width: PropTypes.number.isRequired, 9 | height: PropTypes.number.isRequired, 10 | top: PropTypes.number.isRequired, 11 | left: PropTypes.number.isRequired, 12 | node: PropTypes.any, 13 | }; 14 | 15 | render() { 16 | const {width, height, left, top} = this.props 17 | return ( 18 |
28 | ); 29 | } 30 | } 31 | 32 | export default Child 33 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/__tests__/Minimap.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Minimap from '../react-minimap' 3 | import { render, configure } from 'enzyme' 4 | import Adapter from 'enzyme-adapter-react-16' 5 | import sinon from 'sinon' 6 | 7 | configure({ adapter: new Adapter() }) 8 | 9 | describe('Minimap', () => { 10 | 11 | it('should mount without any warning', () => { 12 | // react writes to console.error on a PropType error :( 13 | const errors = [] 14 | sinon.stub(console, 'error').callsFake(error => { 15 | errors.push(error) 16 | }) 17 | 18 | render( 19 |
20 | 21 |
    22 |
  • Hello Minimap
  • 23 |
  • Hello World
  • 24 |
  • Hello Blah
  • 25 |
26 |
27 |
28 | ) 29 | expect(errors).toEqual([]) 30 | }) 31 | 32 | }) -------------------------------------------------------------------------------- /webpack.production.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const ExtractTextPlugin = require("extract-text-webpack-plugin"); 3 | /** 4 | * This is the Webpack configuration file for production. 5 | */ 6 | module.exports = { 7 | entry: "./src/react-minimap", 8 | 9 | output: { 10 | library: 'ReactEmoji', 11 | libraryTarget: 'umd', 12 | path: __dirname + "/dist/", 13 | filename: "react-minimap.js" 14 | }, 15 | 16 | externals: [ 17 | { 18 | "react": { 19 | root: "React", 20 | commonjs2: "react", 21 | commonjs: "react", 22 | amd: "react" 23 | } 24 | } 25 | ], 26 | 27 | module: { 28 | rules: [ 29 | { test: /\.js?$/, exclude: /node_modules/, use: "babel-loader" }, 30 | { test: /\.css?$/, exclude: /node_modules/, use: ExtractTextPlugin.extract(["css-loader"]) } 31 | ] 32 | }, 33 | 34 | resolve: { 35 | extensions: ['.js', '.jsx'] 36 | }, 37 | 38 | plugins: [ 39 | new ExtractTextPlugin("./react-minimap.css"), 40 | ] 41 | }; 42 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Jérémy CARBONNE 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. -------------------------------------------------------------------------------- /example/Block.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | const DEBUG = false 4 | 5 | export class Dark extends Component { 6 | render() { 7 | if (DEBUG) 8 | console.log("render Dark") 9 | return ( 10 |
11 |
12 |

Dark

13 |
14 |
15 | ); 16 | } 17 | } 18 | 19 | export class Red extends Component { 20 | render() { 21 | if (DEBUG) 22 | console.log("render Red") 23 | return ( 24 |
25 |
26 |

Red

27 | 28 | 29 |
30 |
31 | ); 32 | } 33 | } 34 | 35 | export class Yellow extends Component { 36 | render() { 37 | if (DEBUG) 38 | console.log("render Yellow") 39 | return ( 40 |
41 |
42 |

Yellow

43 |
44 |
45 | ); 46 | } 47 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React minimap 23 | 24 | 25 | 28 |
29 | 39 | 40 | 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 = 'build/' //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