diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml new file mode 100644 index 0000000..a878787 --- /dev/null +++ b/.github/workflows/coverage.yml @@ -0,0 +1,13 @@ +name: 'coverage' +on: + pull_request: + branches: [ "main" ] +jobs: + coverage: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: ArtiomTr/jest-coverage-report-action@v2 + with: + package-manager: yarn + test-script: npm test diff --git a/.gitignore b/.gitignore index 7a4c932..1d45122 100644 --- a/.gitignore +++ b/.gitignore @@ -64,4 +64,7 @@ android/keystores/debug.keystore lib/ # npm -.npmrc \ No newline at end of file +.npmrc + +# coverage +coverage \ No newline at end of file diff --git a/README.md b/README.md index 53a46c0..6c8d54e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ [![NPM](https://nodei.co/npm/react-native-input-select.png?downloads=true)](https://nodei.co/npm/react-native-input-select/) [![npm version](https://badge.fury.io/js/react-native-input-select.svg)](https://badge.fury.io/js/react-native-input-select) [![GitHub stars](https://img.shields.io/github/stars/azeezat/react-native-select?style=social)](https://github.com/azeezat/react-native-select/stargazers) [![CodeQL](https://github.com/azeezat/react-native-select/actions/workflows/codeql.yml/badge.svg)](https://github.com/azeezat/react-native-select/actions/workflows/codeql.yml) [![Release & Publish to NPM](https://github.com/azeezat/react-native-select/actions/workflows/release-and-publish-to-npm.yml/badge.svg)](https://github.com/azeezat/react-native-select/actions/workflows/release-and-publish-to-npm.yml) +[![react-native-input-select](https://snyk.io/advisor/npm-package/react-native-input-select/badge.svg)](https://snyk.io/advisor/npm-package/react-native-input-select) # react-native-input-select @@ -241,42 +242,43 @@ For more examples visit our [wiki page](https://github.com/azeezat/react-native- ## Props -| Proptypes | Datatype | Example | -| ------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| label | `string` or `ReactComponent` | Countries or ` You can add any component here ` | -| 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 ` Show ` | -| 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', ...}` | -| dropdownErrorStyle | `Object` | `{borderWidth: 2, borderStyle: 'solid'}` | -| dropdownErrorTextStyle | `Object` | `{color: 'red', fontWeight:'500'}` | -| dropdownHelperTextStyle | `Object` | `{color: 'green', fontWeight:'500'}` | -| primaryColor | `string` | `blue` | -| autoCloseOnSelect | `boolean` | `false` | -| hideModal | `Boolean` | Use this to hide the modal as needed | -| listHeaderComponent | `React Component` | ` You can add any component here ` | -| listFooterComponent | `React Component` | ` You can add any component here ` | -| listComponentStyles | `Object` | `{listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle}` | -| listEmptyComponent | `React Component` | ` You can add any component here ` | -| checkboxControls | `Object` | `{checkboxSize: number, checkboxStyle: ViewStyle, checkboxLabelStyle: TextStyle, checkboxComponent?: React.ReactNode, checkboxDisabledStyle?: ViewStyle, checkboxUnselectedColor?: ColorValue}` | -| listControls | `Object` | `{ selectAllText: 'Choose all', unselectAllText: 'Remove all', selectAllCallback: () => {}, unselectAllCallback: () => {}, hideSelectAll: boolean, emptyListMessage: 'No record found'}` | -| searchControls | `Object` | `{ textInputStyle: ViewStyle \| TextStyle, textInputContainerStyle: ViewStyle, textInputProps: TextInputProps, searchCallback:(value)=>{}}` | -| modalControls | `Object` | `{ modalBackgroundStyle: ViewStyle, modalOptionsContainerStyle: ViewStyle, modalProps: ModalProps}` | +| Proptypes | Datatype | Example | +| ------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| label | `string` or `ReactComponent` | Countries or ` You can add any component here ` | +| 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 ` Show ` | +| 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', ...}` | +| dropdownErrorStyle | `Object` | `{borderWidth: 2, borderStyle: 'solid'}` | +| dropdownErrorTextStyle | `Object` | `{color: 'red', fontWeight:'500'}` | +| dropdownHelperTextStyle | `Object` | `{color: 'green', fontWeight:'500'}` | +| primaryColor | `string` | `blue` | +| autoCloseOnSelect | `boolean` | `false` | +| listHeaderComponent | `React Component` | ` You can add any component here ` | +| listFooterComponent | `React Component` | ` You can add any component here ` | +| listComponentStyles | `Object` | `{listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle}` | +| listEmptyComponent | `React Component` | ` You can add any component here ` | +| checkboxControls | `Object` | `{checkboxSize: number, checkboxStyle: ViewStyle, checkboxLabelStyle: TextStyle, checkboxComponent?: React.ReactNode, checkboxDisabledStyle?: ViewStyle, checkboxUnselectedColor?: ColorValue}` | +| listControls | `Object` | `{ selectAllText: 'Choose all', unselectAllText: 'Remove all', selectAllCallback: () => {}, unselectAllCallback: () => {}, hideSelectAll: boolean, emptyListMessage: 'No record found'}` | +| searchControls | `Object` | `{ textInputStyle: ViewStyle \| TextStyle, textInputContainerStyle: ViewStyle, textInputProps: TextInputProps, searchCallback:(value)=>{}}` | +| modalControls | `Object` | `{ modalBackgroundStyle: ViewStyle, modalOptionsContainerStyle: ViewStyle, modalProps: ModalProps}` | +| maxSelectableItems | `number` | 5 | +| ref | `useRef(null)` | Use this to open or close the modal as needed e.g dropdownRef.current?.open() or dropdownRef.current?.close() | ## Deprecation Notice diff --git a/babel.config.js b/babel.config.js index 0106e72..98b2c74 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,10 +1,15 @@ module.exports = { presets: ['module:metro-react-native-babel-preset'], - overrides: [{ - "plugins": [ - ["@babel/plugin-transform-private-methods", { - "loose": true - }] - ] - }] + overrides: [ + { + plugins: [ + [ + '@babel/plugin-transform-private-methods', + { + loose: true, + }, + ], + ], + }, + ], }; diff --git a/example/.eslintrc.js b/example/.eslintrc.js index 1030be2..840a722 100644 --- a/example/.eslintrc.js +++ b/example/.eslintrc.js @@ -1,4 +1,4 @@ module.exports = { root: true, - extends: ['@react-native', "@babel/plugin-transform-private-property-in-object"], + extends: ['@react-native'], }; diff --git a/example/src/App.tsx b/example/src/App.tsx index e76f66c..483182a 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,5 +1,5 @@ /* eslint-disable react-native/no-inline-styles */ -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useRef, useState} from 'react'; import { SafeAreaView, ScrollView, @@ -10,14 +10,16 @@ import { Alert, Image, Pressable, + TouchableHighlight, } from 'react-native'; import DropdownSelect from 'react-native-input-select'; import {countries} from './data'; +import {DropdownSelectHandle} from '../../src/types/index.types'; export default function App() { const [user, setUser] = useState(''); const [country, setCountry] = useState(''); - const [gender, setGender] = useState(); + const [gender, setGender] = useState(0); const [currency, setCurrency] = useState([]); const [meals, setMeals] = useState([]); const [item, setItem] = useState(''); @@ -40,11 +42,14 @@ export default function App() { console.log('You can make an API call when the modal opens.'); }; + const dropdownRef = useRef(null); + return ( + + + Male + + ), + id: 1, + }, + { + name: ( + + + + Female + + ), + id: 2, + }, ]} optionLabel={'name'} optionValue={'id'} @@ -143,15 +176,20 @@ export default function App() { label="Meal preferences" placeholder="Select your meal preferences" options={[ - {name: '🍛 Rice', value: '1', disabled: true}, + {name: '🍛 Rice', value: '1', disabled: false}, {name: '🍗 Chicken', value: '2'}, - {name: '🥦 Brocoli', value: '3', disabled: true}, + {name: '🥦 Brocoli', value: '3', disabled: false}, {name: '🍕 Pizza', value: '4'}, ]} + maxSelectableItems={2} optionLabel={'name'} optionValue={'value'} selectedValue={meals} - onValueChange={(itemValue: any) => setMeals(itemValue)} + onValueChange={(itemValue: any) => { + meals.length === 2 && console.log('You can only select 2 meals'); + + setMeals(itemValue); + }} dropdownStyle={{ backgroundColor: 'yellow', paddingVertical: 5, @@ -228,7 +266,18 @@ export default function App() { fontWeight: '900', }} /> - + dropdownRef.current?.open()} + style={{ + alignSelf: 'flex-start', + backgroundColor: 'green', + marginBottom: 20, + padding: 3, + }}> + + Open the dropdown below by pressing this component + + Alert.alert('Left button pressed')} color="#007AFF" /> +