Skip to content

Commit

Permalink
Reverted lib/Select
Browse files Browse the repository at this point in the history
  • Loading branch information
@bvaughn
bvaughn committed Mar 31, 2016
1 parent 233efba commit a64c43f
Showing 1 changed file with 80 additions and 153 deletions.
233 changes: 80 additions & 153 deletions lib/Select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@ var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _reactVirtualized = require('react-virtualized');

var _utilsStripDiacritics = require('./utils/stripDiacritics');

var _utilsStripDiacritics2 = _interopRequireDefault(_utilsStripDiacritics);
Expand All @@ -42,9 +40,6 @@ var _Value = require('./Value');

var _Value2 = _interopRequireDefault(_Value);

var OPTION_HEIGHT = 35;
var MAX_OPTIONS_HEIGHT = 200;

function stringifyValue(value) {
if (typeof value === 'object') {
return JSON.stringify(value);
Expand All @@ -64,7 +59,6 @@ var Select = _react2['default'].createClass({
allowCreate: _react2['default'].PropTypes.bool, // whether to allow creation of new entries
autoBlur: _react2['default'].PropTypes.bool,
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
className: _react2['default'].PropTypes.string, // className for the outer element
clearAllText: stringOrNode, // title for the "clear" control when multi: true
Expand All @@ -79,7 +73,6 @@ var Select = _react2['default'].createClass({
ignoreCase: _react2['default'].PropTypes.bool, // whether to perform case-insensitive filtering
inputProps: _react2['default'].PropTypes.object, // custom attributes for the Input
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
matchPos: _react2['default'].PropTypes.string, // (any|start) match the start or entire string when filtering
matchProp: _react2['default'].PropTypes.string, // (any|label|value) which option property to filter on
Expand Down Expand Up @@ -121,7 +114,6 @@ var Select = _react2['default'].createClass({
getDefaultProps: function getDefaultProps() {
return {
addLabelText: 'Add "{label}"?',
autosize: true,
allowCreate: false,
backspaceRemoves: true,
clearable: true,
Expand All @@ -135,7 +127,6 @@ var Select = _react2['default'].createClass({
ignoreCase: true,
inputProps: {},
isLoading: false,
joinValues: false,
labelKey: 'label',
matchPos: 'any',
matchProp: 'any',
Expand All @@ -161,8 +152,7 @@ var Select = _react2['default'].createClass({
isLoading: false,
isOpen: false,
isPseudoFocused: false,
required: this.props.required && this.handleRequired(this.props.value, this.props.multi),
focusedOptionIndex: -1
required: this.props.required && this.handleRequired(this.props.value, this.props.multi)
};
},

Expand All @@ -172,14 +162,6 @@ var Select = _react2['default'].createClass({
}
},

componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (this.props.value !== nextProps.value && nextProps.required) {
this.setState({
required: this.handleRequired(nextProps.value, nextProps.multi)
});
}
},

componentWillUpdate: function componentWillUpdate(nextProps, nextState) {
if (nextState.isOpen !== this.state.isOpen) {
var handler = nextState.isOpen ? nextProps.onOpen : nextProps.onClose;
Expand Down Expand Up @@ -546,6 +528,12 @@ var Select = _react2['default'].createClass({
}, this.focus);
},

focusOption: function focusOption(option) {
this.setState({
focusedOption: option
});
},

focusNextOption: function focusNextOption() {
this.focusAdjacentOption('next');
},
Expand All @@ -560,47 +548,33 @@ var Select = _react2['default'].createClass({
});
this._scrollToFocusedOptionOnUpdate = true;
if (!this.state.isOpen) {
var _focusedOption = undefined,
_focusedOptionIndex = undefined;
if (this._focusedOption) {
_focusedOption = this._focusedOption;
_focusedOptionIndex = this.state.focusedOptionIndex;
} else {
_focusedOptionIndex = dir === 'next' ? 0 : options.length - 1;
_focusedOption = options[_focusedOptionIndex];
}
this.setState({
isOpen: true,
inputValue: '',
focusedOption: _focusedOption,
focusedOptionIndex: _focusedOptionIndex
focusedOption: this._focusedOption || options[dir === 'next' ? 0 : options.length - 1]
});
return;
}
if (!options.length) return;
var focusedOptionIndex = -1;
var focusedIndex = -1;
for (var i = 0; i < options.length; i++) {
if (this._focusedOption === options[i]) {
focusedOptionIndex = i;
focusedIndex = i;
break;
}
}
var focusedOption = options[0];
if (dir === 'next' && focusedOptionIndex > -1 && focusedOptionIndex < options.length - 1) {
focusedOptionIndex++;
focusedOption = options[focusedOptionIndex];
if (dir === 'next' && focusedIndex > -1 && focusedIndex < options.length - 1) {
focusedOption = options[focusedIndex + 1];
} else if (dir === 'previous') {
if (focusedOptionIndex > 0) {
focusedOptionIndex--;
focusedOption = options[focusedOptionIndex];
if (focusedIndex > 0) {
focusedOption = options[focusedIndex - 1];
} else {
focusedOptionIndex = options.length - 1;
focusedOption = options[focusedOptionIndex];
focusedOption = options[options.length - 1];
}
}
this.setState({
focusedOption: focusedOption,
focusedOptionIndex: focusedOptionIndex
focusedOption: focusedOption
});
},

Expand Down Expand Up @@ -674,32 +648,17 @@ var Select = _react2['default'].createClass({
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(_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
}));
},

renderClear: function renderClear() {
Expand Down Expand Up @@ -762,77 +721,65 @@ var Select = _react2['default'].createClass({
}
},

renderNoResults: function renderNoResults() {
return this.props.noResultsText ? _react2['default'].createElement(
'div',
{ className: 'Select-noresults' },
this.props.noResultsText
) : null;
},

renderOption: function renderOption(index) {
renderMenu: function renderMenu(options, valueArray, focusedOption) {
var _this4 = this;

var focusedOption = this._visibleOptions[this.state.focusedOptionIndex];
var option = this._visibleOptions[index];
var Option = this.props.optionComponent;
var renderLabel = this.props.optionRenderer || this.getOptionLabel;

var isSelected = this.props.valueRenderer && this.props.valueRenderer.indexOf(option) > -1;
var isFocused = option === focusedOption;
var optionRef = isFocused ? 'focused' : null;
var optionClass = (0, _classnames2['default'])({
'Select-option': true,
'is-selected': isSelected,
'is-focused': isFocused,
'is-disabled': option.disabled
});

return _react2['default'].createElement(
Option,
{
className: optionClass,
isDisabled: option.disabled,
isFocused: isFocused,
key: 'option-' + index + '-' + option[this.props.valueKey],
onSelect: this.selectValue,
onFocus: function () {
_this4.setState({
focusedOption: option,
focusedOptionIndex: index
});
},
option: option,
isSelected: isSelected,
ref: optionRef
},
renderLabel(option)
);
if (options && options.length) {
var _ret = (function () {
var Option = _this4.props.optionComponent;
var renderLabel = _this4.props.optionRenderer || _this4.getOptionLabel;

return {
v: options.map(function (option, i) {
var isSelected = valueArray && valueArray.indexOf(option) > -1;
var isFocused = option === focusedOption;
var optionRef = isFocused ? 'focused' : null;
var optionClass = (0, _classnames2['default'])({
'Select-option': true,
'is-selected': isSelected,
'is-focused': isFocused,
'is-disabled': option.disabled
});

return _react2['default'].createElement(
Option,
{
className: optionClass,
isDisabled: option.disabled,
isFocused: isFocused,
key: 'option-' + i + '-' + option[_this4.props.valueKey],
onSelect: _this4.selectValue,
onFocus: _this4.focusOption,
option: option,
isSelected: isSelected,
ref: optionRef
},
renderLabel(option)
);
})
};
})();

if (typeof _ret === 'object') return _ret.v;
} else if (this.props.noResultsText) {
return _react2['default'].createElement(
'div',
{ className: 'Select-noresults' },
this.props.noResultsText
);
} else {
return null;
}
},

renderHiddenField: function renderHiddenField(valueArray) {
var _this5 = this;

if (!this.props.name) return;
if (this.props.joinValues) {
var value = valueArray.map(function (i) {
return stringifyValue(i[_this5.props.valueKey]);
}).join(this.props.delimiter);
return _react2['default'].createElement('input', {
type: 'hidden',
ref: 'value',
name: this.props.name,
value: value,
disabled: this.props.disabled });
}
return valueArray.map(function (item, index) {
return _react2['default'].createElement('input', { key: 'hidden.' + index,
type: 'hidden',
ref: 'value' + index,
name: _this5.props.name,
value: stringifyValue(item[_this5.props.valueKey]),
disabled: _this5.props.disabled });
});
var value = valueArray.map(function (i) {
return stringifyValue(i[_this5.props.valueKey]);
}).join(this.props.delimiter);
return _react2['default'].createElement('input', { type: 'hidden', ref: 'value', name: this.props.name, value: value, disabled: this.props.disabled });
},

getFocusableOption: function getFocusableOption(selectedOption) {
Expand All @@ -846,8 +793,6 @@ var Select = _react2['default'].createClass({
},

render: function render() {
var _this6 = this;

var valueArray = this.getValueArray();
var options = this._visibleOptions = this.filterOptions(this.props.multi ? valueArray : null);
var isOpen = this.state.isOpen;
Expand All @@ -863,9 +808,6 @@ var Select = _react2['default'].createClass({
'is-searchable': this.props.searchable,
'has-value': valueArray.length
});

var optionsHeight = Math.max(Math.min(MAX_OPTIONS_HEIGHT, options.length * OPTION_HEIGHT), OPTION_HEIGHT);

return _react2['default'].createElement(
'div',
{ ref: 'wrapper', className: className, style: this.props.wrapperStyle },
Expand Down Expand Up @@ -895,27 +837,12 @@ var Select = _react2['default'].createClass({
style: this.props.menuStyle,
onScroll: this.handleMenuScroll,
onMouseDown: this.handleMouseDownOnMenu },
_react2['default'].createElement(
_reactVirtualized.AutoSizer,
{ disableHeight: true },
function (_ref) {
var width = _ref.width;
return _react2['default'].createElement(_reactVirtualized.VirtualScroll, {
ref: 'VirtualScroll',
height: optionsHeight,
noRowsRenderer: _this6.renderNoResults,
rowHeight: OPTION_HEIGHT,
rowRenderer: _this6.renderOption,
rowsCount: options.length,
scrollToIndex: _this6.state.focusedOptionIndex,
width: width
});
}
)
this.renderMenu(options, !this.props.multi ? valueArray : null, focusedOption)
)
) : null
);
}

});

exports['default'] = Select;
Expand Down

0 comments on commit a64c43f

Please sign in to comment.