Skip to content

Commit

Permalink
Removes deprecated minTypedCharacters.
Browse files Browse the repository at this point in the history
  • Loading branch information
@visusnet
visusnet committed Jul 30, 2018
1 parent edf6571 commit a95ccf8
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 140 deletions.
1 change: 0 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ const handleBlur = (fieldName, value) => {
| isClearable | ``false`` | ``false`` | Renders a button that unsets the selected value if set to true. |
| isDisabled | ``false`` | ``false`` | If true, the component is disabled. |
| menuWidth | ``false`` | ``undefined`` | A number that manually sets the width of the menu. |
| minTypedCharacters | ``false`` | ``undefined`` | DEPRECATED. If set, at least ``minTypedCharacters`` must be typed before the menu is rendered. |
| notFoundLabel | ``false`` | ``nicht gefunden`` (German) | A string that is displayed after the typed label for which no options could be found. |
| onBlur | ``false`` | no op | A callback that is called when focus is lost. Parameters: ``fieldName``, ``value``. |
| onChange | ``false`` | no op | A callback that is called when the value has changed. Parameters: ``fieldName``, ``value``. |
Expand Down
49 changes: 10 additions & 39 deletions src/Typeahead.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ type Props = {
isClearable: boolean,
isDisabled: boolean,
menuWidth: Optional<number>,
minTypedCharacters?: number,
notFoundLabel: string,
onBlur: Function,
onChange: Function,
Expand Down Expand Up @@ -118,7 +117,6 @@ export default class Typeahead extends PureComponent<Props, State> {
isClearable: PropTypes.bool,
isDisabled: PropTypes.bool,
menuWidth: PropTypes.number,
minTypedCharacters: PropTypes.number,
notFoundLabel: PropTypes.string,
onBlur: PropTypes.func,
onChange: PropTypes.func,
Expand Down Expand Up @@ -175,12 +173,10 @@ export default class Typeahead extends PureComponent<Props, State> {

_handleInputBlur = (): void => {
if (!this.isMouseDown) {
this._clearIfNecessary(() => {
const previousValue = this.state.value;
this._updateValue(() => {
this._afterValueChanged(previousValue)();
this._fireOnBlur();
});
const previousValue = this.state.value;
this._updateValue(() => {
this._afterValueChanged(previousValue)();
this._fireOnBlur();
});
}
};
Expand All @@ -199,7 +195,6 @@ export default class Typeahead extends PureComponent<Props, State> {
}

this._openIfPossible();
this._closeIfNecessary();
});
};

Expand Down Expand Up @@ -253,41 +248,21 @@ export default class Typeahead extends PureComponent<Props, State> {

_openIfPossible = (): void => {
if (!this.state.isOpen) {
this.setState((state, props) => ({
isOpen: props.minTypedCharacters ? props.minTypedCharacters <= state.typedLabel.length : true,
this.setState({
isOpen: true,
highlightedIndex: this._getHighlightedIndexByTypedLabel()
}));
}
};

_closeIfNecessary = (): void => {
const minTypedCharacters = this.props.minTypedCharacters;
if (minTypedCharacters) {
this.setState(state => ({
isOpen: minTypedCharacters <= state.typedLabel.length
}));
}
};

_clearIfNecessary = (afterClear: Function): void => {
if (this.props.minTypedCharacters && this.props.minTypedCharacters > this.state.typedLabel.length) {
this._updateValue(afterClear);
} else {
afterClear();
});
}
};

_getHighlightedIndexByTypedLabel = (): number | typeof undefined => {
if (this.props.minTypedCharacters && this.props.minTypedCharacters > this.state.typedLabel.length) {
return NOTHING_HIGHLIGHTED;
}
const optionIndex = this._getFilteredOptions().findIndex(this._byTypedLabel);
const typedLabelFoundInOptions = optionIndex !== -1;
return typedLabelFoundInOptions ? optionIndex : NOTHING_HIGHLIGHTED;
};

_updateValue = (afterValueUpdated: Function): void => {
const shouldUpdateValue = this.state.isOpen || this.props.minTypedCharacters;
const shouldUpdateValue = this.state.isOpen;
if (shouldUpdateValue) {
const previousValue = this.state.value;
const valueOfHighlightedOption = this._getValueOfHighlightedOption();
Expand Down Expand Up @@ -419,11 +394,6 @@ export default class Typeahead extends PureComponent<Props, State> {
if (optionWithMissingGroupExists) {
throw new Error('There is at least one option with an unknown group.');
}

if (typeof props.minTypedCharacters !== 'undefined') {
console.warn('The prop minTypedCharacters is deprecated. It will be ignored in future versions.' +
'Fortunately, performance is guaranteed due to virtualized lists.');
}
};

static getDerivedStateFromProps(props: Props, prevState: State): ?$Shape<State> {
Expand Down Expand Up @@ -680,7 +650,8 @@ export default class Typeahead extends PureComponent<Props, State> {
{({width}) => (
<List
height={listHeight}
width={typeof menuWidth === 'number' && menuWidth > width ? menuWidth : width - AUTO_SIZER_PADDING}
width={typeof menuWidth === 'number' && menuWidth > width ? menuWidth : width -
AUTO_SIZER_PADDING}
rowCount={rows.length}
noRowsRenderer={this._noRowsRenderer}
rowHeight={calculateRowHeight}
Expand Down
100 changes: 0 additions & 100 deletions src/Typeahead.spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,106 +127,6 @@ describe('Typeahead should', () => {
expect(wrapper.state('isOpen')).toBe(true);
});

it('only open menu on focus enter when minimum typed characters have been typed', () => {
const wrapper = mount(<Typeahead fieldName="fieldName" options={options} minTypedCharacters={3}/>);

wrapper.find('input').simulate('focus');
expect(wrapper.state('isOpen')).toBe(false);

simulateKeys(wrapper, 'v');
wrapper.find('input').simulate('focus');
wrapper.update();
expect(wrapper.state('isOpen')).toBe(false);

simulateKeys(wrapper, 'va');
wrapper.find('input').simulate('focus');
wrapper.update();
expect(wrapper.state('isOpen')).toBe(false);

simulateKeys(wrapper, 'val');
wrapper.find('input').simulate('focus');
wrapper.update();
expect(wrapper.state('isOpen')).toBe(true);
});

it('only open menu on any key down when minimum typed characters have been typed', () => {
const wrapper = mount(<Typeahead fieldName="fieldName" options={options} minTypedCharacters={3}/>);

wrapper.find('input').simulate('keyDown', {which: 'a'});
wrapper.update();
expect(wrapper.state('isOpen')).toBe(false);

simulateKeys(wrapper, 'v');
wrapper.update();
expect(wrapper.state('isOpen')).toBe(false);

simulateKeys(wrapper, 'va');
wrapper.update();
expect(wrapper.state('isOpen')).toBe(false);

simulateKeys(wrapper, 'val');
wrapper.update();
expect(wrapper.state('isOpen')).toBe(true);
});

it('only open menu on arrow key down when minimum typed characters have been typed', () => {
const wrapper = mount(<Typeahead fieldName="fieldName" options={options} minTypedCharacters={3}/>);

wrapper.find('input').simulate('keyDown', {keyCode: KEY_DOWN});
wrapper.update();
expect(wrapper.state('isOpen')).toBe(false);

simulateKeys(wrapper, 'l');
wrapper.find('input').simulate('keyDown', {keyCode: KEY_DOWN});
wrapper.update();
expect(wrapper.state('isOpen')).toBe(false);

simulateKeys(wrapper, 'la');
wrapper.find('input').simulate('keyDown', {keyCode: KEY_DOWN});
wrapper.update();
expect(wrapper.state('isOpen')).toBe(false);

simulateKeys(wrapper, 'lab');
wrapper.find('input').simulate('keyDown', {keyCode: KEY_DOWN});
wrapper.update();
expect(wrapper.state('isOpen')).toBe(true);
});

it('close menu when minimum typed characters have not been typed', () => {
const wrapper = mount(<Typeahead fieldName="fieldName" options={options} minTypedCharacters={3}/>);
wrapper.find('input').simulate('focus');

simulateKeys(wrapper, 'labe');
wrapper.update();
expect(wrapper.state('isOpen')).toBe(true);

simulateKeys(wrapper, 'la');
wrapper.update();
expect(wrapper.state('isOpen')).toBe(false);
});

it('reset value to previously selected value when minimum typed characters have not been typed', () => {
const wrapper = mount(<Typeahead fieldName="fieldName" options={options} minTypedCharacters={3}/>);
wrapper.find('input').simulate('focus');

simulateKeys(wrapper, 'label');
wrapper.find('input').simulate('blur');
expect(wrapper.state('value')).toBe('value1');

simulateKeys(wrapper, 'la');
wrapper.find('input').simulate('blur');
expect(wrapper.state('value')).toBe('value1');
});

it('clear value when minimum typed characters have not been typed', () => {
const wrapper = mount(<Typeahead fieldName="fieldName" options={options} minTypedCharacters={3}/>);
wrapper.find('input').simulate('focus');

simulateKeys(wrapper, 'la');
wrapper.find('input').simulate('blur');
expect(wrapper.state('value')).toBe(undefined);
});

it('close menu on focus lost', () => {
const wrapper = mount(<Typeahead fieldName="fieldName" options={options}/>);
wrapper.find('input').simulate('focus');
Expand Down

0 comments on commit a95ccf8

Please sign in to comment.