From 72662e8afd9b0a254c61b7bead07a1dfa8d4f027 Mon Sep 17 00:00:00 2001 From: Vincent Taverna Date: Sun, 12 Feb 2017 11:02:28 -0500 Subject: [PATCH 1/7] map virtual object to props --- src/VirtualList.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/VirtualList.js b/src/VirtualList.js index dbea74f..10f2fb6 100644 --- a/src/VirtualList.js +++ b/src/VirtualList.js @@ -64,13 +64,13 @@ const VirtualList = (options) => (InnerComponent) => { this.setState(state); } } - + refreshState() { const { itemHeight, items, itemBuffer } = this.props; this.setStateIfNeeded(this.domNode, this.options.container, items, itemHeight, itemBuffer); }; - + componentDidMount() { // cache the DOM node this.domNode = ReactDOM.findDOMNode(this); @@ -82,7 +82,7 @@ const VirtualList = (options) => (InnerComponent) => { this.options.container.addEventListener('scroll', this.refreshState); this.options.container.addEventListener('resize', this.refreshState); }; - + componentWillUnmount() { // remove events this.options.container.removeEventListener('scroll', this.refreshState); @@ -95,7 +95,7 @@ const VirtualList = (options) => (InnerComponent) => { this.setStateIfNeeded(this.domNode, this.options.container, items, itemHeight, itemBuffer); }; - + render() { const { firstItemIndex, lastItemIndex } = this.state; const { items, itemHeight } = this.props; @@ -116,10 +116,12 @@ const VirtualList = (options) => (InnerComponent) => { }, }; - return (); + const props = { + ...this.props, + ...options.mapVirtualToProps(virtual) + } + + return (); }; }; }; From ac24252d3561049959e9e1f2a811ca46eda30f31 Mon Sep 17 00:00:00 2001 From: Vincent Taverna Date: Sun, 12 Feb 2017 11:21:16 -0500 Subject: [PATCH 2/7] fix tests by adding mapVirtualToProps --- src/__tests__/VirtualList.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/__tests__/VirtualList.js b/src/__tests__/VirtualList.js index 25e8c94..382da4b 100644 --- a/src/__tests__/VirtualList.js +++ b/src/__tests__/VirtualList.js @@ -13,6 +13,8 @@ const MyList = ({ itemHeight, virtual }) => { ); }; +const mapVirtualToProps = (virtual) => ({ virtual: virtual }); + const items = Array.apply(null, {length: 1000}).map(Number.call, Number); describe('higher-order component that only renders visible items', () => { @@ -21,7 +23,7 @@ describe('higher-order component that only renders visible items', () => { }); it('renders the inner component', () => { - const MyVirtualList = VirtualList()(MyList); + const MyVirtualList = VirtualList({ mapVirtualToProps })(MyList); const renderer = ReactTestUtils.createRenderer(); renderer.render( @@ -38,7 +40,7 @@ describe('higher-order component that only renders visible items', () => { }); it('provides the virtual prop', () => { - const MyVirtualList = VirtualList()(MyList); + const MyVirtualList = VirtualList({ mapVirtualToProps })(MyList); const renderer = ReactTestUtils.createRenderer(); renderer.render( @@ -52,10 +54,10 @@ describe('higher-order component that only renders visible items', () => { const result = renderer.getRenderOutput(); expect(result.props.virtual).not.toBe(undefined); - }); + }); it('provides the items prop', () => { - const MyVirtualList = VirtualList()(MyList); + const MyVirtualList = VirtualList({ mapVirtualToProps })(MyList); const renderer = ReactTestUtils.createRenderer(); renderer.render( @@ -69,10 +71,10 @@ describe('higher-order component that only renders visible items', () => { const result = renderer.getRenderOutput(); expect(result.props.virtual.items).not.toBe(undefined); - }); + }); it('provides the style prop', () => { - const MyVirtualList = VirtualList()(MyList); + const MyVirtualList = VirtualList({ mapVirtualToProps })(MyList); const renderer = ReactTestUtils.createRenderer(); renderer.render( @@ -131,6 +133,7 @@ describe('higher-order component that only renders visible items', () => { paddingTop: 0, }, }, + mapVirtualToProps, }; const MyVirtualList = VirtualList(options)(MyList); From 88437c0dc381671bebaa01eeaaeb30f835bfc77a Mon Sep 17 00:00:00 2001 From: Vincent Taverna Date: Mon, 13 Feb 2017 11:35:56 -0500 Subject: [PATCH 3/7] add default map to virtual props as second argument and tests --- src/VirtualList.js | 6 ++- src/__tests__/VirtualList.js | 87 ++++++++++++++++++++++++++++++++---- 2 files changed, 83 insertions(+), 10 deletions(-) diff --git a/src/VirtualList.js b/src/VirtualList.js index 10f2fb6..70e47fb 100644 --- a/src/VirtualList.js +++ b/src/VirtualList.js @@ -3,7 +3,9 @@ import ReactDOM from 'react-dom'; import getVisibleItemBounds from './utils/getVisibleItemBounds'; -const VirtualList = (options) => (InnerComponent) => { +const defaultMapToVirtualProps = (virtual) => ({ virtual }) + +const VirtualList = (options, mapVirtualToProps = defaultMapToVirtualProps) => (InnerComponent) => { return class vlist extends PureComponent { static propTypes = { items: PropTypes.array.isRequired, @@ -118,7 +120,7 @@ const VirtualList = (options) => (InnerComponent) => { const props = { ...this.props, - ...options.mapVirtualToProps(virtual) + ...mapVirtualToProps(virtual) } return (); diff --git a/src/__tests__/VirtualList.js b/src/__tests__/VirtualList.js index 382da4b..eb9b4fe 100644 --- a/src/__tests__/VirtualList.js +++ b/src/__tests__/VirtualList.js @@ -13,8 +13,6 @@ const MyList = ({ itemHeight, virtual }) => { ); }; -const mapVirtualToProps = (virtual) => ({ virtual: virtual }); - const items = Array.apply(null, {length: 1000}).map(Number.call, Number); describe('higher-order component that only renders visible items', () => { @@ -23,7 +21,7 @@ describe('higher-order component that only renders visible items', () => { }); it('renders the inner component', () => { - const MyVirtualList = VirtualList({ mapVirtualToProps })(MyList); + const MyVirtualList = VirtualList()(MyList); const renderer = ReactTestUtils.createRenderer(); renderer.render( @@ -40,7 +38,7 @@ describe('higher-order component that only renders visible items', () => { }); it('provides the virtual prop', () => { - const MyVirtualList = VirtualList({ mapVirtualToProps })(MyList); + const MyVirtualList = VirtualList()(MyList); const renderer = ReactTestUtils.createRenderer(); renderer.render( @@ -57,7 +55,7 @@ describe('higher-order component that only renders visible items', () => { }); it('provides the items prop', () => { - const MyVirtualList = VirtualList({ mapVirtualToProps })(MyList); + const MyVirtualList = VirtualList()(MyList); const renderer = ReactTestUtils.createRenderer(); renderer.render( @@ -74,7 +72,7 @@ describe('higher-order component that only renders visible items', () => { }); it('provides the style prop', () => { - const MyVirtualList = VirtualList({ mapVirtualToProps })(MyList); + const MyVirtualList = VirtualList()(MyList); const renderer = ReactTestUtils.createRenderer(); renderer.render( @@ -133,7 +131,6 @@ describe('higher-order component that only renders visible items', () => { paddingTop: 0, }, }, - mapVirtualToProps, }; const MyVirtualList = VirtualList(options)(MyList); @@ -144,7 +141,7 @@ describe('higher-order component that only renders visible items', () => { + /> ) ); @@ -152,4 +149,78 @@ describe('higher-order component that only renders visible items', () => { expect(result.props.virtual.items).toHaveLength(5); }); + + it('does not provide mapVirtualToProps', () => { + const container = { + clientHeight: 500, + offsetTop: 0, + }; + + const options = { + container, + initialState: { + firstItemIndex: 0, + lastItemIndex: 4, + style: { + height: 500, + paddingTop: 0, + }, + }, + }; + + const MyVirtualList = VirtualList(options)(MyList); + + const renderer = ReactTestUtils.createRenderer(); + renderer.render( + ( + + ) + ); + + const result = renderer.getRenderOutput(); + + expect(result.props.virtual.items).toHaveLength(5); + expect(result.props.virtual.style).toBeDefined(); + }); + + it('does provide mapVirtualToProps', () => { + const container = { + clientHeight: 500, + offsetTop: 0, + }; + + const options = { + container, + initialState: { + firstItemIndex: 0, + lastItemIndex: 4, + style: { + height: 500, + paddingTop: 0, + }, + }, + }; + + const mapVirtualToProps = (virtual) => ({ customItemsRef: virtual.items }) + + const MyVirtualList = VirtualList(options, mapVirtualToProps)(MyList); + + const renderer = ReactTestUtils.createRenderer(); + renderer.render( + ( + + ) + ); + + const result = renderer.getRenderOutput(); + + expect(result.props.virtual).toBeUndefined(); + expect(result.props.customItemsRef).toHaveLength(5); + }); }); From ed590a52a80dc70d0e58a58582751a7e3bb78610 Mon Sep 17 00:00:00 2001 From: Vincent Taverna Date: Tue, 14 Feb 2017 20:23:02 -0500 Subject: [PATCH 4/7] pass props and state to mapVirtualToProps, pass tests --- src/VirtualList.js | 52 ++++++++++++++++++------------------ src/__tests__/VirtualList.js | 4 +-- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/VirtualList.js b/src/VirtualList.js index 70e47fb..f9e552d 100644 --- a/src/VirtualList.js +++ b/src/VirtualList.js @@ -3,7 +3,31 @@ import ReactDOM from 'react-dom'; import getVisibleItemBounds from './utils/getVisibleItemBounds'; -const defaultMapToVirtualProps = (virtual) => ({ virtual }) +const defaultMapToVirtualProps = ({ + items, + itemHeight, +}, { + firstItemIndex, + lastItemIndex, +}) => { + const visibleItems = lastItemIndex > -1 ? items.slice(firstItemIndex, lastItemIndex + 1) : []; + // would be nice to make this not break shallowCompare with items.slice + // but theoretically we're only rendering if we need to + + // style + const height = items.length * itemHeight; + const paddingTop = firstItemIndex * itemHeight; + + return { + virtual: { + items: visibleItems, + style: { + height, + paddingTop, + }, + } + }; +} const VirtualList = (options, mapVirtualToProps = defaultMapToVirtualProps) => (InnerComponent) => { return class vlist extends PureComponent { @@ -99,31 +123,7 @@ const VirtualList = (options, mapVirtualToProps = defaultMapToVirtualProps) => ( }; render() { - const { firstItemIndex, lastItemIndex } = this.state; - const { items, itemHeight } = this.props; - - const visibleItems = lastItemIndex > -1 ? items.slice(firstItemIndex, lastItemIndex + 1) : []; - // would be nice to make this not break shallowCompare with items.slice - // but theoretically we're only rendering if we need to - - // style - const height = items.length * itemHeight; - const paddingTop = firstItemIndex * itemHeight; - - const virtual = { - items: visibleItems, - style: { - height, - paddingTop, - }, - }; - - const props = { - ...this.props, - ...mapVirtualToProps(virtual) - } - - return (); + return (); }; }; }; diff --git a/src/__tests__/VirtualList.js b/src/__tests__/VirtualList.js index eb9b4fe..7e47273 100644 --- a/src/__tests__/VirtualList.js +++ b/src/__tests__/VirtualList.js @@ -204,7 +204,7 @@ describe('higher-order component that only renders visible items', () => { }, }; - const mapVirtualToProps = (virtual) => ({ customItemsRef: virtual.items }) + const mapVirtualToProps = ({ items }) => ({ customItemsRef: items }) const MyVirtualList = VirtualList(options, mapVirtualToProps)(MyList); @@ -221,6 +221,6 @@ describe('higher-order component that only renders visible items', () => { const result = renderer.getRenderOutput(); expect(result.props.virtual).toBeUndefined(); - expect(result.props.customItemsRef).toHaveLength(5); + expect(result.props.customItemsRef).toHaveLength(1000); }); }); From 30593cf19d8249c16aafdb1c60625b0187eded41 Mon Sep 17 00:00:00 2001 From: Dizzle Date: Thu, 23 Feb 2017 21:47:17 -0500 Subject: [PATCH 5/7] Moves code to defaultMapVirtualToProps; updates tests --- README.md | 11 +++++ demo/dist/app.js | 1 + demo/dist/index.html | 31 +++++++++++++ demo/dist/react.js | 24 ++++++++++ demo/dist/virtualList.js | 1 + src/VirtualList.js | 27 +---------- src/__tests__/VirtualList.js | 17 ++----- .../__tests__/defaultMapVirtualToProps.js | 46 +++++++++++++++++++ src/utils/defaultMapVirtualToProps.js | 25 ++++++++++ 9 files changed, 144 insertions(+), 39 deletions(-) create mode 100644 demo/dist/app.js create mode 100644 demo/dist/index.html create mode 100644 demo/dist/react.js create mode 100644 demo/dist/virtualList.js create mode 100644 src/utils/__tests__/defaultMapVirtualToProps.js create mode 100644 src/utils/defaultMapVirtualToProps.js diff --git a/README.md b/README.md index bf37596..f210fd3 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,17 @@ Name | Type | Default | Description `itemHeight` | Number | - | Height in pixels of a single item. **You must have a CSS rule that sets the height of each list item to this value.** `itemBuffer` | Number | 0 | Number of items that should be rendered before and after the visible viewport. Try using this if you have a complex list that suffers from a bit of lag when scrolling. +#### Mapping + +`VirtualList` allows a second, optional, parameter, named `mapVirtualToProps`, which functions similarly to [Redux's `mapStateToProps`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options). This function can be provided to change the properties passed to `MyList`. Its arguments are: + +Name | Description +--- | --- +`props` | Includes all properties passed to `MyVirtualList` +`state` | Includes `firstItemIndex` and `lastItemIndex`; array indexes of the visible bounds of `items` + +The default `mapVirtualToProps` can be found [here](/src/utils/defaultMapVirtualToProps.js). + #### Example Usage Check out [demo/src/app.js](demo/src/app.js) and [demo/src/ConfigurableExample.js](demo/src/ConfigurableExample.js) for the example used in the [demo](http://developerdizzle.github.io/react-virtual-list). diff --git a/demo/dist/app.js b/demo/dist/app.js new file mode 100644 index 0000000..29ecfe3 --- /dev/null +++ b/demo/dist/app.js @@ -0,0 +1 @@ +webpackJsonp([1],{0:function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}var a=n(24),r=i(a),o=n(25),l=n(79),s=i(l);n(177);var u=function(e){var t=e.virtual,n=e.itemHeight;return r.default.createElement("ul",{className:"media-list list-group",style:t.style},t.items.map(function(e){return r.default.createElement("li",{key:"item"+e.id,className:"list-group-item",style:{height:n}},r.default.createElement("div",{className:"media-left"},r.default.createElement("img",{className:"media-object",src:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGRlZnMvPjxyZWN0IHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjEzLjQ2ODc1IiB5PSIzMiIgc3R5bGU9ImZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0O2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjY0eDY0PC90ZXh0PjwvZz48L3N2Zz4="})),r.default.createElement("div",{className:"media-body"},r.default.createElement("h4",{className:"media-heading"},e.title),r.default.createElement("p",null,e.text)))}))},c=(0,s.default)(u);(0,o.render)(r.default.createElement(c,null),document.getElementById("app"))},79:function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(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)}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:y.default;return function(n){var i,f;return f=i=function(i){function u(t){a(this,u);var n=r(this,(u.__proto__||Object.getPrototypeOf(u)).call(this,t));return n.options=l({container:"undefined"!=typeof window?window:void 0},e),n.state={firstItemIndex:0,lastItemIndex:-1},e&&e.initialState&&(n.state=l({},n.state,e.initialState)),n.refreshState=n.refreshState.bind(n),window&&"requestAnimationFrame"in window&&(n.refreshState=(0,v.default)(n.refreshState)),n}return o(u,i),s(u,[{key:"setStateIfNeeded",value:function(e,t,n,i,a){var r=(0,h.default)(e,t,n,i,a);void 0===r||r.firstItemIndex===this.state.firstItemIndex&&r.lastItemIndex===this.state.lastItemIndex||this.setState(r)}},{key:"refreshState",value:function(){var e=this.props,t=e.itemHeight,n=e.items,i=e.itemBuffer;this.setStateIfNeeded(this.domNode,this.options.container,n,t,i)}},{key:"componentDidMount",value:function(){this.domNode=m.default.findDOMNode(this),this.refreshState(),this.options.container.addEventListener("scroll",this.refreshState),this.options.container.addEventListener("resize",this.refreshState)}},{key:"componentWillUnmount",value:function(){this.options.container.removeEventListener("scroll",this.refreshState),this.options.container.removeEventListener("resize",this.refreshState)}},{key:"componentWillReceiveProps",value:function(e){var t=e.itemHeight,n=e.items,i=e.itemBuffer;this.setStateIfNeeded(this.domNode,this.options.container,n,t,i)}},{key:"render",value:function(){return c.default.createElement(n,l({},this.props,t(this.props,this.state)))}}]),u}(u.PureComponent),i.propTypes={items:u.PropTypes.array.isRequired,itemHeight:u.PropTypes.number.isRequired,itemBuffer:u.PropTypes.number},i.defaultProps={itemBuffer:0},f}};t.default=g},172:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e,t){var n=e.items,i=e.itemHeight,a=t.firstItemIndex,r=t.lastItemIndex,o=r>-1?n.slice(a,r+1):[],l=n.length*i,s=a*i;return{virtual:{items:o,style:{height:l,paddingTop:s}}}};t.default=n},173:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e){return e.pageYOffset?e.pageYOffset:e.document?e.document.documentElement&&e.document.documentElement.scrollTop?e.document.documentElement.scrollTop:e.document.body&&e.document.body.scrollTop?e.document.body.scrollTop:0:e.scrollY||e.scrollTop||0};t.default=n},174:function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var a=n(176),r=i(a),o=n(173),l=i(o),s=function(e,t,n,i,a){if(t&&i&&n&&0!==n.length){var o=t.innerHeight,s=t.clientHeight,u=o||s;if(u){var c=(0,l.default)(t),f=c+u,m=(0,r.default)(e)-(0,r.default)(t),d=i*n.length,h=Math.max(0,c-m),p=Math.max(0,Math.min(d,f-m)),v=Math.max(0,Math.floor(h/i)-a),b=Math.min(n.length,Math.ceil(p/i)+a)-1;return{firstItemIndex:v,lastItemIndex:b}}}};t.default=s},175:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=arguments;t.default=function(e){var t=!1;return function(){t||(t=!0,window.requestAnimationFrame(function(){e.apply(void 0,n),t=!1}))}}},176:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function e(t){return"undefined"!=typeof t&&t?(t.offsetTop||0)+e(t.offsetParent):0};t.default=n},177:function(e,t,n){e.exports=n.p+"index.html"}}); \ No newline at end of file diff --git a/demo/dist/index.html b/demo/dist/index.html new file mode 100644 index 0000000..c4c173d --- /dev/null +++ b/demo/dist/index.html @@ -0,0 +1,31 @@ + + + + + + + + +
+

React Virtual List

+
+
+
+
+
+ + + + + + Fork me on GitHub + + \ No newline at end of file diff --git a/demo/dist/react.js b/demo/dist/react.js new file mode 100644 index 0000000..5323857 --- /dev/null +++ b/demo/dist/react.js @@ -0,0 +1,24 @@ +!function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n=window.webpackJsonp;window.webpackJsonp=function(i,a){for(var u,s,l=0,c=[];l1){for(var v=Array(m),y=0;y1){for(var b=Array(g),_=0;_]/;e.exports=r},function(e,t,n){"use strict";var r,o=n(6),i=n(33),a=/^[ \r\n\t\f]/,u=/<(!--|link|noscript|meta|script|style)[ \r\n\t\f\/>]/,s=n(41),l=s(function(e,t){if(e.namespaceURI!==i.svg||"innerHTML"in e)e.innerHTML=t;else{r=r||document.createElement("div"),r.innerHTML=""+t+"";for(var n=r.firstChild;n.firstChild;)e.appendChild(n.firstChild)}});if(o.canUseDOM){var c=document.createElement("div");c.innerHTML=" ",""===c.innerHTML&&(l=function(e,t){if(e.parentNode&&e.parentNode.replaceChild(e,e),a.test(t)||"<"===t[0]&&u.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}),c=null}e.exports=l},function(e,t){"use strict";function n(e,t){return e===t?0!==e||0!==t||1/e===1/t:e!==e&&t!==t}function r(e,t){if(n(e,t))return!0;if("object"!==("undefined"==typeof e?"undefined":o(e))||null===e||"object"!==("undefined"==typeof t?"undefined":o(t))||null===t)return!1;var r=Object.keys(e),a=Object.keys(t);if(r.length!==a.length)return!1;for(var u=0;u-1?void 0:a("96",e),!l.plugins[n]){t.extractEvents?void 0:a("97",e),l.plugins[n]=t;var r=t.eventTypes;for(var i in r)o(r[i],t,i)?void 0:a("98",i,e)}}}function o(e,t,n){l.eventNameDispatchConfigs.hasOwnProperty(n)?a("99",n):void 0,l.eventNameDispatchConfigs[n]=e;var r=e.phasedRegistrationNames;if(r){for(var o in r)if(r.hasOwnProperty(o)){var u=r[o];i(u,t,n)}return!0}return!!e.registrationName&&(i(e.registrationName,t,n),!0)}function i(e,t,n){l.registrationNameModules[e]?a("100",e):void 0,l.registrationNameModules[e]=t,l.registrationNameDependencies[e]=t.eventTypes[n].dependencies}var a=n(3),u=(n(1),null),s={},l={plugins:[],eventNameDispatchConfigs:{},registrationNameModules:{},registrationNameDependencies:{},possibleRegistrationNames:null,injectEventPluginOrder:function(e){u?a("101"):void 0,u=Array.prototype.slice.call(e),r()},injectEventPluginsByName:function(e){var t=!1;for(var n in e)if(e.hasOwnProperty(n)){var o=e[n];s.hasOwnProperty(n)&&s[n]===o||(s[n]?a("102",n):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;if(void 0!==t.phasedRegistrationNames){var n=t.phasedRegistrationNames;for(var r in n)if(n.hasOwnProperty(r)){var o=l.registrationNameModules[n[r]];if(o)return o}}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"topMouseUp"===e||"topTouchEnd"===e||"topTouchCancel"===e}function o(e){return"topMouseMove"===e||"topTouchMove"===e}function i(e){return"topMouseDown"===e||"topTouchStart"===e}function a(e,t,n,r){var o=e.type||"unknown-event";e.currentTarget=y.getNodeFromInstance(r),t?m.invokeGuardedCallbackWithCatch(o,n,e):m.invokeGuardedCallback(o,n,e),e.currentTarget=null}function u(e,t){var n=e._dispatchListeners,r=e._dispatchInstances;if(Array.isArray(n))for(var o=0;o0&&r.length<20?n+" (keys: "+r.join(", ")+")":n}function i(e,t){var n=s.get(e);if(!n){return null}return n}var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u=n(3),s=(n(11),n(22)),l=(n(8),n(9)),c=(n(1),n(2),{isMounted:function(e){var t=s.get(e);return!!t&&!!t._renderedComponent},enqueueCallback:function(e,t,n){c.validateCallback(t,n);var o=i(e);return o?(o._pendingCallbacks?o._pendingCallbacks.push(t):o._pendingCallbacks=[t],void r(o)):null},enqueueCallbackInternal:function(e,t){e._pendingCallbacks?e._pendingCallbacks.push(t):e._pendingCallbacks=[t],r(e)},enqueueForceUpdate:function(e){var t=i(e,"forceUpdate");t&&(t._pendingForceUpdate=!0,r(t))},enqueueReplaceState:function(e,t){var n=i(e,"replaceState");n&&(n._pendingStateQueue=[t],n._pendingReplaceState=!0,r(n))},enqueueSetState:function(e,t){var n=i(e,"setState");if(n){var o=n._pendingStateQueue||(n._pendingStateQueue=[]);o.push(t),r(n)}},enqueueElementInternal:function(e,t,n){e._pendingElement=t,e._context=n,r(e)},validateCallback:function(e,t){e&&"function"!=typeof e?u("122",t,o(e)):void 0}});e.exports=c},function(e,t){"use strict";var n=function(e){return"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(t,n,r,o){MSApp.execUnsafeLocalFunction(function(){return e(t,n,r,o)})}:e};e.exports=n},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){"use strict";function n(e){var t=this,n=t.nativeEvent;if(n.getModifierState)return n.getModifierState(e);var r=o[e];return!!r&&!!n[r]}function r(e){return n}var o={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};e.exports=r},function(e,t){"use strict";function n(e){var t=e.target||e.srcElement||window;return t.correspondingUseElement&&(t=t.correspondingUseElement),3===t.nodeType?t.parentNode:t}e.exports=n},function(e,t,n){"use strict";/** + * Checks if an event is supported in the current execution environment. + * + * NOTE: This will not work correctly for non-generic events such as `change`, + * `reset`, `load`, `error`, and `select`. + * + * Borrows from Modernizr. + * + * @param {string} eventNameSuffix Event name, e.g. "click". + * @param {?boolean} capture Check if the capture phase is supported. + * @return {boolean} True if the event is supported. + * @internal + * @license Modernizr 3.0.0pre (Custom Build) | MIT + */ +function r(e,t){if(!i.canUseDOM||t&&!("addEventListener"in document))return!1;var n="on"+e,r=n in document;if(!r){var a=document.createElement("div");a.setAttribute(n,"return;"),r="function"==typeof a[n]}return!r&&o&&"wheel"===e&&(r=document.implementation.hasFeature("Events.wheel","3.0")),r}var o,i=n(6);i.canUseDOM&&(o=document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0),e.exports=r},function(e,t){"use strict";function n(e,t){var n=null===e||e===!1,o=null===t||t===!1;if(n||o)return n===o;var i="undefined"==typeof e?"undefined":r(e),a="undefined"==typeof t?"undefined":r(t);return"string"===i||"number"===i?"string"===a||"number"===a:"object"===a&&e.type===t.type&&e.key===t.key}var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};e.exports=n},function(e,t,n){"use strict";var r=(n(4),n(7)),o=(n(2),r);e.exports=o},function(e,t,n){"use strict";function r(e,t,n){this.props=e,this.context=t,this.refs=u,this.updater=n||a}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=n(18),a=n(49),u=(n(77),n(19));n(1),n(2);r.prototype.isReactComponent={},r.prototype.setState=function(e,t){"object"!==("undefined"==typeof e?"undefined":o(e))&&"function"!=typeof e&&null!=e?i("85"):void 0,this.updater.enqueueSetState(this,e),t&&this.updater.enqueueCallback(this,t,"setState")},r.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this),e&&this.updater.enqueueCallback(this,e,"forceUpdate")};e.exports=r},function(e,t,n){"use strict";function r(e,t){}var o=(n(2),{isMounted:function(e){return!1},enqueueCallback:function(e,t){},enqueueForceUpdate:function(e){r(e,"forceUpdate")},enqueueReplaceState:function(e,t){r(e,"replaceState")},enqueueSetState:function(e,t){r(e,"setState")}});e.exports=o},function(e,t,n){"use strict";var r=n(7),o={listen:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!1),{remove:function(){e.removeEventListener(t,n,!1)}}):e.attachEvent?(e.attachEvent("on"+t,n),{remove:function(){e.detachEvent("on"+t,n)}}):void 0},capture:function(e,t,n){return e.addEventListener?(e.addEventListener(t,n,!0),{remove:function(){e.removeEventListener(t,n,!0)}}):{remove:r}},registerDefault:function(){}};e.exports=o},function(e,t){"use strict";function n(e){try{e.focus()}catch(e){}}e.exports=n},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){"use strict";function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(c===setTimeout)return setTimeout(e,0);if((c===n||!c)&&setTimeout)return c=setTimeout,setTimeout(e,0);try{return c(e,0)}catch(t){try{return c.call(null,e,0)}catch(t){return c.call(this,e,0)}}}function i(e){if(p===clearTimeout)return clearTimeout(e);if((p===r||!p)&&clearTimeout)return p=clearTimeout,clearTimeout(e);try{return p(e)}catch(t){try{return p.call(null,e)}catch(t){return p.call(this,e)}}}function a(){m&&f&&(m=!1,f.length?h=f.concat(h):v=-1,h.length&&u())}function u(){if(!m){var e=o(a);m=!0;for(var t=h.length;t;){for(f=h,h=[];++v1)for(var n=1;n.":"function"==typeof t?" Instead of passing a class like Foo, pass React.createElement(Foo) or .":null!=t&&void 0!==t.props?" This may be caused by unintentionally loading two independent copies of React.":"");var a,u=v.createElement(F,{child:t});if(e){var s=E.get(e);a=s._processChildContext(s._context)}else a=k;var c=d(n);if(c){var p=c._currentElement,h=p.props.child;if(M(h,t)){var m=c._renderedComponent.getPublicInstance(),y=r&&function(){r.call(m)};return j._updateRootComponent(c,u,a,n,y),m}j.unmountComponentAtNode(n)}var g=o(n),b=g&&!!i(g),_=l(n),C=b&&!c&&!_,x=j._renderNewRootComponent(u,n,C,a)._renderedComponent.getPublicInstance();return r&&r.call(x),x},render:function(e,t,n){return j._renderSubtreeIntoContainer(null,e,t,n)},unmountComponentAtNode:function(e){c(e)?void 0:f("40");var t=d(e);if(!t){l(e),1===e.nodeType&&e.hasAttribute(A);return!1}return delete L[t._instance.rootID],T.batchedUpdates(s,t,e,!1),!0},_mountImageIntoNode:function(e,t,n,i,a){if(c(t)?void 0:f("41"),i){var u=o(t);if(x.canReuseMarkup(e,u))return void g.precacheNode(n,u);var s=u.getAttribute(x.CHECKSUM_ATTR_NAME);u.removeAttribute(x.CHECKSUM_ATTR_NAME);var l=u.outerHTML;u.setAttribute(x.CHECKSUM_ATTR_NAME,s);var p=e,d=r(p,l),m=" (client) "+p.substring(d-20,d+20)+"\n (server) "+l.substring(d-20,d+20);t.nodeType===R?f("42",m):void 0}if(t.nodeType===R?f("43"):void 0,a.useCreateElement){for(;t.lastChild;)t.removeChild(t.lastChild);h.insertTreeBefore(t,e,null)}else N(t,e),g.precacheNode(n,t.firstChild)}};e.exports=j},function(e,t,n){"use strict";var r=n(3),o=n(16),i=(n(1),{HOST:0,COMPOSITE:1,EMPTY:2,getType:function(e){return null===e||e===!1?i.EMPTY:o.isValidElement(e)?"function"==typeof e.type?i.COMPOSITE:i.HOST:void r("26",e)}});e.exports=i},function(e,t){"use strict";var n={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){n.currentScrollLeft=e.x,n.currentScrollTop=e.y}};e.exports=n},function(e,t,n){"use strict";function r(e,t){return null==t?o("30"):void 0,null==e?t:Array.isArray(e)?Array.isArray(t)?(e.push.apply(e,t),e):(e.push(t),e):Array.isArray(t)?[e].concat(t):[e,t]}var o=n(3);n(1);e.exports=r},function(e,t){"use strict";function n(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}e.exports=n},function(e,t,n){"use strict";function r(e){for(var t;(t=e._renderedNodeType)===o.COMPOSITE;)e=e._renderedComponent;return t===o.HOST?e._renderedComponent:t===o.EMPTY?null:void 0}var o=n(64);e.exports=r},function(e,t,n){"use strict";function r(){return!i&&o.canUseDOM&&(i="textContent"in document.documentElement?"textContent":"innerText"),i}var o=n(6),i=null;e.exports=r},function(e,t,n){"use strict";function r(e){if(e){var t=e.getName();if(t)return" Check the render method of `"+t+"`."}return""}function o(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function i(e,t){var n;if(null===e||e===!1)n=c.create(i);else if("object"===("undefined"==typeof e?"undefined":a(e))){var s=e,l=s.type;if("function"!=typeof l&&"string"!=typeof l){var f="";f+=r(s._owner),u("130",null==l?l:"undefined"==typeof l?"undefined":a(l),f)}"string"==typeof s.type?n=p.createInternalComponent(s):o(s.type)?(n=new s.type(s),n.getHostNode||(n.getHostNode=n.getNativeNode)):n=new d(s)}else"string"==typeof e||"number"==typeof e?n=p.createInstanceForText(e):u("131","undefined"==typeof e?"undefined":a(e));return n._mountIndex=0,n._mountImage=null,n}var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u=n(3),s=n(4),l=n(108),c=n(59),p=n(61),d=(n(155),n(1),n(2),function(e){this.construct(e)});s(d.prototype,l,{_instantiateReactComponent:i}),e.exports=i},function(e,t){"use strict";function n(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!r[e.type]:"textarea"===t}var r={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};e.exports=n},function(e,t,n){"use strict";var r=n(6),o=n(29),i=n(30),a=function(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t};r.canUseDOM&&("textContent"in document.documentElement||(a=function(e,t){return 3===e.nodeType?void(e.nodeValue=t):void i(e,o(t))})),e.exports=a},function(e,t,n){"use strict";function r(e,t){return e&&"object"===("undefined"==typeof e?"undefined":a(e))&&null!=e.key?c.escape(e.key):t.toString(36)}function o(e,t,n,i){var f="undefined"==typeof e?"undefined":a(e);if("undefined"!==f&&"boolean"!==f||(e=null),null===e||"string"===f||"number"===f||"object"===f&&e.$$typeof===s)return n(i,e,""===t?p+r(e,0):t),1;var h,m,v=0,y=""===t?p:t+d;if(Array.isArray(e))for(var g=0;g":a.innerHTML="<"+e+">",u[e]=!a.firstChild),u[e]?d[e]:null}var o=n(6),i=n(1),a=o.canUseDOM?document.createElement("div"):null,u={},s=[1,'"],l=[1,"","
"],c=[3,"","
"],p=[1,'',""],d={"*":[1,"?
","
"],area:[1,"",""],col:[2,"","
"],legend:[1,"
","
"],param:[1,"",""],tr:[2,"","
"],optgroup:s,option:s,caption:l,colgroup:l,tbody:l,tfoot:l,thead:l,td:c,th:c},f=["circle","clipPath","defs","ellipse","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","text","tspan"];f.forEach(function(e){d[e]=p,u[e]=!0}),e.exports=r},function(e,t){"use strict";function n(e){return e===window?{x:window.pageXOffset||document.documentElement.scrollLeft,y:window.pageYOffset||document.documentElement.scrollTop}:{x:e.scrollLeft,y:e.scrollTop}}e.exports=n},function(e,t){"use strict";function n(e){return e.replace(r,"-$1").toLowerCase()}var r=/([A-Z])/g;e.exports=n},function(e,t,n){"use strict";function r(e){return o(e).replace(i,"-ms-")}var o=n(91),i=/^ms-/;e.exports=r},function(e,t){"use strict";function n(e){return!(!e||!("function"==typeof Node?e instanceof Node:"object"===("undefined"==typeof e?"undefined":r(e))&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName))}var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};e.exports=n},function(e,t,n){"use strict";function r(e){return o(e)&&3==e.nodeType}var o=n(93);e.exports=r},function(e,t){"use strict";function n(e){var t={};return function(n){return t.hasOwnProperty(n)||(t[n]=e.call(this,n)),t[n]}}e.exports=n},function(e,t){"use strict";var n={Properties:{"aria-current":0,"aria-details":0,"aria-disabled":0,"aria-hidden":0,"aria-invalid":0,"aria-keyshortcuts":0,"aria-label":0,"aria-roledescription":0,"aria-autocomplete":0,"aria-checked":0,"aria-expanded":0,"aria-haspopup":0,"aria-level":0,"aria-modal":0,"aria-multiline":0,"aria-multiselectable":0,"aria-orientation":0,"aria-placeholder":0,"aria-pressed":0,"aria-readonly":0,"aria-required":0,"aria-selected":0,"aria-sort":0,"aria-valuemax":0,"aria-valuemin":0,"aria-valuenow":0,"aria-valuetext":0,"aria-atomic":0,"aria-busy":0,"aria-live":0,"aria-relevant":0,"aria-dropeffect":0,"aria-grabbed":0,"aria-activedescendant":0,"aria-colcount":0,"aria-colindex":0,"aria-colspan":0,"aria-controls":0,"aria-describedby":0,"aria-errormessage":0,"aria-flowto":0,"aria-labelledby":0,"aria-owns":0,"aria-posinset":0,"aria-rowcount":0,"aria-rowindex":0,"aria-rowspan":0,"aria-setsize":0},DOMAttributeNames:{},DOMPropertyNames:{}};e.exports=n},function(e,t,n){"use strict";var r=n(5),o=n(51),i={focusDOMComponent:function(){o(r.getNodeFromInstance(this))}};e.exports=i},function(e,t,n){"use strict";function r(){var e=window.opera;return"object"===("undefined"==typeof e?"undefined":f(e))&&"function"==typeof e.version&&parseInt(e.version(),10)<=12}function o(e){return(e.ctrlKey||e.altKey||e.metaKey)&&!(e.ctrlKey&&e.altKey)}function i(e){switch(e){case"topCompositionStart":return k.compositionStart;case"topCompositionEnd":return k.compositionEnd;case"topCompositionUpdate":return k.compositionUpdate}}function a(e,t){return"topKeyDown"===e&&t.keyCode===_}function u(e,t){switch(e){case"topKeyUp":return b.indexOf(t.keyCode)!==-1;case"topKeyDown":return t.keyCode!==_;case"topKeyPress":case"topMouseDown":case"topBlur":return!0;default:return!1}}function s(e){var t=e.detail;return"object"===("undefined"==typeof t?"undefined":f(t))&&"data"in t?t.data:null}function l(e,t,n,r){var o,l;if(C?o=i(e):N?u(e,n)&&(o=k.compositionEnd):a(e,n)&&(o=k.compositionStart),!o)return null;w&&(N||o!==k.compositionStart?o===k.compositionEnd&&N&&(l=N.getData()):N=v.getPooled(r));var c=y.getPooled(o,t,n,r);if(l)c.data=l;else{var p=s(n);null!==p&&(c.data=p)}return h.accumulateTwoPhaseDispatches(c),c}function c(e,t){switch(e){case"topCompositionEnd":return s(t);case"topKeyPress":var n=t.which;return n!==S?null:(P=!0,T);case"topTextInput":var r=t.data;return r===T&&P?null:r;default:return null}}function p(e,t){if(N){if("topCompositionEnd"===e||!C&&u(e,t)){var n=N.getData();return v.release(N),N=null,n}return null}switch(e){case"topPaste":return null;case"topKeyPress":return t.which&&!o(t)?String.fromCharCode(t.which):null;case"topCompositionEnd":return w?null:t.data;default:return null}}function d(e,t,n,r){var o;if(o=x?c(e,n):p(e,n),!o)return null;var i=g.getPooled(k.beforeInput,t,n,r);return i.data=o,h.accumulateTwoPhaseDispatches(i),i}var f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h=n(21),m=n(6),v=n(104),y=n(141),g=n(144),b=[9,13,27,32],_=229,C=m.canUseDOM&&"CompositionEvent"in window,E=null;m.canUseDOM&&"documentMode"in document&&(E=document.documentMode);var x=m.canUseDOM&&"TextEvent"in window&&!E&&!r(),w=m.canUseDOM&&(!C||E&&E>8&&E<=11),S=32,T=String.fromCharCode(S),k={beforeInput:{phasedRegistrationNames:{ +bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["topCompositionEnd","topKeyPress","topTextInput","topPaste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:["topBlur","topCompositionEnd","topKeyDown","topKeyPress","topKeyUp","topMouseDown"]},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:["topBlur","topCompositionStart","topKeyDown","topKeyPress","topKeyUp","topMouseDown"]},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:["topBlur","topCompositionUpdate","topKeyDown","topKeyPress","topKeyUp","topMouseDown"]}},P=!1,N=null,M={eventTypes:k,extractEvents:function(e,t,n,r){return[l(e,t,n,r),d(e,t,n,r)]}};e.exports=M},function(e,t,n){"use strict";var r=n(54),o=n(6),i=(n(8),n(85),n(150)),a=n(92),u=n(95),s=(n(2),u(function(e){return a(e)})),l=!1,c="cssFloat";if(o.canUseDOM){var p=document.createElement("div").style;try{p.font=""}catch(e){l=!0}void 0===document.documentElement.style.cssFloat&&(c="styleFloat")}var d={createMarkupForStyles:function(e,t){var n="";for(var r in e)if(e.hasOwnProperty(r)){var o=e[r];null!=o&&(n+=s(r)+":",n+=i(r,o,t)+";")}return n||null},setValueForStyles:function(e,t,n){var o=e.style;for(var a in t)if(t.hasOwnProperty(a)){var u=i(a,t[a],n);if("float"!==a&&"cssFloat"!==a||(a=c),u)o[a]=u;else{var s=l&&r.shorthandPropertyExpansions[a];if(s)for(var p in s)o[p]="";else o[a]=""}}}};e.exports=d},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(k.change,N,e,w(e));b.accumulateTwoPhaseDispatches(t),E.batchedUpdates(i,t)}function i(e){g.enqueueEvents(e),g.processEventQueue(!1)}function a(e,t){P=e,N=t,P.attachEvent("onchange",o)}function u(){P&&(P.detachEvent("onchange",o),P=null,N=null)}function s(e,t){if("topChange"===e)return t}function l(e,t,n){"topFocus"===e?(u(),a(t,n)):"topBlur"===e&&u()}function c(e,t){P=e,N=t,M=e.value,I=Object.getOwnPropertyDescriptor(e.constructor.prototype,"value"),Object.defineProperty(P,"value",R),P.attachEvent?P.attachEvent("onpropertychange",d):P.addEventListener("propertychange",d,!1)}function p(){P&&(delete P.value,P.detachEvent?P.detachEvent("onpropertychange",d):P.removeEventListener("propertychange",d,!1),P=null,N=null,M=null,I=null)}function d(e){if("value"===e.propertyName){var t=e.srcElement.value;t!==M&&(M=t,o(e))}}function f(e,t){if("topInput"===e)return t}function h(e,t,n){"topFocus"===e?(p(),c(t,n)):"topBlur"===e&&p()}function m(e,t){if(("topSelectionChange"===e||"topKeyUp"===e||"topKeyDown"===e)&&P&&P.value!==M)return M=P.value,N}function v(e){return e.nodeName&&"input"===e.nodeName.toLowerCase()&&("checkbox"===e.type||"radio"===e.type)}function y(e,t){if("topClick"===e)return t}var g=n(20),b=n(21),_=n(6),C=n(5),E=n(9),x=n(10),w=n(44),S=n(45),T=n(71),k={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},dependencies:["topBlur","topChange","topClick","topFocus","topInput","topKeyDown","topKeyUp","topSelectionChange"]}},P=null,N=null,M=null,I=null,A=!1;_.canUseDOM&&(A=S("change")&&(!document.documentMode||document.documentMode>8));var O=!1;_.canUseDOM&&(O=S("input")&&(!document.documentMode||document.documentMode>11));var R={get:function(){return I.get.call(this)},set:function(e){M=""+e,I.set.call(this,e)}},D={eventTypes:k,extractEvents:function(e,t,n,o){var i,a,u=t?C.getNodeFromInstance(t):window;if(r(u)?A?i=s:a=l:T(u)?O?i=f:(i=m,a=h):v(u)&&(i=y),i){var c=i(e,t);if(c){var p=x.getPooled(k.change,c,n,o);return p.type="change",b.accumulateTwoPhaseDispatches(p),p}}a&&a(e,u,t)}};e.exports=D},function(e,t,n){"use strict";var r=n(3),o=n(13),i=n(6),a=n(88),u=n(7),s=(n(1),{dangerouslyReplaceNodeWithMarkup:function(e,t){if(i.canUseDOM?void 0:r("56"),t?void 0:r("57"),"HTML"===e.nodeName?r("58"):void 0,"string"==typeof t){var n=a(t,u)[0];e.parentNode.replaceChild(n,e)}else o.replaceChildWithTree(e,t)}});e.exports=s},function(e,t){"use strict";var n=["ResponderEventPlugin","SimpleEventPlugin","TapEventPlugin","EnterLeaveEventPlugin","ChangeEventPlugin","SelectEventPlugin","BeforeInputEventPlugin"];e.exports=n},function(e,t,n){"use strict";var r=n(21),o=n(5),i=n(27),a={mouseEnter:{registrationName:"onMouseEnter",dependencies:["topMouseOut","topMouseOver"]},mouseLeave:{registrationName:"onMouseLeave",dependencies:["topMouseOut","topMouseOver"]}},u={eventTypes:a,extractEvents:function(e,t,n,u){if("topMouseOver"===e&&(n.relatedTarget||n.fromElement))return null;if("topMouseOut"!==e&&"topMouseOver"!==e)return null;var s;if(u.window===u)s=u;else{var l=u.ownerDocument;s=l?l.defaultView||l.parentWindow:window}var c,p;if("topMouseOut"===e){c=t;var d=n.relatedTarget||n.toElement;p=d?o.getClosestInstanceFromNode(d):null}else c=null,p=t;if(c===p)return null;var f=null==c?s:o.getNodeFromInstance(c),h=null==p?s:o.getNodeFromInstance(p),m=i.getPooled(a.mouseLeave,c,n,u);m.type="mouseleave",m.target=f,m.relatedTarget=h;var v=i.getPooled(a.mouseEnter,p,n,u);return v.type="mouseenter",v.target=h,v.relatedTarget=f,r.accumulateEnterLeaveDispatches(m,v,c,p),[m,v]}};e.exports=u},function(e,t,n){"use strict";function r(e){this._root=e,this._startText=this.getText(),this._fallbackText=null}var o=n(4),i=n(12),a=n(69);o(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[a()]},getData:function(){if(this._fallbackText)return this._fallbackText;var e,t,n=this._startText,r=n.length,o=this.getText(),i=o.length;for(e=0;e1?1-t:void 0;return this._fallbackText=o.slice(e,u),this._fallbackText}}),i.addPoolingTo(r),e.exports=r},function(e,t,n){"use strict";var r=n(14),o=r.injection.MUST_USE_PROPERTY,i=r.injection.HAS_BOOLEAN_VALUE,a=r.injection.HAS_NUMERIC_VALUE,u=r.injection.HAS_POSITIVE_NUMERIC_VALUE,s=r.injection.HAS_OVERLOADED_BOOLEAN_VALUE,l={isCustomAttribute:RegExp.prototype.test.bind(new RegExp("^(data|aria)-["+r.ATTRIBUTE_NAME_CHAR+"]*$")),Properties:{accept:0,acceptCharset:0,accessKey:0,action:0,allowFullScreen:i,allowTransparency:0,alt:0,as:0,async:i,autoComplete:0,autoPlay:i,capture:i,cellPadding:0,cellSpacing:0,charSet:0,challenge:0,checked:o|i,cite:0,classID:0,className:0,cols:u,colSpan:0,content:0,contentEditable:0,contextMenu:0,controls:i,coords:0,crossOrigin:0,data:0,dateTime:0,default:i,defer:i,dir:0,disabled:i,download:s,draggable:0,encType:0,form:0,formAction:0,formEncType:0,formMethod:0,formNoValidate:i,formTarget:0,frameBorder:0,headers:0,height:0,hidden:i,high:0,href:0,hrefLang:0,htmlFor:0,httpEquiv:0,icon:0,id:0,inputMode:0,integrity:0,is:0,keyParams:0,keyType:0,kind:0,label:0,lang:0,list:0,loop:i,low:0,manifest:0,marginHeight:0,marginWidth:0,max:0,maxLength:0,media:0,mediaGroup:0,method:0,min:0,minLength:0,multiple:o|i,muted:o|i,name:0,nonce:0,noValidate:i,open:i,optimum:0,pattern:0,placeholder:0,playsInline:i,poster:0,preload:0,profile:0,radioGroup:0,readOnly:i,referrerPolicy:0,rel:0,required:i,reversed:i,role:0,rows:u,rowSpan:a,sandbox:0,scope:0,scoped:i,scrolling:0,seamless:i,selected:o|i,shape:0,size:u,sizes:0,span:u,spellCheck:0,src:0,srcDoc:0,srcLang:0,srcSet:0,start:a,step:0,style:0,summary:0,tabIndex:0,target:0,title:0,type:0,useMap:0,value:0,width:0,wmode:0,wrap:0,about:0,datatype:0,inlist:0,prefix:0,property:0,resource:0,typeof:0,vocab:0,autoCapitalize:0,autoCorrect:0,autoSave:0,color:0,itemProp:0,itemScope:i,itemType:0,itemID:0,itemRef:0,results:0,security:0,unselectable:0},DOMAttributeNames:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},DOMPropertyNames:{}};e.exports=l},function(e,t,n){(function(t){"use strict";function r(e,t,n,r){var o=void 0===e[n];null!=t&&o&&(e[n]=i(t,!0))}var o=n(15),i=n(70),a=(n(36),n(46)),u=n(73);n(2);"undefined"!=typeof t&&t.env,1;var s={instantiateChildren:function(e,t,n,o){if(null==e)return null;var i={};return u(e,r,i),i},updateChildren:function(e,t,n,r,u,s,l,c,p){if(t||e){var d,f;for(d in t)if(t.hasOwnProperty(d)){f=e&&e[d];var h=f&&f._currentElement,m=t[d];if(null!=f&&a(h,m))o.receiveComponent(f,m,u,c),t[d]=f;else{f&&(r[d]=o.getHostNode(f),o.unmountComponent(f,!1));var v=i(m,!0);t[d]=v;var y=o.mountComponent(v,u,s,l,c,p);n.push(y)}}for(d in e)!e.hasOwnProperty(d)||t&&t.hasOwnProperty(d)||(f=e[d],r[d]=o.getHostNode(f),o.unmountComponent(f,!1))}},unmountChildren:function(e,t){for(var n in e)if(e.hasOwnProperty(n)){var r=e[n];o.unmountComponent(r,t)}}};e.exports=s}).call(t,n(53))},function(e,t,n){"use strict";var r=n(32),o=n(114),i={processChildrenUpdates:o.dangerouslyProcessChildrenUpdates,replaceNodeWithMarkup:r.dangerouslyReplaceNodeWithMarkup};e.exports=i},function(e,t,n){"use strict";function r(e){}function o(e,t){}function i(e){return!(!e.prototype||!e.prototype.isReactComponent)}function a(e){return!(!e.prototype||!e.prototype.isPureReactComponent)}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=n(3),l=n(4),c=n(16),p=n(38),d=n(11),f=n(39),h=n(22),m=(n(8),n(64)),v=n(15),y=n(19),g=(n(1),n(31)),b=n(46),_=(n(2),{ImpureClass:0,PureClass:1,StatelessFunctional:2});r.prototype.render=function(){var e=h.get(this)._currentElement.type,t=e(this.props,this.context,this.updater);return o(e,t),t};var C=1,E={construct:function(e){this._currentElement=e,this._rootNodeID=0,this._compositeType=null,this._instance=null,this._hostParent=null,this._hostContainerInfo=null,this._updateBatchNumber=null,this._pendingElement=null,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1,this._renderedNodeType=null,this._renderedComponent=null,this._context=null,this._mountOrder=0,this._topLevelWrapper=null,this._pendingCallbacks=null,this._calledComponentWillUnmount=!1},mountComponent:function(e,t,n,l){this._context=l,this._mountOrder=C++,this._hostParent=t,this._hostContainerInfo=n;var p,d=this._currentElement.props,f=this._processContext(l),m=this._currentElement.type,v=e.getUpdateQueue(),g=i(m),b=this._constructComponent(g,d,f,v);g||null!=b&&null!=b.render?a(m)?this._compositeType=_.PureClass:this._compositeType=_.ImpureClass:(p=b,o(m,p),null===b||b===!1||c.isValidElement(b)?void 0:s("105",m.displayName||m.name||"Component"),b=new r(m),this._compositeType=_.StatelessFunctional);b.props=d,b.context=f,b.refs=y,b.updater=v,this._instance=b,h.set(b,this);var E=b.state;void 0===E&&(b.state=E=null),"object"!==("undefined"==typeof E?"undefined":u(E))||Array.isArray(E)?s("106",this.getName()||"ReactCompositeComponent"):void 0,this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1;var x;return x=b.unstable_handleError?this.performInitialMountWithErrorHandling(p,t,n,e,l):this.performInitialMount(p,t,n,e,l),b.componentDidMount&&e.getReactMountReady().enqueue(b.componentDidMount,b),x},_constructComponent:function(e,t,n,r){return this._constructComponentWithoutOwner(e,t,n,r)},_constructComponentWithoutOwner:function(e,t,n,r){var o=this._currentElement.type;return e?new o(t,n,r):o(t,n,r)},performInitialMountWithErrorHandling:function(e,t,n,r,o){var i,a=r.checkpoint();try{i=this.performInitialMount(e,t,n,r,o)}catch(u){r.rollback(a),this._instance.unstable_handleError(u),this._pendingStateQueue&&(this._instance.state=this._processPendingState(this._instance.props,this._instance.context)),a=r.checkpoint(),this._renderedComponent.unmountComponent(!0),r.rollback(a),i=this.performInitialMount(e,t,n,r,o)}return i},performInitialMount:function(e,t,n,r,o){var i=this._instance,a=0;i.componentWillMount&&(i.componentWillMount(),this._pendingStateQueue&&(i.state=this._processPendingState(i.props,i.context))),void 0===e&&(e=this._renderValidatedComponent());var u=m.getType(e);this._renderedNodeType=u;var s=this._instantiateReactComponent(e,u!==m.EMPTY);this._renderedComponent=s;var l=v.mountComponent(s,r,t,n,this._processChildContext(o),a);return l},getHostNode:function(){return v.getHostNode(this._renderedComponent)},unmountComponent:function(e){if(this._renderedComponent){var t=this._instance;if(t.componentWillUnmount&&!t._calledComponentWillUnmount)if(t._calledComponentWillUnmount=!0,e){var n=this.getName()+".componentWillUnmount()";f.invokeGuardedCallback(n,t.componentWillUnmount.bind(t))}else t.componentWillUnmount();this._renderedComponent&&(v.unmountComponent(this._renderedComponent,e),this._renderedNodeType=null,this._renderedComponent=null,this._instance=null),this._pendingStateQueue=null,this._pendingReplaceState=!1,this._pendingForceUpdate=!1,this._pendingCallbacks=null,this._pendingElement=null,this._context=null,this._rootNodeID=0,this._topLevelWrapper=null,h.remove(t)}},_maskContext:function(e){var t=this._currentElement.type,n=t.contextTypes;if(!n)return y;var r={};for(var o in n)r[o]=e[o];return r},_processContext:function(e){var t=this._maskContext(e);return t},_processChildContext:function(e){var t,n=this._currentElement.type,r=this._instance;if(r.getChildContext&&(t=r.getChildContext()),t){"object"!==u(n.childContextTypes)?s("107",this.getName()||"ReactCompositeComponent"):void 0;for(var o in t)o in n.childContextTypes?void 0:s("108",this.getName()||"ReactCompositeComponent",o);return l({},e,t)}return e},_checkContextTypes:function(e,t,n){},receiveComponent:function(e,t,n){var r=this._currentElement,o=this._context;this._pendingElement=null,this.updateComponent(t,r,e,o,n)},performUpdateIfNecessary:function(e){null!=this._pendingElement?v.receiveComponent(this,this._pendingElement,e,this._context):null!==this._pendingStateQueue||this._pendingForceUpdate?this.updateComponent(e,this._currentElement,this._currentElement,this._context,this._context):this._updateBatchNumber=null},updateComponent:function(e,t,n,r,o){var i=this._instance;null==i?s("136",this.getName()||"ReactCompositeComponent"):void 0;var a,u=!1;this._context===o?a=i.context:(a=this._processContext(o),u=!0);var l=t.props,c=n.props;t!==n&&(u=!0),u&&i.componentWillReceiveProps&&i.componentWillReceiveProps(c,a);var p=this._processPendingState(c,a),d=!0;this._pendingForceUpdate||(i.shouldComponentUpdate?d=i.shouldComponentUpdate(c,p,a):this._compositeType===_.PureClass&&(d=!g(l,c)||!g(i.state,p))),this._updateBatchNumber=null,d?(this._pendingForceUpdate=!1,this._performComponentUpdate(n,c,p,a,e,o)):(this._currentElement=n,this._context=o,i.props=c,i.state=p,i.context=a)},_processPendingState:function(e,t){var n=this._instance,r=this._pendingStateQueue,o=this._pendingReplaceState;if(this._pendingReplaceState=!1,this._pendingStateQueue=null,!r)return n.state;if(o&&1===r.length)return r[0];for(var i=l({},o?r[0]:n.state),a=o?1:0;a=0||null!=t.is}function h(e){var t=e.type;d(t),this._currentElement=e,this._tag=t.toLowerCase(),this._namespaceURI=null,this._renderedChildren=null,this._previousStyle=null,this._previousStyleCopy=null,this._hostNode=null,this._hostParent=null,this._rootNodeID=0,this._domID=0,this._hostContainerInfo=null,this._wrapperState=null,this._topLevelWrapper=null,this._flags=0}var m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v=n(3),y=n(4),g=n(97),b=n(99),_=n(13),C=n(33),E=n(14),x=n(56),w=n(20),S=n(34),T=n(26),k=n(57),P=n(5),N=n(115),M=n(116),I=n(58),A=n(119),O=(n(8),n(128)),R=n(133),D=(n(7),n(29)),L=(n(1),n(45),n(31),n(47),n(2),k),U=w.deleteListener,F=P.getNodeFromInstance,j=T.listenTo,V=S.registrationNameModules,B={string:!0,number:!0},W="style",H="__html",q={children:null,dangerouslySetInnerHTML:null,suppressContentEditableWarning:null},K=11,Y={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"},z={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},X={listing:!0,pre:!0,textarea:!0},G=y({menuitem:!0},z),Q=/^[a-zA-Z][a-zA-Z:_\.\-\d]*$/,$={},Z={}.hasOwnProperty,J=1;h.displayName="ReactDOMComponent",h.Mixin={mountComponent:function(e,t,n,r){this._rootNodeID=J++,this._domID=n._idCounter++,this._hostParent=t,this._hostContainerInfo=n;var i=this._currentElement.props;switch(this._tag){case"audio":case"form":case"iframe":case"img":case"link":case"object":case"source":case"video":this._wrapperState={listeners:null},e.getReactMountReady().enqueue(c,this);break;case"input":N.mountWrapper(this,i,t),i=N.getHostProps(this,i),e.getReactMountReady().enqueue(c,this);break;case"option":M.mountWrapper(this,i,t),i=M.getHostProps(this,i);break;case"select":I.mountWrapper(this,i,t),i=I.getHostProps(this,i),e.getReactMountReady().enqueue(c,this);break;case"textarea":A.mountWrapper(this,i,t),i=A.getHostProps(this,i),e.getReactMountReady().enqueue(c,this)}o(this,i);var a,p;null!=t?(a=t._namespaceURI,p=t._tag):n._tag&&(a=n._namespaceURI,p=n._tag),(null==a||a===C.svg&&"foreignobject"===p)&&(a=C.html),a===C.html&&("svg"===this._tag?a=C.svg:"math"===this._tag&&(a=C.mathml)),this._namespaceURI=a;var d;if(e.useCreateElement){var f,h=n._ownerDocument;if(a===C.html)if("script"===this._tag){var m=h.createElement("div"),v=this._currentElement.type;m.innerHTML="<"+v+">",f=m.removeChild(m.firstChild)}else f=i.is?h.createElement(this._currentElement.type,i.is):h.createElement(this._currentElement.type);else f=h.createElementNS(a,this._currentElement.type);P.precacheNode(this,f),this._flags|=L.hasCachedChildNodes,this._hostParent||x.setAttributeForRoot(f),this._updateDOMProperties(null,i,e);var y=_(f);this._createInitialChildren(e,i,r,y),d=y}else{var b=this._createOpenTagMarkupAndPutListeners(e,i),E=this._createContentMarkup(e,i,r);d=!E&&z[this._tag]?b+"/>":b+">"+E+""}switch(this._tag){case"input":e.getReactMountReady().enqueue(u,this),i.autoFocus&&e.getReactMountReady().enqueue(g.focusDOMComponent,this);break;case"textarea":e.getReactMountReady().enqueue(s,this),i.autoFocus&&e.getReactMountReady().enqueue(g.focusDOMComponent,this);break;case"select":i.autoFocus&&e.getReactMountReady().enqueue(g.focusDOMComponent,this);break;case"button":i.autoFocus&&e.getReactMountReady().enqueue(g.focusDOMComponent,this);break;case"option":e.getReactMountReady().enqueue(l,this)}return d},_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(V.hasOwnProperty(r))o&&i(this,r,o,e);else{r===W&&(o&&(o=this._previousStyleCopy=y({},t.style)),o=b.createMarkupForStyles(o,this));var a=null;null!=this._tag&&f(this._tag,t)?q.hasOwnProperty(r)||(a=x.createMarkupForCustomAttribute(r,o)):a=x.createMarkupForProperty(r,o),a&&(n+=" "+a)}}return e.renderToStaticMarkup?n:(this._hostParent||(n+=" "+x.createMarkupForRoot()),n+=" "+x.createMarkupForID(this._domID))},_createContentMarkup:function(e,t,n){var r="",o=t.dangerouslySetInnerHTML;if(null!=o)null!=o.__html&&(r=o.__html);else{var i=B[m(t.children)]?t.children:null,a=null!=i?null:t.children;if(null!=i)r=D(i);else if(null!=a){var u=this.mountChildren(a,e,n);r=u.join("")}}return X[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&&_.queueHTML(r,o.__html);else{var i=B[m(t.children)]?t.children:null,a=null!=i?null:t.children;if(null!=i)""!==i&&_.queueText(r,i);else if(null!=a)for(var u=this.mountChildren(a,e,n),s=0;s"},receiveComponent:function(){},getHostNode:function(){return i.getNodeFromInstance(this)},unmountComponent:function(){i.uncacheNode(this)}}),e.exports=a},function(e,t){"use strict";var n={useCreateElement:!0,useFiber:!1};e.exports=n},function(e,t,n){"use strict";var r=n(32),o=n(5),i={dangerouslyProcessChildrenUpdates:function(e,t){var n=o.getNodeFromInstance(e);r.processUpdates(n,t)}};e.exports=i},function(e,t,n){"use strict";function r(){this._rootNodeID&&p.updateWrapper(this)}function o(e){var t=this._currentElement.props,n=s.executeOnChange(t,e);c.asap(r,this);var o=t.name;if("radio"===t.type&&null!=o){for(var a=l.getNodeFromInstance(this),u=a;u.parentNode;)u=u.parentNode;for(var p=u.querySelectorAll("input[name="+JSON.stringify(""+o)+'][type="radio"]'),d=0;dt.end?(n=t.end,r=t.start):(n=t.start,r=t.end),o.moveToElementText(e),o.moveStart("character",n),o.setEndPoint("EndToStart",o),o.moveEnd("character",r-n),o.select()}function u(e,t){if(window.getSelection){var n=window.getSelection(),r=e[c()].length,o=Math.min(t.start,r),i=void 0===t.end?o:Math.min(t.end,r);if(!n.extend&&o>i){var a=i;i=o,o=a}var u=l(e,o),s=l(e,i);if(u&&s){var p=document.createRange();p.setStart(u.node,u.offset),n.removeAllRanges(),o>i?(n.addRange(p),n.extend(s.node,s.offset)):(p.setEnd(s.node,s.offset),n.addRange(p))}}}var s=n(6),l=n(156),c=n(69),p=s.canUseDOM&&"selection"in document&&!("getSelection"in window),d={getOffsets:p?o:i,setOffsets:p?a:u};e.exports=d},function(e,t,n){"use strict";var r=n(3),o=n(4),i=n(32),a=n(13),u=n(5),s=n(29),l=(n(1),n(47),function(e){this._currentElement=e,this._stringText=""+e,this._hostNode=null,this._hostParent=null,this._domID=0,this._mountIndex=0,this._closingComment=null,this._commentNodes=null});o(l.prototype,{mountComponent:function(e,t,n,r){var o=n._idCounter++,i=" react-text: "+o+" ",l=" /react-text ";if(this._domID=o,this._hostParent=t,e.useCreateElement){var c=n._ownerDocument,p=c.createComment(i),d=c.createComment(l),f=a(c.createDocumentFragment());return a.queueChild(f,a(p)),this._stringText&&a.queueChild(f,a(c.createTextNode(this._stringText))),a.queueChild(f,a(d)),u.precacheNode(this,p),this._closingComment=d,f}var h=s(this._stringText);return e.renderToStaticMarkup?h:""+h+""},receiveComponent:function(e,t){if(e!==this._currentElement){this._currentElement=e;var n=""+e;if(n!==this._stringText){this._stringText=n;var r=this.getHostNode();i.replaceDelimitedText(r[0],r[1],n)}}},getHostNode:function(){var e=this._commentNodes;if(e)return e;if(!this._closingComment)for(var t=u.getNodeFromInstance(this),n=t.nextSibling;;){if(null==n?r("67",this._domID):void 0,8===n.nodeType&&" /react-text "===n.nodeValue){this._closingComment=n;break}n=n.nextSibling}return e=[this._hostNode,this._closingComment],this._commentNodes=e,e},unmountComponent:function(){this._closingComment=null,this._commentNodes=null,u.uncacheNode(this)}}),e.exports=l},function(e,t,n){"use strict";function r(){this._rootNodeID&&c.updateWrapper(this)}function o(e){var t=this._currentElement.props,n=u.executeOnChange(t,e);return l.asap(r,this),n}var i=n(3),a=n(4),u=n(37),s=n(5),l=n(9),c=(n(1),n(2),{getHostProps:function(e,t){null!=t.dangerouslySetInnerHTML?i("91"):void 0;var n=a({},t,{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue,onChange:e._wrapperState.onChange});return n},mountWrapper:function(e,t){var n=u.getValue(t),r=n;if(null==n){var a=t.defaultValue,s=t.children;null!=s&&(null!=a?i("92"):void 0,Array.isArray(s)&&(s.length<=1?void 0:i("93"),s=s[0]),a=""+s),null==a&&(a=""),r=a}e._wrapperState={initialValue:""+r,listeners:null,onChange:o.bind(e)}},updateWrapper:function(e){var t=e._currentElement.props,n=s.getNodeFromInstance(e),r=u.getValue(t);if(null!=r){var o=""+r;o!==n.value&&(n.value=o),null==t.defaultValue&&(n.defaultValue=o)}null!=t.defaultValue&&(n.defaultValue=t.defaultValue)},postMountWrapper:function(e){var t=s.getNodeFromInstance(e),n=t.textContent;n===e._wrapperState.initialValue&&(t.value=n)}});e.exports=c},function(e,t,n){"use strict";function r(e,t){"_hostNode"in e?void 0:s("33"),"_hostNode"in t?void 0:s("33");for(var n=0,r=e;r;r=r._hostParent)n++;for(var o=0,i=t;i;i=i._hostParent)o++;for(;n-o>0;)e=e._hostParent,n--;for(;o-n>0;)t=t._hostParent,o--;for(var a=n;a--;){if(e===t)return e;e=e._hostParent,t=t._hostParent}return null}function o(e,t){"_hostNode"in e?void 0:s("35"),"_hostNode"in t?void 0:s("35");for(;t;){if(t===e)return!0;t=t._hostParent}return!1}function i(e){return"_hostNode"in e?void 0:s("36"),e._hostParent}function a(e,t,n){for(var r=[];e;)r.push(e),e=e._hostParent;var o;for(o=r.length;o-- >0;)t(r[o],"captured",n);for(o=0;o0;)n(s[l],"captured",i)}var s=n(3);n(1);e.exports={isAncestor:o,getLowestCommonAncestor:r,getParentInstance:i,traverseTwoPhase:a,traverseEnterLeave:u}},function(e,t,n){"use strict";function r(){this.reinitializeTransaction()}var o=n(4),i=n(9),a=n(28),u=n(7),s={initialize:u,close:function(){d.isBatchingUpdates=!1}},l={initialize:u,close:i.flushBatchedUpdates.bind(i)},c=[l,s];o(r.prototype,a,{getTransactionWrappers:function(){return c}});var p=new r,d={isBatchingUpdates:!1,batchedUpdates:function(e,t,n,r,o,i){var a=d.isBatchingUpdates;return d.isBatchingUpdates=!0,a?e(t,n,r,o,i):p.perform(e,null,t,n,r,o,i)}};e.exports=d},function(e,t,n){"use strict";function r(){x||(x=!0,g.EventEmitter.injectReactEventListener(y),g.EventPluginHub.injectEventPluginOrder(u),g.EventPluginUtils.injectComponentTree(d),g.EventPluginUtils.injectTreeTraversal(h),g.EventPluginHub.injectEventPluginsByName({SimpleEventPlugin:E,EnterLeaveEventPlugin:s,ChangeEventPlugin:a,SelectEventPlugin:C,BeforeInputEventPlugin:i}),g.HostComponent.injectGenericComponentClass(p),g.HostComponent.injectTextComponentClass(m),g.DOMProperty.injectDOMPropertyConfig(o),g.DOMProperty.injectDOMPropertyConfig(l),g.DOMProperty.injectDOMPropertyConfig(_),g.EmptyComponent.injectEmptyComponentFactory(function(e){return new f(e)}),g.Updates.injectReconcileTransaction(b),g.Updates.injectBatchingStrategy(v),g.Component.injectEnvironment(c))}var o=n(96),i=n(98),a=n(100),u=n(102),s=n(103),l=n(105),c=n(107),p=n(110),d=n(5),f=n(112),h=n(120),m=n(118),v=n(121),y=n(125),g=n(126),b=n(131),_=n(136),C=n(137),E=n(138),x=!1;e.exports={inject:r}},function(e,t){"use strict";var n="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103;e.exports=n},function(e,t,n){"use strict";function r(e){o.enqueueEvents(e),o.processEventQueue(!1)}var o=n(20),i={handleTopLevel:function(e,t,n,i){var a=o.extractEvents(e,t,n,i);r(a)}};e.exports=i},function(e,t,n){"use strict";function r(e){for(;e._hostParent;)e=e._hostParent;var t=p.getNodeFromInstance(e),n=t.parentNode;return p.getClosestInstanceFromNode(n)}function o(e,t){this.topLevelType=e,this.nativeEvent=t,this.ancestors=[]}function i(e){var t=f(e.nativeEvent),n=p.getClosestInstanceFromNode(t),o=n;do e.ancestors.push(o),o=o&&r(o);while(o);for(var i=0;i/,i=/^<\!\-\-/,a={CHECKSUM_ATTR_NAME:"data-react-checksum",addChecksumToMarkup:function(e){var t=r(e);return i.test(e)?e:e.replace(o," "+a.CHECKSUM_ATTR_NAME+'="'+t+'"$&')},canReuseMarkup:function(e,t){var n=t.getAttribute(a.CHECKSUM_ATTR_NAME);n=n&&parseInt(n,10);var o=r(e);return o===n}};e.exports=a},function(e,t,n){"use strict";function r(e,t,n){return{type:"INSERT_MARKUP",content:e,fromIndex:null,fromNode:null,toIndex:n,afterNode:t}}function o(e,t,n){return{type:"MOVE_EXISTING",content:null,fromIndex:e._mountIndex,fromNode:d.getHostNode(e),toIndex:n,afterNode:t}}function i(e,t){return{type:"REMOVE_NODE",content:null,fromIndex:e._mountIndex,fromNode:t,toIndex:null,afterNode:null}}function a(e){return{type:"SET_MARKUP",content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function u(e){return{type:"TEXT_CONTENT",content:e,fromIndex:null,fromNode:null,toIndex:null,afterNode:null}}function s(e,t){return t&&(e=e||[],e.push(t)),e}function l(e,t){p.processChildrenUpdates(e,t)}var c=n(3),p=n(38),d=(n(22),n(8),n(11),n(15)),f=n(106),h=(n(7),n(152)),m=(n(1),{Mixin:{_reconcilerInstantiateChildren:function(e,t,n){return f.instantiateChildren(e,t,n)},_reconcilerUpdateChildren:function(e,t,n,r,o,i){var a,u=0;return a=h(t,u),f.updateChildren(e,a,n,r,o,this,this._hostContainerInfo,i,u),a},mountChildren:function(e,t,n){var r=this._reconcilerInstantiateChildren(e,t,n);this._renderedChildren=r;var o=[],i=0;for(var a in r)if(r.hasOwnProperty(a)){var u=r[a],s=0,l=d.mountComponent(u,t,this,this._hostContainerInfo,n,s);u._mountIndex=i++,o.push(l)}return o},updateTextContent:function(e){var t=this._renderedChildren;f.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&c("118");var r=[u(e)];l(this,r)},updateMarkup:function(e){var t=this._renderedChildren;f.unmountChildren(t,!1);for(var n in t)t.hasOwnProperty(n)&&c("118");var r=[a(e)];l(this,r)},updateChildren:function(e,t,n){this._updateChildren(e,t,n)},_updateChildren:function(e,t,n){var r=this._renderedChildren,o={},i=[],a=this._reconcilerUpdateChildren(r,e,i,o,t,n);if(a||r){var u,c=null,p=0,f=0,h=0,m=null;for(u in a)if(a.hasOwnProperty(u)){var v=r&&r[u],y=a[u];v===y?(c=s(c,this.moveChild(v,m,p,f)),f=Math.max(v._mountIndex,f),v._mountIndex=p):(v&&(f=Math.max(v._mountIndex,f)),c=s(c,this._mountChildAtIndex(y,i[h],m,p,t,n)),h++),p++,m=d.getHostNode(y)}for(u in o)o.hasOwnProperty(u)&&(c=s(c,this._unmountChild(r[u],o[u])));c&&l(this,c),this._renderedChildren=a}},unmountChildren:function(e){var t=this._renderedChildren;f.unmountChildren(t,e),this._renderedChildren=null},moveChild:function(e,t,n,r){if(e._mountIndex=t)return{node:o,offset:t-i};i=a}o=n(r(o))}}e.exports=o},function(e,t,n){"use strict";function r(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n["ms"+e]="MS"+t,n["O"+e]="o"+t.toLowerCase(),n}function o(e){if(u[e])return u[e];if(!a[e])return e;var t=a[e];for(var n in t)if(t.hasOwnProperty(n)&&n in s)return u[e]=t[n];return""}var i=n(6),a={animationend:r("Animation","AnimationEnd"),animationiteration:r("Animation","AnimationIteration"),animationstart:r("Animation","AnimationStart"),transitionend:r("Transition","TransitionEnd")},u={},s={};i.canUseDOM&&(s=document.createElement("div").style,"AnimationEvent"in window||(delete a.animationend.animation,delete a.animationiteration.animation,delete a.animationstart.animation),"TransitionEvent"in window||delete a.transitionend.transition),e.exports=o},function(e,t,n){"use strict";function r(e){return'"'+o(e)+'"'}var o=n(29);e.exports=r},function(e,t,n){"use strict";var r=n(63);e.exports=r.renderSubtreeIntoContainer},function(e,t){"use strict";function n(e){var t=/[=:]/g,n={"=":"=0",":":"=2"},r=(""+e).replace(t,function(e){return n[e]});return"$"+r}function r(e){var t=/(=0|=2)/g,n={"=0":"=","=2":":"},r="."===e[0]&&"$"===e[1]?e.substring(2):e.substring(1);return(""+r).replace(t,function(e){return n[e]})}var o={escape:n,unescape:r};e.exports=o},function(e,t,n){"use strict";var r=n(18),o=(n(1),function(e){var t=this;if(t.instancePool.length){var n=t.instancePool.pop();return t.call(n,e),n}return new t(e)}),i=function(e,t){var n=this;if(n.instancePool.length){var r=n.instancePool.pop();return n.call(r,e,t),r}return new n(e,t)},a=function(e,t,n){var r=this;if(r.instancePool.length){var o=r.instancePool.pop();return r.call(o,e,t,n),o}return new r(e,t,n)},u=function(e,t,n,r){var o=this;if(o.instancePool.length){var i=o.instancePool.pop();return o.call(i,e,t,n,r),i}return new o(e,t,n,r)},s=function(e){var t=this;e instanceof t?void 0:r("25"),e.destructor(),t.instancePool.length>"),P={array:a("array"),bool:a("boolean"),func:a("function"),number:a("number"),object:a("object"),string:a("string"),symbol:a("symbol"),any:u(),arrayOf:s,element:l(),instanceOf:c,node:h(),objectOf:d,oneOf:p,oneOfType:f,shape:m};o.prototype=Error.prototype,e.exports=P},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n},function(e,t,n){"use strict";function r(e,t,n){this.props=e,this.context=t,this.refs=s,this.updater=n||u}function o(){}var i=n(4),a=n(48),u=n(49),s=n(19);o.prototype=a.prototype,r.prototype=new o,r.prototype.constructor=r,i(r.prototype,a.prototype),r.prototype.isPureReactComponent=!0,e.exports=r},function(e,t){"use strict";e.exports="15.4.2"},function(e,t,n){"use strict";function r(e){return i.isValidElement(e)?void 0:o("143"),e}var o=n(18),i=n(17);n(1);e.exports=r},function(e,t,n){"use strict";function r(e,t){return e&&"object"===("undefined"==typeof e?"undefined":a(e))&&null!=e.key?c.escape(e.key):t.toString(36)}function o(e,t,n,i){var f="undefined"==typeof e?"undefined":a(e);if("undefined"!==f&&"boolean"!==f||(e=null),null===e||"string"===f||"number"===f||"object"===f&&e.$$typeof===s)return n(i,e,""===t?p+r(e,0):t),1;var h,m,v=0,y=""===t?p:t+d;if(Array.isArray(e))for(var g=0;g-1?i.slice(n,o+1):[],f=i.length*s,c=n*s,d={items:a,style:{height:f,paddingTop:c}};return l.default.createElement(t,u({},this.props,{virtual:d}))}}]),o}(c.PureComponent),n.propTypes={items:c.PropTypes.array.isRequired,itemHeight:c.PropTypes.number.isRequired,itemBuffer:c.PropTypes.number},n.defaultProps={itemBuffer:0},o}};t.default=y},81:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e){return e.pageYOffset?e.pageYOffset:e.document?e.document.documentElement&&e.document.documentElement.scrollTop?e.document.documentElement.scrollTop:e.document.body&&e.document.body.scrollTop?e.document.body.scrollTop:0:e.scrollY||e.scrollTop||0};t.default=n},82:function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(83),i=o(r),s=n(81),a=o(s),u=function(e,t,n,o,r){if(t&&o&&n&&0!==n.length){var s=t.innerHeight,u=t.clientHeight,f=s||u;if(f){var c=(0,a.default)(t),l=c+f,d=(0,i.default)(e)-(0,i.default)(t),p=o*n.length,h=Math.max(0,c-d),m=Math.max(0,Math.min(p,l-d)),y=Math.max(0,Math.floor(h/o)-r),v=Math.min(n.length,Math.ceil(m/o)+r)-1;return{firstItemIndex:y,lastItemIndex:v}}}};t.default=u},83:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function e(t){return"undefined"!=typeof t&&t?(t.offsetTop||0)+e(t.offsetParent):0};t.default=n}}); \ No newline at end of file diff --git a/src/VirtualList.js b/src/VirtualList.js index 58f08a1..dc87a5c 100644 --- a/src/VirtualList.js +++ b/src/VirtualList.js @@ -3,32 +3,7 @@ import ReactDOM from 'react-dom'; import getVisibleItemBounds from './utils/getVisibleItemBounds'; import throttleWithRAF from './utils/throttleWithRAF'; - -const defaultMapToVirtualProps = ({ - items, - itemHeight, -}, { - firstItemIndex, - lastItemIndex, -}) => { - const visibleItems = lastItemIndex > -1 ? items.slice(firstItemIndex, lastItemIndex + 1) : []; - // would be nice to make this not break shallowCompare with items.slice - // but theoretically we're only rendering if we need to - - // style - const height = items.length * itemHeight; - const paddingTop = firstItemIndex * itemHeight; - - return { - virtual: { - items: visibleItems, - style: { - height, - paddingTop, - }, - } - }; -} +import defaultMapToVirtualProps from './utils/defaultMapVirtualToProps'; const VirtualList = (options, mapVirtualToProps = defaultMapToVirtualProps) => (InnerComponent) => { return class vlist extends PureComponent { diff --git a/src/__tests__/VirtualList.js b/src/__tests__/VirtualList.js index 7e47273..5a642fc 100644 --- a/src/__tests__/VirtualList.js +++ b/src/__tests__/VirtualList.js @@ -150,7 +150,7 @@ describe('higher-order component that only renders visible items', () => { expect(result.props.virtual.items).toHaveLength(5); }); - it('does not provide mapVirtualToProps', () => { + it('has default mapVirtualToProps', () => { const container = { clientHeight: 500, offsetTop: 0, @@ -161,10 +161,6 @@ describe('higher-order component that only renders visible items', () => { initialState: { firstItemIndex: 0, lastItemIndex: 4, - style: { - height: 500, - paddingTop: 0, - }, }, }; @@ -182,11 +178,10 @@ describe('higher-order component that only renders visible items', () => { const result = renderer.getRenderOutput(); - expect(result.props.virtual.items).toHaveLength(5); - expect(result.props.virtual.style).toBeDefined(); + expect(result.props.virtual).toBeDefined(); }); - it('does provide mapVirtualToProps', () => { + it('allows custom mapVirtualToProps', () => { const container = { clientHeight: 500, offsetTop: 0, @@ -197,10 +192,6 @@ describe('higher-order component that only renders visible items', () => { initialState: { firstItemIndex: 0, lastItemIndex: 4, - style: { - height: 500, - paddingTop: 0, - }, }, }; @@ -221,6 +212,6 @@ describe('higher-order component that only renders visible items', () => { const result = renderer.getRenderOutput(); expect(result.props.virtual).toBeUndefined(); - expect(result.props.customItemsRef).toHaveLength(1000); + expect(result.props.customItemsRef).toBeDefined(); }); }); diff --git a/src/utils/__tests__/defaultMapVirtualToProps.js b/src/utils/__tests__/defaultMapVirtualToProps.js new file mode 100644 index 0000000..b62fa13 --- /dev/null +++ b/src/utils/__tests__/defaultMapVirtualToProps.js @@ -0,0 +1,46 @@ +import defaultMapVirtualToProps from '../defaultMapVirtualToProps'; + +const defaultProps = { + items: [1, 2, 3, 4, 5], + itemHeight: 100, +}; + +const defaultState = { + firstItemIndex: 0, + lastItemIndex: 4, +}; + +describe('function to convert state and props into virtual props', () => { + it('is a function', () => { + expect(typeof defaultMapVirtualToProps).toBe('function'); + }); + + it('returns object with items prop', () => { + const props = defaultMapVirtualToProps(defaultProps, defaultState); + + expect(props.virtual).toBeDefined(); + expect(props.virtual.items).toBeDefined(); + }); + + it('returns object with style prop', () => { + const props = defaultMapVirtualToProps(defaultProps, defaultState); + + expect(props.virtual).toBeDefined(); + expect(props.virtual.style).toBeDefined(); + expect(props.virtual.style.height).toBeDefined(); + expect(props.virtual.style.paddingTop).toBeDefined(); + }); + + it('calculates items properly', () => { + const props = defaultMapVirtualToProps(defaultProps, defaultState); + + expect(props.virtual.items).toHaveLength(5); + }); + + it('calculates style properly', () => { + const props = defaultMapVirtualToProps(defaultProps, defaultState); + + expect(props.virtual.style.height).toBe(500); + expect(props.virtual.style.paddingTop).toBe(0); + }); +}); diff --git a/src/utils/defaultMapVirtualToProps.js b/src/utils/defaultMapVirtualToProps.js new file mode 100644 index 0000000..18f09d9 --- /dev/null +++ b/src/utils/defaultMapVirtualToProps.js @@ -0,0 +1,25 @@ +const defaultMapToVirtualProps = ({ + items, + itemHeight, +}, { + firstItemIndex, + lastItemIndex, +}) => { + const visibleItems = lastItemIndex > -1 ? items.slice(firstItemIndex, lastItemIndex + 1) : []; + + // style + const height = items.length * itemHeight; + const paddingTop = firstItemIndex * itemHeight; + + return { + virtual: { + items: visibleItems, + style: { + height, + paddingTop, + }, + } + }; +} + +export default defaultMapToVirtualProps; \ No newline at end of file From 4ba0fdc60b6d540e498ba9d9f86a55809aeacfa6 Mon Sep 17 00:00:00 2001 From: Dizzle Date: Wed, 15 Mar 2017 20:56:13 -0400 Subject: [PATCH 6/7] Updates lib; minor version bump --- lib/VirtualList.js | 53 ++++++--------------------- lib/utils/defaultMapVirtualToProps.js | 29 +++++++++++++++ lib/utils/throttleWithRAF.js | 22 +++++++++++ package.json | 2 +- 4 files changed, 63 insertions(+), 43 deletions(-) create mode 100644 lib/utils/defaultMapVirtualToProps.js create mode 100644 lib/utils/throttleWithRAF.js diff --git a/lib/VirtualList.js b/lib/VirtualList.js index dac28b8..a065fcc 100644 --- a/lib/VirtualList.js +++ b/lib/VirtualList.js @@ -20,6 +20,14 @@ var _getVisibleItemBounds = require('./utils/getVisibleItemBounds'); var _getVisibleItemBounds2 = _interopRequireDefault(_getVisibleItemBounds); +var _throttleWithRAF = require('./utils/throttleWithRAF'); + +var _throttleWithRAF2 = _interopRequireDefault(_throttleWithRAF); + +var _defaultMapVirtualToProps = require('./utils/defaultMapVirtualToProps'); + +var _defaultMapVirtualToProps2 = _interopRequireDefault(_defaultMapVirtualToProps); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -29,6 +37,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var VirtualList = function VirtualList(options) { + var mapVirtualToProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultMapVirtualToProps2.default; return function (InnerComponent) { var _class, _temp; @@ -58,21 +67,7 @@ var VirtualList = function VirtualList(options) { // if requestAnimationFrame is available, use it to throttle refreshState if (window && 'requestAnimationFrame' in window) { - (function () { - var refreshState = _this.refreshState; - - _this.refreshState = function () { - if (_this.isRefreshingState) return; - - _this.isRefreshingState = true; - - window.requestAnimationFrame(function () { - refreshState(); - - _this.isRefreshingState = false; - }); - }; - })(); + _this.refreshState = (0, _throttleWithRAF2.default)(_this.refreshState); } return _this; } @@ -134,33 +129,7 @@ var VirtualList = function VirtualList(options) { }, { key: 'render', value: function render() { - var _state = this.state, - firstItemIndex = _state.firstItemIndex, - lastItemIndex = _state.lastItemIndex; - var _props2 = this.props, - items = _props2.items, - itemHeight = _props2.itemHeight; - - - var visibleItems = lastItemIndex > -1 ? items.slice(firstItemIndex, lastItemIndex + 1) : []; - // would be nice to make this not break shallowCompare with items.slice - // but theoretically we're only rendering if we need to - - // style - var height = items.length * itemHeight; - var paddingTop = firstItemIndex * itemHeight; - - var virtual = { - items: visibleItems, - style: { - height: height, - paddingTop: paddingTop - } - }; - - return _react2.default.createElement(InnerComponent, _extends({}, this.props, { - virtual: virtual - })); + return _react2.default.createElement(InnerComponent, _extends({}, this.props, mapVirtualToProps(this.props, this.state))); } }]); diff --git a/lib/utils/defaultMapVirtualToProps.js b/lib/utils/defaultMapVirtualToProps.js new file mode 100644 index 0000000..7cbd100 --- /dev/null +++ b/lib/utils/defaultMapVirtualToProps.js @@ -0,0 +1,29 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +var defaultMapToVirtualProps = function defaultMapToVirtualProps(_ref, _ref2) { + var items = _ref.items, + itemHeight = _ref.itemHeight; + var firstItemIndex = _ref2.firstItemIndex, + lastItemIndex = _ref2.lastItemIndex; + + var visibleItems = lastItemIndex > -1 ? items.slice(firstItemIndex, lastItemIndex + 1) : []; + + // style + var height = items.length * itemHeight; + var paddingTop = firstItemIndex * itemHeight; + + return { + virtual: { + items: visibleItems, + style: { + height: height, + paddingTop: paddingTop + } + } + }; +}; + +exports.default = defaultMapToVirtualProps; \ No newline at end of file diff --git a/lib/utils/throttleWithRAF.js b/lib/utils/throttleWithRAF.js new file mode 100644 index 0000000..91a30a0 --- /dev/null +++ b/lib/utils/throttleWithRAF.js @@ -0,0 +1,22 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +var _arguments = arguments; + +exports.default = function (fn) { + var running = false; + + return function () { + if (running) return; + + running = true; + + window.requestAnimationFrame(function () { + fn.apply(undefined, _arguments); + + running = false; + }); + }; +}; \ No newline at end of file diff --git a/package.json b/package.json index f747b53..bf6ae68 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-virtual-list", - "version": "2.1.0", + "version": "2.2.0", "description": "Super simple virtualized list React higher-order component", "main": "dist/VirtualList.js", "directories": { From 39653e9b2535570f37ae45a1ee424f11cb6e786b Mon Sep 17 00:00:00 2001 From: Dizzle Date: Wed, 15 Mar 2017 21:01:27 -0400 Subject: [PATCH 7/7] Fixes main script --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bf6ae68..6694e50 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-virtual-list", "version": "2.2.0", "description": "Super simple virtualized list React higher-order component", - "main": "dist/VirtualList.js", + "main": "lib/VirtualList.js", "directories": { "test": "test" },