Skip to content

Commit

Permalink
fix: allow addition of custom component to dropdown list, added unit …
Browse files Browse the repository at this point in the history
…tests, added autoCloseOnSelect prop.
  • Loading branch information
azeezat committed Aug 21, 2024
1 parent 6d5c3ec commit cbc3dac
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 45 deletions.
69 changes: 35 additions & 34 deletions README.md

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion example/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1345,7 +1345,7 @@ SPEC CHECKSUMS:
DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
FBLazyVector: 4bc164e5b5e6cfc288d2b5ff28643ea15fa1a589
fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f
hermes-engine: 01d3e052018c2a13937aca1860fbedbccd4a41b7
RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
RCTDeprecation: b03c35057846b685b3ccadc9bfe43e349989cdb2
Expand Down
56 changes: 53 additions & 3 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,10 @@ export default function App() {
label="Currency"
placeholder="Select multiple currencies..."
options={[
{name: 'Naira (NGN) \u20A6', code: 'NGN'},
{
name: 'Naira (NGN) \u20A6',
code: 'NGN',
},
{name: 'Dollar (USD) \u0024', code: 'USD'},
{name: 'Euro (EUR) \u20AC', code: 'EUR'},
]}
Expand Down Expand Up @@ -84,15 +87,56 @@ export default function App() {
onDismiss: () => console.log('modal was dismissed'), //only works for ios
},
}}
autoCloseOnSelect={false}
/>

<DropdownSelect
label="Border has been removed"
placeholder="Select users"
options={[
{label: 'John Doe', value: '12'},
{label: 'James Bond', value: '13'},
{
value: '01',
labelComponent: (
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
style={styles.avatarStyle}
source={{
uri: 'https://avatar.iran.liara.run/public/boy?username=Ash',
}}
/>

<Text>John Doe</Text>
</View>
),
},
{
value: '02',
labelComponent: (
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
style={styles.avatarStyle}
source={{
uri: 'https://avatar.iran.liara.run/username?username=Azeezat+Raheem',
}}
/>

<Text>Azeezat Raheem</Text>
</View>
),
},
]}
optionLabel={'labelComponent'}
optionValue={'value'}
selectedValue={users}
onValueChange={(itemValue: any) => setUsers(itemValue)}
isSearchable
Expand Down Expand Up @@ -412,4 +456,10 @@ const styles = StyleSheet.create({
borderWidth: 3,
borderColor: 'white',
},
avatarStyle: {
height: 20,
width: 20,
borderRadius: 20,
marginRight: 5,
},
});
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
"@commitlint/config-conventional": "^19.2.2",
"@react-native-community/eslint-config": "^3.2.0",
"@release-it/conventional-changelog": "^8.0.1",
"@testing-library/jest-dom": "^6.4.8",
"@testing-library/react-native": "^12.5.1",
"@types/jest": "^29.5.12",
"@types/react": "18.3.2",
Expand Down
39 changes: 34 additions & 5 deletions src/__tests__/index.test.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,39 @@
import React from 'react';
import DropdownSelect from '../index';
import { render, screen, userEvent } from '@testing-library/react-native';
import '@testing-library/jest-dom';

describe('Initial state of component', () => {
beforeAll(() => {
jest.useFakeTimers();
});

import { render,screen } from '@testing-library/react-native';
afterAll(() => {
jest.useRealTimers();
});
const defaultDropdown = (
<DropdownSelect options={[]} onValueChange={() => {}} />
);

test('basic test', () => {
render(<DropdownSelect options={[]} onValueChange={() => {}} />);
expect(screen.getByText(" Select an option"))
});
test('show default texts', () => {
render(defaultDropdown);
expect(screen.getByText('Select an option'));
});

test('show default styles', () => {
render(defaultDropdown);
const placeholderStyle = screen.getByText('Select an option');
console.log(placeholderStyle.props)
expect(placeholderStyle.props.style).toMatchObject([
{ color: '#000000' },
undefined,
]);
});

test('open modal when dropdown is clicked', async () => {
const user = userEvent.setup();
render(defaultDropdown);
await user.press(screen.getByText('Select an option'));
expect(screen.getByText('No options available'));
});
});
6 changes: 5 additions & 1 deletion src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
searchControls,
modalControls,
checkboxControls,
autoCloseOnSelect=true,
...rest
}) => {
const [newOptions, setNewOptions] = useState<TFlatList | TSectionList>([]);
Expand Down Expand Up @@ -122,7 +123,10 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
} else {
setSelectedItem(value);
onValueChange(value); // send value to parent

if(autoCloseOnSelect){
setOpen(false); // close modal upon selection
}
}
};

Expand Down Expand Up @@ -390,7 +394,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
ListHeaderComponent={
<>
{isSearchable && (
<Input
<Input
value={searchValue}
onChangeText={(text: string) => onSearch(text)}
style={searchControls?.textInputStyle || searchInputStyle}
Expand Down
4 changes: 3 additions & 1 deletion src/types/index.types.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react';
import type {
ViewStyle,
ColorValue,
Expand Down Expand Up @@ -27,6 +28,7 @@ export type CommonDropdownProps = {
| boolean[]
| number[]
| null;
autoCloseOnSelect?: boolean;
};

export type TDropdownInputProps = {
Expand Down Expand Up @@ -119,7 +121,7 @@ export type TListControls = {

export type TFlatList = TFlatListItem[];
export type TFlatListItem = {
[key: string]: string | number | boolean;
[key: string]: string | number | boolean | React.JSX.Element;
};

export type TSectionList = TSectionListItem[];
Expand Down
56 changes: 56 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
# yarn lockfile v1


"@adobe/css-tools@^4.4.0":
version "4.4.0"
resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.4.0.tgz#728c484f4e10df03d5a3acd0d8adcbbebff8ad63"
integrity sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==

"@ampproject/remapping@^2.2.0":
version "2.3.0"
resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
Expand Down Expand Up @@ -1166,6 +1171,13 @@
dependencies:
regenerator-runtime "^0.14.0"

"@babel/runtime@^7.9.2":
version "7.25.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
dependencies:
regenerator-runtime "^0.14.0"

"@babel/template@^7.0.0", "@babel/template@^7.24.7", "@babel/template@^7.3.3":
version "7.24.7"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.7.tgz#02efcee317d0609d2c07117cb70ef8fb17ab7315"
Expand Down Expand Up @@ -2274,6 +2286,20 @@
dependencies:
defer-to-connect "^2.0.1"

"@testing-library/jest-dom@^6.4.8":
version "6.4.8"
resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.8.tgz#9c435742b20c6183d4e7034f2b329d562c079daa"
integrity sha512-JD0G+Zc38f5MBHA4NgxQMR5XtO5Jx9g86jqturNTt2WUfRmLDIY7iKkWHDCCTiDuFMre6nxAD5wHw9W5kI4rGw==
dependencies:
"@adobe/css-tools" "^4.4.0"
"@babel/runtime" "^7.9.2"
aria-query "^5.0.0"
chalk "^3.0.0"
css.escape "^1.5.1"
dom-accessibility-api "^0.6.3"
lodash "^4.17.21"
redent "^3.0.0"

"@testing-library/react-native@^12.5.1":
version "12.5.1"
resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.5.1.tgz#8ff67e87589d7d3307fce8ec41131c898c9dbd98"
Expand Down Expand Up @@ -2701,6 +2727,13 @@ argparse@^2.0.1:
resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==

aria-query@^5.0.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
dependencies:
dequal "^2.0.3"

array-buffer-byte-length@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
Expand Down Expand Up @@ -3143,6 +3176,14 @@ chalk@^2.4.2:
escape-string-regexp "^1.0.5"
supports-color "^5.3.0"

chalk@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
dependencies:
ansi-styles "^4.1.0"
supports-color "^7.1.0"

chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
Expand Down Expand Up @@ -3603,6 +3644,11 @@ crypto-random-string@^4.0.0:
dependencies:
type-fest "^1.0.1"

css.escape@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==

csstype@^3.0.2:
version "3.1.3"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
Expand Down Expand Up @@ -3792,6 +3838,11 @@ deprecation@^2.0.0:
resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==

dequal@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==

destroy@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
Expand Down Expand Up @@ -3821,6 +3872,11 @@ doctrine@^2.1.0:
dependencies:
esutils "^2.0.2"

dom-accessibility-api@^0.6.3:
version "0.6.3"
resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8"
integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==

dot-prop@^5.1.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
Expand Down

0 comments on commit cbc3dac

Please sign in to comment.