mirror of
https://github.com/danog/react-datalist-input.git
synced 2024-12-02 17:37:50 +01:00
went linting
This commit is contained in:
andrelandgraf
parent
7ef3ff88e5
commit
c7a31b06e4
@ -1,10 +1,9 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import './DataListInput.css';
|
||||
import './input.scss';
|
||||
|
||||
class DataListInput extends React.Component {
|
||||
|
||||
constructor( props ) {
|
||||
super( props );
|
||||
|
||||
@ -12,7 +11,7 @@ class DataListInput extends React.Component {
|
||||
/* last valid item that was selected from the drop down menu */
|
||||
lastValidItem: undefined,
|
||||
/* current input text */
|
||||
currentInput: "",
|
||||
currentInput: '',
|
||||
/* current set of matching items */
|
||||
matchingItems: [],
|
||||
/* visibility property of the drop down menu */
|
||||
@ -24,32 +23,32 @@ class DataListInput extends React.Component {
|
||||
|
||||
/**
|
||||
* gets called when someone starts to write in the input field
|
||||
* @param event
|
||||
* @param value
|
||||
*/
|
||||
onHandleInput = ( event ) => {
|
||||
const currentInput = event.target.value;
|
||||
const matchingItems = this.props.items.filter((item) => {
|
||||
if (typeof(this.props.match) === typeof(Function))
|
||||
return this.props.match(currentInput, item);
|
||||
const { items, match } = this.props;
|
||||
const matchingItems = items.filter( ( item ) => {
|
||||
if ( typeof ( match ) === typeof ( Function ) ) { return match( currentInput, item ); }
|
||||
return this.match( currentInput, item );
|
||||
} );
|
||||
this.setState( {
|
||||
currentInput: currentInput,
|
||||
matchingItems: matchingItems,
|
||||
currentInput,
|
||||
matchingItems,
|
||||
focusIndex: 0,
|
||||
visible: true,
|
||||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* default function for matching the current input value (needle) and the values of the items array
|
||||
* default function for matching the current input value (needle)
|
||||
* and the values of the items array
|
||||
* @param currentInput
|
||||
* @param item
|
||||
* @returns {boolean}
|
||||
*/
|
||||
match = (currentInput, item) => {
|
||||
return item.label.substr(0, currentInput.length).toUpperCase() === currentInput.toUpperCase();
|
||||
};
|
||||
match = ( currentInput, item ) => item
|
||||
.label.substr( 0, currentInput.length ).toUpperCase() === currentInput.toUpperCase();
|
||||
|
||||
/**
|
||||
* function for getting the index of the currentValue inside a value of the values array
|
||||
@ -57,22 +56,22 @@ class DataListInput extends React.Component {
|
||||
* @param item
|
||||
* @returns {number}
|
||||
*/
|
||||
indexOfMatch = (currentInput, item) => {
|
||||
return item.label.toUpperCase().indexOf(currentInput.toUpperCase());
|
||||
};
|
||||
indexOfMatch = ( currentInput, item ) => item
|
||||
.label.toUpperCase().indexOf( currentInput.toUpperCase() );
|
||||
|
||||
/**
|
||||
* handle key events
|
||||
* @param event
|
||||
*/
|
||||
onHandleKeydown = ( event ) => {
|
||||
const { visible, focusIndex, matchingItems } = this.state;
|
||||
// only do something if drop-down div is visible
|
||||
if (!this.state.visible) return;
|
||||
let currentFocusIndex = this.state.focusIndex;
|
||||
if ( !visible ) return;
|
||||
let currentFocusIndex = focusIndex;
|
||||
if ( event.keyCode === 40 || event.keyCode === 9 ) {
|
||||
// If the arrow DOWN key or tab is pressed increase the currentFocus variable:
|
||||
currentFocusIndex += 1;
|
||||
if (currentFocusIndex >= this.state.matchingItems.length) currentFocusIndex = 0;
|
||||
if ( currentFocusIndex >= matchingItems.length ) currentFocusIndex = 0;
|
||||
this.setState( {
|
||||
focusIndex: currentFocusIndex,
|
||||
} );
|
||||
@ -81,15 +80,15 @@ class DataListInput extends React.Component {
|
||||
} else if ( event.keyCode === 38 ) {
|
||||
// If the arrow UP key is pressed, decrease the currentFocus variable:
|
||||
currentFocusIndex -= 1;
|
||||
if (currentFocusIndex <= -1) currentFocusIndex = this.state.matchingItems.length - 1;
|
||||
if ( currentFocusIndex <= -1 ) currentFocusIndex = matchingItems.length - 1;
|
||||
this.setState( {
|
||||
focusIndex: currentFocusIndex,
|
||||
} );
|
||||
} else if ( event.keyCode === 13 ) {
|
||||
// Enter pressed, similar to onClickItem
|
||||
if (this.state.focusIndex > -1) {
|
||||
if ( focusIndex > -1 ) {
|
||||
// Simulate a click on the "active" item:
|
||||
const selectedItem = this.state.matchingItems[currentFocusIndex];
|
||||
const selectedItem = matchingItems[ currentFocusIndex ];
|
||||
this.onSelect( selectedItem );
|
||||
}
|
||||
}
|
||||
@ -100,9 +99,17 @@ class DataListInput extends React.Component {
|
||||
* @param event
|
||||
*/
|
||||
onClickItem = ( event ) => {
|
||||
const { matchingItems } = this.state;
|
||||
// update the input value and close the dropdown again
|
||||
const selectedKey = event.currentTarget.children[1].value;
|
||||
const selectedItem = this.state.matchingItems.find(item => item.key === selectedKey);
|
||||
const elements = event.currentTarget.children;
|
||||
let selectedKey;
|
||||
for ( let i = 0; i < elements.length; i += 1 ) {
|
||||
if ( elements[ i ].tagName === 'INPUT' ) {
|
||||
selectedKey = Number( elements[ i ].value );
|
||||
break;
|
||||
}
|
||||
}
|
||||
const selectedItem = matchingItems.find( item => item.key === selectedKey );
|
||||
this.onSelect( selectedItem );
|
||||
};
|
||||
|
||||
@ -112,7 +119,9 @@ class DataListInput extends React.Component {
|
||||
* @param selectedItem
|
||||
*/
|
||||
onSelect = ( selectedItem ) => {
|
||||
if (this.state.lastValidItem !== undefined && selectedItem.key === this.state.lastValidItem.key){
|
||||
console.log( selectedItem );
|
||||
const { lastValidItem } = this.state;
|
||||
if ( lastValidItem && selectedItem.key === lastValidItem.key ) {
|
||||
// do not trigger the callback function
|
||||
// but still change state to fit new selection
|
||||
this.setState( {
|
||||
@ -130,44 +139,68 @@ class DataListInput extends React.Component {
|
||||
focusIndex: -1,
|
||||
} );
|
||||
// callback function onSelect
|
||||
this.props.onSelect(selectedItem);
|
||||
const { onSelect } = this.props;
|
||||
onSelect( selectedItem );
|
||||
};
|
||||
|
||||
renderItems = ( items, focusIndex, activeItemClassName, itemClassName) => (
|
||||
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 )}
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
renderItems = ( currentInput, items, focusIndex, activeItemClassName, itemClassName ) => (
|
||||
<div className="datalist-items">
|
||||
{items.map( ( item, i ) => {
|
||||
const isActive = focusIndex === i;
|
||||
const itemActiveClasses = isActive ? `datalist-active-item ${activeItemClassName}` : ''
|
||||
const itemClasses = `${itemClassName} ${itemActiveClasses};`
|
||||
const itemActiveClasses = isActive ? `datalist-active-item ${ activeItemClassName }` : '';
|
||||
const itemClasses = `${ itemClassName } ${ itemActiveClasses };`;
|
||||
return (
|
||||
<div onClick={this.onClickItem}
|
||||
<div
|
||||
onClick={this.onClickItem}
|
||||
className={itemClasses}
|
||||
key={item.key}>
|
||||
{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)}
|
||||
<input type='hidden' value={item.key}/>
|
||||
key={item.key}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onKeyUp={event => event.preventDefault()}
|
||||
>
|
||||
{ this.renderItemLabel( currentInput, item )}
|
||||
<input type="hidden" value={item.key} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
} )}
|
||||
</div>
|
||||
);
|
||||
|
||||
renderInputField = ( placeholder, currentInput, inputClassName ) => (
|
||||
<input onKeyDown={this.onHandleKeydown} onInput={this.onHandleInput} type="text"
|
||||
<input
|
||||
onChange={this.onHandleInput}
|
||||
onKeyDown={this.onHandleKeydown}
|
||||
type="text"
|
||||
className={`autocomplete-input ${ inputClassName }`}
|
||||
placeholder={placeholder} value={currentInput}/>
|
||||
placeholder={placeholder}
|
||||
value={currentInput}
|
||||
/>
|
||||
)
|
||||
|
||||
render() {
|
||||
const { currentInput, matchingItems, focusIndex, visible } = this.state;
|
||||
const { placeholder, inputClassName, activeItemClassName, itemClassName, requiredInputLength } = this.props;
|
||||
const {
|
||||
currentInput, matchingItems, focusIndex, visible,
|
||||
} = this.state;
|
||||
const {
|
||||
placeholder, inputClassName, activeItemClassName, itemClassName, requiredInputLength,
|
||||
} = this.props;
|
||||
const reachedRequiredLength = currentInput.length >= requiredInputLength;
|
||||
return (
|
||||
<div className="datalist-input">
|
||||
{ this.renderInputField( placeholder, currentInput, inputClassName ) }
|
||||
{ reachedRequiredLength && visible &&
|
||||
this.renderItems( matchingItems, focusIndex, activeItemClassName, itemClassName )
|
||||
{ reachedRequiredLength && visible
|
||||
&& this.renderItems( currentInput, matchingItems, focusIndex,
|
||||
activeItemClassName, itemClassName )
|
||||
}
|
||||
</div>
|
||||
);
|
||||
@ -175,7 +208,12 @@ class DataListInput extends React.Component {
|
||||
}
|
||||
|
||||
DataListInput.propTypes = {
|
||||
items: PropTypes.array.isRequired,
|
||||
items: PropTypes.arrayOf(
|
||||
PropTypes.shape( {
|
||||
label: PropTypes.string.isRequired,
|
||||
key: PropTypes.number.isRequired,
|
||||
} ),
|
||||
).isRequired,
|
||||
placeholder: PropTypes.string,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
match: PropTypes.func,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-datalist-input",
|
||||
"version": "1.0.8",
|
||||
"version": "1.0.11",
|
||||
"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": "build/index.js",
|
||||
"repository": {
|
||||
|
||||
112
src/index.js
112
src/index.js
@ -29,29 +29,31 @@ class DataListInput extends React.Component {
|
||||
this.onSelect = this.onSelect.bind(this);
|
||||
this.renderItems = this.renderItems.bind(this);
|
||||
this.renderInputField = this.renderInputField.bind(this);
|
||||
this.renderItemLabel = this.renderItemLabel.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* gets called when someone starts to write in the input field
|
||||
* @param event
|
||||
* @param value
|
||||
*/
|
||||
onHandleInput( event ){
|
||||
const currentInput = event.target.value;
|
||||
const matchingItems = this.props.items.filter((item) => {
|
||||
if (typeof(this.props.match) === typeof(Function))
|
||||
return this.props.match(currentInput, item);
|
||||
const { items, match } = this.props;
|
||||
const matchingItems = items.filter( ( item ) => {
|
||||
if ( typeof ( match ) === typeof ( Function ) ) { return match( currentInput, item ); }
|
||||
return this.match( currentInput, item );
|
||||
} );
|
||||
this.setState( {
|
||||
currentInput: currentInput,
|
||||
matchingItems: matchingItems,
|
||||
currentInput,
|
||||
matchingItems,
|
||||
focusIndex: 0,
|
||||
visible: true,
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* default function for matching the current input value (needle) and the values of the items array
|
||||
* default function for matching the current input value (needle)
|
||||
* and the values of the items array
|
||||
* @param currentInput
|
||||
* @param item
|
||||
* @returns {boolean}
|
||||
@ -75,13 +77,14 @@ class DataListInput extends React.Component {
|
||||
* @param event
|
||||
*/
|
||||
onHandleKeydown( event ) {
|
||||
const { visible, focusIndex, matchingItems } = this.state;
|
||||
// only do something if drop-down div is visible
|
||||
if (!this.state.visible) return;
|
||||
let currentFocusIndex = this.state.focusIndex;
|
||||
if ( !visible ) return;
|
||||
let currentFocusIndex = focusIndex;
|
||||
if ( event.keyCode === 40 || event.keyCode === 9 ) {
|
||||
// If the arrow DOWN key or tab is pressed increase the currentFocus variable:
|
||||
currentFocusIndex += 1;
|
||||
if (currentFocusIndex >= this.state.matchingItems.length) currentFocusIndex = 0;
|
||||
if ( currentFocusIndex >= matchingItems.length ) currentFocusIndex = 0;
|
||||
this.setState( {
|
||||
focusIndex: currentFocusIndex,
|
||||
} );
|
||||
@ -90,15 +93,15 @@ class DataListInput extends React.Component {
|
||||
} else if ( event.keyCode === 38 ) {
|
||||
// If the arrow UP key is pressed, decrease the currentFocus variable:
|
||||
currentFocusIndex -= 1;
|
||||
if (currentFocusIndex <= -1) currentFocusIndex = this.state.matchingItems.length - 1;
|
||||
if ( currentFocusIndex <= -1 ) currentFocusIndex = matchingItems.length - 1;
|
||||
this.setState( {
|
||||
focusIndex: currentFocusIndex,
|
||||
} );
|
||||
} else if ( event.keyCode === 13 ) {
|
||||
// Enter pressed, similar to onClickItem
|
||||
if (this.state.focusIndex > -1) {
|
||||
if ( focusIndex > -1 ) {
|
||||
// Simulate a click on the "active" item:
|
||||
const selectedItem = this.state.matchingItems[currentFocusIndex];
|
||||
const selectedItem = matchingItems[ currentFocusIndex ];
|
||||
this.onSelect( selectedItem );
|
||||
}
|
||||
}
|
||||
@ -109,9 +112,17 @@ class DataListInput extends React.Component {
|
||||
* @param event
|
||||
*/
|
||||
onClickItem( event ) {
|
||||
const { matchingItems } = this.state;
|
||||
// update the input value and close the dropdown again
|
||||
const selectedKey = event.currentTarget.children[1].value;
|
||||
const selectedItem = this.state.matchingItems.find(item => item.key === selectedKey);
|
||||
const elements = event.currentTarget.children;
|
||||
let selectedKey;
|
||||
for ( let i = 0; i < elements.length; i += 1 ) {
|
||||
if ( elements[ i ].tagName === 'INPUT' ) {
|
||||
selectedKey = Number( elements[ i ].value );
|
||||
break;
|
||||
}
|
||||
}
|
||||
const selectedItem = matchingItems.find( item => item.key === selectedKey );
|
||||
this.onSelect( selectedItem );
|
||||
}
|
||||
|
||||
@ -121,7 +132,8 @@ class DataListInput extends React.Component {
|
||||
* @param selectedItem
|
||||
*/
|
||||
onSelect( selectedItem ) {
|
||||
if (this.state.lastValidItem !== undefined && selectedItem.key === this.state.lastValidItem.key){
|
||||
const { lastValidItem } = this.state;
|
||||
if ( lastValidItem && selectedItem.key === lastValidItem.key ) {
|
||||
// do not trigger the callback function
|
||||
// but still change state to fit new selection
|
||||
this.setState( {
|
||||
@ -139,46 +151,73 @@ class DataListInput extends React.Component {
|
||||
focusIndex: -1,
|
||||
} );
|
||||
// callback function onSelect
|
||||
this.props.onSelect(selectedItem);
|
||||
const { onSelect } = this.props;
|
||||
onSelect( selectedItem );
|
||||
}
|
||||
|
||||
renderItems( items, focusIndex, activeItemClassName, itemClassName) {
|
||||
renderItemLabel( currentInput, item ) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
renderItems( currentInput, items, focusIndex, activeItemClassName, itemClassName ) {
|
||||
return (
|
||||
<div className="datalist-items">
|
||||
{items.map( ( item, i ) => {
|
||||
const isActive = focusIndex === i;
|
||||
const itemActiveClasses = isActive ? `datalist-active-item ${activeItemClassName}` : ''
|
||||
const itemClasses = `${itemClassName} ${itemActiveClasses};`
|
||||
const itemActiveClasses = isActive ? `datalist-active-item ${ activeItemClassName }` : '';
|
||||
const itemClasses = `${ itemClassName } ${ itemActiveClasses };`;
|
||||
return (
|
||||
<div onClick={this.onClickItem}
|
||||
<div
|
||||
onClick={this.onClickItem}
|
||||
className={itemClasses}
|
||||
key={item.key}>
|
||||
{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)}
|
||||
<input type='hidden' value={item.key}/>
|
||||
key={item.key}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onKeyUp={event => event.preventDefault()}
|
||||
>
|
||||
{ this.renderItemLabel( currentInput, item )}
|
||||
<input type="hidden" value={item.key} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
} )}
|
||||
</div> );
|
||||
}
|
||||
|
||||
renderInputField( placeholder, currentInput, inputClassName ) {
|
||||
return (
|
||||
<input onKeyDown={this.onHandleKeydown} onInput={this.onHandleInput} type="text"
|
||||
<input
|
||||
onChange={this.onHandleInput}
|
||||
onKeyDown={this.onHandleKeydown}
|
||||
type="text"
|
||||
className={`autocomplete-input ${ inputClassName }`}
|
||||
placeholder={placeholder} value={currentInput} /> );
|
||||
placeholder={placeholder}
|
||||
value={currentInput}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { currentInput, matchingItems, focusIndex, visible } = this.state;
|
||||
const { placeholder, inputClassName, activeItemClassName, itemClassName, requiredInputLength } = this.props;
|
||||
const {
|
||||
currentInput, matchingItems, focusIndex, visible,
|
||||
} = this.state;
|
||||
const {
|
||||
placeholder, inputClassName, activeItemClassName, itemClassName, requiredInputLength,
|
||||
} = this.props;
|
||||
const reachedRequiredLength = currentInput.length >= requiredInputLength;
|
||||
return (
|
||||
<div className="datalist-input">
|
||||
{ this.renderInputField( placeholder, currentInput, inputClassName ) }
|
||||
{ reachedRequiredLength && visible &&
|
||||
this.renderItems( matchingItems, focusIndex, activeItemClassName, itemClassName )
|
||||
{ reachedRequiredLength && visible
|
||||
&& this.renderItems( currentInput, matchingItems, focusIndex,
|
||||
activeItemClassName, itemClassName )
|
||||
}
|
||||
</div>
|
||||
);
|
||||
@ -186,7 +225,12 @@ class DataListInput extends React.Component {
|
||||
}
|
||||
|
||||
DataListInput.propTypes = {
|
||||
items: PropTypes.array.isRequired,
|
||||
items: PropTypes.arrayOf(
|
||||
PropTypes.shape( {
|
||||
label: PropTypes.string.isRequired,
|
||||
key: PropTypes.number.isRequired,
|
||||
} ),
|
||||
).isRequired,
|
||||
placeholder: PropTypes.string,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
match: PropTypes.func,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user