@szhsin/react-autocomplete - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

dist/cjs/index.js

@@ -14,3 +14,4 @@ 'use strict';
   const [instance] = react.useState({
-    b: ''
+    b: '',
+    c: []
   });
@@ -30,2 +31,3 @@ const setInputValue = react.useCallback(value => {
     onInputChange,
+    onInputSelect,
     onInputClick,
@@ -46,2 +48,3 @@ onBlur,
     onChange: onInputChange,
+    onSelect: onInputSelect,
     onClick: onInputClick,
@@ -86,3 +89,4 @@ onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)),
 const autocomplete = ({
-  rovingInput
+  rovingText,
+  traverseInput
 } = {}) => ({
@@ -96,3 +100,4 @@ _: cxInstance,
   open,
-  setOpen
+  setOpen,
+  inputRef
 }) => {
@@ -116,4 +121,3 @@ const updateValue = (value, type) => {
   const traverseItems = isUp => {
-    var _items$nextIndex;
-    const baseIndex = rovingInput ? -1 : 0;
+    const baseIndex = (traverseInput != null ? traverseInput : rovingText) ? -1 : 0;
     let nextIndex = focusIndex;
@@ -127,3 +131,8 @@ const itemLength = items.length;
     setFocusIndex(nextIndex);
-    rovingInput && setInputValue((_items$nextIndex = items[nextIndex]) != null ? _items$nextIndex : cxInstance.b);
+    if (rovingText) {
+      var _items$nextIndex;
+      setInputValue((_items$nextIndex = items[nextIndex]) != null ? _items$nextIndex : cxInstance.b);
+      const input = inputRef.current;
+      cxInstance.c = [input.selectionStart, input.selectionEnd];
+    }
   };
@@ -139,2 +148,14 @@ return {
     },
+    onInputSelect: e => {
+      const {
+        value,
+        selectionStart,
+        selectionEnd
+      } = e.target;
+      const [start, end] = cxInstance.c;
+      if (cxInstance.b !== value && (selectionStart !== start || selectionEnd !== end)) {
+        setFocusIndex(-1);
+        updateValue(value, 'input');
+      }
+    },
     onInputClick: () => setOpen(true),
@@ -172,48 +193,20 @@ onBlur: () => updateAndCloseList(items[focusIndex], 'blur'),
 const supercomplete = () => {
-  const base = autocomplete({
-    rovingInput: true
+  const useAutocomplete = autocomplete({
+    rovingText: true
   });
-  return ({
-    setFocusIndex: _setFocusIndex,
-    onChange: _onChange,
-    ...cx
-  }) => {
-    const [instance] = react.useState({
-      a: []
-    });
-    const setFocusIndex = react.useCallback(value => {
-      instance.b = value;
-      _setFocusIndex(value);
-    }, [instance, _setFocusIndex]);
-    const onChange = (value, meta) => {
-      if (meta.type !== 'input') {
-        instance.c = false;
-        instance.a = [];
-      }
-      _onChange(value, meta);
-    };
-    const baseFeature = base({
-      ...cx,
-      setFocusIndex,
-      onChange
-    });
+  return cx => {
+    const autocompleteFeature = useAutocomplete(cx);
+    const [instance] = react.useState({});
     const {
       inputRef,
       setInputValue,
+      setFocusIndex,
       _: cxInstance
     } = cx;
     return {
-      ...baseFeature,
+      ...autocompleteFeature,
       onInputChange: e => {
         instance.c = e.nativeEvent.inputType === 'insertText';
-        if (!instance.c) instance.a = [];
-        baseFeature.onInputChange(e);
+        autocompleteFeature.onInputChange(e);
       },
-      onKeyDown: e => {
-        baseFeature.onKeyDown(e);
-        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-          const [index, action] = instance.a;
-          if (instance.b === index) action == null || action();
-        }
-      },
       inlineComplete: react.useCallback(({
@@ -224,12 +217,10 @@ index,
         if (instance.c) {
-          const action = () => {
-            var _inputRef$current;
-            setFocusIndex(index);
-            const valueLength = cxInstance.b.length;
-            const newValue = cxInstance.b + value.slice(valueLength);
-            setInputValue(newValue);
-            (_inputRef$current = inputRef.current) == null || _inputRef$current.setSelectionRange(valueLength, value.length);
-          };
-          action();
-          instance.a = [index, action];
+          var _inputRef$current;
+          instance.c = 0;
+          setFocusIndex(index);
+          const start = cxInstance.b.length;
+          const end = value.length;
+          setInputValue(cxInstance.b + value.slice(start));
+          cxInstance.c = [start, end];
+          (_inputRef$current = inputRef.current) == null || _inputRef$current.setSelectionRange(start, end);
         }
@@ -236,0 +227,0 @@ }, [cxInstance, instance, inputRef, setFocusIndex, setInputValue])

dist/esm/features/autocomplete.js

 const autocomplete = ({
-  rovingInput
+  rovingText,
+  traverseInput
 } = {}) => ({
@@ -11,3 +12,4 @@ _: cxInstance,
   open,
-  setOpen
+  setOpen,
+  inputRef
 }) => {
@@ -31,4 +33,3 @@ const updateValue = (value, type) => {
   const traverseItems = isUp => {
-    var _items$nextIndex;
-    const baseIndex = rovingInput ? -1 : 0;
+    const baseIndex = (traverseInput != null ? traverseInput : rovingText) ? -1 : 0;
     let nextIndex = focusIndex;
@@ -42,3 +43,8 @@ const itemLength = items.length;
     setFocusIndex(nextIndex);
-    rovingInput && setInputValue((_items$nextIndex = items[nextIndex]) != null ? _items$nextIndex : cxInstance.b);
+    if (rovingText) {
+      var _items$nextIndex;
+      setInputValue((_items$nextIndex = items[nextIndex]) != null ? _items$nextIndex : cxInstance.b);
+      const input = inputRef.current;
+      cxInstance.c = [input.selectionStart, input.selectionEnd];
+    }
   };
@@ -54,2 +60,14 @@ return {
     },
+    onInputSelect: e => {
+      const {
+        value,
+        selectionStart,
+        selectionEnd
+      } = e.target;
+      const [start, end] = cxInstance.c;
+      if (cxInstance.b !== value && (selectionStart !== start || selectionEnd !== end)) {
+        setFocusIndex(-1);
+        updateValue(value, 'input');
+      }
+    },
     onInputClick: () => setOpen(true),
@@ -56,0 +74,0 @@ onBlur: () => updateAndCloseList(items[focusIndex], 'blur'),

dist/esm/features/supercomplete.js

@@ -5,48 +5,20 @@ import { useState, useCallback } from 'react';
 const supercomplete = () => {
-  const base = autocomplete({
-    rovingInput: true
+  const useAutocomplete = autocomplete({
+    rovingText: true
   });
-  return ({
-    setFocusIndex: _setFocusIndex,
-    onChange: _onChange,
-    ...cx
-  }) => {
-    const [instance] = useState({
-      a: []
-    });
-    const setFocusIndex = useCallback(value => {
-      instance.b = value;
-      _setFocusIndex(value);
-    }, [instance, _setFocusIndex]);
-    const onChange = (value, meta) => {
-      if (meta.type !== 'input') {
-        instance.c = false;
-        instance.a = [];
-      }
-      _onChange(value, meta);
-    };
-    const baseFeature = base({
-      ...cx,
-      setFocusIndex,
-      onChange
-    });
+  return cx => {
+    const autocompleteFeature = useAutocomplete(cx);
+    const [instance] = useState({});
     const {
       inputRef,
       setInputValue,
+      setFocusIndex,
       _: cxInstance
     } = cx;
     return {
-      ...baseFeature,
+      ...autocompleteFeature,
       onInputChange: e => {
         instance.c = e.nativeEvent.inputType === 'insertText';
-        if (!instance.c) instance.a = [];
-        baseFeature.onInputChange(e);
+        autocompleteFeature.onInputChange(e);
       },
-      onKeyDown: e => {
-        baseFeature.onKeyDown(e);
-        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-          const [index, action] = instance.a;
-          if (instance.b === index) action == null || action();
-        }
-      },
       inlineComplete: useCallback(({
@@ -57,12 +29,10 @@ index,
         if (instance.c) {
-          const action = () => {
-            var _inputRef$current;
-            setFocusIndex(index);
-            const valueLength = cxInstance.b.length;
-            const newValue = cxInstance.b + value.slice(valueLength);
-            setInputValue(newValue);
-            (_inputRef$current = inputRef.current) == null || _inputRef$current.setSelectionRange(valueLength, value.length);
-          };
-          action();
-          instance.a = [index, action];
+          var _inputRef$current;
+          instance.c = 0;
+          setFocusIndex(index);
+          const start = cxInstance.b.length;
+          const end = value.length;
+          setInputValue(cxInstance.b + value.slice(start));
+          cxInstance.c = [start, end];
+          (_inputRef$current = inputRef.current) == null || _inputRef$current.setSelectionRange(start, end);
         }
@@ -69,0 +39,0 @@ }, [cxInstance, instance, inputRef, setFocusIndex, setInputValue])

dist/esm/hooks/useAutocomplete.js

@@ -12,3 +12,4 @@ import { useRef, useState, useCallback } from 'react';
   const [instance] = useState({
-    b: ''
+    b: '',
+    c: []
   });
@@ -28,2 +29,3 @@ const setInputValue = useCallback(value => {
     onInputChange,
+    onInputSelect,
     onInputClick,
@@ -44,2 +46,3 @@ onBlur,
     onChange: onInputChange,
+    onSelect: onInputSelect,
     onClick: onInputClick,
@@ -46,0 +49,0 @@ onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)),

package.json

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

types/common.d.ts

@@ -27,2 +27,7 @@ /// <reference types="react" />
     b: string;
+    /**
+     * ### INTERNAL API ###
+     * The last recorded selection position
+     */
+    c: [number | null, number | null] | [];
 }
@@ -39,2 +44,3 @@ export interface Contextual extends ContextualProps, AutocompleteState {
     onInputClick?: React.MouseEventHandler<HTMLInputElement>;
+    onInputSelect?: React.ReactEventHandler<HTMLInputElement>;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
@@ -41,0 +47,0 @@ onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;

types/features/autocomplete.d.ts

 import type { Feature } from '../common';
 declare const autocomplete: (props?: {
-    rovingInput?: boolean;
+    rovingText?: boolean;
+    traverseInput?: boolean;
 }) => Feature;
 export { autocomplete };

types/features/supercomplete.d.ts

@@ -5,15 +5,5 @@ import type { Feature } from '../common';
      * ### INTERNAL API ###
-     * action mapper
-     */
-    a: [number, () => void] | [];
-    /**
-     * ### INTERNAL API ###
-     * The most recent focus index
-     */
-    b?: number;
-    /**
-     * ### INTERNAL API ###
      * Whether the last value change is "insertText"
      */
-    c?: boolean;
+    c?: boolean | 0 | 1;
 }
@@ -20,0 +10,0 @@ declare const supercomplete: () => Feature<{

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

Worsened metrics

Total package byte prevSize

17649

decreased by-1.88%

Lines of code

540

decreased by-3.74%

No dependency changes