Skip to content

Commit

Permalink
feat: added new prop for empty list message (#44)
Browse files Browse the repository at this point in the history
  • Loading branch information
@azeezat
azeezat authored Sep 11, 2023
1 parent 434d729 commit 3c97e96
Show file tree
Hide file tree
Showing 7 changed files with 56 additions and 41 deletions.
81 changes: 42 additions & 39 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ export default function App() {
unselectAllText: 'Remove everything',
selectAllCallback: () => Alert.alert('You selected everything'),
unselectAllCallback: () => Alert.alert('You removed everything'),
emptyListMessage: 'No record found',
}}
/>
);
Expand Down Expand Up @@ -238,43 +239,43 @@ For more examples visit our [wiki page](https://github.com/azeezat/react-native-

## Props

| Proptypes | Datatype | Example |
| -------------------------- | ------------------------ | -------------------------------------------------------------------- |
| label | `string` | Countries |
| placeholder | `string` | Select a country |
| options | `Array` | `[{ name: 'Nigeria', code: 'NG' }, { name: 'Albania', code: 'AL' }]` |
| optionLabel | `string` | `name` |
| optionValue | `string` | `code` |
| error | `string` | `This is a requiredfield` |
| helperText | `string` | `Only few countries are listed` |
| selectedValue | `string` or `Array` | `AL` or `[AL, AX]` |
| onValueChange | `function` | `()=>{}` |
| isMultiple | `Boolean` | `true` |
| isSearchable | `Boolean` | `true` |
| disabled | `Boolean` | `true` |
| dropdownIcon | `React Component` | `Image` or `<Text> Show <Text>` |
| labelStyle | `Object` | `{color: 'red', fontSize: 15, fontWeight: '500'}` |
| placeholderStyle | `Object` | `{color: 'blue', fontSize: 15, fontWeight: '500'}` |
| dropdownStyle | `Object` | `{borderColor: 'blue', margin: 5, borderWidth:0 ...}` |
| dropdownContainerStyle | `Object` | `{backgroundColor: 'red', width: '30%', ...}` |
| dropdownIconStyle | `Object` | `{top: 10 , right: 10, ...}` |
| selectedItemStyle | `Object` | `{fontWeight: '600', color: 'yellow', ...}` |
| multipleSelectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` |
| modalBackgroundStyle | `Object` | `{backgroundColor: 'rgba(196, 198, 246, 0.5)'}` |
| modalOptionsContainerStyle | `Object` | `{padding: 10, backgroundColor: 'cyan',}` |
| modalProps | `ReactNative.ModalProps` | `{supportedOrientations:{['landscape-left', landscape-right']}` |
| dropdownErrorStyle | `Object` | `{borderWidth: 2, borderStyle: 'solid'}` |
| dropdownErrorTextStyle | `Object` | `{color: 'red', fontWeight:'500'}` |
| dropdownHelperTextStyle | `Object` | `{color: 'green', fontWeight:'500'}` |
| primaryColor | `string` | `blue` |
| listHeaderComponent | `React Component` | `<Text> You can add any component here </Text>` |
| listFooterComponent | `React Component` | `<Text> You can add any component here <Text>` |
| hideModal | `Boolean` | Use this to hide the modal as needed |
| listComponentStyles | `Object` | `{listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle}` |
| checkboxComponentStyles | `Object` | `{checkboxSize: number, checkboxStyle: ViewStyle, checkboxLabelStyle: TextStyle}` |
| checkboxComponent | `React Component` | `<View style={styles.radioButton} />` |
| listControls | `Object` | `{ selectAllText: 'Choose all', unselectAllText: 'Remove all', selectAllCallback: () => {}, unselectAllCallback: () => {}}` |
| searchControls | `Object` | `{ textInputStyle: ViewStyle \| TextStyle, textInputContainerStyle: ViewStyle, textInputProps: TextInputProps}` |
| Proptypes | Datatype | Example |
| -------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
| label | `string` | Countries |
| placeholder | `string` | Select a country |
| options | `Array` | `[{ name: 'Nigeria', code: 'NG' }, { name: 'Albania', code: 'AL' }]` |
| optionLabel | `string` | `name` |
| optionValue | `string` | `code` |
| error | `string` | `This is a requiredfield` |
| helperText | `string` | `Only few countries are listed` |
| selectedValue | `string` or `Array` | `AL` or `[AL, AX]` |
| onValueChange | `function` | `()=>{}` |
| isMultiple | `Boolean` | `true` |
| isSearchable | `Boolean` | `true` |
| disabled | `Boolean` | `true` |
| dropdownIcon | `React Component` | `Image` or `<Text> Show <Text>` |
| labelStyle | `Object` | `{color: 'red', fontSize: 15, fontWeight: '500'}` |
| placeholderStyle | `Object` | `{color: 'blue', fontSize: 15, fontWeight: '500'}` |
| dropdownStyle | `Object` | `{borderColor: 'blue', margin: 5, borderWidth:0 ...}` |
| dropdownContainerStyle | `Object` | `{backgroundColor: 'red', width: '30%', ...}` |
| dropdownIconStyle | `Object` | `{top: 10 , right: 10, ...}` |
| selectedItemStyle | `Object` | `{fontWeight: '600', color: 'yellow', ...}` |
| multipleSelectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` |
| modalBackgroundStyle | `Object` | `{backgroundColor: 'rgba(196, 198, 246, 0.5)'}` |
| modalOptionsContainerStyle | `Object` | `{padding: 10, backgroundColor: 'cyan',}` |
| modalProps | `ReactNative.ModalProps` | `{supportedOrientations:{['landscape-left', landscape-right']}` |
| dropdownErrorStyle | `Object` | `{borderWidth: 2, borderStyle: 'solid'}` |
| dropdownErrorTextStyle | `Object` | `{color: 'red', fontWeight:'500'}` |
| dropdownHelperTextStyle | `Object` | `{color: 'green', fontWeight:'500'}` |
| primaryColor | `string` | `blue` |
| listHeaderComponent | `React Component` | `<Text> You can add any component here </Text>` |
| listFooterComponent | `React Component` | `<Text> You can add any component here <Text>` |
| hideModal | `Boolean` | Use this to hide the modal as needed |
| listComponentStyles | `Object` | `{listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle}` |
| checkboxComponentStyles | `Object` | `{checkboxSize: number, checkboxStyle: ViewStyle, checkboxLabelStyle: TextStyle}` |
| checkboxComponent | `React Component` | `<View style={styles.radioButton} />` |
| listControls | `Object` | `{ selectAllText: 'Choose all', unselectAllText: 'Remove all', selectAllCallback: () => {}, unselectAllCallback: () => {}, emptyListMessage: 'No record found'}` |
| searchControls | `Object` | `{ textInputStyle: ViewStyle \| TextStyle, textInputContainerStyle: ViewStyle, textInputProps: TextInputProps}` |

## Deprecation Notice

Expand All @@ -292,13 +293,14 @@ checkboxComponentStyles = {
borderColor: 'red',
},
checkboxLabelStyle: { color: 'red', fontSize: 20 },
...
};
```

- `searchInputStyle` would now be inside replaced with `textInputStyle` in the `searchControls` object

```js
searchControls={
searchControls = {
textInputStyle: {
color: 'blue',
fontWeight: '500',
Expand All @@ -318,7 +320,8 @@ searchControls={
placeholder: 'Search anything here',
placeholderTextColor: 'white',
},
}
...
};
```

## Contributing
Expand Down
1 change: 1 addition & 0 deletions example/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,7 @@ export default function App() {
unselectAllText: 'Remove everything',
selectAllCallback: () => Alert.alert('You selected everything'),
unselectAllCallback: () => Alert.alert('You removed everything'),
emptyListMessage: 'No record found',
}}
/>

Expand Down
2 changes: 2 additions & 0 deletions src/components/Dropdown/DropdownFlatList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const DropdownFlatList = ({
checkboxComponent,
listComponentStyles,
listIndex,
emptyListMessage,
...rest
}: any) => {
const flatlistRef = useRef<FlatList<TFlatList>>(null);
Expand All @@ -48,6 +49,7 @@ const DropdownFlatList = ({
ListEmptyComponent={
<ListEmptyComponent
listEmptyComponentStyle={listComponentStyles?.listEmptyComponentStyle}
emptyListMessage={emptyListMessage}
/>
}
contentContainerStyle={[
Expand Down
2 changes: 2 additions & 0 deletions src/components/Dropdown/DropdownSectionList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const DropdownSectionList = ({
checkboxComponent,
listComponentStyles,
listIndex,
emptyListMessage,
...rest
}: any) => {
const [expandedSections, setExpandedSections] = useState(new Set());
Expand Down Expand Up @@ -84,6 +85,7 @@ const DropdownSectionList = ({
ListEmptyComponent={
<ListEmptyComponent
listEmptyComponentStyle={listComponentStyles?.listEmptyComponentStyle}
emptyListMessage={emptyListMessage}
/>
}
contentContainerStyle={[
Expand Down
9 changes: 7 additions & 2 deletions src/components/Others/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,15 @@ import {
} from 'react-native';
import { colors } from '../../styles/colors';

export const ListEmptyComponent = ({ listEmptyComponentStyle }: any) => {
export const ListEmptyComponent = ({
listEmptyComponentStyle,
emptyListMessage,
}: any) => {
return (
<View style={styles.listEmptyComponentStyle}>
<Text style={listEmptyComponentStyle}>No options available</Text>
<Text style={listEmptyComponentStyle}>
{emptyListMessage || 'No options available'}
</Text>
</View>
);
};
Expand Down
1 change: 1 addition & 0 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,6 +409,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
checkboxComponentStyles={checkboxComponentStyles}
checkboxComponent={checkboxComponent}
listIndex={listIndex}
emptyListMessage={listControls?.emptyListMessage}
/>
</CustomModal>
</>
Expand Down
1 change: 1 addition & 0 deletions src/types/index.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export type DropdownProps = {
unselectAllText?: string;
selectAllCallback?: () => void;
unselectAllCallback?: () => void;
emptyListMessage?: string;
};
searchControls?: {
textInputStyle?: ViewStyle | TextStyle;
Expand Down

0 comments on commit 3c97e96

Please sign in to comment.