Skip to content

Commit

Permalink
Merge pull request #81 from azeezat/feat/modify-checkbox
Browse files Browse the repository at this point in the history 
feat: Added checkboxUnselectedColor and checkboxDisabledStyle to checkboxControls Object
  • Loading branch information
@azeezat
azeezat authored Sep 1, 2024
2 parents 4a7451a + 53de256 commit c763fc0
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 55 deletions.
72 changes: 36 additions & 36 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,42 +241,42 @@ For more examples visit our [wiki page](https://github.com/azeezat/react-native-

## Props

| Proptypes | Datatype | Example |
| ------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| label | `string` or `ReactComponent` | Countries or `<Text> You can add any component here <Text>` |
| 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', ...}` |
| 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` | `<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}` |
| listEmptyComponent | `React Component` | `<Text> You can add any component here <Text>` |
| checkboxControls | `Object` | `{checkboxSize: number, checkboxStyle: ViewStyle, checkboxLabelStyle: TextStyle, checkboxComponent?: React.ReactNode}` |
| 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 `<Text> You can add any component here <Text>` |
| 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', ...}` |
| 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` | `<Text> You can add any component here </Text>` |
| listFooterComponent | `React Component` | `<Text> You can add any component here <Text>` |
| listComponentStyles | `Object` | `{listEmptyComponentStyle: ViewStyle, itemSeparatorStyle: ViewStyle, sectionHeaderStyle: TextStyle}` |
| listEmptyComponent | `React Component` | `<Text> You can add any component here <Text>` |
| 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}` |

## Deprecation Notice

Expand Down
10 changes: 8 additions & 2 deletions example/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export default function App() {
const [ingredientOptions, setIngredientOptions] = useState<any[]>([
{label: 'Pepper', value: '1'},
{label: 'Oil', value: '2'},
{label: 'Fish', value: '3', disabled: true},
]);

useEffect(() => {
Expand Down Expand Up @@ -85,7 +86,6 @@ export default function App() {
}}
dropdownErrorTextStyle={{color: 'red', fontWeight: '500'}}
error={gender ? '' : 'Gender is required'}
primaryColor={'green'}
modalControls={{
modalProps: {
onShow: () => logMovies(),
Expand Down Expand Up @@ -179,6 +179,7 @@ export default function App() {
borderColor: 'green',
},
checkboxLabelStyle: {color: 'green', fontSize: 20},
checkboxUnselectedColor: 'black',
checkboxComponent: <View style={styles.radioButton} />,
}}
listControls={{
Expand Down Expand Up @@ -352,6 +353,12 @@ export default function App() {
isMultiple
isSearchable
primaryColor={'#1c2d6b'}
checkboxControls={{
checkboxDisabledStyle: {
borderColor: 'red',
backgroundColor: 'red',
},
}}
listComponentStyles={{
sectionHeaderStyle: {
paddingVertical: 6,
Expand All @@ -378,7 +385,6 @@ export default function App() {
onValueChange={(itemValue: any) => setIngredients(itemValue)}
isMultiple
isSearchable
primaryColor={'deepskyblue'}
listEmptyComponent={
<View
style={{
Expand Down
Loading

0 comments on commit c763fc0

Please sign in to comment.