@szhsin/react-autocomplete - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/cjs/index.js

@@ -9,5 +9,7 @@ 'use strict';
 }) => {
+  const inputRef = react.useRef();
   const [inputValue, setInputValue] = react.useState('');
   const [focusIndex, setfocusIndex] = react.useState(-1);
   const [isOpen, setOpen] = react.useState(false);
+  const [instance] = react.useState({});
   const itemLength = items.length;
@@ -23,4 +25,5 @@ const updateInput = itemIndex => {
   };
-  const inputProps = {
+  const getInputProps = () => ({
     value: inputValue,
+    ref: inputRef,
     onChange: e => {
@@ -32,3 +35,3 @@ updateValue(e.target.value);
     onClick: () => setOpen(!isOpen),
-    onBlur: () => setOpen(false),
+    onBlur: () => !instance.a && setOpen(false),
     onKeyDown: ({
@@ -66,5 +69,25 @@ key
     }
+  });
+  const getOptionProps = ({
+    index = -1
+  } = {}) => ({
+    onMouseDown: () => instance.a = 1,
+    onClick: () => {
+      var _inputRef$current;
+      setOpen(false);
+      updateValue(items[index]);
+      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+      instance.a = 0;
+    }
+  });
+  const getProps = (elementType, option) => {
+    switch (elementType) {
+      case 'input':
+        return getInputProps();
+      default:
+        return getOptionProps(option);
+    }
   };
   return {
-    inputProps,
+    getProps,
     state: {
@@ -71,0 +94,0 @@ inputValue: [inputValue, setInputValue],

dist/esm/hooks/useAutocomplete.js

@@ -1,2 +0,2 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
@@ -7,5 +7,7 @@ const useAutocomplete = ({
 }) => {
+  const inputRef = useRef();
   const [inputValue, setInputValue] = useState('');
   const [focusIndex, setfocusIndex] = useState(-1);
   const [isOpen, setOpen] = useState(false);
+  const [instance] = useState({});
   const itemLength = items.length;
@@ -21,4 +23,5 @@ const updateInput = itemIndex => {
   };
-  const inputProps = {
+  const getInputProps = () => ({
     value: inputValue,
+    ref: inputRef,
     onChange: e => {
@@ -30,3 +33,3 @@ updateValue(e.target.value);
     onClick: () => setOpen(!isOpen),
-    onBlur: () => setOpen(false),
+    onBlur: () => !instance.a && setOpen(false),
     onKeyDown: ({
@@ -64,5 +67,25 @@ key
     }
+  });
+  const getOptionProps = ({
+    index = -1
+  } = {}) => ({
+    onMouseDown: () => instance.a = 1,
+    onClick: () => {
+      var _inputRef$current;
+      setOpen(false);
+      updateValue(items[index]);
+      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+      instance.a = 0;
+    }
+  });
+  const getProps = (elementType, option) => {
+    switch (elementType) {
+      case 'input':
+        return getInputProps();
+      default:
+        return getOptionProps(option);
+    }
   };
   return {
-    inputProps,
+    getProps,
     state: {
@@ -69,0 +92,0 @@ inputValue: [inputValue, setInputValue],

package.json

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

types/hooks/useAutocomplete.d.ts

@@ -1,2 +0,8 @@
-import type { InputHTMLAttributes } from 'react';
+import type { InputHTMLAttributes, HTMLAttributes } from 'react';
+interface GetProps {
+    input: [never, InputHTMLAttributes<HTMLInputElement>];
+    option: [{
+        index?: number;
+    }, HTMLAttributes<HTMLElement>];
+}
 declare const useAutocomplete: ({ onValueChange, items }: {
@@ -6,4 +12,4 @@ onValueChange?: ((value: string) => void) | undefined;
 }) => {
-    readonly inputProps: InputHTMLAttributes<HTMLInputElement>;
-    readonly state: {
+    getProps: <T extends keyof GetProps>(elementType: T, option?: GetProps[T][0] | undefined) => GetProps[T][1];
+    state: {
         readonly inputValue: readonly [string, import("react").Dispatch<import("react").SetStateAction<string>>];
@@ -10,0 +16,0 @@ readonly focusIndex: readonly [number, import("react").Dispatch<import("react").SetStateAction<number>>];

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

9055

increased by19.35%

Lines of code

208

increased by33.33%

No dependency changes