@szhsin/react-autocomplete - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/cjs/index.js

@@ -6,20 +6,49 @@ 'use strict';
 const useAutocomplete = ({
-  onValueChange,
+  onChange,
+  onSetInputValue,
+  onSetOpen,
   items = []
 }) => {
   const inputRef = react.useRef();
-  const [inputValue, setInputValue] = react.useState('');
+  const [inputValue, setInputValueBase] = react.useState('');
+  const [isOpen, setOpenBase] = react.useState(false);
   const [focusIndex, setfocusIndex] = react.useState(-1);
-  const [isOpen, setOpen] = react.useState(false);
   const [instance] = react.useState({});
+  const state = {
+    inputValue: [inputValue, setInputValueBase],
+    focusIndex: [focusIndex, setfocusIndex],
+    isOpen: [isOpen, setOpenBase]
+  };
   const itemLength = items.length;
-  const updateInput = itemIndex => {
+  const setInputValue = onSetInputValue || setInputValueBase;
+  const setOpen = (value, type) => onSetOpen ? onSetOpen(value, {
+    type,
+    state
+  }, setOpenBase) : setOpenBase(value);
+  const traverseItems = itemIndex => {
     setfocusIndex(itemIndex);
-    setInputValue(items[itemIndex]);
+    setInputValue(items[itemIndex], {
+      type: 'nav',
+      state
+    }, setInputValueBase);
   };
-  const updateValue = value => {
-    if (value == null) return;
-    setInputValue(value);
-    onValueChange == null || onValueChange(value);
+  const updateValue = (value, type) => {
+    if (value != null) {
+      setInputValue(value, {
+        type,
+        state
+      }, setInputValueBase);
+      onChange == null || onChange(value, {
+        type,
+        state
+      });
+    }
   };
+  const updateAndCloseList = (value, type) => {
+    if (isOpen) {
+      updateValue(value, type);
+      setOpen(false, type);
+      setfocusIndex(-1);
+    }
+  };
   const getInputProps = () => ({
@@ -29,8 +58,12 @@ value: inputValue,
     onChange: e => {
-      updateValue(e.target.value);
-      setOpen(true);
+      updateValue(e.target.value, 'type');
+      setOpen(true, 'type');
       setfocusIndex(-1);
     },
-    onClick: () => setOpen(!isOpen),
-    onBlur: () => !instance.a && setOpen(false),
+    onClick: () => setOpen(true, 'focus'),
+    onBlur: () => {
+      if (!instance.a) {
+        updateAndCloseList(inputValue, 'blur');
+      }
+    },
     onKeyDown: ({
@@ -44,5 +77,5 @@ key
             if (++nextIndex >= itemLength) nextIndex = 0;
-            updateInput(nextIndex);
+            traverseItems(nextIndex);
           } else {
-            setOpen(true);
+            setOpen(true, 'nav');
           }
@@ -53,15 +86,12 @@ break;
             if (--nextIndex < 0) nextIndex = itemLength - 1;
-            updateInput(nextIndex);
+            traverseItems(nextIndex);
           } else {
-            setOpen(true);
+            setOpen(true, 'nav');
           }
           break;
         case 'Enter':
-          if (isOpen) {
-            setOpen(false);
-            updateValue(items[focusIndex]);
-          }
+          updateAndCloseList(items[focusIndex], 'submit');
           break;
         case 'Escape':
-          setOpen(false);
+          updateAndCloseList(inputValue, 'esc');
           break;
@@ -77,4 +107,3 @@ }
       var _inputRef$current;
-      setOpen(false);
-      updateValue(items[index]);
+      updateAndCloseList(items[index], 'submit');
       (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
@@ -94,7 +123,3 @@ instance.a = 0;
     getProps,
-    state: {
-      inputValue: [inputValue, setInputValue],
-      focusIndex: [focusIndex, setfocusIndex],
-      isOpen: [isOpen, setOpen]
-    }
+    state
   };
@@ -101,0 +126,0 @@ };

dist/esm/hooks/useAutocomplete.js

 import { useRef, useState } from 'react';
 
 const useAutocomplete = ({
-  onValueChange,
+  onChange,
+  onSetInputValue,
+  onSetOpen,
   items = []
 }) => {
   const inputRef = useRef();
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValueBase] = useState('');
+  const [isOpen, setOpenBase] = useState(false);
   const [focusIndex, setfocusIndex] = useState(-1);
-  const [isOpen, setOpen] = useState(false);
   const [instance] = useState({});
+  const state = {
+    inputValue: [inputValue, setInputValueBase],
+    focusIndex: [focusIndex, setfocusIndex],
+    isOpen: [isOpen, setOpenBase]
+  };
   const itemLength = items.length;
-  const updateInput = itemIndex => {
+  const setInputValue = onSetInputValue || setInputValueBase;
+  const setOpen = (value, type) => onSetOpen ? onSetOpen(value, {
+    type,
+    state
+  }, setOpenBase) : setOpenBase(value);
+  const traverseItems = itemIndex => {
     setfocusIndex(itemIndex);
-    setInputValue(items[itemIndex]);
+    setInputValue(items[itemIndex], {
+      type: 'nav',
+      state
+    }, setInputValueBase);
   };
-  const updateValue = value => {
-    if (value == null) return;
-    setInputValue(value);
-    onValueChange == null || onValueChange(value);
+  const updateValue = (value, type) => {
+    if (value != null) {
+      setInputValue(value, {
+        type,
+        state
+      }, setInputValueBase);
+      onChange == null || onChange(value, {
+        type,
+        state
+      });
+    }
   };
+  const updateAndCloseList = (value, type) => {
+    if (isOpen) {
+      updateValue(value, type);
+      setOpen(false, type);
+      setfocusIndex(-1);
+    }
+  };
   const getInputProps = () => ({
@@ -26,8 +55,12 @@ value: inputValue,
     onChange: e => {
-      updateValue(e.target.value);
-      setOpen(true);
+      updateValue(e.target.value, 'type');
+      setOpen(true, 'type');
       setfocusIndex(-1);
     },
-    onClick: () => setOpen(!isOpen),
-    onBlur: () => !instance.a && setOpen(false),
+    onClick: () => setOpen(true, 'focus'),
+    onBlur: () => {
+      if (!instance.a) {
+        updateAndCloseList(inputValue, 'blur');
+      }
+    },
     onKeyDown: ({
@@ -41,5 +74,5 @@ key
             if (++nextIndex >= itemLength) nextIndex = 0;
-            updateInput(nextIndex);
+            traverseItems(nextIndex);
           } else {
-            setOpen(true);
+            setOpen(true, 'nav');
           }
@@ -50,15 +83,12 @@ break;
             if (--nextIndex < 0) nextIndex = itemLength - 1;
-            updateInput(nextIndex);
+            traverseItems(nextIndex);
           } else {
-            setOpen(true);
+            setOpen(true, 'nav');
           }
           break;
         case 'Enter':
-          if (isOpen) {
-            setOpen(false);
-            updateValue(items[focusIndex]);
-          }
+          updateAndCloseList(items[focusIndex], 'submit');
           break;
         case 'Escape':
-          setOpen(false);
+          updateAndCloseList(inputValue, 'esc');
           break;
@@ -74,4 +104,3 @@ }
       var _inputRef$current;
-      setOpen(false);
-      updateValue(items[index]);
+      updateAndCloseList(items[index], 'submit');
       (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
@@ -91,7 +120,3 @@ instance.a = 0;
     getProps,
-    state: {
-      inputValue: [inputValue, setInputValue],
-      focusIndex: [focusIndex, setfocusIndex],
-      isOpen: [isOpen, setOpen]
-    }
+    state
   };
@@ -98,0 +123,0 @@ };

package.json

 {
   "name": "@szhsin/react-autocomplete",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "",
@@ -5,0 +5,0 @@ "author": "Zheng Song",

types/hooks/useAutocomplete.d.ts

@@ -8,6 +8,20 @@ import type { InputHTMLAttributes, HTMLAttributes } from 'react';
 }
-declare const useAutocomplete: ({ onValueChange, items }: {
-    onValueChange?: ((value: string) => void) | undefined;
-    items?: string[] | undefined;
-}) => {
+type ValueEventType = 'type' | 'submit' | 'esc' | 'blur' | 'nav' | 'focus';
+export type AutocompleteState = ReturnType<typeof useAutocomplete>['state'];
+export interface AutocompleteProps {
+    onChange?: (value: string, meta: {
+        type: ValueEventType;
+        state: AutocompleteState;
+    }) => void;
+    onSetInputValue?: (value: string, meta: {
+        type: ValueEventType;
+        state: AutocompleteState;
+    }, base: AutocompleteState['inputValue'][1]) => void;
+    onSetOpen?: (value: boolean, meta: {
+        type: ValueEventType;
+        state: AutocompleteState;
+    }, base: AutocompleteState['isOpen'][1]) => void;
+    items?: string[];
+}
+declare const useAutocomplete: ({ onChange, onSetInputValue, onSetOpen, items }: AutocompleteProps) => {
     getProps: <T extends keyof GetProps>(elementType: T, option?: GetProps[T][0] | undefined) => GetProps[T][1];
@@ -14,0 +28,0 @@ state: {

types/index.d.ts

 export { useAutocomplete } from './hooks/useAutocomplete';
+export type { AutocompleteProps, AutocompleteState } from './hooks/useAutocomplete';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11002

increased by21.5%

Lines of code

273

increased by31.25%

No dependency changes