Permalink
Browse files

Merge pull request #1367 from quizlet/aw-input-renderer-props

Pass inputProps to inputRenderer
  • Loading branch information...
JedWatson committed Nov 18, 2016
2 parents a97d5fd + df99444 commit ef3a4687bc67684809c3a2648143a1c325ee987e
Showing with 91 additions and 57 deletions.
  1. +57 −57 src/Select.js
  2. +34 −0 test/Select-test.js
View
@@ -823,69 +823,69 @@ const Select = React.createClass({
},
renderInput (valueArray, focusedOptionIndex) {
if (this.props.inputRenderer) {
return this.props.inputRenderer();
} else {
var className = classNames('Select-input', this.props.inputProps.className);
const isOpen = !!this.state.isOpen;
const ariaOwns = classNames({
[this._instancePrefix + '-list']: isOpen,
[this._instancePrefix + '-backspace-remove-message']: this.props.multi
&& !this.props.disabled
&& this.state.isFocused
&& !this.state.inputValue
});
var className = classNames('Select-input', this.props.inputProps.className);
const isOpen = !!this.state.isOpen;
const ariaOwns = classNames({
[this._instancePrefix + '-list']: isOpen,
[this._instancePrefix + '-backspace-remove-message']: this.props.multi
&& !this.props.disabled
&& this.state.isFocused
&& !this.state.inputValue
});
// TODO: Check how this project includes Object.assign()
const inputProps = Object.assign({}, this.props.inputProps, {
role: 'combobox',
'aria-expanded': '' + isOpen,
'aria-owns': ariaOwns,
'aria-haspopup': '' + isOpen,
'aria-activedescendant': isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value',
'aria-labelledby': this.props['aria-labelledby'],
'aria-label': this.props['aria-label'],
className: className,
tabIndex: this.props.tabIndex,
onBlur: this.handleInputBlur,
onChange: this.handleInputChange,
onFocus: this.handleInputFocus,
ref: ref => this.input = ref,
required: this.state.required,
value: this.state.inputValue
});
// TODO: Check how this project includes Object.assign()
const inputProps = Object.assign({}, this.props.inputProps, {
role: 'combobox',
'aria-expanded': '' + isOpen,
'aria-owns': ariaOwns,
'aria-haspopup': '' + isOpen,
'aria-activedescendant': isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value',
'aria-labelledby': this.props['aria-labelledby'],
'aria-label': this.props['aria-label'],
className: className,
tabIndex: this.props.tabIndex,
onBlur: this.handleInputBlur,
onChange: this.handleInputChange,
onFocus: this.handleInputFocus,
ref: ref => this.input = ref,
required: this.state.required,
value: this.state.inputValue
});
if (this.props.disabled || !this.props.searchable) {
const { inputClassName, ...divProps } = this.props.inputProps;
return (
<div
{...divProps}
role="combobox"
aria-expanded={isOpen}
aria-owns={isOpen ? this._instancePrefix + '-list' : this._instancePrefix + '-value'}
aria-activedescendant={isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value'}
className={className}
tabIndex={this.props.tabIndex || 0}
onBlur={this.handleInputBlur}
onFocus={this.handleInputFocus}
ref={ref => this.input = ref}
aria-readonly={'' + !!this.props.disabled}
style={{ border: 0, width: 1, display:'inline-block' }}/>
);
}
if (this.props.inputRenderer) {
return this.props.inputRenderer(inputProps);
}
if (this.props.autosize) {
return (
<AutosizeInput {...inputProps} minWidth="5" />
);
}
if (this.props.disabled || !this.props.searchable) {
const { inputClassName, ...divProps } = this.props.inputProps;
return (
<div className={ className }>
<input {...inputProps} />
</div>
<div
{...divProps}
role="combobox"
aria-expanded={isOpen}
aria-owns={isOpen ? this._instancePrefix + '-list' : this._instancePrefix + '-value'}
aria-activedescendant={isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value'}
className={className}
tabIndex={this.props.tabIndex || 0}
onBlur={this.handleInputBlur}
onFocus={this.handleInputFocus}
ref={ref => this.input = ref}
aria-readonly={'' + !!this.props.disabled}
style={{ border: 0, width: 1, display:'inline-block' }}/>
);
}
if (this.props.autosize) {
return (
<AutosizeInput {...inputProps} minWidth="5" />
);
}
return (
<div className={ className }>
<input {...inputProps} />
</div>
);
},
renderClear () {
View
@@ -3061,6 +3061,40 @@ describe('Select', () => {
});
});
describe('inputRenderer', () => {
var inputRenderer;
beforeEach(() => {
inputRenderer = (inputProps) => {
return (
<input id="custom-input" type="text" />
);
};
inputRenderer = sinon.spy(inputRenderer);
instance = createControl({
options: defaultOptions,
inputRenderer: inputRenderer
});
});
it('renders the options using the inputRenderer', () => {
var input = ReactDOM.findDOMNode(instance).querySelector('#custom-input');
expect(input, 'not to equal', undefined);
});
it('calls the renderer exactly once', () => {
expect(inputRenderer, 'was called times', 1);
});
it('calls the renderer with props', () => {
expect(inputRenderer, 'was called with', { value: '', className: 'Select-input' });
});
});
describe('optionRenderer', () => {
var optionRenderer;

0 comments on commit ef3a468

Please sign in to comment.