Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@szhsin/react-autocomplete
Advanced tools
@szhsin/react-autocomplete - npm Package Compare versions
Comparing version 0.6.2 to 0.6.3
@@ -29,8 +29,3 @@ 'use strict'; | ||
| const { | ||
| inputProps: { | ||
| onBlur, | ||
| onKeyDown, | ||
| ...inputProps | ||
| }, | ||
| onItemClick, | ||
| getProps: getFeatureProps, | ||
| ...actions | ||
@@ -44,4 +39,9 @@ } = useFeature({ | ||
| }); | ||
| const getInputProps = () => ({ | ||
| ...inputProps, | ||
| const { | ||
| onBlur, | ||
| onKeyDown, | ||
| ...featureInputProps | ||
| } = getFeatureProps('input'); | ||
| const inputProps = { | ||
| ...featureInputProps, | ||
| onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)), | ||
@@ -56,22 +56,30 @@ onKeyDown: e => { | ||
| ref: inputRef | ||
| }); | ||
| const getItemProps = ({ | ||
| index = -1 | ||
| } = {}) => ({ | ||
| onMouseDown: () => instance.a = 1, | ||
| onClick: e => { | ||
| var _inputRef$current; | ||
| onItemClick == null || onItemClick(e, { | ||
| index | ||
| }); | ||
| (_inputRef$current = inputRef.current) == null || _inputRef$current.focus(); | ||
| instance.a = 0; | ||
| } | ||
| }); | ||
| }; | ||
| const getItemProps = option => { | ||
| const { | ||
| onMouseDown, | ||
| onClick, | ||
| ...featureItemProps | ||
| } = getFeatureProps('item', option); | ||
| return { | ||
| ...featureItemProps, | ||
| onMouseDown: e => { | ||
| onMouseDown == null || onMouseDown(e); | ||
| instance.a = 1; | ||
| }, | ||
| onClick: e => { | ||
| var _inputRef$current; | ||
| onClick == null || onClick(e); | ||
| (_inputRef$current = inputRef.current) == null || _inputRef$current.focus(); | ||
| instance.a = 0; | ||
| } | ||
| }; | ||
| }; | ||
| const getProps = (elementType, option) => { | ||
| switch (elementType) { | ||
| case 'item': | ||
| return getItemProps(option); | ||
| case 'input': | ||
| return getInputProps(); | ||
| default: | ||
| return getItemProps(option); | ||
| return inputProps; | ||
| } | ||
@@ -133,54 +141,63 @@ }; | ||
| }; | ||
| return { | ||
| onItemClick: (_, { | ||
| index | ||
| }) => updateAndCloseList(items[index], 'submit'), | ||
| inputProps: { | ||
| onChange: e => { | ||
| const inputProps = { | ||
| onChange: e => { | ||
| setFocusIndex(-1); | ||
| setOpen(true); | ||
| updateValue(e.target.value, 'input'); | ||
| }, | ||
| onSelect: e => { | ||
| const { | ||
| value, | ||
| selectionStart, | ||
| selectionEnd | ||
| } = e.target; | ||
| const [start, end] = cxInstance.c; | ||
| if (cxInstance.b !== value && (selectionStart !== start || selectionEnd !== end)) { | ||
| setFocusIndex(-1); | ||
| setOpen(true); | ||
| updateValue(e.target.value, 'input'); | ||
| }, | ||
| onSelect: 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'); | ||
| } | ||
| }, | ||
| onClick: () => setOpen(true), | ||
| onBlur: () => updateAndCloseList(items[focusIndex], 'blur'), | ||
| onKeyDown: ({ | ||
| key | ||
| }) => { | ||
| switch (key) { | ||
| case 'ArrowUp': | ||
| if (open) { | ||
| traverseItems(true); | ||
| } else { | ||
| setOpen(true); | ||
| } | ||
| break; | ||
| case 'ArrowDown': | ||
| if (open) { | ||
| traverseItems(false); | ||
| } else { | ||
| setOpen(true); | ||
| } | ||
| break; | ||
| case 'Enter': | ||
| updateAndCloseList(items[focusIndex], 'submit'); | ||
| break; | ||
| case 'Escape': | ||
| updateAndCloseList(cxInstance.b, 'esc'); | ||
| break; | ||
| } | ||
| updateValue(value, 'input'); | ||
| } | ||
| }, | ||
| onClick: () => setOpen(true), | ||
| onBlur: () => updateAndCloseList(items[focusIndex], 'blur'), | ||
| onKeyDown: ({ | ||
| key | ||
| }) => { | ||
| switch (key) { | ||
| case 'ArrowUp': | ||
| if (open) { | ||
| traverseItems(true); | ||
| } else { | ||
| setOpen(true); | ||
| } | ||
| break; | ||
| case 'ArrowDown': | ||
| if (open) { | ||
| traverseItems(false); | ||
| } else { | ||
| setOpen(true); | ||
| } | ||
| break; | ||
| case 'Enter': | ||
| updateAndCloseList(items[focusIndex], 'submit'); | ||
| break; | ||
| case 'Escape': | ||
| updateAndCloseList(cxInstance.b, 'esc'); | ||
| break; | ||
| } | ||
| } | ||
| }; | ||
| const getItemProps = option => ({ | ||
| onClick: () => updateAndCloseList(items[option.index], 'submit') | ||
| }); | ||
| return { | ||
| getProps: (elementType, option) => { | ||
| switch (elementType) { | ||
| case 'item': | ||
| return getItemProps(option); | ||
| case 'input': | ||
| default: | ||
| return inputProps; | ||
| } | ||
| } | ||
| }; | ||
| }; | ||
@@ -194,3 +211,3 @@ | ||
| const { | ||
| inputProps, | ||
| getProps: _getProps, | ||
| ...rest | ||
@@ -207,7 +224,14 @@ } = useAutocomplete(cx); | ||
| ...rest, | ||
| inputProps: { | ||
| ...inputProps, | ||
| onChange: e => { | ||
| instance.c = e.nativeEvent.inputType === 'insertText'; | ||
| inputProps.onChange(e); | ||
| 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); | ||
| } | ||
@@ -214,0 +238,0 @@ }, |
@@ -48,56 +48,65 @@ const autocomplete = ({ | ||
| }; | ||
| return { | ||
| onItemClick: (_, { | ||
| index | ||
| }) => updateAndCloseList(items[index], 'submit'), | ||
| inputProps: { | ||
| onChange: e => { | ||
| const inputProps = { | ||
| onChange: e => { | ||
| setFocusIndex(-1); | ||
| setOpen(true); | ||
| updateValue(e.target.value, 'input'); | ||
| }, | ||
| onSelect: e => { | ||
| const { | ||
| value, | ||
| selectionStart, | ||
| selectionEnd | ||
| } = e.target; | ||
| const [start, end] = cxInstance.c; | ||
| if (cxInstance.b !== value && (selectionStart !== start || selectionEnd !== end)) { | ||
| setFocusIndex(-1); | ||
| setOpen(true); | ||
| updateValue(e.target.value, 'input'); | ||
| }, | ||
| onSelect: 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'); | ||
| } | ||
| }, | ||
| onClick: () => setOpen(true), | ||
| onBlur: () => updateAndCloseList(items[focusIndex], 'blur'), | ||
| onKeyDown: ({ | ||
| key | ||
| }) => { | ||
| switch (key) { | ||
| case 'ArrowUp': | ||
| if (open) { | ||
| traverseItems(true); | ||
| } else { | ||
| setOpen(true); | ||
| } | ||
| break; | ||
| case 'ArrowDown': | ||
| if (open) { | ||
| traverseItems(false); | ||
| } else { | ||
| setOpen(true); | ||
| } | ||
| break; | ||
| case 'Enter': | ||
| updateAndCloseList(items[focusIndex], 'submit'); | ||
| break; | ||
| case 'Escape': | ||
| updateAndCloseList(cxInstance.b, 'esc'); | ||
| break; | ||
| } | ||
| updateValue(value, 'input'); | ||
| } | ||
| }, | ||
| onClick: () => setOpen(true), | ||
| onBlur: () => updateAndCloseList(items[focusIndex], 'blur'), | ||
| onKeyDown: ({ | ||
| key | ||
| }) => { | ||
| switch (key) { | ||
| case 'ArrowUp': | ||
| if (open) { | ||
| traverseItems(true); | ||
| } else { | ||
| setOpen(true); | ||
| } | ||
| break; | ||
| case 'ArrowDown': | ||
| if (open) { | ||
| traverseItems(false); | ||
| } else { | ||
| setOpen(true); | ||
| } | ||
| break; | ||
| case 'Enter': | ||
| updateAndCloseList(items[focusIndex], 'submit'); | ||
| break; | ||
| case 'Escape': | ||
| updateAndCloseList(cxInstance.b, 'esc'); | ||
| break; | ||
| } | ||
| } | ||
| }; | ||
| const getItemProps = option => ({ | ||
| onClick: () => updateAndCloseList(items[option.index], 'submit') | ||
| }); | ||
| return { | ||
| getProps: (elementType, option) => { | ||
| switch (elementType) { | ||
| case 'item': | ||
| return getItemProps(option); | ||
| case 'input': | ||
| default: | ||
| return inputProps; | ||
| } | ||
| } | ||
| }; | ||
| }; | ||
| export { autocomplete }; |
@@ -10,3 +10,3 @@ import { useState, useCallback } from 'react'; | ||
| const { | ||
| inputProps, | ||
| getProps: _getProps, | ||
| ...rest | ||
@@ -23,7 +23,14 @@ } = useAutocomplete(cx); | ||
| ...rest, | ||
| inputProps: { | ||
| ...inputProps, | ||
| onChange: e => { | ||
| instance.c = e.nativeEvent.inputType === 'insertText'; | ||
| inputProps.onChange(e); | ||
| 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); | ||
| } | ||
@@ -30,0 +37,0 @@ }, |
@@ -27,8 +27,3 @@ import { useRef, useState, useCallback } from 'react'; | ||
| const { | ||
| inputProps: { | ||
| onBlur, | ||
| onKeyDown, | ||
| ...inputProps | ||
| }, | ||
| onItemClick, | ||
| getProps: getFeatureProps, | ||
| ...actions | ||
@@ -42,4 +37,9 @@ } = useFeature({ | ||
| }); | ||
| const getInputProps = () => ({ | ||
| ...inputProps, | ||
| const { | ||
| onBlur, | ||
| onKeyDown, | ||
| ...featureInputProps | ||
| } = getFeatureProps('input'); | ||
| const inputProps = { | ||
| ...featureInputProps, | ||
| onBlur: e => !instance.a && (onBlur == null ? void 0 : onBlur(e)), | ||
@@ -54,22 +54,30 @@ onKeyDown: e => { | ||
| ref: inputRef | ||
| }); | ||
| const getItemProps = ({ | ||
| index = -1 | ||
| } = {}) => ({ | ||
| onMouseDown: () => instance.a = 1, | ||
| onClick: e => { | ||
| var _inputRef$current; | ||
| onItemClick == null || onItemClick(e, { | ||
| index | ||
| }); | ||
| (_inputRef$current = inputRef.current) == null || _inputRef$current.focus(); | ||
| instance.a = 0; | ||
| } | ||
| }); | ||
| }; | ||
| const getItemProps = option => { | ||
| const { | ||
| onMouseDown, | ||
| onClick, | ||
| ...featureItemProps | ||
| } = getFeatureProps('item', option); | ||
| return { | ||
| ...featureItemProps, | ||
| onMouseDown: e => { | ||
| onMouseDown == null || onMouseDown(e); | ||
| instance.a = 1; | ||
| }, | ||
| onClick: e => { | ||
| var _inputRef$current; | ||
| onClick == null || onClick(e); | ||
| (_inputRef$current = inputRef.current) == null || _inputRef$current.focus(); | ||
| instance.a = 0; | ||
| } | ||
| }; | ||
| }; | ||
| const getProps = (elementType, option) => { | ||
| switch (elementType) { | ||
| case 'item': | ||
| return getItemProps(option); | ||
| case 'input': | ||
| return getInputProps(); | ||
| default: | ||
| return getItemProps(option); | ||
| return inputProps; | ||
| } | ||
@@ -76,0 +84,0 @@ }; |
| { | ||
| "name": "@szhsin/react-autocomplete", | ||
| "version": "0.6.2", | ||
| "version": "0.6.3", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "author": "Zheng Song", |
@@ -1,2 +0,10 @@ | ||
| import type { InputHTMLAttributes } from 'react'; | ||
| import type { HTMLAttributes, InputHTMLAttributes } from 'react'; | ||
| export interface GetProps { | ||
| input: [never, InputHTMLAttributes<HTMLInputElement>]; | ||
| item: [{ | ||
| index?: number; | ||
| }, 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 { | ||
@@ -41,6 +49,3 @@ setInputValue: (value: string) => void; | ||
| export type Feature<Actions = object> = (cx: Contextual) => { | ||
| inputProps: InputHTMLAttributes<HTMLInputElement>; | ||
| onItemClick?: (event: React.MouseEvent<HTMLElement>, props: { | ||
| index: number; | ||
| }) => void; | ||
| getProps: <T extends keyof GetProps>(elementType: T, option?: GetProps[T][0]) => GetProps[T][1]; | ||
| } & Actions; | ||
@@ -47,0 +52,0 @@ export interface AutocompleteProps<FeatureActions = object> extends Partial<ContextualProps> { |
@@ -1,9 +0,2 @@ | ||
| import type { InputHTMLAttributes, HTMLAttributes } from 'react'; | ||
| import type { AutocompleteProps } from '../common'; | ||
| interface GetProps { | ||
| input: [never, InputHTMLAttributes<HTMLInputElement>]; | ||
| item: [{ | ||
| index?: number; | ||
| }, HTMLAttributes<HTMLElement>]; | ||
| } | ||
| import type { GetProps, AutocompleteProps } from '../common'; | ||
| declare const useAutocomplete: <FeatureActions = object>({ feature: useFeature, items, onChange }: AutocompleteProps<FeatureActions>) => { | ||
@@ -10,0 +3,0 @@ setInputValue: (value: string) => void; |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by7.65%
18710
- Lines of code
- increased by8.46%
590
No dependency changes