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

updating src to fit lib

Browse Source
This commit is contained in:
andrelandgraf 2019-06-12 20:56:57 +02:00
parent 7fd476ecdb
commit 23850c8e9f
2 changed files with 5792 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5741
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

58
src/index.js
View File

@ -27,6 +27,8 @@ class DataListInput extends React.Component {
this.onHandleKeydown = this.onHandleKeydown.bind(this); this.onHandleKeydown = this.onHandleKeydown.bind(this);
this.onClickItem = this.onClickItem.bind(this); this.onClickItem = this.onClickItem.bind(this);
this.onSelect = this.onSelect.bind(this); this.onSelect = this.onSelect.bind(this);
this.renderItems = this.renderItems.bind(this);
this.renderInputField = this.renderInputField.bind(this);
} }
/** /**
@ -140,23 +142,16 @@ class DataListInput extends React.Component {
this.props.onSelect(selectedItem); this.props.onSelect(selectedItem);
} }
render() { renderItems( items, focusIndex, activeItemClassName, itemClassName) {
const currentInput = this.state.currentInput;
const items = this.state.matchingItems;
const placeholder = this.props.placeholder;
return ( return (
<div className="datalist-input"> <div className="datalist-items">
<input onKeyDown={this.onHandleKeydown} onInput={this.onHandleInput} type="text"
className="autocompleteInput"
placeholder={placeholder} value={currentInput}/>
{(currentInput !== "" && this.state.visible &&
<div className={"datalist-items"}>
{items.map((item, i) => { {items.map((item, i) => {
const isActive = focusIndex === i;
const itemActiveClasses = isActive ? `datalist-active-item ${activeItemClassName}` : ''
const itemClasses = `${itemClassName} ${itemActiveClasses};`
return ( return (
<div onClick={this.onClickItem} <div onClick={this.onClickItem}
className={this.state.focusIndex === i ? " datalist-active-item" : undefined} className={itemClasses}
key={item.key}> key={item.key}>
{item.label.substr(0, this.indexOfMatch(currentInput, item))} {item.label.substr(0, this.indexOfMatch(currentInput, item))}
<strong>{item.label.substr(this.indexOfMatch(currentInput, item), currentInput.length)}</strong> <strong>{item.label.substr(this.indexOfMatch(currentInput, item), currentInput.length)}</strong>
@ -165,8 +160,26 @@ class DataListInput extends React.Component {
</div> </div>
) )
})} })}
</div> </div> );
)} }
renderInputField( placeholder, currentInput, inputClassName ) {
return (
<input onKeyDown={this.onHandleKeydown} onInput={this.onHandleInput} type="text"
className={ `autocomplete-input ${inputClassName}` }
placeholder={placeholder} value={currentInput} /> );
}
render() {
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, valu, inputClassName ) }
{ reachedRequiredLength && visible &&
this.renderItems( matchingItems, focusIndex, activeItemClassName, itemClassName )
}
</div> </div>
); );
} }
@ -176,7 +189,20 @@ DataListInput.propTypes = {
items: PropTypes.array.isRequired, items: PropTypes.array.isRequired,
placeholder: PropTypes.string, placeholder: PropTypes.string,
onSelect: PropTypes.func.isRequired, onSelect: PropTypes.func.isRequired,
match: PropTypes.func match: PropTypes.func,
inputClassName: PropTypes.string,
itemClassName: PropTypes.string,
activeItemClassName: PropTypes.string,
requiredInputLength: PropTypes.number,
};
DataListInput.defaultProps = {
placeholder: '',
match: undefined,
inputClassName: '',
itemClassName: '',
activeItemClassName: '',
requiredInputLength: 1,
}; };
export default DataListInput; export default DataListInput;