├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .eslintrc-base ├── .eslintrc-client ├── .eslintrc-client-test ├── .eslintrc-server ├── .gitignore ├── .npmignore ├── .travis.yml ├── README.md ├── demo ├── app.jsx ├── app.min.js ├── index.html ├── webpack.config.dev.js └── webpack.config.hot.js ├── dist ├── react-rpg.js ├── react-rpg.js.map ├── react-rpg.min.js └── react-rpg.min.js.map ├── index.html ├── karma.conf.coverage.js ├── karma.conf.dev.js ├── karma.conf.js ├── package.json ├── reactPhotoGrid.png ├── src ├── components │ ├── react-rpg-photo.jsx │ └── react-rpg.jsx └── index.js ├── test └── client │ ├── main.js │ ├── spec │ └── components │ │ ├── react-rpg-photo.spec.jsx │ │ └── react-rpg.spec.jsx │ └── test.html ├── webpack.config.coverage.js ├── webpack.config.demo.js ├── webpack.config.dev.js ├── webpack.config.js └── webpack.config.test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "stage": 0, 3 | "nonStandard": true 4 | } 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | max_line_length = 100 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/* 2 | node_modules/* 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb/base" 3 | } -------------------------------------------------------------------------------- /.eslintrc-base: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/james-oldfield/react-rpg/57f06bd9417eb07223b9ba4936216382f346fcdf/.eslintrc-base -------------------------------------------------------------------------------- /.eslintrc-client: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb/base", 3 | "plugins": [ 4 | "react" 5 | ] 6 | } -------------------------------------------------------------------------------- /.eslintrc-client-test: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb/base", 3 | "plugins": [ 4 | "react" 5 | ], 6 | "env": { 7 | "mocha": true 8 | }, 9 | "globals": { 10 | "expect": false 11 | }, 12 | "rules": { 13 | "no-unused-vars": 0 14 | } 15 | } 16 | 17 | -------------------------------------------------------------------------------- /.eslintrc-server: -------------------------------------------------------------------------------- 1 | --- 2 | extends: 3 | - "defaults/configurations/walmart/es5-node" 4 | - ".eslintrc-base" -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### SublimeText ### 2 | *.sublime-workspace 3 | 4 | ### OSX ### 5 | .DS_Store 6 | .AppleDouble 7 | .LSOverride 8 | Icon 9 | 10 | # Thumbnails 11 | ._* 12 | 13 | # Files that might appear on external disk 14 | .Spotlight-V100 15 | .Trashes 16 | 17 | ### Windows ### 18 | # Windows image file caches 19 | Thumbs.db 20 | ehthumbs.db 21 | 22 | # Folder config file 23 | Desktop.ini 24 | 25 | # Recycle Bin used on file shares 26 | $RECYCLE.BIN/ 27 | 28 | # App specific 29 | 30 | coverage 31 | node_modules 32 | bower_components 33 | .tmp 34 | lib 35 | npm-debug.log 36 | CONTRIBUTING.md 37 | DEVELOPMENT.md -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Cruft 2 | *.sublime-workspace 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | Icon 7 | ._* 8 | .Spotlight-V100 9 | .Trashes 10 | Thumbs.db 11 | ehthumbs.db 12 | Desktop.ini 13 | $RECYCLE.BIN/ 14 | .tmp 15 | npm-debug.log 16 | 17 | # Code / build 18 | coverage 19 | node_modules 20 | bower_components 21 | demo 22 | test 23 | karma* 24 | webpack* 25 | .eslint* 26 | .editor* 27 | .travis* 28 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - 0.10 5 | - 0.12 6 | 7 | # Use container-based Travis infrastructure. 8 | sudo: false 9 | 10 | branches: 11 | only: 12 | - master 13 | 14 | before_install: 15 | # GUI for real browsers. 16 | - export DISPLAY=:99.0 17 | - sh -e /etc/init.d/xvfb start 18 | 19 | script: 20 | - npm run check-ci 21 | 22 | # Prune deps to just production and ensure we can still build 23 | - npm prune --production 24 | - npm install --production 25 | - npm run build 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | react-rpg :camera: 2 | =========================== 3 | ## what 4 | **react-rpg** is a lightweight, stateless **responsive photo grid** component for reactjs. Quickly create instagram-esque responsive photo grids with no CSS dependencies. 5 | 6 | # [DEMO](http://james-oldfield.github.io/react-rpg) 7 | 8 | ![react-rpg](./reactPhotoGrid.png) 9 | 10 | The component renders an array of images in square aspect-ratio for the modern, fluid web. The **react-rpg** component takes 100% width of the parent container using dynamic inline styles. 11 | 12 | Column count can be specified at 3 different breakpoints. 13 | 14 | ## how 15 | 16 | To use in a react project, first, install via npm: 17 | 18 | `npm i react-rpg --save` 19 | 20 | Then require wherever you desire and pass it an array of image objects as props. See `./demo` for a more thorough example. 21 | 22 | ```js 23 | ... 24 | import { ReactRpg } from 'react-rpg'; 25 | 26 | const images = [ 27 | { 28 | url: "absolute url to the src of the image", 29 | clickHandler: (url, obj) => { console.log(url) } 30 | }, 31 | { 32 | url: "http://images.com/myimage.jpg", 33 | clickHandler: (url, obj) => { console.log(obj) } 34 | } 35 | ]; 36 | 37 | 38 | class App extends React.Component { 39 | render() { 40 | return ( 41 |
42 | 43 |
44 | ); 45 | } 46 | } 47 | ``` 48 | 49 | ### Props 50 | - `imagesArray` (array, default [], required **YES**) - An Array of objects containing an `url` property of the absolute url of the photos for the `img`'s `src` attribute. Can also pass an optional `clickHandler` callback function property. 51 | - `columns` (array, default [1, 2, 3], required **NO**) - Sets the number of columns for the photo grid. First array element is the column count on screens under `480px` wide. Second element is the desired column count at device widths above `480px` and below `992px`. Third array element is desired column count on devices with screen width `992px`+. 52 | - `padding` (number, default 0, required **NO**) - Sets the padding value in `px` around the images. 53 | 54 | Scaffolded with [Formidable Labs' component boilerplate](https://github.com/FormidableLabs/formidable-react-component-boilerplate), thanks! 55 | 56 | ### changelog 57 | 58 | #### v1.0 59 | 60 | - `link` prop is depreciated. 61 | - Instead, pass a callback function to the `clickHandler` property in the `imagesArray` prop. This function receives the URL and React's synthetic event object for your disposal. 62 | 63 | #### v2.0 64 | 65 | - Pass an array of size 3 to the `columns` prop instead of just a single integer to specify column count at 3 breakpoints so that column count is a function of device width for varying screen sizes. 66 | 67 | -------------------------------------------------------------------------------- /demo/app.jsx: -------------------------------------------------------------------------------- 1 | /* global document:false */ 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import { ReactRpg } from '../src/index'; 5 | 6 | const previewStyles = { 7 | top: '50%', 8 | left: '50%', 9 | transform: 'translate(-50%, -50%)', 10 | position: 'fixed', 11 | border: 'solid #1a1a1a 10px', 12 | zIndex: '3', 13 | }; 14 | 15 | const ImagePreview = ({ url }) => {url}; 16 | 17 | class App extends React.Component { 18 | constructor(props) { 19 | super(props); 20 | 21 | this.state = { 22 | padding: 10, 23 | columns: 3, 24 | popUp: false, 25 | }; 26 | } 27 | paddingChanged(e) { 28 | this.setState({ padding: parseInt(e.target.value, 10) }); 29 | } 30 | columnsChanged(e) { 31 | this.setState({ columns: parseInt(e.target.value, 10) }); 32 | } 33 | 34 | /** 35 | * A generic callback function to be executed upon click of the image wrapper. 36 | * @param url - The URL prop of the object 37 | * @param obj - The syntheticMouseEvent object via react. 38 | */ 39 | imagePopup(url, obj) { 40 | this.setState({ popUp: url }); 41 | console.log(obj); 42 | setTimeout(() => this.setState({ popUp: false }), 1000); 43 | } 44 | 45 | getImages() { 46 | return [ 47 | { url: 'http://james-oldfield.github.io/thailand/images/girl.adc2e72a.jpg', clickHandler: this.imagePopup.bind(this) }, 48 | { url: 'http://james-oldfield.github.io/thailand/images/RecliningBuddha.a1705a9a.jpg', clickHandler: this.imagePopup.bind(this) }, 49 | { url: 'http://im.vsco.co/1/52d992e43ad70287923/545e7da07267083a1e8b4662/vsco_110814.jpg?w=709&dpr=2', clickHandler: this.imagePopup.bind(this) }, 50 | { url: 'http://im.vsco.co/1/52d992e43ad70287923/53ab2a567167083b658b45df/vsco_062514.jpg?w=300&dpr=2', clickHandler: this.imagePopup.bind(this) }, 51 | { url: 'http://im.vsco.co/1/52d992e43ad70287923/53ab2a3a74670831708b4749/vsco_062514.jpg?w=300&dpr=2', clickHandler: this.imagePopup.bind(this) }, 52 | { url: 'http://im.vsco.co/1/52d992e43ad70287923/53ab26fd75670897318b464c/vsco_062514.jpg?w=300&dpr=2', clickHandler: this.imagePopup.bind(this) }, 53 | { url: 'http://im.vsco.co/1/52d992e43ad70287923/53ab27657467082f588b4939/vsco_062514.jpg?w=300&dpr=2', clickHandler: this.imagePopup.bind(this) }, 54 | { url: 'http://im.vsco.co/1/52d992e43ad70287923/53ab26b87267089b1d8b456f/vsco_062514.jpg?w=300&dpr=2', clickHandler: this.imagePopup.bind(this) }, 55 | { url: 'http://im.vsco.co/1/52d992e43ad70287923/545e7bab7567081e158b4575/vsco_110814.jpg?w=300&dpr=2', clickHandler: this.imagePopup.bind(this) }, 56 | ]; 57 | } 58 | 59 | render() { 60 | return ( 61 |
62 |

react-rpg

63 |

react responsive photo grid v2.0

64 |

adjust padding:

65 | 66 |

adjust columns at desktop breakpoint:

67 | 68 | 69 | { this.state.popUp !== false ? : null } 70 | 71 | 72 |
73 | ); 74 | } 75 | } 76 | 77 | const content = document.getElementById('content'); 78 | 79 | ReactDOM.render(, content); 80 | -------------------------------------------------------------------------------- /demo/app.min.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="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=function(){function e(e,t){for(var n=0;n"+u+""},receiveComponent:function(e,t){if(e!==this._currentElement){this._currentElement=e;var n=""+e;if(n!==this._stringText){this._stringText=n;var o=i.getNode(this._rootNodeID);r.updateTextContent(o,n)}}},unmountComponent:function(){a.unmountIDFromEnvironment(this._rootNodeID)}}),e.exports=c},function(e,t,n){"use strict";function r(e,t,n){var r=n>=e.childNodes.length?null:e.childNodes.item(n);e.insertBefore(t,r)}var o=n(7),a=n(15),i=n(17),u=n(18),s=n(19),l=n(12),c={dangerouslyReplaceNodeWithMarkup:o.dangerouslyReplaceNodeWithMarkup,updateTextContent:s,processUpdates:function(e,t){for(var n,i=null,c=null,p=0;p]+)/,c="data-danger-index",p={dangerouslyRenderMarkup:function(e){o.canUseDOM?void 0:s(!1);for(var t,n={},p=0;pa;a++)r[a]=e[a];return r}var o=n(12);e.exports=r},function(e,t,n){"use strict";var r=function(e,t,n,r,o,a,i,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,a,i,u],c=0;s=new Error("Invariant Violation: "+t.replace(/%s/g,function(){return l[c++]}))}throw s.framesToPop=1,s}};e.exports=r},function(e,t,n){"use strict";function r(e){return i?void 0:a(!1),d.hasOwnProperty(e)||(e="*"),u.hasOwnProperty(e)||("*"===e?i.innerHTML="":i.innerHTML="<"+e+">",u[e]=!i.firstChild),u[e]?d[e]:null}var o=n(8),a=n(12),i=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){return function(){return e}}function r(){}r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){"use strict";var r=n(16),o=r({INSERT_MARKUP:null,MOVE_EXISTING:null,REMOVE_NODE:null,SET_MARKUP:null,TEXT_CONTENT:null});e.exports=o},function(e,t,n){"use strict";var r=n(12),o=function(e){var t,n={};e instanceof Object&&!Array.isArray(e)?void 0:r(!1);for(t in e)e.hasOwnProperty(t)&&(n[t]=t);return n};e.exports=o},function(e,t,n){"use strict";function r(e,t,n){return n}var o={enableMeasure:!1,storedMeasure:r,measureMethods:function(e,t,n){},measure:function(e,t,n){return n},injection:{injectMeasure:function(e){o.storedMeasure=e}}};e.exports=o},function(e,t,n){"use strict";var r=n(8),o=/^[ \r\n\t\f]/,a=/<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/,i=function(e,t){e.innerHTML=t};if("undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction&&(i=function(e,t){MSApp.execUnsafeLocalFunction(function(){e.innerHTML=t})}),r.canUseDOM){var u=document.createElement("div");u.innerHTML=" ",""===u.innerHTML&&(i=function(e,t){if(e.parentNode&&e.parentNode.replaceChild(e,e),o.test(t)||"<"===t[0]&&a.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})}e.exports=i},function(e,t,n){"use strict";var r=n(8),o=n(20),a=n(18),i=function(e,t){e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(i=function(e,t){a(e,o(t))})),e.exports=i},function(e,t){"use strict";function n(e){return o[e]}function r(e){return(""+e).replace(a,n)}var o={"&":"&",">":">","<":"<",'"':""","'":"'"},a=/[&><"']/g;e.exports=r},function(e,t,n){"use strict";function r(e){return c.hasOwnProperty(e)?!0:l.hasOwnProperty(e)?!1:s.test(e)?(c[e]=!0,!0):(l[e]=!0,!1)}function o(e,t){return null==t||e.hasBooleanValue&&!t||e.hasNumericValue&&isNaN(t)||e.hasPositiveNumericValue&&1>t||e.hasOverloadedBooleanValue&&t===!1}var a=n(22),i=n(17),u=n(23),s=(n(24),/^[a-zA-Z_][\w\.\-]*$/),l={},c={},p={createMarkupForID:function(e){return a.ID_ATTRIBUTE_NAME+"="+u(e)},setAttributeForID:function(e,t){e.setAttribute(a.ID_ATTRIBUTE_NAME,t)},createMarkupForProperty:function(e,t){var n=a.properties.hasOwnProperty(e)?a.properties[e]:null;if(n){if(o(n,t))return"";var r=n.attributeName;return n.hasBooleanValue||n.hasOverloadedBooleanValue&&t===!0?r+'=""':r+"="+u(t)}return a.isCustomAttribute(e)?null==t?"":e+"="+u(t):null},createMarkupForCustomAttribute:function(e,t){return r(e)&&null!=t?e+"="+u(t):""},setValueForProperty:function(e,t,n){var r=a.properties.hasOwnProperty(t)?a.properties[t]:null;if(r){var i=r.mutationMethod;if(i)i(e,n);else if(o(r,n))this.deleteValueForProperty(e,t);else if(r.mustUseAttribute){var u=r.attributeName,s=r.attributeNamespace;s?e.setAttributeNS(s,u,""+n):r.hasBooleanValue||r.hasOverloadedBooleanValue&&n===!0?e.setAttribute(u,""):e.setAttribute(u,""+n)}else{var l=r.propertyName;r.hasSideEffects&&""+e[l]==""+n||(e[l]=n)}}else a.isCustomAttribute(t)&&p.setValueForAttribute(e,t,n)},setValueForAttribute:function(e,t,n){r(t)&&(null==n?e.removeAttribute(t):e.setAttribute(t,""+n))},deleteValueForProperty:function(e,t){var n=a.properties.hasOwnProperty(t)?a.properties[t]:null;if(n){var r=n.mutationMethod;if(r)r(e,void 0);else if(n.mustUseAttribute)e.removeAttribute(n.attributeName);else{var o=n.propertyName,i=a.getDefaultValueForProperty(e.nodeName,o);n.hasSideEffects&&""+e[o]===i||(e[o]=i)}}else a.isCustomAttribute(t)&&e.removeAttribute(t)}};i.measureMethods(p,"DOMPropertyOperations",{setValueForProperty:"setValueForProperty",setValueForAttribute:"setValueForAttribute",deleteValueForProperty:"deleteValueForProperty"}),e.exports=p},function(e,t,n){"use strict";function r(e,t){return(e&t)===t}var o=n(12),a={MUST_USE_ATTRIBUTE:1,MUST_USE_PROPERTY:2,HAS_SIDE_EFFECTS:4,HAS_BOOLEAN_VALUE:8,HAS_NUMERIC_VALUE:16,HAS_POSITIVE_NUMERIC_VALUE:48,HAS_OVERLOADED_BOOLEAN_VALUE:64,injectDOMPropertyConfig:function(e){var t=a,n=e.Properties||{},i=e.DOMAttributeNamespaces||{},s=e.DOMAttributeNames||{},l=e.DOMPropertyNames||{},c=e.DOMMutationMethods||{};e.isCustomAttribute&&u._isCustomAttributeFunctions.push(e.isCustomAttribute);for(var p in n){u.properties.hasOwnProperty(p)?o(!1):void 0;var d=p.toLowerCase(),f=n[p],h={attributeName:d,attributeNamespace:null,propertyName:p,mutationMethod:null,mustUseAttribute:r(f,t.MUST_USE_ATTRIBUTE),mustUseProperty:r(f,t.MUST_USE_PROPERTY),hasSideEffects:r(f,t.HAS_SIDE_EFFECTS),hasBooleanValue:r(f,t.HAS_BOOLEAN_VALUE),hasNumericValue:r(f,t.HAS_NUMERIC_VALUE),hasPositiveNumericValue:r(f,t.HAS_POSITIVE_NUMERIC_VALUE),hasOverloadedBooleanValue:r(f,t.HAS_OVERLOADED_BOOLEAN_VALUE)};if(h.mustUseAttribute&&h.mustUseProperty?o(!1):void 0,!h.mustUseProperty&&h.hasSideEffects?o(!1):void 0,h.hasBooleanValue+h.hasNumericValue+h.hasOverloadedBooleanValue<=1?void 0:o(!1),s.hasOwnProperty(p)){var v=s[p];h.attributeName=v}i.hasOwnProperty(p)&&(h.attributeNamespace=i[p]),l.hasOwnProperty(p)&&(h.propertyName=l[p]),c.hasOwnProperty(p)&&(h.mutationMethod=c[p]),u.properties[p]=h}}},i={},u={ID_ATTRIBUTE_NAME:"data-reactid",properties:{},getPossibleStandardName:null,_isCustomAttributeFunctions:[],isCustomAttribute:function(e){for(var t=0;tr;r++)if(e.charAt(r)!==t.charAt(r))return r;return e.length===t.length?-1:n}function o(e){return e?e.nodeType===W?e.documentElement:e.firstChild:null}function a(e){var t=o(e);return t&&Q.getID(t)}function i(e){var t=u(e);if(t)if(B.hasOwnProperty(t)){var n=B[t];n!==e&&(p(n,t)?L(!1):void 0,B[t]=e)}else B[t]=e;return t}function u(e){return e&&e.getAttribute&&e.getAttribute(j)||""}function s(e,t){var n=u(e);n!==t&&delete B[n],e.setAttribute(j,t),B[t]=e}function l(e){return B.hasOwnProperty(e)&&p(B[e],e)||(B[e]=Q.findReactNodeByID(e)),B[e]}function c(e){var t=M.get(e)._rootNodeID;return D.isNullComponentID(t)?null:(B.hasOwnProperty(t)&&p(B[t],t)||(B[t]=Q.findReactNodeByID(t)),B[t])}function p(e,t){if(e){u(e)!==t?L(!1):void 0;var n=Q.findReactContainerForID(t);if(n&&O(n,e))return!0}return!1}function d(e){delete B[e]}function f(e){var t=B[e];return t&&p(t,e)?void(G=t):!1}function h(e){G=null,P.traverseAncestors(e,f);var t=G;return G=null,t}function v(e,t,n,r,o,a){E.useCreateElement&&(a=T({},a),n.nodeType===W?a[H]=n:a[H]=n.ownerDocument);var i=R.mountComponent(e,t,r,a);e._renderedComponent._topLevelWrapper=e,Q._mountImageIntoNode(i,n,o,r)}function m(e,t,n,r,o){var a=S.ReactReconcileTransaction.getPooled(r);a.perform(v,null,e,t,n,a,r,o),S.ReactReconcileTransaction.release(a)}function g(e,t){for(R.unmountComponent(e),t.nodeType===W&&(t=t.documentElement);t.lastChild;)t.removeChild(t.lastChild)}function y(e){var t=a(e);return t?t!==P.getReactRootIDFromNodeID(t):!1}function C(e){for(;e&&e.parentNode!==e;e=e.parentNode)if(1===e.nodeType){var t=u(e);if(t){var n,r=P.getReactRootIDFromNodeID(t),o=e;do if(n=u(o),o=o.parentNode,null==o)return null;while(n!==r);if(o===z[r])return e}}return null}var b=n(22),_=n(28),E=(n(4),n(40)),x=n(41),D=n(43),P=n(44),M=n(46),N=n(47),w=n(17),R=n(49),I=n(52),S=n(53),T=n(38),k=n(57),O=n(58),A=n(61),L=n(12),U=n(18),F=n(66),j=(n(69),n(24),b.ID_ATTRIBUTE_NAME),B={},V=1,W=9,K=11,H="__ReactMount_ownerDocument$"+Math.random().toString(36).slice(2),q={},z={},Y=[],G=null,X=function(){};X.prototype.isReactComponent={},X.prototype.render=function(){return this.props};var Q={TopLevelWrapper:X,_instancesByReactRootID:q,scrollMonitor:function(e,t){t()},_updateRootComponent:function(e,t,n,r){return Q.scrollMonitor(n,function(){I.enqueueElementInternal(e,t),r&&I.enqueueCallbackInternal(e,r)}),e},_registerComponent:function(e,t){!t||t.nodeType!==V&&t.nodeType!==W&&t.nodeType!==K?L(!1):void 0,_.ensureScrollValueMonitoring();var n=Q.registerContainer(t);return q[n]=e,n},_renderNewRootComponent:function(e,t,n,r){var o=A(e,null),a=Q._registerComponent(o,t);return S.batchedUpdates(m,o,a,t,n,r),o},renderSubtreeIntoContainer:function(e,t,n,r){return null==e||null==e._reactInternalInstance?L(!1):void 0,Q._renderSubtreeIntoContainer(e,t,n,r)},_renderSubtreeIntoContainer:function(e,t,n,r){x.isValidElement(t)?void 0:L(!1);var i=new x(X,null,null,null,null,null,t),s=q[a(n)];if(s){var l=s._currentElement,c=l.props;if(F(c,t)){var p=s._renderedComponent.getPublicInstance(),d=r&&function(){r.call(p)};return Q._updateRootComponent(s,i,n,d),p}Q.unmountComponentAtNode(n)}var f=o(n),h=f&&!!u(f),v=y(n),m=h&&!s&&!v,g=Q._renderNewRootComponent(i,n,m,null!=e?e._reactInternalInstance._processChildContext(e._reactInternalInstance._context):k)._renderedComponent.getPublicInstance();return r&&r.call(g),g},render:function(e,t,n){return Q._renderSubtreeIntoContainer(null,e,t,n)},registerContainer:function(e){var t=a(e);return t&&(t=P.getReactRootIDFromNodeID(t)),t||(t=P.createReactRootID()),z[t]=e,t},unmountComponentAtNode:function(e){!e||e.nodeType!==V&&e.nodeType!==W&&e.nodeType!==K?L(!1):void 0;var t=a(e),n=q[t];if(!n){var r=(y(e),u(e));r&&r===P.getReactRootIDFromNodeID(r);return!1}return S.batchedUpdates(g,n,e),delete q[t],delete z[t],!0},findReactContainerForID:function(e){var t=P.getReactRootIDFromNodeID(e),n=z[t];return n},findReactNodeByID:function(e){var t=Q.findReactContainerForID(e);return Q.findComponentRoot(t,e)},getFirstReactDOM:function(e){return C(e)},findComponentRoot:function(e,t){var n=Y,r=0,o=h(t)||e;for(n[0]=o.firstChild,n.length=1;r-1?void 0:i(!1),!l.plugins[n]){t.extractEvents?void 0:i(!1),l.plugins[n]=t;var r=t.eventTypes;for(var a in r)o(r[a],t,a)?void 0:i(!1)}}}function o(e,t,n){l.eventNameDispatchConfigs.hasOwnProperty(n)?i(!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];a(u,t,n)}return!0}return e.registrationName?(a(e.registrationName,t,n),!0):!1}function a(e,t,n){l.registrationNameModules[e]?i(!1):void 0,l.registrationNameModules[e]=t,l.registrationNameDependencies[e]=t.eventTypes[n].dependencies}var i=n(12),u=null,s={},l={plugins:[],eventNameDispatchConfigs:{},registrationNameModules:{},registrationNameDependencies:{},injectEventPluginOrder:function(e){u?i(!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]?i(!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 e===m.topMouseUp||e===m.topTouchEnd||e===m.topTouchCancel}function o(e){return e===m.topMouseMove||e===m.topTouchMove}function a(e){return e===m.topMouseDown||e===m.topTouchStart}function i(e,t,n,r){var o=e.type||"unknown-event";e.currentTarget=v.Mount.getNode(r),t?f.invokeGuardedCallbackWithCatch(o,n,e,r):f.invokeGuardedCallback(o,n,e,r),e.currentTarget=null}function u(e,t){var n=e._dispatchListeners,r=e._dispatchIDs;if(Array.isArray(n))for(var o=0;o1){for(var f=Array(d),h=0;d>h;h++)f[h]=arguments[h+2];a.children=f}if(e&&e.defaultProps){var v=e.defaultProps;for(o in v)"undefined"==typeof a[o]&&(a[o]=v[o])}return u(e,s,l,c,p,r.current,a)},u.createFactory=function(e){var t=u.createElement.bind(null,e);return t.type=e,t},u.cloneAndReplaceKey=function(e,t){var n=u(e.type,t,e.ref,e._self,e._source,e._owner,e.props);return n},u.cloneAndReplaceProps=function(e,t){var n=u(e.type,e.key,e.ref,e._self,e._source,e._owner,t);return n},u.cloneElement=function(e,t,n){var a,s=o({},e.props),l=e.key,c=e.ref,p=e._self,d=e._source,f=e._owner;if(null!=t){void 0!==t.ref&&(c=t.ref,f=r.current),void 0!==t.key&&(l=""+t.key);for(a in t)t.hasOwnProperty(a)&&!i.hasOwnProperty(a)&&(s[a]=t[a])}var h=arguments.length-2;if(1===h)s.children=n;else if(h>1){for(var v=Array(h),m=0;h>m;m++)v[m]=arguments[m+2];s.children=v}return u(e.type,l,c,p,d,f,s)},u.isValidElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===a},e.exports=u},function(e,t,n){"use strict";var r=!1;e.exports=r},function(e,t){"use strict";function n(e){return!!a[e]}function r(e){a[e]=!0}function o(e){delete a[e]}var a={},i={isNullComponentID:n,registerNullComponentID:r,deregisterNullComponentID:o};e.exports=i},function(e,t,n){"use strict";function r(e){return f+e.toString(36)}function o(e,t){return e.charAt(t)===f||t===e.length}function a(e){return""===e||e.charAt(0)===f&&e.charAt(e.length-1)!==f}function i(e,t){return 0===t.indexOf(e)&&o(t,e.length)}function u(e){return e?e.substr(0,e.lastIndexOf(f)):""}function s(e,t){if(a(e)&&a(t)?void 0:d(!1),i(e,t)?void 0:d(!1),e===t)return e;var n,r=e.length+h;for(n=r;n=i;i++)if(o(e,i)&&o(t,i))r=i;else if(e.charAt(i)!==t.charAt(i))break;var u=e.substr(0,r);return a(u)?void 0:d(!1),u}function c(e,t,n,r,o,a){e=e||"",t=t||"",e===t?d(!1):void 0;var l=i(t,e);l||i(e,t)?void 0:d(!1);for(var c=0,p=l?u:s,f=e;;f=p(f,t)){var h;if(o&&f===e||a&&f===t||(h=n(f,l,r)),h===!1||f===t)break;c++1){var t=e.indexOf(f,1);return t>-1?e.substr(0,t):e}return null},traverseEnterLeave:function(e,t,n,r,o){var a=l(e,t);a!==e&&c(e,a,n,r,!1,!0),a!==t&&c(a,t,n,o,!0,!1)},traverseTwoPhase:function(e,t,n){e&&(c("",e,t,n,!0,!1),c(e,"",t,n,!1,!0))},traverseTwoPhaseSkipTarget:function(e,t,n){e&&(c("",e,t,n,!0,!0),c(e,"",t,n,!0,!0))},traverseAncestors:function(e,t,n){c("",e,t,n,!0,!1)},getFirstCommonAncestorID:l,_getNextDescendantID:s,isAncestorIDOf:i,SEPARATOR:f};e.exports=m},function(e,t){"use strict";var n={injectCreateReactRootIndex:function(e){r.createReactRootIndex=e}},r={createReactRootIndex:null,injection:n};e.exports=r},function(e,t){"use strict";var n={remove:function(e){e._reactInternalInstance=void 0},get:function(e){return e._reactInternalInstance},has:function(e){return void 0!==e._reactInternalInstance},set:function(e,t){e._reactInternalInstance=t}};e.exports=n},function(e,t,n){"use strict";var r=n(48),o=/\/?>/,a={CHECKSUM_ATTR_NAME:"data-react-checksum",addChecksumToMarkup:function(e){var t=r(e);return 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){"use strict";function n(e){for(var t=1,n=0,o=0,a=e.length,i=-4&a;i>o;){for(;oo;o++)n+=t+=e.charCodeAt(o);return t%=r,n%=r,t|n<<16}var r=65521;e.exports=n},function(e,t,n){"use strict";function r(){o.attachRefs(this,this._currentElement)}var o=n(50),a={mountComponent:function(e,t,n,o){var a=e.mountComponent(t,n,o);return e._currentElement&&null!=e._currentElement.ref&&n.getReactMountReady().enqueue(r,e),a},unmountComponent:function(e){o.detachRefs(e,e._currentElement),e.unmountComponent()},receiveComponent:function(e,t,n,a){var i=e._currentElement;if(t!==i||a!==e._context){var u=o.shouldUpdateRefs(i,t);u&&o.detachRefs(e,i),e.receiveComponent(t,n,a),u&&e._currentElement&&null!=e._currentElement.ref&&n.getReactMountReady().enqueue(r,e)}},performUpdateIfNecessary:function(e,t){e.performUpdateIfNecessary(t)}};e.exports=a},function(e,t,n){"use strict";function r(e,t,n){"function"==typeof e?e(t.getPublicInstance()):a.addComponentAsRefTo(t,e,n)}function o(e,t,n){"function"==typeof e?e(null):a.removeComponentAsRefFrom(t,e,n)}var a=n(51),i={};i.attachRefs=function(e,t){if(null!==t&&t!==!1){var n=t.ref;null!=n&&r(n,e,t._owner)}},i.shouldUpdateRefs=function(e,t){var n=null===e||e===!1,r=null===t||t===!1;return n||r||t._owner!==e._owner||t.ref!==e.ref},i.detachRefs=function(e,t){if(null!==t&&t!==!1){var n=t.ref;null!=n&&o(n,e,t._owner)}},e.exports=i},function(e,t,n){"use strict";var r=n(12),o={isValidOwner:function(e){return!(!e||"function"!=typeof e.attachRef||"function"!=typeof e.detachRef)},addComponentAsRefTo:function(e,t,n){o.isValidOwner(n)?void 0:r(!1),n.attachRef(t,e)},removeComponentAsRefFrom:function(e,t,n){o.isValidOwner(n)?void 0:r(!1),n.getPublicInstance().refs[t]===e.getPublicInstance()&&n.detachRef(t)}};e.exports=o},function(e,t,n){"use strict";function r(e){u.enqueueUpdate(e)}function o(e,t){var n=i.get(e);return n?n:null}var a=(n(4),n(41)),i=n(46),u=n(53),s=n(38),l=n(12),c=(n(24),{isMounted:function(e){var t=i.get(e);return t?!!t._renderedComponent:!1},enqueueCallback:function(e,t){"function"!=typeof t?l(!1):void 0;var n=o(e);return n?(n._pendingCallbacks?n._pendingCallbacks.push(t):n._pendingCallbacks=[t],void r(n)):null},enqueueCallbackInternal:function(e,t){"function"!=typeof t?l(!1):void 0,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 a=n._pendingStateQueue||(n._pendingStateQueue=[]);a.push(t),r(n)}},enqueueSetProps:function(e,t){var n=o(e,"setProps");n&&c.enqueueSetPropsInternal(n,t)},enqueueSetPropsInternal:function(e,t){var n=e._topLevelWrapper;n?void 0:l(!1);var o=n._pendingElement||n._currentElement,i=o.props,u=s({},i.props,t);n._pendingElement=a.cloneAndReplaceProps(o,a.cloneAndReplaceProps(i,u)),r(n)},enqueueReplaceProps:function(e,t){var n=o(e,"replaceProps");n&&c.enqueueReplacePropsInternal(n,t)},enqueueReplacePropsInternal:function(e,t){var n=e._topLevelWrapper;n?void 0:l(!1);var o=n._pendingElement||n._currentElement,i=o.props;n._pendingElement=a.cloneAndReplaceProps(o,a.cloneAndReplaceProps(i,t)),r(n)},enqueueElementInternal:function(e,t){e._pendingElement=t,r(e)}});e.exports=c},function(e,t,n){"use strict";function r(){M.ReactReconcileTransaction&&b?void 0:m(!1)}function o(){this.reinitializeTransaction(),this.dirtyComponentsLength=null,this.callbackQueue=c.getPooled(),this.reconcileTransaction=M.ReactReconcileTransaction.getPooled(!1)}function a(e,t,n,o,a,i){r(),b.batchedUpdates(e,t,n,o,a,i)}function i(e,t){return e._mountOrder-t._mountOrder}function u(e){var t=e.dirtyComponentsLength;t!==g.length?m(!1):void 0,g.sort(i);for(var n=0;t>n;n++){var r=g[n],o=r._pendingCallbacks;if(r._pendingCallbacks=null,f.performUpdateIfNecessary(r,e.reconcileTransaction),o)for(var a=0;a8&&11>=x),M=32,N=String.fromCharCode(M),w=f.topLevelTypes,R={beforeInput:{phasedRegistrationNames:{bubbled:C({onBeforeInput:null}),captured:C({onBeforeInputCapture:null})},dependencies:[w.topCompositionEnd,w.topKeyPress,w.topTextInput,w.topPaste]},compositionEnd:{phasedRegistrationNames:{bubbled:C({onCompositionEnd:null}),captured:C({onCompositionEndCapture:null})},dependencies:[w.topBlur,w.topCompositionEnd,w.topKeyDown,w.topKeyPress,w.topKeyUp,w.topMouseDown]},compositionStart:{phasedRegistrationNames:{bubbled:C({onCompositionStart:null}),captured:C({onCompositionStartCapture:null})},dependencies:[w.topBlur,w.topCompositionStart,w.topKeyDown,w.topKeyPress,w.topKeyUp,w.topMouseDown]},compositionUpdate:{phasedRegistrationNames:{bubbled:C({onCompositionUpdate:null}),captured:C({onCompositionUpdateCapture:null})},dependencies:[w.topBlur,w.topCompositionUpdate,w.topKeyDown,w.topKeyPress,w.topKeyUp,w.topMouseDown]}},I=!1,S=null,T={eventTypes:R,extractEvents:function(e,t,n,r,o){return[l(e,t,n,r,o),d(e,t,n,r,o)]}};e.exports=T},function(e,t,n){"use strict";function r(e,t,n){var r=t.dispatchConfig.phasedRegistrationNames[n];return y(e,r)}function o(e,t,n){var o=t?g.bubbled:g.captured,a=r(e,n,o);a&&(n._dispatchListeners=v(n._dispatchListeners,a),n._dispatchIDs=v(n._dispatchIDs,e))}function a(e){e&&e.dispatchConfig.phasedRegistrationNames&&h.injection.getInstanceHandle().traverseTwoPhase(e.dispatchMarker,o,e)}function i(e){e&&e.dispatchConfig.phasedRegistrationNames&&h.injection.getInstanceHandle().traverseTwoPhaseSkipTarget(e.dispatchMarker,o,e)}function u(e,t,n){if(n&&n.dispatchConfig.registrationName){var r=n.dispatchConfig.registrationName,o=y(e,r);o&&(n._dispatchListeners=v(n._dispatchListeners,o),n._dispatchIDs=v(n._dispatchIDs,e))}}function s(e){e&&e.dispatchConfig.registrationName&&u(e.dispatchMarker,null,e)}function l(e){m(e,a)}function c(e){m(e,i)}function p(e,t,n,r){h.injection.getInstanceHandle().traverseEnterLeave(n,r,u,e,t)}function d(e){m(e,s)}var f=n(29),h=n(30),v=(n(24),n(34)),m=n(35),g=f.PropagationPhases,y=h.getListener,C={accumulateTwoPhaseDispatches:l,accumulateTwoPhaseDispatchesSkipTarget:c,accumulateDirectDispatches:d,accumulateEnterLeaveDispatches:p};e.exports=C},function(e,t,n){"use strict";function r(e){this._root=e,this._startText=this.getText(),this._fallbackText=null}var o=n(55),a=n(38),i=n(74);a(r.prototype,{destructor:function(){this._root=null,this._startText=null,this._fallbackText=null},getText:function(){return"value"in this._root?this._root.value:this._root[i()]},getData:function(){if(this._fallbackText)return this._fallbackText;var e,t,n=this._startText,r=n.length,o=this.getText(),a=o.length;for(e=0;r>e&&n[e]===o[e];e++);var i=r-e;for(t=1;i>=t&&n[r-t]===o[a-t];t++);var u=t>1?1-t:void 0;return this._fallbackText=o.slice(e,u),this._fallbackText}}),o.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";function r(){return!a&&o.canUseDOM&&(a="textContent"in document.documentElement?"textContent":"innerText"),a}var o=n(8),a=null;e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){o.call(this,e,t,n,r)}var o=n(76),a={data:null};o.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){this.dispatchConfig=e,this.dispatchMarker=t,this.nativeEvent=n,this.target=r,this.currentTarget=r;var o=this.constructor.Interface;for(var a in o)if(o.hasOwnProperty(a)){var u=o[a];u?this[a]=u(n):this[a]=n[a]}var s=null!=n.defaultPrevented?n.defaultPrevented:n.returnValue===!1;s?this.isDefaultPrevented=i.thatReturnsTrue:this.isDefaultPrevented=i.thatReturnsFalse,this.isPropagationStopped=i.thatReturnsFalse}var o=n(55),a=n(38),i=n(14),u=(n(24),{type:null,currentTarget:i.thatReturnsNull,eventPhase:null,bubbles:null,cancelable:null,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:null,isTrusted:null});a(r.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():e.returnValue=!1,this.isDefaultPrevented=i.thatReturnsTrue)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,this.isPropagationStopped=i.thatReturnsTrue)},persist:function(){this.isPersistent=i.thatReturnsTrue},isPersistent:i.thatReturnsFalse,destructor:function(){var e=this.constructor.Interface;for(var t in e)this[t]=null;this.dispatchConfig=null,this.dispatchMarker=null,this.nativeEvent=null}}),r.Interface=u,r.augmentClass=function(e,t){var n=this,r=Object.create(n.prototype);a(r,e.prototype),e.prototype=r,e.prototype.constructor=e,e.Interface=a({},n.Interface,t),e.augmentClass=n.augmentClass,o.addPoolingTo(e,o.fourArgumentPooler)},o.addPoolingTo(r,o.fourArgumentPooler),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){o.call(this,e,t,n,r)}var o=n(76),a={data:null};o.augmentClass(r,a),e.exports=r},function(e,t){"use strict";var n=function(e){var t;for(t in e)if(e.hasOwnProperty(t))return t;return null};e.exports=n},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=x.getPooled(R.change,S,e,D(e));b.accumulateTwoPhaseDispatches(t),E.batchedUpdates(a,t)}function a(e){C.enqueueEvents(e),C.processEventQueue(!1)}function i(e,t){I=e,S=t,I.attachEvent("onchange",o)}function u(){I&&(I.detachEvent("onchange",o),I=null,S=null)}function s(e,t,n){return e===w.topChange?n:void 0}function l(e,t,n){e===w.topFocus?(u(),i(t,n)):e===w.topBlur&&u()}function c(e,t){I=e,S=t,T=e.value,k=Object.getOwnPropertyDescriptor(e.constructor.prototype,"value"),Object.defineProperty(I,"value",L),I.attachEvent("onpropertychange",d)}function p(){I&&(delete I.value,I.detachEvent("onpropertychange",d),I=null,S=null,T=null,k=null)}function d(e){if("value"===e.propertyName){var t=e.srcElement.value;t!==T&&(T=t,o(e))}}function f(e,t,n){return e===w.topInput?n:void 0}function h(e,t,n){e===w.topFocus?(p(),c(t,n)):e===w.topBlur&&p()}function v(e,t,n){return e!==w.topSelectionChange&&e!==w.topKeyUp&&e!==w.topKeyDown||!I||I.value===T?void 0:(T=I.value,S)}function m(e){return e.nodeName&&"input"===e.nodeName.toLowerCase()&&("checkbox"===e.type||"radio"===e.type)}function g(e,t,n){return e===w.topClick?n:void 0}var y=n(29),C=n(30),b=n(72),_=n(8),E=n(53),x=n(76),D=n(80),P=n(39),M=n(81),N=n(78),w=y.topLevelTypes,R={change:{phasedRegistrationNames:{ 17 | bubbled:N({onChange:null}),captured:N({onChangeCapture:null})},dependencies:[w.topBlur,w.topChange,w.topClick,w.topFocus,w.topInput,w.topKeyDown,w.topKeyUp,w.topSelectionChange]}},I=null,S=null,T=null,k=null,O=!1;_.canUseDOM&&(O=P("change")&&(!("documentMode"in document)||document.documentMode>8));var A=!1;_.canUseDOM&&(A=P("input")&&(!("documentMode"in document)||document.documentMode>9));var L={get:function(){return k.get.call(this)},set:function(e){T=""+e,k.set.call(this,e)}},U={eventTypes:R,extractEvents:function(e,t,n,o,a){var i,u;if(r(t)?O?i=s:u=l:M(t)?A?i=f:(i=v,u=h):m(t)&&(i=g),i){var c=i(e,t,n);if(c){var p=x.getPooled(R.change,c,o,a);return p.type="change",b.accumulateTwoPhaseDispatches(p),p}}u&&u(e,t,n)}};e.exports=U},function(e,t){"use strict";function n(e){var t=e.target||e.srcElement||window;return 3===t.nodeType?t.parentNode:t}e.exports=n},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){"use strict";var n=0,r={createReactRootIndex:function(){return n++}};e.exports=r},function(e,t,n){"use strict";var r=n(78),o=[r({ResponderEventPlugin:null}),r({SimpleEventPlugin:null}),r({TapEventPlugin:null}),r({EnterLeaveEventPlugin:null}),r({ChangeEventPlugin:null}),r({SelectEventPlugin:null}),r({BeforeInputEventPlugin:null})];e.exports=o},function(e,t,n){"use strict";var r=n(29),o=n(72),a=n(85),i=n(27),u=n(78),s=r.topLevelTypes,l=i.getFirstReactDOM,c={mouseEnter:{registrationName:u({onMouseEnter:null}),dependencies:[s.topMouseOut,s.topMouseOver]},mouseLeave:{registrationName:u({onMouseLeave:null}),dependencies:[s.topMouseOut,s.topMouseOver]}},p=[null,null],d={eventTypes:c,extractEvents:function(e,t,n,r,u){if(e===s.topMouseOver&&(r.relatedTarget||r.fromElement))return null;if(e!==s.topMouseOut&&e!==s.topMouseOver)return null;var d;if(t.window===t)d=t;else{var f=t.ownerDocument;d=f?f.defaultView||f.parentWindow:window}var h,v,m="",g="";if(e===s.topMouseOut?(h=t,m=n,v=l(r.relatedTarget||r.toElement),v?g=i.getID(v):v=d,v=v||d):(h=d,v=t,g=n),h===v)return null;var y=a.getPooled(c.mouseLeave,m,r,u);y.type="mouseleave",y.target=h,y.relatedTarget=v;var C=a.getPooled(c.mouseEnter,g,r,u);return C.type="mouseenter",C.target=v,C.relatedTarget=h,o.accumulateEnterLeaveDispatches(y,C,m,g),p[0]=y,p[1]=C,p}};e.exports=d},function(e,t,n){"use strict";function r(e,t,n,r){o.call(this,e,t,n,r)}var o=n(86),a=n(37),i=n(87),u={screenX:null,screenY:null,clientX:null,clientY:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,getModifierState:i,button:function(e){var t=e.button;return"which"in e?t:2===t?2:4===t?1:0},buttons:null,relatedTarget:function(e){return e.relatedTarget||(e.fromElement===e.srcElement?e.toElement:e.fromElement)},pageX:function(e){return"pageX"in e?e.pageX:e.clientX+a.currentScrollLeft},pageY:function(e){return"pageY"in e?e.pageY:e.clientY+a.currentScrollTop}};o.augmentClass(r,u),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){o.call(this,e,t,n,r)}var o=n(76),a=n(80),i={view:function(e){if(e.view)return e.view;var t=a(e);if(null!=t&&t.window===t)return t;var n=t.ownerDocument;return n?n.defaultView||n.parentWindow:window},detail:function(e){return e.detail||0}};o.augmentClass(r,i),e.exports=r},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]:!1}function r(e){return n}var o={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};e.exports=r},function(e,t,n){"use strict";var r,o=n(22),a=n(8),i=o.injection.MUST_USE_ATTRIBUTE,u=o.injection.MUST_USE_PROPERTY,s=o.injection.HAS_BOOLEAN_VALUE,l=o.injection.HAS_SIDE_EFFECTS,c=o.injection.HAS_NUMERIC_VALUE,p=o.injection.HAS_POSITIVE_NUMERIC_VALUE,d=o.injection.HAS_OVERLOADED_BOOLEAN_VALUE;if(a.canUseDOM){var f=document.implementation;r=f&&f.hasFeature&&f.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")}var h={isCustomAttribute:RegExp.prototype.test.bind(/^(data|aria)-[a-z_][a-z\d_.\-]*$/),Properties:{accept:null,acceptCharset:null,accessKey:null,action:null,allowFullScreen:i|s,allowTransparency:i,alt:null,async:s,autoComplete:null,autoPlay:s,capture:i|s,cellPadding:null,cellSpacing:null,charSet:i,challenge:i,checked:u|s,classID:i,className:r?i:u,cols:i|p,colSpan:null,content:null,contentEditable:null,contextMenu:i,controls:u|s,coords:null,crossOrigin:null,data:null,dateTime:i,"default":s,defer:s,dir:null,disabled:i|s,download:d,draggable:null,encType:null,form:i,formAction:i,formEncType:i,formMethod:i,formNoValidate:s,formTarget:i,frameBorder:i,headers:null,height:i,hidden:i|s,high:null,href:null,hrefLang:null,htmlFor:null,httpEquiv:null,icon:null,id:u,inputMode:i,integrity:null,is:i,keyParams:i,keyType:i,kind:null,label:null,lang:null,list:i,loop:u|s,low:null,manifest:i,marginHeight:null,marginWidth:null,max:null,maxLength:i,media:i,mediaGroup:null,method:null,min:null,minLength:i,multiple:u|s,muted:u|s,name:null,nonce:i,noValidate:s,open:s,optimum:null,pattern:null,placeholder:null,poster:null,preload:null,radioGroup:null,readOnly:u|s,rel:null,required:s,reversed:s,role:i,rows:i|p,rowSpan:null,sandbox:null,scope:null,scoped:s,scrolling:null,seamless:i|s,selected:u|s,shape:null,size:i|p,sizes:i,span:p,spellCheck:null,src:null,srcDoc:u,srcLang:null,srcSet:i,start:c,step:null,style:null,summary:null,tabIndex:null,target:null,title:null,type:null,useMap:null,value:u|l,width:i,wmode:i,wrap:null,about:i,datatype:i,inlist:i,prefix:i,property:i,resource:i,"typeof":i,vocab:i,autoCapitalize:null,autoCorrect:null,autoSave:null,color:null,itemProp:i,itemScope:i|s,itemType:i,itemID:i,itemRef:i,results:null,security:i,unselectable:i},DOMAttributeNames:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},DOMPropertyNames:{autoCapitalize:"autocapitalize",autoComplete:"autocomplete",autoCorrect:"autocorrect",autoFocus:"autofocus",autoPlay:"autoplay",autoSave:"autosave",encType:"encoding",hrefLang:"hreflang",radioGroup:"radiogroup",spellCheck:"spellcheck",srcDoc:"srcdoc",srcSet:"srcset"}};e.exports=h},function(e,t,n){"use strict";var r=(n(46),n(90)),o=(n(24),"_getDOMNodeDidWarn"),a={getDOMNode:function(){return this.constructor[o]=!0,r(this)}};e.exports=a},function(e,t,n){"use strict";function r(e){return null==e?null:1===e.nodeType?e:o.has(e)?a.getNodeFromInstance(e):(null!=e.render&&"function"==typeof e.render?i(!1):void 0,void i(!1))}var o=(n(4),n(46)),a=n(27),i=n(12);n(24);e.exports=r},function(e,t,n){"use strict";function r(){this.reinitializeTransaction()}var o=n(53),a=n(56),i=n(38),u=n(14),s={initialize:u,close:function(){d.isBatchingUpdates=!1}},l={initialize:u,close:o.flushBatchedUpdates.bind(o)},c=[l,s];i(r.prototype,a.Mixin,{getTransactionWrappers:function(){return c}});var p=new r,d={isBatchingUpdates:!1,batchedUpdates:function(e,t,n,r,o,a){var i=d.isBatchingUpdates;d.isBatchingUpdates=!0,i?e(t,n,r,o,a):p.perform(e,null,t,n,r,o,a)}};e.exports=d},function(e,t,n){"use strict";function r(){return this}function o(){var e=this._reactInternalComponent;return!!e}function a(){}function i(e,t){var n=this._reactInternalComponent;n&&(T.enqueueSetPropsInternal(n,e),t&&T.enqueueCallbackInternal(n,t))}function u(e,t){var n=this._reactInternalComponent;n&&(T.enqueueReplacePropsInternal(n,e),t&&T.enqueueCallbackInternal(n,t))}function s(e,t){t&&(null!=t.dangerouslySetInnerHTML&&(null!=t.children?L(!1):void 0,"object"==typeof t.dangerouslySetInnerHTML&&z in t.dangerouslySetInnerHTML?void 0:L(!1)),null!=t.style&&"object"!=typeof t.style?L(!1):void 0)}function l(e,t,n,r){var o=R.findReactContainerForID(e);if(o){var a=o.nodeType===Y?o.ownerDocument:o;V(t,a)}r.getReactMountReady().enqueue(c,{id:e,registrationName:t,listener:n})}function c(){var e=this;E.putListener(e.id,e.registrationName,e.listener)}function p(){var e=this;e._rootNodeID?void 0:L(!1);var t=R.getNode(e._rootNodeID);switch(t?void 0:L(!1),e._tag){case"iframe":e._wrapperState.listeners=[E.trapBubbledEvent(_.topLevelTypes.topLoad,"load",t)];break;case"video":case"audio":e._wrapperState.listeners=[];for(var n in G)G.hasOwnProperty(n)&&e._wrapperState.listeners.push(E.trapBubbledEvent(_.topLevelTypes[n],G[n],t));break;case"img":e._wrapperState.listeners=[E.trapBubbledEvent(_.topLevelTypes.topError,"error",t),E.trapBubbledEvent(_.topLevelTypes.topLoad,"load",t)];break;case"form":e._wrapperState.listeners=[E.trapBubbledEvent(_.topLevelTypes.topReset,"reset",t),E.trapBubbledEvent(_.topLevelTypes.topSubmit,"submit",t)]}}function d(){P.mountReadyWrapper(this)}function f(){N.postUpdateWrapper(this)}function h(e){J.call(Z,e)||($.test(e)?void 0:L(!1),Z[e]=!0)}function v(e,t){return e.indexOf("-")>=0||null!=t.is}function m(e){h(e),this._tag=e.toLowerCase(),this._renderedChildren=null,this._previousStyle=null,this._previousStyleCopy=null,this._rootNodeID=null,this._wrapperState=null,this._topLevelWrapper=null,this._nodeWithLegacyProperties=null}var g=n(93),y=n(95),C=n(22),b=n(21),_=n(29),E=n(28),x=n(25),D=n(103),P=n(104),M=n(108),N=n(111),w=n(112),R=n(27),I=n(113),S=n(17),T=n(52),k=n(38),O=n(42),A=n(20),L=n(12),U=(n(39),n(78)),F=n(18),j=n(19),B=(n(116),n(69),n(24),E.deleteListener),V=E.listenTo,W=E.registrationNameModules,K={string:!0,number:!0},H=U({children:null}),q=U({style:null}),z=U({__html:null}),Y=1,G={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"},X={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},Q={listing:!0,pre:!0,textarea:!0},$=(k({menuitem:!0},X),/^[a-zA-Z][a-zA-Z:_\.\-\d]*$/),Z={},J={}.hasOwnProperty;m.displayName="ReactDOMComponent",m.Mixin={construct:function(e){this._currentElement=e},mountComponent:function(e,t,n){this._rootNodeID=e;var r=this._currentElement.props;switch(this._tag){case"iframe":case"img":case"form":case"video":case"audio":this._wrapperState={listeners:null},t.getReactMountReady().enqueue(p,this);break;case"button":r=D.getNativeProps(this,r,n);break;case"input":P.mountWrapper(this,r,n),r=P.getNativeProps(this,r,n);break;case"option":M.mountWrapper(this,r,n),r=M.getNativeProps(this,r,n);break;case"select":N.mountWrapper(this,r,n),r=N.getNativeProps(this,r,n),n=N.processChildContext(this,r,n);break;case"textarea":w.mountWrapper(this,r,n),r=w.getNativeProps(this,r,n)}s(this,r);var o;if(t.useCreateElement){var a=n[R.ownerDocumentContextKey],i=a.createElement(this._currentElement.type);b.setAttributeForID(i,this._rootNodeID),R.getID(i),this._updateDOMProperties({},r,t,i),this._createInitialChildren(t,r,n,i),o=i}else{var u=this._createOpenTagMarkupAndPutListeners(t,r),l=this._createContentMarkup(t,r,n);o=!l&&X[this._tag]?u+"/>":u+">"+l+""}switch(this._tag){case"input":t.getReactMountReady().enqueue(d,this);case"button":case"select":case"textarea":r.autoFocus&&t.getReactMountReady().enqueue(g.focusDOMComponent,this)}return o},_createOpenTagMarkupAndPutListeners:function(e,t){var n="<"+this._currentElement.type;for(var r in t)if(t.hasOwnProperty(r)){var o=t[r];if(null!=o)if(W.hasOwnProperty(r))o&&l(this._rootNodeID,r,o,e);else{r===q&&(o&&(o=this._previousStyleCopy=k({},t.style)),o=y.createMarkupForStyles(o));var a=null;null!=this._tag&&v(this._tag,t)?r!==H&&(a=b.createMarkupForCustomAttribute(r,o)):a=b.createMarkupForProperty(r,o),a&&(n+=" "+a)}}if(e.renderToStaticMarkup)return n;var i=b.createMarkupForID(this._rootNodeID);return n+" "+i},_createContentMarkup:function(e,t,n){var r="",o=t.dangerouslySetInnerHTML;if(null!=o)null!=o.__html&&(r=o.__html);else{var a=K[typeof t.children]?t.children:null,i=null!=a?null:t.children;if(null!=a)r=A(a);else if(null!=i){var u=this.mountChildren(i,e,n);r=u.join("")}}return Q[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&&F(r,o.__html);else{var a=K[typeof t.children]?t.children:null,i=null!=a?null:t.children;if(null!=a)j(r,a);else if(null!=i)for(var u=this.mountChildren(i,e,n),s=0;s>"}var y=n(41),C=n(65),b=n(14),_=n(107),E="<>",x={array:o("array"),bool:o("boolean"),func:o("function"),number:o("number"),object:o("object"),string:o("string"),any:a(),arrayOf:i,element:u(),instanceOf:s,node:d(),objectOf:c,oneOf:l,oneOfType:p,shape:f};e.exports=x},function(e,t){"use strict";function n(e){var t=e&&(r&&e[r]||e[o]);return"function"==typeof t?t:void 0}var r="function"==typeof Symbol&&Symbol.iterator,o="@@iterator";e.exports=n},function(e,t,n){"use strict";var r=n(109),o=n(111),a=n(38),i=(n(24),o.valueContextKey),u={mountWrapper:function(e,t,n){var r=n[i],o=null;if(null!=r)if(o=!1,Array.isArray(r)){for(var a=0;at.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),a="undefined"==typeof t.end?o:Math.min(t.end,r);if(!n.extend&&o>a){var i=a;a=o,o=i}var u=l(e,o),s=l(e,a);if(u&&s){var p=document.createRange();p.setStart(u.node,u.offset),n.removeAllRanges(),o>a?(n.addRange(p),n.extend(s.node,s.offset)):(p.setEnd(s.node,s.offset),n.addRange(p))}}}var s=n(8),l=n(127),c=n(74),p=s.canUseDOM&&"selection"in document&&!("getSelection"in window),d={getOffsets:p?o:a,setOffsets:p?i:u};e.exports=d},function(e,t){"use strict";function n(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function r(e){for(;e;){if(e.nextSibling)return e.nextSibling;e=e.parentNode}}function o(e,t){for(var o=n(e),a=0,i=0;o;){if(3===o.nodeType){if(i=a+o.textContent.length,t>=a&&i>=t)return{node:o,offset:t-a};a=i}o=n(r(o))}}e.exports=o},function(e,t){"use strict";function n(){if("undefined"==typeof document)return null;try{return document.activeElement||document.body}catch(e){return document.body}}e.exports=n},function(e,t,n){"use strict";function r(e){if("selectionStart"in e&&s.hasSelectionCapabilities(e))return{start:e.selectionStart,end:e.selectionEnd};if(window.getSelection){var t=window.getSelection();return{anchorNode:t.anchorNode,anchorOffset:t.anchorOffset,focusNode:t.focusNode,focusOffset:t.focusOffset}}if(document.selection){var n=document.selection.createRange();return{parentElement:n.parentElement(),text:n.text,top:n.boundingTop,left:n.boundingLeft}}}function o(e,t){if(b||null==g||g!==c())return null;var n=r(g);if(!C||!f(C,n)){C=n;var o=l.getPooled(m.select,y,e,t);return o.type="select",o.target=g,i.accumulateTwoPhaseDispatches(o),o}return null}var a=n(29),i=n(72),u=n(8),s=n(125),l=n(76),c=n(128),p=n(81),d=n(78),f=n(116),h=a.topLevelTypes,v=u.canUseDOM&&"documentMode"in document&&document.documentMode<=11,m={select:{phasedRegistrationNames:{bubbled:d({onSelect:null}),captured:d({onSelectCapture:null})},dependencies:[h.topBlur,h.topContextMenu,h.topFocus,h.topKeyDown,h.topMouseDown,h.topMouseUp,h.topSelectionChange]}},g=null,y=null,C=null,b=!1,_=!1,E=d({onSelect:null}),x={eventTypes:m,extractEvents:function(e,t,n,r,a){if(!_)return null;switch(e){case h.topFocus:(p(t)||"true"===t.contentEditable)&&(g=t,y=n,C=null);break;case h.topBlur:g=null,y=null,C=null;break;case h.topMouseDown:b=!0;break;case h.topContextMenu:case h.topMouseUp:return b=!1,o(r,a);case h.topSelectionChange:if(v)break;case h.topKeyDown:case h.topKeyUp:return o(r,a)}return null},didPutListener:function(e,t,n){t===E&&(_=!0)}};e.exports=x},function(e,t){"use strict";var n=Math.pow(2,53),r={createReactRootIndex:function(){return Math.ceil(Math.random()*n)}};e.exports=r},function(e,t,n){"use strict";var r=n(29),o=n(118),a=n(72),i=n(27),u=n(132),s=n(76),l=n(133),c=n(134),p=n(85),d=n(137),f=n(138),h=n(86),v=n(139),m=n(14),g=n(135),y=n(12),C=n(78),b=r.topLevelTypes,_={abort:{phasedRegistrationNames:{bubbled:C({onAbort:!0}),captured:C({onAbortCapture:!0})}},blur:{phasedRegistrationNames:{bubbled:C({onBlur:!0}),captured:C({onBlurCapture:!0})}},canPlay:{phasedRegistrationNames:{bubbled:C({onCanPlay:!0}),captured:C({onCanPlayCapture:!0})}},canPlayThrough:{phasedRegistrationNames:{bubbled:C({onCanPlayThrough:!0}),captured:C({onCanPlayThroughCapture:!0})}},click:{phasedRegistrationNames:{bubbled:C({onClick:!0}),captured:C({onClickCapture:!0})}},contextMenu:{phasedRegistrationNames:{bubbled:C({onContextMenu:!0}),captured:C({onContextMenuCapture:!0})}},copy:{phasedRegistrationNames:{bubbled:C({onCopy:!0}),captured:C({onCopyCapture:!0})}},cut:{phasedRegistrationNames:{bubbled:C({onCut:!0}),captured:C({onCutCapture:!0})}},doubleClick:{phasedRegistrationNames:{bubbled:C({onDoubleClick:!0}),captured:C({onDoubleClickCapture:!0})}},drag:{phasedRegistrationNames:{bubbled:C({onDrag:!0}),captured:C({onDragCapture:!0})}},dragEnd:{phasedRegistrationNames:{bubbled:C({onDragEnd:!0}),captured:C({onDragEndCapture:!0})}},dragEnter:{phasedRegistrationNames:{bubbled:C({onDragEnter:!0}),captured:C({onDragEnterCapture:!0})}},dragExit:{phasedRegistrationNames:{bubbled:C({onDragExit:!0}),captured:C({onDragExitCapture:!0})}},dragLeave:{phasedRegistrationNames:{bubbled:C({onDragLeave:!0}),captured:C({onDragLeaveCapture:!0})}},dragOver:{phasedRegistrationNames:{bubbled:C({onDragOver:!0}),captured:C({onDragOverCapture:!0})}},dragStart:{phasedRegistrationNames:{bubbled:C({onDragStart:!0}),captured:C({onDragStartCapture:!0})}},drop:{phasedRegistrationNames:{bubbled:C({onDrop:!0}),captured:C({onDropCapture:!0})}},durationChange:{phasedRegistrationNames:{bubbled:C({onDurationChange:!0}),captured:C({onDurationChangeCapture:!0})}},emptied:{phasedRegistrationNames:{bubbled:C({onEmptied:!0}),captured:C({onEmptiedCapture:!0})}},encrypted:{phasedRegistrationNames:{bubbled:C({onEncrypted:!0}),captured:C({onEncryptedCapture:!0})}},ended:{phasedRegistrationNames:{bubbled:C({onEnded:!0}),captured:C({onEndedCapture:!0})}},error:{phasedRegistrationNames:{bubbled:C({onError:!0}),captured:C({onErrorCapture:!0})}},focus:{phasedRegistrationNames:{bubbled:C({onFocus:!0}),captured:C({onFocusCapture:!0})}},input:{phasedRegistrationNames:{bubbled:C({onInput:!0}),captured:C({onInputCapture:!0})}},keyDown:{phasedRegistrationNames:{bubbled:C({onKeyDown:!0}),captured:C({onKeyDownCapture:!0})}},keyPress:{phasedRegistrationNames:{bubbled:C({onKeyPress:!0}),captured:C({onKeyPressCapture:!0})}},keyUp:{phasedRegistrationNames:{bubbled:C({onKeyUp:!0}),captured:C({onKeyUpCapture:!0})}},load:{phasedRegistrationNames:{bubbled:C({onLoad:!0}),captured:C({onLoadCapture:!0})}},loadedData:{phasedRegistrationNames:{bubbled:C({onLoadedData:!0}),captured:C({onLoadedDataCapture:!0})}},loadedMetadata:{phasedRegistrationNames:{bubbled:C({onLoadedMetadata:!0}),captured:C({onLoadedMetadataCapture:!0})}},loadStart:{phasedRegistrationNames:{bubbled:C({onLoadStart:!0}),captured:C({onLoadStartCapture:!0})}},mouseDown:{phasedRegistrationNames:{bubbled:C({onMouseDown:!0}),captured:C({onMouseDownCapture:!0})}},mouseMove:{phasedRegistrationNames:{bubbled:C({onMouseMove:!0}),captured:C({onMouseMoveCapture:!0})}},mouseOut:{phasedRegistrationNames:{bubbled:C({onMouseOut:!0}),captured:C({onMouseOutCapture:!0})}},mouseOver:{phasedRegistrationNames:{bubbled:C({onMouseOver:!0}),captured:C({onMouseOverCapture:!0})}},mouseUp:{phasedRegistrationNames:{bubbled:C({onMouseUp:!0}),captured:C({onMouseUpCapture:!0})}},paste:{phasedRegistrationNames:{bubbled:C({onPaste:!0}),captured:C({onPasteCapture:!0})}},pause:{phasedRegistrationNames:{bubbled:C({onPause:!0}),captured:C({onPauseCapture:!0})}},play:{phasedRegistrationNames:{bubbled:C({onPlay:!0}),captured:C({onPlayCapture:!0})}},playing:{phasedRegistrationNames:{bubbled:C({onPlaying:!0}),captured:C({onPlayingCapture:!0})}},progress:{phasedRegistrationNames:{bubbled:C({onProgress:!0}),captured:C({onProgressCapture:!0})}},rateChange:{phasedRegistrationNames:{bubbled:C({onRateChange:!0}),captured:C({onRateChangeCapture:!0})}},reset:{phasedRegistrationNames:{bubbled:C({onReset:!0}),captured:C({onResetCapture:!0})}},scroll:{phasedRegistrationNames:{bubbled:C({onScroll:!0}),captured:C({onScrollCapture:!0})}},seeked:{phasedRegistrationNames:{bubbled:C({onSeeked:!0}),captured:C({onSeekedCapture:!0})}},seeking:{phasedRegistrationNames:{bubbled:C({onSeeking:!0}),captured:C({onSeekingCapture:!0})}},stalled:{phasedRegistrationNames:{bubbled:C({onStalled:!0}),captured:C({onStalledCapture:!0})}},submit:{phasedRegistrationNames:{bubbled:C({onSubmit:!0}),captured:C({onSubmitCapture:!0})}},suspend:{phasedRegistrationNames:{bubbled:C({onSuspend:!0}),captured:C({onSuspendCapture:!0})}},timeUpdate:{phasedRegistrationNames:{bubbled:C({onTimeUpdate:!0}),captured:C({onTimeUpdateCapture:!0})}},touchCancel:{phasedRegistrationNames:{bubbled:C({onTouchCancel:!0}),captured:C({onTouchCancelCapture:!0})}},touchEnd:{phasedRegistrationNames:{bubbled:C({onTouchEnd:!0}),captured:C({onTouchEndCapture:!0})}},touchMove:{phasedRegistrationNames:{bubbled:C({onTouchMove:!0}),captured:C({onTouchMoveCapture:!0})}},touchStart:{phasedRegistrationNames:{bubbled:C({onTouchStart:!0}),captured:C({onTouchStartCapture:!0})}},volumeChange:{phasedRegistrationNames:{bubbled:C({onVolumeChange:!0}),captured:C({onVolumeChangeCapture:!0})}},waiting:{phasedRegistrationNames:{bubbled:C({onWaiting:!0}),captured:C({onWaitingCapture:!0})}},wheel:{phasedRegistrationNames:{bubbled:C({onWheel:!0}),captured:C({onWheelCapture:!0})}}},E={topAbort:_.abort,topBlur:_.blur,topCanPlay:_.canPlay,topCanPlayThrough:_.canPlayThrough,topClick:_.click,topContextMenu:_.contextMenu,topCopy:_.copy,topCut:_.cut,topDoubleClick:_.doubleClick,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,topLoad:_.load,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,topReset:_.reset,topScroll:_.scroll,topSeeked:_.seeked,topSeeking:_.seeking,topStalled:_.stalled,topSubmit:_.submit,topSuspend:_.suspend,topTimeUpdate:_.timeUpdate,topTouchCancel:_.touchCancel,topTouchEnd:_.touchEnd,topTouchMove:_.touchMove,topTouchStart:_.touchStart,topVolumeChange:_.volumeChange,topWaiting:_.waiting,topWheel:_.wheel};for(var x in E)E[x].dependencies=[x];var D=C({onClick:null}),P={},M={eventTypes:_,extractEvents:function(e,t,n,r,o){var i=E[e];if(!i)return null;var m;switch(e){case b.topAbort:case b.topCanPlay:case b.topCanPlayThrough:case b.topDurationChange:case b.topEmptied:case b.topEncrypted:case b.topEnded:case b.topError:case b.topInput:case b.topLoad:case b.topLoadedData:case b.topLoadedMetadata:case b.topLoadStart:case b.topPause:case b.topPlay:case b.topPlaying:case b.topProgress:case b.topRateChange:case b.topReset:case b.topSeeked:case b.topSeeking:case b.topStalled:case b.topSubmit:case b.topSuspend:case b.topTimeUpdate:case b.topVolumeChange:case b.topWaiting:m=s;break;case b.topKeyPress:if(0===g(r))return null;case b.topKeyDown:case b.topKeyUp:m=c;break;case b.topBlur:case b.topFocus:m=l;break;case b.topClick:if(2===r.button)return null;case b.topContextMenu:case b.topDoubleClick:case b.topMouseDown:case b.topMouseMove:case b.topMouseOut:case b.topMouseOver:case b.topMouseUp:m=p;break;case b.topDrag:case b.topDragEnd:case b.topDragEnter:case b.topDragExit:case b.topDragLeave:case b.topDragOver:case b.topDragStart:case b.topDrop:m=d;break;case b.topTouchCancel:case b.topTouchEnd:case b.topTouchMove:case b.topTouchStart:m=f;break;case b.topScroll:m=h;break;case b.topWheel:m=v;break;case b.topCopy:case b.topCut:case b.topPaste:m=u}m?void 0:y(!1);var C=m.getPooled(i,n,r,o);return a.accumulateTwoPhaseDispatches(C),C},didPutListener:function(e,t,n){if(t===D){var r=i.getNode(e);P[e]||(P[e]=o.listen(r,"click",m))}},willDeleteListener:function(e,t){t===D&&(P[e].remove(),delete P[e])}};e.exports=M},function(e,t,n){"use strict";function r(e,t,n,r){o.call(this,e,t,n,r)}var o=n(76),a={clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}};o.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){o.call(this,e,t,n,r)}var o=n(86),a={relatedTarget:null};o.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){o.call(this,e,t,n,r)}var o=n(86),a=n(135),i=n(136),u=n(87),s={key:i,location:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,repeat:null,locale:null,getModifierState:u,charCode:function(e){return"keypress"===e.type?a(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?a(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}};o.augmentClass(r,s),e.exports=r},function(e,t){"use strict";function n(e){var t,n=e.keyCode;return"charCode"in e?(t=e.charCode,0===t&&13===n&&(t=13)):t=n,t>=32||13===t?t:0}e.exports=n},function(e,t,n){"use strict";function r(e){if(e.key){var t=a[e.key]||e.key;if("Unidentified"!==t)return t}if("keypress"===e.type){var n=o(e);return 13===n?"Enter":String.fromCharCode(n)}return"keydown"===e.type||"keyup"===e.type?i[e.keyCode]||"Unidentified":""}var o=n(135),a={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},i={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"};e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){o.call(this,e,t,n,r)}var o=n(85),a={dataTransfer:null};o.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){o.call(this,e,t,n,r)}var o=n(86),a=n(87),i={touches:null,targetTouches:null,changedTouches:null,altKey:null,metaKey:null,ctrlKey:null,shiftKey:null,getModifierState:a};o.augmentClass(r,i),e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r){o.call(this,e,t,n,r)}var o=n(85),a={deltaX:function(e){return"deltaX"in e?e.deltaX:"wheelDeltaX"in e?-e.wheelDeltaX:0},deltaY:function(e){return"deltaY"in e?e.deltaY:"wheelDeltaY"in e?-e.wheelDeltaY:"wheelDelta"in e?-e.wheelDelta:0},deltaZ:null,deltaMode:null};o.augmentClass(r,a),e.exports=r},function(e,t,n){"use strict";var r=n(22),o=r.injection.MUST_USE_ATTRIBUTE,a={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace"},i={Properties:{clipPath:o,cx:o,cy:o,d:o,dx:o,dy:o,fill:o,fillOpacity:o,fontFamily:o,fontSize:o,fx:o,fy:o,gradientTransform:o,gradientUnits:o,markerEnd:o,markerMid:o,markerStart:o,offset:o,opacity:o,patternContentUnits:o,patternUnits:o,points:o,preserveAspectRatio:o,r:o,rx:o,ry:o,spreadMethod:o,stopColor:o,stopOpacity:o,stroke:o,strokeDasharray:o,strokeLinecap:o,strokeOpacity:o,strokeWidth:o,textAnchor:o,transform:o,version:o,viewBox:o,x1:o,x2:o,x:o,xlinkActuate:o,xlinkArcrole:o,xlinkHref:o,xlinkRole:o,xlinkShow:o,xlinkTitle:o,xlinkType:o,xmlBase:o,xmlLang:o,xmlSpace:o,y1:o,y2:o,y:o},DOMAttributeNamespaces:{xlinkActuate:a.xlink,xlinkArcrole:a.xlink,xlinkHref:a.xlink,xlinkRole:a.xlink,xlinkShow:a.xlink,xlinkTitle:a.xlink,xlinkType:a.xlink,xmlBase:a.xml,xmlLang:a.xml,xmlSpace:a.xml},DOMAttributeNames:{clipPath:"clip-path",fillOpacity:"fill-opacity",fontFamily:"font-family",fontSize:"font-size",gradientTransform:"gradientTransform",gradientUnits:"gradientUnits",markerEnd:"marker-end",markerMid:"marker-mid",markerStart:"marker-start",patternContentUnits:"patternContentUnits",patternUnits:"patternUnits",preserveAspectRatio:"preserveAspectRatio",spreadMethod:"spreadMethod",stopColor:"stop-color",stopOpacity:"stop-opacity",strokeDasharray:"stroke-dasharray",strokeLinecap:"stroke-linecap",strokeOpacity:"stroke-opacity",strokeWidth:"stroke-width",textAnchor:"text-anchor",viewBox:"viewBox",xlinkActuate:"xlink:actuate",xlinkArcrole:"xlink:arcrole",xlinkHref:"xlink:href",xlinkRole:"xlink:role",xlinkShow:"xlink:show",xlinkTitle:"xlink:title",xlinkType:"xlink:type",xmlBase:"xml:base",xmlLang:"xml:lang",xmlSpace:"xml:space"}};e.exports=i},function(e,t){"use strict";e.exports="0.14.3"},function(e,t,n){"use strict";var r=n(27);e.exports=r.renderSubtreeIntoContainer},function(e,t,n){"use strict";var r=n(70),o=n(144),a=n(141);r.inject();var i={renderToString:o.renderToString,renderToStaticMarkup:o.renderToStaticMarkup,version:a};e.exports=i},function(e,t,n){"use strict";function r(e){i.isValidElement(e)?void 0:h(!1);var t;try{p.injection.injectBatchingStrategy(l);var n=u.createReactRootID();return t=c.getPooled(!1),t.perform(function(){var r=f(e,null),o=r.mountComponent(n,t,d);return s.addChecksumToMarkup(o)},null)}finally{c.release(t),p.injection.injectBatchingStrategy(a)}}function o(e){i.isValidElement(e)?void 0:h(!1);var t;try{p.injection.injectBatchingStrategy(l);var n=u.createReactRootID();return t=c.getPooled(!0),t.perform(function(){var r=f(e,null);return r.mountComponent(n,t,d)},null)}finally{c.release(t),p.injection.injectBatchingStrategy(a)}}var a=n(91),i=n(41),u=n(44),s=n(47),l=n(145),c=n(146),p=n(53),d=n(57),f=n(61),h=n(12);e.exports={renderToString:r,renderToStaticMarkup:o}},function(e,t){"use strict";var n={isBatchingUpdates:!1,batchedUpdates:function(e){}};e.exports=n},function(e,t,n){"use strict";function r(e){this.reinitializeTransaction(),this.renderToStaticMarkup=e,this.reactMountReady=a.getPooled(null),this.useCreateElement=!1}var o=n(55),a=n(54),i=n(56),u=n(38),s=n(14),l={initialize:function(){this.reactMountReady.reset()},close:s},c=[l],p={getTransactionWrappers:function(){return c},getReactMountReady:function(){return this.reactMountReady},destructor:function(){a.release(this.reactMountReady),this.reactMountReady=null}};u(r.prototype,i.Mixin,p),o.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";var r=n(109),o=n(122),a=n(121),i=n(148),u=n(41),s=(n(149),n(106)),l=n(141),c=n(38),p=n(151),d=u.createElement,f=u.createFactory,h=u.cloneElement,v={Children:{map:r.map,forEach:r.forEach,count:r.count,toArray:r.toArray,only:p},Component:o,createElement:d,cloneElement:h,isValidElement:u.isValidElement, 19 | PropTypes:s,createClass:a.createClass,createFactory:f,createMixin:function(e){return e},DOM:i,version:l,__spread:c};e.exports=v},function(e,t,n){"use strict";function r(e){return o.createFactory(e)}var o=n(41),a=(n(149),n(150)),i=a({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=i},function(e,t,n){"use strict";function r(){if(p.current){var e=p.current.getName();if(e)return" Check the render method of `"+e+"`."}return""}function o(e,t){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;a("uniqueKey",e,t)}}function a(e,t,n){var o=r();if(!o){var a="string"==typeof n?n:n.displayName||n.name;a&&(o=" Check the top-level render call using <"+a+">.")}var i=h[e]||(h[e]={});if(i[o])return null;i[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 i(e,t){if("object"==typeof e)if(Array.isArray(e))for(var n=0;n 2 | 3 | 4 | 7 | 8 | 9 | Demo 10 | 11 | 12 | 37 | 38 | 39 | 42 |
43 | 44 | 45 | 46 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /demo/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | /*globals __dirname:false */ 2 | "use strict"; 3 | 4 | var webpack = require("webpack"); 5 | 6 | module.exports = { 7 | 8 | devServer: { 9 | contentBase: __dirname, 10 | noInfo: false 11 | }, 12 | 13 | output: { 14 | path: __dirname, 15 | filename: "main.js", 16 | publicPath: "/assets/" 17 | }, 18 | 19 | cache: true, 20 | devtool: "source-map", 21 | entry: { 22 | app: ["./demo/app.jsx"] 23 | }, 24 | stats: { 25 | colors: true, 26 | reasons: true 27 | }, 28 | resolve: { 29 | extensions: ["", ".js", ".jsx"] 30 | }, 31 | module: { 32 | loaders: [ 33 | { 34 | test: /\.jsx?$/, 35 | exclude: [/node_modules/], 36 | loader: "babel" 37 | }, { 38 | test: /\.css$/, 39 | loader: "style!css" 40 | }, { 41 | test: /\.(png|jpg)$/, 42 | loader: "url?limit=8192" 43 | } 44 | ] 45 | }, 46 | plugins: [ 47 | new webpack.NoErrorsPlugin() 48 | ] 49 | }; 50 | -------------------------------------------------------------------------------- /demo/webpack.config.hot.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _ = require("lodash"); 4 | var base = require("./webpack.config.dev"); 5 | 6 | // Update our own module version. 7 | var mod = _.cloneDeep(base.module); 8 | // First loader needs react hot. 9 | mod.loaders[0].loaders = ["react-hot"].concat(mod.loaders[0].loaders); 10 | 11 | module.exports = _.merge({}, _.omit(base, "entry", "module"), { 12 | entry: { 13 | app: ["webpack/hot/dev-server", "./demo/app.jsx"] 14 | }, 15 | 16 | module: mod 17 | }); 18 | -------------------------------------------------------------------------------- /dist/react-rpg.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(require("react")); 4 | else if(typeof define === 'function' && define.amd) 5 | define(["react"], factory); 6 | else if(typeof exports === 'object') 7 | exports["ReactRpg"] = factory(require("react")); 8 | else 9 | root["ReactRpg"] = factory(root["React"]); 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_2__) { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ exports: {}, 25 | /******/ id: moduleId, 26 | /******/ loaded: false 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.loaded = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // __webpack_public_path__ 47 | /******/ __webpack_require__.p = ""; 48 | /******/ 49 | /******/ // Load entry module and return exports 50 | /******/ return __webpack_require__(0); 51 | /******/ }) 52 | /************************************************************************/ 53 | /******/ ([ 54 | /* 0 */ 55 | /***/ function(module, exports, __webpack_require__) { 56 | 57 | 'use strict'; 58 | 59 | module.exports = { 60 | ReactRpg: __webpack_require__(1) 61 | }; 62 | 63 | /***/ }, 64 | /* 1 */ 65 | /***/ function(module, exports, __webpack_require__) { 66 | 67 | 'use strict'; 68 | 69 | Object.defineProperty(exports, '__esModule', { 70 | value: true 71 | }); 72 | 73 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 74 | 75 | var _react = __webpack_require__(2); 76 | 77 | var _react2 = _interopRequireDefault(_react); 78 | 79 | var _reactRpgPhoto = __webpack_require__(3); 80 | 81 | var _reactRpgPhoto2 = _interopRequireDefault(_reactRpgPhoto); 82 | 83 | var ReactRpg = function ReactRpg(_ref) { 84 | var imagesArray = _ref.imagesArray; 85 | var _ref$padding = _ref.padding; 86 | var padding = _ref$padding === undefined ? 0 : _ref$padding; 87 | var _ref$columns = _ref.columns; 88 | var columns = _ref$columns === undefined ? [1, 2, 3] : _ref$columns; 89 | 90 | var imageNodes = imagesArray.map(function (arr, index) { 91 | return _react2['default'].createElement(_reactRpgPhoto2['default'], { key: index, url: arr.url, columns: columns, padding: padding, clickHandler: arr.clickHandler }); 92 | }); 93 | 94 | var cssBreakpoints = '\n .imageGridItem { width: ' + Math.floor(100 / columns[0]) + '%; }\n\n @media only screen and (min-width : 480px) {\n .imageGridItem { width: ' + Math.floor(100 / columns[1]) + '%; }\n }\n @media only screen and (min-width : 992px) {\n .imageGridItem { width: ' + Math.floor(100 / columns[2]) + '%; }\n }\n '; 95 | 96 | return _react2['default'].createElement( 97 | 'div', 98 | { className: 'imageGrid' }, 99 | _react2['default'].createElement('style', { dangerouslySetInnerHTML: { __html: cssBreakpoints } }), 100 | imageNodes 101 | ); 102 | }; 103 | 104 | ReactRpg.propTypes = { 105 | imagesArray: _react2['default'].PropTypes.array.isRequired, 106 | columns: _react2['default'].PropTypes.array, 107 | padding: _react2['default'].PropTypes.number 108 | }; 109 | 110 | ReactRpg.defaultProps = { 111 | imagesArray: [], 112 | columns: [1, 2, 3], 113 | padding: 0 114 | }; 115 | 116 | exports['default'] = ReactRpg; 117 | module.exports = exports['default']; 118 | 119 | /***/ }, 120 | /* 2 */ 121 | /***/ function(module, exports) { 122 | 123 | module.exports = __WEBPACK_EXTERNAL_MODULE_2__; 124 | 125 | /***/ }, 126 | /* 3 */ 127 | /***/ function(module, exports, __webpack_require__) { 128 | 129 | 'use strict'; 130 | 131 | Object.defineProperty(exports, '__esModule', { 132 | value: true 133 | }); 134 | 135 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 136 | 137 | var _react = __webpack_require__(2); 138 | 139 | var _react2 = _interopRequireDefault(_react); 140 | 141 | var ReactRpgPhoto = function ReactRpgPhoto(_ref) { 142 | var url = _ref.url; 143 | var padding = _ref.padding; 144 | var _ref$clickHandler = _ref.clickHandler; 145 | var clickHandler = _ref$clickHandler === undefined ? null : _ref$clickHandler; 146 | 147 | var pointer = clickHandler ? 'pointer' : 'auto'; 148 | 149 | var styles = { 150 | imageGridItem: { 151 | display: 'inline-block', 152 | boxSizing: 'border-box', 153 | float: 'left', 154 | padding: padding 155 | }, 156 | imageWrapper: { 157 | position: 'relative', 158 | width: '100%', 159 | paddingBottom: '100%', 160 | backgroundImage: 'url(' + url + ')', 161 | backgroundSize: 'cover', 162 | backgroundPosition: 'center center', 163 | backgroundRepeat: 'no-repeat', 164 | cursor: pointer 165 | } 166 | }; 167 | 168 | return _react2['default'].createElement( 169 | 'div', 170 | { className: 'imageGridItem', style: styles.imageGridItem }, 171 | _react2['default'].createElement( 172 | 'a', 173 | { onClick: clickHandler ? clickHandler.bind(undefined, url) : null }, 174 | _react2['default'].createElement('div', { className: 'imageWrapper', style: styles.imageWrapper }) 175 | ) 176 | ); 177 | }; 178 | 179 | ReactRpgPhoto.propTypes = { 180 | url: _react2['default'].PropTypes.string.isRequired, 181 | padding: _react2['default'].PropTypes.number, 182 | clickHandler: _react2['default'].PropTypes.func 183 | }; 184 | 185 | exports['default'] = ReactRpgPhoto; 186 | module.exports = exports['default']; 187 | 188 | /***/ } 189 | /******/ ]) 190 | }); 191 | ; 192 | //# sourceMappingURL=react-rpg.js.map -------------------------------------------------------------------------------- /dist/react-rpg.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap f83efab38ceb98a32ff4","webpack:///./src/index.js","webpack:///./src/components/react-rpg.jsx","webpack:///external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}","webpack:///./src/components/react-rpg-photo.jsx"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;ACVA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;;;ACtCA,OAAM,CAAC,OAAO,GAAG;AACf,WAAQ,EAAE,mBAAO,CAAC,CAAwB,CAAC;EAC5C,C;;;;;;;;;;;;;;kCCFiB,CAAO;;;;0CACC,CAAmB;;;;AAE7C,KAAM,QAAQ,GAAG,SAAX,QAAQ,CAAI,IAAiD,EAAK;OAApD,WAAW,GAAb,IAAiD,CAA/C,WAAW;sBAAb,IAAiD,CAAlC,OAAO;OAAP,OAAO,gCAAG,CAAC;sBAA1B,IAAiD,CAArB,OAAO;OAAP,OAAO,gCAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;;AAC/D,OAAM,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,KAAK,EAAK;AACjD,YACE,+DAAe,GAAG,EAAE,KAAM,EAAC,GAAG,EAAE,GAAG,CAAC,GAAI,EAAC,OAAO,EAAE,OAAQ,EAAC,OAAO,EAAE,OAAQ,EAAC,YAAY,EAAE,GAAG,CAAC,YAAa,GAAG,CAC/G;IACH,CAAC,CAAC;;AAEH,OAAM,cAAc,sCACQ,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,gGAG1B,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,qGAG5B,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,oBAEzD,CAAC;;AAEF,UACE;;OAAK,SAAS,EAAC,WAAW;KACxB,4CAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,cAAc,EAAG,GAAG;KAC7D,UAAU;IACP,CACN;EACH,CAAC;;AAEF,SAAQ,CAAC,SAAS,GAAG;AACnB,cAAW,EAAE,mBAAM,SAAS,CAAC,KAAK,CAAC,UAAU;AAC7C,UAAO,EAAE,mBAAM,SAAS,CAAC,KAAK;AAC9B,UAAO,EAAE,mBAAM,SAAS,CAAC,MAAM;EAChC,CAAC;;AAEF,SAAQ,CAAC,YAAY,GAAG;AACtB,cAAW,EAAE,EAAE;AACf,UAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClB,UAAO,EAAE,CAAC;EACX,CAAC;;sBAEa,QAAQ;;;;;;;ACzCvB,gD;;;;;;;;;;;;;;kCCAkB,CAAO;;;;AAEzB,KAAM,aAAa,GAAG,SAAhB,aAAa,CAAI,IAAqC,EAAK;OAAxC,GAAG,GAAL,IAAqC,CAAnC,GAAG;OAAE,OAAO,GAAd,IAAqC,CAA9B,OAAO;2BAAd,IAAqC,CAArB,YAAY;OAAZ,YAAY,qCAAG,IAAI;;AACxD,OAAM,OAAO,GAAG,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC;;AAElD,OAAM,MAAM,GAAG;AACb,kBAAa,EAAE;AACb,cAAO,EAAE,cAAc;AACvB,gBAAS,EAAE,YAAY;AACvB,YAAK,EAAE,MAAM;AACb,cAAO,EAAP,OAAO;MACR;AACD,iBAAY,EAAE;AACZ,eAAQ,EAAE,UAAU;AACpB,YAAK,EAAE,MAAM;AACb,oBAAa,EAAE,MAAM;AACrB,sBAAe,WAAS,GAAG,MAAG;AAC9B,qBAAc,EAAE,OAAO;AACvB,yBAAkB,EAAE,eAAe;AACnC,uBAAgB,EAAE,WAAW;AAC7B,aAAM,EAAE,OAAO;MAChB;IACF,CAAC;;AAEF,UACE;;OAAK,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,MAAM,CAAC,aAAc;KACzD;;SAAG,OAAO,EAAG,YAAY,GAAG,YAAY,CAAC,IAAI,YAAO,GAAG,CAAC,GAAG,IAAM;OAC/D,0CAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,MAAM,CAAC,YAAa,GAAO;MAC9D;IACA,CACN;EACH,CAAC;;AAEF,cAAa,CAAC,SAAS,GAAG;AACxB,MAAG,EAAE,mBAAM,SAAS,CAAC,MAAM,CAAC,UAAU;AACtC,UAAO,EAAE,mBAAM,SAAS,CAAC,MAAM;AAC/B,eAAY,EAAE,mBAAM,SAAS,CAAC,IAAI;EACnC,CAAC;;sBAEa,aAAa","file":"react-rpg.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactRpg\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"ReactRpg\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap f83efab38ceb98a32ff4\n **/","module.exports = {\n ReactRpg: require('./components/react-rpg'),\n};\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/index.js\n **/","import React from 'react';\nimport ReactRpgPhoto from './react-rpg-photo';\n\nconst ReactRpg = ({ imagesArray, padding = 0, columns = [1, 2, 3] }) => {\n const imageNodes = imagesArray.map((arr, index) => {\n return (\n \n );\n });\n\n const cssBreakpoints = `\n .imageGridItem { width: ${Math.floor(100 / columns[0])}%; }\n\n @media only screen and (min-width : 480px) {\n .imageGridItem { width: ${Math.floor(100 / columns[1])}%; }\n }\n @media only screen and (min-width : 992px) {\n .imageGridItem { width: ${Math.floor(100 / columns[2])}%; }\n }\n `;\n\n return (\n
\n 32 | 33 |
APPLICATION CONTENT
34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /karma.conf.coverage.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* 3 | * Karma Configuration: "coverage" version. 4 | * 5 | * This configuration is the same as basic one-shot version, just with coverage. 6 | */ 7 | var webpackCovCfg = require("./webpack.config.coverage"); 8 | 9 | module.exports = function (config) { 10 | /* eslint-disable global-require */ 11 | require("./karma.conf")(config); 12 | config.set({ 13 | reporters: ["spec", "coverage"], 14 | webpack: webpackCovCfg, 15 | coverageReporter: { 16 | reporters: [ 17 | { type: "json", file: "coverage.json" }, 18 | { type: "lcov" }, 19 | { type: "text-summary" } 20 | ], 21 | dir: "coverage/client" 22 | } 23 | }); 24 | }; 25 | -------------------------------------------------------------------------------- /karma.conf.dev.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* 3 | * Karma Configuration: "dev" version. 4 | * 5 | * This configuration relies on a `webpack-dev-server` already running and 6 | * bundling `webpack.config.test.js` on port 3001. If this is not running, 7 | * then the alternate `karma.conf.js` file will _also_ run the webpack dev 8 | * server during the test run. 9 | */ 10 | module.exports = function (config) { 11 | config.set({ 12 | frameworks: ["mocha", "phantomjs-shim"], 13 | reporters: ["spec"], 14 | browsers: ["PhantomJS"], 15 | basePath: ".", // repository root. 16 | files: [ 17 | // Sinon has issues with webpack. Do global include. 18 | "node_modules/sinon/pkg/sinon.js", 19 | 20 | // Test bundle (must be created via `npm run dev|hot|server-test`) 21 | "http://127.0.0.1:3001/assets/main.js" 22 | ], 23 | port: 9999, 24 | singleRun: true, 25 | client: { 26 | mocha: { 27 | ui: "bdd" 28 | } 29 | } 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /* 3 | * Karma Configuration: "full" version. 4 | * 5 | * This configuration runs a temporary `webpack-dev-server` and builds 6 | * the test files one-off for just a single run. This is appropriate for a 7 | * CI environment or if you're not otherwise running `npm run dev|hot`. 8 | */ 9 | var webpackCfg = require("./webpack.config.test"); 10 | 11 | module.exports = function (config) { 12 | /* eslint-disable global-require */ 13 | 14 | // Start with the "dev" (webpack-dev-server is already running) config 15 | // and add in the webpack stuff. 16 | require("./karma.conf.dev")(config); 17 | 18 | // Overrides. 19 | config.set({ 20 | preprocessors: { 21 | "test/client/main.js": ["webpack"] 22 | }, 23 | files: [ 24 | // Sinon has issues with webpack. Do global include. 25 | "node_modules/sinon/pkg/sinon.js", 26 | 27 | // Test bundle (created via local webpack-dev-server in this config). 28 | "test/client/main.js" 29 | ], 30 | webpack: webpackCfg, 31 | webpackServer: { 32 | port: 3002, // Choose a non-conflicting port (3000 app, 3001 test dev) 33 | quiet: false, 34 | noInfo: true, 35 | stats: { 36 | assets: false, 37 | colors: true, 38 | version: false, 39 | hash: false, 40 | timings: false, 41 | chunks: false, 42 | chunkModules: false 43 | } 44 | } 45 | }); 46 | }; 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-rpg", 3 | "version": "2.0.0", 4 | "description": "A React component for responsive photo grids in square aspect ratio", 5 | "keywords": [ 6 | "responsive images", 7 | "photo grid", 8 | "square image grid", 9 | "react-component" 10 | ], 11 | "main": "lib/index.js", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/james-oldfield/react-rpg.git" 15 | }, 16 | "author": "james oldfield", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/james-oldfield/react-rpg/issues" 20 | }, 21 | "homepage": "https://github.com/james-oldfield/react-rpg", 22 | "scripts": { 23 | "postinstall": "node -e \"require('fs').stat('lib', function(e,s){process.exit(e || !s.isDirectory() ? 1 : 0)})\" || npm run build-lib", 24 | "preversion": "npm run check", 25 | "version": "npm run clean && npm run build && git add -A dist", 26 | "clean-dist": "rimraf dist", 27 | "build-dist-min": "webpack --config webpack.config.js", 28 | "build-dist-dev": "webpack --config webpack.config.dev.js", 29 | "build-dist": "npm run clean-dist && npm run build-dist-min && npm run build-dist-dev", 30 | "clean-lib": "rimraf lib", 31 | "build-lib": "npm run clean-lib && babel src -d lib", 32 | "clean": "npm run clean-lib && npm run clean-dist", 33 | "build": "npm run build-lib && npm run build-dist", 34 | "server-dev": "webpack-dev-server --port 3000 --config demo/webpack.config.dev.js --colors --content-base demo", 35 | "server-hot": "webpack-dev-server --port 3000 --config demo/webpack.config.hot.js --colors --hot --content-base demo", 36 | "server-test": "webpack-dev-server --port 3001 --config webpack.config.test.js --colors", 37 | "dev": "concurrent -kr 'npm run server-dev' 'npm run server-test'", 38 | "hot": "concurrent -kr 'npm run server-hot' 'npm run server-test'", 39 | "open-demo": "opener http://127.0.0.1:3000", 40 | "open-dev": "concurrent -kr 'npm run dev' 'npm run open-demo'", 41 | "open-hot": "concurrent -kr 'npm run hot' 'npm run open-demo'", 42 | "lint-server": "eslint -c .eslintrc-server *.js demo/webpack.*.js", 43 | "lint-client": "eslint --ext .js,.jsx -c .eslintrc-client src demo/*.jsx", 44 | "lint-client-test": "eslint --ext .js,.jsx -c .eslintrc-client-test src test/client", 45 | "lint": "npm run lint-server && npm run lint-client && npm run lint-client-test", 46 | "test-frontend": "node node_modules/karma/bin/karma start karma.conf.js", 47 | "test-frontend-ci": "node node_modules/karma/bin/karma start --browsers PhantomJS,Firefox karma.conf.coverage.js", 48 | "test-frontend-cov": "node node_modules/karma/bin/karma start karma.conf.coverage.js", 49 | "test-frontend-dev": "node node_modules/karma/bin/karma start karma.conf.dev.js", 50 | "test": "npm run test-frontend && echo 'TODO Server 13, Integration 12 tests.'", 51 | "test-ci": "npm run test-frontend-ci", 52 | "test-cov": "npm run test-frontend-cov", 53 | "test-dev": "npm run test-frontend-dev", 54 | "check": "npm run lint && npm run test", 55 | "check-ci": "npm run lint && npm run test-ci", 56 | "check-cov": "npm run lint && npm run test-cov", 57 | "check-dev": "npm run lint && npm run test-dev" 58 | }, 59 | "dependencies": { 60 | "babel": "^5.8.21", 61 | "babel-core": "^5.8.22", 62 | "babel-loader": "^5.3.2", 63 | "css-loader": "^0.20.1", 64 | "file-loader": "^0.8.4", 65 | "rimraf": "^2.4.0", 66 | "style-loader": "^0.12.4", 67 | "url-loader": "~0.5.5", 68 | "webpack": "^1.11.0" 69 | }, 70 | "devDependencies": { 71 | "babel-eslint": "^4.1.3", 72 | "chai": "^3.2.0", 73 | "concurrently": "^0.1.1", 74 | "eslint": "^1.10.3", 75 | "eslint-config-airbnb": "^2.0.0", 76 | "eslint-config-defaults": "^7.0.1", 77 | "eslint-plugin-filenames": "^0.1.2", 78 | "eslint-plugin-react": "^3.11.3", 79 | "expect": "^1.20.1", 80 | "isparta-loader": "^1.0.0", 81 | "karma": "^0.13.9", 82 | "karma-chrome-launcher": "^0.2.0", 83 | "karma-coverage": "^0.5.2", 84 | "karma-firefox-launcher": "^0.1.6", 85 | "karma-ie-launcher": "^0.2.0", 86 | "karma-mocha": "^0.2.0", 87 | "karma-phantomjs-launcher": "^0.2.1", 88 | "karma-phantomjs-shim": "^1.1.1", 89 | "karma-safari-launcher": "^0.1.1", 90 | "karma-sauce-launcher": "^0.2.14", 91 | "karma-spec-reporter": "0.0.20", 92 | "karma-webpack": "^1.7.0", 93 | "lodash": "^3.10.1", 94 | "mocha": "^2.2.5", 95 | "opener": "^1.4.1", 96 | "phantomjs": "^1.9.18", 97 | "react": "^0.14.0", 98 | "react-addons-test-utils": "^0.14.0", 99 | "react-dom": "^0.14.0", 100 | "react-hot-loader": "^1.2.8", 101 | "sinon": "^1.16.1", 102 | "sinon-chai": "^2.8.0", 103 | "webpack-dev-server": "^1.10.0" 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /reactPhotoGrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/james-oldfield/react-rpg/57f06bd9417eb07223b9ba4936216382f346fcdf/reactPhotoGrid.png -------------------------------------------------------------------------------- /src/components/react-rpg-photo.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ReactRpgPhoto = ({ url, padding, clickHandler = null }) => { 4 | const pointer = clickHandler ? 'pointer' : 'auto'; 5 | 6 | const styles = { 7 | imageGridItem: { 8 | display: 'inline-block', 9 | boxSizing: 'border-box', 10 | float: 'left', 11 | padding, 12 | }, 13 | imageWrapper: { 14 | position: 'relative', 15 | width: '100%', 16 | paddingBottom: '100%', 17 | backgroundImage: `url(${url})`, 18 | backgroundSize: 'cover', 19 | backgroundPosition: 'center center', 20 | backgroundRepeat: 'no-repeat', 21 | cursor: pointer, 22 | }, 23 | }; 24 | 25 | return ( 26 |
27 | 28 |
29 | 30 |
31 | ); 32 | }; 33 | 34 | ReactRpgPhoto.propTypes = { 35 | url: React.PropTypes.string.isRequired, 36 | padding: React.PropTypes.number, 37 | clickHandler: React.PropTypes.func, 38 | }; 39 | 40 | export default ReactRpgPhoto; 41 | -------------------------------------------------------------------------------- /src/components/react-rpg.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactRpgPhoto from './react-rpg-photo'; 3 | 4 | const ReactRpg = ({ imagesArray, padding = 0, columns = [1, 2, 3] }) => { 5 | const imageNodes = imagesArray.map((arr, index) => { 6 | return ( 7 | 8 | ); 9 | }); 10 | 11 | const cssBreakpoints = ` 12 | .imageGridItem { width: ${Math.floor(100 / columns[0])}%; } 13 | 14 | @media only screen and (min-width : 480px) { 15 | .imageGridItem { width: ${Math.floor(100 / columns[1])}%; } 16 | } 17 | @media only screen and (min-width : 992px) { 18 | .imageGridItem { width: ${Math.floor(100 / columns[2])}%; } 19 | } 20 | `; 21 | 22 | return ( 23 |
24 |