@szhsin/react-autocomplete - npm Package Compare versions

Comparing version 0.6.3 to 0.6.4

dist/cjs/index.js

@@ -6,3 +6,3 @@ 'use strict';
 const useAutocomplete = ({
-  feature: useFeature = () => ({}),
+  feature: useFeature,
   items = [],
@@ -30,3 +30,4 @@ onChange = () => {}
   const {
-    getProps: getFeatureProps,
+    getInputProps: _getInputProps,
+    getItemProps: _getItemProps,
     ...actions
@@ -44,4 +45,4 @@ } = useFeature({
     ...featureInputProps
-  } = getFeatureProps('input');
-  const inputProps = {
+  } = _getInputProps();
+  const getInputProps = () => ({
     ...featureInputProps,
@@ -57,3 +58,3 @@ onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)),
     ref: inputRef
-  };
+  });
   const getItemProps = option => {
@@ -64,3 +65,3 @@ const {
       ...featureItemProps
-    } = getFeatureProps('item', option);
+    } = _getItemProps(option);
     return {
@@ -80,13 +81,5 @@ ...featureItemProps,
   };
-  const getProps = (elementType, option) => {
-    switch (elementType) {
-      case 'item':
-        return getItemProps(option);
-      case 'input':
-      default:
-        return inputProps;
-    }
-  };
   return {
-    getProps,
+    getInputProps,
+    getItemProps,
     ...state,
@@ -144,3 +137,3 @@ ...actions
   };
-  const inputProps = {
+  const getInputProps = () => ({
     onChange: e => {
@@ -191,16 +184,9 @@ setFocusIndex(-1);
     }
-  };
+  });
   const getItemProps = option => ({
-    onClick: () => updateAndCloseList(items[option.index], 'submit')
+    onClick: () => updateAndCloseList(items[option == null ? void 0 : option.index], 'submit')
   });
   return {
-    getProps: (elementType, option) => {
-      switch (elementType) {
-        case 'item':
-          return getItemProps(option);
-        case 'input':
-        default:
-          return inputProps;
-      }
-    }
+    getInputProps,
+    getItemProps
   };
@@ -215,3 +201,3 @@ };
     const {
-      getProps: _getProps,
+      getInputProps: _getInputProps,
       ...rest
@@ -228,18 +214,14 @@ } = useAutocomplete(cx);
       ...rest,
-      getProps: (elementType, option) => {
-        if (elementType === 'input') {
-          const inputProps = _getProps(elementType);
-          return {
-            ...inputProps,
-            onChange: e => {
-              instance.c = e.nativeEvent.inputType === 'insertText';
-              inputProps.onChange(e);
-            }
-          };
-        } else {
-          return _getProps(elementType, option);
-        }
+      getInputProps: () => {
+        const inputProps = _getInputProps();
+        return {
+          ...inputProps,
+          onChange: e => {
+            instance.c = e.nativeEvent.inputType === 'insertText';
+            inputProps.onChange(e);
+          }
+        };
       },
       inlineComplete: react.useCallback(({
-        index,
+        index = 0,
         value
@@ -246,0 +228,0 @@ }) => {

dist/esm/features/autocomplete.js

@@ -48,3 +48,3 @@ const autocomplete = ({
   };
-  const inputProps = {
+  const getInputProps = () => ({
     onChange: e => {
@@ -95,16 +95,9 @@ setFocusIndex(-1);
     }
-  };
+  });
   const getItemProps = option => ({
-    onClick: () => updateAndCloseList(items[option.index], 'submit')
+    onClick: () => updateAndCloseList(items[option == null ? void 0 : option.index], 'submit')
   });
   return {
-    getProps: (elementType, option) => {
-      switch (elementType) {
-        case 'item':
-          return getItemProps(option);
-        case 'input':
-        default:
-          return inputProps;
-      }
-    }
+    getInputProps,
+    getItemProps
   };
@@ -111,0 +104,0 @@ };

dist/esm/features/supercomplete.js

@@ -10,3 +10,3 @@ import { useState, useCallback } from 'react';
     const {
-      getProps: _getProps,
+      getInputProps: _getInputProps,
       ...rest
@@ -23,18 +23,14 @@ } = useAutocomplete(cx);
       ...rest,
-      getProps: (elementType, option) => {
-        if (elementType === 'input') {
-          const inputProps = _getProps(elementType);
-          return {
-            ...inputProps,
-            onChange: e => {
-              instance.c = e.nativeEvent.inputType === 'insertText';
-              inputProps.onChange(e);
-            }
-          };
-        } else {
-          return _getProps(elementType, option);
-        }
+      getInputProps: () => {
+        const inputProps = _getInputProps();
+        return {
+          ...inputProps,
+          onChange: e => {
+            instance.c = e.nativeEvent.inputType === 'insertText';
+            inputProps.onChange(e);
+          }
+        };
       },
       inlineComplete: useCallback(({
-        index,
+        index = 0,
         value
@@ -41,0 +37,0 @@ }) => {

dist/esm/hooks/useAutocomplete.js

 import { useRef, useState, useCallback } from 'react';
 
 const useAutocomplete = ({
-  feature: useFeature = () => ({}),
+  feature: useFeature,
   items = [],
@@ -27,3 +27,4 @@ onChange = () => {}
   const {
-    getProps: getFeatureProps,
+    getInputProps: _getInputProps,
+    getItemProps: _getItemProps,
     ...actions
@@ -41,4 +42,4 @@ } = useFeature({
     ...featureInputProps
-  } = getFeatureProps('input');
-  const inputProps = {
+  } = _getInputProps();
+  const getInputProps = () => ({
     ...featureInputProps,
@@ -54,3 +55,3 @@ onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)),
     ref: inputRef
-  };
+  });
   const getItemProps = option => {
@@ -61,3 +62,3 @@ const {
       ...featureItemProps
-    } = getFeatureProps('item', option);
+    } = _getItemProps(option);
     return {
@@ -77,13 +78,5 @@ ...featureItemProps,
   };
-  const getProps = (elementType, option) => {
-    switch (elementType) {
-      case 'item':
-        return getItemProps(option);
-      case 'input':
-      default:
-        return inputProps;
-    }
-  };
   return {
-    getProps,
+    getInputProps,
+    getItemProps,
     ...state,
@@ -90,0 +83,0 @@ ...actions

package.json

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

types/common.d.ts

 import type { HTMLAttributes, InputHTMLAttributes } from 'react';
 export interface GetProps {
-    input: [never, InputHTMLAttributes<HTMLInputElement>];
-    item: [{
+    getInputProps: () => InputHTMLAttributes<HTMLInputElement>;
+    getItemProps: (option?: {
         index?: number;
-    }, HTMLAttributes<HTMLElement>];
+    }) => HTMLAttributes<HTMLElement>;
 }
-export type GetPropsResult<T extends keyof GetProps> = GetProps[T][1];
-export type GetPropsFunc<T extends keyof GetProps> = (option?: GetProps[T][0]) => GetPropsResult<T>;
 export interface AutocompleteState {
@@ -48,7 +46,5 @@ setInputValue: (value: string) => void;
 }
-export type Feature<Actions = object> = (cx: Contextual) => {
-    getProps: <T extends keyof GetProps>(elementType: T, option?: GetProps[T][0]) => GetProps[T][1];
-} & Actions;
+export type Feature<Actions = object> = (cx: Contextual) => GetProps & Actions;
 export interface AutocompleteProps<FeatureActions = object> extends Partial<ContextualProps> {
-    feature?: Feature<FeatureActions>;
+    feature: Feature<FeatureActions>;
 }

types/features/supercomplete.d.ts

@@ -11,3 +11,3 @@ import type { Feature } from '../common';
     inlineComplete: (props: {
-        index: number;
+        index?: number;
         value: string;
@@ -14,0 +14,0 @@ }) => void;

types/hooks/useAutocomplete.d.ts

@@ -1,3 +0,4 @@
-import type { GetProps, AutocompleteProps } from '../common';
-declare const useAutocomplete: <FeatureActions = object>({ feature: useFeature, items, onChange }: AutocompleteProps<FeatureActions>) => {
+/// <reference types="react" />
+import type { AutocompleteProps } from '../common';
+declare const useAutocomplete: <FeatureActions>({ feature: useFeature, items, onChange }: AutocompleteProps<FeatureActions>) => {
     setInputValue: (value: string) => void;
@@ -8,4 +9,7 @@ focusIndex: number;
     setOpen: (value: boolean) => void;
-    getProps: <T extends keyof GetProps>(elementType: T, option?: GetProps[T][0] | undefined) => GetProps[T][1];
+    getInputProps: () => import("react").InputHTMLAttributes<HTMLInputElement>;
+    getItemProps: (option?: {
+        index?: number | undefined;
+    } | undefined) => import("react").HTMLAttributes<HTMLElement>;
 } & FeatureActions;
 export { useAutocomplete };

No alert changes

Worsened metrics

Total package byte prevSize

17703

decreased by-5.38%

Lines of code

554

decreased by-6.1%

No dependency changes