danog/react-datalist-input
1
0
Fork 0
mirror of https://github.com/danog/react-datalist-input.git synced 2025-01-22 22:02:27 +01:00
Code Issues Projects Releases Wiki Activity

show matching items on click if currentInput

Browse Source
This commit is contained in:
Andre Landgraf 2019-06-13 23:11:07 +02:00
parent a8fa2d0ba0
commit 4f889e8820
2 changed files with 21 additions and 9 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",
"version": "1.1.19",
"version": "1.1.21",
"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",
"license": "MIT",

28
src/DataListInput.jsx
View File

@ -60,10 +60,14 @@ class DataListInput extends React.Component {
}
onClickInput = () => {
const { currentInput, visible, matchingItems } = this.state;
const { requiredInputLength, dropDownLength, items } = this.props;
const { currentInput, visible } = this.state;
const { requiredInputLength, dropDownLength, items, match } = this.props;
const reachedRequiredLength = currentInput.length >= requiredInputLength;
if ( reachedRequiredLength && !visible ) {
const matchingItems = items.filter( ( item ) => {
if ( typeof ( match ) === typeof ( Function ) ) { return match( currentInput, item ); }
return this.match( currentInput, item );
} );
const displayableItems = matchingItems.length
? matchingItems : items.slice( 0, dropDownLength )
this.setState( { visible: true, matchingItems: displayableItems, focusIndex: 0, } );
@ -106,7 +110,7 @@ class DataListInput extends React.Component {
* @param item
* @returns {boolean}
*/
match = ( currentInput, item ) => item.contains( currentInput) && item
match = ( currentInput, item ) => item
.label.substr( 0, currentInput.length ).toUpperCase() === currentInput.toUpperCase();
/**
@ -204,13 +208,21 @@ class DataListInput extends React.Component {
onSelect( selectedItem );
};
renderMatchingLabel = ( currentInput, item ) => (
<React.Fragment>
{item.label.substr( 0, this.indexOfMatch( currentInput, item ) ) }
<strong>
{ item.label.substr( this.indexOfMatch( currentInput, item ), currentInput.length ) }
</strong>
{ item.label.substr( this.indexOfMatch( currentInput, item ) + currentInput.length ) }
</React.Fragment>
);
renderItemLabel = ( currentInput, item ) => (
<React.Fragment>
{item.label.substr( 0, this.indexOfMatch( currentInput, item ) )}
<strong>
{item.label.substr( this.indexOfMatch( currentInput, item ), currentInput.length )}
</strong>
{item.label.substr( this.indexOfMatch( currentInput, item ) + currentInput.length )}
{ this.indexOfMatch( currentInput, item ) > 0
? this.renderMatchingLabel( currentInput, item )
: item.label }
</React.Fragment>
)