danog/react-datalist-input
1
0
Fork 0
mirror of https://github.com/danog/react-datalist-input.git synced 2024-12-03 18:07:55 +01:00
Code Issues Projects Releases Wiki Activity

new version, adding external styling via props

Browse Source
This commit is contained in:
Andre Landgraf 2019-06-12 12:26:27 +02:00
parent 0f725f862e
commit 7fd476ecdb
2 changed files with 49 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/DataListInput.css
View File

@ -5,16 +5,13 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
input { .autocomplete-input {
border: 1px solid transparent; border: 1px solid transparent;
background-color: #f1f1f1; background-color: #f1f1f1;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
.datalist-items { .datalist-items {
position: absolute; position: absolute;
border: 1px solid #d4d4d4; border: 1px solid #d4d4d4;

72
lib/DataListInput.js
View File

@ -133,33 +133,42 @@ class DataListInput extends React.Component {
this.props.onSelect(selectedItem); this.props.onSelect(selectedItem);
}; };
renderItems = ( 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};`
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 ) => (
<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>
); );
} }
@ -169,7 +178,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;