@springernature/global-autocomplete - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

__tests__/index.js

@@ -29,6 +29,6 @@ 'use strict';
 				searchError: mockErrorCallback,
-				resultsContainerSelector: 'c-results-container',
-				resultSelector: 'c-results-container__result',
+				resultsContainerSelector: '.c-results-container',
+				resultSelector: '.c-results-container__result',
 				resultsCallBack: mockResultsCallback,
-				endPoint: url,
+				endpoint: url,
 				minCars: 1,
@@ -48,4 +48,3 @@ inputDelay: 0,
 			input = document.querySelector('.c-autocomplete');
-			let auto = autoComplete(args);
-			auto.enable();
+
 			fetchSpy = jest.spyOn(global, 'fetch');
@@ -66,2 +65,4 @@ });
 			test('Should send request to the specified endpoint', async () => {
+				let auto = autoComplete(args);
+				auto.enable();
 				input.value = 'burdmen';
@@ -75,3 +76,21 @@ input.dispatchEvent(new Event('keyup'));
 
+			test('Or use provided data', async () => {
+				let newArgs = Object.assign({
+					endpoint: null,
+					staticResultsData: [{"name":"Jason","type":"Honey-Beaked Salmon Hunter","id":"1234"},{"name":"Morpor","type":"Shoelace Heron","id":"34566"}]
+				}, args);
+				let auto = autoComplete(newArgs);
+				auto.enable();
+
+				input.value = 'IntrepidTrouser';
+				input.dispatchEvent(new Event('keyup'));
+
+				await waitFor(2);
+				expect(fetchSpy).not.toHaveBeenCalled();
+				expect(mockResultsCallback.mock.calls.length).toBe(1);
+			});
+
 			test('Should invoke callback function from config', async () => {
+				let auto = autoComplete(args);
+				auto.enable();
 				input.value = 'Pain Hawk';
@@ -88,2 +107,5 @@ input.dispatchEvent(new Event('keyup'));
 			test('Should call the error function provided in the config', async () => {
+				let auto = autoComplete(args);
+				auto.enable();
+
 				setMockFetch({ok: false, status: 404 });
@@ -100,2 +122,5 @@ input.value = 'Death Kestrel';
 			test('Should add "no results" to the list', async () => {
+				let auto = autoComplete(args);
+				auto.enable();
+
 				setMockFetch({ok: true, status: 200, json: () => { return [] }});
@@ -102,0 +127,0 @@ input.value = 'bur';

HISTORY.md

 # History
 
+## 1.0.0 (2018-06-28)
+    * Update to allow consumer to pass in data object rather than have it retrieved from an endpoint
+    * BREAKING: component now expects 'endpoint' rather than 'endPoint' in args, and no longer expects the results and results container selectors to be classes
+
 ## 0.1.0 (2018-06-28)
     * Initial commit

js/index.js

 const autoComplete = args => {
+	const {
+		selector,
+		resultSelector,
+		resultsContainerSelector,
+		endpoint,
+		staticResultsData,
+		minChars = 0,
+		componentName,
+		onSelect,
+		inputDelay = 300,
+		requestTimeout = 2000,
+		headers = {},
+		searchError,
+		resultsCallBack
+	} = args;
+
+	if (!selector || !resultsCallBack || !resultSelector || !resultsContainerSelector || (!endpoint && !staticResultsData)) {
+		console.error('Please provide selector, resultsCallBack, and endpoint or staticResultsData');
+		return;
+	}
+
+	const input = document.querySelector(selector);
 	const container = () => {
-		return document.querySelector(`.${args.resultsContainerSelector}`);
+		return document.querySelector(`${resultsContainerSelector}`);
 	};
 	const suggestions = () => {
-		return Array.from(document.querySelectorAll(`.${args.resultSelector}`));
+		return Array.from(document.querySelectorAll(`${resultSelector}`));
 	};
 
-	const input = document.querySelector(args.selector);
-	const endpoint = args.endPoint;
-	const minChars = args.minChars || 0;
-	const componentName = args.componentName;
-	const onSelect = args.onSelect;
-	const inputDelay = (args.inputDelay === undefined) ? 300 : args.inputDelay;
-	const requestTimeout = args.timeout || 2000;
-	const headers = args.headers || {};
-	const searchError = args.searchError;
-	const resultsCallBack = args.resultsCallBack;
 	const eventKeys = ['ArrowDown', 'ArrowUp', 'Escape', 'Enter', 'Tab'];
@@ -125,4 +137,9 @@
 
-	const sendQuery = term => {
-		let getSuggestions = new Promise((resolve, reject) => {
+	const handleData = term => {
+		if (staticResultsData) {
+			generateSuggestions(staticResultsData);
+			return;
+		}
+
+		const fetchData = new Promise((resolve, reject) => {
 			fetch(endpoint + term, {
@@ -147,19 +164,15 @@ 'content-type': 'application/json',
 
-		if (requestTimeout) {
-			let fetchTimeout = new Promise((resolve, reject) => {
-				fetchTimer = setTimeout(() => {
-					clearTimeout(fetchTimer);
-					reject(new Error('Timed out'));
-				}, requestTimeout);
-			});
+		let fetchTimeout = new Promise((resolve, reject) => {
+			fetchTimer = setTimeout(() => {
+				clearTimeout(fetchTimer);
+				reject(new Error('Timed out'));
+			}, requestTimeout);
+		});
 
-			Promise.race([
-				getSuggestions,
-				fetchTimeout
-			]).catch(err => {
-				searchError(err);
-			});
-		} else {
-			return getSuggestions;
-		}
+		Promise.race([
+			fetchData,
+			fetchTimeout
+		]).catch(err => {
+			searchError(err);
+		});
 	};
@@ -174,3 +187,3 @@
 					inputTimer = null;
-					sendQuery(input.value);
+					handleData(input.value);
 				}, inputDelay);
@@ -177,0 +190,0 @@ }

package.json

 {
   "name": "@springernature/global-autocomplete",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "Autocomplete/suggest component",

README.md

@@ -40,13 +40,14 @@ # Autocomplete component
     selector: '[data-component-autocomplete]',
-    onSelect: onSelect,
-    searchError: onError,
-    endPoint: 'autocomplete?q=',
-    timeout: 2000,          // OPTIONAL: Set a timeout for the fetch request, onError will be called if fetch request timeouts, default is 2000
-    minCars: 1,             // OPTIONAL: Minimum characters to be typed before request is sent, default is 0
-    inputDelay: 300,        // OPTIONAL: Delay between keypress and request being sent, default is 300
-    headers: {
+    onSelect: onSelect,             // OPTIONAL
+    searchError: onError,           // OPTIONAL
+    endpoint: 'autocomplete?q=',    // OPTIONAL: Provide an endpoint if you want the component to request data
+    staticResultsData:                           // OPTIONAL: Provide JSON if you want to fetch data and transform it yourself. If both endpoint and data are supplied, data will be used.
+    timeout: 2000,                  // OPTIONAL: Set a timeout for the fetch request, onError will be called if fetch request timeouts, default is 2000.
+    minCars: 1,                     // OPTIONAL: Minimum characters to be typed before request is sent, default is 0.
+    inputDelay: 300,                // OPTIONAL: Delay between keypress and request being sent, default is 300.
+    headers: {                      // OPTIONAL
       Accept: 'application/json; version=2'
     },
-    resultsContainerSelector: 'c-results-container',
-    resultSelector: 'c-results-container__result',
+    resultsContainerSelector: '.c-results-container',
+    resultSelector: '.c-results-container__result',
     resultsCallBack: onResults
@@ -53,0 +54,0 @@ };

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12208

13.37%

Lines of code

298

10.78%

Number of low quality alerts

1

-50%

Number of lines in readme file

62

1.64%

No dependency changes