danog/react-datalist-input
1
0
Fork 0
mirror of https://github.com/danog/react-datalist-input.git synced 2024-12-03 09:57: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

76
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,33 +142,44 @@ class DataListInput extends React.Component {
this.props.onSelect(selectedItem); this.props.onSelect(selectedItem);
} }
renderItems( 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};`
return (
<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}/>
</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() { render() {
const currentInput = this.state.currentInput; const { currentInput, matchingItems, focusIndex, visible } = this.state;
const items = this.state.matchingItems; const { placeholder, inputClassName, activeItemClassName, itemClassName, requiredInputLength } = this.props;
const reachedRequiredLength = currentInput.length >= requiredInputLength;
const placeholder = this.props.placeholder;
return ( return (
<div className="datalist-input"> <div className="datalist-input">
<input onKeyDown={this.onHandleKeydown} onInput={this.onHandleInput} type="text" { this.renderInputField( placeholder, valu, inputClassName ) }
className="autocompleteInput" { reachedRequiredLength && visible &&
placeholder={placeholder} value={currentInput}/> this.renderItems( matchingItems, focusIndex, activeItemClassName, itemClassName )
{(currentInput !== "" && this.state.visible && }
<div className={"datalist-items"}>
{items.map((item, i) => {
return (
<div onClick={this.onClickItem}
className={this.state.focusIndex === i ? " datalist-active-item" : undefined}
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}/>
</div>
)
})}
</div>
)}
</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;