Skip to content

Commit 7b0b9ce

Browse files
robinshinrobinshin
authored
feat: add enableLoadingIndicator prop for activity indicator control … (#160)
* feat: add enableLoadingIndicator prop for activity indicator control display * fix: ClearIconComponent still displayed when loading but enableLoadingIndicator is false
1 parent e1ff8f5 commit 7b0b9ce

File tree

4 files changed

+50
-44
lines changed

4 files changed

+50
-44
lines changed

‎README.md

Lines changed: 43 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -264,48 +264,49 @@ yarn android
264264

265265
## Options
266266

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

310311
## Usage with a Modal
311312

‎src/RightButton.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ interface RightButtonProps {
1111
showChevron?: boolean
1212
showClear?: boolean
1313
loading?: boolean
14+
enableLoadingIndicator?: boolean
1415
buttonsContainerStyle?: StyleProp<ViewStyle>
1516
ChevronIconComponent?: React.ReactNode
1617
ClearIconComponent?: React.ReactNode
@@ -27,6 +28,7 @@ export const RightButton: React.FC<RightButtonProps> = memo(
2728
showChevron,
2829
showClear,
2930
loading,
31+
enableLoadingIndicator,
3032
buttonsContainerStyle,
3133
ChevronIconComponent,
3234
ClearIconComponent,
@@ -56,12 +58,12 @@ export const RightButton: React.FC<RightButtonProps> = memo(
5658
height: inputHeight,
5759
...(buttonsContainerStyle as object),
5860
}}>
59-
{!loading && showClear && (
61+
{(!enableLoadingIndicator || !loading) && showClear && (
6062
<TouchableOpacity onPress={onClearPress} style={styles.clearButton}>
6163
{ClearIconComponent ?? <XCircle width={18} stroke="#aeb4c6" />}
6264
</TouchableOpacity>
6365
)}
64-
{loading && <ActivityIndicator color="#999" />}
66+
{enableLoadingIndicator && loading && <ActivityIndicator color="#999" />}
6567
{RightIconComponent && (
6668
<TouchableOpacity onPress={onRightIconComponentPress} style={styles.chevronButton}>
6769
{RightIconComponent}

‎src/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export const AutocompleteDropdown = memo<
5252
ignoreAccents = true,
5353
trimSearchText = true,
5454
editable = true,
55+
enableLoadingIndicator = true,
5556
matchFrom,
5657
inputHeight = moderateScale(40, 0.2),
5758
suggestionsListMaxHeight = moderateScale(200, 0.2),
@@ -524,6 +525,7 @@ export const AutocompleteDropdown = memo<
524525
onChevronPress={onChevronPress}
525526
showChevron={showChevron ?? true}
526527
showClear={showClear ?? (!!searchText || !!selectedItem)}
528+
enableLoadingIndicator={enableLoadingIndicator}
527529
loading={loading}
528530
buttonsContainerStyle={rightButtonsContainerStyle}
529531
ChevronIconComponent={ChevronIconComponent}

‎src/types/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export interface IAutocompleteDropdownProps {
2929
inputHeight?: number
3030
suggestionsListMaxHeight?: number
3131
initialValue?: string | { id: string } | AutocompleteDropdownItem
32+
enableLoadingIndicator?: boolean
3233
loading?: boolean
3334
useFilter?: boolean
3435
showClear?: boolean

0 commit comments

Comments
 (0)