@szhsin/react-autocomplete
Advanced tools
Comparing version 0.6.3 to 0.6.4
@@ -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 @@ }) => { |
@@ -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 @@ }; |
@@ -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 @@ }) => { |
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 |
{ | ||
"name": "@szhsin/react-autocomplete", | ||
"version": "0.6.3", | ||
"version": "0.6.4", | ||
"description": "", | ||
@@ -5,0 +5,0 @@ "author": "Zheng Song", |
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>; | ||
} |
@@ -11,3 +11,3 @@ import type { Feature } from '../common'; | ||
inlineComplete: (props: { | ||
index: number; | ||
index?: number; | ||
value: string; | ||
@@ -14,0 +14,0 @@ }) => void; |
@@ -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 }; |
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
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
17703
554