Skip to content

Commit

Permalink
simplify this massively - we don't need to measure. we only need to n…
Browse files Browse the repository at this point in the history 
…ot use 'width'. min-width: 100% is fine.
  • Loading branch information
Chris Toshok committed Nov 2, 2016
1 parent a57b62a commit a3a0c84
Show file tree
Hide file tree
Showing 9 changed files with 30 additions and 887 deletions.
192 changes: 7 additions & 185 deletions dist/react-select-allow-create.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/react-select-allow-create.min.js
View file

Large diffs are not rendered by default.

190 changes: 7 additions & 183 deletions examples/dist/bundle.js
View file

Large diffs are not rendered by default.

192 changes: 7 additions & 185 deletions examples/dist/standalone.js
View file

Large diffs are not rendered by default.

61 changes: 4 additions & 57 deletions lib/Select.js
View file
Expand Up @@ -46,10 +46,6 @@ var _utilsDefaultMenuRenderer = require('./utils/defaultMenuRenderer');

var _utilsDefaultMenuRenderer2 = _interopRequireDefault(_utilsDefaultMenuRenderer);

var _utilsMeasure = require('./utils/measure');

var _utilsMeasure2 = _interopRequireDefault(_utilsMeasure);

var _Async = require('./Async');

var _Async2 = _interopRequireDefault(_Async);
Expand Down Expand Up @@ -160,9 +156,7 @@ var Select = _react2['default'].createClass({
valueKey: _react2['default'].PropTypes.string, // path of the label value in option objects
valueRenderer: _react2['default'].PropTypes.func, // valueRenderer: function (option) {}
wrapperStyle: _react2['default'].PropTypes.object, // optional style to apply to the component wrapper
inputValue: _react2['default'].PropTypes.string,
autoSizeMenu: _react2['default'].PropTypes.bool,
autoSizeMenuMaxWidth: _react2['default'].PropTypes.number
inputValue: _react2['default'].PropTypes.string
},

statics: { Async: _Async2['default'], AsyncCreatable: _AsyncCreatable2['default'], Creatable: _Creatable2['default'] },
Expand Down Expand Up @@ -206,8 +200,7 @@ var Select = _react2['default'].createClass({
tabSelectsValue: true,
valueComponent: _Value2['default'],
valueKey: 'value',
inputValue: '',
autoSizeMenu: false
inputValue: ''
};
},

Expand Down Expand Up @@ -252,46 +245,10 @@ var Select = _react2['default'].createClass({
},

componentWillUpdate: function componentWillUpdate(nextProps, nextState) {
var needMeasure = false;
if (nextState.isOpen !== this.state.isOpen) {
this.toggleTouchOutsideEvent(nextState.isOpen);
var handler = nextState.isOpen ? nextProps.onOpen : nextProps.onClose;
handler && handler();

if (nextState.isOpen && nextProps.autoSizeMenu) {
needMeasure = true;
}
}

if (nextProps.autoSizeMenu !== this.props.autoSizeMenu) {
if (nextProps.autoSizeMenu) {
needMeasure = true;
} else {
this.setState({ menuWidth: undefined });
}
}

if (nextProps.autoSizeMenu && nextProps.options !== this.props.options) {
needMeasure = true;
}

if (needMeasure) {
var valueArray = this.getValueArray(this.props.value);
var options = this._visibleOptions = this.filterOptions(this.props.multi ? this.getValueArray(this.props.value) : null);
var focusedOptionIndex = this.getFocusableOptionIndex(valueArray[0]);
var focusedOption = null;
if (focusedOptionIndex !== null) {
focusedOption = this._focusedOption = options[focusedOptionIndex];
} else {
focusedOption = this._focusedOption = null;
}
var inner = this.renderOuter(options, !this.props.multi ? valueArray : null, focusedOption, true);

var _measure = (0, _utilsMeasure2['default'])(this, inner);

var width = _measure.width;

this.setState({ menuWidth: width });
}
},

Expand Down Expand Up @@ -1154,7 +1111,7 @@ var Select = _react2['default'].createClass({
return null;
},

renderOuter: function renderOuter(options, valueArray, focusedOption, excludeAutoWidth) {
renderOuter: function renderOuter(options, valueArray, focusedOption) {
var _this7 = this;

var menu = this.renderMenu(options, valueArray, focusedOption);
Expand All @@ -1173,21 +1130,11 @@ var Select = _react2['default'].createClass({
menu
);

var style = undefined;
if (!excludeAutoWidth && this.state.menuWidth) {
style = { width: this.state.menuWidth };
if (this.props.autoSizeMenuMaxWidth) {
style.maxWidth = this.props.autoSizeMenuMaxWidth;
}
style = _extends(style, this.props.menuContainerStyle);
} else {
style = this.props.menuContainerStyle;
}
return _react2['default'].createElement(
'div',
{ ref: function (ref) {
return _this7.menuContainer = ref;
}, className: 'Select-menu-outer', style: style },
}, className: 'Select-menu-outer', style: this.props.menuContainerStyle },
inner
);
},
Expand Down
121 changes: 0 additions & 121 deletions lib/utils/measure.js
View file

This file was deleted.

2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,6 +1,6 @@
{
"name": "react-select-allow-create",
"version": "1.0.0-beta11.14",
"version": "1.0.0-beta11.15",
"description": "A Select control built with and for ReactJS",
"main": "lib/Select.js",
"style": "dist/react-select.min.css",
Expand Down
51 changes: 2 additions & 49 deletions src/Select.js
View file
Expand Up @@ -12,7 +12,6 @@ import classNames from 'classnames';
import defaultArrowRenderer from './utils/defaultArrowRenderer';
import defaultFilterOptions from './utils/defaultFilterOptions';
import defaultMenuRenderer from './utils/defaultMenuRenderer';
import measure from './utils/measure';

import Async from './Async';
import AsyncCreatable from './AsyncCreatable';
Expand Down Expand Up @@ -114,8 +113,6 @@ const Select = React.createClass({
valueRenderer: React.PropTypes.func, // valueRenderer: function (option) {}
wrapperStyle: React.PropTypes.object, // optional style to apply to the component wrapper
inputValue: React.PropTypes.string,
autoSizeMenu: React.PropTypes.bool,
autoSizeMenuMaxWidth: React.PropTypes.number,
},

statics: { Async, AsyncCreatable, Creatable },
Expand Down Expand Up @@ -160,7 +157,6 @@ const Select = React.createClass({
valueComponent: Value,
valueKey: 'value',
inputValue: '',
autoSizeMenu: false,
};
},

Expand Down Expand Up @@ -205,44 +201,11 @@ const Select = React.createClass({
},

componentWillUpdate (nextProps, nextState) {
let needMeasure = false;
if (nextState.isOpen !== this.state.isOpen) {
this.toggleTouchOutsideEvent(nextState.isOpen);
const handler = nextState.isOpen ? nextProps.onOpen : nextProps.onClose;
handler && handler();

if (nextState.isOpen && nextProps.autoSizeMenu) {
needMeasure = true;
}
}

if (nextProps.autoSizeMenu !== this.props.autoSizeMenu) {
if (nextProps.autoSizeMenu) {
needMeasure = true;
} else {
this.setState({ menuWidth: undefined });
}
}

if (nextProps.autoSizeMenu && nextProps.options !== this.props.options) {
needMeasure = true;
}

if (needMeasure) {
let valueArray = this.getValueArray(this.props.value);
let options = this._visibleOptions = this.filterOptions(this.props.multi ? this.getValueArray(this.props.value) : null);
const focusedOptionIndex = this.getFocusableOptionIndex(valueArray[0]);
let focusedOption = null;
if (focusedOptionIndex !== null) {
focusedOption = this._focusedOption = options[focusedOptionIndex];
} else {
focusedOption = this._focusedOption = null;
}
let inner = this.renderOuter(options, !this.props.multi ? valueArray : null, focusedOption, true);
let { width } = measure(this, inner);
this.setState({ menuWidth: width });
}

},

componentDidUpdate (prevProps, prevState) {
Expand Down Expand Up @@ -1066,7 +1029,7 @@ const Select = React.createClass({
return null;
},

renderOuter (options, valueArray, focusedOption, excludeAutoWidth) {
renderOuter (options, valueArray, focusedOption) {
let menu = this.renderMenu(options, valueArray, focusedOption);
if (!menu) {
return null;
Expand All @@ -1081,18 +1044,8 @@ const Select = React.createClass({
</div>
);

let style;
if (!excludeAutoWidth && this.state.menuWidth) {
style = { width: this.state.menuWidth };
if (this.props.autoSizeMenuMaxWidth) {
style.maxWidth = this.props.autoSizeMenuMaxWidth;
}
style = Object.assign(style, this.props.menuContainerStyle);
} else {
style = this.props.menuContainerStyle;
}
return (
<div ref={ref => this.menuContainer = ref} className="Select-menu-outer" style={style}>
<div ref={ref => this.menuContainer = ref} className="Select-menu-outer" style={this.props.menuContainerStyle}>
{ inner }
</div>
);
Expand Down

0 comments on commit a3a0c84

Please sign in to comment.