React Colorscales Demo

├── .babelrc ├── .travis.yml ├── docs ├── favicon.ico ├── index.js ├── index.html ├── App.css └── App.js ├── src ├── index.js └── components │ ├── Colorscale.js │ ├── ColorscalePicker.css │ ├── constants.js │ └── ColorscalePicker.js ├── .gitignore ├── webpack.config.js ├── LICENSE ├── config ├── paths.js └── env.js ├── package.json ├── CODE_OF_CONDUCT.md ├── scripts └── build.js ├── README.md └── webpack.config.prod.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "es2015", "stage-0"] 3 | } 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "node" 4 | script: 5 | - npm run test 6 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plotly/react-colorscales/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /docs/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Colorscale from './components/Colorscale'; 2 | import ColorscalePicker, {getColorscale} from './components/ColorscalePicker'; 3 | import * as COLOR_PICKER_CONSTANTS from './components/constants'; 4 | 5 | export default ColorscalePicker; 6 | export {Colorscale, COLOR_PICKER_CONSTANTS, getColorscale}; 7 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Colorscales Demo 7 | 8 | 9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | font-family: Helvetica, sans-serif; 4 | } 5 | 6 | .toggleButton { 7 | padding: 10px; 8 | border: 1px solid #DFE8F3; 9 | margin: 5px; 10 | font-size: 12px; 11 | width: 200px; 12 | border-radius: 4px; 13 | cursor: pointer; 14 | } 15 | 16 | .toggleButton:hover { 17 | border-color: #A2B1C6; 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # build 4 | build 5 | 6 | # dependencies 7 | /node_modules 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 | 23 | yarn.lock 24 | package-lock.json 25 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: ['react-hot-loader/patch', './docs/index.js'], 5 | output: { 6 | filename: 'bundle.js', 7 | }, 8 | module: { 9 | rules: [ 10 | { 11 | test: /\.js?$/, 12 | use: { 13 | loader: 'babel-loader', 14 | options: { 15 | presets: ['react', 'es2015', 'stage-0'], 16 | plugins: [ 17 | 'react-hot-loader/babel', 18 | ], 19 | }, 20 | }, 21 | exclude: [/node_modules/], 22 | }, 23 | { 24 | test: /\.(css|scss)?$/, 25 | use: ['style-loader', 'css-loader'], 26 | }, 27 | ], 28 | }, 29 | devServer: { 30 | open: true, 31 | contentBase: './docs', 32 | }, 33 | devtool: 'eval-source-map', 34 | }; 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 Rubbby 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /src/components/Colorscale.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {DEFAULT_SCALE} from './constants.js'; 3 | 4 | export default class Colorscale extends Component { 5 | render() { 6 | const scale = this.props.colorscale ? this.props.colorscale : DEFAULT_SCALE; 7 | 8 | return ( 9 |

10 | {this.props.label ? ( 11 |

22 | {this.props.label} 23 |

24 | ) : null} 25 |

33 |

this.props.onClick(scale, this.props.start, this.props.rot)} 41 | > 42 | {scale.map((x, i) => ( 43 |

55 | ))} 56 |

57 |

58 |

59 | ); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /config/paths.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const fs = require("fs"); 3 | const url = require("url"); 4 | 5 | // Make sure any symlinks in the project folder are resolved: 6 | // https://github.com/facebookincubator/create-react-app/issues/637 7 | const appDirectory = fs.realpathSync(process.cwd()); 8 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath); 9 | 10 | const envPublicUrl = process.env.PUBLIC_URL; 11 | 12 | function ensureSlash(path, needsSlash) { 13 | const hasSlash = path.endsWith("/"); 14 | if (hasSlash && !needsSlash) { 15 | return path.substr(path, path.length - 1); 16 | } else if (!hasSlash && needsSlash) { 17 | return `${path}/`; 18 | } else { 19 | return path; 20 | } 21 | } 22 | 23 | const getPublicUrl = appPackageJson => 24 | envPublicUrl || require(appPackageJson).homepage; 25 | 26 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer 27 | // "public path" at which the app is served. 28 | // Webpack needs to know it to put the right