├── .vscode
    ├── launch.json
    └── tasks.json
├── README.md
├── bin
    ├── index.js
    ├── react-dom.js
    ├── react.js
    ├── require.js
    └── virtualized-scroll-viewer.js
├── index.html
├── libs
    ├── react-dom.js
    ├── react.js
    └── require.js
├── src
    ├── animated-group.ts
    ├── animated-size-group.ts
    ├── images.ts
    ├── index.tsx
    ├── tsconfig.json
    ├── typings
    │   └── react
    │   │   ├── react-addons-css-transition-group.d.ts
    │   │   ├── react-addons-transition-group.d.ts
    │   │   ├── react-dom.d.ts
    │   │   ├── react-global.d.ts
    │   │   └── react.d.ts
    ├── virtualized-list.tsx
    ├── virtualized-scroll-viewer-extensions.ts
    └── virtualized-scroll-viewer.ts
├── tsconfig.json
└── tslint.json


/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"version": "0.2.0",
 3 | 	"configurations": [
 4 | 		{
 5 | 			"name": "Launch index.html",
 6 | 			"type": "chrome",
 7 | 			"request": "launch",
 8 | 			"file": "${workspaceRoot}/index.html",
 9 |             "sourceMaps": true,
10 |             "userDataDir": "c:\\temp\\"
11 | 		},
12 | 		{
13 | 			"name": "Launch localhost with sourcemaps",
14 | 			"type": "chrome",
15 | 			"request": "launch",
16 | 			"url": "http://localhost/mypage.html",
17 | 			"sourceMaps": true,
18 | 			"webRoot": "wwwroot",
19 |             "userDataDir": "c:\\temp\\"
20 | 		},
21 | 		{
22 | 			"name": "Attach",
23 | 			"type": "chrome",
24 | 			"request": "attach",
25 | 			"port": 9222
26 | 		}
27 | 	]
28 | }


--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
  1 | // Available variables which can be used inside of strings.
  2 | // ${workspaceRoot}: the root folder of the team
  3 | // ${file}: the current opened file
  4 | // ${fileBasename}: the current opened file's basename
  5 | // ${fileDirname}: the current opened file's dirname
  6 | // ${fileExtname}: the current opened file's extension
  7 | // ${cwd}: the current working directory of the spawned process
  8 | 
  9 | // A task runner that calls the Typescript compiler (tsc) and
 10 | // Compiles a HelloWorld.ts program
 11 | {
 12 | 	"version": "0.1.0",
 13 | 
 14 | 	// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
 15 | 	"command": "tsc",
 16 | 
 17 | 	// The command is a shell script
 18 | 	"isShellCommand": true,
 19 | 
 20 | 	// Show the output window only if unrecognized errors occur.
 21 | 	"showOutput": "silent",
 22 | 
 23 | 	// args is the HelloWorld program to compile.
 24 | 	"args": ["-p", "."],
 25 | 
 26 | 	// use the standard tsc problem matcher to find compile problems
 27 | 	// in the output.
 28 | 	"problemMatcher": "$tsc"
 29 | }
 30 | 
 31 | // A task runner that calls the Typescript compiler (tsc) and
 32 | // compiles based on a tsconfig.json file that is present in
 33 | // the root of the folder open in VSCode
 34 | /*
 35 | {
 36 | 	"version": "0.1.0",
 37 | 
 38 | 	// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
 39 | 	"command": "tsc",
 40 | 
 41 | 	// The command is a shell script
 42 | 	"isShellCommand": true,
 43 | 
 44 | 	// Show the output window only if unrecognized errors occur.
 45 | 	"showOutput": "silent",
 46 | 
 47 | 	// Tell the tsc compiler to use the tsconfig.json from the open folder.
 48 | 	"args": ["-p", "."],
 49 | 
 50 | 	// use the standard tsc problem matcher to find compile problems
 51 | 	// in the output.
 52 | 	"problemMatcher": "$tsc"
 53 | }
 54 | */
 55 | 
 56 | // A task runner configuration for gulp. Gulp provides a less task
 57 | // which compiles less to css.
 58 | /*
 59 | {
 60 | 	"version": "0.1.0",
 61 | 	"command": "gulp",
 62 | 	"isShellCommand": true,
 63 | 	"tasks": [
 64 | 		{
 65 | 			"taskName": "less",
 66 | 			// Make this the default build command.
 67 | 			"isBuildCommand": true,
 68 | 			// Show the output window only if unrecognized errors occur.
 69 | 			"showOutput": "silent",
 70 | 			// Use the standard less compilation problem matcher.
 71 | 			"problemMatcher": "$lessCompile"
 72 | 		}
 73 | 	]
 74 | }
 75 | */
 76 | 
 77 | // Uncomment the following section to use jake to build a workspace
 78 | // cloned from https://github.com/Microsoft/TypeScript.git
 79 | /*
 80 | {
 81 | 	"version": "0.1.0",
 82 | 	// Task runner is jake
 83 | 	"command": "jake",
 84 | 	// Need to be executed in shell / cmd
 85 | 	"isShellCommand": true,
 86 | 	"showOutput": "silent",
 87 | 	"tasks": [
 88 | 		{
 89 | 			// TS build command is local.
 90 | 			"taskName": "local",
 91 | 			// Make this the default build command.
 92 | 			"isBuildCommand": true,
 93 | 			// Show the output window only if unrecognized errors occur.
 94 | 			"showOutput": "silent",
 95 | 			// Use the redefined Typescript output problem matcher.
 96 | 			"problemMatcher": [
 97 | 				"$tsc"
 98 | 			]
 99 | 		}
100 | 	]
101 | }
102 | */
103 | 
104 | // Uncomment the section below to use msbuild and generate problems
105 | // for csc, cpp, tsc and vb. The configuration assumes that msbuild
106 | // is available on the path and a solution file exists in the
107 | // workspace folder root.
108 | /*
109 | {
110 | 	"version": "0.1.0",
111 | 	"command": "msbuild",
112 | 	"args": [
113 | 		// Ask msbuild to generate full paths for file names.
114 | 		"/property:GenerateFullPaths=true"
115 | 	],
116 | 	"taskSelector": "/t:",
117 | 	"showOutput": "silent",
118 | 	"tasks": [
119 | 		{
120 | 			"taskName": "build",
121 | 			// Show the output window only if unrecognized errors occur.
122 | 			"showOutput": "silent",
123 | 			// Use the standard MS compiler pattern to detect errors, warnings
124 | 			// and infos in the output.
125 | 			"problemMatcher": "$msCompile"
126 | 		}
127 | 	]
128 | }
129 | */
130 | 
131 | // Uncomment the following section to use msbuild which compiles Typescript
132 | // and less files.
133 | /*
134 | {
135 | 	"version": "0.1.0",
136 | 	"command": "msbuild",
137 | 	"args": [
138 | 		// Ask msbuild to generate full paths for file names.
139 | 		"/property:GenerateFullPaths=true"
140 | 	],
141 | 	"taskSelector": "/t:",
142 | 	"showOutput": "silent",
143 | 	"tasks": [
144 | 		{
145 | 			"taskName": "build",
146 | 			// Show the output window only if unrecognized errors occur.
147 | 			"showOutput": "silent",
148 | 			// Use the standard MS compiler pattern to detect errors, warnings
149 | 			// and infos in the output.
150 | 			"problemMatcher": [
151 | 				"$msCompile",
152 | 				"$lessCompile"
153 | 			]
154 | 		}
155 | 	]
156 | }
157 | */
158 | // A task runner example that defines a problemMatcher inline instead of using
159 | // a predefined one.
160 | /*
161 | {
162 | 	"version": "0.1.0",
163 | 	"command": "tsc",
164 | 	"isShellCommand": true,
165 | 	"args": ["HelloWorld.ts"],
166 | 	"showOutput": "silent",
167 | 	"problemMatcher": {
168 | 		// The problem is owned by the typescript language service. Ensure that the problems
169 | 		// are merged with problems produced by Visual Studio's language service.
170 | 		"owner": "typescript",
171 | 		// The file name for reported problems is relative to the current working directory.
172 | 		"fileLocation": ["relative", "${cwd}"],
173 | 		// The actual pattern to match problems in the output.
174 | 		"pattern": {
175 | 			// The regular expression. Matches HelloWorld.ts(2,10): error TS2339: Property 'logg' does not exist on type 'Console'.
176 | 			"regexp": "^([^\\s].*)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
177 | 			// The match group that denotes the file containing the problem.
178 | 			"file": 1,
179 | 			// The match group that denotes the problem location.
180 | 			"location": 2,
181 | 			// The match group that denotes the problem's severity. Can be omitted.
182 | 			"severity": 3,
183 | 			// The match group that denotes the problem code. Can be omitted.
184 | 			"code": 4,
185 | 			// The match group that denotes the problem's message.
186 | 			"message": 5
187 | 		}
188 | 	}
189 | }
190 | */


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-virtualized-list
 2 | Virtualization technique applied to a react list component
 3 | 
 4 | Lists tend to grow and have hundreds of DOM elements which can become a problem specially on mobile devices. Using a virtualization technique (or windowing) we can discard the elements that are not visible on the viewport thus improving the performance when scrolling a list with thousands of elements.
 5 | 
 6 | ### List features:
 7 | - Items virtualization (only visible items are rendered)
 8 | - Supports variable items' size (automatic size detection, no need to specify)
 9 | - Supports items' animation
10 | - Smooth scrolling
11 | - Introduces extra elements but with minimal impact in css
12 | - Automatic feature detection: disables automatically when virtualization is not possible
13 | 
14 | ### Animation features (CSSTransitionGroup like component included):
15 | - Supports transitions duration based on CSS (no need to set transition duration in code)
16 | - Supports transition from/to auto width/height
17 | 
18 | 


--------------------------------------------------------------------------------
/bin/index.js:
--------------------------------------------------------------------------------
  1 | var __extends = (this && this.__extends) || function (d, b) {
  2 |     for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3 |     function __() { this.constructor = d; }
  4 |     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  5 | };
  6 | define("virtualized-scroll-viewer-extensions", ["require", "exports"], function (require, exports) {
  7 |     "use strict";
  8 |     var ScrollExtensions;
  9 |     (function (ScrollExtensions) {
 10 |         var OVERFLOW_REGEX = /(auto|scroll)/;
 11 |         var NON_SCROLLABLE_ELEMENT_ATRIBUTE = "data-not-scrollable";
 12 |         (function (ScrollDirection) {
 13 |             ScrollDirection[ScrollDirection["Horizontal"] = 0] = "Horizontal";
 14 |             ScrollDirection[ScrollDirection["Vertical"] = 1] = "Vertical";
 15 |         })(ScrollExtensions.ScrollDirection || (ScrollExtensions.ScrollDirection = {}));
 16 |         var ScrollDirection = ScrollExtensions.ScrollDirection;
 17 |         function getScrollHostInfo(element, excludeStaticParent) {
 18 |             if (element === null || element === undefined || element instanceof Document) {
 19 |                 return {
 20 |                     scrollHost: window,
 21 |                     scrollDirection: ScrollDirection.Vertical,
 22 |                 };
 23 |             }
 24 |             var elementComputedStyle = getComputedStyle(element);
 25 |             excludeStaticParent = excludeStaticParent || elementComputedStyle.position === "absolute";
 26 |             if (!excludeStaticParent || elementComputedStyle.position !== "static") {
 27 |                 var isOverFlow = OVERFLOW_REGEX.test(elementComputedStyle.overflow +
 28 |                     elementComputedStyle.overflowY +
 29 |                     elementComputedStyle.overflowX);
 30 |                 if (isOverFlow) {
 31 |                     if (!element.hasAttribute(NON_SCROLLABLE_ELEMENT_ATRIBUTE)) {
 32 |                         return {
 33 |                             scrollHost: element,
 34 |                             scrollDirection: OVERFLOW_REGEX.test(elementComputedStyle.overflowY) ? ScrollDirection.Vertical :
 35 |                                 ScrollDirection.Horizontal,
 36 |                         };
 37 |                     }
 38 |                 }
 39 |             }
 40 |             return getScrollHostInfo(element.parentElement, excludeStaticParent);
 41 |         }
 42 |         ScrollExtensions.getScrollHostInfo = getScrollHostInfo;
 43 |         function getScrollInfo(scrollHost) {
 44 |             if (scrollHost instanceof Window) {
 45 |                 return {
 46 |                     scrollHost: scrollHost,
 47 |                     scroll: {
 48 |                         x: document.body.scrollLeft,
 49 |                         y: document.body.scrollTop,
 50 |                         height: document.body.scrollHeight,
 51 |                         width: document.body.scrollWidth,
 52 |                     },
 53 |                     viewport: {
 54 |                         x: 0,
 55 |                         y: 0,
 56 |                         height: scrollHost.innerHeight,
 57 |                         width: scrollHost.innerWidth,
 58 |                     },
 59 |                 };
 60 |             }
 61 |             else if (scrollHost instanceof HTMLElement) {
 62 |                 return {
 63 |                     scrollHost: scrollHost,
 64 |                     scroll: {
 65 |                         x: scrollHost.scrollLeft,
 66 |                         y: scrollHost.scrollTop,
 67 |                         height: scrollHost.scrollHeight,
 68 |                         width: scrollHost.scrollWidth,
 69 |                     },
 70 |                     viewport: {
 71 |                         x: 0,
 72 |                         y: 0,
 73 |                         height: scrollHost.clientHeight,
 74 |                         width: scrollHost.clientWidth,
 75 |                     },
 76 |                 };
 77 |             }
 78 |             return null;
 79 |         }
 80 |         ScrollExtensions.getScrollInfo = getScrollInfo;
 81 |         function setScrollOffset(scrollHost, x, y, increment) {
 82 |             if (increment === void 0) { increment = false; }
 83 |             if (scrollHost instanceof Window) {
 84 |                 scrollHost = document.body;
 85 |             }
 86 |             var scrollHostElement = scrollHost;
 87 |             if (!isNaN(y)) {
 88 |                 if (increment) {
 89 |                     y += scrollHostElement.scrollTop;
 90 |                 }
 91 |                 scrollHostElement.scrollTop = y;
 92 |             }
 93 |             if (!isNaN(x)) {
 94 |                 if (increment) {
 95 |                     x += scrollHostElement.scrollLeft;
 96 |                 }
 97 |                 scrollHostElement.scrollLeft = x;
 98 |             }
 99 |         }
100 |         ScrollExtensions.setScrollOffset = setScrollOffset;
101 |     })(ScrollExtensions = exports.ScrollExtensions || (exports.ScrollExtensions = {}));
102 |     var ObjectExtensions;
103 |     (function (ObjectExtensions) {
104 |         function assign(target) {
105 |             var sources = [];
106 |             for (var _i = 1; _i < arguments.length; _i++) {
107 |                 sources[_i - 1] = arguments[_i];
108 |             }
109 |             if (target == null) {
110 |                 throw new TypeError("Cannot convert undefined or null to object");
111 |             }
112 |             target = Object(target);
113 |             for (var index = 1; index < arguments.length; index++) {
114 |                 var source = arguments[index];
115 |                 if (source != null) {
116 |                     for (var key in source) {
117 |                         if (Object.prototype.hasOwnProperty.call(source, key)) {
118 |                             target[key] = source[key];
119 |                         }
120 |                     }
121 |                 }
122 |             }
123 |             return target;
124 |         }
125 |         ObjectExtensions.assign = assign;
126 |     })(ObjectExtensions = exports.ObjectExtensions || (exports.ObjectExtensions = {}));
127 | });
128 | define("animated-group", ["require", "exports", "react", "react-dom", "virtualized-scroll-viewer-extensions"], function (require, exports, React, ReactDOM, virtualized_scroll_viewer_extensions_1) {
129 |     "use strict";
130 |     var ANIMATION_APPEAR = "-appear";
131 |     var ANIMATION_ENTER = "-enter";
132 |     var ANIMATION_LEAVE = "-leave";
133 |     var ANIMATION_ACTIVE = "-active";
134 |     var TICK = 17;
135 |     var AnimatedGroup = (function (_super) {
136 |         __extends(AnimatedGroup, _super);
137 |         function AnimatedGroup() {
138 |             _super.apply(this, arguments);
139 |         }
140 |         AnimatedGroup.prototype.getDefaultTransitionName = function () {
141 |             return "";
142 |         };
143 |         AnimatedGroup.prototype.getAnimatedItem = function () {
144 |             return AnimatedItem;
145 |         };
146 |         AnimatedGroup.prototype.wrapChild = function (child) {
147 |             var childAttributes = {
148 |                 shouldSuspendAnimations: this.props.shouldSuspendAnimations,
149 |                 transitionName: this.props.transitionName || this.getDefaultTransitionName(),
150 |                 onEnter: this.props.onEnter,
151 |                 onEnterStarted: this.props.onEnterStarted,
152 |                 onLeave: this.props.onLeave,
153 |                 onLeaveStarted: this.props.onLeaveStarted
154 |             };
155 |             return React.createElement(this.getAnimatedItem(), virtualized_scroll_viewer_extensions_1.ObjectExtensions.assign({}, child.props, childAttributes), child);
156 |         };
157 |         AnimatedGroup.prototype.render = function () {
158 |             return React.createElement(React.addons.TransitionGroup, virtualized_scroll_viewer_extensions_1.ObjectExtensions.assign({}, this.props, { childFactory: this.wrapChild.bind(this) }), this.props.children);
159 |         };
160 |         return AnimatedGroup;
161 |     }(React.Component));
162 |     exports.AnimatedGroup = AnimatedGroup;
163 |     var AnimatedItem = (function (_super) {
164 |         __extends(AnimatedItem, _super);
165 |         function AnimatedItem() {
166 |             _super.apply(this, arguments);
167 |             this.transitionTimeouts = [];
168 |         }
169 |         AnimatedItem.prototype.getAnimationClassName = function (element) {
170 |             return this.props.transitionName;
171 |         };
172 |         AnimatedItem.prototype.queueAction = function (action, timeout) {
173 |             var timeoutHandle = setTimeout(action, timeout);
174 |             this.transitionTimeouts.push(timeoutHandle);
175 |         };
176 |         AnimatedItem.prototype.transition = function (transitionName, done, onStart, onStartTransition, onEnd) {
177 |             var _this = this;
178 |             if (this.props.shouldSuspendAnimations && this.props.shouldSuspendAnimations()) {
179 |                 done();
180 |                 return;
181 |             }
182 |             var element = ReactDOM.findDOMNode(this);
183 |             var animationClassName = this.getAnimationClassName(element) + transitionName;
184 |             onStart(element);
185 |             element.classList.add(animationClassName);
186 |             this.queueAction(function () {
187 |                 element.classList.add(animationClassName + ANIMATION_ACTIVE);
188 |                 var elementStyle = getComputedStyle(element);
189 |                 var animationDuration = parseFloat(elementStyle.transitionDelay) + parseFloat(elementStyle.transitionDuration);
190 |                 onStartTransition(element);
191 |                 var animationEnd = function () {
192 |                     element.classList.remove(animationClassName);
193 |                     element.classList.remove(animationClassName + ANIMATION_ACTIVE);
194 |                     onEnd(element);
195 |                     done();
196 |                 };
197 |                 _this.queueAction(animationEnd, animationDuration * 1000);
198 |             }, TICK);
199 |         };
200 |         AnimatedItem.prototype.componentWillAppear = function (done) {
201 |             var _this = this;
202 |             this.transition(ANIMATION_APPEAR, done, function (element) { return _this.startEnter(element); }, function (element) { return _this.startEnterTransition(element); }, function (element) { return _this.endEnter(element); });
203 |         };
204 |         AnimatedItem.prototype.componentWillEnter = function (done) {
205 |             var _this = this;
206 |             this.transition(ANIMATION_ENTER, done, function (element) { return _this.startEnter(element); }, function (element) { return _this.startEnterTransition(element); }, function (element) { return _this.endEnter(element); });
207 |         };
208 |         AnimatedItem.prototype.startEnter = function (element) { };
209 |         AnimatedItem.prototype.startEnterTransition = function (element) {
210 |             if (this.props.onEnterStarted) {
211 |                 this.props.onEnterStarted();
212 |             }
213 |         };
214 |         AnimatedItem.prototype.endEnter = function (element) { };
215 |         AnimatedItem.prototype.componentWillLeave = function (done) {
216 |             var _this = this;
217 |             this.transition(ANIMATION_LEAVE, done, function (element) { return _this.startLeave(element); }, function (element) { return _this.startLeaveTransition(element); }, function (element) { return _this.endLeave(element); });
218 |         };
219 |         AnimatedItem.prototype.startLeave = function (element) { };
220 |         AnimatedItem.prototype.startLeaveTransition = function (element) {
221 |             if (this.props.onLeaveStarted) {
222 |                 this.props.onLeaveStarted();
223 |             }
224 |         };
225 |         AnimatedItem.prototype.endLeave = function (element) { };
226 |         AnimatedItem.prototype.componentWillUnmount = function () {
227 |             this.transitionTimeouts.forEach(function (t) { return clearTimeout(t); });
228 |             this.transitionTimeouts = [];
229 |         };
230 |         AnimatedItem.prototype.componentDidAppear = function () {
231 |             if (this.props.onEnter) {
232 |                 this.props.onEnter();
233 |             }
234 |         };
235 |         AnimatedItem.prototype.componentDidEnter = function () {
236 |             if (this.props.onEnter) {
237 |                 this.props.onEnter();
238 |             }
239 |         };
240 |         AnimatedItem.prototype.componentDidLeave = function () {
241 |             if (this.props.onLeave) {
242 |                 this.props.onLeave();
243 |             }
244 |         };
245 |         AnimatedItem.prototype.render = function () {
246 |             return React.Children.only(this.props.children);
247 |         };
248 |         return AnimatedItem;
249 |     }(React.Component));
250 |     exports.AnimatedItem = AnimatedItem;
251 | });
252 | define("animated-size-group", ["require", "exports", "animated-group"], function (require, exports, animated_group_1) {
253 |     "use strict";
254 |     var PIXELS_UNIT = "px";
255 |     var AnimatedSizeGroup = (function (_super) {
256 |         __extends(AnimatedSizeGroup, _super);
257 |         function AnimatedSizeGroup() {
258 |             _super.apply(this, arguments);
259 |         }
260 |         AnimatedSizeGroup.prototype.getAnimatedItem = function () {
261 |             return AnimatedSizeItem;
262 |         };
263 |         return AnimatedSizeGroup;
264 |     }(animated_group_1.AnimatedGroup));
265 |     exports.AnimatedSizeGroup = AnimatedSizeGroup;
266 |     var AnimatedSizeItem = (function (_super) {
267 |         __extends(AnimatedSizeItem, _super);
268 |         function AnimatedSizeItem() {
269 |             _super.apply(this, arguments);
270 |         }
271 |         AnimatedSizeItem.prototype.isDisplayInline = function (style) {
272 |             return style && style.display.indexOf("inline") === 0;
273 |         };
274 |         AnimatedSizeItem.prototype.getAnimationClassName = function (element) {
275 |             var animationClassName = _super.prototype.getAnimationClassName.call(this, element);
276 |             var style = getComputedStyle(element);
277 |             if (this.isDisplayInline(style)) {
278 |                 animationClassName += "-inline";
279 |             }
280 |             return animationClassName;
281 |         };
282 |         AnimatedSizeItem.prototype.storeStyleSize = function (element) {
283 |             this.previousStyleWidth = element.style.width;
284 |             this.previousStyleHeight = element.style.height;
285 |         };
286 |         AnimatedSizeItem.prototype.restorePreviousStyleSize = function (element) {
287 |             element.style.width = this.previousStyleWidth;
288 |             element.style.height = this.previousStyleHeight;
289 |         };
290 |         AnimatedSizeItem.prototype.startEnter = function (element) {
291 |             _super.prototype.startEnter.call(this, element);
292 |             var elementBounds = element.getBoundingClientRect();
293 |             this.previousWidth = elementBounds.width;
294 |             this.previousHeight = elementBounds.height;
295 |         };
296 |         AnimatedSizeItem.prototype.startEnterTransition = function (element) {
297 |             _super.prototype.startEnterTransition.call(this, element);
298 |             this.storeStyleSize(element);
299 |             var elementBounds = element.getBoundingClientRect();
300 |             if (elementBounds.width !== this.previousWidth) {
301 |                 element.style.width = this.previousWidth + PIXELS_UNIT;
302 |             }
303 |             if (elementBounds.height !== this.previousHeight) {
304 |                 element.style.height = this.previousHeight + PIXELS_UNIT;
305 |             }
306 |         };
307 |         AnimatedSizeItem.prototype.endEnter = function (element) {
308 |             _super.prototype.endEnter.call(this, element);
309 |             this.restorePreviousStyleSize(element);
310 |         };
311 |         AnimatedSizeItem.prototype.startLeave = function (element) {
312 |             _super.prototype.startLeave.call(this, element);
313 |             this.storeStyleSize(element);
314 |             var elementBounds = element.getBoundingClientRect();
315 |             element.style.width = elementBounds.width + PIXELS_UNIT;
316 |             element.style.height = elementBounds.height + PIXELS_UNIT;
317 |         };
318 |         AnimatedSizeItem.prototype.startLeaveTransition = function (element) {
319 |             _super.prototype.startLeaveTransition.call(this, element);
320 |             this.restorePreviousStyleSize(element);
321 |         };
322 |         return AnimatedSizeItem;
323 |     }(animated_group_1.AnimatedItem));
324 |     exports.AnimatedSizeItem = AnimatedSizeItem;
325 | });
326 | define("images", ["require", "exports"], function (require, exports) {
327 |     "use strict";
328 |     exports.Images = [
329 |         "http://24.media.tumblr.com/tumblr_m3sdvsBdJU1qzzim1o1_500.jpg",
330 |         "http://25.media.tumblr.com/tumblr_m1zlwpDjAh1qze0hyo1_1280.jpg",
331 |         "http://25.media.tumblr.com/tumblr_m1wlprhmJY1qjmz65o1_500.gif",
332 |         "http://25.media.tumblr.com/tumblr_lkvj1aVSQg1qbe5pxo1_1280.jpg",
333 |         "http://24.media.tumblr.com/Jjkybd3nSk6rkrg7VU07HTxGo1_500.jpg",
334 |         "http://29.media.tumblr.com/tumblr_lr64gw71Ag1qjqdfao1_500.png",
335 |         "http://25.media.tumblr.com/tumblr_m3jfavG5eN1r73wdao1_500.jpg",
336 |         "http://24.media.tumblr.com/tumblr_m35g24e4z11qzex9io1_1280.jpg",
337 |         "http://24.media.tumblr.com/tumblr_m1nmoduuK21qzex9io1_1280.jpg",
338 |         "http://24.media.tumblr.com/YyXwbMbaOoa3u0trL7uZedmPo1_400.gif",
339 |         "http://25.media.tumblr.com/tumblr_lh0dypa6W21qgnva2o1_500.jpg",
340 |         "http://24.media.tumblr.com/tumblr_m2o12tB0pn1qze0hyo1_1280.jpg",
341 |         "http://25.media.tumblr.com/tumblr_kp3d65xe3l1qz9bf5o1_500.jpg",
342 |         "http://24.media.tumblr.com/tumblr_lycrqshTFf1r38hk2o1_400.jpg",
343 |         "http://26.media.tumblr.com/tumblr_ly9qoi8doW1qbt33io1_500.jpg",
344 |         "http://24.media.tumblr.com/tumblr_m1um2sieES1qzex9io1_1280.jpg",
345 |         "http://26.media.tumblr.com/tumblr_ltwqocDfjo1qdvbl3o1_1280.jpg",
346 |         "http://29.media.tumblr.com/tumblr_m0r6hmzVYx1qbhms5o1_500.jpg",
347 |         "http://30.media.tumblr.com/tumblr_m1pggypRMz1qjahcpo1_500.jpg",
348 |         "http://25.media.tumblr.com/tumblr_m2u72wnvk11qhwmnpo1_1280.jpg",
349 |         "http://25.media.tumblr.com/tumblr_lrcyxlchQZ1qfpssto1_r1_500.gif",
350 |         "http://25.media.tumblr.com/tumblr_ln2uaqQ5Rz1qdvbl3o1_1280.jpg",
351 |         "http://29.media.tumblr.com/tumblr_lyvsgqn1H51qbvr04o1_500.gif",
352 |         "http://24.media.tumblr.com/tumblr_ly2lzj9yzP1qk4s2co1_1280.jpg",
353 |         "http://24.media.tumblr.com/tumblr_lz032duhSH1qa10uwo1_1280.png",
354 |         "http://24.media.tumblr.com/tumblr_m1fvvw2cS71qz5dg8o1_1280.jpg",
355 |         "http://25.media.tumblr.com/tumblr_lz920fsYPB1rowplqo1_1280.jpg",
356 |         "http://27.media.tumblr.com/tumblr_m0xhjbRFCp1r6b7kmo1_500.gif",
357 |         "http://24.media.tumblr.com/tumblr_m2p47tjFdg1qa7xfro1_1280.jpg",
358 |         "http://25.media.tumblr.com/tumblr_m4ilt9rDjh1r6jd7fo1_1280.jpg",
359 |         "http://25.media.tumblr.com/tumblr_m3fdtouawb1qhwmnpo1_1280.jpg",
360 |         "http://24.media.tumblr.com/tumblr_m0iuyhHhwD1qbe5pxo1_500.jpg",
361 |         "http://26.media.tumblr.com/tumblr_ly17xkVXnc1qbt33io1_1280.jpg",
362 |         "http://25.media.tumblr.com/tumblr_m8im7ptqs81rdogh7o1_1280.jpg",
363 |         "http://27.media.tumblr.com/tumblr_m1pgyeuGDs1qjahcpo1_250.jpg",
364 |         "http://24.media.tumblr.com/tumblr_lvbpb9op931qc1sduo1_500.jpg",
365 |         "http://26.media.tumblr.com/tumblr_lhzo4g1ZiG1qfyzelo1_500.jpg",
366 |         "http://24.media.tumblr.com/tumblr_luowrcYoTj1qdth8zo1_1280.jpg",
367 |         "http://25.media.tumblr.com/tumblr_lee9o3ssrv1qcn249o1_400.gif",
368 |         "http://24.media.tumblr.com/Jjkybd3nSbuwu42gf8MzkTik_500.jpg",
369 |         "http://25.media.tumblr.com/tumblr_m4ijv28wlO1r6jd7fo1_500.jpg",
370 |         "http://26.media.tumblr.com/tumblr_m20fbkANHa1qzex9io1_1280.jpg",
371 |         "http://24.media.tumblr.com/tumblr_m0uo7n1nA01qzv52ko1_1280.jpg",
372 |         "http://25.media.tumblr.com/tumblr_loxwm8v8fH1qjmniro1_400.gif",
373 |         "http://25.media.tumblr.com/tumblr_m0oki3v6RC1qi9p54o1_500.jpg",
374 |         "http://25.media.tumblr.com/tumblr_m7gbozreKr1qzex9io1_1280.jpg",
375 |         "http://29.media.tumblr.com/tumblr_lrftlutgUt1qgn992o1_500.jpg",
376 |         "http://25.media.tumblr.com/tumblr_m109jwrekN1qjc1a7o1_500.jpg",
377 |         "http://24.media.tumblr.com/tumblr_m4mi59MLm91qz5l2xo1_500.png",
378 |         "http://24.media.tumblr.com/tumblr_m4r5g38v4z1qh66wqo1_1280.jpg"
379 |     ];
380 | });
381 | define("virtualized-scroll-viewer", ["require", "exports", "react", "react-dom", "virtualized-scroll-viewer-extensions"], function (require, exports, React, ReactDOM, virtualized_scroll_viewer_extensions_2) {
382 |     "use strict";
383 |     function insideiOSWebView() {
384 |         return !navigator.standalone && /(iPad)|(iPhone)/i.test(navigator.userAgent) && !/safari/i.test(navigator.userAgent);
385 |     }
386 |     var SCROLL_EVENT_NAME = "scroll";
387 |     var RESIZE_EVENT_NAME = "resize";
388 |     var PIXEL_UNITS = "px";
389 |     var FLEXBOX_DISPLAY = document.createElement("p").style.flex === undefined ? "-webkit-flex" : "flex";
390 |     var DEFAULT_BUFFER_SIZE = 3;
391 |     var BUFFER_MULTIPLIER = insideiOSWebView() ? 4 : 1;
392 |     var MIN_ITEM_SIZE = 20;
393 |     var VirtualizedScrollViewer = (function (_super) {
394 |         __extends(VirtualizedScrollViewer, _super);
395 |         function VirtualizedScrollViewer(props, context) {
396 |             _super.call(this, props, context);
397 |             this.scrollDirection = virtualized_scroll_viewer_extensions_2.ScrollExtensions.ScrollDirection.Vertical;
398 |             this.hasPendingPropertiesUpdate = false;
399 |             this.isScrollOngoing = false;
400 |             this.isComponentInitialized = false;
401 |             this.scrollHandler = this.handleScroll.bind(this);
402 |             this.state = {
403 |                 firstRenderedItemIndex: 0,
404 |                 lastRenderedItemIndex: 1,
405 |                 averageItemSize: 0,
406 |                 scrollOffset: 0,
407 |                 offScreenItemsCount: 0,
408 |                 effectiveScrollOffset: Number.MIN_VALUE,
409 |             };
410 |         }
411 |         VirtualizedScrollViewer.prototype.getScrollHostInfo = function () {
412 |             if (!this.scrollHostInfo) {
413 |                 this.scrollHostInfo = virtualized_scroll_viewer_extensions_2.ScrollExtensions.getScrollHostInfo(this.itemsContainer);
414 |             }
415 |             return this.scrollHostInfo;
416 |         };
417 |         VirtualizedScrollViewer.prototype.getScrollInfo = function () {
418 |             var scrollHostInfo = this.getScrollHostInfo();
419 |             var scrollHost = scrollHostInfo.scrollHost;
420 |             var scrollInfo = virtualized_scroll_viewer_extensions_2.ScrollExtensions.getScrollInfo(scrollHost);
421 |             var result = {
422 |                 scrollHost: scrollHost,
423 |                 scrollOffset: this.getDimension(scrollInfo.scroll.y, scrollInfo.scroll.x),
424 |                 viewportSize: this.getDimension(scrollInfo.viewport.height, scrollInfo.viewport.width),
425 |                 viewportLowerBound: 0,
426 |                 viewportUpperBound: 0,
427 |             };
428 |             if (scrollHost instanceof Window) {
429 |                 result.viewportLowerBound = this.getDimension(scrollInfo.viewport.y, scrollInfo.viewport.x);
430 |                 result.viewportUpperBound = this.getDimension(scrollInfo.viewport.height, scrollInfo.viewport.width);
431 |             }
432 |             else if (scrollHost instanceof HTMLElement) {
433 |                 var bounds = scrollHost.getBoundingClientRect();
434 |                 result.viewportLowerBound = this.getDimension(bounds.top, bounds.left);
435 |                 result.viewportUpperBound = this.getDimension(bounds.bottom, bounds.right);
436 |             }
437 |             return result;
438 |         };
439 |         VirtualizedScrollViewer.prototype.addScrollHandler = function () {
440 |             if (this.isDisposed) {
441 |                 return;
442 |             }
443 |             this.scrollHostInfo = null;
444 |             var scrollHostInfo = this.getScrollHostInfo();
445 |             var scrollHost = scrollHostInfo.scrollHost;
446 |             scrollHost.addEventListener(SCROLL_EVENT_NAME, this.scrollHandler);
447 |             scrollHost.addEventListener(RESIZE_EVENT_NAME, this.scrollHandler);
448 |             this.scrollDirection = scrollHostInfo.scrollDirection;
449 |         };
450 |         VirtualizedScrollViewer.prototype.removeScrollHandler = function () {
451 |             var scrollHost = this.getScrollHostInfo().scrollHost;
452 |             scrollHost.removeEventListener(SCROLL_EVENT_NAME, this.scrollHandler);
453 |             scrollHost.removeEventListener(RESIZE_EVENT_NAME, this.scrollHandler);
454 |         };
455 |         VirtualizedScrollViewer.prototype.componentDidMount = function () {
456 |             var _this = this;
457 |             this.itemsContainer = ReactDOM.findDOMNode(this);
458 |             var onWindowScroll = function () {
459 |                 window.removeEventListener(SCROLL_EVENT_NAME, onWindowScroll, true);
460 |                 window.removeEventListener(RESIZE_EVENT_NAME, onWindowScroll, true);
461 |                 _this.addScrollHandler();
462 |             };
463 |             requestAnimationFrame(function () {
464 |                 if (!_this.isDisposed) {
465 |                     window.addEventListener(SCROLL_EVENT_NAME, onWindowScroll, true);
466 |                     window.addEventListener(RESIZE_EVENT_NAME, onWindowScroll, true);
467 |                 }
468 |             });
469 |             this.setState(this.getCurrentScrollViewerState(this.props.length));
470 |         };
471 |         VirtualizedScrollViewer.prototype.componentWillUnmount = function () {
472 |             this.removeScrollHandler();
473 |             this.scrollHostInfo = null;
474 |             this.itemsContainer = null;
475 |         };
476 |         VirtualizedScrollViewer.prototype.componentWillReceiveProps = function (nextProps) {
477 |             this.setState(this.getCurrentScrollViewerState(nextProps.length));
478 |             this.hasPendingPropertiesUpdate = true;
479 |         };
480 |         VirtualizedScrollViewer.prototype.componentWillUpdate = function (nextProps, nextState) {
481 |             if (Math.abs(nextState.averageItemSize - this.state.averageItemSize) > 30) {
482 |                 this.itemsPlaceholdersImageDataUri = null;
483 |             }
484 |         };
485 |         VirtualizedScrollViewer.prototype.setState = function (state, callback) {
486 |             var _this = this;
487 |             _super.prototype.setState.call(this, state, function () {
488 |                 _this.onDidUpdate();
489 |                 if (callback) {
490 |                     callback();
491 |                 }
492 |             });
493 |         };
494 |         VirtualizedScrollViewer.prototype.onDidUpdate = function () {
495 |             var _this = this;
496 |             this.itemsContainer = ReactDOM.findDOMNode(this);
497 |             this.renderOffScreenBuffer();
498 |             if (this.setPendingScroll) {
499 |                 requestAnimationFrame(function () {
500 |                     if (!_this.isDisposed) {
501 |                         _this.setPendingScroll();
502 |                         _this.setPendingScroll = null;
503 |                     }
504 |                 });
505 |             }
506 |             if (!this.isComponentInitialized) {
507 |                 this.isComponentInitialized = true;
508 |                 if (this.props.initializationCompleted) {
509 |                     this.props.initializationCompleted();
510 |                 }
511 |             }
512 |             if (this.hasPendingPropertiesUpdate) {
513 |                 this.hasPendingPropertiesUpdate = false;
514 |                 this.setState(this.getCurrentScrollViewerState(this.props.length));
515 |             }
516 |         };
517 |         VirtualizedScrollViewer.prototype.renderOffScreenBuffer = function () {
518 |             this.itemsContainer.style.position = "relative";
519 |             var items = this.getListItems(this.itemsContainer);
520 |             for (var _i = 0, _a = items.slice(0, this.state.offScreenItemsCount); _i < _a.length; _i++) {
521 |                 var item = _a[_i];
522 |                 var child = item;
523 |                 if (child.style !== undefined) {
524 |                     child.style.position = "absolute";
525 |                     child.style.top = "-10000" + PIXEL_UNITS;
526 |                 }
527 |             }
528 |             for (var _b = 0, _c = items.slice(this.state.offScreenItemsCount); _b < _c.length; _b++) {
529 |                 var item = _c[_b];
530 |                 var child = item;
531 |                 if (child.style !== undefined) {
532 |                     child.style.position = "";
533 |                     child.style.top = "";
534 |                 }
535 |             }
536 |         };
537 |         VirtualizedScrollViewer.prototype.handleScroll = function (scrollEvent) {
538 |             var _this = this;
539 |             if (this.pendingScrollAsyncUpdateHandle) {
540 |                 return;
541 |             }
542 |             this.pendingScrollAsyncUpdateHandle = requestAnimationFrame(function () {
543 |                 if (_this.isDisposed) {
544 |                     return;
545 |                 }
546 |                 try {
547 |                     var newState = _this.getCurrentScrollViewerState(_this.props.length, true);
548 |                     if (newState !== _this.state) {
549 |                         _this.isScrollOngoing = true;
550 |                         _this.setState(newState, function () { return _this.isScrollOngoing = false; });
551 |                     }
552 |                 }
553 |                 finally {
554 |                     _this.pendingScrollAsyncUpdateHandle = 0;
555 |                 }
556 |                 if (_this.props.scrollChanged) {
557 |                     _this.props.scrollChanged();
558 |                 }
559 |             });
560 |         };
561 |         VirtualizedScrollViewer.prototype.shouldComponentUpdate = function (nextProps, nextState) {
562 |             return nextState.firstRenderedItemIndex !== this.state.firstRenderedItemIndex ||
563 |                 nextState.lastRenderedItemIndex !== this.state.lastRenderedItemIndex ||
564 |                 nextState.scrollOffset !== this.state.scrollOffset ||
565 |                 nextProps !== this.props;
566 |         };
567 |         VirtualizedScrollViewer.prototype.renderList = function (firstRenderedItemIndex, lastRenderedItemIndex) {
568 |             var scrollOffset = this.state.scrollOffset;
569 |             var length = Math.min(this.props.length, lastRenderedItemIndex - firstRenderedItemIndex + 1);
570 |             var items = this.props.renderItems(firstRenderedItemIndex, length);
571 |             var remainingSize = 0;
572 |             var averageItemSize = Math.max(MIN_ITEM_SIZE, this.state.averageItemSize);
573 |             if (lastRenderedItemIndex < (this.props.length - 1)) {
574 |                 var scrollSize = averageItemSize * this.props.length;
575 |                 remainingSize = scrollSize - ((averageItemSize * length) + scrollOffset);
576 |             }
577 |             var listChildren = [];
578 |             listChildren.push(this.renderSpacer("first-spacer", scrollOffset, averageItemSize));
579 |             listChildren.push(items);
580 |             listChildren.push(this.renderSpacer("last-spacer", remainingSize, averageItemSize));
581 |             return this.props.renderWrapper(listChildren);
582 |         };
583 |         VirtualizedScrollViewer.prototype.renderSpacer = function (key, dimension, averageItemSize) {
584 |             var FILL_SPACE = "100%";
585 |             var style = {
586 |                 display: FLEXBOX_DISPLAY,
587 |             };
588 |             var backgroundWidth = 0;
589 |             var backgroundHeight = 0;
590 |             if (this.scrollDirection === virtualized_scroll_viewer_extensions_2.ScrollExtensions.ScrollDirection.Horizontal) {
591 |                 style.width = Math.round(dimension) + PIXEL_UNITS;
592 |                 style.height = FILL_SPACE;
593 |                 backgroundWidth = averageItemSize;
594 |             }
595 |             else {
596 |                 style.width = FILL_SPACE;
597 |                 style.height = Math.round(dimension) + PIXEL_UNITS;
598 |                 backgroundHeight = averageItemSize;
599 |             }
600 |             style.backgroundImage = "url(" + this.getItemsPlaceholdersImage(backgroundWidth, backgroundHeight) + ")";
601 |             style.backgroundRepeat = "repeat";
602 |             return React.DOM.script({ key: key, style: style });
603 |         };
604 |         VirtualizedScrollViewer.prototype.render = function () {
605 |             return this.renderList(this.state.firstRenderedItemIndex, this.state.lastRenderedItemIndex);
606 |         };
607 |         VirtualizedScrollViewer.prototype.getDimension = function (vertical, horizontal) {
608 |             return this.scrollDirection === virtualized_scroll_viewer_extensions_2.ScrollExtensions.ScrollDirection.Horizontal ? horizontal : vertical;
609 |         };
610 |         VirtualizedScrollViewer.prototype.getListItems = function (itemsContainer) {
611 |             var items = [];
612 |             for (var i = 1; i < itemsContainer.children.length - 1; i++) {
613 |                 items.push(itemsContainer.children[i]);
614 |             }
615 |             return items;
616 |         };
617 |         VirtualizedScrollViewer.prototype.getItemBounds = function (item) {
618 |             var bounds = item.getBoundingClientRect();
619 |             var rect = {
620 |                 width: bounds.width,
621 |                 height: bounds.height,
622 |                 left: bounds.left,
623 |                 right: bounds.right,
624 |                 top: bounds.top,
625 |                 bottom: bounds.bottom,
626 |             };
627 |             if (this.scrollDirection === virtualized_scroll_viewer_extensions_2.ScrollExtensions.ScrollDirection.Horizontal) {
628 |                 if (rect.width < MIN_ITEM_SIZE) {
629 |                     rect.width = MIN_ITEM_SIZE;
630 |                     rect.right = rect.left + rect.width;
631 |                 }
632 |             }
633 |             else {
634 |                 if (rect.height < MIN_ITEM_SIZE) {
635 |                     rect.height = MIN_ITEM_SIZE;
636 |                     rect.bottom = rect.top + rect.height;
637 |                 }
638 |             }
639 |             return rect;
640 |         };
641 |         VirtualizedScrollViewer.prototype.areElementsStacked = function (items) {
642 |             if (items.length < 2) {
643 |                 return false;
644 |             }
645 |             var firstElement = items[items.length - 2];
646 |             var secondElement = items[items.length - 1];
647 |             var firstElementBounds = firstElement.getBoundingClientRect();
648 |             var secondElementBounds = secondElement.getBoundingClientRect();
649 |             return Math.floor(this.getDimension(secondElementBounds.top, 0)) >= Math.floor(this.getDimension(firstElementBounds.bottom, 1));
650 |         };
651 |         VirtualizedScrollViewer.prototype.calculateItemsSize = function (items, firstItemIndex, lastItemIndex) {
652 |             if (firstItemIndex === void 0) { firstItemIndex = 0; }
653 |             if (lastItemIndex === void 0) { lastItemIndex = items.length - 1; }
654 |             var total = 0;
655 |             var sizes = new Array(lastItemIndex - firstItemIndex + 1);
656 |             for (var i = firstItemIndex; i <= lastItemIndex; i++) {
657 |                 var itemBounds = this.getItemBounds(items[i]);
658 |                 var size = this.getDimension(itemBounds.height, itemBounds.width);
659 |                 total += size;
660 |                 sizes[i - firstItemIndex] = size;
661 |             }
662 |             return { total: total, sizes: sizes };
663 |         };
664 |         VirtualizedScrollViewer.prototype.countItemsAndSizeThatFitIn = function (itemsSizes, sizeToFit, allowOverflow, countBackwards) {
665 |             if (allowOverflow === void 0) { allowOverflow = false; }
666 |             if (countBackwards === void 0) { countBackwards = false; }
667 |             var i = 0;
668 |             var itemsSize = 0;
669 |             var getIndex = countBackwards ? function (idx) { return itemsSizes.length - 1 - idx; } : function (idx) { return idx; };
670 |             for (; i < itemsSizes.length; i++) {
671 |                 var itemSize = itemsSizes[getIndex(i)];
672 |                 if ((itemsSize + itemSize) > sizeToFit) {
673 |                     if (allowOverflow) {
674 |                         i++;
675 |                         itemsSize += itemSize;
676 |                     }
677 |                     break;
678 |                 }
679 |                 itemsSize += itemSize;
680 |             }
681 |             return { size: itemsSize, count: i };
682 |         };
683 |         VirtualizedScrollViewer.prototype.getCurrentScrollViewerState = function (listLength, returnSameStateOnSmallChanges) {
684 |             if (returnSameStateOnSmallChanges === void 0) { returnSameStateOnSmallChanges = false; }
685 |             var scrollInfo = this.getScrollInfo();
686 |             var pageBufferSize = (this.props.pageBufferSize || DEFAULT_BUFFER_SIZE) * BUFFER_MULTIPLIER;
687 |             var viewportSafetyMargin = scrollInfo.viewportSize * (pageBufferSize / 2);
688 |             if (returnSameStateOnSmallChanges &&
689 |                 Math.abs(scrollInfo.scrollOffset - this.state.effectiveScrollOffset) < (viewportSafetyMargin * 0.5)) {
690 |                 return this.state;
691 |             }
692 |             var items = this.getListItems(this.itemsContainer);
693 |             if (!this.areElementsStacked(items)) {
694 |                 return {
695 |                     firstRenderedItemIndex: 0,
696 |                     lastRenderedItemIndex: Math.max(1, this.props.length - 1),
697 |                     averageItemSize: 0,
698 |                     scrollOffset: 0,
699 |                     offScreenItemsCount: 0,
700 |                     effectiveScrollOffset: scrollInfo.scrollOffset,
701 |                 };
702 |             }
703 |             var lastSpacerBounds = this.itemsContainer.lastElementChild.getBoundingClientRect();
704 |             if (this.getDimension(lastSpacerBounds.bottom, lastSpacerBounds.right) < -100) {
705 |                 return this.state;
706 |             }
707 |             var renderedItemsSizes = this.calculateItemsSize(items);
708 |             var offScreenItemsCount = this.state.offScreenItemsCount;
709 |             var onScreenItems = renderedItemsSizes.sizes.slice(offScreenItemsCount);
710 |             var onScreenItemsSize = onScreenItems.reduce(function (p, c) { return p + c; });
711 |             var averageItemSize = onScreenItemsSize / (onScreenItems.length * 1.0);
712 |             if (this.state.averageItemSize !== 0) {
713 |                 averageItemSize = (0.8 * this.state.averageItemSize) + (0.2 * averageItemSize);
714 |             }
715 |             var itemsFittingViewportCount = Math.ceil(scrollInfo.viewportSize / averageItemSize);
716 |             var maxOffScreenItemsCount = itemsFittingViewportCount;
717 |             var safetyItemsCount = Math.ceil(viewportSafetyMargin * 2 / averageItemSize);
718 |             var renderedItemsCount = Math.min(listLength, itemsFittingViewportCount + safetyItemsCount + maxOffScreenItemsCount);
719 |             var scrollOffset = this.state.scrollOffset;
720 |             var firstRenderedItemIndex = this.state.firstRenderedItemIndex;
721 |             var viewportLowerMargin = scrollInfo.viewportLowerBound - viewportSafetyMargin;
722 |             var firstSpacerBounds = this.itemsContainer.firstElementChild.getBoundingClientRect();
723 |             var firstItemOffset = this.getDimension(firstSpacerBounds.bottom, firstSpacerBounds.right);
724 |             if (Math.abs(firstItemOffset - viewportLowerMargin) <= onScreenItemsSize) {
725 |                 if (firstItemOffset < viewportLowerMargin) {
726 |                     var itemsGoingOffScreen = this.countItemsAndSizeThatFitIn(onScreenItems, Math.abs(viewportLowerMargin - firstItemOffset));
727 |                     if (itemsGoingOffScreen.count > 0) {
728 |                         scrollOffset += itemsGoingOffScreen.size;
729 |                         offScreenItemsCount += itemsGoingOffScreen.count;
730 |                         if (offScreenItemsCount > maxOffScreenItemsCount) {
731 |                             var leavingItemsCount = offScreenItemsCount - maxOffScreenItemsCount;
732 |                             firstRenderedItemIndex += leavingItemsCount;
733 |                             offScreenItemsCount = maxOffScreenItemsCount;
734 |                         }
735 |                     }
736 |                 }
737 |                 else if (firstItemOffset > viewportLowerMargin) {
738 |                     var availableSpace = Math.abs(firstItemOffset - viewportLowerMargin);
739 |                     var offScreenItems = renderedItemsSizes.sizes.slice(0, offScreenItemsCount);
740 |                     var itemsGoingOnScreen = this.countItemsAndSizeThatFitIn(offScreenItems, availableSpace, true, true);
741 |                     if (itemsGoingOnScreen.count > 0) {
742 |                         scrollOffset = Math.max(0, scrollOffset - itemsGoingOnScreen.size);
743 |                         offScreenItemsCount -= itemsGoingOnScreen.count;
744 |                         availableSpace -= itemsGoingOnScreen.size;
745 |                     }
746 |                     if (availableSpace > 0) {
747 |                         if (offScreenItemsCount !== 0) {
748 |                             throw "offScreenItemsCount should be 0";
749 |                         }
750 |                         var enteringItemsCount = Math.min(firstRenderedItemIndex, Math.ceil(availableSpace / averageItemSize));
751 |                         firstRenderedItemIndex -= enteringItemsCount;
752 |                         scrollOffset -= enteringItemsCount * averageItemSize;
753 |                     }
754 |                     if (offScreenItemsCount < maxOffScreenItemsCount) {
755 |                         var enteringItemsCount = Math.min(firstRenderedItemIndex, maxOffScreenItemsCount - offScreenItemsCount);
756 |                         firstRenderedItemIndex -= enteringItemsCount;
757 |                         offScreenItemsCount += enteringItemsCount;
758 |                     }
759 |                 }
760 |             }
761 |             else {
762 |                 var startOffset = this.getDimension(firstSpacerBounds.top, firstSpacerBounds.left);
763 |                 if (startOffset < scrollInfo.viewportLowerBound) {
764 |                     startOffset = Math.abs(startOffset - scrollInfo.viewportLowerBound);
765 |                 }
766 |                 else {
767 |                     startOffset = 0;
768 |                 }
769 |                 firstRenderedItemIndex = Math.max(0, Math.floor(startOffset / averageItemSize) - 1);
770 |                 offScreenItemsCount = 0;
771 |                 if (firstRenderedItemIndex > 0) {
772 |                     firstRenderedItemIndex = Math.max(0, firstRenderedItemIndex - Math.ceil(viewportSafetyMargin / averageItemSize));
773 |                 }
774 |                 firstRenderedItemIndex = Math.max(0, Math.min(firstRenderedItemIndex, listLength - 1 - renderedItemsCount));
775 |                 scrollOffset = firstRenderedItemIndex * averageItemSize;
776 |             }
777 |             if (firstRenderedItemIndex === 0 && offScreenItemsCount === 0) {
778 |                 scrollOffset = 0;
779 |             }
780 |             var lastRenderedItemIndex = Math.min(listLength - 1, firstRenderedItemIndex + renderedItemsCount);
781 |             return {
782 |                 firstRenderedItemIndex: firstRenderedItemIndex,
783 |                 lastRenderedItemIndex: lastRenderedItemIndex,
784 |                 averageItemSize: averageItemSize,
785 |                 scrollOffset: scrollOffset,
786 |                 offScreenItemsCount: offScreenItemsCount,
787 |                 effectiveScrollOffset: scrollInfo.scrollOffset,
788 |             };
789 |         };
790 |         Object.defineProperty(VirtualizedScrollViewer.prototype, "isScrolling", {
791 |             get: function () {
792 |                 return this.isScrollOngoing;
793 |             },
794 |             enumerable: true,
795 |             configurable: true
796 |         });
797 |         Object.defineProperty(VirtualizedScrollViewer.prototype, "isInitialized", {
798 |             get: function () {
799 |                 return this.isComponentInitialized;
800 |             },
801 |             enumerable: true,
802 |             configurable: true
803 |         });
804 |         Object.defineProperty(VirtualizedScrollViewer.prototype, "isDisposed", {
805 |             get: function () {
806 |                 return !this.itemsContainer;
807 |             },
808 |             enumerable: true,
809 |             configurable: true
810 |         });
811 |         VirtualizedScrollViewer.prototype.setScrollOffset = function (x, y) {
812 |             var scrollInfo = this.getScrollInfo();
813 |             var scrollHost = scrollInfo.scrollHost;
814 |             var scrollX = this.getDimension(undefined, x);
815 |             var scrollY = this.getDimension(y, undefined);
816 |             var updateScroll = function () { virtualized_scroll_viewer_extensions_2.ScrollExtensions.setScrollOffset(scrollHost, scrollX, scrollY); };
817 |             if (this.isInitialized) {
818 |                 updateScroll();
819 |             }
820 |             else {
821 |                 this.setPendingScroll = updateScroll;
822 |             }
823 |         };
824 |         VirtualizedScrollViewer.prototype.getItemsPlaceholdersImage = function (width, height) {
825 |             if (!this.itemsPlaceholdersImageDataUri) {
826 |                 this.itemsPlaceholdersImageDataUri = this.drawItemsPlaceholders(width, height);
827 |             }
828 |             return this.itemsPlaceholdersImageDataUri;
829 |         };
830 |         VirtualizedScrollViewer.prototype.drawItemsPlaceholders = function (width, height) {
831 |             var minWidth = Math.max(width, 1);
832 |             var minHeight = Math.max(height, 1);
833 |             var canvas = document.createElement("canvas");
834 |             canvas.width = Math.max(width * 2, 1);
835 |             canvas.height = Math.max(height * 2, 1);
836 |             var ctx = canvas.getContext("2d");
837 |             ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
838 |             ctx.fillRect(0, 0, minWidth, minHeight);
839 |             ctx.fillStyle = "rgba(0, 0, 0, 0.08)";
840 |             ctx.fillRect(width, height, minWidth, minHeight);
841 |             return canvas.toDataURL();
842 |         };
843 |         return VirtualizedScrollViewer;
844 |     }(React.Component));
845 |     exports.VirtualizedScrollViewer = VirtualizedScrollViewer;
846 | });
847 | define("virtualized-list", ["require", "exports", "react", "virtualized-scroll-viewer", "animated-size-group"], function (require, exports, React, virtualized_scroll_viewer_1, animated_size_group_1) {
848 |     "use strict";
849 |     var SCROLL_VIEWER_COMPONENT_REF = "scrollViewer";
850 |     var VirtualizedList = (function (_super) {
851 |         __extends(VirtualizedList, _super);
852 |         function VirtualizedList() {
853 |             _super.apply(this, arguments);
854 |         }
855 |         VirtualizedList.prototype.renderItem = function (index) {
856 |             var even = index % 2 === 0;
857 |             var className = "list-item " + (even ? "even" : "odd");
858 |             var item = this.props.list[index];
859 |             return (React.createElement("div", {key: "i-" + index, className: className}, "Item ", item.index, React.createElement("img", {src: item.image})));
860 |         };
861 |         VirtualizedList.prototype.componentDidMount = function () {
862 |             this.getScrollViewer().setScrollOffset(0, 1000);
863 |         };
864 |         VirtualizedList.prototype.renderItems = function (startIndex, length) {
865 |             var items = [];
866 |             for (var i = startIndex; i < startIndex + length; i++) {
867 |                 items.push(this.renderItem(i));
868 |             }
869 |             return items;
870 |         };
871 |         VirtualizedList.prototype.getScrollViewer = function () {
872 |             return this.refs[SCROLL_VIEWER_COMPONENT_REF];
873 |         };
874 |         Object.defineProperty(VirtualizedList.prototype, "shouldSuspendAnimations", {
875 |             get: function () {
876 |                 var scrollViewer = this.getScrollViewer();
877 |                 return !scrollViewer || !scrollViewer.isInitialized || scrollViewer.isScrolling;
878 |             },
879 |             enumerable: true,
880 |             configurable: true
881 |         });
882 |         VirtualizedList.prototype.createScrollViewerContainer = function (children) {
883 |             var _this = this;
884 |             var listAttributes = {
885 |                 className: "list",
886 |                 component: "div",
887 |                 shouldSuspendAnimations: function () { return _this.shouldSuspendAnimations; },
888 |                 transitionName: "example",
889 |             };
890 |             return React.createElement(animated_size_group_1.AnimatedSizeGroup, listAttributes, children);
891 |         };
892 |         VirtualizedList.prototype.render = function () {
893 |             var _this = this;
894 |             return (React.createElement(virtualized_scroll_viewer_1.VirtualizedScrollViewer, {renderItems: function (start, length) { return _this.renderItems(start, length); }, renderWrapper: function (children) { return _this.createScrollViewerContainer(children); }, length: this.props.list.length, pageBufferSize: this.props.pageBufferSize, ref: SCROLL_VIEWER_COMPONENT_REF}));
895 |         };
896 |         VirtualizedList.prototype.setScrollOffset = function (offset) {
897 |             this.getScrollViewer().setScrollOffset(undefined, offset);
898 |         };
899 |         return VirtualizedList;
900 |     }(React.Component));
901 |     exports.VirtualizedList = VirtualizedList;
902 | });
903 | define("index", ["require", "exports", "react", "react-dom", "virtualized-list", "images"], function (require, exports, React, ReactDOM, virtualized_list_1, images_1) {
904 |     "use strict";
905 |     var App = (function (_super) {
906 |         __extends(App, _super);
907 |         function App() {
908 |             _super.call(this);
909 |             this.state = {
910 |                 items: 100,
911 |                 pageBufferSize: 4
912 |             };
913 |         }
914 |         App.prototype.refresh = function () {
915 |             this.setState({
916 |                 items: parseInt(this.refs["itemsCount"].value),
917 |                 pageBufferSize: parseInt(this.refs["pageBufferSize"].value)
918 |             });
919 |         };
920 |         App.prototype.setScroll = function () {
921 |             var offset = parseInt(this.refs["scrollOffset"].value);
922 |             this.refs["list"].setScrollOffset(offset);
923 |         };
924 |         App.prototype.render = function () {
925 |             var imagesCount = images_1.Images.length;
926 |             var list = [];
927 |             for (var i = 0; i < this.state.items; i++) {
928 |                 list.push({ image: images_1.Images[i % imagesCount], index: i });
929 |             }
930 |             return (React.createElement("div", null, React.createElement("h1", null, "Virtualized list example"), React.createElement("br", null), React.createElement("input", {ref: "itemsCount", placeholder: "Number of items", defaultValue: this.state.items + ""}), React.createElement("button", {onClick: this.refresh.bind(this)}, "Set Items"), React.createElement("br", null), React.createElement("br", null), React.createElement("input", {ref: "pageBufferSize", placeholder: "Number extra invisible of items rendered", defaultValue: this.state.pageBufferSize + ""}), React.createElement("button", {onClick: this.refresh.bind(this)}, "Set Buffer Size"), React.createElement("br", null), React.createElement("br", null), React.createElement("input", {ref: "scrollOffset", placeholder: "Scroll offset", defaultValue: this.state.items + ""}), React.createElement("button", {onClick: this.setScroll.bind(this)}, "Set Scroll"), React.createElement("br", null), React.createElement("br", null), React.createElement(virtualized_list_1.VirtualizedList, {ref: "list", list: list, pageBufferSize: this.state.pageBufferSize})));
931 |         };
932 |         return App;
933 |     }(React.Component));
934 |     ReactDOM.render(React.createElement(App), document.getElementById("container"));
935 | });
936 | 


--------------------------------------------------------------------------------
/bin/react-dom.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * ReactDOM v15.1.0
 3 |  *
 4 |  * Copyright 2013-present, Facebook, Inc.
 5 |  * All rights reserved.
 6 |  *
 7 |  * This source code is licensed under the BSD-style license found in the
 8 |  * LICENSE file in the root directory of this source tree. An additional grant
 9 |  * of patent rights can be found in the PATENTS file in the same directory.
10 |  *
11 |  */
12 | // Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
13 | ;(function(f) {
14 |   // CommonJS
15 |   if (typeof exports === "object" && typeof module !== "undefined") {
16 |     module.exports = f(require('react'));
17 | 
18 |   // RequireJS
19 |   } else if (typeof define === "function" && define.amd) {
20 |     define(['react'], f);
21 | 
22 |   // <script>
23 |   } else {
24 |     var g;
25 |     if (typeof window !== "undefined") {
26 |       g = window;
27 |     } else if (typeof global !== "undefined") {
28 |       g = global;
29 |     } else if (typeof self !== "undefined") {
30 |       g = self;
31 |     } else {
32 |       // works providing we're not in "use strict";
33 |       // needed for Java 8 Nashorn
34 |       // see https://github.com/facebook/react/issues/3037
35 |       g = this;
36 |     }
37 |     g.ReactDOM = f(g.React);
38 |   }
39 | 
40 | })(function(React) {
41 |   return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
42 | });
43 | 


--------------------------------------------------------------------------------
/bin/require.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  RequireJS 2.1.17 Copyright (c) 2010-2015, The Dojo Foundation All Rights Reserved.
 3 |  Available via the MIT or new BSD license.
 4 |  see: http://github.com/jrburke/requirejs for details
 5 | */
 6 | var requirejs,require,define;
 7 | (function(ba){function G(b){return"[object Function]"===K.call(b)}function H(b){return"[object Array]"===K.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function T(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function t(b,c){return fa.call(b,c)}function m(b,c){return t(b,c)&&b[c]}function B(b,c){for(var d in b)if(t(b,d)&&c(b[d],d))break}function U(b,c,d,e){c&&B(c,function(c,g){if(d||!t(b,g))e&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
 8 | RegExp)?(b[g]||(b[g]={}),U(b[g],c,d,e)):b[g]=c});return b}function u(b,c){return function(){return c.apply(b,arguments)}}function ca(b){throw b;}function da(b){if(!b)return b;var c=ba;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,e){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=e;d&&(c.originalError=d);return c}function ga(b){function c(a,k,b){var f,l,c,d,e,g,i,p,k=k&&k.split("/"),h=j.map,n=h&&h["*"];if(a){a=a.split("/");l=a.length-1;j.nodeIdCompat&&
 9 | Q.test(a[l])&&(a[l]=a[l].replace(Q,""));"."===a[0].charAt(0)&&k&&(l=k.slice(0,k.length-1),a=l.concat(a));l=a;for(c=0;c<l.length;c++)if(d=l[c],"."===d)l.splice(c,1),c-=1;else if(".."===d&&!(0===c||1===c&&".."===l[2]||".."===l[c-1])&&0<c)l.splice(c-1,2),c-=2;a=a.join("/")}if(b&&h&&(k||n)){l=a.split("/");c=l.length;a:for(;0<c;c-=1){e=l.slice(0,c).join("/");if(k)for(d=k.length;0<d;d-=1)if(b=m(h,k.slice(0,d).join("/")))if(b=m(b,e)){f=b;g=c;break a}!i&&(n&&m(n,e))&&(i=m(n,e),p=c)}!f&&i&&(f=i,g=p);f&&(l.splice(0,
10 | g,f),a=l.join("/"))}return(f=m(j.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(k){if(k.getAttribute("data-requiremodule")===a&&k.getAttribute("data-requirecontext")===i.contextName)return k.parentNode.removeChild(k),!0})}function e(a){var k=m(j.paths,a);if(k&&H(k)&&1<k.length)return k.shift(),i.require.undef(a),i.makeRequire(null,{skipMap:!0})([a]),!0}function n(a){var k,c=a?a.indexOf("!"):-1;-1<c&&(k=a.substring(0,c),a=a.substring(c+1,a.length));return[k,a]}function p(a,
11 | k,b,f){var l,d,e=null,g=k?k.name:null,j=a,p=!0,h="";a||(p=!1,a="_@r"+(K+=1));a=n(a);e=a[0];a=a[1];e&&(e=c(e,g,f),d=m(r,e));a&&(e?h=d&&d.normalize?d.normalize(a,function(a){return c(a,g,f)}):-1===a.indexOf("!")?c(a,g,f):a:(h=c(a,g,f),a=n(h),e=a[0],h=a[1],b=!0,l=i.nameToUrl(h)));b=e&&!d&&!b?"_unnormalized"+(O+=1):"";return{prefix:e,name:h,parentMap:k,unnormalized:!!b,url:l,originalName:j,isDefine:p,id:(e?e+"!"+h:h)+b}}function s(a){var k=a.id,b=m(h,k);b||(b=h[k]=new i.Module(a));return b}function q(a,
12 | k,b){var f=a.id,c=m(h,f);if(t(r,f)&&(!c||c.defineEmitComplete))"defined"===k&&b(r[f]);else if(c=s(a),c.error&&"error"===k)b(c.error);else c.on(k,b)}function w(a,b){var c=a.requireModules,f=!1;if(b)b(a);else if(v(c,function(b){if(b=m(h,b))b.error=a,b.events.error&&(f=!0,b.emit("error",a))}),!f)g.onError(a)}function x(){R.length&&(ha.apply(A,[A.length,0].concat(R)),R=[])}function y(a){delete h[a];delete V[a]}function F(a,b,c){var f=a.map.id;a.error?a.emit("error",a.error):(b[f]=!0,v(a.depMaps,function(f,
13 | d){var e=f.id,g=m(h,e);g&&(!a.depMatched[d]&&!c[e])&&(m(b,e)?(a.defineDep(d,r[e]),a.check()):F(g,b,c))}),c[f]=!0)}function D(){var a,b,c=(a=1E3*j.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],l=[],g=!1,h=!0;if(!W){W=!0;B(V,function(a){var i=a.map,j=i.id;if(a.enabled&&(i.isDefine||l.push(a),!a.error))if(!a.inited&&c)e(j)?g=b=!0:(f.push(j),d(j));else if(!a.inited&&(a.fetched&&i.isDefine)&&(g=!0,!i.prefix))return h=!1});if(c&&f.length)return a=C("timeout","Load timeout for modules: "+f,null,
14 | f),a.contextName=i.contextName,w(a);h&&v(l,function(a){F(a,{},{})});if((!c||b)&&g)if((z||ea)&&!X)X=setTimeout(function(){X=0;D()},50);W=!1}}function E(a){t(r,a[0])||s(p(a[0],null,!0)).init(a[1],a[2])}function I(a){var a=a.currentTarget||a.srcElement,b=i.onScriptLoad;a.detachEvent&&!Y?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=i.onScriptError;(!a.detachEvent||Y)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function J(){var a;
15 | for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var W,Z,i,L,X,j={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},h={},V={},$={},A=[],r={},S={},aa={},K=1,O=1;L={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?r[a.map.id]=a.exports:a.exports=r[a.map.id]={}},module:function(a){return a.module?
16 | a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return m(j.config,a.map.id)||{}},exports:a.exports||(a.exports={})}}};Z=function(a){this.events=m($,a.id)||{};this.map=a;this.shim=m(j.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};Z.prototype={init:function(a,b,c,f){f=f||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=u(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=
17 | c;this.inited=!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],u(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
18 | this.map.url;S[a]||(S[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var f=this.exports,l=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(l)){if(this.events.error&&this.map.isDefine||g.onError!==ca)try{f=i.execCb(c,l,b,f)}catch(d){a=d}else f=i.execCb(c,l,b,f);this.map.isDefine&&void 0===f&&((b=this.module)?f=b.exports:this.usingExports&&
19 | (f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=l;this.exports=f;if(this.map.isDefine&&!this.ignore&&(r[c]=f,g.onResourceLoad))g.onResourceLoad(i,this.map,this.depMaps);y(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
20 | this.map,b=a.id,d=p(a.prefix);this.depMaps.push(d);q(d,"defined",u(this,function(f){var l,d;d=m(aa,this.map.id);var e=this.map.name,P=this.map.parentMap?this.map.parentMap.name:null,n=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(e=f.normalize(e,function(a){return c(a,P,!0)})||""),f=p(a.prefix+"!"+e,this.map.parentMap),q(f,"defined",u(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=m(h,f.id)){this.depMaps.push(f);
21 | if(this.events.error)d.on("error",u(this,function(a){this.emit("error",a)}));d.enable()}}else d?(this.map.url=i.nameToUrl(d),this.load()):(l=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),l.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(h,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),l.fromText=u(this,function(f,c){var d=a.name,e=p(d),P=M;c&&(f=c);P&&(M=!1);s(e);t(j.config,b)&&(j.config[d]=j.config[b]);try{g.exec(f)}catch(h){return w(C("fromtexteval",
22 | "fromText eval for "+b+" failed: "+h,h,[b]))}P&&(M=!0);this.depMaps.push(e);i.completeLoad(d);n([d],l)}),f.load(a.name,n,l,j))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){V[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,u(this,function(a,b){var c,f;if("string"===typeof a){a=p(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=m(L,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;q(a,"defined",u(this,function(a){this.defineDep(b,
23 | a);this.check()}));this.errback?q(a,"error",u(this,this.errback)):this.events.error&&q(a,"error",u(this,function(a){this.emit("error",a)}))}c=a.id;f=h[c];!t(L,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,u(this,function(a){var b=m(h,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:j,contextName:b,
24 | registry:h,defined:r,urlFetched:S,defQueue:A,Module:Z,makeModuleMap:p,nextTick:g.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=j.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(j[b]||(j[b]={}),U(j[b],a,!0,!0)):j[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(aa[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);
25 | b[c]=a}),j.shim=b);a.packages&&v(a.packages,function(a){var b,a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(j.paths[b]=a.location);j.pkgs[b]=a.name+"/"+(a.main||"main").replace(ia,"").replace(Q,"")});B(h,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=p(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ba,arguments));return b||a.exports&&da(a.exports)}},makeRequire:function(a,e){function j(c,d,m){var n,
26 | q;e.enableBuildCallback&&(d&&G(d))&&(d.__requireJsBuild=!0);if("string"===typeof c){if(G(d))return w(C("requireargs","Invalid require call"),m);if(a&&t(L,c))return L[c](h[a.id]);if(g.get)return g.get(i,c,a,j);n=p(c,a,!1,!0);n=n.id;return!t(r,n)?w(C("notloaded",'Module name "'+n+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):r[n]}J();i.nextTick(function(){J();q=s(p(null,a));q.skipMap=e.skipMap;q.init(c,d,m,{enabled:!0});D()});return j}e=e||{};U(j,{isBrowser:z,toUrl:function(b){var d,
27 | e=b.lastIndexOf("."),k=b.split("/")[0];if(-1!==e&&(!("."===k||".."===k)||1<e))d=b.substring(e,b.length),b=b.substring(0,e);return i.nameToUrl(c(b,a&&a.id,!0),d,!0)},defined:function(b){return t(r,p(b,a,!1,!0).id)},specified:function(b){b=p(b,a,!1,!0).id;return t(r,b)||t(h,b)}});a||(j.undef=function(b){x();var c=p(b,a,!0),e=m(h,b);d(b);delete r[b];delete S[c.url];delete $[b];T(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&($[b]=e.events),y(b))});return j},enable:function(a){m(h,a.id)&&
28 | s(a).enable()},completeLoad:function(a){var b,c,d=m(j.shim,a)||{},g=d.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=m(h,a);if(!b&&!t(r,a)&&c&&!c.inited){if(j.enforceDefine&&(!g||!da(g)))return e(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,d.deps||[],d.exportsFn])}D()},nameToUrl:function(a,b,c){var d,e,h;(d=m(j.pkgs,a))&&(a=d);if(d=m(aa,a))return i.nameToUrl(d,b,c);if(g.jsExtRegExp.test(a))d=a+(b||"");else{d=j.paths;
29 | a=a.split("/");for(e=a.length;0<e;e-=1)if(h=a.slice(0,e).join("/"),h=m(d,h)){H(h)&&(h=h[0]);a.splice(0,e,h);break}d=a.join("/");d+=b||(/^data\:|\?/.test(d)||c?"":".js");d=("/"===d.charAt(0)||d.match(/^[\w\+\.\-]+:/)?"":j.baseUrl)+d}return j.urlArgs?d+((-1===d.indexOf("?")?"?":"&")+j.urlArgs):d},load:function(a,b){g.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ja.test((a.currentTarget||a.srcElement).readyState))N=null,a=I(a),i.completeLoad(a.id)},
30 | onScriptError:function(a){var b=I(a);if(!e(b.id))return w(C("scripterror","Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var g,x,y,D,I,E,N,J,s,O,ka=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,la=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,Q=/\.js$/,ia=/^\.\//;x=Object.prototype;var K=x.toString,fa=x.hasOwnProperty,ha=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),ea=!z&&"undefined"!==typeof importScripts,ja=
31 | z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,Y="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},q={},R=[],M=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;q=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(q=require,require=void 0);g=requirejs=function(b,c,d,e){var n,p="_";!H(b)&&"string"!==typeof b&&(n=b,H(c)?(b=c,c=d,d=e):b=[]);n&&n.context&&(p=n.context);(e=m(F,p))||(e=F[p]=g.s.newContext(p));
32 | n&&e.configure(n);return e.require(b,c,d)};g.config=function(b){return g(b)};g.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=g);g.version="2.1.17";g.jsExtRegExp=/^\/|:|\?|\.js$/;g.isBrowser=z;x=g.s={contexts:F,newContext:ga};g({});v(["toUrl","undef","defined","specified"],function(b){g[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=
33 | x.head=D.parentNode;g.onError=ca;g.createNode=function(b){var c=b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};g.load=function(b,c,d){var e=b&&b.config||{};if(z)return e=g.createNode(e,c,d),e.setAttribute("data-requirecontext",b.contextName),e.setAttribute("data-requiremodule",c),e.attachEvent&&!(e.attachEvent.toString&&0>e.attachEvent.toString().indexOf("[native code"))&&
34 | !Y?(M=!0,e.attachEvent("onreadystatechange",b.onScriptLoad)):(e.addEventListener("load",b.onScriptLoad,!1),e.addEventListener("error",b.onScriptError,!1)),e.src=d,J=e,D?y.insertBefore(e,D):y.appendChild(e),J=null,e;if(ea)try{importScripts(d),b.completeLoad(c)}catch(m){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,m,[c]))}};z&&!q.skipDataMain&&T(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(I=b.getAttribute("data-main"))return s=I,q.baseUrl||(E=s.split("/"),
35 | s=E.pop(),O=E.length?E.join("/")+"/":"./",q.baseUrl=O),s=s.replace(Q,""),g.jsExtRegExp.test(s)&&(s=I),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var e,g;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(ka,"").replace(la,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(M){if(!(e=J))N&&"interactive"===N.readyState||T(document.getElementsByTagName("script"),function(b){if("interactive"===
36 | b.readyState)return N=b}),e=N;e&&(b||(b=e.getAttribute("data-requiremodule")),g=F[e.getAttribute("data-requirecontext")])}(g?g.defQueue:R).push([b,c,d])};define.amd={jQuery:!0};g.exec=function(b){return eval(b)};g(q)}})(this);
37 | 


--------------------------------------------------------------------------------
/bin/virtualized-scroll-viewer.js:
--------------------------------------------------------------------------------
  1 | var __extends = (this && this.__extends) || function (d, b) {
  2 |     for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
  3 |     function __() { this.constructor = d; }
  4 |     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  5 | };
  6 | define("virtualized-scroll-viewer-extensions", ["require", "exports"], function (require, exports) {
  7 |     "use strict";
  8 |     var ScrollExtensions;
  9 |     (function (ScrollExtensions) {
 10 |         var OVERFLOW_REGEX = /(auto|scroll)/;
 11 |         var NON_SCROLLABLE_ELEMENT_ATRIBUTE = "data-not-scrollable";
 12 |         (function (ScrollDirection) {
 13 |             ScrollDirection[ScrollDirection["Horizontal"] = 0] = "Horizontal";
 14 |             ScrollDirection[ScrollDirection["Vertical"] = 1] = "Vertical";
 15 |         })(ScrollExtensions.ScrollDirection || (ScrollExtensions.ScrollDirection = {}));
 16 |         var ScrollDirection = ScrollExtensions.ScrollDirection;
 17 |         function getScrollHostInfo(element, excludeStaticParent) {
 18 |             if (element === null || element === undefined || element instanceof Document) {
 19 |                 return {
 20 |                     scrollHost: window,
 21 |                     scrollDirection: ScrollDirection.Vertical,
 22 |                 };
 23 |             }
 24 |             var elementComputedStyle = getComputedStyle(element);
 25 |             excludeStaticParent = excludeStaticParent || elementComputedStyle.position === "absolute";
 26 |             if (!excludeStaticParent || elementComputedStyle.position !== "static") {
 27 |                 var isOverFlow = OVERFLOW_REGEX.test(elementComputedStyle.overflow +
 28 |                     elementComputedStyle.overflowY +
 29 |                     elementComputedStyle.overflowX);
 30 |                 if (isOverFlow) {
 31 |                     if (!element.hasAttribute(NON_SCROLLABLE_ELEMENT_ATRIBUTE)) {
 32 |                         return {
 33 |                             scrollHost: element,
 34 |                             scrollDirection: OVERFLOW_REGEX.test(elementComputedStyle.overflowY) ? ScrollDirection.Vertical :
 35 |                                 ScrollDirection.Horizontal,
 36 |                         };
 37 |                     }
 38 |                 }
 39 |             }
 40 |             return getScrollHostInfo(element.parentElement, excludeStaticParent);
 41 |         }
 42 |         ScrollExtensions.getScrollHostInfo = getScrollHostInfo;
 43 |         function getScrollInfo(scrollHost) {
 44 |             if (scrollHost instanceof Window) {
 45 |                 return {
 46 |                     scrollHost: scrollHost,
 47 |                     scroll: {
 48 |                         x: document.body.scrollLeft,
 49 |                         y: document.body.scrollTop,
 50 |                         height: document.body.scrollHeight,
 51 |                         width: document.body.scrollWidth,
 52 |                     },
 53 |                     viewport: {
 54 |                         x: 0,
 55 |                         y: 0,
 56 |                         height: scrollHost.innerHeight,
 57 |                         width: scrollHost.innerWidth,
 58 |                     },
 59 |                 };
 60 |             }
 61 |             else if (scrollHost instanceof HTMLElement) {
 62 |                 return {
 63 |                     scrollHost: scrollHost,
 64 |                     scroll: {
 65 |                         x: scrollHost.scrollLeft,
 66 |                         y: scrollHost.scrollTop,
 67 |                         height: scrollHost.scrollHeight,
 68 |                         width: scrollHost.scrollWidth,
 69 |                     },
 70 |                     viewport: {
 71 |                         x: 0,
 72 |                         y: 0,
 73 |                         height: scrollHost.clientHeight,
 74 |                         width: scrollHost.clientWidth,
 75 |                     },
 76 |                 };
 77 |             }
 78 |             return null;
 79 |         }
 80 |         ScrollExtensions.getScrollInfo = getScrollInfo;
 81 |         function setScrollOffset(scrollHost, x, y, increment) {
 82 |             if (increment === void 0) { increment = false; }
 83 |             if (scrollHost instanceof Window) {
 84 |                 scrollHost = document.body;
 85 |             }
 86 |             var scrollHostElement = scrollHost;
 87 |             if (!isNaN(y)) {
 88 |                 if (increment) {
 89 |                     y += scrollHostElement.scrollTop;
 90 |                 }
 91 |                 scrollHostElement.scrollTop = y;
 92 |             }
 93 |             if (!isNaN(x)) {
 94 |                 if (increment) {
 95 |                     x += scrollHostElement.scrollLeft;
 96 |                 }
 97 |                 scrollHostElement.scrollLeft = x;
 98 |             }
 99 |         }
100 |         ScrollExtensions.setScrollOffset = setScrollOffset;
101 |     })(ScrollExtensions = exports.ScrollExtensions || (exports.ScrollExtensions = {}));
102 |     var ObjectExtensions;
103 |     (function (ObjectExtensions) {
104 |         function assign(target) {
105 |             var sources = [];
106 |             for (var _i = 1; _i < arguments.length; _i++) {
107 |                 sources[_i - 1] = arguments[_i];
108 |             }
109 |             if (target == null) {
110 |                 throw new TypeError("Cannot convert undefined or null to object");
111 |             }
112 |             target = Object(target);
113 |             for (var index = 1; index < arguments.length; index++) {
114 |                 var source = arguments[index];
115 |                 if (source != null) {
116 |                     for (var key in source) {
117 |                         if (Object.prototype.hasOwnProperty.call(source, key)) {
118 |                             target[key] = source[key];
119 |                         }
120 |                     }
121 |                 }
122 |             }
123 |             return target;
124 |         }
125 |         ObjectExtensions.assign = assign;
126 |     })(ObjectExtensions = exports.ObjectExtensions || (exports.ObjectExtensions = {}));
127 | });
128 | define("animated-group", ["require", "exports", "react", "react-dom", "virtualized-scroll-viewer-extensions"], function (require, exports, React, ReactDOM, virtualized_scroll_viewer_extensions_1) {
129 |     "use strict";
130 |     var ANIMATION_APPEAR = "-appear";
131 |     var ANIMATION_ENTER = "-enter";
132 |     var ANIMATION_LEAVE = "-leave";
133 |     var ANIMATION_ACTIVE = "-active";
134 |     var TICK = 17;
135 |     var AnimatedGroup = (function (_super) {
136 |         __extends(AnimatedGroup, _super);
137 |         function AnimatedGroup() {
138 |             _super.apply(this, arguments);
139 |         }
140 |         AnimatedGroup.prototype.getDefaultTransitionName = function () {
141 |             return "";
142 |         };
143 |         AnimatedGroup.prototype.getAnimatedItem = function () {
144 |             return AnimatedItem;
145 |         };
146 |         AnimatedGroup.prototype.wrapChild = function (child) {
147 |             var childAttributes = {
148 |                 shouldSuspendAnimations: this.props.shouldSuspendAnimations,
149 |                 transitionName: this.props.transitionName || this.getDefaultTransitionName(),
150 |                 onEnter: this.props.onEnter,
151 |                 onEnterStarted: this.props.onEnterStarted,
152 |                 onLeave: this.props.onLeave,
153 |                 onLeaveStarted: this.props.onLeaveStarted
154 |             };
155 |             return React.createElement(this.getAnimatedItem(), virtualized_scroll_viewer_extensions_1.ObjectExtensions.assign({}, child.props, childAttributes), child);
156 |         };
157 |         AnimatedGroup.prototype.render = function () {
158 |             return React.createElement(React.addons.TransitionGroup, virtualized_scroll_viewer_extensions_1.ObjectExtensions.assign({}, this.props, { childFactory: this.wrapChild.bind(this) }), this.props.children);
159 |         };
160 |         return AnimatedGroup;
161 |     }(React.Component));
162 |     exports.AnimatedGroup = AnimatedGroup;
163 |     var AnimatedItem = (function (_super) {
164 |         __extends(AnimatedItem, _super);
165 |         function AnimatedItem() {
166 |             _super.apply(this, arguments);
167 |             this.transitionTimeouts = [];
168 |         }
169 |         AnimatedItem.prototype.getAnimationClassName = function (element) {
170 |             return this.props.transitionName;
171 |         };
172 |         AnimatedItem.prototype.queueAction = function (action, timeout) {
173 |             var timeoutHandle = setTimeout(action, timeout);
174 |             this.transitionTimeouts.push(timeoutHandle);
175 |         };
176 |         AnimatedItem.prototype.transition = function (transitionName, done, onStart, onStartTransition, onEnd) {
177 |             var _this = this;
178 |             if (this.props.shouldSuspendAnimations && this.props.shouldSuspendAnimations()) {
179 |                 done();
180 |                 return;
181 |             }
182 |             var element = ReactDOM.findDOMNode(this);
183 |             var animationClassName = this.getAnimationClassName(element) + transitionName;
184 |             onStart(element);
185 |             element.classList.add(animationClassName);
186 |             this.queueAction(function () {
187 |                 element.classList.add(animationClassName + ANIMATION_ACTIVE);
188 |                 var elementStyle = getComputedStyle(element);
189 |                 var animationDuration = parseFloat(elementStyle.transitionDelay) + parseFloat(elementStyle.transitionDuration);
190 |                 onStartTransition(element);
191 |                 var animationEnd = function () {
192 |                     element.classList.remove(animationClassName);
193 |                     element.classList.remove(animationClassName + ANIMATION_ACTIVE);
194 |                     onEnd(element);
195 |                     done();
196 |                 };
197 |                 _this.queueAction(animationEnd, animationDuration * 1000);
198 |             }, TICK);
199 |         };
200 |         AnimatedItem.prototype.componentWillAppear = function (done) {
201 |             var _this = this;
202 |             this.transition(ANIMATION_APPEAR, done, function (element) { return _this.startEnter(element); }, function (element) { return _this.startEnterTransition(element); }, function (element) { return _this.endEnter(element); });
203 |         };
204 |         AnimatedItem.prototype.componentWillEnter = function (done) {
205 |             var _this = this;
206 |             this.transition(ANIMATION_ENTER, done, function (element) { return _this.startEnter(element); }, function (element) { return _this.startEnterTransition(element); }, function (element) { return _this.endEnter(element); });
207 |         };
208 |         AnimatedItem.prototype.startEnter = function (element) { };
209 |         AnimatedItem.prototype.startEnterTransition = function (element) {
210 |             if (this.props.onEnterStarted) {
211 |                 this.props.onEnterStarted();
212 |             }
213 |         };
214 |         AnimatedItem.prototype.endEnter = function (element) { };
215 |         AnimatedItem.prototype.componentWillLeave = function (done) {
216 |             var _this = this;
217 |             this.transition(ANIMATION_LEAVE, done, function (element) { return _this.startLeave(element); }, function (element) { return _this.startLeaveTransition(element); }, function (element) { return _this.endLeave(element); });
218 |         };
219 |         AnimatedItem.prototype.startLeave = function (element) { };
220 |         AnimatedItem.prototype.startLeaveTransition = function (element) {
221 |             if (this.props.onLeaveStarted) {
222 |                 this.props.onLeaveStarted();
223 |             }
224 |         };
225 |         AnimatedItem.prototype.endLeave = function (element) { };
226 |         AnimatedItem.prototype.componentWillUnmount = function () {
227 |             this.transitionTimeouts.forEach(function (t) { return clearTimeout(t); });
228 |             this.transitionTimeouts = [];
229 |         };
230 |         AnimatedItem.prototype.componentDidAppear = function () {
231 |             if (this.props.onEnter) {
232 |                 this.props.onEnter();
233 |             }
234 |         };
235 |         AnimatedItem.prototype.componentDidEnter = function () {
236 |             if (this.props.onEnter) {
237 |                 this.props.onEnter();
238 |             }
239 |         };
240 |         AnimatedItem.prototype.componentDidLeave = function () {
241 |             if (this.props.onLeave) {
242 |                 this.props.onLeave();
243 |             }
244 |         };
245 |         AnimatedItem.prototype.render = function () {
246 |             return React.Children.only(this.props.children);
247 |         };
248 |         return AnimatedItem;
249 |     }(React.Component));
250 |     exports.AnimatedItem = AnimatedItem;
251 | });
252 | define("animated-size-group", ["require", "exports", "animated-group"], function (require, exports, animated_group_1) {
253 |     "use strict";
254 |     var PIXELS_UNIT = "px";
255 |     var AnimatedSizeGroup = (function (_super) {
256 |         __extends(AnimatedSizeGroup, _super);
257 |         function AnimatedSizeGroup() {
258 |             _super.apply(this, arguments);
259 |         }
260 |         AnimatedSizeGroup.prototype.getAnimatedItem = function () {
261 |             return AnimatedSizeItem;
262 |         };
263 |         return AnimatedSizeGroup;
264 |     }(animated_group_1.AnimatedGroup));
265 |     exports.AnimatedSizeGroup = AnimatedSizeGroup;
266 |     var AnimatedSizeItem = (function (_super) {
267 |         __extends(AnimatedSizeItem, _super);
268 |         function AnimatedSizeItem() {
269 |             _super.apply(this, arguments);
270 |         }
271 |         AnimatedSizeItem.prototype.isDisplayInline = function (style) {
272 |             return style && style.display.indexOf("inline") === 0;
273 |         };
274 |         AnimatedSizeItem.prototype.getAnimationClassName = function (element) {
275 |             var animationClassName = _super.prototype.getAnimationClassName.call(this, element);
276 |             var style = getComputedStyle(element);
277 |             if (this.isDisplayInline(style)) {
278 |                 animationClassName += "-inline";
279 |             }
280 |             return animationClassName;
281 |         };
282 |         AnimatedSizeItem.prototype.storeStyleSize = function (element) {
283 |             this.previousStyleWidth = element.style.width;
284 |             this.previousStyleHeight = element.style.height;
285 |         };
286 |         AnimatedSizeItem.prototype.restorePreviousStyleSize = function (element) {
287 |             element.style.width = this.previousStyleWidth;
288 |             element.style.height = this.previousStyleHeight;
289 |         };
290 |         AnimatedSizeItem.prototype.startEnter = function (element) {
291 |             _super.prototype.startEnter.call(this, element);
292 |             var elementBounds = element.getBoundingClientRect();
293 |             this.previousWidth = elementBounds.width;
294 |             this.previousHeight = elementBounds.height;
295 |         };
296 |         AnimatedSizeItem.prototype.startEnterTransition = function (element) {
297 |             _super.prototype.startEnterTransition.call(this, element);
298 |             this.storeStyleSize(element);
299 |             var elementBounds = element.getBoundingClientRect();
300 |             if (elementBounds.width !== this.previousWidth) {
301 |                 element.style.width = this.previousWidth + PIXELS_UNIT;
302 |             }
303 |             if (elementBounds.height !== this.previousHeight) {
304 |                 element.style.height = this.previousHeight + PIXELS_UNIT;
305 |             }
306 |         };
307 |         AnimatedSizeItem.prototype.endEnter = function (element) {
308 |             _super.prototype.endEnter.call(this, element);
309 |             this.restorePreviousStyleSize(element);
310 |         };
311 |         AnimatedSizeItem.prototype.startLeave = function (element) {
312 |             _super.prototype.startLeave.call(this, element);
313 |             this.storeStyleSize(element);
314 |             var elementBounds = element.getBoundingClientRect();
315 |             element.style.width = elementBounds.width + PIXELS_UNIT;
316 |             element.style.height = elementBounds.height + PIXELS_UNIT;
317 |         };
318 |         AnimatedSizeItem.prototype.startLeaveTransition = function (element) {
319 |             _super.prototype.startLeaveTransition.call(this, element);
320 |             this.restorePreviousStyleSize(element);
321 |         };
322 |         return AnimatedSizeItem;
323 |     }(animated_group_1.AnimatedItem));
324 |     exports.AnimatedSizeItem = AnimatedSizeItem;
325 | });
326 | define("virtualized-scroll-viewer", ["require", "exports", "react", "react-dom", "virtualized-scroll-viewer-extensions"], function (require, exports, React, ReactDOM, virtualized_scroll_viewer_extensions_2) {
327 |     "use strict";
328 |     function insideiOSWebView() {
329 |         return !navigator.standalone && /(iPad)|(iPhone)/i.test(navigator.userAgent) && !/safari/i.test(navigator.userAgent);
330 |     }
331 |     var SCROLL_EVENT_NAME = "scroll";
332 |     var RESIZE_EVENT_NAME = "resize";
333 |     var PIXEL_UNITS = "px";
334 |     var FLEXBOX_DISPLAY = document.createElement("p").style.flex === undefined ? "-webkit-flex" : "flex";
335 |     var DEFAULT_BUFFER_SIZE = 3;
336 |     var BUFFER_MULTIPLIER = insideiOSWebView() ? 4 : 1;
337 |     var MIN_ITEM_SIZE = 20;
338 |     var VirtualizedScrollViewer = (function (_super) {
339 |         __extends(VirtualizedScrollViewer, _super);
340 |         function VirtualizedScrollViewer(props, context) {
341 |             _super.call(this, props, context);
342 |             this.scrollDirection = virtualized_scroll_viewer_extensions_2.ScrollExtensions.ScrollDirection.Vertical;
343 |             this.hasPendingPropertiesUpdate = false;
344 |             this.isScrollOngoing = false;
345 |             this.isComponentInitialized = false;
346 |             this.scrollHandler = this.handleScroll.bind(this);
347 |             this.state = {
348 |                 firstRenderedItemIndex: 0,
349 |                 lastRenderedItemIndex: 1,
350 |                 averageItemSize: 0,
351 |                 scrollOffset: 0,
352 |                 offScreenItemsCount: 0,
353 |                 effectiveScrollOffset: Number.MIN_VALUE
354 |             };
355 |         }
356 |         VirtualizedScrollViewer.prototype.getScrollHostInfo = function () {
357 |             if (!this.scrollHostInfo) {
358 |                 this.scrollHostInfo = virtualized_scroll_viewer_extensions_2.ScrollExtensions.getScrollHostInfo(this.itemsContainer);
359 |             }
360 |             return this.scrollHostInfo;
361 |         };
362 |         VirtualizedScrollViewer.prototype.getScrollInfo = function () {
363 |             var scrollHostInfo = this.getScrollHostInfo();
364 |             var scrollHost = scrollHostInfo.scrollHost;
365 |             var scrollInfo = virtualized_scroll_viewer_extensions_2.ScrollExtensions.getScrollInfo(scrollHost);
366 |             var result = {
367 |                 scrollHost: scrollHost,
368 |                 scrollOffset: this.getDimension(scrollInfo.scroll.y, scrollInfo.scroll.x),
369 |                 viewportSize: this.getDimension(scrollInfo.viewport.height, scrollInfo.viewport.width),
370 |                 viewportLowerBound: 0,
371 |                 viewportUpperBound: 0,
372 |             };
373 |             if (scrollHost instanceof Window) {
374 |                 result.viewportLowerBound = this.getDimension(scrollInfo.viewport.y, scrollInfo.viewport.x);
375 |                 result.viewportUpperBound = this.getDimension(scrollInfo.viewport.height, scrollInfo.viewport.width);
376 |             }
377 |             else if (scrollHost instanceof HTMLElement) {
378 |                 var bounds = scrollHost.getBoundingClientRect();
379 |                 result.viewportLowerBound = this.getDimension(bounds.top, bounds.left);
380 |                 result.viewportUpperBound = this.getDimension(bounds.bottom, bounds.right);
381 |             }
382 |             return result;
383 |         };
384 |         VirtualizedScrollViewer.prototype.addScrollHandler = function () {
385 |             if (this.isDisposed) {
386 |                 return;
387 |             }
388 |             this.scrollHostInfo = null;
389 |             var scrollHostInfo = this.getScrollHostInfo();
390 |             var scrollHost = scrollHostInfo.scrollHost;
391 |             scrollHost.addEventListener(SCROLL_EVENT_NAME, this.scrollHandler);
392 |             scrollHost.addEventListener(RESIZE_EVENT_NAME, this.scrollHandler);
393 |             this.scrollDirection = scrollHostInfo.scrollDirection;
394 |         };
395 |         VirtualizedScrollViewer.prototype.removeScrollHandler = function () {
396 |             var scrollHost = this.getScrollHostInfo().scrollHost;
397 |             scrollHost.removeEventListener(SCROLL_EVENT_NAME, this.scrollHandler);
398 |             scrollHost.removeEventListener(RESIZE_EVENT_NAME, this.scrollHandler);
399 |         };
400 |         VirtualizedScrollViewer.prototype.componentDidMount = function () {
401 |             var _this = this;
402 |             this.itemsContainer = ReactDOM.findDOMNode(this);
403 |             var onWindowScroll = function () {
404 |                 window.removeEventListener(SCROLL_EVENT_NAME, onWindowScroll, true);
405 |                 window.removeEventListener(RESIZE_EVENT_NAME, onWindowScroll, true);
406 |                 _this.addScrollHandler();
407 |             };
408 |             requestAnimationFrame(function () {
409 |                 if (!_this.isDisposed) {
410 |                     window.addEventListener(SCROLL_EVENT_NAME, onWindowScroll, true);
411 |                     window.addEventListener(RESIZE_EVENT_NAME, onWindowScroll, true);
412 |                 }
413 |             });
414 |             this.setState(this.getCurrentScrollViewerState(this.props.length));
415 |         };
416 |         VirtualizedScrollViewer.prototype.componentWillUnmount = function () {
417 |             this.removeScrollHandler();
418 |             this.scrollHostInfo = null;
419 |             this.itemsContainer = null;
420 |         };
421 |         VirtualizedScrollViewer.prototype.componentWillReceiveProps = function (nextProps) {
422 |             this.setState(this.getCurrentScrollViewerState(nextProps.length));
423 |             this.hasPendingPropertiesUpdate = true;
424 |         };
425 |         VirtualizedScrollViewer.prototype.setState = function (state, callback) {
426 |             var _this = this;
427 |             _super.prototype.setState.call(this, state, function () {
428 |                 _this.onDidUpdate();
429 |                 if (callback) {
430 |                     callback();
431 |                 }
432 |             });
433 |         };
434 |         VirtualizedScrollViewer.prototype.onDidUpdate = function () {
435 |             var _this = this;
436 |             this.itemsContainer = ReactDOM.findDOMNode(this);
437 |             this.renderOffScreenBuffer();
438 |             if (this.setPendingScroll) {
439 |                 requestAnimationFrame(function () {
440 |                     if (!_this.isDisposed) {
441 |                         _this.setPendingScroll();
442 |                         _this.setPendingScroll = null;
443 |                     }
444 |                 });
445 |             }
446 |             if (!this.isComponentInitialized) {
447 |                 this.isComponentInitialized = true;
448 |                 if (this.props.initializationCompleted) {
449 |                     this.props.initializationCompleted();
450 |                 }
451 |             }
452 |             if (this.hasPendingPropertiesUpdate) {
453 |                 this.hasPendingPropertiesUpdate = false;
454 |                 this.setState(this.getCurrentScrollViewerState(this.props.length));
455 |             }
456 |         };
457 |         VirtualizedScrollViewer.prototype.renderOffScreenBuffer = function () {
458 |             this.itemsContainer.style.position = "relative";
459 |             var items = this.getListItems(this.itemsContainer);
460 |             for (var _i = 0, _a = items.slice(0, this.state.offScreenItemsCount); _i < _a.length; _i++) {
461 |                 var item = _a[_i];
462 |                 var child = item;
463 |                 if (child.style !== undefined) {
464 |                     child.style.position = "absolute";
465 |                     child.style.top = "-10000" + PIXEL_UNITS;
466 |                 }
467 |             }
468 |             for (var _b = 0, _c = items.slice(this.state.offScreenItemsCount); _b < _c.length; _b++) {
469 |                 var item = _c[_b];
470 |                 var child = item;
471 |                 if (child.style !== undefined) {
472 |                     child.style.position = "";
473 |                     child.style.top = "";
474 |                 }
475 |             }
476 |         };
477 |         VirtualizedScrollViewer.prototype.handleScroll = function (scrollEvent) {
478 |             var _this = this;
479 |             if (this.pendingScrollAsyncUpdateHandle) {
480 |                 return;
481 |             }
482 |             this.pendingScrollAsyncUpdateHandle = requestAnimationFrame(function () {
483 |                 if (_this.isDisposed) {
484 |                     return;
485 |                 }
486 |                 try {
487 |                     var newState = _this.getCurrentScrollViewerState(_this.props.length, true);
488 |                     if (newState !== _this.state) {
489 |                         _this.isScrollOngoing = true;
490 |                         _this.setState(newState, function () { return _this.isScrollOngoing = false; });
491 |                     }
492 |                 }
493 |                 finally {
494 |                     _this.pendingScrollAsyncUpdateHandle = 0;
495 |                 }
496 |                 if (_this.props.scrollChanged) {
497 |                     _this.props.scrollChanged();
498 |                 }
499 |             });
500 |         };
501 |         VirtualizedScrollViewer.prototype.shouldComponentUpdate = function (nextProps, nextState) {
502 |             return nextState.firstRenderedItemIndex !== this.state.firstRenderedItemIndex ||
503 |                 nextState.lastRenderedItemIndex !== this.state.lastRenderedItemIndex ||
504 |                 nextState.scrollOffset !== this.state.scrollOffset ||
505 |                 nextProps !== this.props;
506 |         };
507 |         VirtualizedScrollViewer.prototype.renderList = function (firstRenderedItemIndex, lastRenderedItemIndex) {
508 |             var scrollOffset = this.state.scrollOffset;
509 |             var length = Math.min(this.props.length, lastRenderedItemIndex - firstRenderedItemIndex + 1);
510 |             var items = this.props.renderItems(firstRenderedItemIndex, length);
511 |             var remainingSize = 0;
512 |             if (lastRenderedItemIndex < (this.props.length - 1)) {
513 |                 var averageItemSize = Math.max(MIN_ITEM_SIZE, this.state.averageItemSize);
514 |                 var scrollSize = averageItemSize * this.props.length;
515 |                 remainingSize = scrollSize - ((averageItemSize * length) + scrollOffset);
516 |             }
517 |             var listChildren = [];
518 |             listChildren.push(this.renderSpacer("first-spacer", scrollOffset));
519 |             listChildren.push(items);
520 |             listChildren.push(this.renderSpacer("last-spacer", remainingSize));
521 |             return this.props.renderWrapper(listChildren);
522 |         };
523 |         VirtualizedScrollViewer.prototype.renderSpacer = function (key, dimension) {
524 |             var FILL_SPACE = "100%";
525 |             var style = {
526 |                 display: FLEXBOX_DISPLAY,
527 |             };
528 |             if (this.scrollDirection === virtualized_scroll_viewer_extensions_2.ScrollExtensions.ScrollDirection.Horizontal) {
529 |                 style.width = Math.round(dimension) + PIXEL_UNITS;
530 |                 style.height = FILL_SPACE;
531 |             }
532 |             else {
533 |                 style.width = FILL_SPACE;
534 |                 style.height = Math.round(dimension) + PIXEL_UNITS;
535 |             }
536 |             return React.DOM.script({ key: key, style: style });
537 |         };
538 |         VirtualizedScrollViewer.prototype.render = function () {
539 |             return this.renderList(this.state.firstRenderedItemIndex, this.state.lastRenderedItemIndex);
540 |         };
541 |         VirtualizedScrollViewer.prototype.getDimension = function (vertical, horizontal) {
542 |             return this.scrollDirection === virtualized_scroll_viewer_extensions_2.ScrollExtensions.ScrollDirection.Horizontal ? horizontal : vertical;
543 |         };
544 |         VirtualizedScrollViewer.prototype.getListItems = function (itemsContainer) {
545 |             var items = [];
546 |             for (var i = 1; i < itemsContainer.children.length - 1; i++) {
547 |                 items.push(itemsContainer.children[i]);
548 |             }
549 |             return items;
550 |         };
551 |         VirtualizedScrollViewer.prototype.getItemBounds = function (item) {
552 |             var bounds = item.getBoundingClientRect();
553 |             var rect = {
554 |                 width: bounds.width,
555 |                 height: bounds.height,
556 |                 left: bounds.left,
557 |                 right: bounds.right,
558 |                 top: bounds.top,
559 |                 bottom: bounds.bottom,
560 |             };
561 |             if (this.scrollDirection === virtualized_scroll_viewer_extensions_2.ScrollExtensions.ScrollDirection.Horizontal) {
562 |                 if (rect.width < MIN_ITEM_SIZE) {
563 |                     rect.width = MIN_ITEM_SIZE;
564 |                     rect.right = rect.left + rect.width;
565 |                 }
566 |             }
567 |             else {
568 |                 if (rect.height < MIN_ITEM_SIZE) {
569 |                     rect.height = MIN_ITEM_SIZE;
570 |                     rect.bottom = rect.top + rect.height;
571 |                 }
572 |             }
573 |             return rect;
574 |         };
575 |         VirtualizedScrollViewer.prototype.areElementsStacked = function (items) {
576 |             if (items.length < 2) {
577 |                 return false;
578 |             }
579 |             var firstElement = items[items.length - 2];
580 |             var secondElement = items[items.length - 1];
581 |             var firstElementBounds = firstElement.getBoundingClientRect();
582 |             var secondElementBounds = secondElement.getBoundingClientRect();
583 |             return Math.floor(this.getDimension(secondElementBounds.top, 0)) >= Math.floor(this.getDimension(firstElementBounds.bottom, 1));
584 |         };
585 |         VirtualizedScrollViewer.prototype.calculateItemsSize = function (items, firstItemIndex, lastItemIndex) {
586 |             if (firstItemIndex === void 0) { firstItemIndex = 0; }
587 |             if (lastItemIndex === void 0) { lastItemIndex = items.length - 1; }
588 |             var total = 0;
589 |             var sizes = new Array(lastItemIndex - firstItemIndex + 1);
590 |             for (var i = firstItemIndex; i <= lastItemIndex; i++) {
591 |                 var itemBounds = this.getItemBounds(items[i]);
592 |                 var size = this.getDimension(itemBounds.height, itemBounds.width);
593 |                 total += size;
594 |                 sizes[i - firstItemIndex] = size;
595 |             }
596 |             return { total: total, sizes: sizes };
597 |         };
598 |         VirtualizedScrollViewer.prototype.countItemsAndSizeThatFitIn = function (itemsSizes, sizeToFit, allowOverflow, countBackwards) {
599 |             if (allowOverflow === void 0) { allowOverflow = false; }
600 |             if (countBackwards === void 0) { countBackwards = false; }
601 |             var i = 0;
602 |             var itemsSize = 0;
603 |             var getIndex = countBackwards ? function (idx) { return itemsSizes.length - 1 - idx; } : function (idx) { return idx; };
604 |             for (; i < itemsSizes.length; i++) {
605 |                 var itemSize = itemsSizes[getIndex(i)];
606 |                 if ((itemsSize + itemSize) > sizeToFit) {
607 |                     if (allowOverflow) {
608 |                         i++;
609 |                         itemsSize += itemSize;
610 |                     }
611 |                     break;
612 |                 }
613 |                 itemsSize += itemSize;
614 |             }
615 |             return { size: itemsSize, count: i };
616 |         };
617 |         VirtualizedScrollViewer.prototype.getCurrentScrollViewerState = function (listLength, returnSameStateOnSmallChanges) {
618 |             if (returnSameStateOnSmallChanges === void 0) { returnSameStateOnSmallChanges = false; }
619 |             var scrollInfo = this.getScrollInfo();
620 |             var pageBufferSize = (this.props.pageBufferSize || DEFAULT_BUFFER_SIZE) * BUFFER_MULTIPLIER;
621 |             var viewportSafetyMargin = scrollInfo.viewportSize * (pageBufferSize / 2);
622 |             if (returnSameStateOnSmallChanges && Math.abs(scrollInfo.scrollOffset - this.state.effectiveScrollOffset) < (viewportSafetyMargin * 0.5)) {
623 |                 return this.state;
624 |             }
625 |             var items = this.getListItems(this.itemsContainer);
626 |             if (!this.areElementsStacked(items)) {
627 |                 return {
628 |                     firstRenderedItemIndex: 0,
629 |                     lastRenderedItemIndex: Math.max(1, this.props.length - 1),
630 |                     averageItemSize: 0,
631 |                     scrollOffset: 0,
632 |                     offScreenItemsCount: 0,
633 |                     effectiveScrollOffset: scrollInfo.scrollOffset
634 |                 };
635 |             }
636 |             var lastSpacerBounds = this.itemsContainer.lastElementChild.getBoundingClientRect();
637 |             if (this.getDimension(lastSpacerBounds.bottom, lastSpacerBounds.right) < -100) {
638 |                 return this.state;
639 |             }
640 |             var renderedItemsSizes = this.calculateItemsSize(items);
641 |             var offScreenItemsCount = this.state.offScreenItemsCount;
642 |             var onScreenItems = renderedItemsSizes.sizes.slice(offScreenItemsCount);
643 |             var onScreenItemsSize = onScreenItems.reduce(function (p, c) { return p + c; });
644 |             var averageItemSize = onScreenItemsSize / (onScreenItems.length * 1.0);
645 |             if (this.state.averageItemSize !== 0) {
646 |                 averageItemSize = (0.8 * this.state.averageItemSize) + (0.2 * averageItemSize);
647 |             }
648 |             var itemsFittingViewportCount = Math.ceil(scrollInfo.viewportSize / averageItemSize);
649 |             var maxOffScreenItemsCount = itemsFittingViewportCount;
650 |             var safetyItemsCount = Math.ceil(viewportSafetyMargin * 2 / averageItemSize);
651 |             var renderedItemsCount = Math.min(listLength, itemsFittingViewportCount + safetyItemsCount + maxOffScreenItemsCount);
652 |             var scrollOffset = this.state.scrollOffset;
653 |             var firstRenderedItemIndex = this.state.firstRenderedItemIndex;
654 |             var viewportLowerMargin = scrollInfo.viewportLowerBound - viewportSafetyMargin;
655 |             var firstSpacerBounds = this.itemsContainer.firstElementChild.getBoundingClientRect();
656 |             var firstItemOffset = this.getDimension(firstSpacerBounds.bottom, firstSpacerBounds.right);
657 |             if (Math.abs(firstItemOffset - viewportLowerMargin) <= onScreenItemsSize) {
658 |                 if (firstItemOffset < viewportLowerMargin) {
659 |                     var itemsGoingOffScreen = this.countItemsAndSizeThatFitIn(onScreenItems, Math.abs(viewportLowerMargin - firstItemOffset));
660 |                     if (itemsGoingOffScreen.count > 0) {
661 |                         scrollOffset += itemsGoingOffScreen.size;
662 |                         offScreenItemsCount += itemsGoingOffScreen.count;
663 |                         if (offScreenItemsCount > maxOffScreenItemsCount) {
664 |                             var leavingItemsCount = offScreenItemsCount - maxOffScreenItemsCount;
665 |                             firstRenderedItemIndex += leavingItemsCount;
666 |                             offScreenItemsCount = maxOffScreenItemsCount;
667 |                         }
668 |                     }
669 |                 }
670 |                 else if (firstItemOffset > viewportLowerMargin) {
671 |                     var availableSpace = Math.abs(firstItemOffset - viewportLowerMargin);
672 |                     var offScreenItems = renderedItemsSizes.sizes.slice(0, offScreenItemsCount);
673 |                     var itemsGoingOnScreen = this.countItemsAndSizeThatFitIn(offScreenItems, availableSpace, true, true);
674 |                     if (itemsGoingOnScreen.count > 0) {
675 |                         scrollOffset = Math.max(0, scrollOffset - itemsGoingOnScreen.size);
676 |                         offScreenItemsCount -= itemsGoingOnScreen.count;
677 |                         availableSpace -= itemsGoingOnScreen.size;
678 |                     }
679 |                     if (availableSpace > 0) {
680 |                         if (offScreenItemsCount !== 0) {
681 |                             throw "offScreenItemsCount should be 0";
682 |                         }
683 |                         var enteringItemsCount = Math.min(firstRenderedItemIndex, Math.ceil(availableSpace / averageItemSize));
684 |                         firstRenderedItemIndex -= enteringItemsCount;
685 |                         scrollOffset -= enteringItemsCount * averageItemSize;
686 |                     }
687 |                     if (offScreenItemsCount < maxOffScreenItemsCount) {
688 |                         var enteringItemsCount = Math.min(firstRenderedItemIndex, maxOffScreenItemsCount - offScreenItemsCount);
689 |                         firstRenderedItemIndex -= enteringItemsCount;
690 |                         offScreenItemsCount += enteringItemsCount;
691 |                     }
692 |                 }
693 |             }
694 |             else {
695 |                 var startOffset = this.getDimension(firstSpacerBounds.top, firstSpacerBounds.left);
696 |                 if (startOffset < scrollInfo.viewportLowerBound) {
697 |                     startOffset = Math.abs(startOffset - scrollInfo.viewportLowerBound);
698 |                 }
699 |                 else {
700 |                     startOffset = 0;
701 |                 }
702 |                 firstRenderedItemIndex = Math.max(0, Math.floor(startOffset / averageItemSize) - 1);
703 |                 offScreenItemsCount = 0;
704 |                 if (firstRenderedItemIndex > 0) {
705 |                     firstRenderedItemIndex = Math.max(0, firstRenderedItemIndex - Math.ceil(viewportSafetyMargin / averageItemSize));
706 |                 }
707 |                 firstRenderedItemIndex = Math.max(0, Math.min(firstRenderedItemIndex, listLength - 1 - renderedItemsCount));
708 |                 scrollOffset = firstRenderedItemIndex * averageItemSize;
709 |             }
710 |             if (firstRenderedItemIndex === 0 && offScreenItemsCount === 0) {
711 |                 scrollOffset = 0;
712 |             }
713 |             var lastRenderedItemIndex = Math.min(listLength - 1, firstRenderedItemIndex + renderedItemsCount);
714 |             return {
715 |                 firstRenderedItemIndex: firstRenderedItemIndex,
716 |                 lastRenderedItemIndex: lastRenderedItemIndex,
717 |                 averageItemSize: averageItemSize,
718 |                 scrollOffset: scrollOffset,
719 |                 offScreenItemsCount: offScreenItemsCount,
720 |                 effectiveScrollOffset: scrollInfo.scrollOffset
721 |             };
722 |         };
723 |         Object.defineProperty(VirtualizedScrollViewer.prototype, "isScrolling", {
724 |             get: function () {
725 |                 return this.isScrollOngoing;
726 |             },
727 |             enumerable: true,
728 |             configurable: true
729 |         });
730 |         Object.defineProperty(VirtualizedScrollViewer.prototype, "isInitialized", {
731 |             get: function () {
732 |                 return this.isComponentInitialized;
733 |             },
734 |             enumerable: true,
735 |             configurable: true
736 |         });
737 |         Object.defineProperty(VirtualizedScrollViewer.prototype, "isDisposed", {
738 |             get: function () {
739 |                 return !this.itemsContainer;
740 |             },
741 |             enumerable: true,
742 |             configurable: true
743 |         });
744 |         VirtualizedScrollViewer.prototype.setScrollOffset = function (x, y) {
745 |             var scrollInfo = this.getScrollInfo();
746 |             var scrollHost = scrollInfo.scrollHost;
747 |             var scrollX = this.getDimension(undefined, x);
748 |             var scrollY = this.getDimension(y, undefined);
749 |             var updateScroll = function () { virtualized_scroll_viewer_extensions_2.ScrollExtensions.setScrollOffset(scrollHost, scrollX, scrollY); };
750 |             if (this.isInitialized) {
751 |                 updateScroll();
752 |             }
753 |             else {
754 |                 this.setPendingScroll = updateScroll;
755 |             }
756 |         };
757 |         return VirtualizedScrollViewer;
758 |     }(React.Component));
759 |     exports.VirtualizedScrollViewer = VirtualizedScrollViewer;
760 | });
761 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <meta name="format-detection" content="telephone=no">
 4 |     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no, minimum-scale=1.0">
 5 |     <script data-main="bin/index" src="bin/require.js"></script>
 6 |     <style>
 7 |         body {
 8 |             font-family: "Arial";    
 9 |         }
10 |         
11 |         .list {
12 |             height: 300px;
13 |             overflow-y: scroll;
14 |             border: 1px solid gray;
15 |             line-height: 100px;
16 |         }
17 |         
18 |         .list-item {
19 |             border-bottom: 1px solid lightsteelblue;
20 |             background: rgb(230, 230, 230);
21 |             padding: 10px;
22 |         }
23 |         
24 |         .list-item.odd {
25 |            background: rgb(150, 150, 150)
26 |         }
27 |         
28 |         .list-item .spacer {
29 |             height: 600px;
30 |         }
31 |          
32 |         .list-item.odd .spacer {
33 |             height: 300px;
34 |         }
35 |         
36 |         .list-item img {
37 |             max-width: 100%;
38 |             display: block;
39 |         }
40 |         
41 |         .list-item.example-appear,
42 |         .list-item.odd.example-appear,
43 |         .list-item.example-enter,
44 |         .list-item.odd.example-enter {
45 |             height: 0;
46 |             transform: scale3d(1, 0, 1);
47 |         }
48 | 
49 |         .list-item.example-appear-active,
50 |         .list-item.odd.example-appear-active,
51 |         .list-item.example-enter-active,
52 |         .list-item.odd.example-enter-active {
53 |             transition: all 1s ease-in;
54 |             transform: scale3d(1, 1, 1);
55 |         }
56 |         
57 |         .list-item.example-leave-active,
58 |         .list-item.odd.example-leave-active {
59 |             height: 0px;
60 |             transition: all 1s ease-in;
61 |         }
62 |         
63 |     </style>
64 | </head>
65 | <body>
66 |     <div id="container"/>
67 | </body>
68 | </html>


--------------------------------------------------------------------------------
/libs/react-dom.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * ReactDOM v15.1.0
 3 |  *
 4 |  * Copyright 2013-present, Facebook, Inc.
 5 |  * All rights reserved.
 6 |  *
 7 |  * This source code is licensed under the BSD-style license found in the
 8 |  * LICENSE file in the root directory of this source tree. An additional grant
 9 |  * of patent rights can be found in the PATENTS file in the same directory.
10 |  *
11 |  */
12 | // Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
13 | ;(function(f) {
14 |   // CommonJS
15 |   if (typeof exports === "object" && typeof module !== "undefined") {
16 |     module.exports = f(require('react'));
17 | 
18 |   // RequireJS
19 |   } else if (typeof define === "function" && define.amd) {
20 |     define(['react'], f);
21 | 
22 |   // <script>
23 |   } else {
24 |     var g;
25 |     if (typeof window !== "undefined") {
26 |       g = window;
27 |     } else if (typeof global !== "undefined") {
28 |       g = global;
29 |     } else if (typeof self !== "undefined") {
30 |       g = self;
31 |     } else {
32 |       // works providing we're not in "use strict";
33 |       // needed for Java 8 Nashorn
34 |       // see https://github.com/facebook/react/issues/3037
35 |       g = this;
36 |     }
37 |     g.ReactDOM = f(g.React);
38 |   }
39 | 
40 | })(function(React) {
41 |   return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
42 | });
43 | 


--------------------------------------------------------------------------------
/libs/require.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  RequireJS 2.1.17 Copyright (c) 2010-2015, The Dojo Foundation All Rights Reserved.
 3 |  Available via the MIT or new BSD license.
 4 |  see: http://github.com/jrburke/requirejs for details
 5 | */
 6 | var requirejs,require,define;
 7 | (function(ba){function G(b){return"[object Function]"===K.call(b)}function H(b){return"[object Array]"===K.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function T(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function t(b,c){return fa.call(b,c)}function m(b,c){return t(b,c)&&b[c]}function B(b,c){for(var d in b)if(t(b,d)&&c(b[d],d))break}function U(b,c,d,e){c&&B(c,function(c,g){if(d||!t(b,g))e&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
 8 | RegExp)?(b[g]||(b[g]={}),U(b[g],c,d,e)):b[g]=c});return b}function u(b,c){return function(){return c.apply(b,arguments)}}function ca(b){throw b;}function da(b){if(!b)return b;var c=ba;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,e){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=e;d&&(c.originalError=d);return c}function ga(b){function c(a,k,b){var f,l,c,d,e,g,i,p,k=k&&k.split("/"),h=j.map,n=h&&h["*"];if(a){a=a.split("/");l=a.length-1;j.nodeIdCompat&&
 9 | Q.test(a[l])&&(a[l]=a[l].replace(Q,""));"."===a[0].charAt(0)&&k&&(l=k.slice(0,k.length-1),a=l.concat(a));l=a;for(c=0;c<l.length;c++)if(d=l[c],"."===d)l.splice(c,1),c-=1;else if(".."===d&&!(0===c||1===c&&".."===l[2]||".."===l[c-1])&&0<c)l.splice(c-1,2),c-=2;a=a.join("/")}if(b&&h&&(k||n)){l=a.split("/");c=l.length;a:for(;0<c;c-=1){e=l.slice(0,c).join("/");if(k)for(d=k.length;0<d;d-=1)if(b=m(h,k.slice(0,d).join("/")))if(b=m(b,e)){f=b;g=c;break a}!i&&(n&&m(n,e))&&(i=m(n,e),p=c)}!f&&i&&(f=i,g=p);f&&(l.splice(0,
10 | g,f),a=l.join("/"))}return(f=m(j.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(k){if(k.getAttribute("data-requiremodule")===a&&k.getAttribute("data-requirecontext")===i.contextName)return k.parentNode.removeChild(k),!0})}function e(a){var k=m(j.paths,a);if(k&&H(k)&&1<k.length)return k.shift(),i.require.undef(a),i.makeRequire(null,{skipMap:!0})([a]),!0}function n(a){var k,c=a?a.indexOf("!"):-1;-1<c&&(k=a.substring(0,c),a=a.substring(c+1,a.length));return[k,a]}function p(a,
11 | k,b,f){var l,d,e=null,g=k?k.name:null,j=a,p=!0,h="";a||(p=!1,a="_@r"+(K+=1));a=n(a);e=a[0];a=a[1];e&&(e=c(e,g,f),d=m(r,e));a&&(e?h=d&&d.normalize?d.normalize(a,function(a){return c(a,g,f)}):-1===a.indexOf("!")?c(a,g,f):a:(h=c(a,g,f),a=n(h),e=a[0],h=a[1],b=!0,l=i.nameToUrl(h)));b=e&&!d&&!b?"_unnormalized"+(O+=1):"";return{prefix:e,name:h,parentMap:k,unnormalized:!!b,url:l,originalName:j,isDefine:p,id:(e?e+"!"+h:h)+b}}function s(a){var k=a.id,b=m(h,k);b||(b=h[k]=new i.Module(a));return b}function q(a,
12 | k,b){var f=a.id,c=m(h,f);if(t(r,f)&&(!c||c.defineEmitComplete))"defined"===k&&b(r[f]);else if(c=s(a),c.error&&"error"===k)b(c.error);else c.on(k,b)}function w(a,b){var c=a.requireModules,f=!1;if(b)b(a);else if(v(c,function(b){if(b=m(h,b))b.error=a,b.events.error&&(f=!0,b.emit("error",a))}),!f)g.onError(a)}function x(){R.length&&(ha.apply(A,[A.length,0].concat(R)),R=[])}function y(a){delete h[a];delete V[a]}function F(a,b,c){var f=a.map.id;a.error?a.emit("error",a.error):(b[f]=!0,v(a.depMaps,function(f,
13 | d){var e=f.id,g=m(h,e);g&&(!a.depMatched[d]&&!c[e])&&(m(b,e)?(a.defineDep(d,r[e]),a.check()):F(g,b,c))}),c[f]=!0)}function D(){var a,b,c=(a=1E3*j.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],l=[],g=!1,h=!0;if(!W){W=!0;B(V,function(a){var i=a.map,j=i.id;if(a.enabled&&(i.isDefine||l.push(a),!a.error))if(!a.inited&&c)e(j)?g=b=!0:(f.push(j),d(j));else if(!a.inited&&(a.fetched&&i.isDefine)&&(g=!0,!i.prefix))return h=!1});if(c&&f.length)return a=C("timeout","Load timeout for modules: "+f,null,
14 | f),a.contextName=i.contextName,w(a);h&&v(l,function(a){F(a,{},{})});if((!c||b)&&g)if((z||ea)&&!X)X=setTimeout(function(){X=0;D()},50);W=!1}}function E(a){t(r,a[0])||s(p(a[0],null,!0)).init(a[1],a[2])}function I(a){var a=a.currentTarget||a.srcElement,b=i.onScriptLoad;a.detachEvent&&!Y?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=i.onScriptError;(!a.detachEvent||Y)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function J(){var a;
15 | for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var W,Z,i,L,X,j={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},h={},V={},$={},A=[],r={},S={},aa={},K=1,O=1;L={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?r[a.map.id]=a.exports:a.exports=r[a.map.id]={}},module:function(a){return a.module?
16 | a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return m(j.config,a.map.id)||{}},exports:a.exports||(a.exports={})}}};Z=function(a){this.events=m($,a.id)||{};this.map=a;this.shim=m(j.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};Z.prototype={init:function(a,b,c,f){f=f||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=u(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=
17 | c;this.inited=!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],u(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
18 | this.map.url;S[a]||(S[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var f=this.exports,l=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(l)){if(this.events.error&&this.map.isDefine||g.onError!==ca)try{f=i.execCb(c,l,b,f)}catch(d){a=d}else f=i.execCb(c,l,b,f);this.map.isDefine&&void 0===f&&((b=this.module)?f=b.exports:this.usingExports&&
19 | (f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=l;this.exports=f;if(this.map.isDefine&&!this.ignore&&(r[c]=f,g.onResourceLoad))g.onResourceLoad(i,this.map,this.depMaps);y(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
20 | this.map,b=a.id,d=p(a.prefix);this.depMaps.push(d);q(d,"defined",u(this,function(f){var l,d;d=m(aa,this.map.id);var e=this.map.name,P=this.map.parentMap?this.map.parentMap.name:null,n=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(e=f.normalize(e,function(a){return c(a,P,!0)})||""),f=p(a.prefix+"!"+e,this.map.parentMap),q(f,"defined",u(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=m(h,f.id)){this.depMaps.push(f);
21 | if(this.events.error)d.on("error",u(this,function(a){this.emit("error",a)}));d.enable()}}else d?(this.map.url=i.nameToUrl(d),this.load()):(l=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),l.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(h,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),l.fromText=u(this,function(f,c){var d=a.name,e=p(d),P=M;c&&(f=c);P&&(M=!1);s(e);t(j.config,b)&&(j.config[d]=j.config[b]);try{g.exec(f)}catch(h){return w(C("fromtexteval",
22 | "fromText eval for "+b+" failed: "+h,h,[b]))}P&&(M=!0);this.depMaps.push(e);i.completeLoad(d);n([d],l)}),f.load(a.name,n,l,j))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){V[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,u(this,function(a,b){var c,f;if("string"===typeof a){a=p(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=m(L,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;q(a,"defined",u(this,function(a){this.defineDep(b,
23 | a);this.check()}));this.errback?q(a,"error",u(this,this.errback)):this.events.error&&q(a,"error",u(this,function(a){this.emit("error",a)}))}c=a.id;f=h[c];!t(L,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,u(this,function(a){var b=m(h,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:j,contextName:b,
24 | registry:h,defined:r,urlFetched:S,defQueue:A,Module:Z,makeModuleMap:p,nextTick:g.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=j.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(j[b]||(j[b]={}),U(j[b],a,!0,!0)):j[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(aa[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);
25 | b[c]=a}),j.shim=b);a.packages&&v(a.packages,function(a){var b,a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(j.paths[b]=a.location);j.pkgs[b]=a.name+"/"+(a.main||"main").replace(ia,"").replace(Q,"")});B(h,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=p(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ba,arguments));return b||a.exports&&da(a.exports)}},makeRequire:function(a,e){function j(c,d,m){var n,
26 | q;e.enableBuildCallback&&(d&&G(d))&&(d.__requireJsBuild=!0);if("string"===typeof c){if(G(d))return w(C("requireargs","Invalid require call"),m);if(a&&t(L,c))return L[c](h[a.id]);if(g.get)return g.get(i,c,a,j);n=p(c,a,!1,!0);n=n.id;return!t(r,n)?w(C("notloaded",'Module name "'+n+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):r[n]}J();i.nextTick(function(){J();q=s(p(null,a));q.skipMap=e.skipMap;q.init(c,d,m,{enabled:!0});D()});return j}e=e||{};U(j,{isBrowser:z,toUrl:function(b){var d,
27 | e=b.lastIndexOf("."),k=b.split("/")[0];if(-1!==e&&(!("."===k||".."===k)||1<e))d=b.substring(e,b.length),b=b.substring(0,e);return i.nameToUrl(c(b,a&&a.id,!0),d,!0)},defined:function(b){return t(r,p(b,a,!1,!0).id)},specified:function(b){b=p(b,a,!1,!0).id;return t(r,b)||t(h,b)}});a||(j.undef=function(b){x();var c=p(b,a,!0),e=m(h,b);d(b);delete r[b];delete S[c.url];delete $[b];T(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&($[b]=e.events),y(b))});return j},enable:function(a){m(h,a.id)&&
28 | s(a).enable()},completeLoad:function(a){var b,c,d=m(j.shim,a)||{},g=d.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=m(h,a);if(!b&&!t(r,a)&&c&&!c.inited){if(j.enforceDefine&&(!g||!da(g)))return e(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,d.deps||[],d.exportsFn])}D()},nameToUrl:function(a,b,c){var d,e,h;(d=m(j.pkgs,a))&&(a=d);if(d=m(aa,a))return i.nameToUrl(d,b,c);if(g.jsExtRegExp.test(a))d=a+(b||"");else{d=j.paths;
29 | a=a.split("/");for(e=a.length;0<e;e-=1)if(h=a.slice(0,e).join("/"),h=m(d,h)){H(h)&&(h=h[0]);a.splice(0,e,h);break}d=a.join("/");d+=b||(/^data\:|\?/.test(d)||c?"":".js");d=("/"===d.charAt(0)||d.match(/^[\w\+\.\-]+:/)?"":j.baseUrl)+d}return j.urlArgs?d+((-1===d.indexOf("?")?"?":"&")+j.urlArgs):d},load:function(a,b){g.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ja.test((a.currentTarget||a.srcElement).readyState))N=null,a=I(a),i.completeLoad(a.id)},
30 | onScriptError:function(a){var b=I(a);if(!e(b.id))return w(C("scripterror","Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var g,x,y,D,I,E,N,J,s,O,ka=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,la=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,Q=/\.js$/,ia=/^\.\//;x=Object.prototype;var K=x.toString,fa=x.hasOwnProperty,ha=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),ea=!z&&"undefined"!==typeof importScripts,ja=
31 | z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,Y="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},q={},R=[],M=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;q=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(q=require,require=void 0);g=requirejs=function(b,c,d,e){var n,p="_";!H(b)&&"string"!==typeof b&&(n=b,H(c)?(b=c,c=d,d=e):b=[]);n&&n.context&&(p=n.context);(e=m(F,p))||(e=F[p]=g.s.newContext(p));
32 | n&&e.configure(n);return e.require(b,c,d)};g.config=function(b){return g(b)};g.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=g);g.version="2.1.17";g.jsExtRegExp=/^\/|:|\?|\.js$/;g.isBrowser=z;x=g.s={contexts:F,newContext:ga};g({});v(["toUrl","undef","defined","specified"],function(b){g[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=
33 | x.head=D.parentNode;g.onError=ca;g.createNode=function(b){var c=b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};g.load=function(b,c,d){var e=b&&b.config||{};if(z)return e=g.createNode(e,c,d),e.setAttribute("data-requirecontext",b.contextName),e.setAttribute("data-requiremodule",c),e.attachEvent&&!(e.attachEvent.toString&&0>e.attachEvent.toString().indexOf("[native code"))&&
34 | !Y?(M=!0,e.attachEvent("onreadystatechange",b.onScriptLoad)):(e.addEventListener("load",b.onScriptLoad,!1),e.addEventListener("error",b.onScriptError,!1)),e.src=d,J=e,D?y.insertBefore(e,D):y.appendChild(e),J=null,e;if(ea)try{importScripts(d),b.completeLoad(c)}catch(m){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,m,[c]))}};z&&!q.skipDataMain&&T(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(I=b.getAttribute("data-main"))return s=I,q.baseUrl||(E=s.split("/"),
35 | s=E.pop(),O=E.length?E.join("/")+"/":"./",q.baseUrl=O),s=s.replace(Q,""),g.jsExtRegExp.test(s)&&(s=I),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var e,g;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(ka,"").replace(la,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(M){if(!(e=J))N&&"interactive"===N.readyState||T(document.getElementsByTagName("script"),function(b){if("interactive"===
36 | b.readyState)return N=b}),e=N;e&&(b||(b=e.getAttribute("data-requiremodule")),g=F[e.getAttribute("data-requirecontext")])}(g?g.defQueue:R).push([b,c,d])};define.amd={jQuery:!0};g.exec=function(b){return eval(b)};g(q)}})(this);
37 | 


--------------------------------------------------------------------------------
/src/animated-group.ts:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as ReactDOM from "react-dom";
  3 | import { ObjectExtensions } from "virtualized-scroll-viewer-extensions";
  4 | 
  5 | const ANIMATION_APPEAR = "-appear";
  6 | const ANIMATION_ENTER = "-enter";
  7 | const ANIMATION_LEAVE = "-leave";
  8 | const ANIMATION_ACTIVE = "-active";
  9 | 
 10 | const TICK = 17; // same as CSS Transition group
 11 | 
 12 | type TransitionCallback = (element: HTMLElement) => void;
 13 | 
 14 | export interface IAnimatedAttributes extends React.HTMLProps<any>, React.TransitionGroupProps {
 15 |     shouldSuspendAnimations?: () => boolean;
 16 |     transitionName?: string;
 17 |     onEnter?: () => void;
 18 |     onEnterStarted?: () => void;
 19 |     onLeave?: () => void;
 20 |     onLeaveStarted?: () => void;
 21 | }
 22 | 
 23 | export class AnimatedGroup extends React.Component<IAnimatedAttributes, any> {
 24 | 
 25 |     protected getDefaultTransitionName(): string {
 26 |         return "";
 27 |     }
 28 |     
 29 |     protected getAnimatedItem(): React.ComponentClass<IAnimatedAttributes> {
 30 |         return AnimatedItem;
 31 |     }
 32 |     
 33 |     private wrapChild(child: any): React.ReactElement<any> {
 34 |         let childAttributes: IAnimatedAttributes = {
 35 |             shouldSuspendAnimations: this.props.shouldSuspendAnimations,
 36 |             transitionName: this.props.transitionName || this.getDefaultTransitionName(),
 37 |             onEnter: this.props.onEnter,
 38 |             onEnterStarted: this.props.onEnterStarted,
 39 |             onLeave: this.props.onLeave,
 40 |             onLeaveStarted: this.props.onLeaveStarted
 41 |         };
 42 |         return React.createElement(
 43 |             this.getAnimatedItem(), 
 44 |             <IAnimatedAttributes> ObjectExtensions.assign({}, child.props, childAttributes),
 45 |             child);
 46 |     }
 47 | 
 48 |     public render(): any {
 49 |         return React.createElement(
 50 |             React.addons.TransitionGroup,
 51 |             ObjectExtensions.assign({}, this.props, { childFactory: this.wrapChild.bind(this) }), 
 52 |             this.props.children);
 53 |     }
 54 | 
 55 | }
 56 | 
 57 | export class AnimatedItem extends React.Component<IAnimatedAttributes, any> {
 58 |     
 59 |     private transitionTimeouts: number[] = [];
 60 | 
 61 |     protected getAnimationClassName(element: HTMLElement): string {
 62 |         return this.props.transitionName;
 63 |     }
 64 | 
 65 |     private queueAction(action: Function, timeout: number): void {
 66 |         let timeoutHandle = setTimeout(action, timeout);
 67 |         this.transitionTimeouts.push(timeoutHandle);
 68 |     }
 69 |     
 70 |     private transition(transitionName: string, done: Function, onStart: TransitionCallback, onStartTransition: TransitionCallback, onEnd: TransitionCallback): void {
 71 |         if (this.props.shouldSuspendAnimations && this.props.shouldSuspendAnimations()) {
 72 |             done();
 73 |             return;
 74 |         }
 75 | 
 76 |         let element = <HTMLElement> ReactDOM.findDOMNode(this);
 77 |         let animationClassName = this.getAnimationClassName(element) + transitionName;
 78 |         onStart(element);
 79 |         element.classList.add(animationClassName);
 80 |         
 81 |         this.queueAction(
 82 |             () => {
 83 |                 element.classList.add(animationClassName + ANIMATION_ACTIVE);
 84 |                 
 85 |                 let elementStyle = getComputedStyle(element);
 86 |                 let animationDuration = parseFloat(elementStyle.transitionDelay) + parseFloat(elementStyle.transitionDuration);
 87 |                 
 88 |                 onStartTransition(element);
 89 |                 
 90 |                 let animationEnd = () => {
 91 |                     element.classList.remove(animationClassName);
 92 |                     element.classList.remove(animationClassName + ANIMATION_ACTIVE);
 93 |                     onEnd(element);
 94 |                     done();
 95 |                 };
 96 |                 
 97 |                 this.queueAction(animationEnd, animationDuration * 1000);
 98 |             }, 
 99 |             TICK);
100 |     }
101 |     
102 |     public componentWillAppear(done: Function): void {
103 |         this.transition(ANIMATION_APPEAR, 
104 |                         done, 
105 |                         (element: HTMLElement): void => this.startEnter(element),
106 |                         (element: HTMLElement): void => this.startEnterTransition(element),
107 |                         (element: HTMLElement): void => this.endEnter(element));
108 |     }
109 |     
110 |     public componentWillEnter(done: Function): void {
111 |         this.transition(ANIMATION_ENTER, 
112 |                         done, 
113 |                         (element: HTMLElement): void => this.startEnter(element),
114 |                         (element: HTMLElement): void => this.startEnterTransition(element),
115 |                         (element: HTMLElement): void => this.endEnter(element));
116 |     }
117 |     
118 |     protected startEnter(element: HTMLElement): void { }
119 |     
120 |     protected startEnterTransition(element: HTMLElement): void {
121 |         if (this.props.onEnterStarted) {
122 |             this.props.onEnterStarted();
123 |         }
124 |     }
125 |     
126 |     protected endEnter(element: HTMLElement): void { }
127 | 
128 |     public componentWillLeave(done: Function): void {
129 |         this.transition(ANIMATION_LEAVE, 
130 |                         done, 
131 |                         (element: HTMLElement): void => this.startLeave(element),
132 |                         (element: HTMLElement): void => this.startLeaveTransition(element),
133 |                         (element: HTMLElement): void => this.endLeave(element));
134 |     }
135 |     
136 |     protected startLeave(element: HTMLElement): void { }
137 |     
138 |     protected startLeaveTransition(element: HTMLElement): void {
139 |         if (this.props.onLeaveStarted) {
140 |             this.props.onLeaveStarted();
141 |         }
142 |     }
143 |     
144 |     protected endLeave(element: HTMLElement): void { }
145 | 
146 |     public componentWillUnmount(): void {
147 |         this.transitionTimeouts.forEach((t: number) => clearTimeout(t));
148 |         this.transitionTimeouts = [];
149 |     }
150 |     
151 |     public componentDidAppear(): void {
152 |         if (this.props.onEnter) {
153 |             this.props.onEnter();
154 |         }
155 |     }
156 |     
157 |     public componentDidEnter(): void {
158 |         if (this.props.onEnter) {
159 |             this.props.onEnter();
160 |         }
161 |     }
162 |     
163 |     public componentDidLeave(): void {
164 |         if (this.props.onLeave) {
165 |             this.props.onLeave();
166 |         }
167 |     }
168 | 
169 |     public render(): JSX.Element {
170 |         return React.Children.only(this.props.children);
171 |     }
172 | }
173 | 


--------------------------------------------------------------------------------
/src/animated-size-group.ts:
--------------------------------------------------------------------------------
 1 | import { AnimatedItem, AnimatedGroup, IAnimatedAttributes } from "animated-group";
 2 | 
 3 | const PIXELS_UNIT = "px";
 4 | 
 5 | export class AnimatedSizeGroup extends AnimatedGroup {
 6 | 
 7 |     protected getAnimatedItem(): React.ComponentClass<IAnimatedAttributes> {
 8 |         return AnimatedSizeItem;
 9 |     }
10 | }
11 | 
12 | export class AnimatedSizeItem extends AnimatedItem {
13 |     
14 |     private previousWidth: number;
15 |     private previousHeight: number;
16 |     
17 |     private previousStyleWidth: string;
18 |     private previousStyleHeight: string;
19 |     
20 |     private isDisplayInline(style: CSSStyleDeclaration): boolean {
21 |         return style && style.display.indexOf("inline") === 0;
22 |     }
23 |     
24 |     protected getAnimationClassName(element: HTMLElement): string {
25 |         let animationClassName = super.getAnimationClassName(element);
26 |         let style = getComputedStyle(element);
27 |         if (this.isDisplayInline(style)) {
28 |             // inline* elements will have a different class (usually scale horizontally instead of vertically)
29 |             animationClassName += "-inline";
30 |         }
31 |         return animationClassName;
32 |     }
33 |     
34 |     private storeStyleSize(element: HTMLElement): void {
35 |         this.previousStyleWidth = element.style.width;
36 |         this.previousStyleHeight = element.style.height;
37 |     }
38 |     
39 |     private restorePreviousStyleSize(element: HTMLElement): void {
40 |         element.style.width = this.previousStyleWidth;
41 |         element.style.height = this.previousStyleHeight;
42 |     }
43 |     
44 |     protected startEnter(element: HTMLElement): void {
45 |         super.startEnter(element);
46 |         // store current size
47 |         let elementBounds = element.getBoundingClientRect();
48 |         this.previousWidth = elementBounds.width;
49 |         this.previousHeight = elementBounds.height;    
50 |     }
51 |     
52 |     protected startEnterTransition(element: HTMLElement): void {
53 |         super.startEnterTransition(element);
54 |         // store inline style size to allow restoring it after animation ends
55 |         this.storeStyleSize(element);
56 |         
57 |         // set the size of the element to be the same as when we started
58 |         // ... to make width/height transitions work properly 
59 |         let elementBounds = element.getBoundingClientRect();
60 |         if (elementBounds.width !== this.previousWidth) {
61 |             // width changed - should be animating width
62 |             element.style.width = this.previousWidth + PIXELS_UNIT;
63 |         }
64 |         if (elementBounds.height !== this.previousHeight) {
65 |             // height changed - should be animating height
66 |             element.style.height = this.previousHeight + PIXELS_UNIT;
67 |         }
68 |     }
69 |     
70 |     protected endEnter(element: HTMLElement): void {
71 |         super.endEnter(element);
72 |         // revert the changes applied prior to animation
73 |         this.restorePreviousStyleSize(element);
74 |     }
75 |     
76 |     protected startLeave(element: HTMLElement): void {
77 |         super.startLeave(element);
78 |         // store inline style size to allow restoring it after animation ends
79 |         this.storeStyleSize(element);
80 |         
81 |         // set inline size ... to make width/height transitions work properly
82 |         let elementBounds = element.getBoundingClientRect();
83 |         element.style.width = elementBounds.width + PIXELS_UNIT;
84 |         element.style.height = elementBounds.height + PIXELS_UNIT;
85 |     }
86 |     
87 |     protected startLeaveTransition(element: HTMLElement): void {
88 |         super.startLeaveTransition(element);
89 |         // revert the changes applied prior to animation
90 |         this.restorePreviousStyleSize(element);
91 |     }
92 | }
93 | 


--------------------------------------------------------------------------------
/src/images.ts:
--------------------------------------------------------------------------------
 1 | export var Images = [
 2 | "http://24.media.tumblr.com/tumblr_m3sdvsBdJU1qzzim1o1_500.jpg",
 3 | "http://25.media.tumblr.com/tumblr_m1zlwpDjAh1qze0hyo1_1280.jpg",
 4 | "http://25.media.tumblr.com/tumblr_m1wlprhmJY1qjmz65o1_500.gif",
 5 | "http://25.media.tumblr.com/tumblr_lkvj1aVSQg1qbe5pxo1_1280.jpg",
 6 | "http://24.media.tumblr.com/Jjkybd3nSk6rkrg7VU07HTxGo1_500.jpg",
 7 | "http://29.media.tumblr.com/tumblr_lr64gw71Ag1qjqdfao1_500.png",
 8 | "http://25.media.tumblr.com/tumblr_m3jfavG5eN1r73wdao1_500.jpg",
 9 | "http://24.media.tumblr.com/tumblr_m35g24e4z11qzex9io1_1280.jpg",
10 | "http://24.media.tumblr.com/tumblr_m1nmoduuK21qzex9io1_1280.jpg",
11 | "http://24.media.tumblr.com/YyXwbMbaOoa3u0trL7uZedmPo1_400.gif",
12 | "http://25.media.tumblr.com/tumblr_lh0dypa6W21qgnva2o1_500.jpg",
13 | "http://24.media.tumblr.com/tumblr_m2o12tB0pn1qze0hyo1_1280.jpg",
14 | "http://25.media.tumblr.com/tumblr_kp3d65xe3l1qz9bf5o1_500.jpg",
15 | "http://24.media.tumblr.com/tumblr_lycrqshTFf1r38hk2o1_400.jpg",
16 | "http://26.media.tumblr.com/tumblr_ly9qoi8doW1qbt33io1_500.jpg",
17 | "http://24.media.tumblr.com/tumblr_m1um2sieES1qzex9io1_1280.jpg",
18 | "http://26.media.tumblr.com/tumblr_ltwqocDfjo1qdvbl3o1_1280.jpg",
19 | "http://29.media.tumblr.com/tumblr_m0r6hmzVYx1qbhms5o1_500.jpg",
20 | "http://30.media.tumblr.com/tumblr_m1pggypRMz1qjahcpo1_500.jpg",
21 | "http://25.media.tumblr.com/tumblr_m2u72wnvk11qhwmnpo1_1280.jpg",
22 | "http://25.media.tumblr.com/tumblr_lrcyxlchQZ1qfpssto1_r1_500.gif",
23 | "http://25.media.tumblr.com/tumblr_ln2uaqQ5Rz1qdvbl3o1_1280.jpg",
24 | "http://29.media.tumblr.com/tumblr_lyvsgqn1H51qbvr04o1_500.gif",
25 | "http://24.media.tumblr.com/tumblr_ly2lzj9yzP1qk4s2co1_1280.jpg",
26 | "http://24.media.tumblr.com/tumblr_lz032duhSH1qa10uwo1_1280.png",
27 | "http://24.media.tumblr.com/tumblr_m1fvvw2cS71qz5dg8o1_1280.jpg",
28 | "http://25.media.tumblr.com/tumblr_lz920fsYPB1rowplqo1_1280.jpg",
29 | "http://27.media.tumblr.com/tumblr_m0xhjbRFCp1r6b7kmo1_500.gif",
30 | "http://24.media.tumblr.com/tumblr_m2p47tjFdg1qa7xfro1_1280.jpg",
31 | "http://25.media.tumblr.com/tumblr_m4ilt9rDjh1r6jd7fo1_1280.jpg",
32 | "http://25.media.tumblr.com/tumblr_m3fdtouawb1qhwmnpo1_1280.jpg",
33 | "http://24.media.tumblr.com/tumblr_m0iuyhHhwD1qbe5pxo1_500.jpg",
34 | "http://26.media.tumblr.com/tumblr_ly17xkVXnc1qbt33io1_1280.jpg",
35 | "http://25.media.tumblr.com/tumblr_m8im7ptqs81rdogh7o1_1280.jpg",
36 | "http://27.media.tumblr.com/tumblr_m1pgyeuGDs1qjahcpo1_250.jpg",
37 | "http://24.media.tumblr.com/tumblr_lvbpb9op931qc1sduo1_500.jpg",
38 | "http://26.media.tumblr.com/tumblr_lhzo4g1ZiG1qfyzelo1_500.jpg",
39 | "http://24.media.tumblr.com/tumblr_luowrcYoTj1qdth8zo1_1280.jpg",
40 | "http://25.media.tumblr.com/tumblr_lee9o3ssrv1qcn249o1_400.gif",
41 | "http://24.media.tumblr.com/Jjkybd3nSbuwu42gf8MzkTik_500.jpg",
42 | "http://25.media.tumblr.com/tumblr_m4ijv28wlO1r6jd7fo1_500.jpg",
43 | "http://26.media.tumblr.com/tumblr_m20fbkANHa1qzex9io1_1280.jpg",
44 | "http://24.media.tumblr.com/tumblr_m0uo7n1nA01qzv52ko1_1280.jpg",
45 | "http://25.media.tumblr.com/tumblr_loxwm8v8fH1qjmniro1_400.gif",
46 | "http://25.media.tumblr.com/tumblr_m0oki3v6RC1qi9p54o1_500.jpg",
47 | "http://25.media.tumblr.com/tumblr_m7gbozreKr1qzex9io1_1280.jpg",
48 | "http://29.media.tumblr.com/tumblr_lrftlutgUt1qgn992o1_500.jpg",
49 | "http://25.media.tumblr.com/tumblr_m109jwrekN1qjc1a7o1_500.jpg",
50 | "http://24.media.tumblr.com/tumblr_m4mi59MLm91qz5l2xo1_500.png",
51 | "http://24.media.tumblr.com/tumblr_m4r5g38v4z1qh66wqo1_1280.jpg"
52 | ];


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as ReactDOM from "react-dom";
 3 | import { VirtualizedList } from "virtualized-list";
 4 | import { Images } from "images";
 5 | 
 6 | class App extends React.Component<{}, { items: number, pageBufferSize: number }> {
 7 |     
 8 |     constructor() {
 9 |         super();
10 |         this.state = {
11 |             items: 100,
12 |             pageBufferSize: 4
13 |         };
14 |     }
15 |     
16 |     private refresh() {
17 |         this.setState({ 
18 |             items: parseInt((this.refs["itemsCount"] as HTMLInputElement).value),
19 |             pageBufferSize: parseInt((this.refs["pageBufferSize"] as HTMLInputElement).value)
20 |         });
21 |     }
22 |     
23 |     private setScroll() {
24 |         let offset = parseInt( (this.refs["scrollOffset"] as HTMLInputElement).value);
25 |         (this.refs["list"] as VirtualizedList).scrollToOffset(offset);
26 |     }
27 | 
28 |     private scrollToIndex() {
29 |         let offset = parseInt( (this.refs["scrollToIndex"] as HTMLInputElement).value);
30 |         (this.refs["list"] as VirtualizedList).scrollToIndex(offset);
31 |     }
32 |     
33 |     public render() {
34 |         let imagesCount = Images.length;
35 |         let list: { index: number, image: string }[] = [];
36 |         for (let i = 0; i < this.state.items; i++) {
37 |             list.push({ image: Images[i % imagesCount], index: i });
38 |         }
39 |         return (
40 |             <div>
41 |                 <h1>Virtualized list example</h1>
42 |                 <br/>
43 |                 <input ref="itemsCount" placeholder="Number of items" defaultValue={this.state.items + ""} />
44 |                 <button onClick={this.refresh.bind(this)}>Set Items</button>
45 |                 <br/>
46 |                 <br/>
47 |                 <input ref="pageBufferSize" placeholder="Number extra invisible of items rendered" defaultValue={this.state.pageBufferSize + ""} />
48 |                 <button onClick={this.refresh.bind(this)}>Set Buffer Size</button>
49 |                 <br/>
50 |                 <br/>
51 |                 <input ref="scrollOffset" placeholder="Scroll offset" />
52 |                 <button onClick={this.setScroll.bind(this)}>Set Scroll</button>
53 |                 <br/>
54 |                 <br/>
55 |                 <input ref="scrollToIndex" placeholder="Scroll to index" />
56 |                 <button onClick={this.scrollToIndex.bind(this)}>Scroll to index</button>
57 |                 <br/>
58 |                 <br/>
59 |                 <VirtualizedList ref="list" list={list} pageBufferSize={this.state.pageBufferSize}/>
60 |             </div>);
61 |     }
62 | }
63 | 
64 | ReactDOM.render(React.createElement(App), document.getElementById("container"));


--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "module": "amd",
 4 |         "noImplicitAny": true,
 5 |         "removeComments": true,
 6 |         "preserveConstEnums": true,
 7 |         "sourceMap": false,
 8 |         "outFile": "../bin/virtualized-scroll-viewer.js",
 9 | 		"target": "es5",
10 | 		"jsx": "react",
11 |         "experimentalDecorators": true
12 |     },
13 |     "exclude": [
14 |         "index.tsx",
15 |         "images.ts",
16 |         "virtualized-list.tsx"
17 |     ]
18 | }


--------------------------------------------------------------------------------
/src/typings/react/react-addons-css-transition-group.d.ts:
--------------------------------------------------------------------------------
 1 | // Type definitions for React v0.14 (react-addons-css-transition-group)
 2 | // Project: http://facebook.github.io/react/
 3 | // Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>
 4 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 5 | 
 6 | /// <reference path="react.d.ts" />
 7 | /// <reference path="react-addons-transition-group.d.ts" />
 8 | 
 9 | declare namespace __React {
10 |     interface CSSTransitionGroupTransitionName {
11 |         enter: string;
12 |         enterActive?: string;
13 |         leave: string;
14 |         leaveActive?: string;
15 |         appear?: string;
16 |         appearActive?: string;
17 |     }
18 | 
19 |     interface CSSTransitionGroupProps extends TransitionGroupProps {
20 |         transitionName: string | CSSTransitionGroupTransitionName;
21 |         transitionAppear?: boolean;
22 |         transitionAppearTimeout?: number;
23 |         transitionEnter?: boolean;
24 |         transitionEnterTimeout?: number;
25 |         transitionLeave?: boolean;
26 |         transitionLeaveTimeout?: number;
27 |     }
28 | 
29 |     type CSSTransitionGroup = ComponentClass<CSSTransitionGroupProps>;
30 | 
31 |     namespace __Addons {
32 |         export var CSSTransitionGroup: __React.CSSTransitionGroup;
33 |     }
34 | }
35 | 
36 | declare module "react-addons-css-transition-group" {
37 |     var CSSTransitionGroup: __React.CSSTransitionGroup;
38 |     type CSSTransitionGroup = __React.CSSTransitionGroup;
39 |     export = CSSTransitionGroup;
40 | }
41 | 


--------------------------------------------------------------------------------
/src/typings/react/react-addons-transition-group.d.ts:
--------------------------------------------------------------------------------
 1 | // Type definitions for React v0.14 (react-addons-transition-group)
 2 | // Project: http://facebook.github.io/react/
 3 | // Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>
 4 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 5 | 
 6 | /// <reference path="react.d.ts" />
 7 | 
 8 | declare namespace __React {
 9 | 
10 |     interface TransitionGroupProps {
11 |         component?: ReactType;
12 |         className?: string;
13 |         childFactory?: (child: ReactElement<any>) => ReactElement<any>;
14 |     }
15 | 
16 |     type TransitionGroup = ComponentClass<TransitionGroupProps>;
17 | 
18 |     namespace __Addons {
19 |         export var TransitionGroup: __React.TransitionGroup;
20 |     }
21 | }
22 | 
23 | declare module "react-addons-transition-group" {
24 |     var TransitionGroup: __React.TransitionGroup;
25 |     type TransitionGroup = __React.TransitionGroup;
26 |     export = TransitionGroup;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/typings/react/react-dom.d.ts:
--------------------------------------------------------------------------------
 1 | // Type definitions for React v0.14 (react-dom)
 2 | // Project: http://facebook.github.io/react/
 3 | // Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>
 4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
 5 | 
 6 | /// <reference path="react.d.ts" />
 7 | 
 8 | declare namespace __React {
 9 |     
10 |     namespace __DOM {
11 |         function findDOMNode<E extends Element>(instance: ReactInstance): E;
12 |         function findDOMNode(instance: ReactInstance): Element;
13 |         
14 |         function render<P>(
15 |             element: DOMElement<P>,
16 |             container: Element,
17 |             callback?: (element: Element) => any): Element;
18 |         function render<P, S>(
19 |             element: ClassicElement<P>,
20 |             container: Element,
21 |             callback?: (component: ClassicComponent<P, S>) => any): ClassicComponent<P, S>;
22 |         function render<P, S>(
23 |             element: ReactElement<P>,
24 |             container: Element,
25 |             callback?: (component: Component<P, S>) => any): Component<P, S>;
26 |     
27 |         function unmountComponentAtNode(container: Element): boolean;
28 |         
29 |         var version: string;
30 |         
31 |         function unstable_batchedUpdates<A, B>(callback: (a: A, b: B) => any, a: A, b: B): void;
32 |         function unstable_batchedUpdates<A>(callback: (a: A) => any, a: A): void;
33 |         function unstable_batchedUpdates(callback: () => any): void;
34 |         
35 |         function unstable_renderSubtreeIntoContainer<P>(
36 |             parentComponent: Component<any, any>,
37 |             nextElement: DOMElement<P>,
38 |             container: Element,
39 |             callback?: (element: Element) => any): Element;
40 |         function unstable_renderSubtreeIntoContainer<P, S>(
41 |             parentComponent: Component<any, any>,
42 |             nextElement: ClassicElement<P>,
43 |             container: Element,
44 |             callback?: (component: ClassicComponent<P, S>) => any): ClassicComponent<P, S>;
45 |         function unstable_renderSubtreeIntoContainer<P, S>(
46 |             parentComponent: Component<any, any>,
47 |             nextElement: ReactElement<P>,
48 |             container: Element,
49 |             callback?: (component: Component<P, S>) => any): Component<P, S>;
50 |     }
51 |     
52 |     namespace __DOMServer {
53 |         function renderToString(element: ReactElement<any>): string;
54 |         function renderToStaticMarkup(element: ReactElement<any>): string;
55 |         var version: string;
56 |     }
57 | }
58 | 
59 | declare module "react-dom" {
60 |     import DOM = __React.__DOM;
61 |     export = DOM;
62 | }
63 | 
64 | declare module "react-dom/server" {
65 |     import DOMServer = __React.__DOMServer;
66 |     export = DOMServer;
67 | }
68 | 


--------------------------------------------------------------------------------
/src/typings/react/react-global.d.ts:
--------------------------------------------------------------------------------
 1 | // Type definitions for React v0.14 (namespace)
 2 | // Project: http://facebook.github.io/react/
 3 | // Definitions by: Asana <https://asana.com>, AssureSign <http://www.assuresign.com>, Microsoft <https://microsoft.com>
 4 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 5 | 
 6 | /// <reference path="react.d.ts" />
 7 | /// <reference path="react-dom.d.ts" />
 8 | /// <reference path="react-addons-css-transition-group.d.ts" />
 9 | /// <reference path="react-addons-transition-group.d.ts" />
10 | 
11 | import React = __React;
12 | import ReactDOM = __React.__DOM;
13 | 
14 | declare namespace __React {
15 |     export import addons = __React.__Addons;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/virtualized-list.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { VirtualizedScrollViewer } from "virtualized-scroll-viewer";
 3 | import { IAnimatedAttributes } from "animated-group";
 4 | import { AnimatedSizeGroup } from "animated-size-group";
 5 | 
 6 | const SCROLL_VIEWER_COMPONENT_REF = "scrollViewer";
 7 | 
 8 | export interface IVirtualizedListProperties {
 9 |     list: { image: string, index: number }[];
10 |     pageBufferSize: number;
11 | }
12 | 
13 | export class VirtualizedList extends React.Component<IVirtualizedListProperties, {}> {
14 |     
15 |     private renderItem(index: number) {
16 |         let even = index % 2 === 0;
17 |         let className = "list-item " + (even ? "even" : "odd");
18 |         let item = this.props.list[index];
19 |         return (
20 |             <div key={"i-" + index} className={className}>
21 |                 Item {item.index}
22 |                 <img src={item.image}></img>
23 |             </div>);
24 |     }
25 |     
26 |     public componentDidMount() {
27 |         this.getScrollViewer().scrollToOffset(0, 1000);
28 |     }
29 |     
30 |     private renderItems(startIndex: number, length: number) {
31 |         let items: JSX.Element[] = [];
32 |         for (let i = startIndex; i < startIndex + length; i++) {
33 |             items.push(this.renderItem(i));
34 |         }
35 |         return items;
36 |     }
37 |     
38 |     private getScrollViewer(): VirtualizedScrollViewer {
39 |         return this.refs[SCROLL_VIEWER_COMPONENT_REF] as VirtualizedScrollViewer;
40 |     }
41 |     
42 |     private get shouldSuspendAnimations(): boolean {
43 |         let scrollViewer = this.getScrollViewer();
44 |         return !scrollViewer || !scrollViewer.isInitialized || scrollViewer.isScrolling;
45 |     }
46 |     
47 |     private createScrollViewerContainer(children: React.ReactFragment): JSX.Element {
48 |         let listAttributes: IAnimatedAttributes = {
49 |             className: "list",
50 |             component: "div",
51 |             shouldSuspendAnimations: () => this.shouldSuspendAnimations,
52 |             transitionName: "example",
53 |         };
54 |         return React.createElement(AnimatedSizeGroup, listAttributes, children);
55 |     }
56 |     
57 |     public render() {
58 |         return (
59 |             <VirtualizedScrollViewer renderItems={(start, length) => this.renderItems(start, length)} 
60 |                                      renderWrapper={(children) => this.createScrollViewerContainer(children)}
61 |                                      length={this.props.list.length}
62 |                                      pageBufferSize={this.props.pageBufferSize}
63 |                                      ref={SCROLL_VIEWER_COMPONENT_REF} />
64 |         );
65 |     }
66 |     
67 |     public scrollToOffset(offset: number): void {
68 |         this.getScrollViewer().scrollToOffset(undefined, offset);
69 |     }
70 | 
71 |     public scrollToIndex(index: number): void {
72 |         this.getScrollViewer().scrollToIndex(index);
73 |     }
74 | }


--------------------------------------------------------------------------------
/src/virtualized-scroll-viewer-extensions.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | export module ScrollExtensions {
  3 |     const OVERFLOW_REGEX: RegExp = /(auto|scroll)/;
  4 |     const NON_SCROLLABLE_ELEMENT_ATRIBUTE = "data-not-scrollable";
  5 | 
  6 |     export enum ScrollDirection {
  7 |         Horizontal,
  8 |         Vertical
  9 |     }
 10 | 
 11 |     export interface IScrollHostInfo {
 12 |         scrollHost: Element | Window;
 13 |         scrollDirection: ScrollDirection;
 14 |     }
 15 |     
 16 |     export type Rect = { x: number, y: number, height: number, width: number };
 17 |     
 18 |     export interface IScrollInfo {
 19 |         scrollHost: Element | Window;
 20 |         viewport: Rect;
 21 |         scroll: Rect;
 22 |     }
 23 | 
 24 |     // returns the first DOM element that is scrollable implementation copied from jquery .scrollParent()
 25 |     export function getScrollHostInfo(element: Element, excludeStaticParent?: boolean): IScrollHostInfo {
 26 |         if (element === null || element === undefined || element instanceof Document) {
 27 |             return {
 28 |                 scrollHost: window,
 29 |                 scrollDirection: ScrollDirection.Vertical,
 30 |             };
 31 |         }
 32 | 
 33 |         let elementComputedStyle = getComputedStyle(element);
 34 |         excludeStaticParent = excludeStaticParent || elementComputedStyle.position === "absolute";
 35 | 
 36 |         if (!excludeStaticParent || elementComputedStyle.position !== "static") {
 37 |             let isOverFlow = OVERFLOW_REGEX.test(elementComputedStyle.overflow + 
 38 |                              elementComputedStyle.overflowY + 
 39 |                              elementComputedStyle.overflowX);
 40 | 
 41 |             if (isOverFlow) {
 42 |                 // some elements are special and should not be scrollable
 43 |                 if (!element.hasAttribute(NON_SCROLLABLE_ELEMENT_ATRIBUTE)) {
 44 |                     return {
 45 |                         scrollHost: element,
 46 |                         scrollDirection: OVERFLOW_REGEX.test(elementComputedStyle.overflowY) ? ScrollDirection.Vertical : 
 47 |                                                                                                ScrollDirection.Horizontal,
 48 |                     };
 49 |                 }
 50 |             }
 51 |         }
 52 | 
 53 |         return getScrollHostInfo(element.parentElement, excludeStaticParent);
 54 |     }
 55 |     
 56 |     export function getScrollInfo(scrollHost: Element | Window): IScrollInfo {
 57 |         if (scrollHost instanceof Window) {
 58 |             return {
 59 |                 scrollHost: scrollHost,
 60 |                 scroll: { 
 61 |                     x: document.body.scrollLeft, 
 62 |                     y: document.body.scrollTop,
 63 |                     height: document.body.scrollHeight, 
 64 |                     width: document.body.scrollWidth,
 65 |                 },
 66 |                 viewport: { 
 67 |                     x: 0, 
 68 |                     y: 0, 
 69 |                     height: scrollHost.innerHeight, 
 70 |                     width: scrollHost.innerWidth,
 71 |                 },
 72 |             };
 73 |         } else if (scrollHost instanceof HTMLElement) {
 74 |             return {
 75 |                 scrollHost: scrollHost,
 76 |                 scroll: { 
 77 |                     x: scrollHost.scrollLeft, 
 78 |                     y: scrollHost.scrollTop, 
 79 |                     height: scrollHost.scrollHeight, 
 80 |                     width: scrollHost.scrollWidth,
 81 |                 },
 82 |                 viewport: { 
 83 |                     x: 0, 
 84 |                     y: 0, 
 85 |                     height: scrollHost.clientHeight, 
 86 |                     width: scrollHost.clientWidth,
 87 |                 },
 88 |             };
 89 |         }
 90 |         
 91 |         return null;
 92 |     }
 93 |     
 94 |     export function setScrollOffset(scrollHost: Element | Window, x?: number, y?: number, increment = false): void {
 95 |         if (scrollHost instanceof Window) {
 96 |             scrollHost = document.body;
 97 |         }
 98 |         
 99 |         let scrollHostElement = <Element> scrollHost;
100 |         if (!isNaN(y)) {
101 |             if (increment) {
102 |                 y += scrollHostElement.scrollTop;
103 |             }
104 |             scrollHostElement.scrollTop = y;
105 |         }
106 |         if (!isNaN(x)) {
107 |             if (increment) {
108 |                 x += scrollHostElement.scrollLeft;
109 |             }
110 |             scrollHostElement.scrollLeft = x;
111 |         }
112 |     }
113 | }
114 | 
115 | export module ObjectExtensions {
116 |     export function assign(target: any, ...sources: any[]): Object {
117 |         if (target == null) {
118 |             throw new TypeError("Cannot convert undefined or null to object");
119 |         }
120 | 
121 |         target = Object(target);
122 |         for (let index = 1; index < arguments.length; index++) {
123 |             let source = arguments[index];
124 |             if (source != null) {
125 |                 for (let key in source) {
126 |                     if (Object.prototype.hasOwnProperty.call(source, key)) {
127 |                         target[key] = source[key];
128 |                     }
129 |                 }
130 |             }
131 |         }
132 |         return target;
133 |     }
134 | }
135 | 


--------------------------------------------------------------------------------
/src/virtualized-scroll-viewer.ts:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as ReactDOM from "react-dom";
  3 | import { ScrollExtensions } from "virtualized-scroll-viewer-extensions";
  4 | 
  5 | function insideiOSWebView(): boolean {
  6 |     return !(<any> navigator).standalone && /(iPad)|(iPhone)/i.test(navigator.userAgent) && !/safari/i.test(navigator.userAgent);    
  7 | }
  8 | 
  9 | const SCROLL_EVENT_NAME = "scroll";
 10 | const RESIZE_EVENT_NAME = "resize";
 11 | const PIXEL_UNITS = "px";
 12 | const FLEXBOX_DISPLAY = document.createElement("p").style.flex === undefined ? "-webkit-flex" : "flex"; // support ios under 9
 13 | const DEFAULT_BUFFER_SIZE = 3; // default number of extra viewports to render
 14 | const BUFFER_MULTIPLIER = insideiOSWebView() ? 4 : 1; // inside iOS webview use 4x the buffer size (due to scrolling limitations)
 15 | const MIN_ITEM_SIZE = 10; // minimum items size (because when items are animating height/width we might get very small values) 
 16 | 
 17 | export interface IScrollViewerProperties extends React.Props<VirtualizedScrollViewer> {
 18 |     length: number;
 19 |     renderItems: (startIndex: number, length: number) => React.ReactFragment;
 20 |     scrollChanged?: () => void;
 21 |     renderWrapper: (children: React.ReactFragment) => JSX.Element;
 22 |     pageBufferSize?: number; // number of pages buffered
 23 |     initializationCompleted?: () => void;  
 24 | }
 25 | 
 26 | interface IScrollInfo {
 27 |     scrollHost: Element | Window;
 28 |     viewportSize: number;
 29 |     scrollOffset: number;
 30 |     viewportLowerBound: number;
 31 |     viewportUpperBound: number;
 32 | }
 33 | 
 34 | export interface IScrollViewerState {
 35 |     firstRenderedItemIndex: number;
 36 |     lastRenderedItemIndex: number;
 37 |     averageItemSize: number;
 38 |     scrollOffset: number; // scroll compensation for missing items
 39 |     offScreenItemsCount: number;
 40 |     effectiveScrollOffset: number; // stores the scroll offset of the scroll host
 41 | }
 42 | 
 43 | type Rect = {
 44 |     width: number,
 45 |     height: number,
 46 |     top: number,
 47 |     bottom: number,
 48 |     left: number,
 49 |     right: number,
 50 | };
 51 | 
 52 | export class VirtualizedScrollViewer extends React.Component<IScrollViewerProperties, IScrollViewerState> {
 53 |     
 54 |     private scrollHandler: () => void;
 55 |     private scrollHostInfo: ScrollExtensions.IScrollHostInfo;
 56 |     private scrollDirection: ScrollExtensions.ScrollDirection = ScrollExtensions.ScrollDirection.Vertical;
 57 |     private hasPendingPropertiesUpdate: boolean = false;
 58 |     private pendingScrollAsyncUpdateHandle: number;
 59 |     private itemsContainer: HTMLElement;
 60 |     private isScrollOngoing: boolean = false; // true when rendering to due scroll changes
 61 |     private isComponentInitialized: boolean = false;
 62 |     private setPendingScroll: () => void;
 63 |     private itemsPlaceholdersImageDataUri: string;
 64 | 
 65 |     constructor(props: IScrollViewerProperties, context: any) {
 66 |         super(props, context);
 67 |         this.scrollHandler = this.handleScroll.bind(this);
 68 |         this.state = {
 69 |             firstRenderedItemIndex: 0,
 70 |             lastRenderedItemIndex: 1,
 71 |             averageItemSize: 0,
 72 |             scrollOffset: 0,
 73 |             offScreenItemsCount: 0,
 74 |             effectiveScrollOffset: Number.MIN_VALUE,
 75 |         };
 76 |     }
 77 | 
 78 |     /**
 79 |      * The element that owns the scrollbars
 80 |      */
 81 |     private getScrollHostInfo(): ScrollExtensions.IScrollHostInfo {
 82 |         if (!this.scrollHostInfo) {
 83 |             this.scrollHostInfo = ScrollExtensions.getScrollHostInfo(this.itemsContainer);
 84 |         }
 85 | 
 86 |         return this.scrollHostInfo;
 87 |     }
 88 |     
 89 |     /**
 90 |      * Scroll information: the element that has the scrollbar, its viewport size and the scroll position
 91 |      */
 92 |     private getScrollInfo(): IScrollInfo {
 93 |         let scrollHostInfo = this.getScrollHostInfo();
 94 |         let scrollHost = scrollHostInfo.scrollHost;
 95 |         let scrollInfo = ScrollExtensions.getScrollInfo(scrollHost);
 96 |         let result = {
 97 |             scrollHost: scrollHost,
 98 |             scrollOffset: this.getDimension(scrollInfo.scroll.y, scrollInfo.scroll.x),
 99 |             viewportSize: this.getDimension(scrollInfo.viewport.height, scrollInfo.viewport.width),
100 |             viewportLowerBound: 0,
101 |             viewportUpperBound: 0,
102 |         };
103 |         
104 |         if (scrollHost instanceof Window) {
105 |             result.viewportLowerBound = this.getDimension(scrollInfo.viewport.y, scrollInfo.viewport.x);
106 |             result.viewportUpperBound = this.getDimension(scrollInfo.viewport.height, scrollInfo.viewport.width);
107 |         } else if (scrollHost instanceof HTMLElement) {
108 |             let bounds = scrollHost.getBoundingClientRect();
109 |             result.viewportLowerBound = this.getDimension(bounds.top, bounds.left);
110 |             result.viewportUpperBound = this.getDimension(bounds.bottom, bounds.right);
111 |         }
112 |         
113 |         return result;
114 |     }
115 |     
116 |     /**
117 |      * Adds hooks to capture scroll events of the scrollable parent
118 |      */
119 |     private addScrollHandler(): void {
120 |         if (this.isDisposed) {
121 |             return;
122 |         }
123 |         this.scrollHostInfo = null; // clear previously cached scroll host info (might be wrong)
124 |         let scrollHostInfo = this.getScrollHostInfo();
125 |         let scrollHost = scrollHostInfo.scrollHost;
126 |         scrollHost.addEventListener(SCROLL_EVENT_NAME, this.scrollHandler);
127 |         scrollHost.addEventListener(RESIZE_EVENT_NAME, this.scrollHandler);
128 |         this.scrollDirection = scrollHostInfo.scrollDirection; // won't be updated later if changes (case not supported now)
129 |     }
130 |     
131 |     private removeScrollHandler(): void {
132 |         let scrollHost = this.getScrollHostInfo().scrollHost;
133 |         scrollHost.removeEventListener(SCROLL_EVENT_NAME, this.scrollHandler);
134 |         scrollHost.removeEventListener(RESIZE_EVENT_NAME, this.scrollHandler);
135 |     }
136 |     
137 |     public componentDidMount(): void {
138 |         this.itemsContainer = ReactDOM.findDOMNode(this) as HTMLElement;
139 | 
140 |         let onWindowScroll = () => { 
141 |             window.removeEventListener(SCROLL_EVENT_NAME, onWindowScroll, true);
142 |             window.removeEventListener(RESIZE_EVENT_NAME, onWindowScroll, true);
143 |             this.addScrollHandler();
144 |         };
145 | 
146 |         requestAnimationFrame(() => {
147 |             if (!this.isDisposed) {
148 |                 // loading css might take some time, that's why we wait for user interaction 
149 |                 // (hoping that he acts after things are ready)
150 |                 // and defer attaching of scroll listener events  until a scroll event is fired
151 |                 window.addEventListener(SCROLL_EVENT_NAME, onWindowScroll, true);
152 |                 window.addEventListener(RESIZE_EVENT_NAME, onWindowScroll, true);
153 |             }
154 |         });
155 | 
156 |         // rerender with the right amount of items in the viewport
157 |         // we first rendered only just 2 elements, now lets render the remaining visible elements
158 |         this.setState(this.getCurrentScrollViewerState(this.props.length));
159 |     }
160 |     
161 |     public componentWillUnmount(): void {
162 |         this.removeScrollHandler();
163 |         this.scrollHostInfo = null;
164 |         this.itemsContainer = null;
165 |     }
166 |     
167 |     public componentWillReceiveProps(nextProps: IScrollViewerProperties): void {
168 |         this.setState(this.getCurrentScrollViewerState(nextProps.length)); // rerender with the right amount of items in the viewport
169 |         this.hasPendingPropertiesUpdate = true;
170 |     }
171 | 
172 |     public componentWillUpdate(nextProps: IScrollViewerProperties, nextState: IScrollViewerState): void {
173 |         if (Math.abs(nextState.averageItemSize - this.state.averageItemSize) > 30) {
174 |             // if item size changed substantially, invalidate items placeholders image
175 |             this.itemsPlaceholdersImageDataUri = null;
176 |         }
177 |     }
178 |     
179 |     public setState(state: IScrollViewerState | ((prevState: IScrollViewerState, props: IScrollViewerProperties) => IScrollViewerState), 
180 |                     callback?: () => any): void {
181 |         // using set state callback instead of componentDidUpdate because when using transition group
182 |         // removed nodes will still be present when component did update is called
183 |         super.setState(<any> state, () => {
184 |             this.onDidUpdate();
185 |             if (callback) {
186 |                 callback();
187 |             }
188 |         });
189 |     }
190 |     
191 |     private onDidUpdate(): void {
192 |         // console.log(this.state);
193 |         this.itemsContainer = ReactDOM.findDOMNode(this) as HTMLElement;
194 |         
195 |         this.renderOffScreenBuffer();
196 |         
197 |         if (this.setPendingScroll) {
198 |             requestAnimationFrame(() => {
199 |                 // execute inside raf to make sure scroll events are already attached 
200 |                 if (!this.isDisposed) {
201 |                     this.setPendingScroll();
202 |                     this.setPendingScroll = null;
203 |                 }
204 |             });
205 |         }
206 | 
207 |         if (!this.isComponentInitialized) {
208 |             this.isComponentInitialized = true; // we render twice before initialization complete
209 |             if (this.props.initializationCompleted) {
210 |                 this.props.initializationCompleted();
211 |             }
212 |         }
213 |         
214 |         if (this.hasPendingPropertiesUpdate) {
215 |             // updated with list changes, let's compute the visible items
216 |             // or new items entering (in this render frame), calculate scroll compensation based on items real size
217 |             this.hasPendingPropertiesUpdate = false;
218 |             this.setState(this.getCurrentScrollViewerState(this.props.length));
219 |         }
220 |     }
221 |     
222 |     /**
223 |      * Adjust off screen elements' coordinates
224 |      */
225 |     private renderOffScreenBuffer() {
226 |         this.itemsContainer.style.position = "relative";
227 |         let items = this.getListItems(this.itemsContainer);
228 |         for (let item of items.slice(0, this.state.offScreenItemsCount)) {
229 |             let child = <HTMLElement> item;
230 |             if (child.style !== undefined) {
231 |                 // move element offscreen
232 |                 child.style.position = "absolute";
233 |                 child.style.top = "-10000" + PIXEL_UNITS;
234 |             }
235 |         }
236 |         for (let item of items.slice(this.state.offScreenItemsCount)) {
237 |             let child = <HTMLElement> item;
238 |             if (child.style !== undefined) {
239 |                 child.style.position = "";
240 |                 child.style.top = "";
241 |             }
242 |         }
243 |     }
244 | 
245 |     private handleScroll(scrollEvent: UIEvent): void {
246 |         if (this.pendingScrollAsyncUpdateHandle) {
247 |             return; // an update already queued, skip
248 |         }
249 |         
250 |         // delay any updates until render time
251 |         this.pendingScrollAsyncUpdateHandle = requestAnimationFrame(() => {
252 |             if (this.isDisposed) {
253 |                 return;
254 |             }
255 |             
256 |             try {
257 |                 let newState = this.getCurrentScrollViewerState(this.props.length, true);
258 |                 
259 |                 if (newState !== this.state) {
260 |                     this.isScrollOngoing = true;
261 |                     this.setState(newState, () => this.isScrollOngoing = false);
262 |                 }
263 |             } finally {
264 |                 this.pendingScrollAsyncUpdateHandle = 0;
265 |             }
266 |             
267 |             if (this.props.scrollChanged) {
268 |                 this.props.scrollChanged();
269 |             }
270 |         });
271 |     }
272 |     
273 |     public shouldComponentUpdate(nextProps: IScrollViewerProperties, nextState: IScrollViewerState): boolean {
274 |         // only render when visible items change -> smooth scroll
275 |         return nextState.firstRenderedItemIndex !== this.state.firstRenderedItemIndex ||
276 |                nextState.lastRenderedItemIndex !== this.state.lastRenderedItemIndex ||
277 |                nextState.scrollOffset !== this.state.scrollOffset ||
278 |                nextProps !== this.props;
279 |     }
280 |     
281 |     private renderList(firstRenderedItemIndex: number, lastRenderedItemIndex: number): JSX.Element {
282 |         let scrollOffset = this.state.scrollOffset;
283 |         let length = Math.min(this.props.length, lastRenderedItemIndex - firstRenderedItemIndex + 1);
284 |         
285 |         // render only visible items
286 |         let items = this.props.renderItems(firstRenderedItemIndex, length);
287 |         
288 |         let remainingSize = 0;
289 |         let averageItemSize = Math.max(MIN_ITEM_SIZE, this.state.averageItemSize);
290 |         if (lastRenderedItemIndex < (this.props.length - 1)) {
291 |             let scrollSize = averageItemSize * this.props.length;
292 |             // give remaining space at the end if end of list as not been reached
293 |             remainingSize = scrollSize - ((averageItemSize * length) + scrollOffset);
294 |         }
295 |         
296 |         let listChildren: any = [];
297 |         listChildren.push(this.renderSpacer("first-spacer", scrollOffset, averageItemSize)); // compensate scroll offset
298 |         listChildren.push(items);
299 |         listChildren.push(this.renderSpacer("last-spacer", remainingSize, averageItemSize)); // compensate scroll height/width
300 |         
301 |         return this.props.renderWrapper(listChildren);
302 |     }
303 |     
304 |     /**
305 |      * Render a spacer element used to give blank space at the beginning or end of the list
306 |      */
307 |     private renderSpacer(key: string, dimension: number, averageItemSize: number): JSX.Element {
308 |         const FILL_SPACE = "100%";
309 |         let style: React.CSSProperties = {
310 |             display: FLEXBOX_DISPLAY,
311 |         };
312 |         let backgroundWidth = 0;
313 |         let backgroundHeight = 0;
314 |         if (this.scrollDirection === ScrollExtensions.ScrollDirection.Horizontal) {
315 |             style.width = Math.round(dimension) + PIXEL_UNITS;
316 |             style.height = FILL_SPACE;
317 |             backgroundWidth = averageItemSize;
318 |         } else {
319 |             style.width = FILL_SPACE;
320 |             style.height = Math.round(dimension) + PIXEL_UNITS;
321 |             backgroundHeight = averageItemSize;
322 |         }
323 |         // fill space with list items stripes for improved user experience (when scrolling fast)
324 |         style.backgroundImage = `url(${this.getItemsPlaceholdersImage(backgroundWidth, backgroundHeight)})`;
325 |         style.backgroundRepeat = "repeat";
326 |         
327 |         return React.DOM.script({ key: key, style: style });
328 |     }
329 |     
330 |     public render(): JSX.Element {
331 |         return this.renderList(this.state.firstRenderedItemIndex, this.state.lastRenderedItemIndex);
332 |     }
333 |     
334 |     /**
335 |      * Returns the appropriate dimension according to the scroll direction
336 |      */
337 |     private getDimension(vertical: number, horizontal: number): number {
338 |         return this.scrollDirection === ScrollExtensions.ScrollDirection.Horizontal ? horizontal : vertical;
339 |     }
340 |     
341 |     /**
342 |      * Returns the list items html elements 
343 |      */
344 |     private getListItems(itemsContainer: HTMLElement): Element[] {
345 |         let items: Element[] = [];
346 |         // ignore spacer elements
347 |         for (let i = 1; i < itemsContainer.children.length - 1; i++) {
348 |             items.push(itemsContainer.children[i]);
349 |         }
350 |         return items;
351 |     }
352 |     
353 |     private getItemBounds(item: Element): Rect {
354 |         let bounds = item.getBoundingClientRect();
355 |         let rect: Rect = {
356 |             width: bounds.width,
357 |             height: bounds.height,
358 |             left: bounds.left,
359 |             right: bounds.right,
360 |             top: bounds.top,
361 |             bottom: bounds.bottom,
362 |         };
363 |         if (this.scrollDirection === ScrollExtensions.ScrollDirection.Horizontal) {
364 |             if (rect.width < MIN_ITEM_SIZE) {
365 |                 rect.width = MIN_ITEM_SIZE;
366 |                 rect.right = rect.left + rect.width;
367 |             }
368 |         } else {
369 |             if (rect.height < MIN_ITEM_SIZE) {
370 |                 rect.height = MIN_ITEM_SIZE;
371 |                 rect.bottom = rect.top + rect.height;
372 |             }
373 |         }
374 |         return rect;
375 |     }
376 |     
377 |     /**
378 |      * Returns true if the list elements stack (vertically or horizontally)
379 |      */
380 |     private areElementsStacked(items: Element[]): boolean {
381 |         if (items.length < 2) {
382 |             return false;
383 |         }
384 | 
385 |         // use elements from last positions to avoid off screen elements (because they overlap)
386 |         let firstElement = items[items.length - 2];
387 |         let secondElement = items[items.length - 1];
388 |         
389 |         // get elements original dimensions (do not use the getDimension function here)
390 |         let firstElementBounds = firstElement.getBoundingClientRect();
391 |         let secondElementBounds = secondElement.getBoundingClientRect();
392 | 
393 |         // elements stacked vertically; horizontal stacking not supported yet
394 |         return Math.floor(this.getDimension(secondElementBounds.top, 0)) >= Math.floor(this.getDimension(firstElementBounds.bottom, 1)); 
395 |     }
396 |     
397 |     /**
398 |      * Calculate the total size (height or width) of the items given
399 |      */
400 |     private calculateItemsSize(items: Element[], 
401 |                                firstItemIndex = 0, 
402 |                                lastItemIndex: number = items.length - 1): { total: number, sizes: number[] } {
403 |         let total = 0;
404 |         let sizes = new Array(lastItemIndex - firstItemIndex + 1);
405 |         // we have to iterate over all items and consider a minimum size for each
406 |         for (let i = firstItemIndex; i <= lastItemIndex; i++) {
407 |             let itemBounds = this.getItemBounds(items[i]);
408 |             let size = this.getDimension(itemBounds.height, itemBounds.width);
409 |             total += size;
410 |             sizes[i - firstItemIndex] = size;
411 |         }
412 |     
413 |         return { total: total, sizes: sizes };
414 |     }
415 |     
416 |     /**
417 |      * Count the number of items that fit in the specified size and retrieve the
418 |      * count and summing size of those items
419 |      */
420 |     private countItemsAndSizeThatFitIn(itemsSizes: number[], 
421 |                                        sizeToFit: number, 
422 |                                        allowOverflow = false, 
423 |                                        countBackwards = false): { size: number, count: number } {
424 |         let i = 0;
425 |         let itemsSize = 0;
426 |         let getIndex = countBackwards ? (idx: number): number => itemsSizes.length - 1 - idx : (idx: number): number => idx; 
427 | 
428 |         for (; i < itemsSizes.length; i++) {
429 |             let itemSize = itemsSizes[getIndex(i)];
430 |             if ((itemsSize + itemSize) > sizeToFit) {
431 |                 if (allowOverflow) {
432 |                     i++;
433 |                     itemsSize += itemSize;
434 |                 }
435 |                 break;
436 |             }
437 | 
438 |             itemsSize += itemSize;
439 |         }
440 |         
441 |         return { size: itemsSize, count: i };
442 |     }
443 |     
444 |     /**
445 |      * Calculate first and last visible items for the current scroll state, as well as the scroll offset
446 |      */
447 |     private getCurrentScrollViewerState(listLength: number, returnSameStateOnSmallChanges = false): IScrollViewerState {
448 |         let scrollInfo = this.getScrollInfo();
449 |         let pageBufferSize = (this.props.pageBufferSize || DEFAULT_BUFFER_SIZE) * BUFFER_MULTIPLIER;
450 |         let viewportSafetyMargin = scrollInfo.viewportSize * (pageBufferSize / 2); // extra safety space for some more items
451 |         if (returnSameStateOnSmallChanges && 
452 |             Math.abs(scrollInfo.scrollOffset - this.state.effectiveScrollOffset) < (viewportSafetyMargin * 0.5)) {
453 |             // scroll changes are small, skip computations ahead
454 |             return this.state;
455 |         }
456 | 
457 |         let items = this.getListItems(this.itemsContainer);
458 | 
459 |         if (!this.areElementsStacked(items)) {
460 |             // disable virtualization if list elements do not stack (not supported)
461 |             return {
462 |                 firstRenderedItemIndex: 0,
463 |                 lastRenderedItemIndex: Math.max(1, this.props.length - 1), // we need at least 2 elements to find the stacking direction
464 |                 averageItemSize: 0,
465 |                 scrollOffset: 0,
466 |                 offScreenItemsCount: 0,
467 |                 effectiveScrollOffset: scrollInfo.scrollOffset,
468 |             };
469 |         }
470 |         
471 |         let lastSpacerBounds = this.itemsContainer.lastElementChild.getBoundingClientRect();
472 |         if (this.getDimension(lastSpacerBounds.bottom, lastSpacerBounds.right) < -100) {
473 |             // list is out-of-viewport, no need to compute new state
474 |             return this.state;
475 |         }
476 | 
477 |         // get rendered items sizes
478 |         let renderedItemsSizes = this.calculateItemsSize(items);
479 |         let offScreenItemsCount = this.state.offScreenItemsCount;
480 |         let onScreenItems = renderedItemsSizes.sizes.slice(offScreenItemsCount);
481 |         let onScreenItemsSize = onScreenItems.reduce((p, c) => p + c);
482 |         let averageItemSize = onScreenItemsSize / (onScreenItems.length * 1.0); // consider only on screen items for average item size
483 |         
484 |         if (this.state.averageItemSize !== 0) {
485 |             // to avoid great oscillation, give more weight to aggregated averageItemSize
486 |             averageItemSize = (0.8 * this.state.averageItemSize) + (0.2 * averageItemSize);
487 |         }
488 |         
489 |         let itemsFittingViewportCount = Math.ceil(scrollInfo.viewportSize / averageItemSize);
490 |         let maxOffScreenItemsCount = itemsFittingViewportCount; // place an extra viewport of items offscreen
491 | 
492 |         // number of extra items to render before/after viewport bounds that
493 |         // helps avoiding showing blank space specially when scrolling fast
494 |         let safetyItemsCount = Math.ceil(viewportSafetyMargin * 2 / averageItemSize);
495 |         
496 |         // rendered items = items in viewport + safety items + off screen items
497 |         let renderedItemsCount = Math.min(listLength, itemsFittingViewportCount + safetyItemsCount + maxOffScreenItemsCount);
498 |         
499 |         let scrollOffset = this.state.scrollOffset;
500 |         let firstRenderedItemIndex = this.state.firstRenderedItemIndex;
501 |         let viewportLowerMargin = scrollInfo.viewportLowerBound - viewportSafetyMargin;
502 | 
503 |         // get first spacer bounds instead of picking first item due to items rendered offscreen which have wrong coordinates
504 |         let firstSpacerBounds = this.itemsContainer.firstElementChild.getBoundingClientRect();
505 |         let firstItemOffset = this.getDimension(firstSpacerBounds.bottom, firstSpacerBounds.right);
506 |                     
507 |         if (Math.abs(firstItemOffset - viewportLowerMargin) <= onScreenItemsSize) {
508 |             if (firstItemOffset < viewportLowerMargin) {
509 |                 // find the onscreen items that will go offscreen
510 |                 let itemsGoingOffScreen = this.countItemsAndSizeThatFitIn(onScreenItems, Math.abs(viewportLowerMargin - firstItemOffset));
511 |                 
512 |                 if (itemsGoingOffScreen.count > 0) {
513 |                     // compensate scroll with the size of the items going offscreen
514 |                     scrollOffset += itemsGoingOffScreen.size;
515 |                     // move onscreen items to offscreen
516 |                     offScreenItemsCount += itemsGoingOffScreen.count;
517 |                     
518 |                     if (offScreenItemsCount > maxOffScreenItemsCount) {
519 |                         // offscreen items overflowing, discard some
520 |                         let leavingItemsCount =  offScreenItemsCount - maxOffScreenItemsCount;
521 |                         // TODO we must check if firstRenderedItemIndex does not go behond limits 
522 |                         firstRenderedItemIndex += leavingItemsCount;
523 |                         offScreenItemsCount = maxOffScreenItemsCount;
524 |                     }
525 |                 }
526 |             } else if (firstItemOffset > viewportLowerMargin) {
527 |                 let availableSpace = Math.abs(firstItemOffset - viewportLowerMargin);
528 |                 let offScreenItems = renderedItemsSizes.sizes.slice(0, offScreenItemsCount);
529 |                 // find the items that will go onscreen
530 |                 let itemsGoingOnScreen = this.countItemsAndSizeThatFitIn(offScreenItems, availableSpace, true, true);
531 |                 if (itemsGoingOnScreen.count > 0) {
532 |                     // compensate scroll with the size of the items going onscreen
533 |                     scrollOffset = Math.max(0, scrollOffset - itemsGoingOnScreen.size);
534 |                     // move offscreen items to onscreen
535 |                     offScreenItemsCount -= itemsGoingOnScreen.count;
536 |                     availableSpace -= itemsGoingOnScreen.size;
537 |                 }
538 |                 
539 |                 if (availableSpace > 0) {
540 |                     // all offscreen items went onscreen but there's still room for more items
541 |                     if (offScreenItemsCount !== 0) {
542 |                         throw "offScreenItemsCount should be 0";
543 |                     }
544 |                     
545 |                     let enteringItemsCount = Math.min(firstRenderedItemIndex, Math.ceil(availableSpace / averageItemSize));
546 |                     firstRenderedItemIndex -= enteringItemsCount;
547 |                     scrollOffset -= enteringItemsCount * averageItemSize; // compensate scroll with the (average) size of items entering
548 |                 }
549 |                 
550 |                 if (offScreenItemsCount < maxOffScreenItemsCount) {
551 |                     // room for more offscreen items, add some 
552 |                     let enteringItemsCount = Math.min(firstRenderedItemIndex, maxOffScreenItemsCount - offScreenItemsCount);
553 |                     firstRenderedItemIndex -= enteringItemsCount;
554 |                     offScreenItemsCount += enteringItemsCount;
555 |                 }
556 |             }
557 | 
558 |         } else {
559 |             // scroll delta is too large
560 |             let startOffset = this.getDimension(firstSpacerBounds.top, firstSpacerBounds.left);
561 |             if (startOffset < scrollInfo.viewportLowerBound) {
562 |                 // calculate the distance between the start of the list and viewport lower bound
563 |                 startOffset = Math.abs(startOffset - scrollInfo.viewportLowerBound); 
564 |             } else {
565 |                 startOffset = 0;
566 |             }
567 |             
568 |             // calculate first item in viewport based on the average item size (and some margin)
569 |             firstRenderedItemIndex = Math.max(0, Math.floor(startOffset / averageItemSize) - 1);
570 |             offScreenItemsCount = 0;
571 |             if (firstRenderedItemIndex > 0) {
572 |                 firstRenderedItemIndex = Math.max(0, firstRenderedItemIndex - Math.ceil(viewportSafetyMargin / averageItemSize));
573 |             }
574 |             firstRenderedItemIndex = Math.max(0, Math.min(firstRenderedItemIndex, listLength - 1 - renderedItemsCount));
575 |             scrollOffset = firstRenderedItemIndex * averageItemSize;
576 |         }
577 |         
578 |         if (firstRenderedItemIndex === 0 && offScreenItemsCount === 0) {
579 |             // prevent offset > 0 when reached beginning of the list
580 |             scrollOffset = 0;
581 |         }
582 |         
583 |         let lastRenderedItemIndex = Math.min(listLength - 1, firstRenderedItemIndex + renderedItemsCount);
584 |         
585 |         return {
586 |             firstRenderedItemIndex: firstRenderedItemIndex,
587 |             lastRenderedItemIndex: lastRenderedItemIndex,
588 |             averageItemSize: averageItemSize,
589 |             scrollOffset: scrollOffset,
590 |             offScreenItemsCount: offScreenItemsCount,
591 |             effectiveScrollOffset: scrollInfo.scrollOffset,
592 |         };
593 |     }
594 |     
595 |     public get isScrolling(): boolean {
596 |         return this.isScrollOngoing;
597 |     }
598 |     
599 |     public get isInitialized(): boolean {
600 |         return this.isComponentInitialized;
601 |     }
602 |     
603 |     private get isDisposed(): boolean {
604 |         return !this.itemsContainer;
605 |     }
606 |     
607 |     public scrollToIndex(index: number): void {
608 |         this.internalSetScrollOffset(() => {
609 |             let scrollInfo = this.getScrollInfo();
610 |             let scrollHost = scrollInfo.scrollHost;
611 |             
612 |             let scrollOffset = this.state.averageItemSize * index;
613 |             let firstVisibleItemOffset = scrollInfo.scrollOffset;
614 |             let needsScroll = false;
615 | 
616 |             if (scrollOffset < firstVisibleItemOffset) {
617 |                 // target is before first visible
618 |                 needsScroll = true;
619 |             } else {
620 |                 let lastVisibleItemOffset = firstVisibleItemOffset + scrollInfo.viewportSize - this.state.averageItemSize;
621 |                 if (scrollOffset > lastVisibleItemOffset) {
622 |                     // target is after last visible
623 |                     scrollOffset = scrollOffset - (lastVisibleItemOffset - firstVisibleItemOffset);
624 |                     needsScroll = true;
625 |                 }
626 |             }
627 | 
628 |             if (!needsScroll) {
629 |                 // target is visible, don't scroll
630 |                 return;
631 |             }
632 | 
633 |             let scrollX = this.getDimension(undefined, scrollOffset);
634 |             let scrollY = this.getDimension(scrollOffset, undefined);
635 | 
636 |             ScrollExtensions.setScrollOffset(scrollHost, scrollX, scrollY, false); 
637 |         });
638 |     }
639 | 
640 |     public scrollToOffset(x: number, y: number): void {
641 |         this.internalSetScrollOffset(() => {
642 |             let scrollInfo = this.getScrollInfo();
643 |             let scrollHost = scrollInfo.scrollHost;
644 |             let scrollX = this.getDimension(undefined, x);
645 |             let scrollY = this.getDimension(y, undefined);
646 |             ScrollExtensions.setScrollOffset(scrollHost, scrollX, scrollY); 
647 |         });
648 |     }
649 | 
650 |     private internalSetScrollOffset(setScroll: () => void): void {
651 |         if (this.isInitialized) {
652 |             setScroll();
653 |         } else {
654 |             // not all items rendered yet, schedule scroll updates for later
655 |             this.setPendingScroll = setScroll;
656 |         }
657 |     }
658 | 
659 |     private getItemsPlaceholdersImage(width: number, height: number): string {
660 |         if (!this.itemsPlaceholdersImageDataUri) {
661 |             // cache list items placeholders image for improved performance
662 |             this.itemsPlaceholdersImageDataUri = this.drawItemsPlaceholders(width, height);
663 |         }
664 |         return this.itemsPlaceholdersImageDataUri;
665 |     }
666 | 
667 |     private drawItemsPlaceholders(width: number, height: number): string {
668 |         let minWidth = Math.max(width, 1);
669 |         let minHeight = Math.max(height, 1);
670 |         let canvas = document.createElement("canvas");
671 |         canvas.width = Math.max(width * 2, 1);
672 |         canvas.height = Math.max(height * 2, 1);
673 |         let ctx = canvas.getContext("2d");
674 |         ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
675 |         ctx.fillRect(0, 0, minWidth, minHeight);
676 |         ctx.fillStyle = "rgba(0, 0, 0, 0.08)";
677 |         ctx.fillRect(width, height, minWidth, minHeight);
678 |         return canvas.toDataURL();
679 |     }
680 | }
681 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "module": "amd",
 4 |         "noImplicitAny": true,
 5 |         "removeComments": true,
 6 |         "preserveConstEnums": true,
 7 |         "sourceMap": false,
 8 |         "outFile": "bin/index.js",
 9 | 		"target": "es5",
10 | 		"jsx": "react",
11 |         "experimentalDecorators": true
12 |     }
13 | }


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "class-name": true,
 4 |     "comment-format": [true, "check-space"],
 5 |     "curly": true,
 6 |     "eofline": true,
 7 |     "forin": true,
 8 |     "indent": [true, "spaces"],
 9 |     "label-position": true,
10 |     "label-undefined": true,
11 |     "max-line-length": [true, 140],
12 |     "member-access": true,
13 |     "member-ordering": [true,
14 |       "static-before-instance",
15 |       "variables-before-functions"
16 |     ],
17 |     "no-arg": true,
18 |     "no-bitwise": true,
19 |     "no-console": [true,
20 |       "debug",
21 |       "info",
22 |       "time",
23 |       "timeEnd",
24 |       "trace"
25 |     ],
26 |     "no-construct": true,
27 |     "no-debugger": true,
28 |     "no-duplicate-key": true,
29 |     "no-duplicate-variable": true,
30 |     "no-empty": true,
31 |     "no-eval": true,
32 |     "no-inferrable-types": true,
33 |     "no-shadowed-variable": true,
34 |     "no-string-literal": true,
35 |     "no-switch-case-fall-through": true,
36 |     "no-trailing-whitespace": false,
37 |     "no-unused-expression": true,
38 |     "no-unused-variable": true,
39 |     "no-unreachable": true,
40 |     "no-use-before-declare": true,
41 |     "no-var-keyword": true,
42 |     "object-literal-sort-keys": false,
43 |     "one-line": [true,
44 |       "check-open-brace",
45 |       "check-catch",
46 |       "check-else",
47 |       "check-finally",
48 |       "check-whitespace"
49 |     ],
50 |     "quotemark": [true, "double", "avoid-escape"],
51 |     "radix": true,
52 |     "semicolon": [true],
53 |     "trailing-comma": [true, {
54 |       "singleline": "never",
55 |       "multiline": "always"
56 |     }],
57 |     "triple-equals": [true, "allow-null-check"],
58 |     "typedef-whitespace": [true, {
59 |       "call-signature": "nospace",
60 |       "index-signature": "nospace",
61 |       "parameter": "nospace",
62 |       "property-declaration": "nospace",
63 |       "variable-declaration": "nospace"
64 |     }],
65 |     "variable-name": true,
66 |     "whitespace": [true,
67 |       "check-branch",
68 |       "check-decl",
69 |       "check-operator",
70 |       "check-separator",
71 |       "check-type"
72 |     ]
73 |   }
74 | }


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