mirror of
https://github.com/danog/react-datalist-input.git
synced 2024-12-02 17:37:50 +01:00
moved to newest version of webpack and babel
This commit is contained in:
andrelandgraf
parent
223fe7400b
commit
9b27332323
7
.babelrc
7
.babelrc
@ -1,7 +1,4 @@
|
||||
{
|
||||
"presets": ["env"],
|
||||
"plugins": [
|
||||
"transform-object-rest-spread",
|
||||
"transform-react-jsx"
|
||||
]
|
||||
"presets": ["@babel/preset-env", "@babel/preset-react"],
|
||||
"plugins": ["@babel/plugin-proposal-class-properties"]
|
||||
}
|
||||
14
dist/main.js
vendored
Normal file
14
dist/main.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,40 +0,0 @@
|
||||
.datalist-input {
|
||||
/*the container must be positioned relative:*/
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.autocomplete-input {
|
||||
border: 1px solid transparent;
|
||||
background-color: #f1f1f1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.datalist-items {
|
||||
position: absolute;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
z-index: 99;
|
||||
/*position the autocomplete items to be the same width as the container:*/
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.datalist-items div {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
.datalist-items div:hover {
|
||||
/*when hovering an item:*/
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.datalist-active-item {
|
||||
/*when navigating through the items using the arrow keys:*/
|
||||
background-color: DodgerBlue !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
@ -1,235 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import './input.scss';
|
||||
|
||||
class DataListInput extends React.Component {
|
||||
constructor( props ) {
|
||||
super( props );
|
||||
|
||||
this.state = {
|
||||
/* last valid item that was selected from the drop down menu */
|
||||
lastValidItem: undefined,
|
||||
/* current input text */
|
||||
currentInput: '',
|
||||
/* current set of matching items */
|
||||
matchingItems: [],
|
||||
/* visibility property of the drop down menu */
|
||||
visible: false,
|
||||
/* index of the currently focused item in the drop down menu */
|
||||
focusIndex: 0,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* gets called when someone starts to write in the input field
|
||||
* @param value
|
||||
*/
|
||||
onHandleInput = ( event ) => {
|
||||
const currentInput = event.target.value;
|
||||
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,
|
||||
matchingItems,
|
||||
focusIndex: 0,
|
||||
visible: true,
|
||||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 ) => item
|
||||
.label.substr( 0, currentInput.length ).toUpperCase() === currentInput.toUpperCase();
|
||||
|
||||
/**
|
||||
* function for getting the index of the currentValue inside a value of the values array
|
||||
* @param currentInput
|
||||
* @param item
|
||||
* @returns {number}
|
||||
*/
|
||||
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 ( !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 >= matchingItems.length ) currentFocusIndex = 0;
|
||||
this.setState( {
|
||||
focusIndex: currentFocusIndex,
|
||||
} );
|
||||
// prevent tab to jump to the next input field if drop down is still open
|
||||
event.preventDefault();
|
||||
} else if ( event.keyCode === 38 ) {
|
||||
// If the arrow UP key is pressed, decrease the currentFocus variable:
|
||||
currentFocusIndex -= 1;
|
||||
if ( currentFocusIndex <= -1 ) currentFocusIndex = matchingItems.length - 1;
|
||||
this.setState( {
|
||||
focusIndex: currentFocusIndex,
|
||||
} );
|
||||
} else if ( event.keyCode === 13 ) {
|
||||
// Enter pressed, similar to onClickItem
|
||||
if ( focusIndex > -1 ) {
|
||||
// Simulate a click on the "active" item:
|
||||
const selectedItem = matchingItems[ currentFocusIndex ];
|
||||
this.onSelect( selectedItem );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* onClickItem gets called when onClick happens on one of the list elements
|
||||
* @param event
|
||||
*/
|
||||
onClickItem = ( event ) => {
|
||||
const { matchingItems } = this.state;
|
||||
// update the input value and close the dropdown again
|
||||
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 );
|
||||
};
|
||||
|
||||
/**
|
||||
* onSelect is called onClickItem and onEnter upon an option of the drop down menu
|
||||
* does nothing if the key has not changed since the last onSelect event
|
||||
* @param selectedItem
|
||||
*/
|
||||
onSelect = ( selectedItem ) => {
|
||||
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( {
|
||||
currentInput: selectedItem.label,
|
||||
visible: false,
|
||||
focusIndex: -1,
|
||||
} );
|
||||
return;
|
||||
}
|
||||
// change state to fit new selection
|
||||
this.setState( {
|
||||
currentInput: selectedItem.label,
|
||||
lastValidItem: selectedItem,
|
||||
visible: false,
|
||||
focusIndex: -1,
|
||||
} );
|
||||
// callback function onSelect
|
||||
const { onSelect } = this.props;
|
||||
onSelect( selectedItem );
|
||||
};
|
||||
|
||||
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 };`;
|
||||
return (
|
||||
<div
|
||||
onClick={this.onClickItem}
|
||||
className={itemClasses}
|
||||
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
|
||||
onChange={this.onHandleInput}
|
||||
onKeyDown={this.onHandleKeydown}
|
||||
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, currentInput, inputClassName ) }
|
||||
{ reachedRequiredLength && visible
|
||||
&& this.renderItems( currentInput, matchingItems, focusIndex,
|
||||
activeItemClassName, itemClassName )
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DataListInput.propTypes = {
|
||||
items: PropTypes.arrayOf(
|
||||
PropTypes.shape( {
|
||||
label: PropTypes.string.isRequired,
|
||||
key: PropTypes.number.isRequired,
|
||||
} ),
|
||||
).isRequired,
|
||||
placeholder: PropTypes.string,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
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;
|
||||
@ -1 +0,0 @@
|
||||
Feel free to use those files instead of the npm package if you want to tinker with the component / css and just use it inside your project.
|
||||
5458
package-lock.json
generated
5458
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
30
package.json
30
package.json
@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "react-datalist-input",
|
||||
"version": "1.0.12",
|
||||
"version": "1.1.0",
|
||||
"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",
|
||||
"main": "dist/main.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/andrelandgraf/react-datalist-input.git"
|
||||
@ -28,17 +28,18 @@
|
||||
"input"
|
||||
],
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.23.0",
|
||||
"babel-plugin-transform-react-jsx": "^6.24.1",
|
||||
"babel-plugin-transform-react-remove-prop-types": "^0.4.8",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-env": "^1.5.1",
|
||||
"style-loader": "^0.21.0",
|
||||
"css-loader": "^1.0.0",
|
||||
"webpack": "^3.5.5"
|
||||
"@babel/core": "^7.4.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.4.4",
|
||||
"@babel/preset-env": "^7.4.5",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"css-loader": "^3.0.0",
|
||||
"html-loader": "^0.5.5",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"style-loader": "^0.23.1",
|
||||
"webpack": "^4.33.0",
|
||||
"webpack-cli": "^3.3.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": "^15.6.1"
|
||||
@ -48,7 +49,6 @@
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "webpack --watch",
|
||||
"build": "webpack"
|
||||
"build": "webpack --mode production"
|
||||
}
|
||||
}
|
||||
|
||||
93
src/index.js
93
src/index.js
@ -4,15 +4,14 @@ import PropTypes from 'prop-types';
|
||||
import './index.css';
|
||||
|
||||
class DataListInput extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
constructor( props ) {
|
||||
super( props );
|
||||
|
||||
this.state = {
|
||||
/* 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 */
|
||||
@ -20,23 +19,13 @@ class DataListInput extends React.Component {
|
||||
/* index of the currently focused item in the drop down menu */
|
||||
focusIndex: 0,
|
||||
};
|
||||
|
||||
this.onHandleInput = this.onHandleInput.bind(this);
|
||||
this.match = this.match.bind(this);
|
||||
this.indexOfMatch = this.indexOfMatch.bind(this);
|
||||
this.onHandleKeydown = this.onHandleKeydown.bind(this);
|
||||
this.onClickItem = this.onClickItem.bind(this);
|
||||
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 value
|
||||
*/
|
||||
onHandleInput( event ){
|
||||
onHandleInput = ( event ) => {
|
||||
const currentInput = event.target.value;
|
||||
const { items, match } = this.props;
|
||||
const matchingItems = items.filter( ( item ) => {
|
||||
@ -49,7 +38,7 @@ class DataListInput extends React.Component {
|
||||
focusIndex: 0,
|
||||
visible: true,
|
||||
} );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* default function for matching the current input value (needle)
|
||||
@ -58,9 +47,8 @@ class DataListInput extends React.Component {
|
||||
* @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
|
||||
@ -68,15 +56,14 @@ 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 ) {
|
||||
onHandleKeydown = ( event ) => {
|
||||
const { visible, focusIndex, matchingItems } = this.state;
|
||||
// only do something if drop-down div is visible
|
||||
if ( !visible ) return;
|
||||
@ -105,13 +92,13 @@ class DataListInput extends React.Component {
|
||||
this.onSelect( selectedItem );
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* onClickItem gets called when onClick happens on one of the list elements
|
||||
* @param event
|
||||
*/
|
||||
onClickItem( event ) {
|
||||
onClickItem = ( event ) => {
|
||||
const { matchingItems } = this.state;
|
||||
// update the input value and close the dropdown again
|
||||
const elements = event.currentTarget.children;
|
||||
@ -124,14 +111,15 @@ class DataListInput extends React.Component {
|
||||
}
|
||||
const selectedItem = matchingItems.find( item => item.key === selectedKey );
|
||||
this.onSelect( selectedItem );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* onSelect is called onClickItem and onEnter upon an option of the drop down menu
|
||||
* does nothing if the key has not changed since the last onSelect event
|
||||
* @param selectedItem
|
||||
*/
|
||||
onSelect( selectedItem ) {
|
||||
onSelect = ( selectedItem ) => {
|
||||
console.log( selectedItem );
|
||||
const { lastValidItem } = this.state;
|
||||
if ( lastValidItem && selectedItem.key === lastValidItem.key ) {
|
||||
// do not trigger the callback function
|
||||
@ -153,22 +141,19 @@ class DataListInput extends React.Component {
|
||||
// callback function onSelect
|
||||
const { onSelect } = this.props;
|
||||
onSelect( selectedItem );
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
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 ) {
|
||||
return (
|
||||
renderItems = ( currentInput, items, focusIndex, activeItemClassName, itemClassName ) => (
|
||||
<div className="datalist-items">
|
||||
{items.map( ( item, i ) => {
|
||||
const isActive = focusIndex === i;
|
||||
@ -188,21 +173,19 @@ class DataListInput extends React.Component {
|
||||
</div>
|
||||
);
|
||||
} )}
|
||||
</div> );
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
||||
renderInputField( placeholder, currentInput, inputClassName ) {
|
||||
return (
|
||||
<input
|
||||
onChange={this.onHandleInput}
|
||||
onKeyDown={this.onHandleKeydown}
|
||||
type="text"
|
||||
className={`autocomplete-input ${ inputClassName }`}
|
||||
placeholder={placeholder}
|
||||
value={currentInput}
|
||||
/>
|
||||
);
|
||||
}
|
||||
renderInputField = ( placeholder, currentInput, inputClassName ) => (
|
||||
<input
|
||||
onChange={this.onHandleInput}
|
||||
onKeyDown={this.onHandleKeydown}
|
||||
type="text"
|
||||
className={`autocomplete-input ${ inputClassName }`}
|
||||
placeholder={placeholder}
|
||||
value={currentInput}
|
||||
/>
|
||||
)
|
||||
|
||||
render() {
|
||||
const {
|
||||
|
||||
@ -1,40 +1,35 @@
|
||||
var path = require('path');
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'build'),
|
||||
filename: 'index.js',
|
||||
libraryTarget: 'commonjs2'
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "babel-loader"
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /^(?!.*?\.module).*\.css$/,
|
||||
use: ['style-loader', 'css-loader']
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
include: path.resolve(__dirname, 'src'),
|
||||
exclude: /(node_modules|bower_components|build)/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['env']
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /^(?!.*?\.module).*\.css$/,
|
||||
use: ['style-loader', 'css-loader']
|
||||
},
|
||||
{
|
||||
test: /\.module\.css$/,
|
||||
use: ['style-loader', {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true
|
||||
}
|
||||
}]
|
||||
{
|
||||
test: /\.module\.css$/,
|
||||
use: ['style-loader', {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
externals: {
|
||||
'react': 'commonjs react'
|
||||
}
|
||||
|
||||
{
|
||||
test: /\.html$/,
|
||||
use: [
|
||||
{
|
||||
loader: "html-loader"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user