danog/react-datalist-input
1
0
Fork 0
mirror of https://github.com/danog/react-datalist-input.git synced 2024-12-02 17:37:50 +01:00
Code Issues Projects Releases Wiki Activity

bug fixing and more features

Browse Source
This commit is contained in:
Andre Landgraf 2019-06-13 22:15:08 +02:00
parent 873642c1b0
commit a8fa2d0ba0
2 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "react-datalist-input", "name": "react-datalist-input",
"version": "1.1.12", "version": "1.1.19",
"description": "This package provides a react component as follows: an input field with a drop down menu to pick a possible option based on the current input.", "description": "This package provides a react component as follows: an input field with a drop down menu to pick a possible option based on the current input.",
"main": "./lib/DataListInput.js", "main": "./lib/DataListInput.js",
"license": "MIT", "license": "MIT",

29
src/DataListInput.jsx
View File

@ -39,7 +39,7 @@ class DataListInput extends React.Component {
return; return;
} }
// do not do anything if input is clicked, as we have a dedicated func for that // do not do anything if input is clicked, as we have a dedicated func for that
const input = document.getElementByClassName( 'autocomplete-input' ); const input = document.getElementsByClassName( 'autocomplete-input' );
if( !input ) return; if( !input ) return;
for( let i = 0; i < input.length; i+=1 ) { for( let i = 0; i < input.length; i+=1 ) {
const targetIsInput = event.target === input[i]; const targetIsInput = event.target === input[i];
@ -48,17 +48,28 @@ class DataListInput extends React.Component {
} }
// do not close menu if user clicked inside // do not close menu if user clicked inside
for( let i = 0; i < input.length; i+=1 ) { for( let i = 0; i < menu.length; i+=1 ) {
const targetInMenu = menu[ i ].contains( event.target ); const targetInMenu = menu[ i ].contains( event.target );
const targetIsMenu = event.target === menu[ i ]; const targetIsMenu = event.target === menu[ i ];
if ( targetIsInput || targetInInput ) return; if ( targetInMenu || targetIsMenu ) return;
} }
const { visible } = this.state; const { visible } = this.state;
if ( visible && ( !targetInMenu && !targetIsMenu ) ) { if ( visible ) {
this.setState( { visible: false, focusIndex: -1 } ); this.setState( { visible: false, focusIndex: -1 } );
} }
} }
onClickInput = () => {
const { currentInput, visible, matchingItems } = this.state;
const { requiredInputLength, dropDownLength, items } = this.props;
const reachedRequiredLength = currentInput.length >= requiredInputLength;
if ( reachedRequiredLength && !visible ) {
const displayableItems = matchingItems.length
? matchingItems : items.slice( 0, dropDownLength )
this.setState( { visible: true, matchingItems: displayableItems, focusIndex: 0, } );
}
}
/** /**
* gets called when someone starts to write in the input field * gets called when someone starts to write in the input field
* @param value * @param value
@ -70,7 +81,7 @@ class DataListInput extends React.Component {
if ( typeof ( match ) === typeof ( Function ) ) { return match( currentInput, item ); } if ( typeof ( match ) === typeof ( Function ) ) { return match( currentInput, item ); }
return this.match( currentInput, item ); return this.match( currentInput, item );
} ); } );
const displayableItems = matchingItems.slice( dropDownLength, matchingItems.length ); const displayableItems = matchingItems.slice( 0, dropDownLength );
if( matchingItems.length > 0) { if( matchingItems.length > 0) {
this.setState( { this.setState( {
currentInput, currentInput,
@ -95,7 +106,7 @@ class DataListInput extends React.Component {
* @param item * @param item
* @returns {boolean} * @returns {boolean}
*/ */
match = ( currentInput, item ) => item match = ( currentInput, item ) => item.contains( currentInput) && item
.label.substr( 0, currentInput.length ).toUpperCase() === currentInput.toUpperCase(); .label.substr( 0, currentInput.length ).toUpperCase() === currentInput.toUpperCase();
/** /**
@ -226,10 +237,10 @@ class DataListInput extends React.Component {
</div> </div>
); );
renderInputField = ( placeholder, currentInput, inputClassName, reachedRequiredLength ) => ( renderInputField = ( placeholder, currentInput, inputClassName ) => (
<input <input
onChange={this.onHandleInput} onChange={this.onHandleInput}
onClick={ reachedRequiredLength && this.setState( { visible: true } ) } onClick={ this.onClickInput }
onKeyDown={this.onHandleKeydown} onKeyDown={this.onHandleKeydown}
type="text" type="text"
className={`autocomplete-input ${ inputClassName }`} className={`autocomplete-input ${ inputClassName }`}
@ -248,7 +259,7 @@ class DataListInput extends React.Component {
const reachedRequiredLength = currentInput.length >= requiredInputLength; const reachedRequiredLength = currentInput.length >= requiredInputLength;
return ( return (
<div className="datalist-input"> <div className="datalist-input">
{ this.renderInputField( placeholder, currentInput, inputClassName, reachedRequiredLength ) } { this.renderInputField( placeholder, currentInput, inputClassName ) }
{ reachedRequiredLength && visible { reachedRequiredLength && visible
&& this.renderItems( currentInput, matchingItems, focusIndex, && this.renderItems( currentInput, matchingItems, focusIndex,
activeItemClassName, itemClassName ) activeItemClassName, itemClassName )