diff --git a/dist/react-select.css b/dist/react-select.css
index 867a5bf8a2..fe067509c7 100644
--- a/dist/react-select.css
+++ b/dist/react-select.css
@@ -113,8 +113,10 @@
font-size: inherit;
margin: 0;
outline: none;
- line-height: 14px; /* For IE 8 compatibility */
- padding: 8px 0 12px; /* For IE 8 compatibility */
+ line-height: 14px;
+ /* For IE 8 compatibility */
+ padding: 8px 0 12px;
+ /* For IE 8 compatibility */
-webkit-appearance: none;
}
.is-focused .Select-input > input {
@@ -240,8 +242,15 @@
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
+.Select-option.is-selected {
+ background-color: #f5faff;
+ /* Fallback color for IE 8 */
+ background-color: rgba(0, 126, 255, 0.04);
+ color: #333;
+}
.Select-option.is-focused {
- background-color: rgb(235, 245, 255); /* Fallback color for IE 8 */
+ background-color: #ebf5ff;
+ /* Fallback color for IE 8 */
background-color: rgba(0, 126, 255, 0.08);
color: #333;
}
@@ -265,10 +274,10 @@
margin-left: 5px;
}
.Select--multi .Select-value {
- background-color: rgb(235, 245, 255); /* Fallback color for IE 8 */
+ background-color: #ebf5ff;
+ /* Fallback color for IE 8 */
background-color: rgba(0, 126, 255, 0.08);
border-radius: 2px;
- border: 1px solid rgb(178, 215, 254); /* Fallback color for IE 8 */
border: 1px solid rgba(0, 126, 255, 0.24);
color: #007eff;
display: inline-block;
@@ -301,18 +310,21 @@
cursor: pointer;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
- border-right: 1px solid rgb(178, 215, 254); /* Fallback color for IE 8 */
+ border-right: 1px solid #c2e0ff;
+ /* Fallback color for IE 8 */
border-right: 1px solid rgba(0, 126, 255, 0.24);
padding: 1px 5px 3px;
}
.Select--multi .Select-value-icon:hover,
.Select--multi .Select-value-icon:focus {
- background-color: rgb(216, 234, 253); /* Fallback color for IE 8 */
+ background-color: #d8eafd;
+ /* Fallback color for IE 8 */
background-color: rgba(0, 113, 230, 0.08);
color: #0071e6;
}
.Select--multi .Select-value-icon:active {
- background-color: rgb(178, 215, 254); /* Fallback color for IE 8 */
+ background-color: #c2e0ff;
+ /* Fallback color for IE 8 */
background-color: rgba(0, 126, 255, 0.24);
}
.Select--multi.is-disabled .Select-value {
diff --git a/dist/react-select.js b/dist/react-select.js
index 9f2a82ab25..2bf25c4af2 100644
--- a/dist/react-select.js
+++ b/dist/react-select.js
@@ -64,7 +64,8 @@ var Async = _react2['default'].createClass({
loadOptions: _react2['default'].PropTypes.func.isRequired, // function to call to load options asynchronously
loadingPlaceholder: _react2['default'].PropTypes.string, // replaces the placeholder while options are loading
minimumInput: _react2['default'].PropTypes.number, // the minimum number of characters that trigger loadOptions
- noResultsText: _react2['default'].PropTypes.string, // placeholder displayed when there are no matching search results (shared with Select)
+ noResultsText: stringOrNode, // placeholder displayed when there are no matching search results (shared with Select)
+ onInputChange: _react2['default'].PropTypes.func, // onInputChange handler: function (inputValue) {}
placeholder: stringOrNode, // field placeholder, displayed when there's no value (shared with Select)
searchPromptText: _react2['default'].PropTypes.string, // label to prompt for search input
searchingText: _react2['default'].PropTypes.string },
@@ -126,6 +127,13 @@ var Async = _react2['default'].createClass({
};
},
loadOptions: function loadOptions(input) {
+ if (this.props.onInputChange) {
+ var nextState = this.props.onInputChange(input);
+ // Note: != used deliberately here to catch undefined and null
+ if (nextState != null) {
+ input = '' + nextState;
+ }
+ }
if (this.props.ignoreAccents) input = (0, _utilsStripDiacritics2['default'])(input);
if (this.props.ignoreCase) input = input.toLowerCase();
this._lastInput = input;
@@ -339,7 +347,7 @@ var Select = _react2['default'].createClass({
propTypes: {
addLabelText: _react2['default'].PropTypes.string, // placeholder displayed when you want to add a label on a multi-value input
allowCreate: _react2['default'].PropTypes.bool, // whether to allow creation of new entries
- autoBlur: _react2['default'].PropTypes.bool,
+ autoBlur: _react2['default'].PropTypes.bool, // automatically blur the component when an option is selected
autofocus: _react2['default'].PropTypes.bool, // autofocus the component on mount
autosize: _react2['default'].PropTypes.bool, // whether to enable autosizing or not
backspaceRemoves: _react2['default'].PropTypes.bool, // whether backspace removes an item if there is no text input
@@ -355,6 +363,7 @@ var Select = _react2['default'].createClass({
ignoreAccents: _react2['default'].PropTypes.bool, // whether to strip diacritics when filtering
ignoreCase: _react2['default'].PropTypes.bool, // whether to perform case-insensitive filtering
inputProps: _react2['default'].PropTypes.object, // custom attributes for the Input
+ inputRenderer: _react2['default'].PropTypes.func, // returns a custom input component
isLoading: _react2['default'].PropTypes.bool, // whether the Select is loading externally or not (such as options being loaded)
joinValues: _react2['default'].PropTypes.bool, // joins multiple values into a single form field with the delimiter (legacy mode)
labelKey: _react2['default'].PropTypes.string, // path of the label value in option objects
@@ -378,17 +387,20 @@ var Select = _react2['default'].createClass({
onOpen: _react2['default'].PropTypes.func, // fires when the menu is opened
onValueClick: _react2['default'].PropTypes.func, // onClick handler for value labels: function (value, event) {}
openAfterFocus: _react2['default'].PropTypes.bool, // boolean to enable opening dropdown when focused
+ openOnFocus: _react2['default'].PropTypes.bool, // always open options menu on focus
optionClassName: _react2['default'].PropTypes.string, // additional class(es) to apply to the elements
optionComponent: _react2['default'].PropTypes.func, // option component to render in dropdown
optionRenderer: _react2['default'].PropTypes.func, // optionRenderer: function (option) {}
options: _react2['default'].PropTypes.array, // array of options
placeholder: stringOrNode, // field placeholder, displayed when there's no value
required: _react2['default'].PropTypes.bool, // applies HTML5 required attribute when needed
+ resetValue: _react2['default'].PropTypes.any, // value to use when you clear the control
scrollMenuIntoView: _react2['default'].PropTypes.bool, // boolean to enable the viewport to shift so that the full menu fully visible when engaged
searchable: _react2['default'].PropTypes.bool, // whether to enable searching feature or not
simpleValue: _react2['default'].PropTypes.bool, // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
style: _react2['default'].PropTypes.object, // optional style to apply to the control
tabIndex: _react2['default'].PropTypes.string, // optional tab index of the control
+ tabSelectsValue: _react2['default'].PropTypes.bool, // whether to treat tabbing out while focused to be value selection
value: _react2['default'].PropTypes.any, // initial field value
valueComponent: _react2['default'].PropTypes.func, // value component to render
valueKey: _react2['default'].PropTypes.string, // path of the label value in option objects
@@ -427,9 +439,11 @@ var Select = _react2['default'].createClass({
optionComponent: _Option2['default'],
placeholder: 'Select...',
required: false,
+ resetValue: null,
scrollMenuIntoView: true,
searchable: true,
simpleValue: false,
+ tabSelectsValue: true,
valueComponent: _Value2['default'],
valueKey: 'value'
};
@@ -442,10 +456,20 @@ var Select = _react2['default'].createClass({
isLoading: false,
isOpen: false,
isPseudoFocused: false,
- required: this.props.required && this.handleRequired(this.props.value, this.props.multi)
+ required: false
};
},
+ componentWillMount: function componentWillMount() {
+ var valueArray = this.getValueArray(this.props.value);
+
+ if (this.props.required) {
+ this.setState({
+ required: this.handleRequired(valueArray[0], this.props.multi)
+ });
+ }
+ },
+
componentDidMount: function componentDidMount() {
if (this.props.autofocus) {
this.focus();
@@ -453,9 +477,11 @@ var Select = _react2['default'].createClass({
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
- if (this.props.value !== nextProps.value && nextProps.required) {
+ var valueArray = this.getValueArray(nextProps.value);
+
+ if (nextProps.required) {
this.setState({
- required: this.handleRequired(nextProps.value, nextProps.multi)
+ required: this.handleRequired(valueArray[0], nextProps.multi)
});
}
},
@@ -478,9 +504,6 @@ var Select = _react2['default'].createClass({
this.hasScrolledToOption = false;
}
- if (prevState.inputValue !== this.state.inputValue && this.props.onInputChange) {
- this.props.onInputChange(this.state.inputValue);
- }
if (this._scrollToFocusedOptionOnUpdate && this.refs.focused && this.refs.menu) {
this._scrollToFocusedOptionOnUpdate = false;
var focusedDOM = _reactDom2['default'].findDOMNode(this.refs.focused);
@@ -494,7 +517,7 @@ var Select = _react2['default'].createClass({
if (this.props.scrollMenuIntoView && this.refs.menuContainer) {
var menuContainerRect = this.refs.menuContainer.getBoundingClientRect();
if (window.innerHeight < menuContainerRect.bottom + this.props.menuBuffer) {
- window.scrollTo(0, window.scrollY + menuContainerRect.bottom + this.props.menuBuffer - window.innerHeight);
+ window.scrollBy(0, menuContainerRect.bottom + this.props.menuBuffer - window.innerHeight);
}
}
if (prevProps.disabled !== this.props.disabled) {
@@ -618,7 +641,7 @@ var Select = _react2['default'].createClass({
},
handleInputFocus: function handleInputFocus(event) {
- var isOpen = this.state.isOpen || this._openAfterFocus;
+ var isOpen = this.state.isOpen || this._openAfterFocus || this.props.openOnFocus;
if (this.props.onFocus) {
this.props.onFocus(event);
}
@@ -630,7 +653,8 @@ var Select = _react2['default'].createClass({
},
handleInputBlur: function handleInputBlur(event) {
- if (this.refs.menu && document.activeElement.isEqualNode(this.refs.menu)) {
+ if (this.refs.menu && document.activeElement === this.refs.menu) {
+ this.focus();
return;
}
@@ -649,10 +673,18 @@ var Select = _react2['default'].createClass({
},
handleInputChange: function handleInputChange(event) {
+ var newInputValue = event.target.value;
+ if (this.state.inputValue !== event.target.value && this.props.onInputChange) {
+ var nextState = this.props.onInputChange(newInputValue);
+ // Note: != used deliberately here to catch undefined and null
+ if (nextState != null) {
+ newInputValue = '' + nextState;
+ }
+ }
this.setState({
isOpen: true,
isPseudoFocused: false,
- inputValue: event.target.value
+ inputValue: newInputValue
});
},
@@ -668,7 +700,7 @@ var Select = _react2['default'].createClass({
return;
case 9:
// tab
- if (event.shiftKey || !this.state.isOpen) {
+ if (event.shiftKey || !this.state.isOpen || !this.props.tabSelectsValue) {
return;
}
this.selectFocusedOption();
@@ -733,8 +765,7 @@ var Select = _react2['default'].createClass({
return op[this.props.labelKey];
},
- getValueArray: function getValueArray() {
- var value = this.props.value;
+ getValueArray: function getValueArray(value) {
if (this.props.multi) {
if (typeof value === 'string') value = value.split(this.props.delimiter);
if (!Array.isArray(value)) {
@@ -798,19 +829,19 @@ var Select = _react2['default'].createClass({
},
addValue: function addValue(value) {
- var valueArray = this.getValueArray();
+ var valueArray = this.getValueArray(this.props.value);
this.setValue(valueArray.concat(value));
},
popValue: function popValue() {
- var valueArray = this.getValueArray();
+ var valueArray = this.getValueArray(this.props.value);
if (!valueArray.length) return;
if (valueArray[valueArray.length - 1].clearableValue === false) return;
this.setValue(valueArray.slice(0, valueArray.length - 1));
},
removeValue: function removeValue(value) {
- var valueArray = this.getValueArray();
+ var valueArray = this.getValueArray(this.props.value);
this.setValue(valueArray.filter(function (i) {
return i !== value;
}));
@@ -825,7 +856,7 @@ var Select = _react2['default'].createClass({
}
event.stopPropagation();
event.preventDefault();
- this.setValue(null);
+ this.setValue(this.props.resetValue);
this.setState({
isOpen: false,
inputValue: ''
@@ -942,42 +973,46 @@ var Select = _react2['default'].createClass({
},
renderInput: function renderInput(valueArray) {
- var className = (0, _classnames2['default'])('Select-input', this.props.inputProps.className);
- if (this.props.disabled || !this.props.searchable) {
- return _react2['default'].createElement('div', _extends({}, this.props.inputProps, {
- className: className,
- tabIndex: this.props.tabIndex || 0,
- onBlur: this.handleInputBlur,
- onFocus: this.handleInputFocus,
- ref: 'input',
- style: { border: 0, width: 1, display: 'inline-block' } }));
- }
- if (this.props.autosize) {
- return _react2['default'].createElement(_reactInputAutosize2['default'], _extends({}, this.props.inputProps, {
- className: className,
- tabIndex: this.props.tabIndex,
- onBlur: this.handleInputBlur,
- onChange: this.handleInputChange,
- onFocus: this.handleInputFocus,
- minWidth: '5',
- ref: 'input',
- required: this.state.required,
- value: this.state.inputValue
- }));
+ if (this.props.inputRenderer) {
+ return this.props.inputRenderer();
+ } else {
+ var className = (0, _classnames2['default'])('Select-input', this.props.inputProps.className);
+ if (this.props.disabled || !this.props.searchable) {
+ return _react2['default'].createElement('div', _extends({}, this.props.inputProps, {
+ className: className,
+ tabIndex: this.props.tabIndex || 0,
+ onBlur: this.handleInputBlur,
+ onFocus: this.handleInputFocus,
+ ref: 'input',
+ style: { border: 0, width: 1, display: 'inline-block' } }));
+ }
+ if (this.props.autosize) {
+ return _react2['default'].createElement(_reactInputAutosize2['default'], _extends({}, this.props.inputProps, {
+ className: className,
+ tabIndex: this.props.tabIndex,
+ onBlur: this.handleInputBlur,
+ onChange: this.handleInputChange,
+ onFocus: this.handleInputFocus,
+ minWidth: '5',
+ ref: 'input',
+ required: this.state.required,
+ value: this.state.inputValue
+ }));
+ }
+ return _react2['default'].createElement(
+ 'div',
+ { className: className },
+ _react2['default'].createElement('input', _extends({}, this.props.inputProps, {
+ tabIndex: this.props.tabIndex,
+ onBlur: this.handleInputBlur,
+ onChange: this.handleInputChange,
+ onFocus: this.handleInputFocus,
+ ref: 'input',
+ required: this.state.required,
+ value: this.state.inputValue
+ }))
+ );
}
- return _react2['default'].createElement(
- 'div',
- { className: className },
- _react2['default'].createElement('input', _extends({}, this.props.inputProps, {
- tabIndex: this.props.tabIndex,
- onBlur: this.handleInputBlur,
- onChange: this.handleInputChange,
- onFocus: this.handleInputFocus,
- ref: 'input',
- required: this.state.required,
- value: this.state.inputValue
- }))
- );
},
renderClear: function renderClear() {
@@ -1137,8 +1172,28 @@ var Select = _react2['default'].createClass({
}
},
+ renderOuter: function renderOuter(options, valueArray, focusedOption) {
+ var menu = this.renderMenu(options, valueArray, focusedOption);
+ if (!menu) {
+ return null;
+ }
+
+ return _react2['default'].createElement(
+ 'div',
+ { ref: 'menuContainer', className: 'Select-menu-outer', style: this.props.menuContainerStyle },
+ _react2['default'].createElement(
+ 'div',
+ { ref: 'menu', className: 'Select-menu',
+ style: this.props.menuStyle,
+ onScroll: this.handleMenuScroll,
+ onMouseDown: this.handleMouseDownOnMenu },
+ menu
+ )
+ );
+ },
+
render: function render() {
- var valueArray = this.getValueArray();
+ var valueArray = this.getValueArray(this.props.value);
var options = this._visibleOptions = this.filterOptions(this.props.multi ? valueArray : null);
var isOpen = this.state.isOpen;
if (this.props.multi && !options.length && valueArray.length && !this.state.inputValue) isOpen = false;
@@ -1154,6 +1209,7 @@ var Select = _react2['default'].createClass({
'is-searchable': this.props.searchable,
'has-value': valueArray.length
});
+
return _react2['default'].createElement(
'div',
{ ref: 'wrapper', className: className, style: this.props.wrapperStyle },
@@ -1174,18 +1230,7 @@ var Select = _react2['default'].createClass({
this.renderClear(),
this.renderArrow()
),
- isOpen ? _react2['default'].createElement(
- 'div',
- { ref: 'menuContainer', className: 'Select-menu-outer', style: this.props.menuContainerStyle },
- _react2['default'].createElement(
- 'div',
- { ref: 'menu', className: 'Select-menu',
- style: this.props.menuStyle,
- onScroll: this.handleMenuScroll,
- onMouseDown: this.handleMouseDownOnMenu },
- this.renderMenu(options, !this.props.multi ? valueArray : null, focusedOption)
- )
- ) : null
+ isOpen ? this.renderOuter(options, !this.props.multi ? valueArray : null, focusedOption) : null
);
}
diff --git a/dist/react-select.min.css b/dist/react-select.min.css
index 0bbcf48bdf..c3b07ec434 100644
--- a/dist/react-select.min.css
+++ b/dist/react-select.min.css
@@ -1 +1 @@
-.Select,.Select-control{position:relative}.Select-arrow-zone,.Select-clear-zone,.Select-loading-zone{text-align:center;cursor:pointer}.Select,.Select div,.Select input,.Select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Select.is-disabled>.Select-control{background-color:#f9f9f9}.Select.is-disabled>.Select-control:hover{box-shadow:none}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none}.Select-control{background-color:#fff;border-radius:4px;border:1px solid #ccc;color:#333;cursor:default;display:table;height:36px;outline:0;overflow:hidden;width:100%}.is-searchable.is-focused:not(.is-open)>.Select-control,.is-searchable.is-open>.Select-control{cursor:text}.Select-control:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.is-open>.Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.is-open>.Select-control>.Select-arrow{border-color:transparent transparent #999;border-width:0 5px 5px}.is-focused:not(.is-open)>.Select-control{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1)}.Select-placeholder,.Select--single>.Select-control .Select-value{bottom:0;color:#aaa;left:0;line-height:34px;padding-left:10px;padding-right:10px;position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value .Select-value-label,.has-value.Select--single>.Select-control>.Select-value .Select-value-label{color:#333}.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value a.Select-value-label,.has-value.Select--single>.Select-control>.Select-value a.Select-value-label{cursor:pointer;text-decoration:none}.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value a.Select-value-label:focus,.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value a.Select-value-label:hover,.has-value.Select--single>.Select-control>.Select-value a.Select-value-label:focus,.has-value.Select--single>.Select-control>.Select-value a.Select-value-label:hover{color:#007eff;outline:0;text-decoration:underline}.Select-input{height:34px;padding-left:10px;padding-right:10px;vertical-align:middle}.Select-input>input{width:100%;background:none;border:0;box-shadow:none;cursor:default;display:inline-block;font-family:inherit;font-size:inherit;margin:0;outline:0;line-height:14px;padding:8px 0 12px;-webkit-appearance:none}.Select-loading,.Select-loading-zone{width:16px;position:relative;vertical-align:middle}.is-focused .Select-input>input{cursor:text}.has-value.is-pseudo-focused .Select-input{opacity:0}.Select-control:not(.is-searchable)>.Select-input{outline:0}.Select-loading-zone{display:table-cell}.Select-loading{-webkit-animation:Select-animation-spin .4s infinite linear;-o-animation:Select-animation-spin .4s infinite linear;animation:Select-animation-spin .4s infinite linear;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #ccc;border-right-color:#333;display:inline-block}.Select-clear-zone{-webkit-animation:Select-animation-fadeIn .2s;-o-animation:Select-animation-fadeIn .2s;animation:Select-animation-fadeIn .2s;color:#999;display:table-cell;position:relative;vertical-align:middle;width:17px}.Select-clear-zone:hover{color:#D0021B}.Select-clear{display:inline-block;font-size:18px;line-height:1}.Select--multi .Select-clear-zone{width:17px}.Select-arrow-zone{display:table-cell;position:relative;vertical-align:middle;width:25px;padding-right:5px}.Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px;display:inline-block;height:0;width:0}.Select-noresults,.Select-option{box-sizing:border-box;display:block;padding:8px 10px}.Select-arrow-zone:hover>.Select-arrow,.is-open .Select-arrow{border-top-color:#666}@-webkit-keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}.Select-menu-outer{border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:#fff;border:1px solid #ccc;border-top-color:#e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;position:absolute;top:100%;width:100%;z-index:1;-webkit-overflow-scrolling:touch}.Select-menu{max-height:198px;overflow-y:auto}.Select-option{background-color:#fff;color:#666;cursor:pointer}.Select-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.Select-option.is-focused{background-color:rgb(235,245,255);background-color:rgba(0,126,255,.08);color:#333}.Select-option.is-disabled{color:#ccc;cursor:default}.Select-noresults{color:#999;cursor:default}.Select--multi .Select-input{vertical-align:middle;margin-left:10px;padding:0}.Select--multi.has-value .Select-input{margin-left:5px}.Select--multi .Select-value{background-color:rgb(235,245,255);background-color:rgba(0,126,255,.08);border-radius:2px;border:1px solid rgb(178,215,254);border:1px solid rgba(0,126,255,.24);color:#007eff;display:inline-block;font-size:.9em;line-height:1.4;margin-left:5px;margin-top:5px;vertical-align:top}.Select--multi .Select-value-icon,.Select--multi .Select-value-label{display:inline-block;vertical-align:middle}.Select--multi .Select-value-label{border-bottom-right-radius:2px;border-top-right-radius:2px;cursor:default;padding:2px 5px}.Select--multi a.Select-value-label{color:#007eff;cursor:pointer;text-decoration:none}.Select--multi a.Select-value-label:hover{text-decoration:underline}.Select--multi .Select-value-icon{cursor:pointer;border-bottom-left-radius:2px;border-top-left-radius:2px;border-right:1px solid rgb(178,215,254);border-right:1px solid rgba(0,126,255,.24);padding:1px 5px 3px}.Select--multi .Select-value-icon:focus,.Select--multi .Select-value-icon:hover{background-color:rgb(216,234,253);background-color:rgba(0,113,230,.08);color:#0071e6}.Select--multi .Select-value-icon:active{background-color:rgb(178,215,254);background-color:rgba(0,126,255,.24)}.Select--multi.is-disabled .Select-value{background-color:#fcfcfc;border:1px solid #e3e3e3;color:#333}.Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3}.Select--multi.is-disabled .Select-value-icon:active,.Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:hover{background-color:#fcfcfc}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}}
\ No newline at end of file
+.Select,.Select-control{position:relative}.Select-arrow-zone,.Select-clear-zone,.Select-loading-zone{text-align:center;cursor:pointer}.Select,.Select div,.Select input,.Select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Select.is-disabled>.Select-control{background-color:#f9f9f9}.Select.is-disabled>.Select-control:hover{box-shadow:none}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none}.Select-control{background-color:#fff;border-radius:4px;border:1px solid #ccc;color:#333;cursor:default;display:table;height:36px;outline:0;overflow:hidden;width:100%}.is-searchable.is-focused:not(.is-open)>.Select-control,.is-searchable.is-open>.Select-control{cursor:text}.Select-control:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.is-open>.Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.is-open>.Select-control>.Select-arrow{border-color:transparent transparent #999;border-width:0 5px 5px}.is-focused:not(.is-open)>.Select-control{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1)}.Select--single>.Select-control .Select-value,.Select-placeholder{bottom:0;color:#aaa;left:0;line-height:34px;padding-left:10px;padding-right:10px;position:absolute;right:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.has-value.Select--single>.Select-control>.Select-value .Select-value-label,.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value .Select-value-label{color:#333}.has-value.Select--single>.Select-control>.Select-value a.Select-value-label,.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value a.Select-value-label{cursor:pointer;text-decoration:none}.has-value.Select--single>.Select-control>.Select-value a.Select-value-label:focus,.has-value.Select--single>.Select-control>.Select-value a.Select-value-label:hover,.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value a.Select-value-label:focus,.has-value.is-pseudo-focused.Select--single>.Select-control>.Select-value a.Select-value-label:hover{color:#007eff;outline:0;text-decoration:underline}.Select-input{height:34px;padding-left:10px;padding-right:10px;vertical-align:middle}.Select-input>input{width:100%;background:none;border:0;box-shadow:none;cursor:default;display:inline-block;font-family:inherit;font-size:inherit;margin:0;outline:0;line-height:14px;padding:8px 0 12px;-webkit-appearance:none}.Select-loading,.Select-loading-zone{width:16px;position:relative;vertical-align:middle}.is-focused .Select-input>input{cursor:text}.has-value.is-pseudo-focused .Select-input{opacity:0}.Select-control:not(.is-searchable)>.Select-input{outline:0}.Select-loading-zone{display:table-cell}.Select-loading{-webkit-animation:Select-animation-spin .4s infinite linear;-o-animation:Select-animation-spin .4s infinite linear;animation:Select-animation-spin .4s infinite linear;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #ccc;border-right-color:#333;display:inline-block}.Select-clear-zone{-webkit-animation:Select-animation-fadeIn .2s;-o-animation:Select-animation-fadeIn .2s;animation:Select-animation-fadeIn .2s;color:#999;display:table-cell;position:relative;vertical-align:middle;width:17px}.Select-clear-zone:hover{color:#D0021B}.Select-clear{display:inline-block;font-size:18px;line-height:1}.Select--multi .Select-clear-zone{width:17px}.Select-arrow-zone{display:table-cell;position:relative;vertical-align:middle;width:25px;padding-right:5px}.Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px;display:inline-block;height:0;width:0}.Select-noresults,.Select-option{box-sizing:border-box;display:block;padding:8px 10px}.Select-arrow-zone:hover>.Select-arrow,.is-open .Select-arrow{border-top-color:#666}@-webkit-keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}.Select-menu-outer{border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:#fff;border:1px solid #ccc;border-top-color:#e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;position:absolute;top:100%;width:100%;z-index:1;-webkit-overflow-scrolling:touch}.Select-menu{max-height:198px;overflow-y:auto}.Select-option{background-color:#fff;color:#666;cursor:pointer}.Select-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.Select-option.is-selected{background-color:#f5faff;background-color:rgba(0,126,255,.04);color:#333}.Select-option.is-focused{background-color:#ebf5ff;background-color:rgba(0,126,255,.08);color:#333}.Select-option.is-disabled{color:#ccc;cursor:default}.Select-noresults{color:#999;cursor:default}.Select--multi .Select-input{vertical-align:middle;margin-left:10px;padding:0}.Select--multi.has-value .Select-input{margin-left:5px}.Select--multi .Select-value{background-color:#ebf5ff;background-color:rgba(0,126,255,.08);border-radius:2px;border:1px solid rgba(0,126,255,.24);color:#007eff;display:inline-block;font-size:.9em;line-height:1.4;margin-left:5px;margin-top:5px;vertical-align:top}.Select--multi .Select-value-icon,.Select--multi .Select-value-label{display:inline-block;vertical-align:middle}.Select--multi .Select-value-label{border-bottom-right-radius:2px;border-top-right-radius:2px;cursor:default;padding:2px 5px}.Select--multi a.Select-value-label{color:#007eff;cursor:pointer;text-decoration:none}.Select--multi a.Select-value-label:hover{text-decoration:underline}.Select--multi .Select-value-icon{cursor:pointer;border-bottom-left-radius:2px;border-top-left-radius:2px;border-right:1px solid #c2e0ff;border-right:1px solid rgba(0,126,255,.24);padding:1px 5px 3px}.Select--multi .Select-value-icon:focus,.Select--multi .Select-value-icon:hover{background-color:#d8eafd;background-color:rgba(0,113,230,.08);color:#0071e6}.Select--multi .Select-value-icon:active{background-color:#c2e0ff;background-color:rgba(0,126,255,.24)}.Select--multi.is-disabled .Select-value{background-color:#fcfcfc;border:1px solid #e3e3e3;color:#333}.Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3}.Select--multi.is-disabled .Select-value-icon:active,.Select--multi.is-disabled .Select-value-icon:focus,.Select--multi.is-disabled .Select-value-icon:hover{background-color:#fcfcfc}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}}
\ No newline at end of file
diff --git a/dist/react-select.min.js b/dist/react-select.min.js
index 10b1e92b90..78c58da33a 100644
--- a/dist/react-select.min.js
+++ b/dist/react-select.min.js
@@ -1,2 +1,2 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var u;u="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,u.Select=e()}}(function(){return function e(u,t,s){function o(i,r){if(!t[i]){if(!u[i]){var a="function"==typeof require&&require;if(!r&&a)return a(i,!0);if(n)return n(i,!0);var l=new Error("Cannot find module '"+i+"'");throw l.code="MODULE_NOT_FOUND",l}var p=t[i]={exports:{}};u[i][0].call(p.exports,function(e){var t=u[i][1][e];return o(t?t:e)},p,p.exports,e,u,t,s)}return t[i].exports}for(var n="function"==typeof require&&require,i=0;i=0;--t){var s=u.slice(0,t);if(e[s]&&(u===s||e[s].complete))return e[s]}}function r(e,u){return e&&"function"==typeof e.then?e.then(function(e){u(null,e)},function(e){u(e)}):void 0}var a=Object.assign||function(e){for(var u=1;ur.bottom||i.topu.offsetHeight&&!(u.scrollHeight-u.offsetHeight-u.scrollTop)&&this.props.onMenuScrollToBottom()}},handleRequired:function(e,u){return e?u?0===e.length:0===Object.keys(e).length:!0},getOptionLabel:function(e){return e[this.props.labelKey]},getValueArray:function(){var e=this.props.value;if(this.props.multi){if("string"==typeof e&&(e=e.split(this.props.delimiter)),!Array.isArray(e)){if(null===e||void 0===e)return[];e=[e]}return e.map(this.expandValue).filter(function(e){return e})}var u=this.expandValue(e);return u?[u]:[]},expandValue:function(e){if("string"!=typeof e&&"number"!=typeof e)return e;var u=this.props,t=u.options,s=u.valueKey;if(t)for(var o=0;o-1&&t0?u[t-1]:u[u.length-1]),this.setState({focusedOption:o})}},selectFocusedOption:function(){return this._focusedOption?this.selectValue(this._focusedOption):void 0},renderLoading:function(){return this.props.isLoading?a["default"].createElement("span",{className:"Select-loading-zone","aria-hidden":"true"},a["default"].createElement("span",{className:"Select-loading"})):void 0},renderValue:function(e,u){var t=this,s=this.props.valueRenderer||this.getOptionLabel,o=this.props.valueComponent;if(!e.length)return this.state.inputValue?null:a["default"].createElement("div",{className:"Select-placeholder"},this.props.placeholder);var n=this.props.onValueClick?this.handleValueClick:null;return this.props.multi?e.map(function(e,u){return a["default"].createElement(o,{disabled:t.props.disabled||e.clearableValue===!1,key:"value-"+u+"-"+e[t.props.valueKey],onClick:n,onRemove:t.removeValue,value:e},s(e))}):this.state.inputValue?void 0:(u&&(n=null),a["default"].createElement(o,{disabled:this.props.disabled,onClick:n,value:e[0]},s(e[0])))},renderInput:function(e){var u=(0,f["default"])("Select-input",this.props.inputProps.className);return this.props.disabled||!this.props.searchable?a["default"].createElement("div",i({},this.props.inputProps,{className:u,tabIndex:this.props.tabIndex||0,onBlur:this.handleInputBlur,onFocus:this.handleInputFocus,ref:"input",style:{border:0,width:1,display:"inline-block"}})):this.props.autosize?a["default"].createElement(c["default"],i({},this.props.inputProps,{className:u,tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,minWidth:"5",ref:"input",required:this.state.required,value:this.state.inputValue})):a["default"].createElement("div",{className:u},a["default"].createElement("input",i({},this.props.inputProps,{tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,ref:"input",required:this.state.required,value:this.state.inputValue})))},renderClear:function(){return!this.props.clearable||!this.props.value||this.props.multi&&!this.props.value.length||this.props.disabled||this.props.isLoading?void 0:a["default"].createElement("span",{className:"Select-clear-zone",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEndClearValue},a["default"].createElement("span",{className:"Select-clear",dangerouslySetInnerHTML:{__html:"×"}}))},renderArrow:function(){return a["default"].createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow},a["default"].createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}))},filterOptions:function(e){var u=this,t=this.state.inputValue,s=this.props.options||[];return"function"==typeof this.props.filterOptions?this.props.filterOptions.call(this,s,t,e):this.props.filterOptions?(this.props.ignoreAccents&&(t=(0,g["default"])(t)),this.props.ignoreCase&&(t=t.toLowerCase()),e&&(e=e.map(function(e){return e[u.props.valueKey]})),s.filter(function(s){if(e&&e.indexOf(s[u.props.valueKey])>-1)return!1;if(u.props.filterOption)return u.props.filterOption.call(u,s,t);if(!t)return!0;var o=String(s[u.props.valueKey]),n=String(s[u.props.labelKey]);return u.props.ignoreAccents&&("label"!==u.props.matchProp&&(o=(0,g["default"])(o)),"value"!==u.props.matchProp&&(n=(0,g["default"])(n))),u.props.ignoreCase&&("label"!==u.props.matchProp&&(o=o.toLowerCase()),"value"!==u.props.matchProp&&(n=n.toLowerCase())),"start"===u.props.matchPos?"label"!==u.props.matchProp&&o.substr(0,t.length)===t||"value"!==u.props.matchProp&&n.substr(0,t.length)===t:"label"!==u.props.matchProp&&o.indexOf(t)>=0||"value"!==u.props.matchProp&&n.indexOf(t)>=0})):s},renderMenu:function(e,u,t){var s=this;if(!e||!e.length)return this.props.noResultsText?a["default"].createElement("div",{className:"Select-noresults"},this.props.noResultsText):null;if(this.props.menuRenderer)return this.props.menuRenderer({focusedOption:t,focusOption:this.focusOption,labelKey:this.props.labelKey,options:e,selectValue:this.selectValue,valueArray:u});var o=function(){var o=s.props.optionComponent,n=s.props.optionRenderer||s.getOptionLabel;return{v:e.map(function(e,i){var r=u&&u.indexOf(e)>-1,l=e===t,p=l?"focused":null,d=(0,f["default"])(s.props.optionClassName,{"Select-option":!0,"is-selected":r,"is-focused":l,"is-disabled":e.disabled});return a["default"].createElement(o,{className:d,isDisabled:e.disabled,isFocused:l,key:"option-"+i+"-"+e[s.props.valueKey],onSelect:s.selectValue,onFocus:s.focusOption,option:e,isSelected:r,ref:p},n(e))})}}();return"object"==typeof o?o.v:void 0},renderHiddenField:function(e){var u=this;if(this.props.name){if(this.props.joinValues){var t=e.map(function(e){return n(e[u.props.valueKey])}).join(this.props.delimiter);return a["default"].createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:t,disabled:this.props.disabled})}return e.map(function(e,t){return a["default"].createElement("input",{key:"hidden."+t,type:"hidden",ref:"value"+t,name:u.props.name,value:n(e[u.props.valueKey]),disabled:u.props.disabled})})}},getFocusableOption:function(e){var u=this._visibleOptions;if(u.length){var t=this.state.focusedOption||e;if(t&&u.indexOf(t)>-1)return t;for(var s=0;s=0;--t){var s=u.slice(0,t);if(e[s]&&(u===s||e[s].complete))return e[s]}}function r(e,u){return e&&"function"==typeof e.then?e.then(function(e){u(null,e)},function(e){u(e)}):void 0}var a=Object.assign||function(e){for(var u=1;ur.bottom||i.topu.offsetHeight&&!(u.scrollHeight-u.offsetHeight-u.scrollTop)&&this.props.onMenuScrollToBottom()}},handleRequired:function(e,u){return e?u?0===e.length:0===Object.keys(e).length:!0},getOptionLabel:function(e){return e[this.props.labelKey]},getValueArray:function(e){if(this.props.multi){if("string"==typeof e&&(e=e.split(this.props.delimiter)),!Array.isArray(e)){if(null===e||void 0===e)return[];e=[e]}return e.map(this.expandValue).filter(function(e){return e})}var u=this.expandValue(e);return u?[u]:[]},expandValue:function(e){if("string"!=typeof e&&"number"!=typeof e)return e;var u=this.props,t=u.options,s=u.valueKey;if(t)for(var o=0;o-1&&t0?u[t-1]:u[u.length-1]),this.setState({focusedOption:o})}},selectFocusedOption:function(){return this._focusedOption?this.selectValue(this._focusedOption):void 0},renderLoading:function(){return this.props.isLoading?a["default"].createElement("span",{className:"Select-loading-zone","aria-hidden":"true"},a["default"].createElement("span",{className:"Select-loading"})):void 0},renderValue:function(e,u){var t=this,s=this.props.valueRenderer||this.getOptionLabel,o=this.props.valueComponent;if(!e.length)return this.state.inputValue?null:a["default"].createElement("div",{className:"Select-placeholder"},this.props.placeholder);var n=this.props.onValueClick?this.handleValueClick:null;return this.props.multi?e.map(function(e,u){return a["default"].createElement(o,{disabled:t.props.disabled||e.clearableValue===!1,key:"value-"+u+"-"+e[t.props.valueKey],onClick:n,onRemove:t.removeValue,value:e},s(e))}):this.state.inputValue?void 0:(u&&(n=null),a["default"].createElement(o,{disabled:this.props.disabled,onClick:n,value:e[0]},s(e[0])))},renderInput:function(e){if(this.props.inputRenderer)return this.props.inputRenderer();var u=(0,f["default"])("Select-input",this.props.inputProps.className);return this.props.disabled||!this.props.searchable?a["default"].createElement("div",i({},this.props.inputProps,{className:u,tabIndex:this.props.tabIndex||0,onBlur:this.handleInputBlur,onFocus:this.handleInputFocus,ref:"input",style:{border:0,width:1,display:"inline-block"}})):this.props.autosize?a["default"].createElement(c["default"],i({},this.props.inputProps,{className:u,tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,minWidth:"5",ref:"input",required:this.state.required,value:this.state.inputValue})):a["default"].createElement("div",{className:u},a["default"].createElement("input",i({},this.props.inputProps,{tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,ref:"input",required:this.state.required,value:this.state.inputValue})))},renderClear:function(){return!this.props.clearable||!this.props.value||this.props.multi&&!this.props.value.length||this.props.disabled||this.props.isLoading?void 0:a["default"].createElement("span",{className:"Select-clear-zone",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEndClearValue},a["default"].createElement("span",{className:"Select-clear",dangerouslySetInnerHTML:{__html:"×"}}))},renderArrow:function(){return a["default"].createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow},a["default"].createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}))},filterOptions:function(e){var u=this,t=this.state.inputValue,s=this.props.options||[];return"function"==typeof this.props.filterOptions?this.props.filterOptions.call(this,s,t,e):this.props.filterOptions?(this.props.ignoreAccents&&(t=(0,g["default"])(t)),this.props.ignoreCase&&(t=t.toLowerCase()),e&&(e=e.map(function(e){return e[u.props.valueKey]})),s.filter(function(s){if(e&&e.indexOf(s[u.props.valueKey])>-1)return!1;if(u.props.filterOption)return u.props.filterOption.call(u,s,t);if(!t)return!0;var o=String(s[u.props.valueKey]),n=String(s[u.props.labelKey]);return u.props.ignoreAccents&&("label"!==u.props.matchProp&&(o=(0,g["default"])(o)),"value"!==u.props.matchProp&&(n=(0,g["default"])(n))),u.props.ignoreCase&&("label"!==u.props.matchProp&&(o=o.toLowerCase()),"value"!==u.props.matchProp&&(n=n.toLowerCase())),"start"===u.props.matchPos?"label"!==u.props.matchProp&&o.substr(0,t.length)===t||"value"!==u.props.matchProp&&n.substr(0,t.length)===t:"label"!==u.props.matchProp&&o.indexOf(t)>=0||"value"!==u.props.matchProp&&n.indexOf(t)>=0})):s},renderMenu:function(e,u,t){var s=this;if(!e||!e.length)return this.props.noResultsText?a["default"].createElement("div",{className:"Select-noresults"},this.props.noResultsText):null;if(this.props.menuRenderer)return this.props.menuRenderer({focusedOption:t,focusOption:this.focusOption,labelKey:this.props.labelKey,options:e,selectValue:this.selectValue,valueArray:u});var o=function(){var o=s.props.optionComponent,n=s.props.optionRenderer||s.getOptionLabel;return{v:e.map(function(e,i){var r=u&&u.indexOf(e)>-1,l=e===t,p=l?"focused":null,d=(0,f["default"])(s.props.optionClassName,{"Select-option":!0,"is-selected":r,"is-focused":l,"is-disabled":e.disabled});return a["default"].createElement(o,{className:d,isDisabled:e.disabled,isFocused:l,key:"option-"+i+"-"+e[s.props.valueKey],onSelect:s.selectValue,onFocus:s.focusOption,option:e,isSelected:r,ref:p},n(e))})}}();return"object"==typeof o?o.v:void 0},renderHiddenField:function(e){var u=this;if(this.props.name){if(this.props.joinValues){var t=e.map(function(e){return n(e[u.props.valueKey])}).join(this.props.delimiter);return a["default"].createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:t,disabled:this.props.disabled})}return e.map(function(e,t){return a["default"].createElement("input",{key:"hidden."+t,type:"hidden",ref:"value"+t,name:u.props.name,value:n(e[u.props.valueKey]),disabled:u.props.disabled})})}},getFocusableOption:function(e){var u=this._visibleOptions;if(u.length){var t=this.state.focusedOption||e;if(t&&u.indexOf(t)>-1)return t;for(var s=0;s
*/
-},{"./components/Cities":2,"./components/Contributors":3,"./components/CustomComponents":4,"./components/CustomRender":5,"./components/Multiselect":6,"./components/NumericSelect":7,"./components/States":8,"react":undefined,"react-dom":undefined,"react-select":undefined}],2:[function(require,module,exports){
-'use strict';
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactSelect = require('react-select');
-
-var _reactSelect2 = _interopRequireDefault(_reactSelect);
-
-var _reactVirtualized = require('react-virtualized');
-
-var DATA = require('../data/cities');
-
-var OPTION_HEIGHT = 35;
-var MAX_OPTIONS_HEIGHT = 200;
-
-var CitiesField = _react2['default'].createClass({
- displayName: 'CitiesField',
- propTypes: {
- label: _react2['default'].PropTypes.string,
- searchable: _react2['default'].PropTypes.bool
- },
- getDefaultProps: function getDefaultProps() {
- return {
- label: 'Cities:',
- searchable: true
- };
- },
- getInitialState: function getInitialState() {
- return {
- country: 'AU',
- disabled: false,
- searchable: this.props.searchable,
- selectValue: 'new-south-wales',
- clearable: true
- };
- },
- switchCountry: function switchCountry(e) {
- var newCountry = e.target.value;
- console.log('Country changed to ' + newCountry);
- this.setState({
- country: newCountry,
- selectValue: null
- });
- },
- updateValue: function updateValue(newValue) {
- console.log('State changed to ' + newValue);
- this.setState({
- selectValue: newValue
- });
- },
- focusStateSelect: function focusStateSelect() {
- this.refs.stateSelect.focus();
- },
- toggleCheckbox: function toggleCheckbox(e) {
- var newState = {};
- newState[e.target.name] = e.target.checked;
- this.setState(newState);
- },
- renderMenu: function renderMenu(_ref) {
- var focusedOption = _ref.focusedOption;
- var focusOption = _ref.focusOption;
- var labelKey = _ref.labelKey;
- var options = _ref.options;
- var selectValue = _ref.selectValue;
- var valueArray = _ref.valueArray;
-
- var focusedOptionIndex = options.indexOf(focusedOption);
- var height = Math.min(MAX_OPTIONS_HEIGHT, options.length * OPTION_HEIGHT);
-
- return _react2['default'].createElement(
- _reactVirtualized.AutoSizer,
- { disableHeight: true },
- function (_ref2) {
- var width = _ref2.width;
- return _react2['default'].createElement(_reactVirtualized.VirtualScroll, {
- ref: 'VirtualScroll',
- height: height,
- rowHeight: OPTION_HEIGHT,
- rowRenderer: function (index) {
- return _react2['default'].createElement(
- 'div',
- {
- onMouseOver: function () {
- return focusOption(options[index]);
- },
- onClick: function () {
- return selectValue(options[index]);
- },
- style: {
- backgroundColor: options[index] === focusedOption ? '#eee' : '#fff',
- height: OPTION_HEIGHT,
- display: 'flex',
- alignItems: 'center',
- padding: '0 .5rem'
- }
- },
- options[index][labelKey]
- );
- },
- rowsCount: options.length,
- scrollToIndex: focusedOptionIndex,
- width: width
- });
- }
- );
- },
- render: function render() {
- var options = DATA.CITIES;
- return _react2['default'].createElement(
- 'div',
- { className: 'section' },
- _react2['default'].createElement(
- 'h3',
- { className: 'section-heading' },
- 'World\'s Largest Cities'
- ),
- _react2['default'].createElement(
- 'h4',
- null,
- 'Uses react-virtualized to display data'
- ),
- _react2['default'].createElement(_reactSelect2['default'], { ref: 'stateSelect',
- autofocus: true,
- options: options,
- simpleValue: true,
- clearable: this.state.clearable,
- name: 'selected-state',
- disabled: this.state.disabled,
- value: this.state.selectValue,
- onChange: this.updateValue,
- searchable: this.state.searchable,
- labelKey: 'name',
- valueKey: 'name',
- menuStyle: { overflow: 'hidden' },
- menuRenderer: this.renderMenu
- })
- );
- }
-});
-
-module.exports = CitiesField;
-
-},{"../data/cities":9,"react":undefined,"react-select":undefined,"react-virtualized":43}],3:[function(require,module,exports){
+},{"./components/Contributors":2,"./components/CustomComponents":3,"./components/CustomRender":4,"./components/Multiselect":5,"./components/NumericSelect":6,"./components/States":7,"./components/Virtualized":8,"react":undefined,"react-dom":undefined,"react-select":undefined}],2:[function(require,module,exports){
'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -313,7 +166,7 @@ var Contributors = _react2['default'].createClass({
module.exports = Contributors;
-},{"../data/contributors":10,"react":undefined,"react-select":undefined}],4:[function(require,module,exports){
+},{"../data/contributors":10,"react":undefined,"react-select":undefined}],3:[function(require,module,exports){
'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -462,7 +315,7 @@ var UsersField = _react2['default'].createClass({
module.exports = UsersField;
-},{"../data/users":12,"react":undefined,"react-gravatar":17,"react-select":undefined}],5:[function(require,module,exports){
+},{"../data/users":12,"react":undefined,"react-gravatar":28,"react-select":undefined}],4:[function(require,module,exports){
'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -538,7 +391,7 @@ var DisabledUpsellOptions = _react2['default'].createClass({
});
module.exports = DisabledUpsellOptions;
-},{"react":undefined,"react-select":undefined}],6:[function(require,module,exports){
+},{"react":undefined,"react-select":undefined}],5:[function(require,module,exports){
'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -622,7 +475,7 @@ var MultiSelectField = _react2['default'].createClass({
module.exports = MultiSelectField;
-},{"react":undefined,"react-select":undefined}],7:[function(require,module,exports){
+},{"react":undefined,"react-select":undefined}],6:[function(require,module,exports){
'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -754,7 +607,7 @@ var ValuesAsNumbersField = _react2['default'].createClass({
module.exports = ValuesAsNumbersField;
-},{"react":undefined,"react-select":undefined}],8:[function(require,module,exports){
+},{"react":undefined,"react-select":undefined}],7:[function(require,module,exports){
'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -892,7 +745,76 @@ var StatesField = _react2['default'].createClass({
module.exports = StatesField;
-},{"../data/states":11,"react":undefined,"react-select":undefined}],9:[function(require,module,exports){
+},{"../data/states":11,"react":undefined,"react-select":undefined}],8:[function(require,module,exports){
+'use strict';
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactVirtualizedSelect = require('react-virtualized-select');
+
+var _reactVirtualizedSelect2 = _interopRequireDefault(_reactVirtualizedSelect);
+
+var DATA = require('../data/cities');
+
+var CitiesField = _react2['default'].createClass({
+ displayName: 'CitiesField',
+ getInitialState: function getInitialState() {
+ return {};
+ },
+ updateValue: function updateValue(newValue) {
+ this.setState({
+ selectValue: newValue
+ });
+ },
+ render: function render() {
+ var options = DATA.CITIES;
+ return _react2['default'].createElement(
+ 'div',
+ { className: 'section' },
+ _react2['default'].createElement(
+ 'h3',
+ { className: 'section-heading' },
+ 'Cities (Large Dataset)'
+ ),
+ _react2['default'].createElement(_reactVirtualizedSelect2['default'], { ref: 'citySelect',
+ options: options,
+ simpleValue: true,
+ clearable: true,
+ name: 'select-city',
+ value: this.state.selectValue,
+ onChange: this.updateValue,
+ searchable: true,
+ labelKey: 'name',
+ valueKey: 'name'
+ }),
+ _react2['default'].createElement(
+ 'div',
+ { className: 'hint' },
+ 'Uses ',
+ _react2['default'].createElement(
+ 'a',
+ { href: 'https://github.com/bvaughn/react-virtualized' },
+ 'react-virtualized'
+ ),
+ ' and ',
+ _react2['default'].createElement(
+ 'a',
+ { href: 'https://github.com/bvaughn/react-virtualized-select/' },
+ 'react-virtualized-select'
+ ),
+ ' to display a list of the world\'s 1,000 largest cities.'
+ )
+ );
+ }
+});
+
+module.exports = CitiesField;
+
+},{"../data/cities":9,"react":undefined,"react-virtualized-select":31}],9:[function(require,module,exports){
'use strict';
exports.CITIES = [{ name: 'Abilene' }, { name: 'Addison' }, { name: 'Akron' }, { name: 'Alameda' }, { name: 'Albany' }, { name: 'Albany' }, { name: 'Albany' }, { name: 'Albuquerque' }, { name: 'Alexandria' }, { name: 'Alexandria' }, { name: 'Alhambra' }, { name: 'Aliso Viejo' }, { name: 'Allen' }, { name: 'Allentown' }, { name: 'Alpharetta' }, { name: 'Altamonte Springs' }, { name: 'Altoona' }, { name: 'Amarillo' }, { name: 'Ames' }, { name: 'Anaheim' }, { name: 'Anchorage' }, { name: 'Anderson' }, { name: 'Ankeny' }, { name: 'Ann Arbor' }, { name: 'Annapolis' }, { name: 'Antioch' }, { name: 'Apache Junction' }, { name: 'Apex' }, { name: 'Apopka' }, { name: 'Apple Valley' }, { name: 'Apple Valley' }, { name: 'Appleton' }, { name: 'Arcadia' }, { name: 'Arlington' }, { name: 'Arlington Heights' }, { name: 'Arvada' }, { name: 'Asheville' }, { name: 'Athens-Clarke County' }, { name: 'Atlanta' }, { name: 'Atlantic City' }, { name: 'Attleboro' }, { name: 'Auburn' }, { name: 'Auburn' }, { name: 'Augusta-Richmond County' }, { name: 'Aurora' }, { name: 'Aurora' }, { name: 'Austin' }, { name: 'Aventura' }, { name: 'Avondale' }, { name: 'Azusa' }, { name: 'Bakersfield' }, { name: 'Baldwin Park' }, { name: 'Baltimore' }, { name: 'Barnstable Town' }, { name: 'Bartlett' }, { name: 'Bartlett' }, { name: 'Baton Rouge' }, { name: 'Battle Creek' }, { name: 'Bayonne' }, { name: 'Baytown' }, { name: 'Beaumont' }, { name: 'Beaumont' }, { name: 'Beavercreek' }, { name: 'Beaverton' }, { name: 'Bedford' }, { name: 'Bell Gardens' }, { name: 'Belleville' }, { name: 'Bellevue' }, { name: 'Bellevue' }, { name: 'Bellflower' }, { name: 'Bellingham' }, { name: 'Beloit' }, { name: 'Bend' }, { name: 'Bentonville' }, { name: 'Berkeley' }, { name: 'Berwyn' }, { name: 'Bethlehem' }, { name: 'Beverly' }, { name: 'Billings' }, { name: 'Biloxi' }, { name: 'Binghamton' }, { name: 'Birmingham' }, { name: 'Bismarck' }, { name: 'Blacksburg' }, { name: 'Blaine' }, { name: 'Bloomington' }, { name: 'Bloomington' }, { name: 'Bloomington' }, { name: 'Blue Springs' }, { name: 'Boca Raton' }, { name: 'Boise City' }, { name: 'Bolingbrook' }, { name: 'Bonita Springs' }, { name: 'Bossier City' }, { name: 'Boston' }, { name: 'Boulder' }, { name: 'Bountiful' }, { name: 'Bowie' }, { name: 'Bowling Green' }, { name: 'Boynton Beach' }, { name: 'Bozeman' }, { name: 'Bradenton' }, { name: 'Brea' }, { name: 'Bremerton' }, { name: 'Brentwood' }, { name: 'Brentwood' }, { name: 'Bridgeport' }, { name: 'Bristol' }, { name: 'Brockton' }, { name: 'Broken Arrow' }, { name: 'Brookfield' }, { name: 'Brookhaven' }, { name: 'Brooklyn Park' }, { name: 'Broomfield' }, { name: 'Brownsville' }, { name: 'Bryan' }, { name: 'Buckeye' }, { name: 'Buena Park' }, { name: 'Buffalo' }, { name: 'Buffalo Grove' }, { name: 'Bullhead City' }, { name: 'Burbank' }, { name: 'Burien' }, { name: 'Burleson' }, { name: 'Burlington' }, { name: 'Burlington' }, { name: 'Burnsville' }, { name: 'Caldwell' }, { name: 'Calexico' }, { name: 'Calumet City' }, { name: 'Camarillo' }, { name: 'Cambridge' }, { name: 'Camden' }, { name: 'Campbell' }, { name: 'Canton' }, { name: 'Cape Coral' }, { name: 'Cape Girardeau' }, { name: 'Carlsbad' }, { name: 'Carmel' }, { name: 'Carol Stream' }, { name: 'Carpentersville' }, { name: 'Carrollton' }, { name: 'Carson' }, { name: 'Carson City' }, { name: 'Cary' }, { name: 'Casa Grande' }, { name: 'Casper' }, { name: 'Castle Rock' }, { name: 'Cathedral City' }, { name: 'Cedar Falls' }, { name: 'Cedar Hill' }, { name: 'Cedar Park' }, { name: 'Cedar Rapids' }, { name: 'Centennial' }, { name: 'Ceres' }, { name: 'Cerritos' }, { name: 'Champaign' }, { name: 'Chandler' }, { name: 'Chapel Hill' }, { name: 'Charleston' }, { name: 'Charleston' }, { name: 'Charlotte' }, { name: 'Charlottesville' }, { name: 'Chattanooga' }, { name: 'Chelsea' }, { name: 'Chesapeake' }, { name: 'Chesterfield' }, { name: 'Cheyenne' }, { name: 'Chicago' }, { name: 'Chico' }, { name: 'Chicopee' }, { name: 'Chino' }, { name: 'Chino Hills' }, { name: 'Chula Vista' }, { name: 'Cicero' }, { name: 'Cincinnati' }, { name: 'Citrus Heights' }, { name: 'Clarksville' }, { name: 'Clearwater' }, { name: 'Cleveland' }, { name: 'Cleveland' }, { name: 'Cleveland Heights' }, { name: 'Clifton' }, { name: 'Clovis' }, { name: 'Clovis' }, { name: 'Coachella' }, { name: 'Coconut Creek' }, { name: 'Coeur d\'Alene' }, { name: 'College Station' }, { name: 'Collierville' }, { name: 'Colorado Springs' }, { name: 'Colton' }, { name: 'Columbia' }, { name: 'Columbia' }, { name: 'Columbus' }, { name: 'Columbus' }, { name: 'Columbus' }, { name: 'Commerce City' }, { name: 'Compton' }, { name: 'Concord' }, { name: 'Concord' }, { name: 'Concord' }, { name: 'Conroe' }, { name: 'Conway' }, { name: 'Coon Rapids' }, { name: 'Coppell' }, { name: 'Coral Gables' }, { name: 'Coral Springs' }, { name: 'Corona' }, { name: 'Corpus Christi' }, { name: 'Corvallis' }, { name: 'Costa Mesa' }, { name: 'Council Bluffs' }, { name: 'Covina' }, { name: 'Covington' }, { name: 'Cranston' }, { name: 'Crystal Lake' }, { name: 'Culver City' }, { name: 'Cupertino' }, { name: 'Cutler Bay' }, { name: 'Cuyahoga Falls' }, { name: 'Cypress' }, { name: 'Dallas' }, { name: 'Daly City' }, { name: 'Danbury' }, { name: 'Danville' }, { name: 'Danville' }, { name: 'Davenport' }, { name: 'Davie' }, { name: 'Davis' }, { name: 'Dayton' }, { name: 'Daytona Beach' }, { name: 'DeKalb' }, { name: 'DeSoto' }, { name: 'Dearborn' }, { name: 'Dearborn Heights' }, { name: 'Decatur' }, { name: 'Decatur' }, { name: 'Deerfield Beach' }, { name: 'Delano' }, { name: 'Delray Beach' }, { name: 'Deltona' }, { name: 'Denton' }, { name: 'Denver' }, { name: 'Des Moines' }, { name: 'Des Plaines' }, { name: 'Detroit' }, { name: 'Diamond Bar' }, { name: 'Doral' }, { name: 'Dothan' }, { name: 'Dover' }, { name: 'Downers Grove' }, { name: 'Downey' }, { name: 'Draper' }, { name: 'Dublin' }, { name: 'Dublin' }, { name: 'Dubuque' }, { name: 'Duluth' }, { name: 'Duncanville' }, { name: 'Dunwoody' }, { name: 'Durham' }, { name: 'Eagan' }, { name: 'East Lansing' }, { name: 'East Orange' }, { name: 'East Providence' }, { name: 'Eastvale' }, { name: 'Eau Claire' }, { name: 'Eden Prairie' }, { name: 'Edina' }, { name: 'Edinburg' }, { name: 'Edmond' }, { name: 'Edmonds' }, { name: 'El Cajon' }, { name: 'El Centro' }, { name: 'El Monte' }, { name: 'El Paso' }, { name: 'Elgin' }, { name: 'Elizabeth' }, { name: 'Elk Grove' }, { name: 'Elkhart' }, { name: 'Elmhurst' }, { name: 'Elyria' }, { name: 'Encinitas' }, { name: 'Enid' }, { name: 'Erie' }, { name: 'Escondido' }, { name: 'Euclid' }, { name: 'Eugene' }, { name: 'Euless' }, { name: 'Evanston' }, { name: 'Evansville' }, { name: 'Everett' }, { name: 'Everett' }, { name: 'Fairfield' }, { name: 'Fairfield' }, { name: 'Fall River' }, { name: 'Fargo' }, { name: 'Farmington' }, { name: 'Farmington Hills' }, { name: 'Fayetteville' }, { name: 'Fayetteville' }, { name: 'Federal Way' }, { name: 'Findlay' }, { name: 'Fishers' }, { name: 'Fitchburg' }, { name: 'Flagstaff' }, { name: 'Flint' }, { name: 'Florence' }, { name: 'Florence' }, { name: 'Florissant' }, { name: 'Flower Mound' }, { name: 'Folsom' }, { name: 'Fond du Lac' }, { name: 'Fontana' }, { name: 'Fort Collins' }, { name: 'Fort Lauderdale' }, { name: 'Fort Myers' }, { name: 'Fort Pierce' }, { name: 'Fort Smith' }, { name: 'Fort Wayne' }, { name: 'Fort Worth' }, { name: 'Fountain Valley' }, { name: 'Franklin' }, { name: 'Frederick' }, { name: 'Freeport' }, { name: 'Fremont' }, { name: 'Fresno' }, { name: 'Friendswood' }, { name: 'Frisco' }, { name: 'Fullerton' }, { name: 'Gainesville' }, { name: 'Gaithersburg' }, { name: 'Galveston' }, { name: 'Garden Grove' }, { name: 'Gardena' }, { name: 'Garland' }, { name: 'Gary' }, { name: 'Gastonia' }, { name: 'Georgetown' }, { name: 'Germantown' }, { name: 'Gilbert' }, { name: 'Gilroy' }, { name: 'Glendale' }, { name: 'Glendale' }, { name: 'Glendora' }, { name: 'Glenview' }, { name: 'Goodyear' }, { name: 'Goose Creek' }, { name: 'Grand Forks' }, { name: 'Grand Island' }, { name: 'Grand Junction' }, { name: 'Grand Prairie' }, { name: 'Grand Rapids' }, { name: 'Grapevine' }, { name: 'Great Falls' }, { name: 'Greeley' }, { name: 'Green Bay' }, { name: 'Greenacres' }, { name: 'Greenfield' }, { name: 'Greensboro' }, { name: 'Greenville' }, { name: 'Greenville' }, { name: 'Greenwood' }, { name: 'Gresham' }, { name: 'Grove City' }, { name: 'Gulfport' }, { name: 'Hackensack' }, { name: 'Hagerstown' }, { name: 'Hallandale Beach' }, { name: 'Haltom City' }, { name: 'Hamilton' }, { name: 'Hammond' }, { name: 'Hampton' }, { name: 'Hanford' }, { name: 'Hanover Park' }, { name: 'Harlingen' }, { name: 'Harrisburg' }, { name: 'Harrisonburg' }, { name: 'Hartford' }, { name: 'Hattiesburg' }, { name: 'Haverhill' }, { name: 'Hawthorne' }, { name: 'Hayward' }, { name: 'Hemet' }, { name: 'Hempstead' }, { name: 'Henderson' }, { name: 'Hendersonville' }, { name: 'Hesperia' }, { name: 'Hialeah' }, { name: 'Hickory' }, { name: 'High Point' }, { name: 'Highland' }, { name: 'Hillsboro' }, { name: 'Hilton Head Island' }, { name: 'Hoboken' }, { name: 'Hoffman Estates' }, { name: 'Hollywood' }, { name: 'Holyoke' }, { name: 'Homestead' }, { name: 'Honolulu' }, { name: 'Hoover' }, { name: 'Houston' }, { name: 'Huber Heights' }, { name: 'Huntersville' }, { name: 'Huntington' }, { name: 'Huntington Beach' }, { name: 'Huntington Park' }, { name: 'Huntsville' }, { name: 'Huntsville' }, { name: 'Hurst' }, { name: 'Hutchinson' }, { name: 'Idaho Falls' }, { name: 'Independence' }, { name: 'Indianapolis' }, { name: 'Indio' }, { name: 'Inglewood' }, { name: 'Iowa City' }, { name: 'Irvine' }, { name: 'Irving' }, { name: 'Jackson' }, { name: 'Jackson' }, { name: 'Jacksonville' }, { name: 'Jacksonville' }, { name: 'Janesville' }, { name: 'Jefferson City' }, { name: 'Jeffersonville' }, { name: 'Jersey City' }, { name: 'Johns Creek' }, { name: 'Johnson City' }, { name: 'Joliet' }, { name: 'Jonesboro' }, { name: 'Joplin' }, { name: 'Jupiter' }, { name: 'Jurupa Valley' }, { name: 'Kalamazoo' }, { name: 'Kannapolis' }, { name: 'Kansas City' }, { name: 'Kansas City' }, { name: 'Kearny' }, { name: 'Keizer' }, { name: 'Keller' }, { name: 'Kenner' }, { name: 'Kennewick' }, { name: 'Kenosha' }, { name: 'Kent' }, { name: 'Kentwood' }, { name: 'Kettering' }, { name: 'Killeen' }, { name: 'Kingsport' }, { name: 'Kirkland' }, { name: 'Kissimmee' }, { name: 'Knoxville' }, { name: 'Kokomo' }, { name: 'La Crosse' }, { name: 'La Habra' }, { name: 'La Mesa' }, { name: 'La Mirada' }, { name: 'La Puente' }, { name: 'La Quinta' }, { name: 'Lacey' }, { name: 'Lafayette' }, { name: 'Lafayette' }, { name: 'Laguna Niguel' }, { name: 'Lake Charles' }, { name: 'Lake Elsinore' }, { name: 'Lake Forest' }, { name: 'Lake Havasu City' }, { name: 'Lake Oswego' }, { name: 'Lakeland' }, { name: 'Lakeville' }, { name: 'Lakewood' }, { name: 'Lakewood' }, { name: 'Lakewood' }, { name: 'Lakewood' }, { name: 'Lancaster' }, { name: 'Lancaster' }, { name: 'Lancaster' }, { name: 'Lancaster' }, { name: 'Lansing' }, { name: 'Laredo' }, { name: 'Largo' }, { name: 'Las Cruces' }, { name: 'Las Vegas' }, { name: 'Lauderhill' }, { name: 'Lawrence' }, { name: 'Lawrence' }, { name: 'Lawrence' }, { name: 'Lawton' }, { name: 'Layton' }, { name: 'League City' }, { name: 'Lee\'s Summit' }, { name: 'Leesburg' }, { name: 'Lehi' }, { name: 'Lenexa' }, { name: 'Leominster' }, { name: 'Lewisville' }, { name: 'Lexington-Fayette' }, { name: 'Lima' }, { name: 'Lincoln' }, { name: 'Lincoln' }, { name: 'Lincoln Park' }, { name: 'Linden' }, { name: 'Little Rock' }, { name: 'Littleton' }, { name: 'Livermore' }, { name: 'Livonia' }, { name: 'Lodi' }, { name: 'Logan' }, { name: 'Lombard' }, { name: 'Lompoc' }, { name: 'Long Beach' }, { name: 'Longmont' }, { name: 'Longview' }, { name: 'Lorain' }, { name: 'Los Angeles' }, { name: 'Louisville/Jefferson County' }, { name: 'Loveland' }, { name: 'Lowell' }, { name: 'Lubbock' }, { name: 'Lynchburg' }, { name: 'Lynn' }, { name: 'Lynwood' }, { name: 'Macon' }, { name: 'Madera' }, { name: 'Madison' }, { name: 'Madison' }, { name: 'Malden' }, { name: 'Manassas' }, { name: 'Manchester' }, { name: 'Manhattan' }, { name: 'Mankato' }, { name: 'Mansfield' }, { name: 'Mansfield' }, { name: 'Manteca' }, { name: 'Maple Grove' }, { name: 'Maplewood' }, { name: 'Marana' }, { name: 'Margate' }, { name: 'Maricopa' }, { name: 'Marietta' }, { name: 'Marlborough' }, { name: 'Martinez' }, { name: 'Marysville' }, { name: 'McAllen' }, { name: 'McKinney' }, { name: 'Medford' }, { name: 'Medford' }, { name: 'Melbourne' }, { name: 'Memphis' }, { name: 'Menifee' }, { name: 'Mentor' }, { name: 'Merced' }, { name: 'Meriden' }, { name: 'Meridian' }, { name: 'Meridian' }, { name: 'Mesa' }, { name: 'Mesquite' }, { name: 'Methuen' }, { name: 'Miami' }, { name: 'Miami Beach' }, { name: 'Miami Gardens' }, { name: 'Middletown' }, { name: 'Middletown' }, { name: 'Midland' }, { name: 'Midland' }, { name: 'Midwest City' }, { name: 'Milford' }, { name: 'Milpitas' }, { name: 'Milwaukee' }, { name: 'Minneapolis' }, { name: 'Minnetonka' }, { name: 'Minot' }, { name: 'Miramar' }, { name: 'Mishawaka' }, { name: 'Mission' }, { name: 'Mission Viejo' }, { name: 'Missoula' }, { name: 'Missouri City' }, { name: 'Mobile' }, { name: 'Modesto' }, { name: 'Moline' }, { name: 'Monroe' }, { name: 'Monrovia' }, { name: 'Montclair' }, { name: 'Montebello' }, { name: 'Monterey Park' }, { name: 'Montgomery' }, { name: 'Moore' }, { name: 'Moorhead' }, { name: 'Moreno Valley' }, { name: 'Morgan Hill' }, { name: 'Mount Pleasant' }, { name: 'Mount Prospect' }, { name: 'Mount Vernon' }, { name: 'Mountain View' }, { name: 'Muncie' }, { name: 'Murfreesboro' }, { name: 'Murray' }, { name: 'Murrieta' }, { name: 'Muskegon' }, { name: 'Muskogee' }, { name: 'Nampa' }, { name: 'Napa' }, { name: 'Naperville' }, { name: 'Nashua' }, { name: 'Nashville-Davidson' }, { name: 'National City' }, { name: 'New Bedford' }, { name: 'New Berlin' }, { name: 'New Braunfels' }, { name: 'New Britain' }, { name: 'New Brunswick' }, { name: 'New Haven' }, { name: 'New Orleans' }, { name: 'New Rochelle' }, { name: 'New York' }, { name: 'Newark' }, { name: 'Newark' }, { name: 'Newark' }, { name: 'Newport Beach' }, { name: 'Newport News' }, { name: 'Newton' }, { name: 'Niagara Falls' }, { name: 'Noblesville' }, { name: 'Norfolk' }, { name: 'Normal' }, { name: 'Norman' }, { name: 'North Charleston' }, { name: 'North Las Vegas' }, { name: 'North Lauderdale' }, { name: 'North Little Rock' }, { name: 'North Miami' }, { name: 'North Miami Beach' }, { name: 'North Port' }, { name: 'North Richland Hills' }, { name: 'Northglenn' }, { name: 'Norwalk' }, { name: 'Norwalk' }, { name: 'Norwich' }, { name: 'Novato' }, { name: 'Novi' }, { name: 'O\'Fallon' }, { name: 'Oak Lawn' }, { name: 'Oak Park' }, { name: 'Oakland' }, { name: 'Oakland Park' }, { name: 'Oakley' }, { name: 'Ocala' }, { name: 'Oceanside' }, { name: 'Ocoee' }, { name: 'Odessa' }, { name: 'Ogden' }, { name: 'Oklahoma City' }, { name: 'Olathe' }, { name: 'Olympia' }, { name: 'Omaha' }, { name: 'Ontario' }, { name: 'Orange' }, { name: 'Orem' }, { name: 'Orland Park' }, { name: 'Orlando' }, { name: 'Ormond Beach' }, { name: 'Oro Valley' }, { name: 'Oshkosh' }, { name: 'Overland Park' }, { name: 'Owensboro' }, { name: 'Oxnard' }, { name: 'Pacifica' }, { name: 'Palatine' }, { name: 'Palm Bay' }, { name: 'Palm Beach Gardens' }, { name: 'Palm Coast' }, { name: 'Palm Desert' }, { name: 'Palm Springs' }, { name: 'Palmdale' }, { name: 'Palo Alto' }, { name: 'Panama City' }, { name: 'Paramount' }, { name: 'Park Ridge' }, { name: 'Parker' }, { name: 'Parma' }, { name: 'Pasadena' }, { name: 'Pasadena' }, { name: 'Pasco' }, { name: 'Passaic' }, { name: 'Paterson' }, { name: 'Pawtucket' }, { name: 'Peabody' }, { name: 'Peachtree Corners' }, { name: 'Pearland' }, { name: 'Pembroke Pines' }, { name: 'Pensacola' }, { name: 'Peoria' }, { name: 'Peoria' }, { name: 'Perris' }, { name: 'Perth Amboy' }, { name: 'Petaluma' }, { name: 'Pflugerville' }, { name: 'Pharr' }, { name: 'Phenix City' }, { name: 'Philadelphia' }, { name: 'Phoenix' }, { name: 'Pico Rivera' }, { name: 'Pine Bluff' }, { name: 'Pinellas Park' }, { name: 'Pittsburg' }, { name: 'Pittsburgh' }, { name: 'Pittsfield' }, { name: 'Placentia' }, { name: 'Plainfield' }, { name: 'Plainfield' }, { name: 'Plano' }, { name: 'Plantation' }, { name: 'Pleasanton' }, { name: 'Plymouth' }, { name: 'Pocatello' }, { name: 'Pomona' }, { name: 'Pompano Beach' }, { name: 'Pontiac' }, { name: 'Port Arthur' }, { name: 'Port Orange' }, { name: 'Port St. Lucie' }, { name: 'Portage' }, { name: 'Porterville' }, { name: 'Portland' }, { name: 'Portland' }, { name: 'Portsmouth' }, { name: 'Poway' }, { name: 'Prescott' }, { name: 'Prescott Valley' }, { name: 'Providence' }, { name: 'Provo' }, { name: 'Pueblo' }, { name: 'Puyallup' }, { name: 'Quincy' }, { name: 'Quincy' }, { name: 'Racine' }, { name: 'Raleigh' }, { name: 'Rancho Cordova' }, { name: 'Rancho Cucamonga' }, { name: 'Rancho Palos Verdes' }, { name: 'Rancho Santa Margarita' }, { name: 'Rapid City' }, { name: 'Reading' }, { name: 'Redding' }, { name: 'Redlands' }, { name: 'Redmond' }, { name: 'Redondo Beach' }, { name: 'Redwood City' }, { name: 'Reno' }, { name: 'Renton' }, { name: 'Revere' }, { name: 'Rialto' }, { name: 'Richardson' }, { name: 'Richland' }, { name: 'Richmond' }, { name: 'Richmond' }, { name: 'Rio Rancho' }, { name: 'Riverside' }, { name: 'Riverton' }, { name: 'Roanoke' }, { name: 'Rochester' }, { name: 'Rochester' }, { name: 'Rochester Hills' }, { name: 'Rock Hill' }, { name: 'Rock Island' }, { name: 'Rockford' }, { name: 'Rocklin' }, { name: 'Rockville' }, { name: 'Rockwall' }, { name: 'Rocky Mount' }, { name: 'Rogers' }, { name: 'Rohnert Park' }, { name: 'Romeoville' }, { name: 'Rosemead' }, { name: 'Roseville' }, { name: 'Roseville' }, { name: 'Roswell' }, { name: 'Roswell' }, { name: 'Round Rock' }, { name: 'Rowlett' }, { name: 'Roy' }, { name: 'Royal Oak' }, { name: 'Sacramento' }, { name: 'Saginaw' }, { name: 'Salem' }, { name: 'Salem' }, { name: 'Salina' }, { name: 'Salinas' }, { name: 'Salt Lake City' }, { name: 'Sammamish' }, { name: 'San Angelo' }, { name: 'San Antonio' }, { name: 'San Bernardino' }, { name: 'San Bruno' }, { name: 'San Buenaventura (Ventura)' }, { name: 'San Clemente' }, { name: 'San Diego' }, { name: 'San Francisco' }, { name: 'San Gabriel' }, { name: 'San Jacinto' }, { name: 'San Jose' }, { name: 'San Leandro' }, { name: 'San Luis Obispo' }, { name: 'San Marcos' }, { name: 'San Marcos' }, { name: 'San Mateo' }, { name: 'San Rafael' }, { name: 'San Ramon' }, { name: 'Sandy' }, { name: 'Sandy Springs' }, { name: 'Sanford' }, { name: 'Santa Ana' }, { name: 'Santa Barbara' }, { name: 'Santa Clara' }, { name: 'Santa Clarita' }, { name: 'Santa Cruz' }, { name: 'Santa Fe' }, { name: 'Santa Maria' }, { name: 'Santa Monica' }, { name: 'Santa Rosa' }, { name: 'Santee' }, { name: 'Sarasota' }, { name: 'Savannah' }, { name: 'Sayreville' }, { name: 'Schaumburg' }, { name: 'Schenectady' }, { name: 'Scottsdale' }, { name: 'Scranton' }, { name: 'Seattle' }, { name: 'Shakopee' }, { name: 'Shawnee' }, { name: 'Sheboygan' }, { name: 'Shelton' }, { name: 'Sherman' }, { name: 'Shoreline' }, { name: 'Shreveport' }, { name: 'Sierra Vista' }, { name: 'Simi Valley' }, { name: 'Sioux City' }, { name: 'Sioux Falls' }, { name: 'Skokie' }, { name: 'Smyrna' }, { name: 'Smyrna' }, { name: 'Somerville' }, { name: 'South Bend' }, { name: 'South Gate' }, { name: 'South Jordan' }, { name: 'South San Francisco' }, { name: 'Southaven' }, { name: 'Southfield' }, { name: 'Spanish Fork' }, { name: 'Sparks' }, { name: 'Spartanburg' }, { name: 'Spokane' }, { name: 'Spokane Valley' }, { name: 'Springdale' }, { name: 'Springfield' }, { name: 'Springfield' }, { name: 'Springfield' }, { name: 'Springfield' }, { name: 'Springfield' }, { name: 'St. Charles' }, { name: 'St. Clair Shores' }, { name: 'St. Cloud' }, { name: 'St. Cloud' }, { name: 'St. George' }, { name: 'St. Joseph' }, { name: 'St. Louis' }, { name: 'St. Louis Park' }, { name: 'St. Paul' }, { name: 'St. Peters' }, { name: 'St. Petersburg' }, { name: 'Stamford' }, { name: 'Stanton' }, { name: 'State College' }, { name: 'Sterling Heights' }, { name: 'Stillwater' }, { name: 'Stockton' }, { name: 'Streamwood' }, { name: 'Strongsville' }, { name: 'Suffolk' }, { name: 'Sugar Land' }, { name: 'Summerville' }, { name: 'Sumter' }, { name: 'Sunnyvale' }, { name: 'Sunrise' }, { name: 'Surprise' }, { name: 'Syracuse' }, { name: 'Tacoma' }, { name: 'Tallahassee' }, { name: 'Tamarac' }, { name: 'Tampa' }, { name: 'Taunton' }, { name: 'Taylor' }, { name: 'Taylorsville' }, { name: 'Temecula' }, { name: 'Tempe' }, { name: 'Temple' }, { name: 'Terre Haute' }, { name: 'Texarkana' }, { name: 'Texas City' }, { name: 'The Colony' }, { name: 'Thornton' }, { name: 'Thousand Oaks' }, { name: 'Tigard' }, { name: 'Tinley Park' }, { name: 'Titusville' }, { name: 'Toledo' }, { name: 'Topeka' }, { name: 'Torrance' }, { name: 'Tracy' }, { name: 'Trenton' }, { name: 'Troy' }, { name: 'Troy' }, { name: 'Tucson' }, { name: 'Tulare' }, { name: 'Tulsa' }, { name: 'Turlock' }, { name: 'Tuscaloosa' }, { name: 'Tustin' }, { name: 'Twin Falls' }, { name: 'Tyler' }, { name: 'Union City' }, { name: 'Union City' }, { name: 'Upland' }, { name: 'Urbana' }, { name: 'Urbandale' }, { name: 'Utica' }, { name: 'Vacaville' }, { name: 'Valdosta' }, { name: 'Vallejo' }, { name: 'Valley Stream' }, { name: 'Vancouver' }, { name: 'Victoria' }, { name: 'Victorville' }, { name: 'Vineland' }, { name: 'Virginia Beach' }, { name: 'Visalia' }, { name: 'Vista' }, { name: 'Waco' }, { name: 'Walnut Creek' }, { name: 'Waltham' }, { name: 'Warner Robins' }, { name: 'Warren' }, { name: 'Warren' }, { name: 'Warwick' }, { name: 'Washington' }, { name: 'Waterbury' }, { name: 'Waterloo' }, { name: 'Watsonville' }, { name: 'Waukegan' }, { name: 'Waukesha' }, { name: 'Wausau' }, { name: 'Wauwatosa' }, { name: 'Wellington' }, { name: 'Weslaco' }, { name: 'West Allis' }, { name: 'West Covina' }, { name: 'West Des Moines' }, { name: 'West Haven' }, { name: 'West Jordan' }, { name: 'West New York' }, { name: 'West Palm Beach' }, { name: 'West Sacramento' }, { name: 'West Valley City' }, { name: 'Westerville' }, { name: 'Westfield' }, { name: 'Westland' }, { name: 'Westminster' }, { name: 'Westminster' }, { name: 'Weston' }, { name: 'Weymouth Town' }, { name: 'Wheaton' }, { name: 'Wheeling' }, { name: 'White Plains' }, { name: 'Whittier' }, { name: 'Wichita' }, { name: 'Wichita Falls' }, { name: 'Wilkes-Barre' }, { name: 'Wilmington' }, { name: 'Wilmington' }, { name: 'Wilson' }, { name: 'Winston-Salem' }, { name: 'Winter Garden' }, { name: 'Woburn' }, { name: 'Woodbury' }, { name: 'Woodland' }, { name: 'Woonsocket' }, { name: 'Worcester' }, { name: 'Wylie' }, { name: 'Wyoming' }, { name: 'Yakima' }, { name: 'Yonkers' }, { name: 'Yorba Linda' }, { name: 'York' }, { name: 'Youngstown' }, { name: 'Yuba City' }, { name: 'Yucaipa' }, { name: 'Yuma' }];
@@ -915,357 +837,254 @@ exports.US = [{ value: 'AL', label: 'Alabama', disabled: true }, { value: 'AK',
module.exports = [{ value: 'John Smith', label: 'John Smith', email: 'john@smith.com' }, { value: 'Merry Jane', label: 'Merry Jane', email: 'merry@jane.com' }, { value: 'Stan Hoper', label: 'Stan Hoper', email: 'stan@hoper.com' }];
},{}],13:[function(require,module,exports){
-// shim for using process in browser
-
-var process = module.exports = {};
-var queue = [];
-var draining = false;
-var currentQueue;
-var queueIndex = -1;
-
-function cleanUpNextTick() {
- draining = false;
- if (currentQueue.length) {
- queue = currentQueue.concat(queue);
- } else {
- queueIndex = -1;
- }
- if (queue.length) {
- drainQueue();
- }
-}
+var charenc = {
+ // UTF-8 encoding
+ utf8: {
+ // Convert a string to a byte array
+ stringToBytes: function(str) {
+ return charenc.bin.stringToBytes(unescape(encodeURIComponent(str)));
+ },
-function drainQueue() {
- if (draining) {
- return;
+ // Convert a byte array to a string
+ bytesToString: function(bytes) {
+ return decodeURIComponent(escape(charenc.bin.bytesToString(bytes)));
}
- var timeout = setTimeout(cleanUpNextTick);
- draining = true;
+ },
- var len = queue.length;
- while(len) {
- currentQueue = queue;
- queue = [];
- while (++queueIndex < len) {
- if (currentQueue) {
- currentQueue[queueIndex].run();
- }
- }
- queueIndex = -1;
- len = queue.length;
- }
- currentQueue = null;
- draining = false;
- clearTimeout(timeout);
-}
+ // Binary encoding
+ bin: {
+ // Convert a string to a byte array
+ stringToBytes: function(str) {
+ for (var bytes = [], i = 0; i < str.length; i++)
+ bytes.push(str.charCodeAt(i) & 0xFF);
+ return bytes;
+ },
-process.nextTick = function (fun) {
- var args = new Array(arguments.length - 1);
- if (arguments.length > 1) {
- for (var i = 1; i < arguments.length; i++) {
- args[i - 1] = arguments[i];
- }
- }
- queue.push(new Item(fun, args));
- if (queue.length === 1 && !draining) {
- setTimeout(drainQueue, 0);
+ // Convert a byte array to a string
+ bytesToString: function(bytes) {
+ for (var str = [], i = 0; i < bytes.length; i++)
+ str.push(String.fromCharCode(bytes[i]));
+ return str.join('');
}
+ }
};
-// v8 likes predictible objects
-function Item(fun, array) {
- this.fun = fun;
- this.array = array;
-}
-Item.prototype.run = function () {
- this.fun.apply(null, this.array);
-};
-process.title = 'browser';
-process.browser = true;
-process.env = {};
-process.argv = [];
-process.version = ''; // empty string to avoid regexp issues
-process.versions = {};
+module.exports = charenc;
-function noop() {}
+},{}],14:[function(require,module,exports){
+(function() {
+ var base64map
+ = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
-process.on = noop;
-process.addListener = noop;
-process.once = noop;
-process.off = noop;
-process.removeListener = noop;
-process.removeAllListeners = noop;
-process.emit = noop;
+ crypt = {
+ // Bit-wise rotation left
+ rotl: function(n, b) {
+ return (n << b) | (n >>> (32 - b));
+ },
-process.binding = function (name) {
- throw new Error('process.binding is not supported');
-};
+ // Bit-wise rotation right
+ rotr: function(n, b) {
+ return (n << (32 - b)) | (n >>> b);
+ },
-process.cwd = function () { return '/' };
-process.chdir = function (dir) {
- throw new Error('process.chdir is not supported');
-};
-process.umask = function() { return 0; };
-
-},{}],14:[function(require,module,exports){
-// Copyright Joyent, Inc. and other Node contributors.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to permit
-// persons to whom the Software is furnished to do so, subject to the
-// following conditions:
-//
-// The above copyright notice and this permission notice shall be included
-// in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
-// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-// USE OR OTHER DEALINGS IN THE SOFTWARE.
+ // Swap big-endian to little-endian and vice versa
+ endian: function(n) {
+ // If number given, swap endian
+ if (n.constructor == Number) {
+ return crypt.rotl(n, 8) & 0x00FF00FF | crypt.rotl(n, 24) & 0xFF00FF00;
+ }
-'use strict';
+ // Else, assume array and swap all items
+ for (var i = 0; i < n.length; i++)
+ n[i] = crypt.endian(n[i]);
+ return n;
+ },
-// If obj.hasOwnProperty has been overridden, then calling
-// obj.hasOwnProperty(prop) will break.
-// See: https://github.com/joyent/node/issues/1707
-function hasOwnProperty(obj, prop) {
- return Object.prototype.hasOwnProperty.call(obj, prop);
-}
+ // Generate an array of any length of random bytes
+ randomBytes: function(n) {
+ for (var bytes = []; n > 0; n--)
+ bytes.push(Math.floor(Math.random() * 256));
+ return bytes;
+ },
-module.exports = function(qs, sep, eq, options) {
- sep = sep || '&';
- eq = eq || '=';
- var obj = {};
+ // Convert a byte array to big-endian 32-bit words
+ bytesToWords: function(bytes) {
+ for (var words = [], i = 0, b = 0; i < bytes.length; i++, b += 8)
+ words[b >>> 5] |= bytes[i] << (24 - b % 32);
+ return words;
+ },
- if (typeof qs !== 'string' || qs.length === 0) {
- return obj;
- }
+ // Convert big-endian 32-bit words to a byte array
+ wordsToBytes: function(words) {
+ for (var bytes = [], b = 0; b < words.length * 32; b += 8)
+ bytes.push((words[b >>> 5] >>> (24 - b % 32)) & 0xFF);
+ return bytes;
+ },
- var regexp = /\+/g;
- qs = qs.split(sep);
+ // Convert a byte array to a hex string
+ bytesToHex: function(bytes) {
+ for (var hex = [], i = 0; i < bytes.length; i++) {
+ hex.push((bytes[i] >>> 4).toString(16));
+ hex.push((bytes[i] & 0xF).toString(16));
+ }
+ return hex.join('');
+ },
- var maxKeys = 1000;
- if (options && typeof options.maxKeys === 'number') {
- maxKeys = options.maxKeys;
- }
+ // Convert a hex string to a byte array
+ hexToBytes: function(hex) {
+ for (var bytes = [], c = 0; c < hex.length; c += 2)
+ bytes.push(parseInt(hex.substr(c, 2), 16));
+ return bytes;
+ },
- var len = qs.length;
- // maxKeys <= 0 means that we should not limit keys count
- if (maxKeys > 0 && len > maxKeys) {
- len = maxKeys;
- }
+ // Convert a byte array to a base-64 string
+ bytesToBase64: function(bytes) {
+ for (var base64 = [], i = 0; i < bytes.length; i += 3) {
+ var triplet = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
+ for (var j = 0; j < 4; j++)
+ if (i * 8 + j * 6 <= bytes.length * 8)
+ base64.push(base64map.charAt((triplet >>> 6 * (3 - j)) & 0x3F));
+ else
+ base64.push('=');
+ }
+ return base64.join('');
+ },
- for (var i = 0; i < len; ++i) {
- var x = qs[i].replace(regexp, '%20'),
- idx = x.indexOf(eq),
- kstr, vstr, k, v;
+ // Convert a base-64 string to a byte array
+ base64ToBytes: function(base64) {
+ // Remove non-base-64 characters
+ base64 = base64.replace(/[^A-Z0-9+\/]/ig, '');
- if (idx >= 0) {
- kstr = x.substr(0, idx);
- vstr = x.substr(idx + 1);
- } else {
- kstr = x;
- vstr = '';
+ for (var bytes = [], i = 0, imod4 = 0; i < base64.length;
+ imod4 = ++i % 4) {
+ if (imod4 == 0) continue;
+ bytes.push(((base64map.indexOf(base64.charAt(i - 1))
+ & (Math.pow(2, -2 * imod4 + 8) - 1)) << (imod4 * 2))
+ | (base64map.indexOf(base64.charAt(i)) >>> (6 - imod4 * 2)));
+ }
+ return bytes;
}
+ };
- k = decodeURIComponent(kstr);
- v = decodeURIComponent(vstr);
+ module.exports = crypt;
+})();
- if (!hasOwnProperty(obj, k)) {
- obj[k] = v;
- } else if (isArray(obj[k])) {
- obj[k].push(v);
- } else {
- obj[k] = [obj[k], v];
+},{}],15:[function(require,module,exports){
+'use strict';
+module.exports = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+},{}],16:[function(require,module,exports){
+'use strict';
+
+var canUseDOM = require('./inDOM');
+
+var size;
+
+module.exports = function (recalc) {
+ if (!size || recalc) {
+ if (canUseDOM) {
+ var scrollDiv = document.createElement('div');
+
+ scrollDiv.style.position = 'absolute';
+ scrollDiv.style.top = '-9999px';
+ scrollDiv.style.width = '50px';
+ scrollDiv.style.height = '50px';
+ scrollDiv.style.overflow = 'scroll';
+
+ document.body.appendChild(scrollDiv);
+ size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+ document.body.removeChild(scrollDiv);
}
}
- return obj;
-};
-
-var isArray = Array.isArray || function (xs) {
- return Object.prototype.toString.call(xs) === '[object Array]';
+ return size;
};
+},{"./inDOM":15}],17:[function(require,module,exports){
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @typechecks
+ *
+ */
-},{}],15:[function(require,module,exports){
-// Copyright Joyent, Inc. and other Node contributors.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to permit
-// persons to whom the Software is furnished to do so, subject to the
-// following conditions:
-//
-// The above copyright notice and this permission notice shall be included
-// in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
-// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-// USE OR OTHER DEALINGS IN THE SOFTWARE.
+/*eslint-disable no-self-compare */
'use strict';
-var stringifyPrimitive = function(v) {
- switch (typeof v) {
- case 'string':
- return v;
-
- case 'boolean':
- return v ? 'true' : 'false';
+var hasOwnProperty = Object.prototype.hasOwnProperty;
- case 'number':
- return isFinite(v) ? v : '';
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
+function is(x, y) {
+ // SameValue algorithm
+ if (x === y) {
+ // Steps 1-5, 7-10
+ // Steps 6.b-6.e: +0 != -0
+ return x !== 0 || 1 / x === 1 / y;
+ } else {
+ // Step 6.a: NaN == NaN
+ return x !== x && y !== y;
+ }
+}
- default:
- return '';
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ */
+function shallowEqual(objA, objB) {
+ if (is(objA, objB)) {
+ return true;
}
-};
-module.exports = function(obj, sep, eq, name) {
- sep = sep || '&';
- eq = eq || '=';
- if (obj === null) {
- obj = undefined;
+ if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+ return false;
}
- if (typeof obj === 'object') {
- return map(objectKeys(obj), function(k) {
- var ks = encodeURIComponent(stringifyPrimitive(k)) + eq;
- if (isArray(obj[k])) {
- return map(obj[k], function(v) {
- return ks + encodeURIComponent(stringifyPrimitive(v));
- }).join(sep);
- } else {
- return ks + encodeURIComponent(stringifyPrimitive(obj[k]));
- }
- }).join(sep);
+ var keysA = Object.keys(objA);
+ var keysB = Object.keys(objB);
+ if (keysA.length !== keysB.length) {
+ return false;
}
- if (!name) return '';
- return encodeURIComponent(stringifyPrimitive(name)) + eq +
- encodeURIComponent(stringifyPrimitive(obj));
-};
+ // Test for A's keys different from B.
+ for (var i = 0; i < keysA.length; i++) {
+ if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+ return false;
+ }
+ }
-var isArray = Array.isArray || function (xs) {
- return Object.prototype.toString.call(xs) === '[object Array]';
-};
-
-function map (xs, f) {
- if (xs.map) return xs.map(f);
- var res = [];
- for (var i = 0; i < xs.length; i++) {
- res.push(f(xs[i], i));
- }
- return res;
+ return true;
}
-var objectKeys = Object.keys || function (obj) {
- var res = [];
- for (var key in obj) {
- if (Object.prototype.hasOwnProperty.call(obj, key)) res.push(key);
- }
- return res;
-};
-
-},{}],16:[function(require,module,exports){
-'use strict';
-
-exports.decode = exports.parse = require('./decode');
-exports.encode = exports.stringify = require('./encode');
-
-},{"./decode":14,"./encode":15}],17:[function(require,module,exports){
-// Generated by CoffeeScript 1.10.0
-var React, isRetina, md5, querystring;
-
-React = require('react');
-
-md5 = require('md5');
-
-querystring = require('querystring');
-
-isRetina = require('is-retina');
+module.exports = shallowEqual;
+},{}],18:[function(require,module,exports){
+/**
+ * Determine if an object is Buffer
+ *
+ * Author: Feross Aboukhadijeh
+ * License: MIT
+ *
+ * `npm install is-buffer`
+ */
-module.exports = React.createClass({
- displayName: 'Gravatar',
- propTypes: {
- email: React.PropTypes.string,
- md5: React.PropTypes.string,
- size: React.PropTypes.number,
- rating: React.PropTypes.string,
- https: React.PropTypes.bool,
- "default": React.PropTypes.string,
- className: React.PropTypes.string
- },
- getDefaultProps: function() {
- return {
- size: 50,
- rating: 'g',
- https: false,
- "default": "retro"
- };
- },
- render: function() {
- var base, hash, modernBrowser, query, retinaQuery, retinaSrc, src;
- base = this.props.https ? "https://secure.gravatar.com/avatar/" : 'http://www.gravatar.com/avatar/';
- query = querystring.stringify({
- s: this.props.size,
- r: this.props.rating,
- d: this.props["default"]
- });
- retinaQuery = querystring.stringify({
- s: this.props.size * 2,
- r: this.props.rating,
- d: this.props["default"]
- });
- if (this.props.md5) {
- hash = this.props.md5;
- } else if (this.props.email) {
- hash = md5(this.props.email);
- } else {
- console.warn('Gravatar image can not be fetched. Either the "email" or "md5" prop must be specified.');
- return React.createElement("script", null);
- }
- src = base + hash + "?" + query;
- retinaSrc = base + hash + "?" + retinaQuery;
- modernBrowser = true;
- if (typeof window !== "undefined" && window !== null) {
- modernBrowser = 'srcset' in document.createElement('img');
- }
- if (!modernBrowser && isRetina()) {
- return React.createElement("img", React.__spread({
- "style": this.props.style,
- "className": "react-gravatar " + this.props.className,
- "src": retinaSrc,
- "height": this.props.size,
- "width": this.props.size
- }, this.props));
- } else {
- return React.createElement("img", React.__spread({
- "style": this.props.style,
- "className": "react-gravatar " + this.props.className,
- "src": src,
- "srcSet": retinaSrc + " 2x",
- "height": this.props.size,
- "width": this.props.size
- }, this.props));
- }
- }
-});
+module.exports = function (obj) {
+ return !!(obj != null &&
+ (obj._isBuffer || // For Safari 5-7 (missing Object.prototype.constructor)
+ (obj.constructor &&
+ typeof obj.constructor.isBuffer === 'function' &&
+ obj.constructor.isBuffer(obj))
+ ))
+}
-},{"is-retina":18,"md5":19,"querystring":16,"react":undefined}],18:[function(require,module,exports){
+},{}],19:[function(require,module,exports){
module.exports = function() {
var mediaQuery;
if (typeof window !== "undefined" && window !== null) {
@@ -1280,7 +1099,7 @@ module.exports = function() {
return false;
};
-},{}],19:[function(require,module,exports){
+},{}],20:[function(require,module,exports){
(function(){
var crypt = require('crypt'),
utf8 = require('charenc').utf8,
@@ -1442,159 +1261,1843 @@ module.exports = function() {
})();
-},{"charenc":20,"crypt":21,"is-buffer":22}],20:[function(require,module,exports){
-var charenc = {
- // UTF-8 encoding
- utf8: {
- // Convert a string to a byte array
- stringToBytes: function(str) {
- return charenc.bin.stringToBytes(unescape(encodeURIComponent(str)));
- },
+},{"charenc":13,"crypt":14,"is-buffer":18}],21:[function(require,module,exports){
+(function (process){
+// Generated by CoffeeScript 1.7.1
+(function() {
+ var getNanoSeconds, hrtime, loadTime;
- // Convert a byte array to a string
- bytesToString: function(bytes) {
- return decodeURIComponent(escape(charenc.bin.bytesToString(bytes)));
+ if ((typeof performance !== "undefined" && performance !== null) && performance.now) {
+ module.exports = function() {
+ return performance.now();
+ };
+ } else if ((typeof process !== "undefined" && process !== null) && process.hrtime) {
+ module.exports = function() {
+ return (getNanoSeconds() - loadTime) / 1e6;
+ };
+ hrtime = process.hrtime;
+ getNanoSeconds = function() {
+ var hr;
+ hr = hrtime();
+ return hr[0] * 1e9 + hr[1];
+ };
+ loadTime = getNanoSeconds();
+ } else if (Date.now) {
+ module.exports = function() {
+ return Date.now() - loadTime;
+ };
+ loadTime = Date.now();
+ } else {
+ module.exports = function() {
+ return new Date().getTime() - loadTime;
+ };
+ loadTime = new Date().getTime();
+ }
+
+}).call(this);
+
+}).call(this,require('_process'))
+},{"_process":22}],22:[function(require,module,exports){
+// shim for using process in browser
+
+var process = module.exports = {};
+var queue = [];
+var draining = false;
+var currentQueue;
+var queueIndex = -1;
+
+function cleanUpNextTick() {
+ draining = false;
+ if (currentQueue.length) {
+ queue = currentQueue.concat(queue);
+ } else {
+ queueIndex = -1;
}
- },
+ if (queue.length) {
+ drainQueue();
+ }
+}
- // Binary encoding
- bin: {
- // Convert a string to a byte array
- stringToBytes: function(str) {
- for (var bytes = [], i = 0; i < str.length; i++)
- bytes.push(str.charCodeAt(i) & 0xFF);
- return bytes;
- },
+function drainQueue() {
+ if (draining) {
+ return;
+ }
+ var timeout = setTimeout(cleanUpNextTick);
+ draining = true;
- // Convert a byte array to a string
- bytesToString: function(bytes) {
- for (var str = [], i = 0; i < bytes.length; i++)
- str.push(String.fromCharCode(bytes[i]));
- return str.join('');
+ var len = queue.length;
+ while(len) {
+ currentQueue = queue;
+ queue = [];
+ while (++queueIndex < len) {
+ if (currentQueue) {
+ currentQueue[queueIndex].run();
+ }
+ }
+ queueIndex = -1;
+ len = queue.length;
+ }
+ currentQueue = null;
+ draining = false;
+ clearTimeout(timeout);
+}
+
+process.nextTick = function (fun) {
+ var args = new Array(arguments.length - 1);
+ if (arguments.length > 1) {
+ for (var i = 1; i < arguments.length; i++) {
+ args[i - 1] = arguments[i];
+ }
+ }
+ queue.push(new Item(fun, args));
+ if (queue.length === 1 && !draining) {
+ setTimeout(drainQueue, 0);
}
- }
};
-module.exports = charenc;
+// v8 likes predictible objects
+function Item(fun, array) {
+ this.fun = fun;
+ this.array = array;
+}
+Item.prototype.run = function () {
+ this.fun.apply(null, this.array);
+};
+process.title = 'browser';
+process.browser = true;
+process.env = {};
+process.argv = [];
+process.version = ''; // empty string to avoid regexp issues
+process.versions = {};
-},{}],21:[function(require,module,exports){
-(function() {
- var base64map
- = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
+function noop() {}
- crypt = {
- // Bit-wise rotation left
- rotl: function(n, b) {
- return (n << b) | (n >>> (32 - b));
- },
+process.on = noop;
+process.addListener = noop;
+process.once = noop;
+process.off = noop;
+process.removeListener = noop;
+process.removeAllListeners = noop;
+process.emit = noop;
- // Bit-wise rotation right
- rotr: function(n, b) {
- return (n << (32 - b)) | (n >>> b);
- },
+process.binding = function (name) {
+ throw new Error('process.binding is not supported');
+};
+
+process.cwd = function () { return '/' };
+process.chdir = function (dir) {
+ throw new Error('process.chdir is not supported');
+};
+process.umask = function() { return 0; };
+
+},{}],23:[function(require,module,exports){
+// Copyright Joyent, Inc. and other Node contributors.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to permit
+// persons to whom the Software is furnished to do so, subject to the
+// following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+// USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+'use strict';
+
+// If obj.hasOwnProperty has been overridden, then calling
+// obj.hasOwnProperty(prop) will break.
+// See: https://github.com/joyent/node/issues/1707
+function hasOwnProperty(obj, prop) {
+ return Object.prototype.hasOwnProperty.call(obj, prop);
+}
+
+module.exports = function(qs, sep, eq, options) {
+ sep = sep || '&';
+ eq = eq || '=';
+ var obj = {};
+
+ if (typeof qs !== 'string' || qs.length === 0) {
+ return obj;
+ }
+
+ var regexp = /\+/g;
+ qs = qs.split(sep);
+
+ var maxKeys = 1000;
+ if (options && typeof options.maxKeys === 'number') {
+ maxKeys = options.maxKeys;
+ }
+
+ var len = qs.length;
+ // maxKeys <= 0 means that we should not limit keys count
+ if (maxKeys > 0 && len > maxKeys) {
+ len = maxKeys;
+ }
+
+ for (var i = 0; i < len; ++i) {
+ var x = qs[i].replace(regexp, '%20'),
+ idx = x.indexOf(eq),
+ kstr, vstr, k, v;
+
+ if (idx >= 0) {
+ kstr = x.substr(0, idx);
+ vstr = x.substr(idx + 1);
+ } else {
+ kstr = x;
+ vstr = '';
+ }
+
+ k = decodeURIComponent(kstr);
+ v = decodeURIComponent(vstr);
+
+ if (!hasOwnProperty(obj, k)) {
+ obj[k] = v;
+ } else if (isArray(obj[k])) {
+ obj[k].push(v);
+ } else {
+ obj[k] = [obj[k], v];
+ }
+ }
+
+ return obj;
+};
+
+var isArray = Array.isArray || function (xs) {
+ return Object.prototype.toString.call(xs) === '[object Array]';
+};
+
+},{}],24:[function(require,module,exports){
+// Copyright Joyent, Inc. and other Node contributors.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to permit
+// persons to whom the Software is furnished to do so, subject to the
+// following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+// USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+'use strict';
+
+var stringifyPrimitive = function(v) {
+ switch (typeof v) {
+ case 'string':
+ return v;
+
+ case 'boolean':
+ return v ? 'true' : 'false';
+
+ case 'number':
+ return isFinite(v) ? v : '';
+
+ default:
+ return '';
+ }
+};
+
+module.exports = function(obj, sep, eq, name) {
+ sep = sep || '&';
+ eq = eq || '=';
+ if (obj === null) {
+ obj = undefined;
+ }
+
+ if (typeof obj === 'object') {
+ return map(objectKeys(obj), function(k) {
+ var ks = encodeURIComponent(stringifyPrimitive(k)) + eq;
+ if (isArray(obj[k])) {
+ return map(obj[k], function(v) {
+ return ks + encodeURIComponent(stringifyPrimitive(v));
+ }).join(sep);
+ } else {
+ return ks + encodeURIComponent(stringifyPrimitive(obj[k]));
+ }
+ }).join(sep);
+
+ }
+
+ if (!name) return '';
+ return encodeURIComponent(stringifyPrimitive(name)) + eq +
+ encodeURIComponent(stringifyPrimitive(obj));
+};
+
+var isArray = Array.isArray || function (xs) {
+ return Object.prototype.toString.call(xs) === '[object Array]';
+};
+
+function map (xs, f) {
+ if (xs.map) return xs.map(f);
+ var res = [];
+ for (var i = 0; i < xs.length; i++) {
+ res.push(f(xs[i], i));
+ }
+ return res;
+}
+
+var objectKeys = Object.keys || function (obj) {
+ var res = [];
+ for (var key in obj) {
+ if (Object.prototype.hasOwnProperty.call(obj, key)) res.push(key);
+ }
+ return res;
+};
+
+},{}],25:[function(require,module,exports){
+'use strict';
+
+exports.decode = exports.parse = require('./decode');
+exports.encode = exports.stringify = require('./encode');
+
+},{"./decode":23,"./encode":24}],26:[function(require,module,exports){
+(function (global){
+var now = require('performance-now')
+ , root = typeof window === 'undefined' ? global : window
+ , vendors = ['moz', 'webkit']
+ , suffix = 'AnimationFrame'
+ , raf = root['request' + suffix]
+ , caf = root['cancel' + suffix] || root['cancelRequest' + suffix]
+
+for(var i = 0; !raf && i < vendors.length; i++) {
+ raf = root[vendors[i] + 'Request' + suffix]
+ caf = root[vendors[i] + 'Cancel' + suffix]
+ || root[vendors[i] + 'CancelRequest' + suffix]
+}
+
+// Some versions of FF have rAF but not cAF
+if(!raf || !caf) {
+ var last = 0
+ , id = 0
+ , queue = []
+ , frameDuration = 1000 / 60
+
+ raf = function(callback) {
+ if(queue.length === 0) {
+ var _now = now()
+ , next = Math.max(0, frameDuration - (_now - last))
+ last = next + _now
+ setTimeout(function() {
+ var cp = queue.slice(0)
+ // Clear queue here to prevent
+ // callbacks from appending listeners
+ // to the current frame's queue
+ queue.length = 0
+ for(var i = 0; i < cp.length; i++) {
+ if(!cp[i].cancelled) {
+ try{
+ cp[i].callback(last)
+ } catch(e) {
+ setTimeout(function() { throw e }, 0)
+ }
+ }
+ }
+ }, Math.round(next))
+ }
+ queue.push({
+ handle: ++id,
+ callback: callback,
+ cancelled: false
+ })
+ return id
+ }
+
+ caf = function(handle) {
+ for(var i = 0; i < queue.length; i++) {
+ if(queue[i].handle === handle) {
+ queue[i].cancelled = true
+ }
+ }
+ }
+}
+
+module.exports = function(fn) {
+ // Wrap in a new function to prevent
+ // `cancel` potentially being assigned
+ // to the native rAF function
+ return raf.call(root, fn)
+}
+module.exports.cancel = function() {
+ caf.apply(root, arguments)
+}
+module.exports.polyfill = function() {
+ root.requestAnimationFrame = raf
+ root.cancelAnimationFrame = caf
+}
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"performance-now":21}],27:[function(require,module,exports){
+module.exports = require('react/lib/shallowCompare');
+},{"react/lib/shallowCompare":67}],28:[function(require,module,exports){
+// Generated by CoffeeScript 1.10.0
+var React, isRetina, md5, querystring;
+
+React = require('react');
+
+md5 = require('md5');
+
+querystring = require('querystring');
+
+isRetina = require('is-retina');
+
+module.exports = React.createClass({
+ displayName: 'Gravatar',
+ propTypes: {
+ email: React.PropTypes.string,
+ md5: React.PropTypes.string,
+ size: React.PropTypes.number,
+ rating: React.PropTypes.string,
+ https: React.PropTypes.bool,
+ "default": React.PropTypes.string,
+ className: React.PropTypes.string
+ },
+ getDefaultProps: function() {
+ return {
+ size: 50,
+ rating: 'g',
+ https: false,
+ "default": "retro"
+ };
+ },
+ render: function() {
+ var base, className, hash, modernBrowser, query, retinaQuery, retinaSrc, src;
+ base = this.props.https ? "https://secure.gravatar.com/avatar/" : 'http://www.gravatar.com/avatar/';
+ query = querystring.stringify({
+ s: this.props.size,
+ r: this.props.rating,
+ d: this.props["default"]
+ });
+ retinaQuery = querystring.stringify({
+ s: this.props.size * 2,
+ r: this.props.rating,
+ d: this.props["default"]
+ });
+ if (this.props.md5) {
+ hash = this.props.md5;
+ } else if (this.props.email) {
+ hash = md5(this.props.email);
+ } else {
+ console.warn('Gravatar image can not be fetched. Either the "email" or "md5" prop must be specified.');
+ return React.createElement("script", null);
+ }
+ src = base + hash + "?" + query;
+ retinaSrc = base + hash + "?" + retinaQuery;
+ modernBrowser = true;
+ if (typeof window !== "undefined" && window !== null) {
+ modernBrowser = 'srcset' in document.createElement('img');
+ }
+ className = 'react-gravatar';
+ if (this.props.className) {
+ className = className + " " + this.props.className;
+ }
+ if (!modernBrowser && isRetina()) {
+ return React.createElement("img", Object.assign({
+ "style": this.props.style,
+ "src": retinaSrc,
+ "height": this.props.size,
+ "width": this.props.size
+ }, this.props, {
+ "className": className
+ }));
+ } else {
+ return React.createElement("img", Object.assign({
+ "style": this.props.style,
+ "src": src,
+ "srcSet": retinaSrc + " 2x",
+ "height": this.props.size,
+ "width": this.props.size
+ }, this.props, {
+ "className": className
+ }));
+ }
+ }
+});
+
+},{"is-retina":19,"md5":20,"querystring":25,"react":undefined}],29:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactSelect = require('react-select');
+
+var _reactSelect2 = _interopRequireDefault(_reactSelect);
+
+var _reactVirtualized = require('react-virtualized');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var VirtualizedSelect = function (_Component) {
+ _inherits(VirtualizedSelect, _Component);
+
+ function VirtualizedSelect(props, context) {
+ _classCallCheck(this, VirtualizedSelect);
+
+ var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(VirtualizedSelect).call(this, props, context));
+
+ _this._renderMenu = _this._renderMenu.bind(_this);
+ _this._optionRenderer = _this._optionRenderer.bind(_this);
+ return _this;
+ }
+
+ _createClass(VirtualizedSelect, [{
+ key: 'render',
+ value: function render() {
+ return _react2.default.createElement(_reactSelect2.default, _extends({}, this.props, {
+ menuRenderer: this._renderMenu,
+ menuStyle: { overflow: 'hidden' }
+ }));
+ }
+
+ // See https://github.com/JedWatson/react-select/#effeciently-rendering-large-lists-with-windowing
+
+ }, {
+ key: '_renderMenu',
+ value: function _renderMenu(_ref) {
+ var focusedOption = _ref.focusedOption;
+ var focusOption = _ref.focusOption;
+ var labelKey = _ref.labelKey;
+ var options = _ref.options;
+ var selectValue = _ref.selectValue;
+ var valueArray = _ref.valueArray;
+ var _props = this.props;
+ var maxHeight = _props.maxHeight;
+ var optionHeight = _props.optionHeight;
+ var optionRenderer = _props.optionRenderer;
+
+ var focusedOptionIndex = options.indexOf(focusedOption);
+ var height = Math.min(maxHeight, options.length * optionHeight);
+ var innerRowRenderer = optionRenderer || this._optionRenderer;
+
+ function wrappedRowRenderer(index) {
+ var option = options[index];
+
+ return innerRowRenderer({ focusedOption: focusedOption, focusedOptionIndex: focusedOptionIndex, focusOption: focusOption, labelKey: labelKey, option: option, options: options, selectValue: selectValue, valueArray: valueArray });
+ }
+
+ return _react2.default.createElement(
+ _reactVirtualized.AutoSizer,
+ { disableHeight: true },
+ function (_ref2) {
+ var width = _ref2.width;
+ return _react2.default.createElement(_reactVirtualized.VirtualScroll, {
+ className: 'VirtualSelectGrid',
+ height: height,
+ rowHeight: optionHeight,
+ rowRenderer: wrappedRowRenderer,
+ rowsCount: options.length,
+ scrollToIndex: focusedOptionIndex,
+ width: width
+ });
+ }
+ );
+ }
+ }, {
+ key: '_optionRenderer',
+ value: function _optionRenderer(_ref3) {
+ var focusedOption = _ref3.focusedOption;
+ var focusOption = _ref3.focusOption;
+ var labelKey = _ref3.labelKey;
+ var option = _ref3.option;
+ var selectValue = _ref3.selectValue;
+ var optionHeight = this.props.optionHeight;
+
+
+ var className = option === focusedOption ? 'VirtualizedSelectOption VirtualizedSelectFocusedOption' : 'VirtualizedSelectOption';
+
+ return _react2.default.createElement(
+ 'div',
+ {
+ className: className,
+ onClick: function onClick() {
+ return selectValue(option);
+ },
+ onMouseOver: function onMouseOver() {
+ return focusOption(option);
+ },
+ style: {
+ height: optionHeight
+ }
+ },
+ option[labelKey]
+ );
+ }
+ }]);
+
+ return VirtualizedSelect;
+}(_react.Component);
+
+VirtualizedSelect.propTypes = {
+ maxHeight: _react.PropTypes.number.isRequired,
+ optionHeight: _react.PropTypes.number.isRequired,
+ optionRenderer: _react.PropTypes.func
+};
+VirtualizedSelect.defaultProps = {
+ maxHeight: 200,
+ optionHeight: 35
+};
+exports.default = VirtualizedSelect;
+},{"react":undefined,"react-select":undefined,"react-virtualized":62}],30:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = undefined;
+
+var _VirtualizedSelect = require('./VirtualizedSelect');
+
+var _VirtualizedSelect2 = _interopRequireDefault(_VirtualizedSelect);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _VirtualizedSelect2.default;
+},{"./VirtualizedSelect":29}],31:[function(require,module,exports){
+arguments[4][30][0].apply(exports,arguments)
+},{"./VirtualizedSelect":30,"dup":30}],32:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
+
+var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * This HOC decorates a virtualized component and responds to arrow-key events by scrolling one row or column at a time.
+ */
+
+var ArrowKeyStepper = function (_Component) {
+ _inherits(ArrowKeyStepper, _Component);
+
+ function ArrowKeyStepper(props, context) {
+ _classCallCheck(this, ArrowKeyStepper);
+
+ var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ArrowKeyStepper).call(this, props, context));
+
+ _this.state = {
+ scrollToColumn: 0,
+ scrollToRow: 0
+ };
+
+ _this._columnStartIndex = 0;
+ _this._columnStopIndex = 0;
+ _this._rowStartIndex = 0;
+ _this._rowStopIndex = 0;
+
+ _this._onKeyDown = _this._onKeyDown.bind(_this);
+ _this._onSectionRendered = _this._onSectionRendered.bind(_this);
+ return _this;
+ }
+
+ _createClass(ArrowKeyStepper, [{
+ key: 'render',
+ value: function render() {
+ var _props = this.props;
+ var className = _props.className;
+ var children = _props.children;
+ var _state = this.state;
+ var scrollToColumn = _state.scrollToColumn;
+ var scrollToRow = _state.scrollToRow;
+
+
+ return _react2.default.createElement(
+ 'div',
+ {
+ className: className,
+ onKeyDown: this._onKeyDown
+ },
+ children({
+ onSectionRendered: this._onSectionRendered,
+ scrollToColumn: scrollToColumn,
+ scrollToRow: scrollToRow
+ })
+ );
+ }
+ }, {
+ key: 'shouldComponentUpdate',
+ value: function shouldComponentUpdate(nextProps, nextState) {
+ return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
+ }
+ }, {
+ key: '_onKeyDown',
+ value: function _onKeyDown(event) {
+ var _props2 = this.props;
+ var columnsCount = _props2.columnsCount;
+ var rowsCount = _props2.rowsCount;
+
+ // The above cases all prevent default event event behavior.
+ // This is to keep the grid from scrolling after the snap-to update.
+
+ switch (event.key) {
+ case 'ArrowDown':
+ event.preventDefault();
+ this.setState({
+ scrollToRow: Math.min(this._rowStopIndex + 1, rowsCount - 1)
+ });
+ break;
+ case 'ArrowLeft':
+ event.preventDefault();
+ this.setState({
+ scrollToColumn: Math.max(this._columnStartIndex - 1, 0)
+ });
+ break;
+ case 'ArrowRight':
+ event.preventDefault();
+ this.setState({
+ scrollToColumn: Math.min(this._columnStopIndex + 1, columnsCount - 1)
+ });
+ break;
+ case 'ArrowUp':
+ event.preventDefault();
+ this.setState({
+ scrollToRow: Math.max(this._rowStartIndex - 1, 0)
+ });
+ break;
+ }
+ }
+ }, {
+ key: '_onSectionRendered',
+ value: function _onSectionRendered(_ref) {
+ var columnStartIndex = _ref.columnStartIndex;
+ var columnStopIndex = _ref.columnStopIndex;
+ var rowStartIndex = _ref.rowStartIndex;
+ var rowStopIndex = _ref.rowStopIndex;
+
+ this._columnStartIndex = columnStartIndex;
+ this._columnStopIndex = columnStopIndex;
+ this._rowStartIndex = rowStartIndex;
+ this._rowStopIndex = rowStopIndex;
+ }
+ }]);
+
+ return ArrowKeyStepper;
+}(_react.Component);
+
+ArrowKeyStepper.propTypes = {
+ children: _react.PropTypes.func.isRequired,
+ className: _react.PropTypes.string,
+ columnsCount: _react.PropTypes.number.isRequired,
+ rowsCount: _react.PropTypes.number.isRequired
+};
+exports.default = ArrowKeyStepper;
+},{"react":undefined,"react-addons-shallow-compare":27}],33:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.ArrowKeyStepper = exports.default = undefined;
+
+var _ArrowKeyStepper2 = require('./ArrowKeyStepper');
+
+var _ArrowKeyStepper3 = _interopRequireDefault(_ArrowKeyStepper2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _ArrowKeyStepper3.default;
+exports.ArrowKeyStepper = _ArrowKeyStepper3.default;
+},{"./ArrowKeyStepper":32}],34:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
+
+var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * Decorator component that automatically adjusts the width and height of a single child.
+ * Child component should not be declared as a child but should rather be specified by a `ChildComponent` property.
+ * All other properties will be passed through to the child component.
+ */
+
+var AutoSizer = function (_Component) {
+ _inherits(AutoSizer, _Component);
+
+ function AutoSizer(props) {
+ _classCallCheck(this, AutoSizer);
+
+ var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(AutoSizer).call(this, props));
+
+ _this.state = {
+ height: 0,
+ width: 0
+ };
+
+ _this._onResize = _this._onResize.bind(_this);
+ _this._onScroll = _this._onScroll.bind(_this);
+ _this._setRef = _this._setRef.bind(_this);
+ return _this;
+ }
+
+ _createClass(AutoSizer, [{
+ key: 'componentDidMount',
+ value: function componentDidMount() {
+ // Defer requiring resize handler in order to support server-side rendering.
+ // See issue #41
+ this._detectElementResize = require('../vendor/detectElementResize');
+ this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
+
+ this._onResize();
+ }
+ }, {
+ key: 'componentWillUnmount',
+ value: function componentWillUnmount() {
+ if (this._detectElementResize) {
+ this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
+ }
+ }
+ }, {
+ key: 'render',
+ value: function render() {
+ var _props = this.props;
+ var children = _props.children;
+ var disableHeight = _props.disableHeight;
+ var disableWidth = _props.disableWidth;
+ var _state = this.state;
+ var height = _state.height;
+ var width = _state.width;
+
+ // Outer div should not force width/height since that may prevent containers from shrinking.
+ // Inner component should overflow and use calculated width/height.
+ // See issue #68 for more information.
+
+ var outerStyle = { overflow: 'visible' };
+
+ if (!disableHeight) {
+ outerStyle.height = 0;
+ }
+
+ if (!disableWidth) {
+ outerStyle.width = 0;
+ }
+
+ return _react2.default.createElement(
+ 'div',
+ {
+ ref: this._setRef,
+ onScroll: this._onScroll,
+ style: outerStyle
+ },
+ children({ height: height, width: width })
+ );
+ }
+ }, {
+ key: 'shouldComponentUpdate',
+ value: function shouldComponentUpdate(nextProps, nextState) {
+ return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
+ }
+ }, {
+ key: '_onResize',
+ value: function _onResize() {
+ var onResize = this.props.onResize;
+
+ var _parentNode$getBoundi = this._parentNode.getBoundingClientRect();
+
+ var height = _parentNode$getBoundi.height;
+ var width = _parentNode$getBoundi.width;
+
+
+ var style = getComputedStyle(this._parentNode);
+ var paddingLeft = parseInt(style.paddingLeft, 10);
+ var paddingRight = parseInt(style.paddingRight, 10);
+ var paddingTop = parseInt(style.paddingTop, 10);
+ var paddingBottom = parseInt(style.paddingBottom, 10);
+
+ this.setState({
+ height: height - paddingTop - paddingBottom,
+ width: width - paddingLeft - paddingRight
+ });
+
+ onResize({ height: height, width: width });
+ }
+ }, {
+ key: '_onScroll',
+ value: function _onScroll(event) {
+ // Prevent detectElementResize library from being triggered by this scroll event.
+ event.stopPropagation();
+ }
+ }, {
+ key: '_setRef',
+ value: function _setRef(autoSizer) {
+ // In case the component has been unmounted
+ this._parentNode = autoSizer && autoSizer.parentNode;
+ }
+ }]);
+
+ return AutoSizer;
+}(_react.Component);
+
+AutoSizer.propTypes = {
+ /**
+ * Function respondible for rendering children.
+ * This function should implement the following signature:
+ * ({ height, width }) => PropTypes.element
+ */
+ children: _react.PropTypes.func.isRequired,
+
+ /** Disable dynamic :height property */
+ disableHeight: _react.PropTypes.bool,
+
+ /** Disable dynamic :width property */
+ disableWidth: _react.PropTypes.bool,
+
+ /** Callback to be invoked on-resize: ({ height, width }) */
+ onResize: _react.PropTypes.func.isRequired
+};
+AutoSizer.defaultProps = {
+ onResize: function onResize() {}
+};
+exports.default = AutoSizer;
+},{"../vendor/detectElementResize":66,"react":undefined,"react-addons-shallow-compare":27}],35:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.AutoSizer = exports.default = undefined;
+
+var _AutoSizer2 = require('./AutoSizer');
+
+var _AutoSizer3 = _interopRequireDefault(_AutoSizer2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _AutoSizer3.default;
+exports.AutoSizer = _AutoSizer3.default;
+},{"./AutoSizer":34}],36:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _CollectionView = require('./CollectionView');
+
+var _CollectionView2 = _interopRequireDefault(_CollectionView);
+
+var _calculateSizeAndPositionData2 = require('./utils/calculateSizeAndPositionData');
+
+var _calculateSizeAndPositionData3 = _interopRequireDefault(_calculateSizeAndPositionData2);
+
+var _getUpdatedOffsetForIndex = require('../utils/getUpdatedOffsetForIndex');
+
+var _getUpdatedOffsetForIndex2 = _interopRequireDefault(_getUpdatedOffsetForIndex);
+
+var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
+
+var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * Renders scattered or non-linear data.
+ * Unlike Grid, which renders checkerboard data, Collection can render arbitrarily positioned- even overlapping- data.
+ */
+
+var Collection = function (_Component) {
+ _inherits(Collection, _Component);
+
+ function Collection(props, context) {
+ _classCallCheck(this, Collection);
+
+ var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Collection).call(this, props, context));
+
+ _this._cellMetadata = [];
+ _this._lastRenderedCellIndices = [];
+ return _this;
+ }
+
+ /** React lifecycle methods */
+
+ _createClass(Collection, [{
+ key: 'render',
+ value: function render() {
+ var props = _objectWithoutProperties(this.props, []);
+
+ return _react2.default.createElement(_CollectionView2.default, _extends({
+ cellLayoutManager: this,
+ ref: 'CollectionView'
+ }, props));
+ }
+ }, {
+ key: 'shouldComponentUpdate',
+ value: function shouldComponentUpdate(nextProps, nextState) {
+ return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
+ }
+
+ /** CellLayoutManager interface */
+
+ }, {
+ key: 'calculateSizeAndPositionData',
+ value: function calculateSizeAndPositionData() {
+ var _props = this.props;
+ var cellCount = _props.cellCount;
+ var cellSizeAndPositionGetter = _props.cellSizeAndPositionGetter;
+ var sectionSize = _props.sectionSize;
+
+
+ var data = (0, _calculateSizeAndPositionData3.default)({
+ cellCount: cellCount,
+ cellSizeAndPositionGetter: cellSizeAndPositionGetter,
+ sectionSize: sectionSize
+ });
+
+ this._cellMetadata = data.cellMetadata;
+ this._sectionManager = data.sectionManager;
+ this._height = data.height;
+ this._width = data.width;
+ }
+
+ /**
+ * Returns the most recently rendered set of cell indices.
+ */
+
+ }, {
+ key: 'getLastRenderedIndices',
+ value: function getLastRenderedIndices() {
+ return this._lastRenderedCellIndices;
+ }
+
+ /**
+ * Calculates the minimum amount of change from the current scroll position to ensure the specified cell is (fully) visible.
+ */
+
+ }, {
+ key: 'getScrollPositionForCell',
+ value: function getScrollPositionForCell(_ref) {
+ var cellIndex = _ref.cellIndex;
+ var height = _ref.height;
+ var scrollLeft = _ref.scrollLeft;
+ var scrollTop = _ref.scrollTop;
+ var width = _ref.width;
+ var cellCount = this.props.cellCount;
+
+
+ if (cellIndex >= 0 && cellIndex < cellCount) {
+ var cellMetadata = this._cellMetadata[cellIndex];
+
+ scrollLeft = (0, _getUpdatedOffsetForIndex2.default)({
+ cellOffset: cellMetadata.x,
+ cellSize: cellMetadata.width,
+ containerSize: width,
+ currentOffset: scrollLeft,
+ targetIndex: cellIndex
+ });
+
+ scrollTop = (0, _getUpdatedOffsetForIndex2.default)({
+ cellOffset: cellMetadata.y,
+ cellSize: cellMetadata.height,
+ containerSize: height,
+ currentOffset: scrollTop,
+ targetIndex: cellIndex
+ });
+ }
+
+ return {
+ scrollLeft: scrollLeft,
+ scrollTop: scrollTop
+ };
+ }
+ }, {
+ key: 'getTotalSize',
+ value: function getTotalSize() {
+ return {
+ height: this._height,
+ width: this._width
+ };
+ }
+ }, {
+ key: 'renderCells',
+ value: function renderCells(_ref2) {
+ var _this2 = this;
+
+ var height = _ref2.height;
+ var isScrolling = _ref2.isScrolling;
+ var width = _ref2.width;
+ var x = _ref2.x;
+ var y = _ref2.y;
+ var _props2 = this.props;
+ var cellGroupRenderer = _props2.cellGroupRenderer;
+ var cellRenderer = _props2.cellRenderer;
+
+ // Store for later calls to getLastRenderedIndices()
+
+ this._lastRenderedCellIndices = this._sectionManager.getCellIndices({
+ height: height,
+ width: width,
+ x: x,
+ y: y
+ });
+
+ return cellGroupRenderer({
+ cellRenderer: cellRenderer,
+ cellSizeAndPositionGetter: function cellSizeAndPositionGetter(index) {
+ return _this2._sectionManager.getCellMetadata(index);
+ },
+ indices: this._lastRenderedCellIndices
+ });
+ }
+ }]);
+
+ return Collection;
+}(_react.Component);
+
+Collection.propTypes = {
+ 'aria-label': _react.PropTypes.string,
+
+ /**
+ * Number of cells in Collection.
+ */
+ cellCount: _react.PropTypes.number.isRequired,
+
+ /**
+ * Responsible for rendering a group of cells given their indices.
+ * Should implement the following interface: ({
+ * cellSizeAndPositionGetter:Function,
+ * indices: Array,
+ * cellRenderer: Function
+ * }): Array
+ */
+ cellGroupRenderer: _react.PropTypes.func.isRequired,
+
+ /**
+ * Responsible for rendering a cell given an row and column index.
+ * Should implement the following interface: (index: number): PropTypes.node
+ */
+ cellRenderer: _react.PropTypes.func.isRequired,
+
+ /**
+ * Callback responsible for returning size and offset/position information for a given cell (index).
+ * (index): { height: number, width: number, x: number, y: number }
+ */
+ cellSizeAndPositionGetter: _react.PropTypes.func.isRequired,
+
+ /**
+ * Optionally override the size of the sections a Collection's cells are split into.
+ */
+ sectionSize: _react.PropTypes.number
+};
+Collection.defaultProps = {
+ 'aria-label': 'grid',
+ cellGroupRenderer: defaultCellGroupRenderer
+};
+exports.default = Collection;
+
+
+function defaultCellGroupRenderer(_ref3) {
+ var cellRenderer = _ref3.cellRenderer;
+ var cellSizeAndPositionGetter = _ref3.cellSizeAndPositionGetter;
+ var indices = _ref3.indices;
+
+ return indices.map(function (index) {
+ var cellMetadata = cellSizeAndPositionGetter(index);
+ var renderedCell = cellRenderer(index);
+
+ if (renderedCell == null || renderedCell === false) {
+ return null;
+ }
+
+ return _react2.default.createElement(
+ 'div',
+ {
+ className: 'Collection__cell',
+ key: index,
+ style: {
+ height: cellMetadata.height,
+ left: cellMetadata.x,
+ top: cellMetadata.y,
+ width: cellMetadata.width
+ }
+ },
+ renderedCell
+ );
+ }).filter(function (renderedCell) {
+ return !!renderedCell;
+ });
+}
+},{"../utils/getUpdatedOffsetForIndex":64,"./CollectionView":37,"./utils/calculateSizeAndPositionData":41,"react":undefined,"react-addons-shallow-compare":27}],37:[function(require,module,exports){
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _createCallbackMemoizer = require('../utils/createCallbackMemoizer');
+
+var _createCallbackMemoizer2 = _interopRequireDefault(_createCallbackMemoizer);
+
+var _scrollbarSize = require('dom-helpers/util/scrollbarSize');
+
+var _scrollbarSize2 = _interopRequireDefault(_scrollbarSize);
+
+var _raf = require('raf');
+
+var _raf2 = _interopRequireDefault(_raf);
+
+var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
+
+var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+// @TODO It would be nice to refactor Grid to use this code as well.
+
+/**
+ * Specifies the number of miliseconds during which to disable pointer events while a scroll is in progress.
+ * This improves performance and makes scrolling smoother.
+ */
+var IS_SCROLLING_TIMEOUT = 150;
+
+/**
+ * Controls whether the Grid updates the DOM element's scrollLeft/scrollTop based on the current state or just observes it.
+ * This prevents Grid from interrupting mouse-wheel animations (see issue #2).
+ */
+var SCROLL_POSITION_CHANGE_REASONS = {
+ OBSERVED: 'observed',
+ REQUESTED: 'requested'
+};
+
+/**
+ * Monitors changes in properties (eg. cellCount) and state (eg. scroll offsets) to determine when rendering needs to occur.
+ * This component does not render any visible content itself; it defers to the specified :cellLayoutManager.
+ */
+
+var CollectionView = function (_Component) {
+ _inherits(CollectionView, _Component);
+
+ function CollectionView(props, context) {
+ _classCallCheck(this, CollectionView);
+
+ var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(CollectionView).call(this, props, context));
+
+ _this.state = {
+ calculateSizeAndPositionDataOnNextUpdate: false,
+ isScrolling: false,
+ scrollLeft: 0,
+ scrollTop: 0
+ };
+
+ // Invokes callbacks only when their values have changed.
+ _this._onSectionRenderedMemoizer = (0, _createCallbackMemoizer2.default)();
+ _this._onScrollMemoizer = (0, _createCallbackMemoizer2.default)(false);
+
+ // Bind functions to instance so they don't lose context when passed around.
+ _this._invokeOnSectionRenderedHelper = _this._invokeOnSectionRenderedHelper.bind(_this);
+ _this._onScroll = _this._onScroll.bind(_this);
+ _this._updateScrollPositionForScrollToCell = _this._updateScrollPositionForScrollToCell.bind(_this);
+ return _this;
+ }
+
+ /**
+ * Forced recompute of cell sizes and positions.
+ * This function should be called if cell sizes have changed but nothing else has.
+ * Since cell positions are calculated by callbacks, the collection view has no way of detecting when the underlying data has changed.
+ */
+
+
+ _createClass(CollectionView, [{
+ key: 'recomputeCellSizesAndPositions',
+ value: function recomputeCellSizesAndPositions() {
+ this.setState({
+ calculateSizeAndPositionDataOnNextUpdate: true
+ });
+ }
+
+ /* ---------------------------- Component lifecycle methods ---------------------------- */
+
+ }, {
+ key: 'componentDidMount',
+ value: function componentDidMount() {
+ var _props = this.props;
+ var cellLayoutManager = _props.cellLayoutManager;
+ var scrollLeft = _props.scrollLeft;
+ var scrollToCell = _props.scrollToCell;
+ var scrollTop = _props.scrollTop;
+
+
+ this._scrollbarSize = (0, _scrollbarSize2.default)();
+
+ // Update onSectionRendered callback.
+ this._invokeOnSectionRenderedHelper();
+
+ var _cellLayoutManager$ge = cellLayoutManager.getTotalSize();
+
+ var totalHeight = _cellLayoutManager$ge.height;
+ var totalWidth = _cellLayoutManager$ge.width;
+
+
+ if (scrollToCell >= 0) {
+ this._updateScrollPositionForScrollToCell();
+ }
+
+ // Initialize onScroll callback.
+ this._invokeOnScrollMemoizer({
+ scrollLeft: scrollLeft || 0,
+ scrollTop: scrollTop || 0,
+ totalHeight: totalHeight,
+ totalWidth: totalWidth
+ });
+ }
+ }, {
+ key: 'componentDidUpdate',
+ value: function componentDidUpdate(prevProps, prevState) {
+ var _props2 = this.props;
+ var height = _props2.height;
+ var scrollToCell = _props2.scrollToCell;
+ var width = _props2.width;
+ var _state = this.state;
+ var scrollLeft = _state.scrollLeft;
+ var scrollPositionChangeReason = _state.scrollPositionChangeReason;
+ var scrollTop = _state.scrollTop;
+
+ // Make sure requested changes to :scrollLeft or :scrollTop get applied.
+ // Assigning to scrollLeft/scrollTop tells the browser to interrupt any running scroll animations,
+ // And to discard any pending async changes to the scroll position that may have happened in the meantime (e.g. on a separate scrolling thread).
+ // So we only set these when we require an adjustment of the scroll position.
+ // See issue #2 for more information.
+
+ if (scrollPositionChangeReason === SCROLL_POSITION_CHANGE_REASONS.REQUESTED) {
+ if (scrollLeft >= 0 && scrollLeft !== prevState.scrollLeft && scrollLeft !== this.refs.scrollingContainer.scrollLeft) {
+ this.refs.scrollingContainer.scrollLeft = scrollLeft;
+ }
+ if (scrollTop >= 0 && scrollTop !== prevState.scrollTop && scrollTop !== this.refs.scrollingContainer.scrollTop) {
+ this.refs.scrollingContainer.scrollTop = scrollTop;
+ }
+ }
+
+ // Update scroll offsets if the current :scrollToCell values requires it
+ if (height !== prevProps.height || scrollToCell !== prevProps.scrollToCell || width !== prevProps.width) {
+ this._updateScrollPositionForScrollToCell();
+ }
+
+ // Update onRowsRendered callback if start/stop indices have changed
+ this._invokeOnSectionRenderedHelper();
+ }
+ }, {
+ key: 'componentWillMount',
+ value: function componentWillMount() {
+ var _props3 = this.props;
+ var cellLayoutManager = _props3.cellLayoutManager;
+ var scrollLeft = _props3.scrollLeft;
+ var scrollTop = _props3.scrollTop;
+
+
+ cellLayoutManager.calculateSizeAndPositionData();
+
+ if (scrollLeft >= 0 || scrollTop >= 0) {
+ this._setScrollPosition({ scrollLeft: scrollLeft, scrollTop: scrollTop });
+ }
+ }
+ }, {
+ key: 'componentWillUnmount',
+ value: function componentWillUnmount() {
+ if (this._disablePointerEventsTimeoutId) {
+ clearTimeout(this._disablePointerEventsTimeoutId);
+ }
- // Swap big-endian to little-endian and vice versa
- endian: function(n) {
- // If number given, swap endian
- if (n.constructor == Number) {
- return crypt.rotl(n, 8) & 0x00FF00FF | crypt.rotl(n, 24) & 0xFF00FF00;
+ if (this._setNextStateAnimationFrameId) {
+ _raf2.default.cancel(this._setNextStateAnimationFrameId);
+ }
+ }
+
+ /**
+ * @private
+ * This method updates scrollLeft/scrollTop in state for the following conditions:
+ * 1) Empty content (0 rows or columns)
+ * 2) New scroll props overriding the current state
+ * 3) Cells-count or cells-size has changed, making previous scroll offsets invalid
+ */
+
+ }, {
+ key: 'componentWillUpdate',
+ value: function componentWillUpdate(nextProps, nextState) {
+ if (nextProps.cellCount === 0 && (nextState.scrollLeft !== 0 || nextState.scrollTop !== 0)) {
+ this._setScrollPosition({
+ scrollLeft: 0,
+ scrollTop: 0
+ });
+ } else if (nextProps.scrollLeft !== this.props.scrollLeft || nextProps.scrollTop !== this.props.scrollTop) {
+ this._setScrollPosition({
+ scrollLeft: nextProps.scrollLeft,
+ scrollTop: nextProps.scrollTop
+ });
+ }
+
+ if (nextProps.cellCount !== this.props.cellCount || nextProps.cellLayoutManager !== this.props.cellLayoutManager || nextState.calculateSizeAndPositionDataOnNextUpdate) {
+ nextProps.cellLayoutManager.calculateSizeAndPositionData();
+ }
+
+ if (nextState.calculateSizeAndPositionDataOnNextUpdate) {
+ this.setState({
+ calculateSizeAndPositionDataOnNextUpdate: false
+ });
+ }
+ }
+ }, {
+ key: 'render',
+ value: function render() {
+ var _props4 = this.props;
+ var cellLayoutManager = _props4.cellLayoutManager;
+ var className = _props4.className;
+ var height = _props4.height;
+ var noContentRenderer = _props4.noContentRenderer;
+ var width = _props4.width;
+ var _state2 = this.state;
+ var isScrolling = _state2.isScrolling;
+ var scrollLeft = _state2.scrollLeft;
+ var scrollTop = _state2.scrollTop;
+
+
+ var childrenToDisplay = height > 0 && width > 0 ? cellLayoutManager.renderCells({
+ height: height,
+ isScrolling: isScrolling,
+ width: width,
+ x: scrollLeft,
+ y: scrollTop
+ }) : [];
+
+ var _cellLayoutManager$ge2 = cellLayoutManager.getTotalSize();
+
+ var totalHeight = _cellLayoutManager$ge2.height;
+ var totalWidth = _cellLayoutManager$ge2.width;
+
+
+ var gridStyle = {
+ height: height,
+ width: width
+ };
+
+ // Force browser to hide scrollbars when we know they aren't necessary.
+ // Otherwise once scrollbars appear they may not disappear again.
+ // For more info see issue #116
+ if (totalHeight <= height) {
+ gridStyle.overflowY = 'hidden';
+ }
+ if (totalWidth <= width) {
+ gridStyle.overflowX = 'hidden';
+ }
+
+ return _react2.default.createElement(
+ 'div',
+ {
+ ref: 'scrollingContainer',
+ 'aria-label': this.props['aria-label'],
+ className: (0, _classnames2.default)('Collection', className),
+ onScroll: this._onScroll,
+ role: 'grid',
+ style: gridStyle,
+ tabIndex: 0
+ },
+ childrenToDisplay.length > 0 && _react2.default.createElement(
+ 'div',
+ {
+ className: 'Collection__innerScrollContainer',
+ style: {
+ height: totalHeight,
+ maxHeight: totalHeight,
+ maxWidth: totalWidth,
+ pointerEvents: isScrolling ? 'none' : 'auto',
+ width: totalWidth
+ }
+ },
+ childrenToDisplay
+ ),
+ childrenToDisplay.length === 0 && noContentRenderer()
+ );
+ }
+ }, {
+ key: 'shouldComponentUpdate',
+ value: function shouldComponentUpdate(nextProps, nextState) {
+ return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
+ }
+
+ /* ---------------------------- Helper methods ---------------------------- */
+
+ /**
+ * Sets an :isScrolling flag for a small window of time.
+ * This flag is used to disable pointer events on the scrollable portion of the Collection.
+ * This prevents jerky/stuttery mouse-wheel scrolling.
+ */
+
+ }, {
+ key: '_enablePointerEventsAfterDelay',
+ value: function _enablePointerEventsAfterDelay() {
+ var _this2 = this;
+
+ if (this._disablePointerEventsTimeoutId) {
+ clearTimeout(this._disablePointerEventsTimeoutId);
+ }
+
+ this._disablePointerEventsTimeoutId = setTimeout(function () {
+ _this2._disablePointerEventsTimeoutId = null;
+ _this2.setState({
+ isScrolling: false
+ });
+ }, IS_SCROLLING_TIMEOUT);
+ }
+ }, {
+ key: '_invokeOnSectionRenderedHelper',
+ value: function _invokeOnSectionRenderedHelper() {
+ var _props5 = this.props;
+ var cellLayoutManager = _props5.cellLayoutManager;
+ var onSectionRendered = _props5.onSectionRendered;
+
+
+ this._onSectionRenderedMemoizer({
+ callback: onSectionRendered,
+ indices: cellLayoutManager.getLastRenderedIndices()
+ });
+ }
+ }, {
+ key: '_invokeOnScrollMemoizer',
+ value: function _invokeOnScrollMemoizer(_ref) {
+ var _this3 = this;
+
+ var scrollLeft = _ref.scrollLeft;
+ var scrollTop = _ref.scrollTop;
+ var totalHeight = _ref.totalHeight;
+ var totalWidth = _ref.totalWidth;
+
+ this._onScrollMemoizer({
+ callback: function callback(_ref2) {
+ var scrollLeft = _ref2.scrollLeft;
+ var scrollTop = _ref2.scrollTop;
+ var _props6 = _this3.props;
+ var height = _props6.height;
+ var onScroll = _props6.onScroll;
+ var width = _props6.width;
+
+
+ onScroll({
+ clientHeight: height,
+ clientWidth: width,
+ scrollHeight: totalHeight,
+ scrollLeft: scrollLeft,
+ scrollTop: scrollTop,
+ scrollWidth: totalWidth
+ });
+ },
+ indices: {
+ scrollLeft: scrollLeft,
+ scrollTop: scrollTop
+ }
+ });
+ }
+
+ /**
+ * Updates the state during the next animation frame.
+ * Use this method to avoid multiple renders in a small span of time.
+ * This helps performance for bursty events (like onScroll).
+ */
+
+ }, {
+ key: '_setNextState',
+ value: function _setNextState(state) {
+ var _this4 = this;
+
+ if (this._setNextStateAnimationFrameId) {
+ _raf2.default.cancel(this._setNextStateAnimationFrameId);
+ }
+
+ this._setNextStateAnimationFrameId = (0, _raf2.default)(function () {
+ _this4._setNextStateAnimationFrameId = null;
+ _this4.setState(state);
+ });
+ }
+ }, {
+ key: '_setScrollPosition',
+ value: function _setScrollPosition(_ref3) {
+ var scrollLeft = _ref3.scrollLeft;
+ var scrollTop = _ref3.scrollTop;
+
+ var newState = {
+ scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.REQUESTED
+ };
+
+ if (scrollLeft >= 0) {
+ newState.scrollLeft = scrollLeft;
+ }
+
+ if (scrollTop >= 0) {
+ newState.scrollTop = scrollTop;
+ }
+
+ if (scrollLeft >= 0 && scrollLeft !== this.state.scrollLeft || scrollTop >= 0 && scrollTop !== this.state.scrollTop) {
+ this.setState(newState);
+ }
+ }
+ }, {
+ key: '_updateScrollPositionForScrollToCell',
+ value: function _updateScrollPositionForScrollToCell() {
+ var _props7 = this.props;
+ var cellLayoutManager = _props7.cellLayoutManager;
+ var height = _props7.height;
+ var scrollToCell = _props7.scrollToCell;
+ var width = _props7.width;
+ var _state3 = this.state;
+ var scrollLeft = _state3.scrollLeft;
+ var scrollTop = _state3.scrollTop;
+
+
+ if (scrollToCell >= 0) {
+ var scrollPosition = cellLayoutManager.getScrollPositionForCell({
+ cellIndex: scrollToCell,
+ height: height,
+ scrollLeft: scrollLeft,
+ scrollTop: scrollTop,
+ width: width
+ });
+
+ if (scrollPosition.scrollLeft !== scrollLeft || scrollPosition.scrollTop !== scrollTop) {
+ this._setScrollPosition(scrollPosition);
+ }
+ }
+ }
+ }, {
+ key: '_onScroll',
+ value: function _onScroll(event) {
+ // In certain edge-cases React dispatches an onScroll event with an invalid target.scrollLeft / target.scrollTop.
+ // This invalid event can be detected by comparing event.target to this component's scrollable DOM element.
+ // See issue #404 for more information.
+ if (event.target !== this.refs.scrollingContainer) {
+ return;
+ }
+
+ // Prevent pointer events from interrupting a smooth scroll
+ this._enablePointerEventsAfterDelay();
+
+ // When this component is shrunk drastically, React dispatches a series of back-to-back scroll events,
+ // Gradually converging on a scrollTop that is within the bounds of the new, smaller height.
+ // This causes a series of rapid renders that is slow for long lists.
+ // We can avoid that by doing some simple bounds checking to ensure that scrollTop never exceeds the total height.
+ var _props8 = this.props;
+ var cellLayoutManager = _props8.cellLayoutManager;
+ var height = _props8.height;
+ var width = _props8.width;
+
+ var scrollbarSize = this._scrollbarSize;
+
+ var _cellLayoutManager$ge3 = cellLayoutManager.getTotalSize();
+
+ var totalHeight = _cellLayoutManager$ge3.height;
+ var totalWidth = _cellLayoutManager$ge3.width;
+
+ var scrollLeft = Math.min(totalWidth - width + scrollbarSize, event.target.scrollLeft);
+ var scrollTop = Math.min(totalHeight - height + scrollbarSize, event.target.scrollTop);
+
+ // Certain devices (like Apple touchpad) rapid-fire duplicate events.
+ // Don't force a re-render if this is the case.
+ // The mouse may move faster then the animation frame does.
+ // Use requestAnimationFrame to avoid over-updating.
+ if (this.state.scrollLeft !== scrollLeft || this.state.scrollTop !== scrollTop) {
+ // Browsers with cancelable scroll events (eg. Firefox) interrupt scrolling animations if scrollTop/scrollLeft is set.
+ // Other browsers (eg. Safari) don't scroll as well without the help under certain conditions (DOM or style changes during scrolling).
+ // All things considered, this seems to be the best current work around that I'm aware of.
+ // For more information see https://github.com/bvaughn/react-virtualized/pull/124
+ var scrollPositionChangeReason = event.cancelable ? SCROLL_POSITION_CHANGE_REASONS.OBSERVED : SCROLL_POSITION_CHANGE_REASONS.REQUESTED;
+
+ // Synchronously set :isScrolling the first time (since _setNextState will reschedule its animation frame each time it's called)
+ if (!this.state.isScrolling) {
+ this.setState({
+ isScrolling: true
+ });
+ }
+
+ this._setNextState({
+ isScrolling: true,
+ scrollLeft: scrollLeft,
+ scrollPositionChangeReason: scrollPositionChangeReason,
+ scrollTop: scrollTop
+ });
}
- // Else, assume array and swap all items
- for (var i = 0; i < n.length; i++)
- n[i] = crypt.endian(n[i]);
- return n;
- },
+ this._invokeOnScrollMemoizer({
+ scrollLeft: scrollLeft,
+ scrollTop: scrollTop,
+ totalWidth: totalWidth,
+ totalHeight: totalHeight
+ });
+ }
+ }]);
+
+ return CollectionView;
+}(_react.Component);
- // Generate an array of any length of random bytes
- randomBytes: function(n) {
- for (var bytes = []; n > 0; n--)
- bytes.push(Math.floor(Math.random() * 256));
- return bytes;
- },
+CollectionView.propTypes = {
+ 'aria-label': _react.PropTypes.string,
- // Convert a byte array to big-endian 32-bit words
- bytesToWords: function(bytes) {
- for (var words = [], i = 0, b = 0; i < bytes.length; i++, b += 8)
- words[b >>> 5] |= bytes[i] << (24 - b % 32);
- return words;
- },
+ /**
+ * Number of cells in collection.
+ */
+ cellCount: _react.PropTypes.number.isRequired,
- // Convert big-endian 32-bit words to a byte array
- wordsToBytes: function(words) {
- for (var bytes = [], b = 0; b < words.length * 32; b += 8)
- bytes.push((words[b >>> 5] >>> (24 - b % 32)) & 0xFF);
- return bytes;
- },
+ /**
+ * Calculates cell sizes and positions and manages rendering the appropriate cells given a specified window.
+ */
+ cellLayoutManager: _react.PropTypes.object.isRequired,
- // Convert a byte array to a hex string
- bytesToHex: function(bytes) {
- for (var hex = [], i = 0; i < bytes.length; i++) {
- hex.push((bytes[i] >>> 4).toString(16));
- hex.push((bytes[i] & 0xF).toString(16));
- }
- return hex.join('');
- },
+ /**
+ * Optional custom CSS class name to attach to root Collection element.
+ */
+ className: _react.PropTypes.string,
- // Convert a hex string to a byte array
- hexToBytes: function(hex) {
- for (var bytes = [], c = 0; c < hex.length; c += 2)
- bytes.push(parseInt(hex.substr(c, 2), 16));
- return bytes;
- },
+ /**
+ * Height of Collection; this property determines the number of visible (vs virtualized) rows.
+ */
+ height: _react.PropTypes.number.isRequired,
- // Convert a byte array to a base-64 string
- bytesToBase64: function(bytes) {
- for (var base64 = [], i = 0; i < bytes.length; i += 3) {
- var triplet = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
- for (var j = 0; j < 4; j++)
- if (i * 8 + j * 6 <= bytes.length * 8)
- base64.push(base64map.charAt((triplet >>> 6 * (3 - j)) & 0x3F));
- else
- base64.push('=');
- }
- return base64.join('');
- },
+ /**
+ * Optional renderer to be used in place of rows when either :rowsCount or :cellCount is 0.
+ */
+ noContentRenderer: _react.PropTypes.func.isRequired,
- // Convert a base-64 string to a byte array
- base64ToBytes: function(base64) {
- // Remove non-base-64 characters
- base64 = base64.replace(/[^A-Z0-9+\/]/ig, '');
+ /**
+ * Callback invoked whenever the scroll offset changes within the inner scrollable region.
+ * This callback can be used to sync scrolling between lists, tables, or grids.
+ * ({ clientHeight, clientWidth, scrollHeight, scrollLeft, scrollTop, scrollWidth }): void
+ */
+ onScroll: _react.PropTypes.func.isRequired,
- for (var bytes = [], i = 0, imod4 = 0; i < base64.length;
- imod4 = ++i % 4) {
- if (imod4 == 0) continue;
- bytes.push(((base64map.indexOf(base64.charAt(i - 1))
- & (Math.pow(2, -2 * imod4 + 8) - 1)) << (imod4 * 2))
- | (base64map.indexOf(base64.charAt(i)) >>> (6 - imod4 * 2)));
- }
- return bytes;
- }
- };
+ /**
+ * Callback invoked with information about the section of the Collection that was just rendered.
+ * This callback is passed an array of the most recently rendered section indices.
+ */
+ onSectionRendered: _react.PropTypes.func.isRequired,
- module.exports = crypt;
-})();
+ /**
+ * Horizontal offset.
+ */
+ scrollLeft: _react.PropTypes.number,
-},{}],22:[function(require,module,exports){
-/**
- * Determine if an object is Buffer
- *
- * Author: Feross Aboukhadijeh
- * License: MIT
- *
- * `npm install is-buffer`
- */
+ /**
+ * Cell index to ensure visible (by forcefully scrolling if necessary).
+ */
+ scrollToCell: _react.PropTypes.number,
-module.exports = function (obj) {
- return !!(obj != null &&
- (obj._isBuffer || // For Safari 5-7 (missing Object.prototype.constructor)
- (obj.constructor &&
- typeof obj.constructor.isBuffer === 'function' &&
- obj.constructor.isBuffer(obj))
- ))
-}
+ /**
+ * Vertical offset.
+ */
+ scrollTop: _react.PropTypes.number,
-},{}],23:[function(require,module,exports){
+ /**
+ * Width of Collection; this property determines the number of visible (vs virtualized) columns.
+ */
+ width: _react.PropTypes.number.isRequired
+};
+CollectionView.defaultProps = {
+ 'aria-label': 'grid',
+ noContentRenderer: function noContentRenderer() {
+ return null;
+ },
+ onScroll: function onScroll() {
+ return null;
+ },
+ onSectionRendered: function onSectionRendered() {
+ return null;
+ }
+};
+exports.default = CollectionView;
+},{"../utils/createCallbackMemoizer":63,"classnames":undefined,"dom-helpers/util/scrollbarSize":16,"raf":26,"react":undefined,"react-addons-shallow-compare":27}],38:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
@@ -1603,340 +3106,287 @@ Object.defineProperty(exports, "__esModule", {
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
-
-var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
/**
- * This HOC decorates a virtualized component and responds to arrow-key events by scrolling one row or column at a time.
+ * A section of the Window.
+ * Window Sections are used to group nearby cells.
+ * This enables us to more quickly determine which cells to display in a given region of the Window.
+ * Sections have a fixed size and contain 0 to many cells (tracked by their indices).
*/
-var ArrowKeyStepper = function (_Component) {
- _inherits(ArrowKeyStepper, _Component);
-
- function ArrowKeyStepper(props, context) {
- _classCallCheck(this, ArrowKeyStepper);
-
- var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ArrowKeyStepper).call(this, props, context));
+var Section = function () {
+ function Section(_ref) {
+ var height = _ref.height;
+ var width = _ref.width;
+ var x = _ref.x;
+ var y = _ref.y;
- _this.state = {
- scrollToColumn: 0,
- scrollToRow: 0
- };
+ _classCallCheck(this, Section);
- _this._columnStartIndex = 0;
- _this._columnStopIndex = 0;
- _this._rowStartIndex = 0;
- _this._rowStopIndex = 0;
+ this.height = height;
+ this.width = width;
+ this.x = x;
+ this.y = y;
- _this._onKeyDown = _this._onKeyDown.bind(_this);
- _this._onSectionRendered = _this._onSectionRendered.bind(_this);
- return _this;
+ this._indexMap = {};
+ this._indices = [];
}
- _createClass(ArrowKeyStepper, [{
- key: 'render',
- value: function render() {
- var _props = this.props;
- var className = _props.className;
- var children = _props.children;
- var _state = this.state;
- var scrollToColumn = _state.scrollToColumn;
- var scrollToRow = _state.scrollToRow;
+ /** Add a cell to this section. */
- return _react2.default.createElement(
- 'div',
- {
- className: className,
- onKeyDown: this._onKeyDown
- },
- children({
- onSectionRendered: this._onSectionRendered,
- scrollToColumn: scrollToColumn,
- scrollToRow: scrollToRow
- })
- );
+ _createClass(Section, [{
+ key: 'addCellIndex',
+ value: function addCellIndex(index) {
+ if (!this._indexMap[index]) {
+ this._indexMap[index] = true;
+ this._indices.push(index);
+ }
}
+
+ /** Get all cell indices that have been added to this section. */
+
}, {
- key: 'shouldComponentUpdate',
- value: function shouldComponentUpdate(nextProps, nextState) {
- return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
+ key: 'getCellIndices',
+ value: function getCellIndices() {
+ return this._indices;
}
- }, {
- key: '_onKeyDown',
- value: function _onKeyDown(event) {
- var _props2 = this.props;
- var columnsCount = _props2.columnsCount;
- var rowsCount = _props2.rowsCount;
- // The above cases all prevent default event event behavior.
- // This is to keep the grid from scrolling after the snap-to update.
+ /** Intended for debugger/test purposes only */
- switch (event.key) {
- case 'ArrowDown':
- event.preventDefault();
- this.setState({
- scrollToRow: Math.min(this._rowStopIndex + 1, rowsCount - 1)
- });
- break;
- case 'ArrowLeft':
- event.preventDefault();
- this.setState({
- scrollToColumn: Math.max(this._columnStartIndex - 1, 0)
- });
- break;
- case 'ArrowRight':
- event.preventDefault();
- this.setState({
- scrollToColumn: Math.min(this._columnStopIndex + 1, columnsCount - 1)
- });
- break;
- case 'ArrowUp':
- event.preventDefault();
- this.setState({
- scrollToRow: Math.max(this._rowStartIndex - 1, 0)
- });
- break;
- }
- }
}, {
- key: '_onSectionRendered',
- value: function _onSectionRendered(_ref) {
- var columnStartIndex = _ref.columnStartIndex;
- var columnStopIndex = _ref.columnStopIndex;
- var rowStartIndex = _ref.rowStartIndex;
- var rowStopIndex = _ref.rowStopIndex;
-
- this._columnStartIndex = columnStartIndex;
- this._columnStopIndex = columnStopIndex;
- this._rowStartIndex = rowStartIndex;
- this._rowStopIndex = rowStopIndex;
+ key: 'toString',
+ value: function toString() {
+ return this.x + ',' + this.y + ' ' + this.width + 'x' + this.height;
}
}]);
- return ArrowKeyStepper;
-}(_react.Component);
-
-ArrowKeyStepper.propTypes = {
- children: _react.PropTypes.func.isRequired,
- className: _react.PropTypes.string,
- columnsCount: _react.PropTypes.number.isRequired,
- rowsCount: _react.PropTypes.number.isRequired
-};
-exports.default = ArrowKeyStepper;
-},{"react":undefined,"react-addons-shallow-compare":49}],24:[function(require,module,exports){
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
- value: true
-});
-exports.ArrowKeyStepper = exports.default = undefined;
-
-var _ArrowKeyStepper2 = require('./ArrowKeyStepper');
-
-var _ArrowKeyStepper3 = _interopRequireDefault(_ArrowKeyStepper2);
+ return Section;
+}(); /** @rlow */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-exports.default = _ArrowKeyStepper3.default;
-exports.ArrowKeyStepper = _ArrowKeyStepper3.default;
-},{"./ArrowKeyStepper":23}],25:[function(require,module,exports){
+exports.default = Section;
+},{}],39:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /**
+ * Window Sections are used to group nearby cells.
+ * This enables us to more quickly determine which cells to display in a given region of the Window.
+ *
+ */
-var _react2 = _interopRequireDefault(_react);
-var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
+var _Section = require('./Section');
-var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
+var _Section2 = _interopRequireDefault(_Section);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+var SECTION_SIZE = 100;
/**
- * Decorator component that automatically adjusts the width and height of a single child.
- * Child component should not be declared as a child but should rather be specified by a `ChildComponent` property.
- * All other properties will be passed through to the child component.
+ * Contains 0 to many Sections.
+ * Grows (and adds Sections) dynamically as cells are registered.
+ * Automatically adds cells to the appropriate Section(s).
*/
-var AutoSizer = function (_Component) {
- _inherits(AutoSizer, _Component);
-
- function AutoSizer(props) {
- _classCallCheck(this, AutoSizer);
+var SectionManager = function () {
+ function SectionManager() {
+ var sectionSize = arguments.length <= 0 || arguments[0] === undefined ? SECTION_SIZE : arguments[0];
- var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(AutoSizer).call(this, props));
+ _classCallCheck(this, SectionManager);
- _this.state = {
- height: 0,
- width: 0
- };
+ this._sectionSize = sectionSize;
- _this._onResize = _this._onResize.bind(_this);
- _this._onScroll = _this._onScroll.bind(_this);
- _this._setRef = _this._setRef.bind(_this);
- return _this;
+ this._cellMetadata = [];
+ this._sections = {};
}
- _createClass(AutoSizer, [{
- key: 'componentDidMount',
- value: function componentDidMount() {
- // Defer requiring resize handler in order to support server-side rendering.
- // See issue #41
- this._detectElementResize = require('../vendor/detectElementResize');
- this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
+ /**
+ * Gets all cell indices contained in the specified region.
+ * A region may encompass 1 or more Sections.
+ */
- this._onResize();
+
+ _createClass(SectionManager, [{
+ key: 'getCellIndices',
+ value: function getCellIndices(_ref) {
+ var height = _ref.height;
+ var width = _ref.width;
+ var x = _ref.x;
+ var y = _ref.y;
+
+ var indices = {};
+
+ this.getSections({ height: height, width: width, x: x, y: y }).forEach(function (section) {
+ return section.getCellIndices().forEach(function (index) {
+ return indices[index] = index;
+ });
+ });
+
+ // Object keys are strings; this function returns numbers
+ return Object.keys(indices).map(function (index) {
+ return indices[index];
+ });
}
+
+ /** Get size and position information for the cell specified. */
+
}, {
- key: 'componentWillUnmount',
- value: function componentWillUnmount() {
- this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
+ key: 'getCellMetadata',
+ value: function getCellMetadata(index) {
+ return this._cellMetadata[index];
}
- }, {
- key: 'render',
- value: function render() {
- var _props = this.props;
- var children = _props.children;
- var disableHeight = _props.disableHeight;
- var disableWidth = _props.disableWidth;
- var _state = this.state;
- var height = _state.height;
- var width = _state.width;
-
- // Outer div should not force width/height since that may prevent containers from shrinking.
- // Inner component should overflow and use calculated width/height.
- // See issue #68 for more information.
- var outerStyle = { overflow: 'visible' };
+ /** Get all Sections overlapping the specified region. */
- if (!disableHeight) {
- outerStyle.height = 0;
- }
+ }, {
+ key: 'getSections',
+ value: function getSections(_ref2) {
+ var height = _ref2.height;
+ var width = _ref2.width;
+ var x = _ref2.x;
+ var y = _ref2.y;
+
+ var sectionXStart = Math.floor(x / this._sectionSize);
+ var sectionXStop = Math.floor((x + width - 1) / this._sectionSize);
+ var sectionYStart = Math.floor(y / this._sectionSize);
+ var sectionYStop = Math.floor((y + height - 1) / this._sectionSize);
+
+ var sections = [];
+
+ for (var sectionX = sectionXStart; sectionX <= sectionXStop; sectionX++) {
+ for (var sectionY = sectionYStart; sectionY <= sectionYStop; sectionY++) {
+ var key = sectionX + '.' + sectionY;
+
+ if (!this._sections[key]) {
+ this._sections[key] = new _Section2.default({
+ height: this._sectionSize,
+ width: this._sectionSize,
+ x: sectionX * this._sectionSize,
+ y: sectionY * this._sectionSize
+ });
+ }
- if (!disableWidth) {
- outerStyle.width = 0;
+ sections.push(this._sections[key]);
+ }
}
- return _react2.default.createElement(
- 'div',
- {
- ref: this._setRef,
- onScroll: this._onScroll,
- style: outerStyle
- },
- children({ height: height, width: width })
- );
+ return sections;
}
+
+ /** Total number of Sections based on the currently registered cells. */
+
}, {
- key: 'shouldComponentUpdate',
- value: function shouldComponentUpdate(nextProps, nextState) {
- return (0, _reactAddonsShallowCompare2.default)(this, nextProps, nextState);
+ key: 'getTotalSectionCount',
+ value: function getTotalSectionCount() {
+ return Object.keys(this._sections).length;
}
+
+ /** Intended for debugger/test purposes only */
+
}, {
- key: '_onResize',
- value: function _onResize() {
- var onResize = this.props.onResize;
+ key: 'toString',
+ value: function toString() {
+ var _this = this;
- var _parentNode$getBoundi = this._parentNode.getBoundingClientRect();
+ return Object.keys(this._sections).map(function (index) {
+ return _this._sections[index].toString();
+ });
+ }
- var height = _parentNode$getBoundi.height;
- var width = _parentNode$getBoundi.width;
+ /** Adds a cell to the appropriate Sections and registers it metadata for later retrievable. */
+ }, {
+ key: 'registerCell',
+ value: function registerCell(_ref3) {
+ var cellMetadatum = _ref3.cellMetadatum;
+ var index = _ref3.index;
- var style = getComputedStyle(this._parentNode);
- var paddingLeft = parseInt(style.paddingLeft, 10);
- var paddingRight = parseInt(style.paddingRight, 10);
- var paddingTop = parseInt(style.paddingTop, 10);
- var paddingBottom = parseInt(style.paddingBottom, 10);
+ this._cellMetadata[index] = cellMetadatum;
- this.setState({
- height: height - paddingTop - paddingBottom,
- width: width - paddingLeft - paddingRight
+ this.getSections(cellMetadatum).forEach(function (section) {
+ return section.addCellIndex(index);
});
-
- onResize({ height: height, width: width });
- }
- }, {
- key: '_onScroll',
- value: function _onScroll(event) {
- // Prevent detectElementResize library from being triggered by this scroll event.
- event.stopPropagation();
- }
- }, {
- key: '_setRef',
- value: function _setRef(autoSizer) {
- // In case the component has been unmounted
- this._parentNode = autoSizer && autoSizer.parentNode;
}
}]);
- return AutoSizer;
-}(_react.Component);
+ return SectionManager;
+}();
-AutoSizer.propTypes = {
- /**
- * Function respondible for rendering children.
- * This function should implement the following signature:
- * ({ height, width }) => PropTypes.element
- */
- children: _react.PropTypes.func.isRequired,
+exports.default = SectionManager;
+},{"./Section":38}],40:[function(require,module,exports){
+'use strict';
- /** Disable dynamic :height property */
- disableHeight: _react.PropTypes.bool,
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.Collection = exports.default = undefined;
- /** Disable dynamic :width property */
- disableWidth: _react.PropTypes.bool,
+var _Collection2 = require('./Collection');
- /** Callback to be invoked on-resize: ({ height, width }) */
- onResize: _react.PropTypes.func.isRequired
-};
-AutoSizer.defaultProps = {
- onResize: function onResize() {}
-};
-exports.default = AutoSizer;
-},{"../vendor/detectElementResize":44,"react":undefined,"react-addons-shallow-compare":49}],26:[function(require,module,exports){
+var _Collection3 = _interopRequireDefault(_Collection2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Collection3.default;
+exports.Collection = _Collection3.default;
+},{"./Collection":36}],41:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
-exports.AutoSizer = exports.default = undefined;
+exports.default = calculateSizeAndPositionData;
-var _AutoSizer2 = require('./AutoSizer');
+var _SectionManager = require('../SectionManager');
-var _AutoSizer3 = _interopRequireDefault(_AutoSizer2);
+var _SectionManager2 = _interopRequireDefault(_SectionManager);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-exports.default = _AutoSizer3.default;
-exports.AutoSizer = _AutoSizer3.default;
-},{"./AutoSizer":25}],27:[function(require,module,exports){
+function calculateSizeAndPositionData(_ref) {
+ var cellCount = _ref.cellCount;
+ var cellSizeAndPositionGetter = _ref.cellSizeAndPositionGetter;
+ var sectionSize = _ref.sectionSize;
+
+ var cellMetadata = [];
+ var sectionManager = new _SectionManager2.default(sectionSize);
+ var height = 0;
+ var width = 0;
+
+ for (var index = 0; index < cellCount; index++) {
+ var cellMetadatum = cellSizeAndPositionGetter(index);
+
+ if (cellMetadatum.height == null || isNaN(cellMetadatum.height) || cellMetadatum.width == null || isNaN(cellMetadatum.width) || cellMetadatum.x == null || isNaN(cellMetadatum.x) || cellMetadatum.y == null || isNaN(cellMetadatum.y)) {
+ throw Error('Invalid metadata returned for cell ' + index + ':\n x:' + cellMetadatum.x + ', y:' + cellMetadatum.y + ', width:' + cellMetadatum.width + ', height:' + cellMetadatum.height);
+ }
+
+ height = Math.max(height, cellMetadatum.y + cellMetadatum.height);
+ width = Math.max(width, cellMetadatum.x + cellMetadatum.width);
+
+ cellMetadata[index] = cellMetadatum;
+ sectionManager.registerCell({
+ cellMetadatum: cellMetadatum,
+ index: index
+ });
+ }
+
+ return {
+ cellMetadata: cellMetadata,
+ height: height,
+ sectionManager: sectionManager,
+ width: width
+ };
+}
+},{"../SectionManager":39}],42:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
@@ -2073,7 +3523,7 @@ ColumnSizer.propTypes = {
width: _react.PropTypes.number.isRequired
};
exports.default = ColumnSizer;
-},{"../Grid":36,"react":undefined,"react-addons-shallow-compare":49}],28:[function(require,module,exports){
+},{"../Grid":50,"react":undefined,"react-addons-shallow-compare":27}],43:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
@@ -2089,7 +3539,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
exports.default = _ColumnSizer3.default;
exports.ColumnSizer = _ColumnSizer3.default;
-},{"./ColumnSizer":27}],29:[function(require,module,exports){
+},{"./ColumnSizer":42}],44:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
@@ -2196,6 +3646,9 @@ Column.defaultProps = {
headerRenderer: defaultHeaderRenderer
};
Column.propTypes = {
+ /** Optional aria-label value to set on the column header */
+ 'aria-label': _react.PropTypes.string,
+
/** Optional CSS class to apply to cell */
cellClassName: _react.PropTypes.string,
@@ -2248,13 +3701,15 @@ Column.propTypes = {
width: _react.PropTypes.number.isRequired
};
exports.default = Column;
-},{"./SortIndicator":32,"react":undefined}],30:[function(require,module,exports){
+},{"./SortIndicator":47,"react":undefined}],45:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _classnames = require('classnames');
@@ -2383,6 +3838,7 @@ var FlexTable = function (_Component) {
this._getRenderedHeaderRow()
),
_react2.default.createElement(_Grid2.default, {
+ 'aria-label': this.props['aria-label'],
ref: 'Grid',
className: 'FlexTable__Grid',
columnWidth: width,
@@ -2483,13 +3939,6 @@ var FlexTable = function (_Component) {
});
var style = this._getFlexStyleForColumn(column);
- // If this is a sortable header, clicking it should update the table data's sorting.
- var newSortDirection = sortBy !== dataKey || sortDirection === _SortDirection2.default.DESC ? _SortDirection2.default.ASC : _SortDirection2.default.DESC;
- var onClick = function onClick() {
- sortEnabled && sort(dataKey, newSortDirection);
- onHeaderClick(dataKey, columnData);
- };
-
var renderedHeader = headerRenderer({
columnData: columnData,
dataKey: dataKey,
@@ -2499,14 +3948,39 @@ var FlexTable = function (_Component) {
sortDirection: sortDirection
});
+ var a11yProps = {};
+
+ if (sortEnabled || onHeaderClick) {
+ (function () {
+ // If this is a sortable header, clicking it should update the table data's sorting.
+ var newSortDirection = sortBy !== dataKey || sortDirection === _SortDirection2.default.DESC ? _SortDirection2.default.ASC : _SortDirection2.default.DESC;
+
+ var onClick = function onClick() {
+ sortEnabled && sort(dataKey, newSortDirection);
+ onHeaderClick && onHeaderClick(dataKey, columnData);
+ };
+
+ var onKeyDown = function onKeyDown(event) {
+ if (event.key === 'Enter' || event.key === ' ') {
+ onClick();
+ }
+ };
+
+ a11yProps['aria-label'] = column.props['aria-label'] || label || dataKey;
+ a11yProps.role = 'rowheader';
+ a11yProps.tabIndex = 0;
+ a11yProps.onClick = onClick;
+ a11yProps.onKeyDown = onKeyDown;
+ })();
+ }
+
return _react2.default.createElement(
'div',
- {
+ _extends({}, a11yProps, {
key: 'Header-Col' + columnIndex,
className: classNames,
- style: style,
- onClick: onClick
- },
+ style: style
+ }),
renderedHeader
);
}
@@ -2526,23 +4000,31 @@ var FlexTable = function (_Component) {
var rowClass = rowClassName instanceof Function ? rowClassName(rowIndex) : rowClassName;
var rowData = rowGetter(rowIndex);
- var renderedRow = _react2.default.Children.map(children, function (column, columnIndex) {
+ var renderedRow = _react2.default.Children.toArray(children).map(function (column, columnIndex) {
return _this3._createColumn(column, columnIndex, rowData, rowIndex);
});
+ var a11yProps = {};
+
+ if (onRowClick) {
+ a11yProps['aria-label'] = 'row';
+ a11yProps.role = 'row';
+ a11yProps.tabIndex = 0;
+ a11yProps.onClick = function () {
+ return onRowClick(rowIndex);
+ };
+ }
+
return _react2.default.createElement(
'div',
- {
+ _extends({}, a11yProps, {
key: rowIndex,
className: (0, _classnames2.default)('FlexTable__row', rowClass),
- onClick: function onClick() {
- return onRowClick(rowIndex);
- },
style: {
height: this._getRowHeight(rowIndex),
paddingRight: scrollbarWidth
}
- },
+ }),
renderedRow
);
}
@@ -2581,9 +4063,9 @@ var FlexTable = function (_Component) {
var children = _props4.children;
var disableHeader = _props4.disableHeader;
- var items = disableHeader ? [] : children;
+ var items = disableHeader ? [] : _react2.default.Children.toArray(children);
- return _react2.default.Children.map(items, function (column, index) {
+ return items.map(function (column, index) {
return _this4._createHeader(column, index);
});
}
@@ -2611,6 +4093,8 @@ var FlexTable = function (_Component) {
}(_react.Component);
FlexTable.propTypes = {
+ 'aria-label': _react.PropTypes.string,
+
/** One or more FlexColumns describing the data displayed in this row */
children: function children(props, propName, componentName) {
var children = _react2.default.Children.toArray(props.children);
@@ -2719,12 +4203,6 @@ FlexTable.defaultProps = {
noRowsRenderer: function noRowsRenderer() {
return null;
},
- onHeaderClick: function onHeaderClick() {
- return null;
- },
- onRowClick: function onRowClick() {
- return null;
- },
onRowsRendered: function onRowsRendered() {
return null;
},
@@ -2734,7 +4212,7 @@ FlexTable.defaultProps = {
overscanRowsCount: 10
};
exports.default = FlexTable;
-},{"../Grid":36,"./FlexColumn":29,"./SortDirection":31,"classnames":undefined,"react":undefined,"react-addons-shallow-compare":49,"react-dom":undefined}],31:[function(require,module,exports){
+},{"../Grid":50,"./FlexColumn":44,"./SortDirection":46,"classnames":undefined,"react":undefined,"react-addons-shallow-compare":27,"react-dom":undefined}],46:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
@@ -2755,7 +4233,7 @@ var SortDirection = {
};
exports.default = SortDirection;
-},{}],32:[function(require,module,exports){
+},{}],47:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
@@ -2804,7 +4282,7 @@ function SortIndicator(_ref) {
SortIndicator.propTypes = {
sortDirection: _react.PropTypes.oneOf([_SortDirection2.default.ASC, _SortDirection2.default.DESC])
};
-},{"./SortDirection":31,"classnames":undefined,"react":undefined}],33:[function(require,module,exports){
+},{"./SortDirection":46,"classnames":undefined,"react":undefined}],48:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
@@ -2835,37 +4313,69 @@ exports.FlexTable = _FlexTable3.default;
exports.FlexColumn = _FlexColumn3.default;
exports.SortDirection = _SortDirection3.default;
exports.SortIndicator = _SortIndicator3.default;
-},{"./FlexColumn":29,"./FlexTable":30,"./SortDirection":31,"./SortIndicator":32}],34:[function(require,module,exports){
+},{"./FlexColumn":44,"./FlexTable":45,"./SortDirection":46,"./SortIndicator":47}],49:[function(require,module,exports){
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-var _GridUtils = require('./GridUtils');
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
-var _raf = require('raf');
+var _calculateSizeAndPositionDataAndUpdateScrollOffset = require('./utils/calculateSizeAndPositionDataAndUpdateScrollOffset');
-var _raf2 = _interopRequireDefault(_raf);
+var _calculateSizeAndPositionDataAndUpdateScrollOffset2 = _interopRequireDefault(_calculateSizeAndPositionDataAndUpdateScrollOffset);
+
+var _createCallbackMemoizer = require('../utils/createCallbackMemoizer');
+
+var _createCallbackMemoizer2 = _interopRequireDefault(_createCallbackMemoizer);
+
+var _getNearestIndex = require('./utils/getNearestIndex');
+
+var _getNearestIndex2 = _interopRequireDefault(_getNearestIndex);
+
+var _getOverscanIndices = require('./utils/getOverscanIndices');
+
+var _getOverscanIndices2 = _interopRequireDefault(_getOverscanIndices);
var _scrollbarSize = require('dom-helpers/util/scrollbarSize');
var _scrollbarSize2 = _interopRequireDefault(_scrollbarSize);
-var _react = require('react');
+var _getUpdatedOffsetForIndex = require('../utils/getUpdatedOffsetForIndex');
-var _react2 = _interopRequireDefault(_react);
+var _getUpdatedOffsetForIndex2 = _interopRequireDefault(_getUpdatedOffsetForIndex);
+
+var _getVisibleCellIndices = require('./utils/getVisibleCellIndices');
+
+var _getVisibleCellIndices2 = _interopRequireDefault(_getVisibleCellIndices);
+
+var _initCellMetadata = require('../utils/initCellMetadata');
+
+var _initCellMetadata2 = _interopRequireDefault(_initCellMetadata);
+
+var _raf = require('raf');
+
+var _raf2 = _interopRequireDefault(_raf);
var _reactAddonsShallowCompare = require('react-addons-shallow-compare');
var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare);
+var _updateScrollIndexHelper = require('./utils/updateScrollIndexHelper');
+
+var _updateScrollIndexHelper2 = _interopRequireDefault(_updateScrollIndexHelper);
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -2910,8 +4420,8 @@ var Grid = function (_Component) {
};
// Invokes onSectionRendered callback only when start/stop row or column indices change
- _this._onGridRenderedMemoizer = (0, _GridUtils.createCallbackMemoizer)();
- _this._onScrollMemoizer = (0, _GridUtils.createCallbackMemoizer)(false);
+ _this._onGridRenderedMemoizer = (0, _createCallbackMemoizer2.default)();
+ _this._onScrollMemoizer = (0, _createCallbackMemoizer2.default)(false);
// Bind functions to instance so they don't lose context when passed around
_this._computeColumnMetadata = _this._computeColumnMetadata.bind(_this);
@@ -2979,6 +4489,8 @@ var Grid = function (_Component) {
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps, prevState) {
+ var _this2 = this;
+
var _props2 = this.props;
var columnsCount = _props2.columnsCount;
var columnWidth = _props2.columnWidth;
@@ -3009,8 +4521,9 @@ var Grid = function (_Component) {
}
// Update scroll offsets if the current :scrollToColumn or :scrollToRow values requires it
- (0, _GridUtils.updateScrollIndexHelper)({
- cellsCount: columnsCount,
+ // @TODO Do we also need this check or can the one in componentWillUpdate() suffice?
+ (0, _updateScrollIndexHelper2.default)({
+ cellCount: columnsCount,
cellMetadata: this._columnMetadata,
cellSize: columnWidth,
previousCellsCount: prevProps.columnsCount,
@@ -3020,10 +4533,12 @@ var Grid = function (_Component) {
scrollOffset: scrollLeft,
scrollToIndex: scrollToColumn,
size: width,
- updateScrollIndexCallback: this._updateScrollLeftForScrollToColumn
+ updateScrollIndexCallback: function updateScrollIndexCallback(scrollToColumn) {
+ return _this2._updateScrollLeftForScrollToColumn(_extends({}, _this2.props, { scrollToColumn: scrollToColumn }));
+ }
});
- (0, _GridUtils.updateScrollIndexHelper)({
- cellsCount: rowsCount,
+ (0, _updateScrollIndexHelper2.default)({
+ cellCount: rowsCount,
cellMetadata: this._rowMetadata,
cellSize: rowHeight,
previousCellsCount: prevProps.rowsCount,
@@ -3033,7 +4548,9 @@ var Grid = function (_Component) {
scrollOffset: scrollTop,
scrollToIndex: scrollToRow,
size: height,
- updateScrollIndexCallback: this._updateScrollTopForScrollToRow
+ updateScrollIndexCallback: function updateScrollIndexCallback(scrollToRow) {
+ return _this2._updateScrollTopForScrollToRow(_extends({}, _this2.props, { scrollToRow: scrollToRow }));
+ }
});
// Update onRowsRendered callback if start/stop indices have changed
@@ -3068,6 +4585,8 @@ var Grid = function (_Component) {
}, {
key: 'componentWillUpdate',
value: function componentWillUpdate(nextProps, nextState) {
+ var _this3 = this;
+
if (nextProps.columnsCount === 0 && nextState.scrollLeft !== 0 || nextProps.rowsCount === 0 && nextState.scrollTop !== 0) {
this._setScrollPosition({
scrollLeft: 0,
@@ -3081,8 +4600,8 @@ var Grid = function (_Component) {
}
// Update scroll offsets if the size or number of cells have changed, invalidating the previous value
- (0, _GridUtils.computeCellMetadataAndUpdateScrollOffsetHelper)({
- cellsCount: this.props.columnsCount,
+ (0, _calculateSizeAndPositionDataAndUpdateScrollOffset2.default)({
+ cellCount: this.props.columnsCount,
cellSize: this.props.columnWidth,
computeMetadataCallback: this._computeColumnMetadata,
computeMetadataCallbackProps: nextProps,
@@ -3091,10 +4610,12 @@ var Grid = function (_Component) {
nextCellSize: nextProps.columnWidth,
nextScrollToIndex: nextProps.scrollToColumn,
scrollToIndex: this.props.scrollToColumn,
- updateScrollOffsetForScrollToIndex: this._updateScrollLeftForScrollToColumn
+ updateScrollOffsetForScrollToIndex: function updateScrollOffsetForScrollToIndex() {
+ return _this3._updateScrollLeftForScrollToColumn(nextProps, nextState);
+ }
});
- (0, _GridUtils.computeCellMetadataAndUpdateScrollOffsetHelper)({
- cellsCount: this.props.rowsCount,
+ (0, _calculateSizeAndPositionDataAndUpdateScrollOffset2.default)({
+ cellCount: this.props.rowsCount,
cellSize: this.props.rowHeight,
computeMetadataCallback: this._computeRowMetadata,
computeMetadataCallbackProps: nextProps,
@@ -3103,7 +4624,9 @@ var Grid = function (_Component) {
nextCellSize: nextProps.rowHeight,
nextScrollToIndex: nextProps.scrollToRow,
scrollToIndex: this.props.scrollToRow,
- updateScrollOffsetForScrollToIndex: this._updateScrollTopForScrollToRow
+ updateScrollOffsetForScrollToIndex: function updateScrollOffsetForScrollToIndex() {
+ return _this3._updateScrollTopForScrollToRow(nextProps, nextState);
+ }
});
this.setState({
@@ -3121,6 +4644,7 @@ var Grid = function (_Component) {
var overscanColumnsCount = _props3.overscanColumnsCount;
var overscanRowsCount = _props3.overscanRowsCount;
var renderCell = _props3.renderCell;
+ var renderCellRanges = _props3.renderCellRanges;
var rowsCount = _props3.rowsCount;
var width = _props3.width;
var _state2 = this.state;
@@ -3133,15 +4657,13 @@ var Grid = function (_Component) {
// Render only enough columns and rows to cover the visible area of the grid.
if (height > 0 && width > 0) {
- var visibleColumnIndices = (0, _GridUtils.getVisibleCellIndices)({
- cellsCount: columnsCount,
+ var visibleColumnIndices = (0, _getVisibleCellIndices2.default)({
cellMetadata: this._columnMetadata,
containerSize: width,
currentOffset: scrollLeft
});
- var visibleRowIndices = (0, _GridUtils.getVisibleCellIndices)({
- cellsCount: rowsCount,
+ var visibleRowIndices = (0, _getVisibleCellIndices2.default)({
cellMetadata: this._rowMetadata,
containerSize: height,
currentOffset: scrollTop
@@ -3153,15 +4675,15 @@ var Grid = function (_Component) {
this._renderedRowStartIndex = visibleRowIndices.start;
this._renderedRowStopIndex = visibleRowIndices.stop;
- var overscanColumnIndices = (0, _GridUtils.getOverscanIndices)({
- cellsCount: columnsCount,
+ var overscanColumnIndices = (0, _getOverscanIndices2.default)({
+ cellCount: columnsCount,
overscanCellsCount: overscanColumnsCount,
startIndex: this._renderedColumnStartIndex,
stopIndex: this._renderedColumnStopIndex
});
- var overscanRowIndices = (0, _GridUtils.getOverscanIndices)({
- cellsCount: rowsCount,
+ var overscanRowIndices = (0, _getOverscanIndices2.default)({
+ cellCount: rowsCount,
overscanCellsCount: overscanRowsCount,
startIndex: this._renderedRowStartIndex,
stopIndex: this._renderedRowStopIndex
@@ -3173,38 +4695,15 @@ var Grid = function (_Component) {
this._rowStartIndex = overscanRowIndices.overscanStartIndex;
this._rowStopIndex = overscanRowIndices.overscanStopIndex;
- for (var rowIndex = this._rowStartIndex; rowIndex <= this._rowStopIndex; rowIndex++) {
- var rowDatum = this._rowMetadata[rowIndex];
-
- for (var columnIndex = this._columnStartIndex; columnIndex <= this._columnStopIndex; columnIndex++) {
- var columnDatum = this._columnMetadata[columnIndex];
- var renderedCell = renderCell({ columnIndex: columnIndex, rowIndex: rowIndex });
- var key = rowIndex + '-' + columnIndex;
-
- // any other falsey value will be rendered
- // as a text node by React
- if (renderedCell == null || renderedCell === false) {
- continue;
- }
-
- var child = _react2.default.createElement(
- 'div',
- {
- key: key,
- className: 'Grid__cell',
- style: {
- height: rowDatum.size,
- left: columnDatum.offset,
- top: rowDatum.offset,
- width: columnDatum.size
- }
- },
- renderedCell
- );
-
- childrenToDisplay.push(child);
- }
- }
+ childrenToDisplay = renderCellRanges({
+ columnMetadata: this._columnMetadata,
+ columnStartIndex: this._columnStartIndex,
+ columnStopIndex: this._columnStopIndex,
+ renderCell: renderCell,
+ rowMetadata: this._rowMetadata,
+ rowStartIndex: this._rowStartIndex,
+ rowStopIndex: this._rowStopIndex
+ });
}
var gridStyle = {
@@ -3230,10 +4729,12 @@ var Grid = function (_Component) {
'div',
{
ref: 'scrollingContainer',
+ 'aria-label': this.props['aria-label'],
className: (0, _classnames2.default)('Grid', className),
onScroll: this._onScroll,
- tabIndex: 0,
- style: gridStyle
+ role: 'grid',
+ style: gridStyle,
+ tabIndex: 0
},
childrenToDisplay.length > 0 && _react2.default.createElement(
'div',
@@ -3267,8 +4768,8 @@ var Grid = function (_Component) {
var columnWidth = props.columnWidth;
- this._columnMetadata = (0, _GridUtils.initCellMetadata)({
- cellsCount: columnsCount,
+ this._columnMetadata = (0, _initCellMetadata2.default)({
+ cellCount: columnsCount,
size: columnWidth
});
}
@@ -3279,8 +4780,8 @@ var Grid = function (_Component) {
var rowsCount = props.rowsCount;
- this._rowMetadata = (0, _GridUtils.initCellMetadata)({
- cellsCount: rowsCount,
+ this._rowMetadata = (0, _initCellMetadata2.default)({
+ cellCount: rowsCount,
size: rowHeight
});
}
@@ -3294,15 +4795,15 @@ var Grid = function (_Component) {
}, {
key: '_enablePointerEventsAfterDelay',
value: function _enablePointerEventsAfterDelay() {
- var _this2 = this;
+ var _this4 = this;
if (this._disablePointerEventsTimeoutId) {
clearTimeout(this._disablePointerEventsTimeoutId);
}
this._disablePointerEventsTimeoutId = setTimeout(function () {
- _this2._disablePointerEventsTimeoutId = null;
- _this2.setState({
+ _this4._disablePointerEventsTimeoutId = null;
+ _this4.setState({
isScrolling: false
});
}, IS_SCROLLING_TIMEOUT);
@@ -3350,20 +4851,22 @@ var Grid = function (_Component) {
}, {
key: '_invokeOnScrollMemoizer',
value: function _invokeOnScrollMemoizer(_ref) {
+ var _this5 = this;
+
var scrollLeft = _ref.scrollLeft;
var scrollTop = _ref.scrollTop;
var totalColumnsWidth = _ref.totalColumnsWidth;
var totalRowsHeight = _ref.totalRowsHeight;
- var _props4 = this.props;
- var height = _props4.height;
- var onScroll = _props4.onScroll;
- var width = _props4.width;
-
this._onScrollMemoizer({
callback: function callback(_ref2) {
var scrollLeft = _ref2.scrollLeft;
var scrollTop = _ref2.scrollTop;
+ var _props4 = _this5.props;
+ var height = _props4.height;
+ var onScroll = _props4.onScroll;
+ var width = _props4.width;
+
onScroll({
clientHeight: height,
@@ -3390,15 +4893,15 @@ var Grid = function (_Component) {
}, {
key: '_setNextState',
value: function _setNextState(state) {
- var _this3 = this;
+ var _this6 = this;
if (this._setNextStateAnimationFrameId) {
_raf2.default.cancel(this._setNextStateAnimationFrameId);
}
this._setNextStateAnimationFrameId = (0, _raf2.default)(function () {
- _this3._setNextStateAnimationFrameId = null;
- _this3.setState(state);
+ _this6._setNextStateAnimationFrameId = null;
+ _this6.setState(state);
});
}
}, {
@@ -3425,16 +4928,32 @@ var Grid = function (_Component) {
}
}, {
key: '_updateScrollLeftForScrollToColumn',
- value: function _updateScrollLeftForScrollToColumn(scrollToColumnOverride) {
- var scrollToColumn = scrollToColumnOverride != null ? scrollToColumnOverride : this.props.scrollToColumn;
+ value: function _updateScrollLeftForScrollToColumn() {
+ var props = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0];
+ var state = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1];
- var width = this.props.width;
- var scrollLeft = this.state.scrollLeft;
+ var _ref4 = props || this.props;
+ var columnsCount = _ref4.columnsCount;
+ var scrollToColumn = _ref4.scrollToColumn;
+ var width = _ref4.width;
- if (scrollToColumn >= 0) {
- var calculatedScrollLeft = (0, _GridUtils.getUpdatedOffsetForIndex)({
- cellMetadata: this._columnMetadata,
+ var _ref5 = state || this.state;
+
+ var scrollLeft = _ref5.scrollLeft;
+
+
+ if (scrollToColumn >= 0 && columnsCount > 0) {
+ var targetIndex = (0, _getNearestIndex2.default)({
+ cellCount: this._columnMetadata.length,
+ targetIndex: scrollToColumn
+ });
+
+ var columnMetadata = this._columnMetadata[targetIndex];
+
+ var calculatedScrollLeft = (0, _getUpdatedOffsetForIndex2.default)({
+ cellOffset: columnMetadata.offset,
+ cellSize: columnMetadata.size,
containerSize: width,
currentOffset: scrollLeft,
targetIndex: scrollToColumn
@@ -3449,16 +4968,32 @@ var Grid = function (_Component) {
}
}, {
key: '_updateScrollTopForScrollToRow',
- value: function _updateScrollTopForScrollToRow(scrollToRowOverride) {
- var scrollToRow = scrollToRowOverride != null ? scrollToRowOverride : this.props.scrollToRow;
+ value: function _updateScrollTopForScrollToRow() {
+ var props = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0];
+ var state = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1];
+
+ var _ref6 = props || this.props;
+
+ var height = _ref6.height;
+ var rowsCount = _ref6.rowsCount;
+ var scrollToRow = _ref6.scrollToRow;
+
+ var _ref7 = state || this.state;
- var height = this.props.height;
- var scrollTop = this.state.scrollTop;
+ var scrollTop = _ref7.scrollTop;
+
+
+ if (scrollToRow >= 0 && rowsCount > 0) {
+ var targetIndex = (0, _getNearestIndex2.default)({
+ cellCount: this._rowMetadata.length,
+ targetIndex: scrollToRow
+ });
+ var rowMetadata = this._rowMetadata[targetIndex];
- if (scrollToRow >= 0) {
- var calculatedScrollTop = (0, _GridUtils.getUpdatedOffsetForIndex)({
- cellMetadata: this._rowMetadata,
+ var calculatedScrollTop = (0, _getUpdatedOffsetForIndex2.default)({
+ cellOffset: rowMetadata.offset,
+ cellSize: rowMetadata.size,
containerSize: height,
currentOffset: scrollTop,
targetIndex: scrollToRow
@@ -3531,6 +5066,8 @@ var Grid = function (_Component) {
}(_react.Component);
Grid.propTypes = {
+ 'aria-label': _react.PropTypes.string,
+
/**
* Optional custom CSS class name to attach to root Grid element.
*/
@@ -3588,6 +5125,20 @@ Grid.propTypes = {
*/
renderCell: _react.PropTypes.func.isRequired,
+ /**
+ * Responsible for rendering a group of cells given their index ranges.
+ * Should implement the following interface: ({
+ * columnMetadata:Array