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 |