Skip to content

feat: add enableLoadingIndicator prop for activity indicator control … #160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 6, 2025
Merged

feat: add enableLoadingIndicator prop for activity indicator control … #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
de2102b
feat: add enableLoadingIndicator prop for activity indicator control …
robinshin Feb 1, 2025
a68699d
fix: ClearIconComponent still displayed when loading but enableLoadin…
robinshin Feb 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 43 additions & 42 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,48 +264,49 @@ yarn android

## Options

| **Option** | **Description** | **Type** | **Default** |
|--- |-----------------------------------------------------------------------------------------------------------------|--- |-----------------------------------------------|
| `dataSet` | set of list items | array | null |
| `initialValue` | string (**id**) or object that contain **id** | string \| object | null |
| `loading` | loading state | bool | false |
| `useFilter` | whether use local filter by dataSet (useful set to false for remote filtering to prevent rerender twice) | bool | true |
| `showClear` | show clear button | bool | true |
| `showChevron` | show chevron (open/close) button | bool | true |
| `closeOnBlur` | whether to close dropdown on blur | bool | false |
| `closeOnSubmit` | whether to close dropdown on submit | bool | false |
| `clearOnFocus` | whether to clear typed text on focus | bool | true |
| `caseSensitive` | whether to perform case-sensitive search | bool | false
| `ignoreAccents` | ignore diacritics | bool | true |
| `trimSearchText` | trim the searched text | bool | true |
| `editable` | is textInput editable | bool | true |
| `debounce` | wait **ms** before call `onChangeText` | number | 0 |
| `suggestionsListMaxHeight` | max height of dropdown | number | 200 |
| `direction` | "up" or "down" | string | down + auto calculate |
| `matchFrom` | whether match suggestions from start of titles or anywhere in the title. Possible values are "any" or "start" | string | any |
| `bottomOffset` | for calculate dropdown direction (e.g. tabbar) | number | 0 |
| `onChangeText` | event textInput onChangeText | function | |
| `onSelectItem` | event onSelectItem | function | |
| `onOpenSuggestionsList` | event onOpenSuggestionsList | function | |
| `onChevronPress` | event onChevronPress | function | |
| `onClear` | event on clear button press | function | |
| `onSubmit` | event on submit KB button press | function | |
| `onBlur` | event fired on text input blur | function | |
| `onFocus` | event on focus text input | function | |
| `renderItem` | JSX for render item `(item, searchText) => JSX \| null` if return null then the element will not be displayed | function | item.title |
| `controller` | return reference to module controller with methods **close, open, toggle, clear, setInputText, setItem** | function | |
| `containerStyle` | | ViewStyle | |
| `rightButtonsContainerStyle` | | ViewStyle | |
| `suggestionsListContainerStyle` | | ViewStyle | |
| `suggestionsListTextStyle` | | TextStyle | styles of suggestions list text items |
| `ChevronIconComponent` | | React.Component | Feather chevron icon |
| `ClearIconComponent` | | React.Component | Feather x icon |
| ~~ScrollViewComponent~~ | removed in 2.0.0 based on FlatList | React.Component name | ScrollView that provide suggestions content |
| `EmptyResultComponent` | replace the default `` Component on empty result | React.Component | |
| `InputComponent` | input element component | React.ComponentType | TextInput |
| `emptyResultText` | replace the default "Nothing found" text on empty result | string | "Nothing found" |
| `textInputProps` | text input props | TextInputProps | |
| `flatListProps` | props for \ component | FlatListProps\ | |
| Option | Description | Type | Default |
|--------------------------------|------------------------------------------------------------------------------------------------------------------|---------------------|------------------------------------------|
| `dataSet` | Set of list items | array | null |
| `initialValue` | String (**id**) or object that contains **id** | string \| object | null |
| `loading` | Loading state | bool | false |
| `enableLoadingIndicator` | Whether to show activity indicator on loading | bool | true |
| `useFilter` | Whether to use local filter by dataSet (useful set to false for remote filtering to prevent rerender twice) | bool | true |
| `showClear` | Show clear button | bool | true |
| `showChevron` | Show chevron (open/close) button | bool | true |
| `closeOnBlur` | Whether to close dropdown on blur | bool | false |
| `closeOnSubmit` | Whether to close dropdown on submit | bool | false |
| `clearOnFocus` | Whether to clear typed text on focus | bool | true |
| `caseSensitive` | Whether to perform case-sensitive search | bool | false |
| `ignoreAccents` | Ignore diacritics | bool | true |
| `trimSearchText` | Trim the searched text | bool | true |
| `editable` | Is textInput editable | bool | true |
| `debounce` | Wait **ms** before call `onChangeText` | number | 0 |
| `suggestionsListMaxHeight` | Max height of dropdown | number | 200 |
| `direction` | "up" or "down" | string | down + auto calculate |
| `matchFrom` | Whether match suggestions from start of titles or anywhere in the title. Possible values are "any" or "start" | string | any |
| `bottomOffset` | For calculate dropdown direction (e.g., tabbar) | number | 0 |
| `onChangeText` | Event textInput onChangeText | function | |
| `onSelectItem` | Event onSelectItem | function | |
| `onOpenSuggestionsList` | Event onOpenSuggestionsList | function | |
| `onChevronPress` | Event onChevronPress | function | |
| `onClear` | Event on clear button press | function | |
| `onSubmit` | Event on submit KB button press | function | |
| `onBlur` | Event fired on text input blur | function | |
| `onFocus` | Event on focus text input | function | |
| `renderItem` | JSX for render item `(item, searchText) => JSX \| null` if return null then the element will not be displayed | function | item.title |
| `controller` | Return reference to module controller with methods **close, open, toggle, clear, setInputText, setItem** | function | |
| `containerStyle` | | ViewStyle | |
| `rightButtonsContainerStyle` | | ViewStyle | |
| `suggestionsListContainerStyle`| | ViewStyle | |
| `suggestionsListTextStyle` | | TextStyle | styles of suggestions list text items |
| `ChevronIconComponent` | | React.Component | Feather chevron icon |
| `ClearIconComponent` | | React.Component | Feather x icon |
| `EmptyResultComponent` | Replace the default `Component` on empty result | React.Component | |
| `InputComponent` | Input element component | React.ComponentType | TextInput |
| `emptyResultText` | Replace the default "Nothing found" text on empty result | string | "Nothing found" |
| `textInputProps` | Text input props | TextInputProps | |
| `flatListProps` | Props for `FlatList` component | FlatListProps | |


## Usage with a Modal

Expand Down
6 changes: 4 additions & 2 deletions src/RightButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ interface RightButtonProps {
showChevron?: boolean
showClear?: boolean
loading?: boolean
enableLoadingIndicator?: boolean
buttonsContainerStyle?: StyleProp<ViewStyle>
ChevronIconComponent?: React.ReactNode
ClearIconComponent?: React.ReactNode
Expand All @@ -27,6 +28,7 @@ export const RightButton: React.FC<RightButtonProps> = memo(
showChevron,
showClear,
loading,
enableLoadingIndicator,
buttonsContainerStyle,
ChevronIconComponent,
ClearIconComponent,
Expand Down Expand Up @@ -56,12 +58,12 @@ export const RightButton: React.FC<RightButtonProps> = memo(
height: inputHeight,
...(buttonsContainerStyle as object),
}}>
{!loading && showClear && (
{(!enableLoadingIndicator || !loading) && showClear && (
<TouchableOpacity onPress={onClearPress} style={styles.clearButton}>
{ClearIconComponent ?? <XCircle width={18} stroke="#aeb4c6" />}
</TouchableOpacity>
)}
{loading && <ActivityIndicator color="#999" />}
{enableLoadingIndicator && loading && <ActivityIndicator color="#999" />}
{RightIconComponent && (
<TouchableOpacity onPress={onRightIconComponentPress} style={styles.chevronButton}>
{RightIconComponent}
Expand Down
2 changes: 2 additions & 0 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export const AutocompleteDropdown = memo<
ignoreAccents = true,
trimSearchText = true,
editable = true,
enableLoadingIndicator = true,
matchFrom,
inputHeight = moderateScale(40, 0.2),
suggestionsListMaxHeight = moderateScale(200, 0.2),
Expand Down Expand Up @@ -524,6 +525,7 @@ export const AutocompleteDropdown = memo<
onChevronPress={onChevronPress}
showChevron={showChevron ?? true}
showClear={showClear ?? (!!searchText || !!selectedItem)}
enableLoadingIndicator={enableLoadingIndicator}
loading={loading}
buttonsContainerStyle={rightButtonsContainerStyle}
ChevronIconComponent={ChevronIconComponent}
Expand Down
1 change: 1 addition & 0 deletions src/types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export interface IAutocompleteDropdownProps {
inputHeight?: number
suggestionsListMaxHeight?: number
initialValue?: string | { id: string } | AutocompleteDropdownItem
enableLoadingIndicator?: boolean
loading?: boolean
useFilter?: boolean
showClear?: boolean
Expand Down