├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .yo-rc.json ├── LICENSE ├── README.md ├── cfg ├── base.js ├── defaults.js ├── dev.js ├── dist.js └── test.js ├── dist ├── README.md ├── assets │ ├── 42092f929161dae9c08a21bfb46ece4d.png │ ├── app.js │ └── app.js.map ├── favicon.ico └── index.html ├── karma.conf.js ├── org.js ├── package.json ├── server.js ├── src ├── actions │ └── README.md ├── components │ ├── Main.js │ └── Main_backup.js ├── config │ ├── README.md │ ├── base.js │ ├── dev.js │ ├── dist.js │ └── test.js ├── data │ └── imageDatas.json ├── favicon.ico ├── images │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ ├── 9.jpg │ └── yeoman.png ├── index.html ├── index.js ├── sources │ └── README.md ├── stores │ └── README.md └── styles │ └── main.scss ├── test ├── actions │ └── .keep ├── components │ └── MainTest.js ├── config │ └── ConfigTest.js ├── helpers │ └── shallowRenderHelper.js ├── loadtests.js ├── sources │ └── .keep └── stores │ └── .keep ├── test_dirname.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "stage-0", 5 | "react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "plugins": [ 4 | "react" 5 | ], 6 | "parserOptions": { 7 | "ecmaVersion": 6, 8 | "sourceType": "module", 9 | "ecmaFeatures": { 10 | "jsx": true 11 | } 12 | }, 13 | "env": { 14 | "browser": true, 15 | "amd": true, 16 | "es6": true, 17 | "node": true, 18 | "mocha": true 19 | }, 20 | "rules": { 21 | "comma-dangle": 1, 22 | "quotes": [ 1, "single" ], 23 | "no-undef": 1, 24 | "global-strict": 0, 25 | "no-extra-semi": 1, 26 | "no-underscore-dangle": 0, 27 | "no-console": 1, 28 | "no-unused-vars": 1, 29 | "no-trailing-spaces": [1, { "skipBlankLines": true }], 30 | "no-unreachable": 1, 31 | "no-alert": 0, 32 | "react/jsx-uses-react": 1, 33 | "react/jsx-uses-vars": 1 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | # Bower 30 | bower_components/ 31 | -------------------------------------------------------------------------------- /.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "generator-react-webpack": { 3 | "appName": "galleryReact", 4 | "style": "sass", 5 | "postcss": false, 6 | "generatedWithVersion": 3 7 | } 8 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Hawen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Gallery By React 2 | 3 | Build Status Dependency Status 4 | 5 | 使用ReactJS构架的图片画廊应用-为慕课网《React实战》课程对应的实战项目 6 | 目前还正在进阶中 7 | 8 | 9 | #To build the examples locally, run: 10 | 11 | `npm start` 12 | Or `node server.js` 13 | It will aotumatically open your brower and redirect http://localhost:8000/webpack-dev-server/. 14 | 15 | #版本： 16 | webpack： 1.13.1 17 | "react": "^15.0.0" 18 | node:4.4.5 19 | npm :3.5.3 20 | 21 | #求赞 22 | 23 | 来吧，小伙伴们，不要吝啬你们的**赞**了。 -------------------------------------------------------------------------------- /cfg/base.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | let path = require('path'); 3 | let defaultSettings = require('./defaults'); 4 | 5 | // Additional npm or bower modules to include in builds 6 | // Add all foreign plugins you may need into this array 7 | // @example: 8 | // let npmBase = path.join(__dirname, '../node_modules'); 9 | // let additionalPaths = [ path.join(npmBase, 'react-bootstrap') ]; 10 | let additionalPaths = []; 11 | 12 | module.exports = { 13 | additionalPaths: additionalPaths, 14 | port: defaultSettings.port, 15 | debug: true, 16 | devtool: 'eval', 17 | output: { 18 | path: path.join(__dirname, '/../dist/assets'), 19 | filename: 'app.js', 20 | publicPath: defaultSettings.publicPath 21 | }, 22 | devServer: { 23 | contentBase: './src/', 24 | historyApiFallback: true, 25 | hot: true, 26 | port: defaultSettings.port, 27 | publicPath: defaultSettings.publicPath, 28 | noInfo: false 29 | }, 30 | resolve: { 31 | extensions: ['', '.js', '.jsx'], 32 | alias: { 33 | actions: `${defaultSettings.srcPath}/actions/`, 34 | components: `${defaultSettings.srcPath}/components/`, 35 | sources: `${defaultSettings.srcPath}/sources/`, 36 | stores: `${defaultSettings.srcPath}/stores/`, 37 | styles: `${defaultSettings.srcPath}/styles/`, 38 | config: `${defaultSettings.srcPath}/config/` + process.env.REACT_WEBPACK_ENV 39 | } 40 | }, 41 | module: {} 42 | }; 43 | -------------------------------------------------------------------------------- /cfg/defaults.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Function that returns default values. 3 | * Used because Object.assign does a shallow instead of a deep copy. 4 | * Using [].push will add to the base array, so a require will alter 5 | * the base array output. 6 | */ 7 | 'use strict'; 8 | 9 | const path = require('path'); 10 | const srcPath = path.join(__dirname, '/../src'); 11 | const dfltPort = 8000; 12 | 13 | /** 14 | * Get the default modules object for webpack 15 | * @return {Object} 16 | */ 17 | function getDefaultModules() { 18 | return { 19 | preLoaders: [{ 20 | test: /\.(js|jsx)$/, 21 | include: srcPath, 22 | loader: 'eslint-loader' 23 | }], 24 | loaders: [{ 25 | test: /\.css$/, 26 | loader: 'style-loader!css-loader!autoprefixer-loader?browsers=last 2 version' 27 | }, 28 | // { 29 | // test: /\.css$/, 30 | // loader: 'style-loader!css-loader!autoprefixer-loader?browsers=last 2 versions' 31 | // }, 32 | { 33 | test: /\.sass/, 34 | loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax' 35 | }, { 36 | test: /\.scss/, 37 | loader: 'style-loader!css-loader!autoprefixer-loader?browsers=last 2 versions!sass-loader?outputStyle=expanded' 38 | }, { 39 | test: /\.less/, 40 | loader: 'style-loader!css-loader!less-loader' 41 | }, { 42 | test: /\.styl/, 43 | loader: 'style-loader!css-loader!stylus-loader' 44 | }, 45 | // { 46 | // test: /\.json$/, 47 | // loader: 'json-loader' 48 | // }, 49 | { 50 | test: /\.(png|jpg|gif|woff|woff2)$/, 51 | loader: 'url-loader?limit=8192' 52 | }, { 53 | test: /\.(mp4|ogg|svg)$/, 54 | loader: 'file-loader' 55 | } 56 | ] 57 | }; 58 | } 59 | 60 | module.exports = { 61 | srcPath: srcPath, 62 | publicPath: '/assets/', 63 | port: dfltPort, 64 | getDefaultModules: getDefaultModules 65 | }; -------------------------------------------------------------------------------- /cfg/dev.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let path = require('path'); 4 | let webpack = require('webpack'); 5 | let baseConfig = require('./base'); 6 | let defaultSettings = require('./defaults'); 7 | 8 | // Add needed plugins here 9 | let BowerWebpackPlugin = require('bower-webpack-plugin'); 10 | 11 | let config = Object.assign({}, baseConfig, { 12 | entry: [ 13 | 'webpack-dev-server/client?http://127.0.0.1:' + defaultSettings.port, 14 | 'webpack/hot/only-dev-server', 15 | './src/index' 16 | ], 17 | cache: true, 18 | devtool: 'eval-source-map', 19 | plugins: [ 20 | new webpack.HotModuleReplacementPlugin(), 21 | new webpack.NoErrorsPlugin(), 22 | new BowerWebpackPlugin({ 23 | searchResolveModulesDirectories: false 24 | }) 25 | ], 26 | module: defaultSettings.getDefaultModules() 27 | }); 28 | 29 | // Add needed loaders to the defaults here 30 | config.module.loaders.push({ 31 | test: /\.(js|jsx)$/, 32 | loader: 'react-hot!babel-loader', 33 | include: [].concat( 34 | config.additionalPaths, [path.join(__dirname, '/../src')] 35 | ) 36 | }); 37 | 38 | module.exports = config; -------------------------------------------------------------------------------- /cfg/dist.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let path = require('path'); 4 | let webpack = require('webpack'); 5 | 6 | let baseConfig = require('./base'); 7 | let defaultSettings = require('./defaults'); 8 | 9 | // Add needed plugins here 10 | let BowerWebpackPlugin = require('bower-webpack-plugin'); 11 | 12 | let config = Object.assign({}, baseConfig, { 13 | entry: path.join(__dirname, '../src/index'), 14 | cache: false, 15 | devtool: 'sourcemap', 16 | plugins: [ 17 | new webpack.optimize.DedupePlugin(), 18 | new webpack.DefinePlugin({ 19 | 'process.env.NODE_ENV': '"production"' 20 | }), 21 | new BowerWebpackPlugin({ 22 | searchResolveModulesDirectories: false 23 | }), 24 | new webpack.optimize.UglifyJsPlugin(), 25 | new webpack.optimize.OccurenceOrderPlugin(), 26 | new webpack.optimize.AggressiveMergingPlugin(), 27 | new webpack.NoErrorsPlugin() 28 | ], 29 | module: defaultSettings.getDefaultModules() 30 | }); 31 | 32 | // Add needed loaders to the defaults here 33 | config.module.loaders.push({ 34 | test: /\.(js|jsx)$/, 35 | loader: 'babel', 36 | include: [].concat( 37 | config.additionalPaths, 38 | [ path.join(__dirname, '/../src') ] 39 | ) 40 | }); 41 | 42 | module.exports = config; 43 | -------------------------------------------------------------------------------- /cfg/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | let path = require('path'); 4 | let srcPath = path.join(__dirname, '/../src/'); 5 | 6 | let baseConfig = require('./base'); 7 | 8 | // Add needed plugins here 9 | let BowerWebpackPlugin = require('bower-webpack-plugin'); 10 | 11 | module.exports = { 12 | devtool: 'eval', 13 | module: { 14 | preLoaders: [ 15 | { 16 | test: /\.(js|jsx)$/, 17 | loader: 'isparta-instrumenter-loader', 18 | include: [ 19 | path.join(__dirname, '/../src') 20 | ] 21 | } 22 | ], 23 | loaders: [ 24 | { 25 | test: /\.(png|jpg|gif|woff|woff2|css|sass|scss|less|styl)$/, 26 | loader: 'null-loader' 27 | }, 28 | { 29 | test: /\.(js|jsx)$/, 30 | loader: 'babel-loader', 31 | include: [].concat( 32 | baseConfig.additionalPaths, 33 | [ 34 | path.join(__dirname, '/../src'), 35 | path.join(__dirname, '/../test') 36 | ] 37 | ) 38 | } 39 | ] 40 | }, 41 | resolve: { 42 | extensions: [ '', '.js', '.jsx' ], 43 | alias: { 44 | actions: srcPath + 'actions/', 45 | helpers: path.join(__dirname, '/../test/helpers'), 46 | components: srcPath + 'components/', 47 | sources: srcPath + 'sources/', 48 | stores: srcPath + 'stores/', 49 | styles: srcPath + 'styles/', 50 | config: srcPath + 'config/' + process.env.REACT_WEBPACK_ENV 51 | } 52 | }, 53 | plugins: [ 54 | new BowerWebpackPlugin({ 55 | searchResolveModulesDirectories: false 56 | }) 57 | ] 58 | }; 59 | -------------------------------------------------------------------------------- /dist/README.md: -------------------------------------------------------------------------------- 1 | # About the dist folder 2 | After building the dist version of your project, the generated files are stored in this folder. You should keep it under version control. 3 | -------------------------------------------------------------------------------- /dist/assets/42092f929161dae9c08a21bfb46ece4d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/dist/assets/42092f929161dae9c08a21bfb46ece4d.png -------------------------------------------------------------------------------- /dist/assets/app.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="/assets/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}n(100);var o=n(97),i=r(o),a=n(141),u=r(a),s=n(99),l=r(s);u["default"].render(i["default"].createElement(l["default"],null),document.getElementById("app"))},function(e,t,n){"use strict";function r(e,t,n,r,o,i,a,u){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,r,o,i,a,u],c=0;s=new Error(t.replace(/%s/g,function(){return l[c++]})),s.name="Invariant Violation"}throw s.framesToPop=1,s}}e.exports=r},function(e,t,n){"use strict";var r=n(7),o=r;e.exports=o},function(e,t){"use strict";function n(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function r(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;var r=Object.getOwnPropertyNames(t).map(function(e){return t[e]});if("0123456789"!==r.join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(i){return!1}}var o=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;e.exports=r()?Object.assign:function(e,t){for(var r,a,u=n(e),s=1;s1){for(var f=Array(d),h=0;h1){for(var m=Array(v),g=0;g-1?void 0:a(!1),!l.plugins[n]){t.extractEvents?void 0:a(!1),l.plugins[n]=t;var r=t.eventTypes;for(var i in r)o(r[i],t,i)?void 0:a(!1)}}}function o(e,t,n){l.eventNameDispatchConfigs.hasOwnProperty(n)?a(!1):void 0,l.eventNameDispatchConfigs[n]=e;var r=e.phasedRegistrationNames;if(r){for(var o in r)if(r.hasOwnProperty(o)){var u=r[o];i(u,t,n)}return!0}return!!e.registrationName&&(i(e.registrationName,t,n),!0)}function i(e,t,n){l.registrationNameModules[e]?a(!1):void 0,l.registrationNameModules[e]=t,l.registrationNameDependencies[e]=t.eventTypes[n].dependencies}var a=n(1),u=null,s={},l={plugins:[],eventNameDispatchConfigs:{},registrationNameModules:{},registrationNameDependencies:{},possibleRegistrationNames:null,injectEventPluginOrder:function(e){u?a(!1):void 0,u=Array.prototype.slice.call(e),r()},injectEventPluginsByName:function(e){var t=!1;for(var n in e)if(e.hasOwnProperty(n)){var o=e[n];s.hasOwnProperty(n)&&s[n]===o||(s[n]?a(!1):void 0,s[n]=o,t=!0)}t&&r()},getPluginModuleForEvent:function(e){var t=e.dispatchConfig;if(t.registrationName)return l.registrationNameModules[t.registrationName]||null;for(var n in t.phasedRegistrationNames)if(t.phasedRegistrationNames.hasOwnProperty(n)){var r=l.registrationNameModules[t.phasedRegistrationNames[n]];if(r)return r}return null},_resetEventPlugins:function(){u=null;for(var e in s)s.hasOwnProperty(e)&&delete s[e];l.plugins.length=0;var t=l.eventNameDispatchConfigs;for(var n in t)t.hasOwnProperty(n)&&delete t[n];var r=l.registrationNameModules;for(var o in r)r.hasOwnProperty(o)&&delete r[o]}};e.exports=l},function(e,t,n){"use strict";function r(e){return Object.prototype.hasOwnProperty.call(e,m)||(e[m]=h++,d[e[m]]={}),d[e[m]]}var o,i=n(3),a=n(10),u=n(25),s=n(174),l=n(89),c=n(202),p=n(50),d={},f=!1,h=0,v={topAbort:"abort",topAnimationEnd:c("animationend")||"animationend",topAnimationIteration:c("animationiteration")||"animationiteration",topAnimationStart:c("animationstart")||"animationstart",topBlur:"blur",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topChange:"change",topClick:"click",topCompositionEnd:"compositionend",topCompositionStart:"compositionstart",topCompositionUpdate:"compositionupdate",topContextMenu:"contextmenu",topCopy:"copy",topCut:"cut",topDoubleClick:"dblclick",topDrag:"drag",topDragEnd:"dragend",topDragEnter:"dragenter",topDragExit:"dragexit",topDragLeave:"dragleave",topDragOver:"dragover",topDragStart:"dragstart",topDrop:"drop",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topFocus:"focus",topInput:"input",topKeyDown:"keydown",topKeyPress:"keypress",topKeyUp:"keyup",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topMouseDown:"mousedown",topMouseMove:"mousemove",topMouseOut:"mouseout",topMouseOver:"mouseover",topMouseUp:"mouseup",topPaste:"paste",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topScroll:"scroll",topSeeked:"seeked",topSeeking:"seeking",topSelectionChange:"selectionchange",topStalled:"stalled",topSuspend:"suspend",topTextInput:"textInput",topTimeUpdate:"timeupdate",topTouchCancel:"touchcancel",topTouchEnd:"touchend",topTouchMove:"touchmove",topTouchStart:"touchstart",topTransitionEnd:c("transitionend")||"transitionend",topVolumeChange:"volumechange",topWaiting:"waiting",topWheel:"wheel"},m="_reactListenersID"+String(Math.random()).slice(2),g=i({},s,{ReactEventListener:null,injection:{injectReactEventListener:function(e){e.setHandleTopLevel(g.handleTopLevel),g.ReactEventListener=e}},setEnabled:function(e){g.ReactEventListener&&g.ReactEventListener.setEnabled(e)},isEnabled:function(){return!(!g.ReactEventListener||!g.ReactEventListener.isEnabled())},listenTo:function(e,t){for(var n=t,o=r(n),i=u.registrationNameDependencies[e],s=a.topLevelTypes,l=0;l":">","<":"<",'"':""","'":"'"},i=/[&><"']/g;e.exports=r},function(e,t){var n=e.exports={version:"2.4.0"};"number"==typeof __e&&(__e=n)},function(e,t,n){e.exports=!n(34)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t){e.exports=function(e){try{return!!e()}catch(t){return!0}}},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t,n){"use strict";function r(e,t){return Array.isArray(t)&&(t=t[1]),t?t.nextSibling:e.firstChild}function o(e,t,n){c.insertTreeBefore(e,t,n)}function i(e,t,n){Array.isArray(t)?u(e,t[0],t[1],n):m(e,t,n)}function a(e,t){if(Array.isArray(t)){var n=t[1];t=t[0],s(e,t,n),e.removeChild(n)}e.removeChild(t)}function u(e,t,n,r){for(var o=t;;){var i=o.nextSibling;if(m(e,o,r),o===n)break;o=i}}function s(e,t,n){for(;;){var r=t.nextSibling;if(r===n)break;e.removeChild(r)}}function l(e,t,n){var r=e.parentNode,o=e.nextSibling;o===t?n&&m(r,document.createTextNode(n),o):n?(v(o,n),s(r,o,t)):s(r,e,t)}var c=n(16),p=n(146),d=n(82),f=(n(4),n(6),n(45)),h=n(51),v=n(96),m=f(function(e,t,n){e.insertBefore(t,n)}),g=p.dangerouslyReplaceNodeWithMarkup,y={dangerouslyReplaceNodeWithMarkup:g,replaceDelimitedText:l,processUpdates:function(e,t){for(var n=0;n=32||13===t?t:0}e.exports=n},function(e,t){"use strict";function n(e){var t=this,n=t.nativeEvent;if(n.getModifierState)return n.getModifierState(e);var r=o[e];return!!r&&!!n[r]}function r(e){return n}var o={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};e.exports=r},function(e,t){"use strict";function n(e){var t=e.target||e.srcElement||window;return t.correspondingUseElement&&(t=t.correspondingUseElement),3===t.nodeType?t.parentNode:t}e.exports=n},function(e,t){"use strict";function n(e){var t=e&&(r&&e[r]||e[o]);if("function"==typeof t)return t}var r="function"==typeof Symbol&&Symbol.iterator,o="@@iterator";e.exports=n},function(e,t,n){"use strict";/** 3 | * Checks if an event is supported in the current execution environment. 4 | * 5 | * NOTE: This will not work correctly for non-generic events such as `change`, 6 | * `reset`, `load`, `error`, and `select`. 7 | * 8 | * Borrows from Modernizr. 9 | * 10 | * @param {string} eventNameSuffix Event name, e.g. "click". 11 | * @param {?boolean} capture Check if the capture phase is supported. 12 | * @return {boolean} True if the event is supported. 13 | * @internal 14 | * @license Modernizr 3.0.0pre (Custom Build) | MIT 15 | */ 16 | function r(e,t){if(!i.canUseDOM||t&&!("addEventListener"in document))return!1;var n="on"+e,r=n in document;if(!r){var a=document.createElement("div");a.setAttribute(n,"return;"),r="function"==typeof a[n]}return!r&&o&&"wheel"===e&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}var o,i=n(5);i.canUseDOM&&(o=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0),e.exports=r},function(e,t,n){"use strict";var r=n(5),o=/^[ \r\n\t\f]/,i=/<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/,a=n(45),u=a(function(e,t){e.innerHTML=t});if(r.canUseDOM){var s=document.createElement("div");s.innerHTML=" ",""===s.innerHTML&&(u=function(e,t){if(e.parentNode&&e.parentNode.replaceChild(e,e),o.test(t)||"<"===t[0]&&i.test(t)){e.innerHTML=String.fromCharCode(65279)+t;var n=e.firstChild;1===n.data.length?e.removeChild(n):n.deleteData(0,1)}else e.innerHTML=t}),s=null}e.exports=u},function(e,t){"use strict";function n(e,t){var n=null===e||e===!1,r=null===t||t===!1;if(n||r)return n===r;var o=typeof e,i=typeof t;return"string"===o||"number"===o?"string"===i||"number"===i:"object"===i&&e.type===t.type&&e.key===t.key}e.exports=n},function(e,t,n){"use strict";function r(e,t){return e&&"object"==typeof e&&null!=e.key?l.escape(e.key):t.toString(36)}function o(e,t,n,i){var d=typeof e;if("undefined"!==d&&"boolean"!==d||(e=null),null===e||"string"===d||"number"===d||a.isValidElement(e))return n(i,e,""===t?c+r(e,0):t),1;var f,h,v=0,m=""===t?c:t+p;if(Array.isArray(e))for(var g=0;g0?r:n)(e)}},function(e,t,n){var r=n(58),o=n(55);e.exports=function(e){return r(o(e))}},function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++n+r).toString(36))}},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t":a.innerHTML="<"+e+">",u[e]=!a.firstChild),u[e]?d[e]:null}var o=n(5),i=n(1),a=o.canUseDOM?document.createElement("div"):null,u={},s=[1,'"],l=[1,"","
"],c=[3,"","
"],p=[1,'',""],d={"*":[1,"?
","
"],area:[1,"",""],col:[2,"","
"],legend:[1,"
","
"],param:[1,"",""],tr:[2,"","
"],optgroup:s,option:s,caption:l,colgroup:l,tbody:l,tfoot:l,thead:l,td:c,th:c},f=["circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","text","tspan"];f.forEach(function(e){d[e]=p,u[e]=!0}),e.exports=r},function(e,t){"use strict";function n(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function r(e,t){if(n(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var r=Object.keys(e),i=Object.keys(t);if(r.length!==i.length)return!1;for(var a=0;a.")}var a=h[e]||(h[e]={});if(a[o])return null;a[o]=!0;var u={parentOrOwner:o,url:" See https://fb.me/react-warning-keys for more information.",childOwner:null};return t&&t._owner&&t._owner!==p.current&&(u.childOwner=" It was passed a child from "+t._owner.getName()+"."),u}function a(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n>",w={array:i("array"),bool:i("boolean"),func:i("function"),number:i("number"),object:i("object"),string:i("string"),any:a(),arrayOf:u,element:s(),instanceOf:l,node:f(),objectOf:p,oneOf:c,oneOfType:d,shape:h};e.exports=w},function(e,t,n){"use strict";function r(e){a.enqueueUpdate(e)}function o(e,t){var n=i.get(e);return n?n:null}var i=(n(14),n(43)),a=n(9),u=n(1),s=(n(2),{isMounted:function(e){var t=i.get(e);return!!t&&!!t._renderedComponent},enqueueCallback:function(e,t,n){s.validateCallback(t,n);var i=o(e);return i?(i._pendingCallbacks?i._pendingCallbacks.push(t):i._pendingCallbacks=[t],void r(i)):null},enqueueCallbackInternal:function(e,t){e._pendingCallbacks?e._pendingCallbacks.push(t):e._pendingCallbacks=[t],r(e)},enqueueForceUpdate:function(e){var t=o(e,"forceUpdate");t&&(t._pendingForceUpdate=!0,r(t))},enqueueReplaceState:function(e,t){var n=o(e,"replaceState");n&&(n._pendingStateQueue=[t],n._pendingReplaceState=!0,r(n))},enqueueSetState:function(e,t){var n=o(e,"setState");if(n){var i=n._pendingStateQueue||(n._pendingStateQueue=[]);i.push(t),r(n)}},enqueueElementInternal:function(e,t){e._pendingElement=t,r(e)},validateCallback:function(e,t){e&&"function"!=typeof e?u(!1):void 0}});e.exports=s},function(e,t){"use strict";e.exports="15.1.0"},function(e,t){"use strict";var n={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){n.currentScrollLeft=e.x,n.currentScrollTop=e.y}};e.exports=n},function(e,t,n){"use strict";function r(e,t){if(null==t?o(!1):void 0,null==e)return t;var n=Array.isArray(e),r=Array.isArray(t);return n&&r?(e.push.apply(e,t),e):n?(e.push(t),e):r?[e].concat(t):[e,t]}var o=n(1);e.exports=r},function(e,t){"use strict";var n=function(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)};e.exports=n},function(e,t,n){"use strict";function r(e){for(var t;(t=e._renderedNodeType)===o.COMPOSITE;)e=e._renderedComponent;return t===o.NATIVE?e._renderedComponent:t===o.EMPTY?null:void 0}var o=n(84);e.exports=r},function(e,t,n){"use strict";function r(){return!i&&o.canUseDOM&&(i="textContent"in document.documentElement?"textContent":"innerText"),i}var o=n(5),i=null;e.exports=r},function(e,t,n){"use strict";function r(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function o(e){var t,n=null===e||e===!1;if(n)t=u.create(o);else if("object"==typeof e){var i=e;!i||"function"!=typeof i.type&&"string"!=typeof i.type?l(!1):void 0,t="string"==typeof i.type?s.createInternalComponent(i):r(i.type)?new i.type(i):new c(i)}else"string"==typeof e||"number"==typeof e?t=s.createInstanceForText(e):l(!1);t._mountIndex=0,t._mountImage=null;return t}var i=n(3),a=n(153),u=n(78),s=n(83),l=(n(6),n(1)),c=(n(2),function(e){this.construct(e)});i(c.prototype,a.Mixin,{_instantiateReactComponent:o});e.exports=o},function(e,t){"use strict";function n(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&r[e.type]||"textarea"===t)}var r={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};e.exports=n},function(e,t,n){"use strict";var r=n(5),o=n(31),i=n(51),a=function(e,t){e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(a=function(e,t){i(e,o(t))})),e.exports=a},function(e,t,n){"use strict";e.exports=n(151)},function(e,t,n){function r(e,t){for(var n=0;n=0&&b.splice(t,1)}function u(e){var t=document.createElement("style");return t.type="text/css",i(e,t),t}function s(e){var t=document.createElement("link");return t.rel="stylesheet",i(e,t),t}function l(e,t){var n,r,o;if(t.singleton){var i=y++;n=g||(g=u(t)),r=c.bind(null,n,i,!1),o=c.bind(null,n,i,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=s(t),r=d.bind(null,n),o=function(){a(n),n.href&&URL.revokeObjectURL(n.href)}):(n=u(t),r=p.bind(null,n),o=function(){a(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}function c(e,t,n,r){var o=n?"":r.css; 17 | if(e.styleSheet)e.styleSheet.cssText=C(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function p(e,t){var n=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function d(e,t){var n=t.css,r=t.sourceMap;r&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var o=new Blob([n],{type:"text/css"}),i=e.href;e.href=URL.createObjectURL(o),i&&URL.revokeObjectURL(i)}var f={},h=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},v=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),m=h(function(){return document.head||document.getElementsByTagName("head")[0]}),g=null,y=0,b=[];e.exports=function(e,t){if("object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");t=t||{},"undefined"==typeof t.singleton&&(t.singleton=v()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var n=o(e);return r(n,t),function(e){for(var i=[],a=0;ac;)if(u=s[c++],u!=u)return!0}else for(;l>c;c++)if((e||c in s)&&s[c]===n)return e||c||0;return!e&&-1}}},function(e,t){var n={}.toString;e.exports=function(e){return n.call(e).slice(8,-1)}},function(e,t,n){var r=n(101);e.exports=function(e,t,n){if(r(e),void 0===t)return e;switch(n){case 1:return function(n){return e.call(t,n)};case 2:return function(n,r){return e.call(t,n,r)};case 3:return function(n,r,o){return e.call(t,n,r,o)}}return function(){return e.apply(t,arguments)}}},function(e,t,n){var r=n(35),o=n(21).document,i=r(o)&&r(o.createElement);e.exports=function(e){return i?o.createElement(e):{}}},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t,n){var r=n(21),o=n(32),i=n(57),a=n(117),u=n(105),s="prototype",l=function(e,t,n){var c,p,d,f,h=e&l.F,v=e&l.G,m=e&l.S,g=e&l.P,y=e&l.B,b=v?r:m?r[t]||(r[t]={}):(r[t]||{})[s],C=v?o:o[t]||(o[t]={}),_=C[s]||(C[s]={});v&&(n=t);for(c in n)p=!h&&b&&void 0!==b[c],d=(p?b:n)[c],f=y&&p?u(d,r):g&&"function"==typeof d?u(Function.call,d):d,b&&a(b,c,d,e&l.U),C[c]!=d&&i(C,c,f),g&&_[c]!=d&&(_[c]=d)};r.core=o,l.F=1,l.G=2,l.S=4,l.P=8,l.B=16,l.W=32,l.U=64,l.R=128,e.exports=l},function(e,t,n){e.exports=!n(33)&&!n(34)(function(){return 7!=Object.defineProperty(n(106)("div"),"a",{get:function(){return 7}}).a})},function(e,t,n){"use strict";var r=n(114),o=n(112),i=n(115),a=n(122),u=n(58),s=Object.assign;e.exports=!s||n(34)(function(){var e={},t={},n=Symbol(),r="abcdefghijklmnopqrst";return e[n]=7,r.split("").forEach(function(e){t[e]=e}),7!=s({},e)[n]||Object.keys(s({},t)).join("")!=r})?function(e,t){for(var n=a(e),s=arguments.length,l=1,c=o.f,p=i.f;s>l;)for(var d,f=u(arguments[l++]),h=c?r(f).concat(c(f)):r(f),v=h.length,m=0;v>m;)p.call(f,d=h[m++])&&(n[d]=f[d]);return n}:s},function(e,t,n){var r=n(102),o=n(109),i=n(123),a=Object.defineProperty;t.f=n(33)?Object.defineProperty:function(e,t,n){if(r(e),t=i(t,!0),r(n),o)try{return a(e,t,n)}catch(u){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(e[t]=n.value),e}},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t,n){var r=n(56),o=n(60),i=n(103)(!1),a=n(118)("IE_PROTO");e.exports=function(e,t){var n,u=o(e),s=0,l=[];for(n in u)n!=a&&r(u,n)&&l.push(n);for(;t.length>s;)r(u,n=t[s++])&&(~i(l,n)||l.push(n));return l}},function(e,t,n){var r=n(113),o=n(107);e.exports=Object.keys||function(e){return r(e,o)}},function(e,t){t.f={}.propertyIsEnumerable},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,n){var r=n(21),o=n(57),i=n(56),a=n(61)("src"),u="toString",s=Function[u],l=(""+s).split(u);n(32).inspectSource=function(e){return s.call(e)},(e.exports=function(e,t,n,u){var s="function"==typeof n;s&&(i(n,"name")||o(n,"name",t)),e[t]!==n&&(s&&(i(n,a)||o(n,a,e[t]?""+e[t]:l.join(String(t)))),e===r?e[t]=n:u?e[t]?e[t]=n:o(e,t,n):(delete e[t],o(e,t,n)))})(Function.prototype,u,function(){return"function"==typeof this&&this[a]||s.call(this)})},function(e,t,n){var r=n(119)("keys"),o=n(61);e.exports=function(e){return r[e]||(r[e]=o(e))}},function(e,t,n){var r=n(21),o="__core-js_shared__",i=r[o]||(r[o]={});e.exports=function(e){return i[e]||(i[e]={})}},function(e,t,n){var r=n(59),o=Math.max,i=Math.min;e.exports=function(e,t){return e=r(e),e<0?o(e+t,0):i(e,t)}},function(e,t,n){var r=n(59),o=Math.min;e.exports=function(e){return e>0?o(r(e),9007199254740991):0}},function(e,t,n){var r=n(55);e.exports=function(e){return Object(r(e))}},function(e,t,n){var r=n(35);e.exports=function(e,t){if(!r(e))return e;var n,o;if(t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;if("function"==typeof(n=e.valueOf)&&!r(o=n.call(e)))return o;if(!t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},function(e,t,n){var r=n(108);r(r.S+r.F,"Object",{assign:n(110)})},function(e,t,n){t=e.exports=n(62)(),t.push([e.id,"/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}",""])},function(e,t,n){t=e.exports=n(62)(),t.push([e.id,"body{color:#fff;background:#222}.index img{margin:40px auto;border-radius:4px;background:#fff;display:block}.index .notice{margin:20px auto;padding:15px 0;text-align:center;border:1px solid #000;border-width:1px 0;background:#666}",""])},function(e,t){"use strict";function n(e){return e.replace(r,function(e,t){return t.toUpperCase()})}var r=/-(.)/g;e.exports=n},function(e,t,n){"use strict";function r(e){return o(e.replace(i,"ms-"))}var o=n(127),i=/^-ms-/;e.exports=r},function(e,t,n){"use strict";function r(e,t){return!(!e||!t)&&(e===t||!o(e)&&(o(t)?r(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}var o=n(136);e.exports=r},function(e,t,n){"use strict";function r(e){var t=e.length;if(Array.isArray(e)||"object"!=typeof e&&"function"!=typeof e?a(!1):void 0,"number"!=typeof t?a(!1):void 0,0===t||t-1 in e?void 0:a(!1),"function"==typeof e.callee?a(!1):void 0,e.hasOwnProperty)try{return Array.prototype.slice.call(e)}catch(n){}for(var r=Array(t),o=0;o8&&x<=11),P=32,T=String.fromCharCode(P),k=f.topLevelTypes,S={beforeInput:{phasedRegistrationNames:{bubbled:b({onBeforeInput:null}),captured:b({onBeforeInputCapture:null})},dependencies:[k.topCompositionEnd,k.topKeyPress,k.topTextInput,k.topPaste]},compositionEnd:{phasedRegistrationNames:{bubbled:b({onCompositionEnd:null}),captured:b({onCompositionEndCapture:null})},dependencies:[k.topBlur,k.topCompositionEnd,k.topKeyDown,k.topKeyPress,k.topKeyUp,k.topMouseDown]},compositionStart:{phasedRegistrationNames:{bubbled:b({onCompositionStart:null}),captured:b({onCompositionStartCapture:null})},dependencies:[k.topBlur,k.topCompositionStart,k.topKeyDown,k.topKeyPress,k.topKeyUp,k.topMouseDown]},compositionUpdate:{phasedRegistrationNames:{bubbled:b({onCompositionUpdate:null}),captured:b({onCompositionUpdateCapture:null})},dependencies:[k.topBlur,k.topCompositionUpdate,k.topKeyDown,k.topKeyPress,k.topKeyUp,k.topMouseDown]}},M=!1,R=null,O={eventTypes:S,extractEvents:function(e,t,n,r){return[l(e,t,n,r),d(e,t,n,r)]}};e.exports=O},function(e,t,n){"use strict";var r=n(68),o=n(5),i=(n(6),n(128),n(197)),a=n(134),u=n(138),s=(n(2),u(function(e){return a(e)})),l=!1,c="cssFloat";if(o.canUseDOM){var p=document.createElement("div").style;try{p.font=""}catch(d){l=!0}void 0===document.documentElement.style.cssFloat&&(c="styleFloat")}var f={createMarkupForStyles:function(e,t){var n="";for(var r in e)if(e.hasOwnProperty(r)){var o=e[r];null!=o&&(n+=s(r)+":",n+=i(r,o,t)+";")}return n||null},setValueForStyles:function(e,t,n){var o=e.style;for(var a in t)if(t.hasOwnProperty(a)){var u=i(a,t[a],n);if("float"!==a&&"cssFloat"!==a||(a=c),u)o[a]=u;else{var s=l&&r.shorthandPropertyExpansions[a];if(s)for(var p in s)o[p]="";else o[a]=""}}}};e.exports=f},function(e,t,n){"use strict";function r(e){var t=e.nodeName&&e.nodeName.toLowerCase();return"select"===t||"input"===t&&"file"===e.type}function o(e){var t=w.getPooled(M.change,O,e,N(e));C.accumulateTwoPhaseDispatches(t),x.batchedUpdates(i,t)}function i(e){b.enqueueEvents(e),b.processEventQueue(!1)}function a(e,t){R=e,O=t,R.attachEvent("onchange",o)}function u(){R&&(R.detachEvent("onchange",o),R=null,O=null)}function s(e,t){if(e===S.topChange)return t}function l(e,t,n){e===S.topFocus?(u(),a(t,n)):e===S.topBlur&&u()}function c(e,t){R=e,O=t,I=e.value,D=Object.getOwnPropertyDescriptor(e.constructor.prototype,"value"),Object.defineProperty(R,"value",U),R.attachEvent?R.attachEvent("onpropertychange",d):R.addEventListener("propertychange",d,!1)}function p(){R&&(delete R.value,R.detachEvent?R.detachEvent("onpropertychange",d):R.removeEventListener("propertychange",d,!1),R=null,O=null,I=null,D=null)}function d(e){if("value"===e.propertyName){var t=e.srcElement.value;t!==I&&(I=t,o(e))}}function f(e,t){if(e===S.topInput)return t}function h(e,t,n){e===S.topFocus?(p(),c(t,n)):e===S.topBlur&&p()}function v(e,t){if((e===S.topSelectionChange||e===S.topKeyUp||e===S.topKeyDown)&&R&&R.value!==I)return I=R.value,O}function m(e){return e.nodeName&&"input"===e.nodeName.toLowerCase()&&("checkbox"===e.type||"radio"===e.type)}function g(e,t){if(e===S.topClick)return t}var y=n(10),b=n(18),C=n(19),_=n(5),E=n(4),x=n(9),w=n(11),N=n(48),P=n(50),T=n(95),k=n(12),S=y.topLevelTypes,M={change:{phasedRegistrationNames:{bubbled:k({onChange:null}),captured:k({onChangeCapture:null})},dependencies:[S.topBlur,S.topChange,S.topClick,S.topFocus,S.topInput,S.topKeyDown,S.topKeyUp,S.topSelectionChange]}},R=null,O=null,I=null,D=null,A=!1;_.canUseDOM&&(A=P("change")&&(!("documentMode"in document)||document.documentMode>8));var L=!1;_.canUseDOM&&(L=P("input")&&(!("documentMode"in document)||document.documentMode>11));var U={get:function(){return D.get.call(this)},set:function(e){I=""+e,D.set.call(this,e)}},F={eventTypes:M,extractEvents:function(e,t,n,o){var i,a,u=t?E.getNodeFromInstance(t):window;if(r(u)?A?i=s:a=l:T(u)?L?i=f:(i=v,a=h):m(u)&&(i=g),i){var c=i(e,t);if(c){var p=w.getPooled(M.change,c,n,o);return p.type="change",C.accumulateTwoPhaseDispatches(p),p}}a&&a(e,u,t)}};e.exports=F},function(e,t,n){"use strict";function r(e){return e.substring(1,e.indexOf(" "))}var o=n(16),i=n(5),a=n(131),u=n(7),s=n(66),l=n(1),c=/^(<[^ \/>]+)/,p="data-danger-index",d={dangerouslyRenderMarkup:function(e){i.canUseDOM?void 0:l(!1);for(var t,n={},o=0;o1?1-t:void 0;return this._fallbackText=o.slice(e,u),this._fallbackText}}),i.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";var r=n(15),o=r.injection.MUST_USE_PROPERTY,i=r.injection.HAS_BOOLEAN_VALUE,a=r.injection.HAS_SIDE_EFFECTS,u=r.injection.HAS_NUMERIC_VALUE,s=r.injection.HAS_POSITIVE_NUMERIC_VALUE,l=r.injection.HAS_OVERLOADED_BOOLEAN_VALUE,c={isCustomAttribute:RegExp.prototype.test.bind(new RegExp("^(data|aria)-["+r.ATTRIBUTE_NAME_CHAR+"]*$")),Properties:{accept:0,acceptCharset:0,accessKey:0,action:0,allowFullScreen:i,allowTransparency:0,alt:0,async:i,autoComplete:0,autoPlay:i,capture:i,cellPadding:0,cellSpacing:0,charSet:0,challenge:0,checked:o|i,cite:0,classID:0,className:0,cols:s,colSpan:0,content:0,contentEditable:0,contextMenu:0,controls:i,coords:0,crossOrigin:0,data:0,dateTime:0,"default":i,defer:i,dir:0,disabled:i,download:l,draggable:0,encType:0,form:0,formAction:0,formEncType:0,formMethod:0,formNoValidate:i,formTarget:0,frameBorder:0,headers:0,height:0,hidden:i,high:0,href:0,hrefLang:0,htmlFor:0,httpEquiv:0,icon:0,id:0,inputMode:0,integrity:0,is:0,keyParams:0,keyType:0,kind:0,label:0,lang:0,list:0,loop:i,low:0,manifest:0,marginHeight:0,marginWidth:0,max:0,maxLength:0,media:0,mediaGroup:0,method:0,min:0,minLength:0,multiple:o|i,muted:o|i,name:0,nonce:0,noValidate:i,open:i,optimum:0,pattern:0,placeholder:0,poster:0,preload:0,profile:0,radioGroup:0,readOnly:i,rel:0,required:i,reversed:i,role:0,rows:s,rowSpan:u,sandbox:0,scope:0,scoped:i,scrolling:0,seamless:i,selected:o|i,shape:0,size:s,sizes:0,span:s,spellCheck:0,src:0,srcDoc:0,srcLang:0,srcSet:0,start:u,step:0,style:0,summary:0,tabIndex:0,target:0,title:0,type:0,useMap:0,value:o|a,width:0,wmode:0,wrap:0,about:0,datatype:0,inlist:0,prefix:0,property:0,resource:0,"typeof":0,vocab:0,autoCapitalize:0,autoCorrect:0,autoSave:0,color:0,itemProp:0,itemScope:i,itemType:0,itemID:0,itemRef:0,results:0,security:0,unselectable:0},DOMAttributeNames:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},DOMPropertyNames:{}};e.exports=c},function(e,t,n){"use strict";var r=n(3),o=n(71),i=n(73),a=n(72),u=n(160),s=n(8),l=(n(77),n(86)),c=n(88),p=n(203),d=(n(2),s.createElement),f=s.createFactory,h=s.cloneElement,v=r,m={Children:{map:o.map,forEach:o.forEach,count:o.count,toArray:o.toArray,only:p},Component:i,createElement:d,cloneElement:h,isValidElement:s.isValidElement,PropTypes:l,createClass:a.createClass,createFactory:f,createMixin:function(e){return e},DOM:u,version:c,__spread:v};e.exports=m},function(e,t,n){"use strict";function r(e,t,n){var r=void 0===e[n];null!=t&&r&&(e[n]=i(t))}var o=n(17),i=n(94),a=(n(39),n(52)),u=n(53),s=(n(2),{instantiateChildren:function(e,t,n){if(null==e)return null;var o={};return u(e,r,o),o},updateChildren:function(e,t,n,r,u){if(t||e){var s,l;for(s in t)if(t.hasOwnProperty(s)){l=e&&e[s];var c=l&&l._currentElement,p=t[s];if(null!=l&&a(c,p))o.receiveComponent(l,p,r,u),t[s]=l;else{l&&(n[s]=o.getNativeNode(l),o.unmountComponent(l,!1));var d=i(p);t[s]=d}}for(s in e)!e.hasOwnProperty(s)||t&&t.hasOwnProperty(s)||(l=e[s],n[s]=o.getNativeNode(l),o.unmountComponent(l,!1))}},unmountChildren:function(e,t){for(var n in e)if(e.hasOwnProperty(n)){var r=e[n];o.unmountComponent(r,t)}}});e.exports=s},function(e,t,n){"use strict";function r(e){var t=e._currentElement._owner||null;if(t){var n=t.getName();if(n)return" Check the render method of `"+n+"`."}return""}function o(e){}function i(e,t){}function a(e){return e.prototype&&e.prototype.isReactComponent}var u=n(3),s=n(41),l=n(14),c=n(8),p=n(42),d=n(43),f=(n(6),n(84)),h=n(28),v=(n(27),n(17)),m=n(87),g=n(22),y=n(1),b=n(52);n(2);o.prototype.render=function(){var e=d.get(this)._currentElement.type,t=e(this.props,this.context,this.updater);return i(e,t),t};var C=1,_={construct:function(e){this._currentElement=e,this._rootNodeID=null,this._instance=null,this._nativeParent=null,this._nativeContainerInfo=null,this._updateBatchNumber=null,this._pendingElement=null,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1,this._renderedNodeType=null,this._renderedComponent=null,this._context=null,this._mountOrder=0,this._topLevelWrapper=null,this._pendingCallbacks=null,this._calledComponentWillUnmount=!1},mountComponent:function(e,t,n,r){this._context=r,this._mountOrder=C++,this._nativeParent=t,this._nativeContainerInfo=n;var u,s=this._processProps(this._currentElement.props),l=this._processContext(r),p=this._currentElement.type,f=this._constructComponent(s,l);a(p)||null!=f&&null!=f.render||(u=f,i(p,u),null===f||f===!1||c.isValidElement(f)?void 0:y(!1),f=new o(p));f.props=s,f.context=l,f.refs=g,f.updater=m,this._instance=f,d.set(f,this);var h=f.state;void 0===h&&(f.state=h=null),"object"!=typeof h||Array.isArray(h)?y(!1):void 0,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1;var v;return v=f.unstable_handleError?this.performInitialMountWithErrorHandling(u,t,n,e,r):this.performInitialMount(u,t,n,e,r),f.componentDidMount&&e.getReactMountReady().enqueue(f.componentDidMount,f),v},_constructComponent:function(e,t){return this._constructComponentWithoutOwner(e,t)},_constructComponentWithoutOwner:function(e,t){var n,r=this._currentElement.type;return n=a(r)?new r(e,t,m):r(e,t,m)},performInitialMountWithErrorHandling:function(e,t,n,r,o){var i,a=r.checkpoint();try{i=this.performInitialMount(e,t,n,r,o)}catch(u){r.rollback(a),this._instance.unstable_handleError(u),this._pendingStateQueue&&(this._instance.state=this._processPendingState(this._instance.props,this._instance.context)),a=r.checkpoint(),this._renderedComponent.unmountComponent(!0),r.rollback(a),i=this.performInitialMount(e,t,n,r,o)}return i},performInitialMount:function(e,t,n,r,o){var i=this._instance;i.componentWillMount&&(i.componentWillMount(),this._pendingStateQueue&&(i.state=this._processPendingState(i.props,i.context))),void 0===e&&(e=this._renderValidatedComponent()),this._renderedNodeType=f.getType(e),this._renderedComponent=this._instantiateReactComponent(e);var a=v.mountComponent(this._renderedComponent,r,t,n,this._processChildContext(o));return a},getNativeNode:function(){return v.getNativeNode(this._renderedComponent)},unmountComponent:function(e){if(this._renderedComponent){var t=this._instance;if(t.componentWillUnmount&&!t._calledComponentWillUnmount)if(t._calledComponentWillUnmount=!0,e){var n=this.getName()+".componentWillUnmount()";p.invokeGuardedCallback(n,t.componentWillUnmount.bind(t))}else t.componentWillUnmount();this._renderedComponent&&(v.unmountComponent(this._renderedComponent,e),this._renderedNodeType=null,this._renderedComponent=null,this._instance=null),this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1,this._pendingCallbacks=null,this._pendingElement=null,this._context=null,this._rootNodeID=null,this._topLevelWrapper=null,d.remove(t)}},_maskContext:function(e){var t=this._currentElement.type,n=t.contextTypes;if(!n)return g;var r={};for(var o in n)r[o]=e[o];return r},_processContext:function(e){var t=this._maskContext(e);return t},_processChildContext:function(e){var t=this._currentElement.type,n=this._instance,r=n.getChildContext&&n.getChildContext();if(r){"object"!=typeof t.childContextTypes?y(!1):void 0;for(var o in r)o in t.childContextTypes?void 0:y(!1);return u({},e,r)}return e},_processProps:function(e){return e},_checkPropTypes:function(e,t,n){var o=this.getName();for(var i in e)if(e.hasOwnProperty(i)){var a;try{"function"!=typeof e[i]?y(!1):void 0,a=e[i](t,i,o,n)}catch(u){a=u}if(a instanceof Error){r(this);n===h.prop}}},receiveComponent:function(e,t,n){var r=this._currentElement,o=this._context;this._pendingElement=null,this.updateComponent(t,r,e,o,n)},performUpdateIfNecessary:function(e){null!=this._pendingElement?v.receiveComponent(this,this._pendingElement,e,this._context):null!==this._pendingStateQueue||this._pendingForceUpdate?this.updateComponent(e,this._currentElement,this._currentElement,this._context,this._context):this._updateBatchNumber=null},updateComponent:function(e,t,n,r,o){var i,a,u=this._instance,s=!1;this._context===o?i=u.context:(i=this._processContext(o),s=!0),t===n?a=n.props:(a=this._processProps(n.props),s=!0),s&&u.componentWillReceiveProps&&u.componentWillReceiveProps(a,i);var l=this._processPendingState(a,i),c=!0;!this._pendingForceUpdate&&u.shouldComponentUpdate&&(c=u.shouldComponentUpdate(a,l,i)),this._updateBatchNumber=null,c?(this._pendingForceUpdate=!1,this._performComponentUpdate(n,a,l,i,e,o)):(this._currentElement=n,this._context=o,u.props=a,u.state=l,u.context=i)},_processPendingState:function(e,t){var n=this._instance,r=this._pendingStateQueue,o=this._pendingReplaceState;if(this._pendingReplaceState=!1,this._pendingStateQueue=null,!r)return n.state;if(o&&1===r.length)return r[0];for(var i=u({},o?r[0]:n.state),a=o?1:0;a=0||null!=t.is}function p(e){var t=e.type;l(t),this._currentElement=e,this._tag=t.toLowerCase(),this._namespaceURI=null,this._renderedChildren=null,this._previousStyle=null,this._previousStyleCopy=null,this._nativeNode=null,this._nativeParent=null,this._rootNodeID=null,this._domID=null,this._nativeContainerInfo=null,this._wrapperState=null,this._topLevelWrapper=null,this._flags=0}var d=n(3),f=n(142),h=n(144),v=n(16),m=n(70),g=n(15),y=n(37),b=n(10),C=n(18),_=n(25),E=n(26),x=n(74),w=n(155),N=n(75),P=n(4),T=n(163),k=n(165),S=n(76),M=n(168),R=(n(6),n(178)),O=n(182),I=(n(7),n(31)),D=n(1),A=(n(50),n(12)),L=(n(67),n(54),n(2),N),U=C.deleteListener,F=P.getNodeFromInstance,j=E.listenTo,B=_.registrationNameModules,V={string:!0,number:!0},W=A({style:null}),K=A({__html:null}),H={children:null,dangerouslySetInnerHTML:null,suppressContentEditableWarning:null},q=11,z={topAbort:"abort",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topSeeked:"seeked",topSeeking:"seeking",topStalled:"stalled",topSuspend:"suspend",topTimeUpdate:"timeupdate",topVolumeChange:"volumechange",topWaiting:"waiting"},Y={area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0},G={listing:!0,pre:!0,textarea:!0},X=d({menuitem:!0},Y),Q=/^[a-zA-Z][a-zA-Z:_\.\-\d]*$/,$={},Z={}.hasOwnProperty,J=1;p.displayName="ReactDOMComponent",p.Mixin={mountComponent:function(e,t,n,o){this._rootNodeID=J++,this._domID=n._idCounter++,this._nativeParent=t,this._nativeContainerInfo=n;var i=this._currentElement.props;switch(this._tag){case"iframe":case"object":case"img":case"form":case"video":case"audio":this._wrapperState={listeners:null},e.getReactMountReady().enqueue(u,this);break;case"button":i=w.getNativeProps(this,i,t);break;case"input":T.mountWrapper(this,i,t),i=T.getNativeProps(this,i),e.getReactMountReady().enqueue(u,this);break;case"option":k.mountWrapper(this,i,t),i=k.getNativeProps(this,i);break;case"select":S.mountWrapper(this,i,t),i=S.getNativeProps(this,i),e.getReactMountReady().enqueue(u,this);break;case"textarea":M.mountWrapper(this,i,t),i=M.getNativeProps(this,i),e.getReactMountReady().enqueue(u,this)}r(this,i);var s,l;null!=t?(s=t._namespaceURI,l=t._tag):n._tag&&(s=n._namespaceURI,l=n._tag),(null==s||s===m.svg&&"foreignobject"===l)&&(s=m.html),s===m.html&&("svg"===this._tag?s=m.svg:"math"===this._tag&&(s=m.mathml)),this._namespaceURI=s;var c;if(e.useCreateElement){var p,d=n._ownerDocument;if(s===m.html)if("script"===this._tag){var h=d.createElement("div"),g=this._currentElement.type;h.innerHTML="<"+g+">",p=h.removeChild(h.firstChild)}else p=d.createElement(this._currentElement.type,i.is||null);else p=d.createElementNS(s,this._currentElement.type);P.precacheNode(this,p),this._flags|=L.hasCachedChildNodes,this._nativeParent||y.setAttributeForRoot(p),this._updateDOMProperties(null,i,e);var b=v(p);this._createInitialChildren(e,i,o,b),c=b}else{var C=this._createOpenTagMarkupAndPutListeners(e,i),_=this._createContentMarkup(e,i,o);c=!_&&Y[this._tag]?C+"/>":C+">"+_+""}switch(this._tag){case"button":case"input":case"select":case"textarea":i.autoFocus&&e.getReactMountReady().enqueue(f.focusDOMComponent,this);break;case"option":e.getReactMountReady().enqueue(a,this)}return c},_createOpenTagMarkupAndPutListeners:function(e,t){var n="<"+this._currentElement.type;for(var r in t)if(t.hasOwnProperty(r)){var i=t[r];if(null!=i)if(B.hasOwnProperty(r))i&&o(this,r,i,e);else{r===W&&(i&&(i=this._previousStyleCopy=d({},t.style)),i=h.createMarkupForStyles(i,this));var a=null;null!=this._tag&&c(this._tag,t)?H.hasOwnProperty(r)||(a=y.createMarkupForCustomAttribute(r,i)):a=y.createMarkupForProperty(r,i),a&&(n+=" "+a)}}return e.renderToStaticMarkup?n:(this._nativeParent||(n+=" "+y.createMarkupForRoot()),n+=" "+y.createMarkupForID(this._domID))},_createContentMarkup:function(e,t,n){var r="",o=t.dangerouslySetInnerHTML;if(null!=o)null!=o.__html&&(r=o.__html);else{var i=V[typeof t.children]?t.children:null,a=null!=i?null:t.children;if(null!=i)r=I(i);else if(null!=a){var u=this.mountChildren(a,e,n);r=u.join("")}}return G[this._tag]&&"\n"===r.charAt(0)?"\n"+r:r},_createInitialChildren:function(e,t,n,r){var o=t.dangerouslySetInnerHTML;if(null!=o)null!=o.__html&&v.queueHTML(r,o.__html);else{var i=V[typeof t.children]?t.children:null,a=null!=i?null:t.children;if(null!=i)v.queueText(r,i);else if(null!=a)for(var u=this.mountChildren(a,e,n),s=0;s"},receiveComponent:function(){},getNativeNode:function(){return i.getNodeFromInstance(this)},unmountComponent:function(){i.uncacheNode(this)}}),e.exports=a},function(e,t,n){"use strict";function r(e){return o.createFactory(e)}var o=n(8),i=(n(77),n(137)),a=i({a:"a",abbr:"abbr",address:"address",area:"area",article:"article",aside:"aside",audio:"audio",b:"b",base:"base",bdi:"bdi",bdo:"bdo",big:"big",blockquote:"blockquote",body:"body",br:"br",button:"button",canvas:"canvas",caption:"caption",cite:"cite",code:"code",col:"col",colgroup:"colgroup",data:"data",datalist:"datalist",dd:"dd",del:"del",details:"details",dfn:"dfn",dialog:"dialog",div:"div",dl:"dl",dt:"dt",em:"em",embed:"embed",fieldset:"fieldset",figcaption:"figcaption",figure:"figure",footer:"footer",form:"form",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",head:"head",header:"header",hgroup:"hgroup",hr:"hr",html:"html",i:"i",iframe:"iframe",img:"img",input:"input",ins:"ins",kbd:"kbd",keygen:"keygen",label:"label",legend:"legend",li:"li",link:"link",main:"main",map:"map",mark:"mark",menu:"menu",menuitem:"menuitem",meta:"meta",meter:"meter",nav:"nav",noscript:"noscript",object:"object",ol:"ol",optgroup:"optgroup",option:"option",output:"output",p:"p",param:"param",picture:"picture",pre:"pre",progress:"progress",q:"q",rp:"rp",rt:"rt",ruby:"ruby",s:"s",samp:"samp",script:"script",section:"section",select:"select",small:"small",source:"source",span:"span",strong:"strong",style:"style",sub:"sub",summary:"summary",sup:"sup",table:"table",tbody:"tbody",td:"td",textarea:"textarea",tfoot:"tfoot",th:"th",thead:"thead",time:"time",title:"title",tr:"tr",track:"track",u:"u",ul:"ul","var":"var",video:"video",wbr:"wbr",circle:"circle",clipPath:"clipPath",defs:"defs",ellipse:"ellipse",g:"g",image:"image",line:"line",linearGradient:"linearGradient",mask:"mask",path:"path",pattern:"pattern",polygon:"polygon",polyline:"polyline",radialGradient:"radialGradient",rect:"rect",stop:"stop",svg:"svg",text:"text",tspan:"tspan"},r);e.exports=a},function(e,t){"use strict";var n={useCreateElement:!0};e.exports=n},function(e,t,n){"use strict";var r=n(36),o=n(4),i={dangerouslyProcessChildrenUpdates:function(e,t){var n=o.getNodeFromInstance(e);r.processUpdates(n,t)}};e.exports=i},function(e,t,n){"use strict";function r(){this._rootNodeID&&d.updateWrapper(this)}function o(e){var t=this._currentElement.props,n=s.executeOnChange(t,e);c.asap(r,this);var o=t.name;if("radio"===t.type&&null!=o){for(var i=l.getNodeFromInstance(this),a=i;a.parentNode;)a=a.parentNode;for(var u=a.querySelectorAll("input[name="+JSON.stringify(""+o)+'][type="radio"]'),d=0;dt.end?(n=t.end,r=t.start):(n=t.start,r=t.end),o.moveToElementText(e),o.moveStart("character",n),o.setEndPoint("EndToStart",o),o.moveEnd("character",r-n),o.select()}function u(e,t){if(window.getSelection){var n=window.getSelection(),r=e[c()].length,o=Math.min(t.start,r),i=void 0===t.end?o:Math.min(t.end,r);if(!n.extend&&o>i){var a=i;i=o,o=a}var u=l(e,o),s=l(e,i);if(u&&s){var p=document.createRange();p.setStart(u.node,u.offset),n.removeAllRanges(),o>i?(n.addRange(p),n.extend(s.node,s.offset)):(p.setEnd(s.node,s.offset),n.addRange(p))}}}var s=n(5),l=n(201),c=n(93),p=s.canUseDOM&&"selection"in document&&!("getSelection"in window),d={getOffsets:p?o:i,setOffsets:p?a:u};e.exports=d},function(e,t,n){"use strict";var r=n(3),o=n(36),i=n(16),a=n(4),u=(n(6),n(31)),s=n(1),l=(n(54),function(e){this._currentElement=e,this._stringText=""+e,this._nativeNode=null,this._nativeParent=null,this._domID=null,this._mountIndex=0,this._closingComment=null,this._commentNodes=null});r(l.prototype,{mountComponent:function(e,t,n,r){var o=n._idCounter++,s=" react-text: "+o+" ",l=" /react-text ";if(this._domID=o,this._nativeParent=t,e.useCreateElement){var c=n._ownerDocument,p=c.createComment(s),d=c.createComment(l),f=i(c.createDocumentFragment());return i.queueChild(f,i(p)),this._stringText&&i.queueChild(f,i(c.createTextNode(this._stringText))),i.queueChild(f,i(d)),a.precacheNode(this,p),this._closingComment=d,f}var h=u(this._stringText);return e.renderToStaticMarkup?h:""+h+""},receiveComponent:function(e,t){if(e!==this._currentElement){this._currentElement=e;var n=""+e;if(n!==this._stringText){this._stringText=n;var r=this.getNativeNode();o.replaceDelimitedText(r[0],r[1],n)}}},getNativeNode:function(){var e=this._commentNodes;if(e)return e;if(!this._closingComment)for(var t=a.getNodeFromInstance(this),n=t.nextSibling;;){if(null==n?s(!1):void 0,8===n.nodeType&&" /react-text "===n.nodeValue){this._closingComment=n;break}n=n.nextSibling}return e=[this._nativeNode,this._closingComment],this._commentNodes=e,e},unmountComponent:function(){this._closingComment=null,this._commentNodes=null,a.uncacheNode(this)}}),e.exports=l},function(e,t,n){"use strict";function r(){this._rootNodeID&&d.updateWrapper(this)}function o(e){var t=this._currentElement.props,n=s.executeOnChange(t,e);return c.asap(r,this),n}var i=n(3),a=n(24),u=n(37),s=n(40),l=n(4),c=n(9),p=n(1),d=(n(2),{getNativeProps:function(e,t){null!=t.dangerouslySetInnerHTML?p(!1):void 0;var n=i({},a.getNativeProps(e,t),{defaultValue:void 0,value:void 0,children:e._wrapperState.initialValue,onChange:e._wrapperState.onChange});return n},mountWrapper:function(e,t){var n=t.defaultValue,r=t.children;null!=r&&(null!=n?p(!1):void 0,Array.isArray(r)&&(r.length<=1?void 0:p(!1),r=r[0]),n=""+r),null==n&&(n="");var i=s.getValue(t);e._wrapperState={initialValue:""+(null!=i?i:n),listeners:null,onChange:o.bind(e)}},updateWrapper:function(e){var t=e._currentElement.props,n=s.getValue(t);null!=n&&u.setValueForProperty(l.getNodeFromInstance(e),"value",""+n)}});e.exports=d},function(e,t,n){"use strict";function r(e,t){"_nativeNode"in e?void 0:s(!1),"_nativeNode"in t?void 0:s(!1);for(var n=0,r=e;r;r=r._nativeParent)n++;for(var o=0,i=t;i;i=i._nativeParent)o++;for(;n-o>0;)e=e._nativeParent,n--;for(;o-n>0;)t=t._nativeParent,o--;for(var a=n;a--;){if(e===t)return e;e=e._nativeParent,t=t._nativeParent}return null}function o(e,t){"_nativeNode"in e?void 0:s(!1),"_nativeNode"in t?void 0:s(!1);for(;t;){if(t===e)return!0;t=t._nativeParent}return!1}function i(e){return"_nativeNode"in e?void 0:s(!1),e._nativeParent}function a(e,t,n){for(var r=[];e;)r.push(e),e=e._nativeParent;var o;for(o=r.length;o-- >0;)t(r[o],!1,n);for(o=0;o0;)n(s[l],!1,i)}var s=n(1);e.exports={isAncestor:o,getLowestCommonAncestor:r,getParentInstance:i,traverseTwoPhase:a,traverseEnterLeave:u}},function(e,t,n){"use strict";var r,o=(n(15),n(25),n(2),{onCreateMarkupForProperty:function(e,t){r(e)},onSetValueForProperty:function(e,t,n){r(t)},onDeleteValueForProperty:function(e,t){r(t)}});e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,o,i){}function o(e){}var i=(n(5),n(140),n(2),[]),a={addDevtool:function(e){i.push(e)},removeDevtool:function(e){for(var t=0;t/,i=/^<\!\-\-/,a={CHECKSUM_ATTR_NAME:"data-react-checksum",addChecksumToMarkup:function(e){var t=r(e);return i.test(e)?e:e.replace(o," "+a.CHECKSUM_ATTR_NAME+'="'+t+'"$&')},canReuseMarkup:function(e,t){var n=t.getAttribute(a.CHECKSUM_ATTR_NAME);n=n&&parseInt(n,10);var o=r(e);return o===n}};e.exports=a},function(e,t,n){"use strict";function r(e,t,n){return{type:p.INSERT_MARKUP,content:e,fromIndex:null,fromNode:null,toIndex:n,afterNode:t}}function o(e,t,n){return{type:p.MOVE_EXISTING,content:null,fromIndex:e._mountIndex,fromNode:d.getNativeNode(e),toIndex:n,afterNode:t}}function i(e,t){return{type:p.REMOVE_NODE,content:null,fromIndex:e._mountIndex,fromNode:t,toIndex:null,afterNode:null}}function a(e){return{type:p.SET_MARKUP,content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function u(e){return{type:p.TEXT_CONTENT,content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function s(e,t){return t&&(e=e||[],e.push(t)),e}function l(e,t){c.processChildrenUpdates(e,t)}var c=n(41),p=(n(6),n(82)),d=(n(14),n(17)),f=n(152),h=(n(7),n(199)),v=n(1),m={Mixin:{_reconcilerInstantiateChildren:function(e,t,n){return f.instantiateChildren(e,t,n)},_reconcilerUpdateChildren:function(e,t,n,r,o){var i;return i=h(t),f.updateChildren(e,i,n,r,o),i},mountChildren:function(e,t,n){var r=this._reconcilerInstantiateChildren(e,t,n);this._renderedChildren=r;var o=[],i=0;for(var a in r)if(r.hasOwnProperty(a)){var u=r[a],s=d.mountComponent(u,t,this,this._nativeContainerInfo,n);u._mountIndex=i++,o.push(s)}return o},updateTextContent:function(e){var t=this._renderedChildren;f.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&v(!1);var r=[u(e)];l(this,r)},updateMarkup:function(e){var t=this._renderedChildren;f.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&v(!1);var r=[a(e)];l(this,r)},updateChildren:function(e,t,n){this._updateChildren(e,t,n)},_updateChildren:function(e,t,n){var r=this._renderedChildren,o={},i=this._reconcilerUpdateChildren(r,e,o,t,n);if(i||r){var a,u=null,c=0,p=0,f=null;for(a in i)if(i.hasOwnProperty(a)){var h=r&&r[a],v=i[a];h===v?(u=s(u,this.moveChild(h,f,p,c)),c=Math.max(h._mountIndex,c),h._mountIndex=p):(h&&(c=Math.max(h._mountIndex,c)),u=s(u,this._mountChildAtIndex(v,f,p,t,n))),p++,f=d.getNativeNode(v)}for(a in o)o.hasOwnProperty(a)&&(u=s(u,this._unmountChild(r[a],o[a])));u&&l(this,u),this._renderedChildren=i}},unmountChildren:function(e){var t=this._renderedChildren;f.unmountChildren(t,e),this._renderedChildren=null},moveChild:function(e,t,n,r){if(e._mountIndex=t)return{node:o,offset:t-i};i=a}o=n(r(o))}}e.exports=o},function(e,t,n){"use strict";function r(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n["ms"+e]="MS"+t,n["O"+e]="o"+t.toLowerCase(),n}function o(e){if(u[e])return u[e];if(!a[e])return e;var t=a[e];for(var n in t)if(t.hasOwnProperty(n)&&n in s)return u[e]=t[n];return""}var i=n(5),a={animationend:r("Animation","AnimationEnd"),animationiteration:r("Animation","AnimationIteration"),animationstart:r("Animation","AnimationStart"),transitionend:r("Transition","TransitionEnd")},u={},s={};i.canUseDOM&&(s=document.createElement("div").style,"AnimationEvent"in window||(delete a.animationend.animation,delete a.animationiteration.animation,delete a.animationstart.animation),"TransitionEvent"in window||delete a.transitionend.transition),e.exports=o},function(e,t,n){"use strict";function r(e){return o.isValidElement(e)?void 0:i(!1),e}var o=n(8),i=n(1);e.exports=r},function(e,t,n){"use strict";function r(e){return'"'+o(e)+'"'}var o=n(31);e.exports=r},function(e,t,n){"use strict";var r=n(81);e.exports=r.renderSubtreeIntoContainer},function(e,t,n){var r=n(125);"string"==typeof r&&(r=[[e.id,r,""]]);n(98)(r,{});r.locals&&(e.exports=r.locals)},function(e,t,n){var r=n(126);"string"==typeof r&&(r=[[e.id,r,""]]);n(98)(r,{});r.locals&&(e.exports=r.locals)},function(e,t,n){e.exports=n.p+"42092f929161dae9c08a21bfb46ece4d.png"}]); 20 | //# sourceMappingURL=app.js.map -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/dist/favicon.ico -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Webpack Template Title 6 | 7 | 8 | 9 | 10 | 11 |
APPLICATION CONTENT
12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | var webpackCfg = require('./webpack.config'); 2 | 3 | // Set node environment to testing 4 | process.env.NODE_ENV = 'test'; 5 | 6 | module.exports = function(config) { 7 | config.set({ 8 | basePath: '', 9 | browsers: [ 'PhantomJS' ], 10 | files: [ 11 | 'test/loadtests.js' 12 | ], 13 | port: 8000, 14 | captureTimeout: 60000, 15 | frameworks: [ 'mocha', 'chai' ], 16 | client: { 17 | mocha: {} 18 | }, 19 | singleRun: true, 20 | reporters: [ 'mocha', 'coverage' ], 21 | preprocessors: { 22 | 'test/loadtests.js': [ 'webpack', 'sourcemap' ] 23 | }, 24 | webpack: webpackCfg, 25 | webpackServer: { 26 | noInfo: true 27 | }, 28 | coverageReporter: { 29 | dir: 'coverage/', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text' } 33 | ] 34 | } 35 | }); 36 | }; 37 | -------------------------------------------------------------------------------- /org.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var React = require('react/addons'); 4 | 5 | // CSS 6 | require('normalize.css'); 7 | require('../styles/main.scss'); 8 | 9 | // 获取图片相关的数据 10 | var imageDatas = require('../data/imageDatas.json'); 11 | 12 | // 利用自执行函数， 将图片名信息转成图片URL路径信息 13 | imageDatas = (function genImageURL(imageDatasArr) { 14 | for (var i = 0, j = imageDatasArr.length; i < j; i++) { 15 | var singleImageData = imageDatasArr[i]; 16 | 17 | singleImageData.imageURL = require('../images/' + singleImageData.fileName); 18 | 19 | imageDatasArr[i] = singleImageData; 20 | } 21 | 22 | return imageDatasArr; 23 | })(imageDatas); 24 | 25 | /* 26 | * 获取区间内的一个随机值 27 | */ 28 | function getRangeRandom(low, high) { 29 | return Math.ceil(Math.random() * (high - low) + low); 30 | } 31 | 32 | /* 33 | * 获取 0~30° 之间的一个任意正负值 34 | */ 35 | function get30DegRandom() { 36 | return ((Math.random() > 0.5 ? '' : '-') + Math.ceil(Math.random() * 30)); 37 | } 38 | 39 | var ImgFigure = React.createClass({ 40 | 41 | /* 42 | * imgFigure 的点击处理函数 43 | */ 44 | handleClick: function(e) { 45 | 46 | if (this.props.arrange.isCenter) { 47 | this.props.inverse(); 48 | } else { 49 | this.props.center(); 50 | } 51 | 52 | e.stopPropagation(); 53 | e.preventDefault(); 54 | }, 55 | 56 | render: function() { 57 | 58 | var styleObj = {}; 59 | 60 | // 如果props属性中指定了这张图片的位置，则使用 61 | if (this.props.arrange.pos) { 62 | styleObj = this.props.arrange.pos; 63 | } 64 | 65 | // 如果图片的旋转角度有值并且不为0， 添加旋转角度 66 | if (this.props.arrange.rotate) { 67 | (['MozTransform', 'msTransform', 'WebkitTransform', 'transform']).forEach(function(value) { 68 | styleObj[value] = 'rotate(' + this.props.arrange.rotate + 'deg)'; 69 | }.bind(this)); 70 | } 71 | 72 | // 如果是居中的图片， z-index设为11 73 | if (this.props.arrange.isCenter) { 74 | styleObj.zIndex = 11; 75 | } 76 | 77 | var imgFigureClassName = 'img-figure'; 78 | imgFigureClassName += this.props.arrange.isInverse ? ' is-inverse' : ''; 79 | 80 | return ( 81 |
82 | {this.props.data.title} 85 |
86 |

{this.props.data.title}

87 |
88 |

89 | {this.props.data.desc} 90 |

91 |
92 |
93 |
94 | ); 95 | } 96 | }); 97 | 98 | // 控制组件 99 | var ControllerUnit = React.createClass({ 100 | handleClick: function(e) { 101 | 102 | // 如果点击的是当前正在选中态的按钮，则翻转图片，否则将对应的图片居中 103 | if (this.props.arrange.isCenter) { 104 | this.props.inverse(); 105 | } else { 106 | this.props.center(); 107 | } 108 | 109 | e.preventDefault(); 110 | e.stopPropagation(); 111 | }, 112 | render: function() { 113 | var controlelrUnitClassName = "controller-unit"; 114 | 115 | // 如果对应的是居中的图片，显示控制按钮的居中态 116 | if (this.props.arrange.isCenter) { 117 | controlelrUnitClassName += " is-center"; 118 | 119 | // 如果同时对应的是翻转图片， 显示控制按钮的翻转态 120 | if (this.props.arrange.isInverse) { 121 | controlelrUnitClassName += " is-inverse"; 122 | } 123 | } 124 | 125 | return ( 126 | 127 | ); 128 | } 129 | }); 130 | 131 | var Footer = React.createClass({ 132 | render: function() { 133 | return (
GalleryByReactApp-daisyHawen
) 134 | } 135 | }) 136 | 137 | var GalleryByReactApp = React.createClass({ 138 | Constant: { 139 | centerPos: { 140 | left: 0, 141 | right: 0 142 | }, 143 | hPosRange: { // 水平方向的取值范围 144 | leftSecX: [0, 0], 145 | rightSecX: [0, 0], 146 | y: [0, 0] 147 | }, 148 | vPosRange: { // 垂直方向的取值范围 149 | x: [0, 0], 150 | topY: [0, 0] 151 | } 152 | }, 153 | 154 | /* 155 | * 翻转图片 156 | * @param index 传入当前被执行inverse操作的图片对应的图片信息数组的index值 157 | * @returns {Function} 这是一个闭包函数, 其内return一个真正待被执行的函数 158 | */ 159 | inverse: function(index) { 160 | return function() { 161 | var imgsArrangeArr = this.state.imgsArrangeArr; 162 | 163 | imgsArrangeArr[index].isInverse = !imgsArrangeArr[index].isInverse; 164 | 165 | this.setState({ 166 | imgsArrangeArr: imgsArrangeArr 167 | }); 168 | }.bind(this); 169 | }, 170 | 171 | /* 172 | * 重新布局所有图片 173 | * @param centerIndex 指定居中排布哪个图片 174 | */ 175 | rearrange: function(centerIndex) { 176 | var imgsArrangeArr = this.state.imgsArrangeArr, 177 | Constant = this.Constant, 178 | centerPos = Constant.centerPos, 179 | hPosRange = Constant.hPosRange, 180 | vPosRange = Constant.vPosRange, 181 | hPosRangeLeftSecX = hPosRange.leftSecX, 182 | hPosRangeRightSecX = hPosRange.rightSecX, 183 | hPosRangeY = hPosRange.y, 184 | vPosRangeTopY = vPosRange.topY, 185 | vPosRangeX = vPosRange.x, 186 | 187 | imgsArrangeTopArr = [], 188 | topImgNum = Math.floor(Math.random() * 2), // 取一个或者不取 189 | topImgSpliceIndex = 0, 190 | 191 | imgsArrangeCenterArr = imgsArrangeArr.splice(centerIndex, 1); 192 | 193 | // 首先居中 centerIndex 的图片, 居中的 centerIndex 的图片不需要旋转 194 | imgsArrangeCenterArr[0] = { 195 | pos: centerPos, 196 | rotate: 0, 197 | isCenter: true 198 | }; 199 | 200 | // 取出要布局上侧的图片的状态信息 201 | topImgSpliceIndex = Math.ceil(Math.random() * (imgsArrangeArr.length - topImgNum)); 202 | imgsArrangeTopArr = imgsArrangeArr.splice(topImgSpliceIndex, topImgNum); 203 | 204 | // 布局位于上侧的图片 205 | imgsArrangeTopArr.forEach(function(value, index) { 206 | imgsArrangeTopArr[index] = { 207 | pos: { 208 | top: getRangeRandom(vPosRangeTopY[0], vPosRangeTopY[1]), 209 | left: getRangeRandom(vPosRangeX[0], vPosRangeX[1]) 210 | }, 211 | rotate: get30DegRandom(), 212 | isCenter: false 213 | }; 214 | }); 215 | 216 | // 布局左右两侧的图片 217 | for (var i = 0, j = imgsArrangeArr.length, k = j / 2; i < j; i++) { 218 | var hPosRangeLORX = null; 219 | 220 | // 前半部分布局左边， 右半部分布局右边 221 | if (i < k) { 222 | hPosRangeLORX = hPosRangeLeftSecX; 223 | } else { 224 | hPosRangeLORX = hPosRangeRightSecX; 225 | } 226 | 227 | imgsArrangeArr[i] = { 228 | pos: { 229 | top: getRangeRandom(hPosRangeY[0], hPosRangeY[1]), 230 | left: getRangeRandom(hPosRangeLORX[0], hPosRangeLORX[1]) 231 | }, 232 | rotate: get30DegRandom(), 233 | isCenter: false 234 | }; 235 | 236 | } 237 | 238 | if (imgsArrangeTopArr && imgsArrangeTopArr[0]) { 239 | imgsArrangeArr.splice(topImgSpliceIndex, 0, imgsArrangeTopArr[0]); 240 | } 241 | 242 | imgsArrangeArr.splice(centerIndex, 0, imgsArrangeCenterArr[0]); 243 | 244 | this.setState({ 245 | imgsArrangeArr: imgsArrangeArr 246 | }); 247 | }, 248 | 249 | /* 250 | * 利用arrange函数， 居中对应index的图片 251 | * @param index, 需要被居中的图片对应的图片信息数组的index值 252 | * @returns {Function} 253 | */ 254 | center: function(index) { 255 | return function() { 256 | this.rearrange(index); 257 | }.bind(this); 258 | }, 259 | 260 | getInitialState: function() { 261 | return { 262 | imgsArrangeArr: [ 263 | /*{ 264 | pos: { 265 | left: '0', 266 | top: '0' 267 | }, 268 | rotate: 0, // 旋转角度 269 | isInverse: false, // 图片正反面 270 | isCenter: false, // 图片是否居中 271 | }*/ 272 | ] 273 | }; 274 | }, 275 | 276 | // 组件加载以后， 为每张图片计算其位置的范围 277 | componentDidMount: function() { 278 | 279 | // 首先拿到舞台的大小 280 | var stageDOM = React.findDOMNode(this.refs.stage), 281 | stageW = stageDOM.scrollWidth, 282 | stageH = stageDOM.scrollHeight, 283 | halfStageW = Math.ceil(stageW / 2), 284 | halfStageH = Math.ceil(stageH / 2); 285 | 286 | // 拿到一个imageFigure的大小 287 | var imgFigureDOM = React.findDOMNode(this.refs.imgFigure0), 288 | imgW = imgFigureDOM.scrollWidth, 289 | imgH = imgFigureDOM.scrollHeight, 290 | halfImgW = Math.ceil(imgW / 2), 291 | halfImgH = Math.ceil(imgH / 2); 292 | 293 | // 计算中心图片的位置点 294 | this.Constant.centerPos = { 295 | left: halfStageW - halfImgW, 296 | top: halfStageH - halfImgH 297 | }; 298 | 299 | // 计算左侧，右侧区域图片排布位置的取值范围 300 | this.Constant.hPosRange.leftSecX[0] = -halfImgW; 301 | this.Constant.hPosRange.leftSecX[1] = halfStageW - halfImgW * 3; 302 | this.Constant.hPosRange.rightSecX[0] = halfStageW + halfImgW; 303 | this.Constant.hPosRange.rightSecX[1] = stageW - halfImgW; 304 | this.Constant.hPosRange.y[0] = -halfImgH; 305 | this.Constant.hPosRange.y[1] = stageH - halfImgH; 306 | 307 | // 计算上侧区域图片排布位置的取值范围 308 | this.Constant.vPosRange.topY[0] = -halfImgH; 309 | this.Constant.vPosRange.topY[1] = halfStageH - halfImgH * 3; 310 | this.Constant.vPosRange.x[0] = halfStageW - imgW; 311 | this.Constant.vPosRange.x[1] = halfStageW; 312 | 313 | this.rearrange(0); 314 | 315 | }, 316 | 317 | render: function() { 318 | 319 | var controllerUnits = [], 320 | imgFigures = []; 321 | 322 | imageDatas.forEach(function(value, index) { 323 | 324 | if (!this.state.imgsArrangeArr[index]) { 325 | this.state.imgsArrangeArr[index] = { 326 | pos: { 327 | left: 0, 328 | top: 0 329 | }, 330 | rotate: 0, 331 | isInverse: false, 332 | isCenter: false 333 | }; 334 | } 335 | 336 | imgFigures.push(); 337 | 338 | controllerUnits.push(); 339 | }.bind(this)); 340 | 341 | return ( 342 |
343 |
344 | {imgFigures} 345 |
346 | 349 |
350 |
351 | ); 352 | } 353 | }); 354 | React.render(, document.getElementById('content')); // jshint ignore:line 355 | 356 | module.exports = GalleryByReactApp; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "galleryReact", 3 | "private": true, 4 | "version": "0.0.1", 5 | "description": "YOUR DESCRIPTION - Generated by generator-react-webpack", 6 | "main": "", 7 | "scripts": { 8 | "clean": "rimraf dist/*", 9 | "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist", 10 | "dist": "npm run copy & webpack --env=dist", 11 | "lint": "eslint ./src", 12 | "posttest": "npm run lint", 13 | "release:major": "npm version major && npm publish && git push --follow-tags", 14 | "release:minor": "npm version minor && npm publish && git push --follow-tags", 15 | "release:patch": "npm version patch && npm publish && git push --follow-tags", 16 | "serve": "node server.js --env=dev", 17 | "serve:dist": "node server.js --env=dist", 18 | "start": "node server.js --env=dev", 19 | "test": "karma start", 20 | "test:watch": "karma start --autoWatch=true --singleRun=false" 21 | }, 22 | "repository": "", 23 | "keywords": [], 24 | "author": "Your name here", 25 | "devDependencies": { 26 | "autoprefixer-loader": "^3.2.0", 27 | "babel-core": "^6.0.0", 28 | "babel-eslint": "^6.0.0", 29 | "babel-loader": "^6.0.0", 30 | "babel-polyfill": "^6.3.14", 31 | "babel-preset-es2015": "^6.0.15", 32 | "babel-preset-react": "^6.0.15", 33 | "babel-preset-stage-0": "^6.5.0", 34 | "bower-webpack-plugin": "^0.1.9", 35 | "chai": "^3.2.0", 36 | "copyfiles": "^0.2.1", 37 | "css-loader": "^0.23.0", 38 | "eslint": "^2.2.0", 39 | "eslint-loader": "^1.0.0", 40 | "eslint-plugin-react": "^5.0.0", 41 | "file-loader": "^0.8.4", 42 | "glob": "^7.0.0", 43 | "isparta-instrumenter-loader": "^1.0.0", 44 | "json-loader": "^0.5.4", 45 | "karma": "^0.13.9", 46 | "karma-chai": "^0.1.0", 47 | "karma-coverage": "^1.0.0", 48 | "karma-mocha": "^1.0.0", 49 | "karma-mocha-reporter": "^2.0.0", 50 | "karma-phantomjs-launcher": "^1.0.0", 51 | "karma-sourcemap-loader": "^0.3.5", 52 | "karma-webpack": "^1.7.0", 53 | "minimist": "^1.2.0", 54 | "mocha": "^2.2.5", 55 | "node-sass": "^3.8.0", 56 | "null-loader": "^0.1.1", 57 | "open": "0.0.5", 58 | "phantomjs-prebuilt": "^2.0.0", 59 | "react-addons-test-utils": "^15.0.0", 60 | "react-hot-loader": "^1.2.9", 61 | "rimraf": "^2.4.3", 62 | "sass-loader": "^3.1.2", 63 | "style-loader": "^0.13.0", 64 | "url-loader": "^0.5.6", 65 | "webpack": "^1.12.0", 66 | "webpack-dev-server": "^1.12.0" 67 | }, 68 | "dependencies": { 69 | "core-js": "^2.0.0", 70 | "normalize.css": "^4.0.0", 71 | "react": "^15.0.0", 72 | "react-dom": "^15.0.0" 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | /*eslint no-console:0 */ 2 | 'use strict'; 3 | require('core-js/fn/object/assign'); 4 | const webpack = require('webpack'); 5 | const WebpackDevServer = require('webpack-dev-server'); 6 | const config = require('./webpack.config'); 7 | const open = require('open'); 8 | 9 | new WebpackDevServer(webpack(config), config.devServer) 10 | .listen(config.port, 'localhost', (err) => { 11 | if (err) { 12 | console.log(err); 13 | } 14 | console.log('Listening at localhost:' + config.port); 15 | console.log('Opening your system browser...'); 16 | open('http://localhost:' + config.port + '/webpack-dev-server/'); 17 | }); 18 | -------------------------------------------------------------------------------- /src/actions/README.md: -------------------------------------------------------------------------------- 1 | # About this folder 2 | This folder will hold all of your **flux** actions if you are using flux. 3 | You can include actions into your components or stores like this: 4 | 5 | ```javascript 6 | let react = require('react/addons'); 7 | let MyAction = require('actions/MyAction'); 8 | class MyComponent extends React.Component { 9 | constructor(props) { 10 | super(props); 11 | MyAction.exampleMethod(); 12 | } 13 | } 14 | ``` 15 | -------------------------------------------------------------------------------- /src/components/Main.js: -------------------------------------------------------------------------------- 1 | require('normalize.css/normalize.css'); 2 | require('styles/main.scss'); 3 | 4 | import React from 'react'; 5 | import ReactDOM from 'react-dom' 6 | // let yeomanImage = require('../images/yeoman.png'); 7 | //获取图片路径 8 | // let imageDatas = require('../data/imageDatas.json'); 9 | 10 | let imageDatas = require('json!../data/imageDatas.json'); 11 | 12 | // 把所有的图片名转换为图片路径 13 | function genImageURL(imageDataArr) { 14 | for (var i = 0, j = imageDataArr.length; i < j; i++) { 15 | var singleImageData = imageDataArr[i]; 16 | singleImageData.imageURL = require('../images/' + singleImageData.fileName); 17 | 18 | imageDataArr[i] = singleImageData; 19 | } 20 | return imageDataArr; // body... 21 | } 22 | imageDatas = genImageURL(imageDatas); 23 | 24 | /* 25 | * 获取区间内的一个随机值 26 | */ 27 | function getRangeRandom(low, high) { 28 | return Math.ceil(Math.random() * (high - low) + low); 29 | } 30 | 31 | /* 32 | * 获取 0~30° 之间的一个任意正负值 33 | */ 34 | function get30DegRandom() { 35 | return ((Math.random() > 0.5 ? '' : '-') + Math.ceil(Math.random() * 30)); 36 | } 37 | 38 | var ImgFigure = React.createClass({ 39 | 40 | /* 41 | * imgFigure 的点击处理函数 42 | */ 43 | handleClick: function(e) { 44 | 45 | if (this.props.arrange.isCenter) { 46 | this.props.inverse(); 47 | } else { 48 | this.props.center(); 49 | } 50 | 51 | e.stopPropagation(); 52 | e.preventDefault(); 53 | }, 54 | 55 | render: function() { 56 | 57 | var styleObj = {}; 58 | 59 | // 如果props属性中指定了这张图片的位置，则使用 60 | if (this.props.arrange.pos) { 61 | styleObj = this.props.arrange.pos; 62 | } 63 | 64 | // 如果图片的旋转角度有值并且不为0， 添加旋转角度 65 | if (this.props.arrange.rotate) { 66 | (['MozTransform', 'msTransform', 'WebkitTransform', 'transform']).forEach(function(value) { 67 | styleObj[value] = 'rotate(' + this.props.arrange.rotate + 'deg)'; 68 | }.bind(this)); 69 | } 70 | 71 | // 如果是居中的图片， z-index设为11 72 | if (this.props.arrange.isCenter) { 73 | styleObj.zIndex = 11; 74 | } 75 | 76 | var imgFigureClassName = 'img-figure'; 77 | imgFigureClassName += this.props.arrange.isInverse ? ' is-inverse' : ''; 78 | 79 | return ( 80 |
81 | {this.props.data.title} 84 |
85 |

{this.props.data.title}

86 |
87 |

88 | {this.props.data.desc} 89 |

90 |
91 |
92 |
93 | ); 94 | } 95 | }); 96 | 97 | // 控制组件 98 | var ControllerUnit = React.createClass({ 99 | handleClick: function(e) { 100 | 101 | // 如果点击的是当前正在选中态的按钮，则翻转图片，否则将对应的图片居中 102 | if (this.props.arrange.isCenter) { 103 | this.props.inverse(); 104 | } else { 105 | this.props.center(); 106 | } 107 | 108 | e.preventDefault(); 109 | e.stopPropagation(); 110 | }, 111 | render: function() { 112 | var controlelrUnitClassName = "controller-unit"; 113 | 114 | // 如果对应的是居中的图片，显示控制按钮的居中态 115 | if (this.props.arrange.isCenter) { 116 | controlelrUnitClassName += " is-center"; 117 | 118 | // 如果同时对应的是翻转图片， 显示控制按钮的翻转态 119 | if (this.props.arrange.isInverse) { 120 | controlelrUnitClassName += " is-inverse"; 121 | } 122 | } 123 | 124 | return ( 125 | 126 | ); 127 | } 128 | }); 129 | 130 | var GalleryByReactApp = React.createClass({ 131 | Constant: { 132 | centerPos: { 133 | left: 0, 134 | right: 0 135 | }, 136 | hPosRange: { // 水平方向的取值范围 137 | leftSecX: [0, 0], 138 | rightSecX: [0, 0], 139 | y: [0, 0] 140 | }, 141 | vPosRange: { // 垂直方向的取值范围 142 | x: [0, 0], 143 | topY: [0, 0] 144 | } 145 | }, 146 | 147 | /* 148 | * 翻转图片 149 | * @param index 传入当前被执行inverse操作的图片对应的图片信息数组的index值 150 | * @returns {Function} 这是一个闭包函数, 其内return一个真正待被执行的函数 151 | */ 152 | inverse: function(index) { 153 | return function() { 154 | var imgsArrangeArr = this.state.imgsArrangeArr; 155 | 156 | imgsArrangeArr[index].isInverse = !imgsArrangeArr[index].isInverse; 157 | 158 | this.setState({ 159 | imgsArrangeArr: imgsArrangeArr 160 | }); 161 | }.bind(this); 162 | }, 163 | 164 | /* 165 | * 重新布局所有图片 166 | * @param centerIndex 指定居中排布哪个图片 167 | */ 168 | rearrange: function(centerIndex) { 169 | var imgsArrangeArr = this.state.imgsArrangeArr, 170 | Constant = this.Constant, 171 | centerPos = Constant.centerPos, 172 | hPosRange = Constant.hPosRange, 173 | vPosRange = Constant.vPosRange, 174 | hPosRangeLeftSecX = hPosRange.leftSecX, 175 | hPosRangeRightSecX = hPosRange.rightSecX, 176 | hPosRangeY = hPosRange.y, 177 | vPosRangeTopY = vPosRange.topY, 178 | vPosRangeX = vPosRange.x, 179 | 180 | imgsArrangeTopArr = [], 181 | topImgNum = Math.floor(Math.random() * 2), // 取一个或者不取 182 | topImgSpliceIndex = 0, 183 | 184 | imgsArrangeCenterArr = imgsArrangeArr.splice(centerIndex, 1); 185 | 186 | // 首先居中 centerIndex 的图片, 居中的 centerIndex 的图片不需要旋转 187 | imgsArrangeCenterArr[0] = { 188 | pos: centerPos, 189 | rotate: 0, 190 | isCenter: true 191 | }; 192 | 193 | // 取出要布局上侧的图片的状态信息 194 | topImgSpliceIndex = Math.ceil(Math.random() * (imgsArrangeArr.length - topImgNum)); 195 | imgsArrangeTopArr = imgsArrangeArr.splice(topImgSpliceIndex, topImgNum); 196 | 197 | // 布局位于上侧的图片 198 | imgsArrangeTopArr.forEach(function(value, index) { 199 | imgsArrangeTopArr[index] = { 200 | pos: { 201 | top: getRangeRandom(vPosRangeTopY[0], vPosRangeTopY[1]), 202 | left: getRangeRandom(vPosRangeX[0], vPosRangeX[1]) 203 | }, 204 | rotate: get30DegRandom(), 205 | isCenter: false 206 | }; 207 | }); 208 | 209 | // 布局左右两侧的图片 210 | for (var i = 0, j = imgsArrangeArr.length, k = j / 2; i < j; i++) { 211 | var hPosRangeLORX = null; 212 | 213 | // 前半部分布局左边， 右半部分布局右边 214 | if (i < k) { 215 | hPosRangeLORX = hPosRangeLeftSecX; 216 | } else { 217 | hPosRangeLORX = hPosRangeRightSecX; 218 | } 219 | 220 | imgsArrangeArr[i] = { 221 | pos: { 222 | top: getRangeRandom(hPosRangeY[0], hPosRangeY[1]), 223 | left: getRangeRandom(hPosRangeLORX[0], hPosRangeLORX[1]) 224 | }, 225 | rotate: get30DegRandom(), 226 | isCenter: false 227 | }; 228 | 229 | } 230 | 231 | if (imgsArrangeTopArr && imgsArrangeTopArr[0]) { 232 | imgsArrangeArr.splice(topImgSpliceIndex, 0, imgsArrangeTopArr[0]); 233 | } 234 | 235 | imgsArrangeArr.splice(centerIndex, 0, imgsArrangeCenterArr[0]); 236 | 237 | this.setState({ 238 | imgsArrangeArr: imgsArrangeArr 239 | }); 240 | }, 241 | 242 | /* 243 | * 利用arrange函数， 居中对应index的图片 244 | * @param index, 需要被居中的图片对应的图片信息数组的index值 245 | * @returns {Function} 246 | */ 247 | center: function(index) { 248 | return function() { 249 | this.rearrange(index); 250 | }.bind(this); 251 | }, 252 | 253 | getInitialState: function() { 254 | return { 255 | imgsArrangeArr: [ 256 | /*{ 257 | pos: { 258 | left: '0', 259 | top: '0' 260 | }, 261 | rotate: 0, // 旋转角度 262 | isInverse: false, // 图片正反面 263 | isCenter: false, // 图片是否居中 264 | }*/ 265 | ] 266 | }; 267 | }, 268 | 269 | // 组件加载以后， 为每张图片计算其位置的范围 270 | componentDidMount: function() { 271 | 272 | // 首先拿到舞台的大小 273 | var stageDOM = ReactDOM.findDOMNode(this.refs.stage), 274 | stageW = stageDOM.scrollWidth, 275 | stageH = stageDOM.scrollHeight, 276 | halfStageW = Math.ceil(stageW / 2), 277 | halfStageH = Math.ceil(stageH / 2); 278 | 279 | // 拿到一个imageFigure的大小 280 | var imgFigureDOM = ReactDOM.findDOMNode(this.refs.imgFigure0), 281 | imgW = imgFigureDOM.scrollWidth, 282 | imgH = imgFigureDOM.scrollHeight, 283 | halfImgW = Math.ceil(imgW / 2), 284 | halfImgH = Math.ceil(imgH / 2); 285 | 286 | // 计算中心图片的位置点 287 | this.Constant.centerPos = { 288 | left: halfStageW - halfImgW, 289 | top: halfStageH - halfImgH 290 | }; 291 | 292 | // 计算左侧，右侧区域图片排布位置的取值范围 293 | this.Constant.hPosRange.leftSecX[0] = -halfImgW; 294 | this.Constant.hPosRange.leftSecX[1] = halfStageW - halfImgW * 3; 295 | this.Constant.hPosRange.rightSecX[0] = halfStageW + halfImgW; 296 | this.Constant.hPosRange.rightSecX[1] = stageW - halfImgW; 297 | this.Constant.hPosRange.y[0] = -halfImgH; 298 | this.Constant.hPosRange.y[1] = stageH - halfImgH; 299 | 300 | // 计算上侧区域图片排布位置的取值范围 301 | this.Constant.vPosRange.topY[0] = -halfImgH; 302 | this.Constant.vPosRange.topY[1] = halfStageH - halfImgH * 3; 303 | this.Constant.vPosRange.x[0] = halfStageW - imgW; 304 | this.Constant.vPosRange.x[1] = halfStageW; 305 | 306 | this.rearrange(0); 307 | 308 | }, 309 | 310 | render: function() { 311 | 312 | var controllerUnits = [], 313 | imgFigures = []; 314 | 315 | imageDatas.forEach(function(value, index) { 316 | 317 | if (!this.state.imgsArrangeArr[index]) { 318 | this.state.imgsArrangeArr[index] = { 319 | pos: { 320 | left: 0, 321 | top: 0 322 | }, 323 | rotate: 0, 324 | isInverse: false, 325 | isCenter: false 326 | }; 327 | } 328 | 329 | imgFigures.push(); 330 | 331 | controllerUnits.push(); 332 | }.bind(this)); 333 | 334 | return ( 335 |
336 |
337 | {imgFigures} 338 |
339 | 342 |
343 | ); 344 | } 345 | }); 346 | 347 | GalleryByReactApp.defaultProps = {}; 348 | 349 | export default GalleryByReactApp; -------------------------------------------------------------------------------- /src/components/Main_backup.js: -------------------------------------------------------------------------------- 1 | require('normalize.css/normalize.css'); 2 | require('styles/main.scss'); 3 | 4 | import React from 'react'; 5 | import ReactDOM from 'react-dom' 6 | // let yeomanImage = require('../images/yeoman.png'); 7 | //获取图片路径 8 | // let imageDatas = require('../data/imageDatas.json'); 9 | 10 | let imageDatas = require('json!../data/imageDatas.json'); 11 | // 只调用一次的函数，可以采用自执行的方式来执行 12 | 13 | // 把所有的图片名转换为图片路径 14 | function genImageURL(imageDataArr) { 15 | for (var i = 0, j = imageDataArr.length; i < j; i++) { 16 | var singleImageData = imageDataArr[i]; 17 | singleImageData.imageURL = require('../images/' + singleImageData.fileName); 18 | 19 | imageDataArr[i] = singleImageData; 20 | } 21 | return imageDataArr; // body... 22 | } 23 | imageDatas = genImageURL(imageDatas); 24 | 25 | /* 26 | * 获取区间内的一个随机值 27 | */ 28 | function getRangeRandom(low, high) { 29 | return Math.ceil(Math.random() * (high - low) + low); 30 | } 31 | var ImgFigure = React.createClass({ 32 | render() { 33 | var styObj = {}; 34 | /*如果props属性中指定了这张图片的位置，则使用*/ 35 | if (this.props.arrange.pos) { 36 | styObj = this.props.arrange.pos; 37 | 38 | } 39 | return ( 40 |
41 | {this.props.data.tittle}/ 42 |
43 |

{this.props.data.title}

44 |
45 |
46 | ); 47 | } 48 | }) 49 | // class AppComponent extends React.Component 50 | var testArray = {} 51 | var GalleryByReactApp = React.createClass({ 52 | /*用于定位*/ 53 | Constant: { 54 | centerPos: { 55 | left: 0, 56 | right: 0 57 | }, 58 | hPosRange: { // 水平方向的取值范围 59 | leftSecX: [0, 0], 60 | rightSecX: [0, 0], 61 | y: [0, 0] 62 | }, 63 | vPosRange: { // 垂直方向的取值范围 64 | x: [0, 0], 65 | topY: [0, 0] 66 | } 67 | }, 68 | 69 | /*重新布局所有图片 70 | 指定居中哪个图片*/ 71 | rearrange: function(centerIndex) { 72 | var imgsArrangeArr = this.state.imgsArrangeArr, 73 | Constant = this.Constant, 74 | centerPos = Constant.centerPos, 75 | hPosRange = Constant.hPosRange, 76 | vPosRange = Constant.vPosRange, 77 | hPosRangeLeftSecX = hPosRange.leftSecX, 78 | hPosRangeRightSecX = hPosRange.rightSecX, 79 | hPosRangeY = hPosRange.y, 80 | vPosRangeTopY = vPosRange.topY, 81 | vPosRangeX = vPosRange.x, 82 | 83 | imgsArrangeTopArr = [], 84 | topImgNum = Math.floor(Math.random() * 2), // 取一个或者不取 85 | topImgSpliceIndex = 0, 86 | 87 | imgsArrangeCenterArr = imgsArrangeArr.splice(centerIndex, 1); 88 | 89 | // 首先居中 centerIndex 的图片, 居中的 centerIndex 的图片不需要旋转 90 | imgsArrangeCenterArr[0] = { 91 | pos: centerPos, 92 | rotate: 0, 93 | isCenter: true 94 | }; 95 | 96 | // 取出要布局上侧的图片的状态信息 97 | topImgSpliceIndex = Math.ceil(Math.random() * (imgsArrangeArr.length - topImgNum)); 98 | imgsArrangeTopArr = imgsArrangeArr.splice(topImgSpliceIndex, topImgNum); 99 | 100 | // 布局位于上侧的图片 101 | imgsArrangeTopArr.forEach(function(value, index) { 102 | imgsArrangeTopArr[index] = { 103 | pos: { 104 | top: getRangeRandom(vPosRangeTopY[0], vPosRangeTopY[1]), 105 | left: getRangeRandom(vPosRangeX[0], vPosRangeX[1]) 106 | }, 107 | rotate: get30DegRandom(), 108 | isCenter: false 109 | }; 110 | }); 111 | 112 | // 布局左右两侧的图片 113 | for (var i = 0, j = imgsArrangeArr.length, k = j / 2; i < j; i++) { 114 | var hPosRangeLORX = null; 115 | 116 | // 前半部分布局左边， 右半部分布局右边 117 | if (i < k) { 118 | hPosRangeLORX = hPosRangeLeftSecX; 119 | } else { 120 | hPosRangeLORX = hPosRangeRightSecX; 121 | } 122 | 123 | imgsArrangeArr[i] = { 124 | pos: { 125 | top: getRangeRandom(hPosRangeY[0], hPosRangeY[1]), 126 | left: getRangeRandom(hPosRangeLORX[0], hPosRangeLORX[1]) 127 | }, 128 | rotate: get30DegRandom(), 129 | isCenter: false 130 | }; 131 | 132 | } 133 | 134 | if (imgsArrangeTopArr && imgsArrangeTopArr[0]) { 135 | imgsArrangeArr.splice(topImgSpliceIndex, 0, imgsArrangeTopArr[0]); 136 | } 137 | 138 | imgsArrangeArr.splice(centerIndex, 0, imgsArrangeCenterArr[0]); 139 | console.log('test'); 140 | this.setState({ 141 | imgsArrangeArr: imgsArrangeArr, 142 | }).bind(this); 143 | // this.state.imgsArrageArr=imgsArrageArr; 144 | /*随意生成的值设置完毕*/ 145 | }, 146 | getInitialState: function() { 147 | return { 148 | imgsArrageArr: [ 149 | // { 150 | // pos: { 151 | // left: '5', 152 | // top: '0' 153 | // } 154 | // } 155 | ] 156 | } 157 | }, 158 | //组建加载后，为每个图片计算其位置的范围 159 | componentDidMound() { 160 | // 首先拿到舞台的大小 161 | var stageDOM = ReactDOM.findDOMNode(this.refs.stage); 162 | var stageW = stageDOM.scrollWidth, 163 | stageH = stageDOM.scrollHeight, 164 | halfStageW = Math.ceil(stageW / 2), 165 | halfStageH = Math.ceil(stageH / 2); 166 | 167 | 168 | // 拿到一个imageFigure的大小 169 | var imgFigureDOM = ReactDOM.findDOMNode(this.refs.imgFigure0), 170 | imgW = imgFigureDOM.scrollWidth, 171 | imgH = imgFigureDOM.scrollHeight, 172 | halfImgW = Math.ceil(imgW / 2), 173 | halfImgH = Math.ceil(imgH / 2); 174 | 175 | // 计算中心图片的位置点 176 | this.Constant.centerPos = { 177 | left: halfStageW - halfImgW, 178 | top: halfStageH - halfImgH 179 | }; 180 | 181 | // 计算左侧，右侧区域图片排布位置的取值范围 182 | this.Constant.hPosRange.leftSecX[0] = -halfImgW; 183 | this.Constant.hPosRange.leftSecX[1] = halfStageW - halfImgW * 3; 184 | this.Constant.hPosRange.rightSecX[0] = halfStageW + halfImgW; 185 | this.Constant.hPosRange.rightSecX[1] = stageW - halfImgW; 186 | this.Constant.hPosRange.y[0] = -halfImgH; 187 | this.Constant.hPosRange.y[1] = stageH - halfImgH; 188 | 189 | // 计算上侧区域图片排布位置的取值范围 190 | this.Constant.vPosRange.topY[0] = -halfImgH; 191 | this.Constant.vPosRange.topY[1] = halfStageH - halfImgH * 3; 192 | this.Constant.vPosRange.x[0] = halfStageW - imgW; 193 | this.Constant.vPosRange.x[1] = halfStageW; 194 | 195 | this.rearrange(0); 196 | 197 | }, 198 | render() { 199 | let controllerUnits = [], 200 | imgFigures = []; 201 | imageDatas.forEach(function(item, index) { 202 | if (!this.state.imgsArrageArr[index]) { 203 | this.state.imgsArrageArr[index] = { 204 | pos: { 205 | left: '0', 206 | top: '0' 207 | } 208 | } 209 | } 210 | /*把图片的状态信息传递给imgFigure*/ 211 | imgFigures.push(); 212 | }.bind(this)); 213 | return ( 214 |
215 |
216 | {imgFigures} 217 |
218 | 221 |
222 | ); 223 | } 224 | }) 225 | 226 | GalleryByReactApp.defaultProps = {}; 227 | 228 | export default GalleryByReactApp; -------------------------------------------------------------------------------- /src/config/README.md: -------------------------------------------------------------------------------- 1 | # About this folder 2 | This folder holds configuration files for different environments. 3 | You can use it to provide your app with different settings based on the 4 | current environment, e.g. to configure different API base urls depending on 5 | whether your setup runs in dev mode or is built for distribution. 6 | You can include the configuration into your code like this: 7 | 8 | ```javascript 9 | let react = require('react/addons'); 10 | let config = require('config'); 11 | class MyComponent extends React.Component { 12 | constructor(props) { 13 | super(props); 14 | let currentAppEnv = config.appEnv; 15 | } 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /src/config/base.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Settings configured here will be merged into the final config object. 4 | export default { 5 | } 6 | -------------------------------------------------------------------------------- /src/config/dev.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import baseConfig from './base'; 4 | 5 | let config = { 6 | appEnv: 'dev' // feel free to remove the appEnv property here 7 | }; 8 | 9 | export default Object.freeze(Object.assign({}, baseConfig, config)); 10 | -------------------------------------------------------------------------------- /src/config/dist.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import baseConfig from './base'; 4 | 5 | let config = { 6 | appEnv: 'dist' // feel free to remove the appEnv property here 7 | }; 8 | 9 | export default Object.freeze(Object.assign({}, baseConfig, config)); 10 | -------------------------------------------------------------------------------- /src/config/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import baseConfig from './base'; 4 | 5 | let config = { 6 | appEnv: 'test' // don't remove the appEnv property here 7 | }; 8 | 9 | export default Object.freeze(Object.assign(baseConfig, config)); 10 | -------------------------------------------------------------------------------- /src/data/imageDatas.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "fileName": "1.jpg", 3 | "title": "Heaven of time", 4 | "desc": "Here he comes Here comes Speed Racer." 5 | }, { 6 | "fileName": "2.jpg", 7 | "title": "Heaven of time", 8 | "desc": "Here he comes Here comes Speed Racer." 9 | }, { 10 | "fileName": "3.jpg", 11 | "title": "Heaven of time", 12 | "desc": "Here he comes Here comes Speed Racer." 13 | }, { 14 | "fileName": "4.jpg", 15 | "title": "Heaven of time", 16 | "desc": "Here he comes Here comes Speed Racer. " 17 | }, { 18 | "fileName": "5.jpg", 19 | "title": "Heaven of time", 20 | "desc": "Here he comes Here comes Speed Racer. " 21 | }, { 22 | "fileName": "6.jpg", 23 | "title": "Heaven of time", 24 | "desc": "Here he comes Here comes Speed Racer. " 25 | }, { 26 | "fileName": "7.jpg", 27 | "title": "Heaven of time", 28 | "desc": "Here he comes Here comes Speed Racer. " 29 | }, { 30 | "fileName": "8.jpg", 31 | "title": "Heaven of time", 32 | "desc": "Here he comes Here comes Speed Racer. " 33 | }, { 34 | "fileName": "9.jpg", 35 | "title": "Heaven of time", 36 | "desc": "Here he comes Here comes Speed Racer. " 37 | }, { 38 | "fileName": "10.jpg", 39 | "title": "Heaven of time", 40 | "desc": "Here he comes Here comes Speed Racer. " 41 | }, { 42 | "fileName": "11.jpg", 43 | "title": "Heaven of time", 44 | "desc": "Here he comes Here comes Speed Racer. " 45 | }, { 46 | "fileName": "12.jpg", 47 | "title": "Heaven of time", 48 | "desc": "Here he comes Here comes Speed Racer. " 49 | }, { 50 | "fileName": "13.jpg", 51 | "title": "Heaven of time", 52 | "desc": "Here he comes Here comes Speed Racer. " 53 | }, { 54 | "fileName": "14.jpg", 55 | "title": "Heaven of time", 56 | "desc": "Here he comes Here comes Speed Racer. " 57 | }, { 58 | "fileName": "15.jpg", 59 | "title": "Heaven of time", 60 | "desc": "Here he comes Here comes Speed Racer. " 61 | }, { 62 | "fileName": "16.jpg", 63 | "title": "Heaven of time", 64 | "desc": "Here he comes Here comes Speed Racer. " 65 | }] -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/favicon.ico -------------------------------------------------------------------------------- /src/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/1.jpg -------------------------------------------------------------------------------- /src/images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/10.jpg -------------------------------------------------------------------------------- /src/images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/11.jpg -------------------------------------------------------------------------------- /src/images/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/12.jpg -------------------------------------------------------------------------------- /src/images/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/13.jpg -------------------------------------------------------------------------------- /src/images/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/14.jpg -------------------------------------------------------------------------------- /src/images/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/15.jpg -------------------------------------------------------------------------------- /src/images/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/16.jpg -------------------------------------------------------------------------------- /src/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/2.jpg -------------------------------------------------------------------------------- /src/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/3.jpg -------------------------------------------------------------------------------- /src/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/4.jpg -------------------------------------------------------------------------------- /src/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/5.jpg -------------------------------------------------------------------------------- /src/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/6.jpg -------------------------------------------------------------------------------- /src/images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/7.jpg -------------------------------------------------------------------------------- /src/images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/8.jpg -------------------------------------------------------------------------------- /src/images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/9.jpg -------------------------------------------------------------------------------- /src/images/yeoman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/src/images/yeoman.png -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Webpack Template Title 6 | 7 | 8 | 9 | 10 | 11 |
APPLICATION CONTENT
12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import 'core-js/fn/object/assign'; 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import App from './components/Main'; 5 | 6 | // Render the main component into the dom 7 | ReactDOM.render(, document.getElementById('app')); 8 | -------------------------------------------------------------------------------- /src/sources/README.md: -------------------------------------------------------------------------------- 1 | # About this folder 2 | This folder will hold all of your **flux** datasources. 3 | You can include them into your components or stores like this: 4 | 5 | ```javascript 6 | let react = require('react/addons'); 7 | let MySource = require('sources/MyAction'); 8 | class MyComponent extends React.Component { 9 | constructor(props) { 10 | super(props); 11 | MySource.getRemoteData(); 12 | } 13 | } 14 | ``` 15 | -------------------------------------------------------------------------------- /src/stores/README.md: -------------------------------------------------------------------------------- 1 | # About this folder 2 | This folder will hold all of your **flux** stores. 3 | You can include them into your components like this: 4 | 5 | ```javascript 6 | let react = require('react/addons'); 7 | let MyStore = require('stores/MyStore'); 8 | class MyComponent extends React.Component { 9 | constructor(props) { 10 | super(props); 11 | MyStore.doSomething(); 12 | } 13 | } 14 | ``` 15 | -------------------------------------------------------------------------------- /src/styles/main.scss: -------------------------------------------------------------------------------- 1 | /* Base Application Styles */ 2 | 3 | // body { 4 | // color: #fff; 5 | // background: #222; 6 | // } 7 | // .index img { 8 | // margin: 40px auto; 9 | // border-radius: 4px; 10 | // background: #fff; 11 | // display: block; 12 | // } 13 | // .index .notice { 14 | // margin: 20px auto; 15 | // padding: 15px 0; 16 | // text-align: center; 17 | // border: 1px solid #000; 18 | // border-width: 1px 0; 19 | // background: #666; 20 | // } 21 | html, 22 | body { 23 | background: #222; 24 | width: 100%; 25 | height: 100%; 26 | } 27 | 28 | .content { 29 | height: 100%; 30 | width: 100%; 31 | } 32 | 33 | 34 | /*修饰舞台结构--start*/ 35 | 36 | @media screen and (min-width:1200px){ 37 | .stage 38 | { 39 | position: relative; 40 | width: 99.5%; 41 | height: 860px; 42 | margin:0 auto; 43 | } 44 | 45 | } 46 | @media screen and (min-width:800px){ 47 | .stage 48 | { 49 | position: relative; 50 | width: 99.5%; 51 | height: 860px; 52 | margin:0 auto; 53 | } 54 | 55 | } 56 | @media screen and (max-width:800px){ 57 | .stage 58 | { 59 | position: relative; 60 | width: 99.5%; 61 | height: 860px; 62 | margin:0 auto; 63 | } 64 | 65 | } 66 | 67 | 68 | /*stage --end*/ 69 | 70 | 71 | /*image --start*/ 72 | 73 | .img-sec { 74 | position: relative; 75 | width: 100%; 76 | height: 100%; 77 | overflow: hidden; 78 | background-color: #ddd; 79 | @at-root { 80 | .img-figure { 81 | position:absolute; 82 | width: 320px; 83 | height: 400px; 84 | margin: 0; 85 | padding: 40px; 86 | background-color: #fff; 87 | box-sizing: border-box; 88 | img { 89 | height: 240px; 90 | width: 240px; 91 | 92 | } 93 | } 94 | figcaption{ 95 | text-align:center; 96 | .img-tittle{ 97 | margin:20px 0 0 0; 98 | color:#a7a0a2; 99 | font-size:16px; 100 | } 101 | } 102 | } 103 | } 104 | 105 | 106 | /*image --end*/ 107 | 108 | 109 | /*controlller --start*/ 110 | 111 | 112 | /* controller -- start */ 113 | .controller-nav { 114 | position: absolute; 115 | left: 0; 116 | bottom: 30px; 117 | z-index: 101; 118 | 119 | width: 100%; 120 | 121 | text-align: center; 122 | 123 | @at-root { 124 | .controller-unit { 125 | display: inline-block; 126 | margin: 0 5px; 127 | width: 30px; 128 | height: 30px; 129 | 130 | text-align: center; 131 | vertical-align: middle; 132 | 133 | cursor: pointer; 134 | background-color: #aaa; 135 | border-radius: 50%; 136 | 137 | transform: scale(.5); 138 | transition: transform .6s ease-in-out, background-color .3s; 139 | 140 | &.is-center { 141 | background-color: #888; 142 | 143 | transform: scale(1); 144 | 145 | &::after { 146 | color: #fff; 147 | font-family: "icons-turn-arrow"; 148 | font-size: 80%; 149 | line-height: 30px; 150 | 151 | content: "\e600"; 152 | 153 | -webkit-font-smoothing: antialiased; 154 | -moz-osx-font-smoothing: grayscale; 155 | } 156 | 157 | &.is-inverse { 158 | background-color: #555; 159 | 160 | transform: rotateY(180deg); 161 | } 162 | } 163 | } 164 | } 165 | } 166 | /* controller -- end */ -------------------------------------------------------------------------------- /test/actions/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/test/actions/.keep -------------------------------------------------------------------------------- /test/components/MainTest.js: -------------------------------------------------------------------------------- 1 | /*eslint-env node, mocha */ 2 | /*global expect */ 3 | /*eslint no-console: 0*/ 4 | 'use strict'; 5 | 6 | // Uncomment the following lines to use the react test utilities 7 | // import React from 'react/addons'; 8 | // const TestUtils = React.addons.TestUtils; 9 | import createComponent from 'helpers/shallowRenderHelper'; 10 | 11 | import Main from 'components/Main'; 12 | 13 | describe('MainComponent', () => { 14 | let MainComponent; 15 | 16 | beforeEach(() => { 17 | MainComponent = createComponent(Main); 18 | }); 19 | 20 | it('should have its component name as default className', () => { 21 | expect(MainComponent.props.className).to.equal('index'); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /test/config/ConfigTest.js: -------------------------------------------------------------------------------- 1 | /*eslint-env node, mocha */ 2 | /*global expect */ 3 | /*eslint no-console: 0*/ 4 | 'use strict'; 5 | 6 | import config from 'config'; 7 | 8 | describe('appEnvConfigTests', () => { 9 | it('should load app config file depending on current --env', () => { 10 | expect(config.appEnv).to.equal('test'); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /test/helpers/shallowRenderHelper.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Function to get the shallow output for a given component 3 | * As we are using phantom.js, we also need to include the fn.proto.bind shim! 4 | * 5 | * @see http://simonsmith.io/unit-testing-react-components-without-a-dom/ 6 | * @author somonsmith 7 | */ 8 | import React from 'react'; 9 | import TestUtils from 'react-addons-test-utils'; 10 | 11 | /** 12 | * Get the shallow rendered component 13 | * 14 | * @param {Object} component The component to return the output for 15 | * @param {Object} props [optional] The components properties 16 | * @param {Mixed} ...children [optional] List of children 17 | * @return {Object} Shallow rendered output 18 | */ 19 | export default function createComponent(component, props = {}, ...children) { 20 | const shallowRenderer = TestUtils.createRenderer(); 21 | shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0])); 22 | return shallowRenderer.getRenderOutput(); 23 | } 24 | -------------------------------------------------------------------------------- /test/loadtests.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | require('babel-polyfill'); 4 | require('core-js/fn/object/assign'); 5 | 6 | // Add support for all files in the test directory 7 | const testsContext = require.context('.', true, /(Test\.js$)|(Helper\.js$)/); 8 | testsContext.keys().forEach(testsContext); 9 | -------------------------------------------------------------------------------- /test/sources/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/test/sources/.keep -------------------------------------------------------------------------------- /test/stores/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daisyHawen/React-gallery/574cfbb0077447eeab60b7d8a18d209fd40c724e/test/stores/.keep -------------------------------------------------------------------------------- /test_dirname.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @authors Your Name (you@example.org) 4 | * @date 2016-06-30 16:19:31 5 | * @version $Id$ 6 | */ 7 | console.log(__dirname); //__dirname node.js里的东西 ，是当前脚本所在的位置 -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const args = require('minimist')(process.argv.slice(2)); 5 | 6 | // List of allowed environments 7 | const allowedEnvs = ['dev', 'dist', 'test']; 8 | 9 | // Set the correct environment 10 | let env; 11 | if (args._.length > 0 && args._.indexOf('start') !== -1) { 12 | env = 'test'; 13 | } else if (args.env) { 14 | env = args.env; 15 | } else { 16 | env = 'dev'; 17 | } 18 | process.env.REACT_WEBPACK_ENV = env; 19 | 20 | /** 21 | * Build the webpack configuration 22 | * @param {String} wantedEnv The wanted environment 23 | * @return {Object} Webpack config 24 | */ 25 | function buildConfig(wantedEnv) { 26 | let isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1; 27 | let validEnv = isValid ? wantedEnv : 'dev'; 28 | let config = require(path.join(__dirname, 'cfg/' + validEnv)); 29 | return config; 30 | } 31 | 32 | module.exports = buildConfig(env); 33 | --------------------------------------------------------------------------------