├── .travis.yml
├── src
    ├── Util
    │   └── Confetti.js
    ├── LuckyDraw
    │   ├── index.js
    │   ├── Arc.js
    │   ├── Wheel.js
    │   ├── Style
    │   │   └── LuckyDraw.styl
    │   └── LuckyDraw.js
    ├── App.test.js
    ├── index.js
    ├── App.styl
    ├── btn.css
    └── App.js
├── .npmignore
├── public
    ├── favicon.ico
    ├── manifest.webmanifest
    └── index.html
├── .gitignore
├── sw-precache-config.js
├── config
    ├── jest
    │   ├── fileTransform.js
    │   └── cssTransform.js
    ├── polyfills.js
    ├── env.js
    ├── paths.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── lib
    ├── index.js
    ├── LuckyDraw.css
    ├── Arc.js
    ├── Wheel.js
    └── LuckyDraw.js
├── scripts
    ├── test.js
    ├── build.js
    └── start.js
├── README.md
└── package.json


/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "stable"


--------------------------------------------------------------------------------
/src/Util/Confetti.js:
--------------------------------------------------------------------------------
1 | export default class Confetti {}
2 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | src
4 | coverage
5 | test
6 | example
7 | karma.conf.js


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gemerz/react-luckydraw/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/LuckyDraw/index.js:
--------------------------------------------------------------------------------
1 | import LuckyDraw from './LuckyDraw';
2 | 
3 | export default LuckyDraw;
4 | 


--------------------------------------------------------------------------------
/src/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(<App />, div);
8 | });
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | node_modules
 5 | 
 6 | # testing
 7 | coverage
 8 | 
 9 | # production
10 | build
11 | .idea
12 | 
13 | # misc
14 | .DS_Store
15 | .env
16 | npm-debug.log
17 | 


--------------------------------------------------------------------------------
/sw-precache-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   stripPrefix: 'build/',
 3 |   staticFileGlobs: [
 4 |     'build/*.html',
 5 |     'build/manifest.json',
 6 |     'build/static/**/!(*map*)'
 7 |   ],
 8 |   dontCacheBustUrlsMatching: /\.\w{8}\./,
 9 |   swFilePath: 'build/service-worker.js'
10 | };
11 | 


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


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |   value: true
 5 | });
 6 | 
 7 | var _LuckyDraw = require('./LuckyDraw');
 8 | 
 9 | var _LuckyDraw2 = _interopRequireDefault(_LuckyDraw);
10 | 
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12 | 
13 | exports.default = _LuckyDraw2.default;


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | ReactDOM.render(<App />, document.getElementById('root'));
 6 | 
 7 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 8 |   window.addEventListener('load', function() {
 9 |     navigator.serviceWorker.register('./service-worker.js');
10 |   });
11 | }
12 | 


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


--------------------------------------------------------------------------------
/src/App.styl:
--------------------------------------------------------------------------------
 1 | body
 2 |   width 100%
 3 |   overflow hidden
 4 |   margin 0
 5 |   padding 0
 6 |   color #ffffff
 7 |   background-color darken(#252B37, 3%);
 8 |   font-family -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif
 9 | 
10 | .App
11 |   max-width 920px
12 |   margin 0 auto
13 |   min-height 100vh
14 |   display flex
15 |   flex-direction column
16 |   justify-content center
17 |   align-items center
18 | 
19 | h1
20 |   color #ffffff
21 |   padding 0px 0 30px 0
22 | 
23 | .luckdraw
24 |   width 550px
25 |   height 350px
26 | 
27 | .ReactTabs__TabPanel>div
28 |   margin 0 auto
29 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | if (typeof Promise === 'undefined') {
 2 |   // Rejection tracking prevents a common issue where React gets into an
 3 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 4 |   // and the user has no idea what causes React's erratic future behavior.
 5 |   require('promise/lib/rejection-tracking').enable();
 6 |   window.Promise = require('promise/lib/es6-extensions.js');
 7 | }
 8 | 
 9 | // fetch() polyfill for making API calls.
10 | require('whatwg-fetch');
11 | 
12 | // Object.assign() is commonly used with React.
13 | // It will use the native implementation if it's present and isn't buggy.
14 | Object.assign = require('object-assign');
15 | 


--------------------------------------------------------------------------------
/public/manifest.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-luckydraw",
 3 |   "short_name": "react-luckydraw",
 4 |   "description": "Progressive Web react-luckydraw component",
 5 |   "start_url": "./?app=true",
 6 |   "display": "fullscreen",
 7 |   "orientation": "portrait",
 8 |   "background_color": "#fff",
 9 |   "theme_color": "#34495f",
10 |   "icons": [{
11 |     "src": "./favicon-16x16.png",
12 |     "sizes": "16x16",
13 |     "type": "image/png"
14 |   }, {
15 |     "src": "./favicon-32x32.png",
16 |     "sizes": "32x32",
17 |     "type": "image/png"
18 |   }, {
19 |     "src": "./android-chrome-192x192.png",
20 |     "sizes": "192x192",
21 |     "type": "image/png"
22 |   }, {
23 |     "src": "./android-chrome-256x256.png",
24 |     "sizes": "256x256",
25 |     "type": "image/png"
26 |   }]
27 | }
28 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | process.env.NODE_ENV = 'test';
 2 | process.env.PUBLIC_URL = '';
 3 | 
 4 | // Load environment variables from .env file. Suppress warnings using silent
 5 | // if this file is missing. dotenv will never modify any environment variables
 6 | // that have already been set.
 7 | // https://github.com/motdotla/dotenv
 8 | require('dotenv').config({silent: true});
 9 | 
10 | const jest = require('jest');
11 | const argv = process.argv.slice(2);
12 | 
13 | // Watch unless on CI or in coverage mode
14 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
15 |   argv.push('--watch');
16 | }
17 | 
18 | // A temporary hack to clear terminal correctly.
19 | // You can remove this after updating to Jest 18 when it's out.
20 | // https://github.com/facebook/jest/pull/2230
21 | var realWrite = process.stdout.write;
22 | var CLEAR = process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H';
23 | process.stdout.write = function(chunk, encoding, callback) {
24 |   if (chunk === '\x1B[2J\x1B[H') {
25 |     chunk = CLEAR;
26 |   }
27 |   return realWrite.call(this, chunk, encoding, callback);
28 | };
29 | 
30 | 
31 | jest.run(argv);
32 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 2 | // injected into the application via DefinePlugin in Webpack configuration.
 3 | 
 4 | var REACT_APP = /^REACT_APP_/i;
 5 | 
 6 | function getClientEnvironment(publicUrl) {
 7 |   var processEnv = Object
 8 |     .keys(process.env)
 9 |     .filter(key => REACT_APP.test(key))
10 |     .reduce((env, key) => {
11 |       env[key] = JSON.stringify(process.env[key]);
12 |       return env;
13 |     }, {
14 |       // Useful for determining whether we’re running in production mode.
15 |       // Most importantly, it switches React into the correct mode.
16 |       'NODE_ENV': JSON.stringify(
17 |         process.env.NODE_ENV || 'development'
18 |       ),
19 |       // Useful for resolving the correct path to static assets in `public`.
20 |       // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
21 |       // This should only be used as an escape hatch. Normally you would put
22 |       // images into the `src` and `import` them in code to get their paths.
23 |       'PUBLIC_URL': JSON.stringify(publicUrl)
24 |     });
25 |   return {'process.env': processEnv};
26 | }
27 | 
28 | module.exports = getClientEnvironment;
29 | 


--------------------------------------------------------------------------------
/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">
 6 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 7 |     <!--
 8 |       Notice the use of %PUBLIC_URL% in the tag above.
 9 |       It will be replaced with the URL of the `public` folder during the build.
10 |       Only files inside the `public` folder can be referenced from the HTML.
11 | 
12 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13 |       work correctly both with client-side routing and a non-root public URL.
14 |       Learn how to configure a non-root public URL by running `npm run build`.
15 |     -->
16 |     <title>React LuckyDraw</title>
17 | </head>
18 | <body>
19 | <a href="https://github.com/Gemerz/react-luckydraw"><img style="position: absolute; top: 0; right: 0; border: 0;"
20 |                                       src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
21 |                                       alt="Fork me on GitHub"
22 |                                       data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
23 | <div id="root"></div>
24 | <!--
25 |   This HTML file is a template.
26 |   If you open it directly in the browser, you will see an empty page.
27 | 
28 |   You can add webfonts, meta tags, or analytics to this file.
29 |   The build step will place the bundled scripts into the <body> tag.
30 | 
31 |   To begin the development, run `npm start`.
32 |   To create a production bundle, use `npm run build`.
33 | -->
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var fs = require('fs');
 3 | 
 4 | // Make sure any symlinks in the project folder are resolved:
 5 | // https://github.com/facebookincubator/create-react-app/issues/637
 6 | var appDirectory = fs.realpathSync(process.cwd());
 7 | function resolveApp(relativePath) {
 8 |     return path.resolve(appDirectory, relativePath);
 9 | }
10 | 
11 | // We support resolving modules according to `NODE_PATH`.
12 | // This lets you use absolute paths in imports inside large monorepos:
13 | // https://github.com/facebookincubator/create-react-app/issues/253.
14 | 
15 | // It works similar to `NODE_PATH` in Node itself:
16 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
17 | 
18 | // We will export `nodePaths` as an array of absolute paths.
19 | // It will then be used by Webpack configs.
20 | // Jest doesn’t need this because it already handles `NODE_PATH` out of the box.
21 | 
22 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
23 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
24 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
25 | 
26 | var nodePaths = (process.env.NODE_PATH || '')
27 |     .split(process.platform === 'win32' ? ';' : ':')
28 |     .filter(Boolean)
29 |     .filter(folder => !path.isAbsolute(folder))
30 |     .map(resolveApp);
31 | 
32 | // config after eject: we're in ./config/
33 | module.exports = {
34 |     appBuild: resolveApp('build'),
35 |     appPublic: resolveApp('public'),
36 |     appHtml: resolveApp('public/index.html'),
37 |     appIndexJs: resolveApp('src/index.js'),
38 |     appPackageJson: resolveApp('package.json'),
39 |     appSrc: resolveApp('src'),
40 |     yarnLockFile: resolveApp('yarn.lock'),
41 |     testsSetup: resolveApp('src/setupTests.js'),
42 |     appNodeModules: resolveApp('node_modules'),
43 |     ownNodeModules: resolveApp('node_modules'),
44 |     nodePaths: nodePaths,
45 |     appComponent: resolveApp('dist'),
46 |     appComponentIndexJs: resolveApp('src/LuckyDraw/index.js'),
47 | };
48 | 


--------------------------------------------------------------------------------
/src/LuckyDraw/Arc.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { arc } from 'd3';
 3 | 
 4 | class Arc extends Component {
 5 |   static propTypes = {
 6 |     text: React.PropTypes.oneOfType([
 7 |       React.PropTypes.string,
 8 |       React.PropTypes.number
 9 |     ]),
10 |     startAngle: React.PropTypes.number,
11 |     endAngle: React.PropTypes.number,
12 |     innerRadius: React.PropTypes.number,
13 |     outerRadius: React.PropTypes.number,
14 |     labelTextRotate: React.PropTypes.number,
15 |     stoke: React.PropTypes.number,
16 |     showInnerLabels: React.PropTypes.bool,
17 |     fontColor: React.PropTypes.string,
18 |     fontSize: React.PropTypes.string,
19 |     fontFamily: React.PropTypes.string,
20 |     writingModel: React.PropTypes.string
21 |   };
22 | 
23 |   renderInnerLabel(props, Arc) {
24 |     let midAngle = props.endAngle < Math.PI
25 |       ? props.startAngle / 2 + props.endAngle / 2
26 |       : props.startAngle / 2 + props.endAngle / 2 + Math.PI;
27 |     let textAngle = midAngle * 180 / Math.PI > 180
28 |       ? midAngle * 180 / Math.PI - 180
29 |       : midAngle * 180 / Math.PI;
30 |     return (
31 |       <text
32 |         className="rld-value"
33 |         transform={`translate(${Arc.centroid()}) rotate(${textAngle})`}
34 |         dy=".45em"
35 |         style={{
36 |           shapeRendering: 'crispEdges',
37 |           textAnchor: 'middle',
38 |           writingMode: props.writingModel,
39 |           fontSize: props.fontSize,
40 |           fill: props.fontColor
41 |         }}
42 |       >
43 |         {props.text}
44 |       </text>
45 |     );
46 |   }
47 | 
48 |   render() {
49 |     const props = this.props;
50 |     const Arc = arc()
51 |       .innerRadius(props.innerRadius)
52 |       .outerRadius(props.outerRadius)
53 |       .startAngle(props.startAngle)
54 |       .endAngle(props.endAngle);
55 | 
56 |     return (
57 |       <g className="rld-compass">
58 |         <path d={Arc()} fill={props.fill} stroke={props.stoke} />
59 |         {props.showInnerLabels ? this.renderInnerLabel(props, Arc) : null}
60 |       </g>
61 |     );
62 |   }
63 | }
64 | 
65 | export default Arc;
66 | 


--------------------------------------------------------------------------------
/src/LuckyDraw/Wheel.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { schemeCategory20, pie } from 'd3';
 3 | import Arc from './Arc';
 4 | 
 5 | class Wheel extends Component {
 6 |   static propTypes = {
 7 |     wheelSize: React.PropTypes.number.isRequired,
 8 |     range: React.PropTypes.number.isRequired,
 9 |     innerRadius: React.PropTypes.number,
10 |     outerRadius: React.PropTypes.number,
11 |     stoke: React.PropTypes.number,
12 |     showInnerLabels: React.PropTypes.bool,
13 |     textArray: React.PropTypes.array,
14 |     fontColor: React.PropTypes.string,
15 |     fontSize: React.PropTypes.string,
16 |     writingModel: React.PropTypes.string
17 |   };
18 |   static defaultProps = {};
19 | 
20 |   _processData(range) {
21 |     let array = [];
22 |     for (var i = 0; i < range; i++) {
23 |       array.push(100 / range);
24 |     }
25 |     return array;
26 |   }
27 | 
28 |   render() {
29 |     const props = this.props;
30 |     const transform = `translate(${props.wheelSize / 2},${props.wheelSize / 2}) rotate(-${180 / props.range})`;
31 |     const data = this._processData(props.range);
32 |     const arcs = pie()(data).sort();
33 |     const Pie = arcs.map((i, idx) => {
34 |       let colorIdx = idx > 19 ? idx % 20 : idx;
35 |       const textLabel = !props.ArabicLabel
36 |         ? props.textArray[idx] ? props.textArray[idx] : idx + 1
37 |         : idx + 1;
38 | 
39 |       return (
40 |         <Arc
41 |           key={idx}
42 |           innerRadius={props.innerRadius}
43 |           outerRadius={props.outerRadius}
44 |           startAngle={i.startAngle}
45 |           endAngle={i.endAngle}
46 |           showInnerLabels={props.showInnerLabels}
47 |           text={textLabel}
48 |           fill={schemeCategory20[colorIdx]}
49 |           stoke={props.stoke}
50 |           fontColor={props.fontColor}
51 |           fontSize={props.fontSize}
52 |           writingModel={props.writingModel}
53 |         />
54 |       );
55 |     });
56 |     return (
57 |       <svg width={props.wheelSize} height={props.wheelSize}>
58 |         <g transform={transform}>
59 |           {Pie}
60 |         </g>
61 |       </svg>
62 |     );
63 |   }
64 | }
65 | 
66 | export default Wheel;
67 | 


--------------------------------------------------------------------------------
/src/LuckyDraw/Style/LuckyDraw.styl:
--------------------------------------------------------------------------------
 1 | backlight($x, $y, $spread, $size, $colorA, $colorB, $duration)
 2 |   &:after
 3 |     position absolute
 4 |     content ""
 5 |     top $y
 6 |     left $x
 7 |     right 0
 8 |     z-index 1
 9 |     height 100%
10 |     width 100%
11 |     margin 0 auto
12 |     transform scale($size)
13 |     filter blur($spread)
14 |     background linear-gradient(270deg, $colorA, $colorB)
15 |     background-size 200% 200%
16 |     animation animateGlow $duration ease infinite
17 | 
18 | .compass__container
19 |   width 100%
20 |   height 100%
21 |   display inline-block
22 |   animation textColor 10s ease infinite
23 |   position relative
24 |   box-shadow 0px 10px 50px rgba(0, 0, 0, 0.85)
25 |   backlight 0, 5vw, 5vw, 0.85, #0fffc1, #7e0fff, 5s
26 |   &.rolling:after
27 |     animation none
28 | 
29 | .compass__arrow
30 |   position absolute
31 |   height 50px
32 |   width 100%
33 |   top 0
34 |   z-index 10
35 |   text-align center
36 |   &:before
37 |     content: "";
38 |     top 200%
39 |     width 0
40 |     height: 0
41 |     border-left 20px solid transparent
42 |     border-right 20px solid transparent
43 |     border-top 100px solid lighten(darkred, 40%);
44 |     position relative
45 |     z-index 10
46 | 
47 | //&:before
48 | 
49 | .control__panel
50 |   position relative
51 |   height calc(100% - 74px)
52 |   width calc(100% - 24px)
53 |   margin 0 auto
54 |   padding-top 50px
55 |   overflow hidden
56 |   border 12px solid darkorange
57 |   display: flex
58 |   flex-wrap nowrap
59 |   flex-direction column
60 |   align-items center
61 |   justify-content flex-start
62 |   background-color darken(#fff, 4%);
63 |   z-index 2
64 |   box-shadow inset 0px 2px 40px rgba(0, 0, 0, 0.45);
65 | 
66 | .compass__spin
67 |   width 100%
68 |   height 100%
69 |   z-index 2
70 |   transition-property transform
71 |   transition-timing-function ease-out
72 |   animation-fill-mode forwards
73 | 
74 | .compass__btn
75 |   position absolute
76 |   text-align center
77 |   bottom -50px
78 |   left 0
79 |   z-index 100
80 |   display inline-block
81 |   width 100%
82 |   .bttn-jelly.bttn-danger
83 |     font-size 16px
84 |     padding 10px 20px
85 | 
86 | @keyframes animateGlow
87 |   0%
88 |     background-position: 0% 50%
89 | 
90 |   50%
91 |     background-position: 100% 50%
92 |   100%
93 |     background-position: 0% 50%
94 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | #react-luckydraw
 2 | 
 3 | [![Greenkeeper badge](https://badges.greenkeeper.io/Gemerz/react-luckydraw.svg)](https://greenkeeper.io/)
 4 | ![](https://travis-ci.org/Gemerz/react-luckydraw.svg?branch=master)
 5 | 
 6 | 
 7 | 
 8 | ## Installation
 9 | 
10 | ```js
11 | $ npm install --save react-luckydraw
12 | ```
13 | 
14 | ## Usage
15 | ``` javascript
16 | import React from 'react';
17 | import LuckyDraw from 'react-luckydraw';
18 | 
19 | // include styles
20 | import 'react-luckydraw/lib/LuckyDraw.css';
21 | 
22 | class App extends React.Component {
23 | 
24 |     constructor(props) {
25 |         super(props);
26 |     }
27 |     
28 |     render() {
29 |         return (
30 |             <div>
31 |              <LuckyDraw
32 |                 width={500}
33 |                 height={350}
34 |                 wheelSize={1000}
35 |                 range={10}
36 |                 innerRadius={250}
37 |                 outerRadius={500}
38 |                 showInnerLabels
39 |                 drawLimitSwitch
40 |                 drawLimit={5}
41 |                 fontColor={'#000'}
42 |                 fontSize={'20px'}
43 |                 writingModel={'tb'}
44 |                 drawButtonLabel={'start'}
45 |                 textArray={[
46 |                     'Love you x1', 'Love you x2', 'Love you x3', 'Love you x4', 'Love you x5', 'Love you x6', 'Love you x7', 'Love you x8', 'Love you x9', 'Love you x10',
47 |               ]}
48 |                 onSuccessDrawReturn={(drawNumber) => {
49 |                     console.log(drawNumber)
50 |                 }}
51 |                 onOutLimitAlert={(limit) => {
52 |                     if (limit) {
53 |                         window.alert('out of limits')
54 |                      }
55 |                 }}
56 |                />  
57 |             </div>
58 |         )
59 |     }
60 | }
61 | ```
62 | 
63 | ## Props
64 | 
65 | Property|Type|Default|Description
66 | ---|---|---|---
67 | width|number|500|width of luckydraw
68 | height|number|350|height of luckydraw
69 | wheelSize|number|width * 2|size of luckydraw Wheel
70 | range|number|30|range of luckydraw
71 | outerRadius|number|wheelSize/2|outerRadius of luckydraw Wheel
72 | innerRadius|number|outerRadius/2|innerRadius of luckydraw Wheel
73 | turns|number|3| Defines how many revolutions to rotate
74 | rotateSecond|number|5| Define how many seconds to turn around
75 | showInnerLabels|boolean|true|show Labels on luckydraw Wheel
76 | drawLimitSwitch|boolean|true|a switch of drawing wheel limit
77 | drawLimit|number|5|a limit for drawing times with wheel
78 | fontColor|string|'black'|set color for label on wheel
79 | fontSize|string|'18px'|set size for label on wheel
80 | drawButtonLabel|string|'start'|set text for drawing button
81 | textArray|array| - |set text array for wheel label
82 | onSuccessDrawReturn|function| - |callback function for draw success with the draw number
83 | onOutLimitAlert|function| - |callback function for limit times out
84 | 
85 | 
86 | 


--------------------------------------------------------------------------------
/lib/LuckyDraw.css:
--------------------------------------------------------------------------------
  1 | .compass__container {
  2 |   width: 100%;
  3 |   height: 100%;
  4 |   display: inline-block;
  5 |   animation: textColor 10s ease infinite;
  6 |   position: relative;
  7 |   box-shadow: 0px 10px 50px rgba(0,0,0,0.85);
  8 | }
  9 | .compass__container:after {
 10 |   position: absolute;
 11 |   content: "";
 12 |   top: 5vw;
 13 |   left: 0;
 14 |   right: 0;
 15 |   z-index: 1;
 16 |   height: 100%;
 17 |   width: 100%;
 18 |   margin: 0 auto;
 19 |   transform: scale(0.85);
 20 |   filter: blur(5vw);
 21 |   background: linear-gradient(270deg, #0fffc1, #7e0fff);
 22 |   background-size: 200% 200%;
 23 |   animation: animateGlow 5s ease infinite;
 24 | }
 25 | .compass__container.rolling:after {
 26 |   animation: none;
 27 | }
 28 | .compass__arrow {
 29 |   position: absolute;
 30 |   height: 50px;
 31 |   width: 100%;
 32 |   top: 0;
 33 |   left:0;
 34 |   z-index: 10;
 35 |   text-align: center;
 36 | }
 37 | .compass__arrow:before {
 38 |   content: "";
 39 |   top: 200%;
 40 |   width: 0;
 41 |   height: 0;
 42 |   border-left: 20px solid transparent;
 43 |   border-right: 20px solid transparent;
 44 |   border-top: 100px solid #ff2020;
 45 |   position: relative;
 46 |   z-index: 10;
 47 | }
 48 | .control__panel {
 49 |   position: relative;
 50 |   height: calc(100% - 74px);
 51 |   width: calc(100% - 24px);
 52 |   margin: 0 auto;
 53 |   padding-top: 50px;
 54 |   overflow: hidden;
 55 |   border: 12px solid #ff8c00;
 56 |   display: flex;
 57 |   flex-wrap: nowrap;
 58 |   flex-direction: column;
 59 |   align-items: center;
 60 |   justify-content: flex-start;
 61 |   background-color: #f5f5f5;
 62 |   z-index: 2;
 63 |   box-shadow: inset 0px 2px 40px rgba(0,0,0,0.45);
 64 | }
 65 | .compass__spin {
 66 |   width: 100%;
 67 |   height: 100%;
 68 |   z-index: 2;
 69 |   transition-property: transform;
 70 |   transition-timing-function: ease-out;
 71 |   animation-fill-mode: forwards;
 72 | }
 73 | .compass__btn {
 74 |   position: absolute;
 75 |   text-align: center;
 76 |   bottom: -50px;
 77 |   left: 0;
 78 |   z-index: 100;
 79 |   display: inline-block;
 80 |   width: 100%;
 81 | }
 82 | .compass__btn .bttn-jelly.bttn-danger {
 83 |   font-size: 16px;
 84 |   padding: 10px 20px;
 85 | }
 86 | @-moz-keyframes animateGlow {
 87 |   0% {
 88 |     background-position: 0% 50%;
 89 |   }
 90 |   50% {
 91 |     background-position: 100% 50%;
 92 |   }
 93 |   100% {
 94 |     background-position: 0% 50%;
 95 |   }
 96 | }
 97 | @-webkit-keyframes animateGlow {
 98 |   0% {
 99 |     background-position: 0% 50%;
100 |   }
101 |   50% {
102 |     background-position: 100% 50%;
103 |   }
104 |   100% {
105 |     background-position: 0% 50%;
106 |   }
107 | }
108 | @-o-keyframes animateGlow {
109 |   0% {
110 |     background-position: 0% 50%;
111 |   }
112 |   50% {
113 |     background-position: 100% 50%;
114 |   }
115 |   100% {
116 |     background-position: 0% 50%;
117 |   }
118 | }
119 | @keyframes animateGlow {
120 |   0% {
121 |     background-position: 0% 50%;
122 |   }
123 |   50% {
124 |     background-position: 100% 50%;
125 |   }
126 |   100% {
127 |     background-position: 0% 50%;
128 |   }
129 | }
130 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-luckydraw",
  3 |   "version": "0.1.6",
  4 |   "author": "Gemer Cheung <gemercheung@gmail.com>",
  5 |   "description": "Simple luckydraw component for React.",
  6 |   "main": "lib/index.js",
  7 |   "homepage": "http://blog.gemer.xyz/react-luckydraw",
  8 |   "repository": {
  9 |     "type": "git",
 10 |     "url": "git+https://github.com/Gemerz/react-luckydraw.git"
 11 |   },
 12 |   "keywords": [
 13 |     "react",
 14 |     "luckydraw"
 15 |   ],
 16 |   "license": "ISC",
 17 |   "prepublish": "npm run build-lib && npm run build-css",
 18 |   "devDependencies": {
 19 |     "autoprefixer": "7.1.6",
 20 |     "babel-core": "6.26.0",
 21 |     "babel-eslint": "8.0.2",
 22 |     "babel-jest": "21.2.0",
 23 |     "babel-loader": "7.1.2",
 24 |     "babel-preset-react-app": "^3.1.0",
 25 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
 26 |     "chalk": "2.3.0",
 27 |     "connect-history-api-fallback": "1.5.0",
 28 |     "cross-spawn": "5.1.0",
 29 |     "css-loader": "0.28.7",
 30 |     "detect-port": "1.2.2",
 31 |     "dotenv": "4.0.0",
 32 |     "eslint": "4.11.0",
 33 |     "eslint-config-react-app": "^2.0.1",
 34 |     "eslint-loader": "1.9.0",
 35 |     "eslint-plugin-flowtype": "2.39.1",
 36 |     "eslint-plugin-import": "2.8.0",
 37 |     "eslint-plugin-jsx-a11y": "6.0.2",
 38 |     "eslint-plugin-react": "7.4.0",
 39 |     "extract-text-webpack-plugin": "3.0.2",
 40 |     "file-loader": "1.1.5",
 41 |     "filesize": "3.5.11",
 42 |     "fs-extra": "4.0.2",
 43 |     "gh-pages": "^1.1.0",
 44 |     "gzip-size": "4.0.0",
 45 |     "highlight.js": "^9.9.0",
 46 |     "html-webpack-plugin": "2.30.1",
 47 |     "http-proxy-middleware": "0.17.4",
 48 |     "jest": "21.2.1",
 49 |     "json-loader": "0.5.7",
 50 |     "object-assign": "4.1.1",
 51 |     "path-exists": "3.0.0",
 52 |     "postcss-loader": "2.0.8",
 53 |     "prettier": "^1.8.2",
 54 |     "promise": "8.0.1",
 55 |     "react-dev-utils": "^4.2.1",
 56 |     "react-highlight": "^0.10.0",
 57 |     "recursive-readdir": "2.2.1",
 58 |     "strip-ansi": "4.0.0",
 59 |     "style-loader": "0.19.0",
 60 |     "stylus": "^0.54.5",
 61 |     "stylus-loader": "^3.0.1",
 62 |     "sw-precache": "^5.0.0",
 63 |     "url-loader": "0.6.2",
 64 |     "webpack": "3.8.1",
 65 |     "webpack-dev-server": "2.9.4",
 66 |     "webpack-manifest-plugin": "1.3.2",
 67 |     "whatwg-fetch": "2.0.3"
 68 |   },
 69 |   "dependencies": {
 70 |     "d3": "^4.4.0",
 71 |     "react": "^16.1.1",
 72 |     "react-dom": "^16.1.1",
 73 |     "react-tabs": "^2.1.1",
 74 |     "styled-components": "^2.2.3",
 75 |     "sweetalert": "^2.0.8"
 76 |   },
 77 |   "scripts": {
 78 |     "start": "node scripts/start.js",
 79 |     "build": "node scripts/build.js && npm run gen-service-worker",
 80 |     "format": "prettier --write 'src/**/*.{js,jsx}' '*.{js,jsx}' 'cosmos/**/*.{js,jsx}' --single-quote",
 81 |     "test": "node scripts/test.js --env=jsdom",
 82 |     "gen-service-worker": "sw-precache --config=sw-precache-config.js",
 83 |     "build-lib": "BABEL_ENV=production babel src/LuckyDraw -d lib --ignore spec.js,test.js",
 84 |     "build-css": "./node_modules/stylus/bin/stylus -w src/LuckyDraw/Style -o lib/LuckyDraw.css",
 85 |     "deploy": "gh-pages -d build"
 86 |   },
 87 |   "jest": {
 88 |     "collectCoverageFrom": [
 89 |       "src/**/*.{js,jsx}"
 90 |     ],
 91 |     "setupFiles": [
 92 |       "<rootDir>/config/polyfills.js"
 93 |     ],
 94 |     "testPathIgnorePatterns": [
 95 |       "<rootDir>[/\\\\](build|docs|node_modules)[/\\\\]"
 96 |     ],
 97 |     "testEnvironment": "node",
 98 |     "testURL": "http://localhost",
 99 |     "transform": {
100 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
101 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
102 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
103 |     },
104 |     "transformIgnorePatterns": [
105 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
106 |     ],
107 |     "moduleNameMapper": {
108 |       "^react-native$": "react-native-web"
109 |     }
110 |   },
111 |   "babel": {
112 |     "presets": [
113 |       "react-app"
114 |     ]
115 |   },
116 |   "eslintConfig": {
117 |     "extends": "react-app"
118 |   }
119 | }
120 | 


--------------------------------------------------------------------------------
/src/btn.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | /*!
  3 |  *
  4 |  * bttn.css - https://ganapativs.github.io/bttn.css
  5 |  * Version - 0.2.4
  6 |  * Demo: https://bttn.surge.sh
  7 |  *
  8 |  * Licensed under the MIT license - http://opensource.org/licenses/MIT
  9 |  *
 10 |  * Copyright (c) 2016 Ganapati V S (@ganapativs)
 11 |  *
 12 |  */
 13 | /* standalone - .bttn-jelly */
 14 | .bttn-default {
 15 |   color: #fff;
 16 | }
 17 | .bttn-primary,
 18 | .bttn,
 19 | .bttn-lg,
 20 | .bttn-md,
 21 | .bttn-sm,
 22 | .bttn-xs {
 23 |   color: #1d89ff;
 24 | }
 25 | .bttn-warning {
 26 |   color: #feab3a;
 27 | }
 28 | .bttn-danger {
 29 |   color: #ff5964;
 30 | }
 31 | .bttn-success {
 32 |   color: #28b78d;
 33 | }
 34 | .bttn-royal {
 35 |   color: #bd2df5;
 36 | }
 37 | .bttn,
 38 | .bttn-lg,
 39 | .bttn-md,
 40 | .bttn-sm,
 41 | .bttn-xs {
 42 |   margin: 0;
 43 |   padding: 0;
 44 |   border-width: 0;
 45 |   border-color: transparent;
 46 |   background: transparent;
 47 |   font-weight: 400;
 48 |   cursor: pointer;
 49 |   position: relative;
 50 | }
 51 | .bttn-lg {
 52 |   padding: 8px 15px;
 53 |   font-size: 24px;
 54 |   font-family: inherit;
 55 | }
 56 | .bttn-md {
 57 |   font-size: 20px;
 58 |   font-family: inherit;
 59 |   padding: 5px 12px;
 60 | }
 61 | .bttn-sm {
 62 |   padding: 4px 10px;
 63 |   font-size: 16px;
 64 |   font-family: inherit;
 65 | }
 66 | .bttn-xs {
 67 |   padding: 3px 8px;
 68 |   font-size: 12px;
 69 |   font-family: inherit;
 70 | }
 71 | .bttn-jelly {
 72 |   margin: 0;
 73 |   padding: 0;
 74 |   border-width: 0;
 75 |   border-color: transparent;
 76 |   background: transparent;
 77 |   font-weight: 400;
 78 |   cursor: pointer;
 79 |   position: relative;
 80 |   font-size: 20px;
 81 |   font-family: inherit;
 82 |   padding: 5px 12px;
 83 |   overflow: hidden;
 84 |   border-radius: 50px;
 85 |   background: #fff;
 86 |   color: #1d89ff;
 87 |   -webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
 88 |   transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
 89 | }
 90 | .bttn-jelly:before {
 91 |   position: absolute;
 92 |   top: 0;
 93 |   left: 0;
 94 |   width: 100%;
 95 |   height: 100%;
 96 |   border-radius: 50px;
 97 |   background: currentColor;
 98 |   content: '';
 99 |   z-index: -1;
100 |   opacity: 0;
101 |   -webkit-transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
102 |   transition: all 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
103 |   -webkit-transform: scale(0.2);
104 |   transform: scale(0.2);
105 | }
106 | .bttn-jelly:hover,
107 | .bttn-jelly:focus {
108 |   box-shadow: 0 1px 8px rgba(58,51,53,0.4);
109 |   -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
110 |   transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
111 |   -webkit-transform: scale(1.1);
112 |   transform: scale(1.1);
113 | }
114 | .bttn-jelly:hover:before,
115 | .bttn-jelly:focus:before {
116 |   opacity: 0.15;
117 |   -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
118 |   transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
119 |   -webkit-transform: scale(1);
120 |   transform: scale(1);
121 | }
122 | .bttn-jelly.bttn-xs {
123 |   padding: 3px 8px;
124 |   font-size: 12px;
125 |   font-family: inherit;
126 | }
127 | .bttn-jelly.bttn-xs:hover,
128 | .bttn-jelly.bttn-xs:focus {
129 |   box-shadow: 0 1px 4px rgba(58,51,53,0.4);
130 | }
131 | .bttn-jelly.bttn-sm {
132 |   padding: 4px 10px;
133 |   font-size: 16px;
134 |   font-family: inherit;
135 | }
136 | .bttn-jelly.bttn-sm:hover,
137 | .bttn-jelly.bttn-sm:focus {
138 |   box-shadow: 0 1px 6px rgba(58,51,53,0.4);
139 | }
140 | .bttn-jelly.bttn-md {
141 |   font-size: 20px;
142 |   font-family: inherit;
143 |   padding: 5px 12px;
144 | }
145 | .bttn-jelly.bttn-md:hover,
146 | .bttn-jelly.bttn-md:focus {
147 |   box-shadow: 0 1px 8px rgba(58,51,53,0.4);
148 | }
149 | .bttn-jelly.bttn-lg {
150 |   padding: 8px 15px;
151 |   font-size: 24px;
152 |   font-family: inherit;
153 | }
154 | .bttn-jelly.bttn-lg:hover,
155 | .bttn-jelly.bttn-lg:focus {
156 |   box-shadow: 0 1px 10px rgba(58,51,53,0.4);
157 | }
158 | .bttn-jelly.bttn-default {
159 |   background: #fff;
160 |   color: #1d89ff;
161 | }
162 | .bttn-jelly.bttn-primary {
163 |   background: #1d89ff;
164 |   color: #fff;
165 | }
166 | .bttn-jelly.bttn-warning {
167 |   background: #feab3a;
168 |   color: #fff;
169 | }
170 | .bttn-jelly.bttn-danger {
171 |   background: #ff5964;
172 |   color: #fff;
173 | }
174 | .bttn-jelly.bttn-success {
175 |   background: #28b78d;
176 |   color: #fff;
177 | }
178 | .bttn-jelly.bttn-royal {
179 |   background: #bd2df5;
180 |   color: #fff;
181 | }


--------------------------------------------------------------------------------
/lib/Arc.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |     value: true
 5 | });
 6 | 
 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 8 | 
 9 | var _react = require("react");
10 | 
11 | var _react2 = _interopRequireDefault(_react);
12 | 
13 | var _d = require("d3");
14 | 
15 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16 | 
17 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
18 | 
19 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
20 | 
21 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
22 | 
23 | var Arc = function (_Component) {
24 |     _inherits(Arc, _Component);
25 | 
26 |     function Arc() {
27 |         _classCallCheck(this, Arc);
28 | 
29 |         return _possibleConstructorReturn(this, (Arc.__proto__ || Object.getPrototypeOf(Arc)).apply(this, arguments));
30 |     }
31 | 
32 |     _createClass(Arc, [{
33 |         key: "renderInnerLabel",
34 |         value: function renderInnerLabel(props, Arc) {
35 |             var midAngle = props.endAngle < Math.PI ? props.startAngle / 2 + props.endAngle / 2 : props.startAngle / 2 + props.endAngle / 2 + Math.PI;
36 |             var textAngle = midAngle * 180 / Math.PI > 180 ? midAngle * 180 / Math.PI - 180 : midAngle * 180 / Math.PI;
37 |             return _react2.default.createElement(
38 |                 "text",
39 |                 {
40 |                     className: "rld-value",
41 |                     transform: "translate(" + Arc.centroid() + ") rotate(" + textAngle + ")",
42 |                     dy: ".45em",
43 |                     style: {
44 |                         shapeRendering: 'crispEdges',
45 |                         textAnchor: 'middle',
46 |                         writingMode: props.writingModel,
47 |                         fontSize: props.fontSize,
48 |                         fill: props.fontColor
49 |                     }
50 |                 },
51 |                 props.text
52 |             );
53 |         }
54 |     }, {
55 |         key: "render",
56 |         value: function render() {
57 |             var props = this.props;
58 |             var Arc = (0, _d.arc)().innerRadius(props.innerRadius).outerRadius(props.outerRadius).startAngle(props.startAngle).endAngle(props.endAngle);
59 | 
60 |             return _react2.default.createElement(
61 |                 "g",
62 |                 { className: "rld-compass" },
63 |                 _react2.default.createElement("path", { d: Arc(),
64 |                     fill: props.fill,
65 |                     stroke: props.stoke
66 |                 }),
67 |                 props.showInnerLabels ? this.renderInnerLabel(props, Arc) : null
68 |             );
69 |         }
70 |     }]);
71 | 
72 |     return Arc;
73 | }(_react.Component);
74 | 
75 | Arc.propTypes = {
76 |     text: _react2.default.PropTypes.string,
77 |     startAngle: _react2.default.PropTypes.number,
78 |     endAngle: _react2.default.PropTypes.number,
79 |     innerRadius: _react2.default.PropTypes.number,
80 |     outerRadius: _react2.default.PropTypes.number,
81 |     labelTextRotate: _react2.default.PropTypes.number,
82 |     stoke: _react2.default.PropTypes.number,
83 |     showInnerLabels: _react2.default.PropTypes.bool,
84 |     fontColor: _react2.default.PropTypes.string,
85 |     fontSize: _react2.default.PropTypes.string,
86 |     fontFamily: _react2.default.PropTypes.string,
87 |     writingModel: _react2.default.PropTypes.string
88 | };
89 | exports.default = Arc;


--------------------------------------------------------------------------------
/lib/Wheel.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | Object.defineProperty(exports, "__esModule", {
 4 |     value: true
 5 | });
 6 | 
 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 8 | 
 9 | var _react = require("react");
10 | 
11 | var _react2 = _interopRequireDefault(_react);
12 | 
13 | var _d = require("d3");
14 | 
15 | var _Arc = require("./Arc");
16 | 
17 | var _Arc2 = _interopRequireDefault(_Arc);
18 | 
19 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20 | 
21 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
22 | 
23 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
24 | 
25 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
26 | 
27 | var Wheel = function (_Component) {
28 |     _inherits(Wheel, _Component);
29 | 
30 |     function Wheel() {
31 |         _classCallCheck(this, Wheel);
32 | 
33 |         return _possibleConstructorReturn(this, (Wheel.__proto__ || Object.getPrototypeOf(Wheel)).apply(this, arguments));
34 |     }
35 | 
36 |     _createClass(Wheel, [{
37 |         key: "_processData",
38 |         value: function _processData(range) {
39 |             var array = [];
40 |             for (var i = 0; i < range; i++) {
41 |                 array.push(100 / range);
42 |             }
43 |             return array;
44 |         }
45 |     }, {
46 |         key: "render",
47 |         value: function render() {
48 | 
49 |             var props = this.props;
50 |             var transform = "translate(" + props.wheelSize / 2 + "," + props.wheelSize / 2 + ") rotate(-" + 180 / props.range + ")";
51 |             var data = this._processData(props.range);
52 |             var arcs = (0, _d.pie)()(data).sort(null);
53 |             var Pie = arcs.map(function (i, idx) {
54 |                 var colorIdx = idx > 19 ? idx % 20 : idx;
55 |                 return _react2.default.createElement(_Arc2.default, { key: idx,
56 |                     innerRadius: props.innerRadius,
57 |                     outerRadius: props.outerRadius,
58 |                     startAngle: i.startAngle,
59 |                     endAngle: i.endAngle,
60 |                     showInnerLabels: props.showInnerLabels,
61 |                     text: props.textArray[idx],
62 |                     fill: _d.schemeCategory20[colorIdx],
63 |                     stoke: props.stoke,
64 |                     fontColor: props.fontColor,
65 |                     fontSize: props.fontSize,
66 |                     writingModel: props.writingModel
67 |                 });
68 |             });
69 |             return _react2.default.createElement(
70 |                 "svg",
71 |                 { width: props.wheelSize, height: props.wheelSize },
72 |                 _react2.default.createElement(
73 |                     "g",
74 |                     { transform: transform },
75 |                     Pie
76 |                 )
77 |             );
78 |         }
79 |     }]);
80 | 
81 |     return Wheel;
82 | }(_react.Component);
83 | 
84 | Wheel.propTypes = {
85 |     wheelSize: _react2.default.PropTypes.number.isRequired,
86 |     range: _react2.default.PropTypes.number.isRequired,
87 |     innerRadius: _react2.default.PropTypes.number,
88 |     outerRadius: _react2.default.PropTypes.number,
89 |     stoke: _react2.default.PropTypes.number,
90 |     showInnerLabels: _react2.default.PropTypes.bool,
91 |     textArray: _react2.default.PropTypes.array,
92 |     fontColor: _react2.default.PropTypes.string,
93 |     fontSize: _react2.default.PropTypes.string,
94 |     writingModel: _react2.default.PropTypes.string
95 | 
96 | };
97 | Wheel.defaultProps = {};
98 | exports.default = Wheel;


--------------------------------------------------------------------------------
/src/LuckyDraw/LuckyDraw.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import Wheel from './Wheel';
  3 | 
  4 | class LuckyDraw extends Component {
  5 |   static propTypes = {
  6 |     width: React.PropTypes.number.isRequired,
  7 |     height: React.PropTypes.number.isRequired,
  8 |     range: React.PropTypes.number.isRequired,
  9 |     wheelSize: React.PropTypes.number,
 10 |     turns: React.PropTypes.number,
 11 |     innerRadius: React.PropTypes.number,
 12 |     outerRadius: React.PropTypes.number,
 13 |     stoke: React.PropTypes.number,
 14 |     showInnerLabels: React.PropTypes.bool,
 15 |     drawLimitSwitch: React.PropTypes.bool,
 16 |     drawLimit: React.PropTypes.number,
 17 |     textArray: React.PropTypes.array,
 18 |     fontColor: React.PropTypes.string,
 19 |     fontSize: React.PropTypes.string,
 20 |     writingModel: React.PropTypes.string,
 21 |     drawButtonLabel: React.PropTypes.string,
 22 |     ArabicLabel: React.PropTypes.bool,
 23 |     onSuccessDrawReturn: React.PropTypes.func,
 24 |     onOutLimitAlert: React.PropTypes.func
 25 |   };
 26 |   static defaultProps = {
 27 |     width: 500,
 28 |     height: 350,
 29 |     stoke: 20,
 30 |     range: 20,
 31 |     turns: 3,
 32 |     rotateSecond: 5,
 33 |     drawLimit: 3,
 34 |     drawLimitSwitch: false,
 35 |     fontColor: '#000',
 36 |     fontSize: '18px',
 37 |     writingModel: 'tb',
 38 |     drawButtonLabel: 'Start',
 39 |     ArabicLabel: false,
 40 |     textArray: []
 41 |   };
 42 | 
 43 |   constructor(props) {
 44 |     super(props);
 45 |     if (!('wheelSize' in props)) {
 46 |       this.props.wheelSize = this.defaultProps.width * 2;
 47 |     }
 48 |     this.state = {
 49 |       startDraw: false,
 50 |       drawTimes: 1,
 51 |       randomNumber: null,
 52 |       rolling: false
 53 |     };
 54 |   }
 55 | 
 56 |   // shouldComponentUpdate(nextProps, nextState) {
 57 |   //     return true
 58 |   // }
 59 | 
 60 |   _processRandomNumber(min, max) {
 61 |     return Math.floor(Math.random() * (max - min + 1)) + min;
 62 |   }
 63 | 
 64 |   _processDrawAngle(range, turns, drawTimes, drawNumber) {
 65 |     const peer = 360 / range;
 66 |     const totalAngle = 360 * turns * drawTimes + drawNumber * peer;
 67 |     return totalAngle;
 68 |   }
 69 | 
 70 |   _processDrawing(e) {
 71 |     e.preventDefault();
 72 |     if (!this.state.rolling) {
 73 |       let drawTime = this.state.drawTimes;
 74 |       if (this.props.drawLimitSwitch && drawTime - 1 < this.props.drawLimit) {
 75 |         this.setState({
 76 |           startDraw: true,
 77 |           rolling: true,
 78 |           randomNumber: this._processRandomNumber(0, this.props.range - 1),
 79 |           drawTimes: this.state.drawTimes + 1
 80 |         });
 81 |         setTimeout(
 82 |           () => {
 83 |             this.setState({
 84 |               rolling: false
 85 |             });
 86 |             this.props.onSuccessDrawReturn(this.state.randomNumber);
 87 |           },
 88 |           this.props.rotateSecond * 1000
 89 |         );
 90 |       } else {
 91 |         this.props.onOutLimitAlert(true);
 92 |       }
 93 |     }
 94 |   }
 95 | 
 96 |   render() {
 97 |     const state = this.state;
 98 |     const props = this.props;
 99 |     let transformRotate = state.startDraw
100 |       ? this._processDrawAngle(
101 |           props.range,
102 |           props.turns,
103 |           state.drawTimes,
104 |           state.randomNumber
105 |         )
106 |       : 0;
107 |     return (
108 |       <div
109 |         className="react_luckyDraw"
110 |         style={{
111 |           width: props.width,
112 |           height: props.height
113 |         }}
114 |       >
115 |         <div
116 |           className={
117 |             state.rolling ? 'compass__container rolling' : 'compass__container'
118 |           }
119 |         >
120 |           <div className="control__panel">
121 |             <div className="compass__arrow" />
122 |             <div
123 |               className="compass__spin"
124 |               style={{
125 |                 width: props.wheelSize + 'px',
126 |                 height: props.wheelSize + 'px',
127 |                 transform: `rotate(${-transformRotate}deg) translate3d(0,0,-1px)`,
128 |                 transitionDuration: `${props.rotateSecond}s`
129 |               }}
130 |             >
131 |               <Wheel {...props} />
132 |             </div>
133 |           </div>
134 |           <div className="compass__btn">
135 |             <button
136 |               className="bttn-jelly bttn-md bttn-danger"
137 |               onClick={e => {
138 |                 this._processDrawing(e);
139 |               }}
140 |             >
141 |               {props.drawButtonLabel}
142 |             </button>
143 |           </div>
144 |         </div>
145 |       </div>
146 |     );
147 |   }
148 | }
149 | 
150 | export default LuckyDraw;
151 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
  3 | import sweetAlert from 'sweetalert';
  4 | import LuckyDraw from './LuckyDraw';
  5 | import 'sweetalert/dist/sweetalert.css';
  6 | import 'highlight.js/styles/googlecode.css';
  7 | import './App.styl';
  8 | import '../lib/LuckyDraw.css';
  9 | import './btn.css';
 10 | // import Highlight from 'react-highlight';
 11 | 
 12 | 
 13 | class App extends Component {
 14 |   constructor(porps) {
 15 |     super(porps);
 16 |     this.state = {
 17 |       currentTab: 0
 18 |     };
 19 |   }
 20 | 
 21 |   changeTab = function (key) {
 22 |     console.log(key);
 23 |     // this.setState({currentTab: key})
 24 |   };
 25 | 
 26 |   render() {
 27 |     const example2 = [
 28 |       'Hello',
 29 |       'world',
 30 |       'php',
 31 |       'is',
 32 |       'best',
 33 |       'language',
 34 |       'in',
 35 |       'the',
 36 |     ];
 37 |     const example3 = [
 38 |       'javascript is best language',
 39 |       'php is best language',
 40 |       'python is best language',
 41 |       'ruby is best language',
 42 |       'go is best language',
 43 |       'swift is best language',
 44 |       'dart is best language',
 45 |       'rust is best language',
 46 |       'C is best language',
 47 |       'C++ is best language',
 48 |       'lua is best language',
 49 |       'xml is best language',
 50 |       'html is best language',
 51 |       'Visual Basic .NET is best language',
 52 |       'Delphi/Object Pascal is best language',
 53 |       'C# is best language',
 54 |       'Objective-C is best language',
 55 |       'Assembly language is best language',
 56 |       'MATLAB is best language',
 57 |       'PL/SQL  is best language',
 58 |       'Scratch is best language',
 59 |       'R is best language',
 60 |       'Visual Basic is best language'
 61 |     ];
 62 |     const example4 = [
 63 |       'Big Prize 1',
 64 |       'Big Prize 2',
 65 |       'Big Prize 3',
 66 |       'Big Prize 4',
 67 |       'Big Prize 5',
 68 |       'Big Prize 6',
 69 |       'Big Prize 7',
 70 |       'Big Prize 8',
 71 |       'Big Prize 9',
 72 |       'Big Prize 10'
 73 |     ];
 74 |     return (
 75 |       <div className="App">
 76 |         <h1>React-luckydraw</h1>
 77 | 
 78 |         <Tabs selectedIndex={0}>
 79 |           <TabList>
 80 |             <Tab>based</Tab>
 81 |             <Tab>custom with charters</Tab>
 82 |             <Tab>vertical label</Tab>
 83 |             <Tab>effect with confetti</Tab>
 84 |           </TabList>
 85 | 
 86 |           <TabPanel>
 87 |             <h2>based</h2>
 88 |             <LuckyDraw
 89 |               width={500}
 90 |               height={350}
 91 |               wheelSize={1000}
 92 |               range={30}
 93 |               innerRadius={250}
 94 |               outerRadius={500}
 95 |               showInnerLabels
 96 |               drawLimitSwitch
 97 |               drawLimit={4}
 98 |               fontColor={'#000'}
 99 |               fontSize={'20px'}
100 |               writingModel={'lr'}
101 |               drawButtonLabel={'start'}
102 |               ArabicLabel
103 |               onSuccessDrawReturn={drawNumber => {
104 |                 sweetAlert('Got ' + (drawNumber + 1).toString(), 'Congratulations !', "success");
105 |               }}
106 |               onOutLimitAlert={limit => {
107 |                 if (limit) {
108 |                   sweetAlert("Oops...", "out of limits!!", "error");
109 |                 }
110 |               }}
111 |             />
112 | 
113 |           </TabPanel>
114 |           <TabPanel>
115 |             <h2>custom with charters</h2>
116 |             <LuckyDraw
117 |               width={500}
118 |               height={350}
119 |               wheelSize={1000}
120 |               range={8}
121 |               innerRadius={250}
122 |               outerRadius={500}
123 |               showInnerLabels
124 |               drawLimitSwitch
125 |               drawLimit={4}
126 |               fontColor={'#000'}
127 |               fontSize={'20px'}
128 |               writingModel={'lr'}
129 |               drawButtonLabel={'start'}
130 |               textArray={example2}
131 |               onSuccessDrawReturn={drawNumber => {
132 |                 sweetAlert(example2[drawNumber], 'Congratulations !', "success");
133 | 
134 |               }}
135 |               onOutLimitAlert={limit => {
136 |                 if (limit) {
137 |                   sweetAlert("Oops...", "out of limits!!", "error");
138 |                 }
139 |               }}
140 |             />
141 |           </TabPanel>
142 | 
143 |           <TabPanel>
144 |             <h2>vertical label</h2>
145 |             <LuckyDraw
146 |               width={500}
147 |               height={350}
148 |               wheelSize={1000}
149 |               range={20}
150 |               innerRadius={250}
151 |               outerRadius={500}
152 |               showInnerLabels
153 |               drawLimitSwitch
154 |               drawLimit={4}
155 |               fontColor={'#000'}
156 |               fontSize={'14px'}
157 |               writingModel={'tb'}
158 |               drawButtonLabel={'start'}
159 |               textArray={example3}
160 |               onSuccessDrawReturn={drawNumber => {
161 |                 sweetAlert(example3[drawNumber], 'Congratulations !', "success");
162 | 
163 |               }}
164 |               onOutLimitAlert={limit => {
165 |                 if (limit) {
166 |                   sweetAlert("Oops...", "out of limits!!", "error");
167 |                 }
168 |               }}
169 |             />
170 |           </TabPanel>
171 | 
172 |           <TabPanel>
173 |             <h2>Effect with confetti</h2>
174 | 
175 |             <LuckyDraw
176 |               width={500}
177 |               height={350}
178 |               wheelSize={1000}
179 |               range={10}
180 |               innerRadius={250}
181 |               outerRadius={500}
182 |               showInnerLabels
183 |               drawLimitSwitch
184 |               drawLimit={4}
185 |               fontColor={'#000'}
186 |               fontSize={'14px'}
187 |               writingModel={'tb'}
188 |               drawButtonLabel={'start'}
189 |               textArray={example4}
190 |               onSuccessDrawReturn={drawNumber => {
191 | 
192 |                 sweetAlert(example4[drawNumber], 'Congratulations !', "success");
193 | 
194 |               }}
195 |               onOutLimitAlert={limit => {
196 |                 if (limit) {
197 |                   sweetAlert("Oops...", "out of limits!!", "error");
198 |                 }
199 |               }}
200 |             />
201 |           </TabPanel>
202 |         </Tabs>
203 | 
204 |       </div>
205 |     );
206 |   }
207 | }
208 | 
209 | export default App;
210 | 


--------------------------------------------------------------------------------
/lib/LuckyDraw.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | Object.defineProperty(exports, "__esModule", {
  4 |     value: true
  5 | });
  6 | 
  7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  8 | 
  9 | var _react = require("react");
 10 | 
 11 | var _react2 = _interopRequireDefault(_react);
 12 | 
 13 | var _Wheel = require("./Wheel");
 14 | 
 15 | var _Wheel2 = _interopRequireDefault(_Wheel);
 16 | 
 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 18 | 
 19 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 20 | 
 21 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 22 | 
 23 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 24 | 
 25 | var LuckyDraw = function (_Component) {
 26 |     _inherits(LuckyDraw, _Component);
 27 | 
 28 |     function LuckyDraw(props) {
 29 |         _classCallCheck(this, LuckyDraw);
 30 | 
 31 |         var _this = _possibleConstructorReturn(this, (LuckyDraw.__proto__ || Object.getPrototypeOf(LuckyDraw)).call(this, props));
 32 | 
 33 |         if (!('wheelSize' in props)) {
 34 |             _this.props.wheelSize = _this.defaultProps.width * 2;
 35 |         }
 36 |         _this.state = {
 37 |             startDraw: false,
 38 |             drawTimes: 1,
 39 |             randomNumber: null,
 40 |             rolling: false
 41 |         };
 42 |         return _this;
 43 |     }
 44 | 
 45 |     _createClass(LuckyDraw, [{
 46 |         key: "shouldComponentUpdate",
 47 |         value: function shouldComponentUpdate(nextProps, nextState) {
 48 |             return true;
 49 |         }
 50 |     }, {
 51 |         key: "_processRandomNumber",
 52 |         value: function _processRandomNumber(min, max) {
 53 |             return Math.floor(Math.random() * (max - min + 1)) + min;
 54 |         }
 55 |     }, {
 56 |         key: "_processDrawAngle",
 57 |         value: function _processDrawAngle(range, turns, drawTimes, drawNumber) {
 58 |             var peer = 360 / range;
 59 |             var totalAngle = 360 * turns * drawTimes + drawNumber * peer;
 60 |             return totalAngle;
 61 |         }
 62 |     }, {
 63 |         key: "_processDrawing",
 64 |         value: function _processDrawing(e) {
 65 |             var _this2 = this;
 66 | 
 67 |             e.preventDefault();
 68 |             if (!this.state.rolling) {
 69 |                 var drawTime = this.state.drawTimes;
 70 |                 if (this.props.drawLimitSwitch && drawTime - 1 < this.props.drawLimit) {
 71 |                     this.setState({
 72 |                         startDraw: true,
 73 |                         rolling: true,
 74 |                         randomNumber: this._processRandomNumber(0, this.props.range - 1),
 75 |                         drawTimes: this.state.drawTimes + 1
 76 |                     });
 77 |                     setTimeout(function () {
 78 |                         _this2.setState({
 79 |                             rolling: false
 80 |                         });
 81 |                         _this2.props.onSuccessDrawReturn(_this2.state.randomNumber);
 82 |                     }, this.props.rotateSecond * 1000);
 83 |                 } else {
 84 |                     this.props.onOutLimitAlert(true);
 85 |                 }
 86 |             }
 87 |         }
 88 |     }, {
 89 |         key: "render",
 90 |         value: function render() {
 91 |             var _this3 = this;
 92 | 
 93 |             var state = this.state;
 94 |             var props = this.props;
 95 |             var transformRotate = state.startDraw ? this._processDrawAngle(props.range, props.turns, state.drawTimes, state.randomNumber) : 0;
 96 |             return _react2.default.createElement(
 97 |                 "div",
 98 |                 { className: "react_luckyDraw", style: {
 99 |                         width: props.width,
100 |                         height: props.height
101 |                     } },
102 |                 _react2.default.createElement(
103 |                     "div",
104 |                     { className: state.rolling ? 'compass__container rolling' : 'compass__container' },
105 |                     _react2.default.createElement(
106 |                         "div",
107 |                         { className: "control__panel" },
108 |                         _react2.default.createElement("div", { className: "compass__arrow" }),
109 |                         _react2.default.createElement(
110 |                             "div",
111 |                             { className: "compass__spin",
112 |                                 style: {
113 |                                     width: props.wheelSize + "px",
114 |                                     height: props.wheelSize + "px",
115 |                                     transform: "rotate(" + -transformRotate + "deg) translate3d(0,0,-1px)",
116 |                                     transitionDuration: props.rotateSecond + "s"
117 |                                 } },
118 |                             _react2.default.createElement(_Wheel2.default, props)
119 |                         )
120 |                     ),
121 |                     _react2.default.createElement(
122 |                         "div",
123 |                         { className: "compass__btn" },
124 |                         _react2.default.createElement(
125 |                             "button",
126 |                             {
127 |                                 className: "bttn-jelly bttn-md bttn-danger",
128 |                                 onClick: function onClick(e) {
129 |                                     _this3._processDrawing(e);
130 |                                 } },
131 |                             props.drawButtonLabel
132 |                         )
133 |                     )
134 |                 )
135 |             );
136 |         }
137 |     }]);
138 | 
139 |     return LuckyDraw;
140 | }(_react.Component);
141 | 
142 | LuckyDraw.propTypes = {
143 |     width: _react2.default.PropTypes.number.isRequired,
144 |     height: _react2.default.PropTypes.number.isRequired,
145 |     range: _react2.default.PropTypes.number.isRequired,
146 |     wheelSize: _react2.default.PropTypes.number,
147 |     turns: _react2.default.PropTypes.number,
148 |     innerRadius: _react2.default.PropTypes.number,
149 |     outerRadius: _react2.default.PropTypes.number,
150 |     stoke: _react2.default.PropTypes.number,
151 |     showInnerLabels: _react2.default.PropTypes.bool,
152 |     drawLimitSwitch: _react2.default.PropTypes.bool,
153 |     drawLimit: _react2.default.PropTypes.number,
154 |     textArray: _react2.default.PropTypes.array,
155 |     fontColor: _react2.default.PropTypes.string,
156 |     fontSize: _react2.default.PropTypes.string,
157 |     writingModel: _react2.default.PropTypes.string,
158 |     drawButtonLabel: _react2.default.PropTypes.string,
159 |     onSuccessDrawReturn: _react2.default.PropTypes.func,
160 |     onOutLimitAlert: _react2.default.PropTypes.func
161 | };
162 | LuckyDraw.defaultProps = {
163 |     width: 500,
164 |     height: 350,
165 |     stoke: 20,
166 |     range: 20,
167 |     turns: 3,
168 |     rotateSecond: 5,
169 |     drawLimit: 3,
170 |     drawLimitSwitch: false,
171 |     fontColor: '#000',
172 |     fontSize: '18px',
173 |     writingModel: 'tb',
174 |     drawButtonLabel: 'Start'
175 | };
176 | exports.default = LuckyDraw;


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | // Do this as the first thing so that any code reading it knows the right env.
  2 | process.env.NODE_ENV = 'production';
  3 | 
  4 | // Load environment variables from .env file. Suppress warnings using silent
  5 | // if this file is missing. dotenv will never modify any environment variables
  6 | // that have already been set.
  7 | // https://github.com/motdotla/dotenv
  8 | require('dotenv').config({silent: true});
  9 | 
 10 | var chalk = require('chalk');
 11 | var fs = require('fs-extra');
 12 | var path = require('path');
 13 | var pathExists = require('path-exists');
 14 | var filesize = require('filesize');
 15 | var gzipSize = require('gzip-size').sync;
 16 | var webpack = require('webpack');
 17 | var config = require('../config/webpack.config.prod');
 18 | var paths = require('../config/paths');
 19 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 20 | var recursive = require('recursive-readdir');
 21 | var stripAnsi = require('strip-ansi');
 22 | 
 23 | var useYarn = pathExists.sync(paths.yarnLockFile);
 24 | 
 25 | // Warn and crash if required files are missing
 26 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 27 |   process.exit(1);
 28 | }
 29 | 
 30 | // Input: /User/dan/app/build/static/js/main.82be8.js
 31 | // Output: /static/js/main.js
 32 | function removeFileNameHash(fileName) {
 33 |   return fileName
 34 |     .replace(paths.appBuild, '')
 35 |     .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
 36 | }
 37 | 
 38 | // Input: 1024, 2048
 39 | // Output: "(+1 KB)"
 40 | function getDifferenceLabel(currentSize, previousSize) {
 41 |   var FIFTY_KILOBYTES = 1024 * 50;
 42 |   var difference = currentSize - previousSize;
 43 |   var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
 44 |   if (difference >= FIFTY_KILOBYTES) {
 45 |     return chalk.red('+' + fileSize);
 46 |   } else if (difference < FIFTY_KILOBYTES && difference > 0) {
 47 |     return chalk.yellow('+' + fileSize);
 48 |   } else if (difference < 0) {
 49 |     return chalk.green(fileSize);
 50 |   } else {
 51 |     return '';
 52 |   }
 53 | }
 54 | 
 55 | // First, read the current file sizes in build directory.
 56 | // This lets us display how much they changed later.
 57 | recursive(paths.appBuild, (err, fileNames) => {
 58 |   var previousSizeMap = (fileNames || [])
 59 |     .filter(fileName => /\.(js|css)$/.test(fileName))
 60 |     .reduce((memo, fileName) => {
 61 |       var contents = fs.readFileSync(fileName);
 62 |       var key = removeFileNameHash(fileName);
 63 |       memo[key] = gzipSize(contents);
 64 |       return memo;
 65 |     }, {});
 66 | 
 67 |   // Remove all content but keep the directory so that
 68 |   // if you're in it, you don't end up in Trash
 69 |   fs.emptyDirSync(paths.appBuild);
 70 | 
 71 |   // Start the webpack build
 72 |   build(previousSizeMap);
 73 | 
 74 |   // Merge with the public folder
 75 |   copyPublicFolder();
 76 | });
 77 | 
 78 | // Print a detailed summary of build files.
 79 | function printFileSizes(stats, previousSizeMap) {
 80 |   var assets = stats.toJson().assets
 81 |     .filter(asset => /\.(js|css)$/.test(asset.name))
 82 |     .map(asset => {
 83 |       var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
 84 |       var size = gzipSize(fileContents);
 85 |       var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
 86 |       var difference = getDifferenceLabel(size, previousSize);
 87 |       return {
 88 |         folder: path.join('build', path.dirname(asset.name)),
 89 |         name: path.basename(asset.name),
 90 |         size: size,
 91 |         sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
 92 |       };
 93 |     });
 94 |   assets.sort((a, b) => b.size - a.size);
 95 |   var longestSizeLabelLength = Math.max.apply(null,
 96 |     assets.map(a => stripAnsi(a.sizeLabel).length)
 97 |   );
 98 |   assets.forEach(asset => {
 99 |     var sizeLabel = asset.sizeLabel;
100 |     var sizeLength = stripAnsi(sizeLabel).length;
101 |     if (sizeLength < longestSizeLabelLength) {
102 |       var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
103 |       sizeLabel += rightPadding;
104 |     }
105 |     console.log(
106 |       '  ' + sizeLabel +
107 |       '  ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
108 |     );
109 |   });
110 | }
111 | 
112 | // Print out errors
113 | function printErrors(summary, errors) {
114 |   console.log(chalk.red(summary));
115 |   console.log();
116 |   errors.forEach(err => {
117 |     console.log(err.message || err);
118 |     console.log();
119 |   });
120 | }
121 | 
122 | // Create the production build and print the deployment instructions.
123 | function build(previousSizeMap) {
124 |   console.log('Creating an optimized production build...');
125 |   webpack(config).run((err, stats) => {
126 |     if (err) {
127 |       printErrors('Failed to compile.', [err]);
128 |       process.exit(1);
129 |     }
130 | 
131 |     if (stats.compilation.errors.length) {
132 |       printErrors('Failed to compile.', stats.compilation.errors);
133 |       process.exit(1);
134 |     }
135 | 
136 |     if (process.env.CI && stats.compilation.warnings.length) {
137 |      printErrors('Failed to compile.', stats.compilation.warnings);
138 |      process.exit(1);
139 |    }
140 | 
141 |     console.log(chalk.green('Compiled successfully.'));
142 |     console.log();
143 | 
144 |     console.log('File sizes after gzip:');
145 |     console.log();
146 |     printFileSizes(stats, previousSizeMap);
147 |     console.log();
148 | 
149 |     var openCommand = process.platform === 'win32' ? 'start' : 'open';
150 |     var appPackage  = require(paths.appPackageJson);
151 |     var homepagePath = appPackage.homepage;
152 |     var publicPath = config.output.publicPath;
153 |     if (homepagePath && homepagePath.indexOf('.github.io/') !== -1) {
154 |       // "homepage": "http://user.github.io/project"
155 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
156 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
157 |       console.log();
158 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
159 |       console.log('To publish it at ' + chalk.green(homepagePath) + ', run:');
160 |       // If script deploy has been added to package.json, skip the instructions
161 |       if (typeof appPackage.scripts.deploy === 'undefined') {
162 |         console.log();
163 |         if (useYarn) {
164 |           console.log('  ' + chalk.cyan('yarn') +  ' add --dev gh-pages');
165 |         } else {
166 |           console.log('  ' + chalk.cyan('npm') +  ' install --save-dev gh-pages');
167 |         }
168 |         console.log();
169 |         console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
170 |         console.log();
171 |         console.log('    ' + chalk.dim('// ...'));
172 |         console.log('    ' + chalk.yellow('"scripts"') + ': {');
173 |         console.log('      ' + chalk.dim('// ...'));
174 |         console.log('      ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"npm run build&&gh-pages -d build"'));
175 |         console.log('    }');
176 |         console.log();
177 |         console.log('Then run:');
178 |       }
179 |       console.log();
180 |       console.log('  ' + chalk.cyan(useYarn ? 'yarn' : 'npm') +  ' run deploy');
181 |       console.log();
182 |     } else if (publicPath !== '/') {
183 |       // "homepage": "http://mywebsite.com/project"
184 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
185 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
186 |       console.log();
187 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
188 |       console.log();
189 |     } else {
190 |       // no homepage or "homepage": "http://mywebsite.com"
191 |       console.log('The project was built assuming it is hosted at the server root.');
192 |       if (homepagePath) {
193 |         // "homepage": "http://mywebsite.com"
194 |         console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
195 |         console.log();
196 |       } else {
197 |         // no homepage
198 |         console.log('To override this, specify the ' + chalk.green('homepage') + ' in your '  + chalk.cyan('package.json') + '.');
199 |         console.log('For example, add this to build it for GitHub Pages:')
200 |         console.log();
201 |         console.log('  ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
202 |         console.log();
203 |       }
204 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
205 |       console.log('You may also serve it locally with a static server:')
206 |       console.log();
207 |       if (useYarn) {
208 |         console.log('  ' + chalk.cyan('yarn') +  ' global add pushstate-server');
209 |       } else {
210 |         console.log('  ' + chalk.cyan('npm') +  ' install -g pushstate-server');
211 |       }
212 |       console.log('  ' + chalk.cyan('pushstate-server') + ' build');
213 |       console.log('  ' + chalk.cyan(openCommand) + ' http://localhost:9000');
214 |       console.log();
215 |     }
216 |   });
217 | }
218 | 
219 | function copyPublicFolder() {
220 |   fs.copySync(paths.appPublic, paths.appBuild, {
221 |     dereference: true,
222 |     filter: file => file !== paths.appHtml
223 |   });
224 | }
225 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | var autoprefixer = require('autoprefixer');
  2 | var webpack = require('webpack');
  3 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  4 | var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  5 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  6 | var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  7 | var getClientEnvironment = require('./env');
  8 | var paths = require('./paths');
  9 | 
 10 | 
 11 | // Webpack uses `publicPath` to determine where the app is being served from.
 12 | // In development, we always serve from the root. This makes config easier.
 13 | var publicPath = '/';
 14 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 15 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 16 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 17 | var publicUrl = '';
 18 | // Get environment variables to inject into our app.
 19 | var env = getClientEnvironment(publicUrl);
 20 | 
 21 | // This is the development configuration.
 22 | // It is focused on developer experience and fast rebuilds.
 23 | // The production configuration is different and lives in a separate file.
 24 | module.exports = {
 25 |     // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 26 |     // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 27 |     devtool: 'cheap-module-source-map',
 28 |     // These are the "entry points" to our application.
 29 |     // This means they will be the "root" imports that are included in JS bundle.
 30 |     // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 31 |     entry: [
 32 |         // Include an alternative client for WebpackDevServer. A client's job is to
 33 |         // connect to WebpackDevServer by a socket and get notified about changes.
 34 |         // When you save a file, the client will either apply hot updates (in case
 35 |         // of CSS changes), or refresh the page (in case of JS changes). When you
 36 |         // make a syntax error, this client will display a syntax error overlay.
 37 |         // Note: instead of the default WebpackDevServer client, we use a custom one
 38 |         // to bring better experience for Create React App users. You can replace
 39 |         // the line below with these two lines if you prefer the stock client:
 40 |         // require.resolve('webpack-dev-server/client') + '?/',
 41 |         // require.resolve('webpack/hot/dev-server'),
 42 |         require.resolve('react-dev-utils/webpackHotDevClient'),
 43 |         // We ship a few polyfills by default:
 44 |         require.resolve('./polyfills'),
 45 |         // Finally, this is your app's code:
 46 |         paths.appIndexJs
 47 |         // We include the app code last so that if there is a runtime error during
 48 |         // initialization, it doesn't blow up the WebpackDevServer client, and
 49 |         // changing JS code would still trigger a refresh.
 50 |     ],
 51 |     output: {
 52 |         // Next line is not used in dev but WebpackDevServer crashes without it:
 53 |         path: paths.appBuild,
 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 |         // This is the URL that app is served from. We use "/" in development.
 61 |         publicPath: publicPath
 62 |     },
 63 |     resolve: {
 64 |         // This allows you to set a fallback for where Webpack should look for modules.
 65 |         // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 66 |         // We use `fallback` instead of `root` because we want `node_modules` to "win"
 67 |         // if there any conflicts. This matches Node resolution mechanism.
 68 |         // https://github.com/facebookincubator/create-react-app/issues/253
 69 |         fallback: paths.nodePaths,
 70 |         // These are the reasonable defaults supported by the Node ecosystem.
 71 |         // We also include JSX as a common component filename extension to support
 72 |         // some tools, although we do not recommend using it, see:
 73 |         // https://github.com/facebookincubator/create-react-app/issues/290
 74 |         extensions: ['.js', '.json', '.jsx', '.styl',''],
 75 |         alias: {
 76 |             // Support React Native Web
 77 |             // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 78 |             'react-native': 'react-native-web'
 79 |         }
 80 |     },
 81 | 
 82 |     module: {
 83 |         // First, run the linter.
 84 |         // It's important to do this before Babel processes the JS.
 85 |         preLoaders: [
 86 |             {
 87 |                 test: /\.(js|jsx)$/,
 88 |                 loader: 'eslint',
 89 |                 include: paths.appSrc,
 90 |             }
 91 |         ],
 92 |         loaders: [
 93 |             // Default loader: load all assets that are not handled
 94 |             // by other loaders with the url loader.
 95 |             // Note: This list needs to be updated with every change of extensions
 96 |             // the other loaders match.
 97 |             // E.g., when adding a loader for a new supported file extension,
 98 |             // we need to add the supported extension to this loader too.
 99 |             // Add one new line in `exclude` for each loader.
100 |             //
101 |             // "file" loader makes sure those assets get served by WebpackDevServer.
102 |             // When you `import` an asset, you get its (virtual) filename.
103 |             // In production, they would get copied to the `build` folder.
104 |             // "url" loader works like "file" loader except that it embeds assets
105 |             // smaller than specified limit in bytes as data URLs to avoid requests.
106 |             // A missing `test` is equivalent to a match.
107 |             {
108 |                 exclude: [
109 |                     /\.html$/,
110 |                     /\.(js|jsx)$/,
111 |                     /\.css$/,
112 |                     /\.styl$/,
113 |                     /\.json$/,
114 |                     /\.svg$/
115 |                 ],
116 |                 loader: 'url',
117 |                 query: {
118 |                     limit: 10000,
119 |                     name: 'static/media/[name].[hash:8].[ext]'
120 |                 }
121 |             },
122 |             // Process JS with Babel.
123 |             {
124 |                 test: /\.(js|jsx)$/,
125 |                 include: paths.appSrc,
126 |                 loader: 'babel',
127 |                 query: {
128 | 
129 |                     // This is a feature of `babel-loader` for webpack (not Babel itself).
130 |                     // It enables caching results in ./node_modules/.cache/babel-loader/
131 |                     // directory for faster rebuilds.
132 |                     cacheDirectory: true
133 |                 }
134 |             },
135 |             // "postcss" loader applies autoprefixer to our CSS.
136 |             // "css" loader resolves paths in CSS and adds assets as dependencies.
137 |             // "style" loader turns CSS into JS modules that inject <style> tags.
138 |             // In production, we use a plugin to extract that CSS to a file, but
139 |             // in development "style" loader enables hot editing of CSS.
140 |             {
141 |                 test: /\.css$/,
142 |                 loader: 'style!css?importLoaders=1!postcss'
143 |             },
144 | 
145 |             {
146 |                 test: /\.styl$/,
147 |                 include: paths.appSrc,
148 |                 loader: 'style-loader!css-loader!stylus-loader'
149 |             },
150 |             // JSON is not enabled by default in Webpack but both Node and Browserify
151 |             // allow it implicitly so we also enable it.
152 |             {
153 |                 test: /\.json$/,
154 |                 loader: 'json'
155 |             },
156 |             // "file" loader for svg
157 |             {
158 |                 test: /\.svg$/,
159 |                 loader: 'file',
160 |                 query: {
161 |                     name: 'static/media/[name].[hash:8].[ext]'
162 |                 }
163 |             }
164 |         ]
165 |     },
166 | 
167 |     // We use PostCSS for autoprefixing only.
168 |     postcss: function () {
169 |         return [
170 |             autoprefixer({
171 |                 browsers: [
172 |                     '>1%',
173 |                     'last 4 versions',
174 |                     'Firefox ESR',
175 |                     'not ie < 9', // React doesn't support IE8 anyway
176 |                 ]
177 |             }),
178 |         ];
179 |     },
180 |     plugins: [
181 |         // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
182 |         // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
183 |         // In development, this will be an empty string.
184 |         new InterpolateHtmlPlugin({
185 |             PUBLIC_URL: publicUrl
186 |         }),
187 |         // Generates an `index.html` file with the <script> injected.
188 |         new HtmlWebpackPlugin({
189 |             inject: true,
190 |             template: paths.appHtml,
191 |         }),
192 |         // Makes some environment variables available to the JS code, for example:
193 |         // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
194 |         new webpack.DefinePlugin(env),
195 |         // This is necessary to emit hot updates (currently CSS only):
196 |         new webpack.HotModuleReplacementPlugin(),
197 |         // Watcher doesn't work well if you mistype casing in a path so we use
198 |         // a plugin that prints an error when you attempt to do this.
199 |         // See https://github.com/facebookincubator/create-react-app/issues/240
200 |         new CaseSensitivePathsPlugin(),
201 |         // If you require a missing module and then `npm install` it, you still have
202 |         // to restart the development server for Webpack to discover it. This plugin
203 |         // makes the discovery automatic so you don't have to restart.
204 |         // See https://github.com/facebookincubator/create-react-app/issues/186
205 |         new WatchMissingNodeModulesPlugin(paths.appNodeModules)
206 |     ],
207 |     // Some libraries import Node modules but don't use them in the browser.
208 |     // Tell Webpack to provide empty mocks for them so importing them works.
209 |     node: {
210 |         fs: 'empty',
211 |         net: 'empty',
212 |         tls: 'empty'
213 |     }
214 | };
215 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | var autoprefixer = require('autoprefixer');
  2 | var webpack = require('webpack');
  3 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  4 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
  5 | var ManifestPlugin = require('webpack-manifest-plugin');
  6 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  7 | var url = require('url');
  8 | var paths = require('./paths');
  9 | var getClientEnvironment = require('./env');
 10 | 
 11 | 
 12 | function ensureSlash(path, needsSlash) {
 13 |     var 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 | // We use "homepage" field to infer "public path" at which the app is served.
 24 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
 25 | // single-page apps that may serve index.html for nested URLs like /todos/42.
 26 | // We can't use a relative path in HTML because we don't want to load something
 27 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 28 | var homepagePath = require(paths.appPackageJson).homepage;
 29 | var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/';
 30 | // Webpack uses `publicPath` to determine where the app is being served from.
 31 | // It requires a trailing slash, or the file assets will get an incorrect path.
 32 | var publicPath = ensureSlash(homepagePathname, true);
 33 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 34 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 35 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 36 | var publicUrl = ensureSlash(homepagePathname, false);
 37 | // Get environment variables to inject into our app.
 38 | var env = getClientEnvironment(publicUrl);
 39 | 
 40 | // Assert this just to be safe.
 41 | // Development builds of React are slow and not intended for production.
 42 | if (env['process.env'].NODE_ENV !== '"production"') {
 43 |     throw new Error('Production builds must have NODE_ENV=production.');
 44 | }
 45 | 
 46 | // This is the production configuration.
 47 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 48 | // The development configuration is different and lives in a separate file.
 49 | module.exports = {
 50 |     // Don't attempt to continue if there are any errors.
 51 |     bail: true,
 52 |     // We generate sourcemaps in production. This is slow but gives good results.
 53 |     // You can exclude the *.map files from the build during deployment.
 54 |     devtool: 'source-map',
 55 |     // In production, we only want to load the polyfills and the app code.
 56 |     entry: [
 57 |         require.resolve('./polyfills'),
 58 |         paths.appIndexJs
 59 |     ],
 60 |     output: {
 61 |         // The build folder.
 62 |         path: paths.appBuild,
 63 |         // Generated JS file names (with nested folders).
 64 |         // There will be one main bundle, and one file per asynchronous chunk.
 65 |         // We don't currently advertise code splitting but Webpack supports it.
 66 |         filename: 'static/js/[name].[chunkhash:8].js',
 67 |         chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 68 |         // We inferred the "public path" (such as / or /my-project) from homepage.
 69 |         publicPath: publicPath
 70 |     },
 71 |     resolve: {
 72 |         // This allows you to set a fallback for where Webpack should look for modules.
 73 |         // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 74 |         // We use `fallback` instead of `root` because we want `node_modules` to "win"
 75 |         // if there any conflicts. This matches Node resolution mechanism.
 76 |         // https://github.com/facebookincubator/create-react-app/issues/253
 77 |         fallback: paths.nodePaths,
 78 |         // These are the reasonable defaults supported by the Node ecosystem.
 79 |         // We also include JSX as a common component filename extension to support
 80 |         // some tools, although we do not recommend using it, see:
 81 |         // https://github.com/facebookincubator/create-react-app/issues/290
 82 |         //
 83 |         extensions: ['.js', '.json', '.jsx', '.styl', ''],
 84 |         alias: {
 85 |             // Support React Native Web
 86 |             // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 87 |             'react-native': 'react-native-web'
 88 |         }
 89 |     },
 90 | 
 91 |     module: {
 92 |         // First, run the linter.
 93 |         // It's important to do this before Babel processes the JS.
 94 |         preLoaders: [
 95 |             {
 96 |                 test: /\.(js|jsx)$/,
 97 |                 loader: 'eslint',
 98 |                 include: paths.appSrc
 99 |             }
100 |         ],
101 |         loaders: [
102 |             // Default loader: load all assets that are not handled
103 |             // by other loaders with the url loader.
104 |             // Note: This list needs to be updated with every change of extensions
105 |             // the other loaders match.
106 |             // E.g., when adding a loader for a new supported file extension,
107 |             // we need to add the supported extension to this loader too.
108 |             // Add one new line in `exclude` for each loader.
109 |             //
110 |             // "file" loader makes sure those assets end up in the `build` folder.
111 |             // When you `import` an asset, you get its filename.
112 |             // "url" loader works just like "file" loader but it also embeds
113 |             // assets smaller than specified size as data URLs to avoid requests.
114 |             {
115 |                 exclude: [
116 |                     /\.html$/,
117 |                     /\.(js|jsx)$/,
118 |                     /\.css$/,
119 |                     /\.styl$/,
120 |                     /\.json$/,
121 |                     /\.svg$/
122 |                 ],
123 |                 loader: 'url',
124 |                 query: {
125 |                     limit: 10000,
126 |                     name: 'static/media/[name].[hash:8].[ext]'
127 |                 }
128 |             },
129 |             // Process JS with Babel.
130 |             {
131 |                 test: /\.(js|jsx)$/,
132 |                 include: paths.appSrc,
133 |                 loader: 'babel',
134 | 
135 |             },
136 |             // The notation here is somewhat confusing.
137 |             // "postcss" loader applies autoprefixer to our CSS.
138 |             // "css" loader resolves paths in CSS and adds assets as dependencies.
139 |             // "style" loader normally turns CSS into JS modules injecting <style>,
140 |             // but unlike in development configuration, we do something different.
141 |             // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
142 |             // (second argument), then grabs the result CSS and puts it into a
143 |             // separate file in our build process. This way we actually ship
144 |             // a single CSS file in production instead of JS code injecting <style>
145 |             // tags. If you use code splitting, however, any async bundles will still
146 |             // use the "style" loader inside the async code so CSS from them won't be
147 |             // in the main CSS file.
148 |             {
149 |                 test: /\.css$/,
150 |                 loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss')
151 |                 // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
152 |             },
153 | 
154 |             {
155 |                 test: /\.styl$/,
156 |                 include: paths.appSrc,
157 |                 loader: 'style-loader!css-loader!stylus-loader'
158 |             },
159 |             // JSON is not enabled by default in Webpack but both Node and Browserify
160 |             // allow it implicitly so we also enable it.
161 |             {
162 |                 test: /\.json$/,
163 |                 loader: 'json'
164 |             },
165 |             // "file" loader for svg
166 |             {
167 |                 test: /\.svg$/,
168 |                 loader: 'file',
169 |                 query: {
170 |                     name: 'static/media/[name].[hash:8].[ext]'
171 |                 }
172 |             }
173 |         ]
174 |     },
175 | 
176 |     // We use PostCSS for autoprefixing only.
177 |     postcss: function () {
178 |         return [
179 |             autoprefixer({
180 |                 browsers: [
181 |                     '>1%',
182 |                     'last 4 versions',
183 |                     'Firefox ESR',
184 |                     'not ie < 9', // React doesn't support IE8 anyway
185 |                 ]
186 |             }),
187 |         ];
188 |     },
189 |     plugins: [
190 |         // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
191 |         // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
192 |         // In production, it will be an empty string unless you specify "homepage"
193 |         // in `package.json`, in which case it will be the pathname of that URL.
194 |         new InterpolateHtmlPlugin({
195 |             PUBLIC_URL: publicUrl
196 |         }),
197 |         // Generates an `index.html` file with the <script> injected.
198 |         new HtmlWebpackPlugin({
199 |             inject: true,
200 |             template: paths.appHtml,
201 |             minify: {
202 |                 removeComments: true,
203 |                 collapseWhitespace: true,
204 |                 removeRedundantAttributes: true,
205 |                 useShortDoctype: true,
206 |                 removeEmptyAttributes: true,
207 |                 removeStyleLinkTypeAttributes: true,
208 |                 keepClosingSlash: true,
209 |                 minifyJS: true,
210 |                 minifyCSS: true,
211 |                 minifyURLs: true
212 |             }
213 |         }),
214 |         // Makes some environment variables available to the JS code, for example:
215 |         // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
216 |         // It is absolutely essential that NODE_ENV was set to production here.
217 |         // Otherwise React will be compiled in the very slow development mode.
218 |         new webpack.DefinePlugin(env),
219 |         // This helps ensure the builds are consistent if source hasn't changed:
220 |         new webpack.optimize.OccurrenceOrderPlugin(),
221 |         // Try to dedupe duplicated modules, if any:
222 |         new webpack.optimize.DedupePlugin(),
223 |         // Minify the code.
224 |         new webpack.optimize.UglifyJsPlugin({
225 |             compress: {
226 |                 screw_ie8: true, // React doesn't support IE8
227 |                 warnings: false
228 |             },
229 |             mangle: {
230 |                 screw_ie8: true
231 |             },
232 |             output: {
233 |                 comments: false,
234 |                 screw_ie8: true
235 |             }
236 |         }),
237 |         // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
238 |         new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
239 |         // Generate a manifest file which contains a mapping of all asset filenames
240 |         // to their corresponding output file so that tools can pick it up without
241 |         // having to parse `index.html`.
242 |         new ManifestPlugin({
243 |             fileName: 'asset-manifest.json'
244 |         })
245 |     ],
246 |     // Some libraries import Node modules but don't use them in the browser.
247 |     // Tell Webpack to provide empty mocks for them so importing them works.
248 |     node: {
249 |         fs: 'empty',
250 |         net: 'empty',
251 |         tls: 'empty'
252 |     }
253 | };
254 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | process.env.NODE_ENV = 'development';
  2 | 
  3 | // Load environment variables from .env file. Suppress warnings using silent
  4 | // if this file is missing. dotenv will never modify any environment variables
  5 | // that have already been set.
  6 | // https://github.com/motdotla/dotenv
  7 | require('dotenv').config({silent: true});
  8 | 
  9 | var chalk = require('chalk');
 10 | var webpack = require('webpack');
 11 | var WebpackDevServer = require('webpack-dev-server');
 12 | var historyApiFallback = require('connect-history-api-fallback');
 13 | var httpProxyMiddleware = require('http-proxy-middleware');
 14 | var detect = require('detect-port');
 15 | var clearConsole = require('react-dev-utils/clearConsole');
 16 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 17 | var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 18 | var getProcessForPort = require('react-dev-utils/getProcessForPort');
 19 | var openBrowser = require('react-dev-utils/openBrowser');
 20 | var prompt = require('react-dev-utils/prompt');
 21 | var pathExists = require('path-exists');
 22 | var config = require('../config/webpack.config.dev');
 23 | var paths = require('../config/paths');
 24 | 
 25 | var useYarn = pathExists.sync(paths.yarnLockFile);
 26 | var cli = useYarn ? 'yarn' : 'npm';
 27 | var isInteractive = process.stdout.isTTY;
 28 | 
 29 | // Warn and crash if required files are missing
 30 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 31 |   process.exit(1);
 32 | }
 33 | 
 34 | // Tools like Cloud9 rely on this.
 35 | var DEFAULT_PORT = process.env.PORT || 4000;
 36 | var compiler;
 37 | var handleCompile;
 38 | 
 39 | // You can safely remove this after ejecting.
 40 | // We only use this block for testing of Create React App itself:
 41 | var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
 42 | if (isSmokeTest) {
 43 |   handleCompile = function (err, stats) {
 44 |     if (err || stats.hasErrors() || stats.hasWarnings()) {
 45 |       process.exit(1);
 46 |     } else {
 47 |       process.exit(0);
 48 |     }
 49 |   };
 50 | }
 51 | 
 52 | function setupCompiler(host, port, protocol) {
 53 |   // "Compiler" is a low-level interface to Webpack.
 54 |   // It lets us listen to some events and provide our own custom messages.
 55 |   compiler = webpack(config, handleCompile);
 56 | 
 57 |   // "invalid" event fires when you have changed a file, and Webpack is
 58 |   // recompiling a bundle. WebpackDevServer takes care to pause serving the
 59 |   // bundle, so if you refresh, it'll wait instead of serving the old one.
 60 |   // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
 61 |   compiler.plugin('invalid', function() {
 62 |     if (isInteractive) {
 63 |       clearConsole();
 64 |     }
 65 |     console.log('Compiling...');
 66 |   });
 67 | 
 68 |   var isFirstCompile = true;
 69 | 
 70 |   // "done" event fires when Webpack has finished recompiling the bundle.
 71 |   // Whether or not you have warnings or errors, you will get this event.
 72 |   compiler.plugin('done', function(stats) {
 73 |     if (isInteractive) {
 74 |       clearConsole();
 75 |     }
 76 | 
 77 |     // We have switched off the default Webpack output in WebpackDevServer
 78 |     // options so we are going to "massage" the warnings and errors and present
 79 |     // them in a readable focused way.
 80 |     var messages = formatWebpackMessages(stats.toJson({}, true));
 81 |     var isSuccessful = !messages.errors.length && !messages.warnings.length;
 82 |     var showInstructions = isSuccessful && (isInteractive || isFirstCompile);
 83 | 
 84 |     if (isSuccessful) {
 85 |       console.log(chalk.green('Compiled successfully!'));
 86 |     }
 87 | 
 88 |     if (showInstructions) {
 89 |       console.log();
 90 |       console.log('The app is running at:');
 91 |       console.log();
 92 |       console.log('  ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
 93 |       console.log();
 94 |       console.log('Note that the development build is not optimized.');
 95 |       console.log('To create a production build, use ' + chalk.cyan(cli + ' run build') + '.');
 96 |       console.log();
 97 |       isFirstCompile = false;
 98 |     }
 99 | 
100 |     // If errors exist, only show errors.
101 |     if (messages.errors.length) {
102 |       console.log(chalk.red('Failed to compile.'));
103 |       console.log();
104 |       messages.errors.forEach(message => {
105 |         console.log(message);
106 |         console.log();
107 |       });
108 |       return;
109 |     }
110 | 
111 |     // Show warnings if no errors were found.
112 |     if (messages.warnings.length) {
113 |       console.log(chalk.yellow('Compiled with warnings.'));
114 |       console.log();
115 |       messages.warnings.forEach(message => {
116 |         console.log(message);
117 |         console.log();
118 |       });
119 |       // Teach some ESLint tricks.
120 |       console.log('You may use special comments to disable some warnings.');
121 |       console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
122 |       console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
123 |     }
124 |   });
125 | }
126 | 
127 | // We need to provide a custom onError function for httpProxyMiddleware.
128 | // It allows us to log custom error messages on the console.
129 | function onProxyError(proxy) {
130 |   return function(err, req, res){
131 |     var host = req.headers && req.headers.host;
132 |     console.log(
133 |       chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
134 |       ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
135 |     );
136 |     console.log(
137 |       'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
138 |       chalk.cyan(err.code) + ').'
139 |     );
140 |     console.log();
141 | 
142 |     // And immediately send the proper error response to the client.
143 |     // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
144 |     if (res.writeHead && !res.headersSent) {
145 |         res.writeHead(500);
146 |     }
147 |     res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
148 |       host + ' to ' + proxy + ' (' + err.code + ').'
149 |     );
150 |   }
151 | }
152 | 
153 | function addMiddleware(devServer) {
154 |   // `proxy` lets you to specify a fallback server during development.
155 |   // Every unrecognized request will be forwarded to it.
156 |   var proxy = require(paths.appPackageJson).proxy;
157 |   devServer.use(historyApiFallback({
158 |     // Paths with dots should still use the history fallback.
159 |     // See https://github.com/facebookincubator/create-react-app/issues/387.
160 |     disableDotRule: true,
161 |     // For single page apps, we generally want to fallback to /index.html.
162 |     // However we also want to respect `proxy` for API calls.
163 |     // So if `proxy` is specified, we need to decide which fallback to use.
164 |     // We use a heuristic: if request `accept`s text/html, we pick /index.html.
165 |     // Modern browsers include text/html into `accept` header when navigating.
166 |     // However API calls like `fetch()` won’t generally accept text/html.
167 |     // If this heuristic doesn’t work well for you, don’t use `proxy`.
168 |     htmlAcceptHeaders: proxy ?
169 |       ['text/html'] :
170 |       ['text/html', '*/*']
171 |   }));
172 |   if (proxy) {
173 |     if (typeof proxy !== 'string') {
174 |       console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
175 |       console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
176 |       console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
177 |       process.exit(1);
178 |     }
179 | 
180 |     // Otherwise, if proxy is specified, we will let it handle any request.
181 |     // There are a few exceptions which we won't send to the proxy:
182 |     // - /index.html (served as HTML5 history API fallback)
183 |     // - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
184 |     // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
185 |     // Tip: use https://jex.im/regulex/ to visualize the regex
186 |     var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
187 | 
188 |     // Pass the scope regex both to Express and to the middleware for proxying
189 |     // of both HTTP and WebSockets to work without false positives.
190 |     var hpm = httpProxyMiddleware(pathname => mayProxy.test(pathname), {
191 |       target: proxy,
192 |       logLevel: 'silent',
193 |       onProxyReq: function(proxyReq, req, res) {
194 |         // Browers may send Origin headers even with same-origin
195 |         // requests. To prevent CORS issues, we have to change
196 |         // the Origin to match the target URL.
197 |         if (proxyReq.getHeader('origin')) {
198 |           proxyReq.setHeader('origin', proxy);
199 |         }
200 |       },
201 |       onError: onProxyError(proxy),
202 |       secure: false,
203 |       changeOrigin: true,
204 |       ws: true
205 |     });
206 |     devServer.use(mayProxy, hpm);
207 | 
208 |     // Listen for the websocket 'upgrade' event and upgrade the connection.
209 |     // If this is not done, httpProxyMiddleware will not try to upgrade until
210 |     // an initial plain HTTP request is made.
211 |     devServer.listeningApp.on('upgrade', hpm.upgrade);
212 |   }
213 | 
214 |   // Finally, by now we have certainly resolved the URL.
215 |   // It may be /index.html, so let the dev server try serving it again.
216 |   devServer.use(devServer.middleware);
217 | }
218 | 
219 | function runDevServer(host, port, protocol) {
220 |   var devServer = new WebpackDevServer(compiler, {
221 |     // Enable gzip compression of generated files.
222 |     compress: true,
223 |     // Silence WebpackDevServer's own logs since they're generally not useful.
224 |     // It will still show compile warnings and errors with this setting.
225 |     clientLogLevel: 'none',
226 |     // By default WebpackDevServer serves physical files from current directory
227 |     // in addition to all the virtual build products that it serves from memory.
228 |     // This is confusing because those files won’t automatically be available in
229 |     // production build folder unless we copy them. However, copying the whole
230 |     // project directory is dangerous because we may expose sensitive files.
231 |     // Instead, we establish a convention that only files in `public` directory
232 |     // get served. Our build script will copy `public` into the `build` folder.
233 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_PATH%:
234 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
235 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
236 |     // Note that we only recommend to use `public` folder as an escape hatch
237 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
238 |     // for some reason broken when imported through Webpack. If you just want to
239 |     // use an image, put it in `src` and `import` it from JavaScript instead.
240 |     contentBase: paths.appPublic,
241 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
242 |     // for the WebpackDevServer client so it can learn when the files were
243 |     // updated. The WebpackDevServer client is included as an entry point
244 |     // in the Webpack development configuration. Note that only changes
245 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
246 |     hot: true,
247 |     // It is important to tell WebpackDevServer to use the same "root" path
248 |     // as we specified in the config. In development, we always serve from /.
249 |     publicPath: config.output.publicPath,
250 |     // WebpackDevServer is noisy by default so we emit custom message instead
251 |     // by listening to the compiler events with `compiler.plugin` calls above.
252 |     quiet: true,
253 |     // Reportedly, this avoids CPU overload on some systems.
254 |     // https://github.com/facebookincubator/create-react-app/issues/293
255 |     watchOptions: {
256 |       ignored: /node_modules/
257 |     },
258 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
259 |     https: protocol === "https",
260 |     host: host
261 |   });
262 | 
263 |   // Our custom middleware proxies requests to /index.html or a remote API.
264 |   addMiddleware(devServer);
265 | 
266 |   // Launch WebpackDevServer.
267 |   devServer.listen(port, (err, result) => {
268 |     if (err) {
269 |       return console.log(err);
270 |     }
271 | 
272 |     if (isInteractive) {
273 |       clearConsole();
274 |     }
275 |     console.log(chalk.cyan('Starting the development server...'));
276 |     console.log();
277 | 
278 |     if (isInteractive) {
279 |       openBrowser(protocol + '://' + host + ':' + port + '/');
280 |     }
281 |   });
282 | }
283 | 
284 | function run(port) {
285 |   var protocol = process.env.HTTPS === 'true' ? "https" : "http";
286 |   var host = process.env.HOST || 'localhost';
287 |   setupCompiler(host, port, protocol);
288 |   runDevServer(host, port, protocol);
289 | }
290 | 
291 | // We attempt to use the default port but if it is busy, we offer the user to
292 | // run on a different port. `detect()` Promise resolves to the next free port.
293 | detect(DEFAULT_PORT).then(port => {
294 |   if (port === DEFAULT_PORT) {
295 |     run(port);
296 |     return;
297 |   }
298 | 
299 |   if (isInteractive) {
300 |     clearConsole();
301 |     var existingProcess = getProcessForPort(DEFAULT_PORT);
302 |     var question =
303 |       chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.' +
304 |         ((existingProcess) ? ' Probably:\n  ' + existingProcess : '')) +
305 |         '\n\nWould you like to run the app on another port instead?';
306 | 
307 |     prompt(question, true).then(shouldChangePort => {
308 |       if (shouldChangePort) {
309 |         run(port);
310 |       }
311 |     });
312 |   } else {
313 |     console.log(chalk.red('Something is already running on port ' + DEFAULT_PORT + '.'));
314 |   }
315 | });
316 | 


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