diff --git a/README.md b/README.md index 057dfe4..8286f14 100644 --- a/README.md +++ b/README.md @@ -68,35 +68,37 @@ const options = [ ### Props | Prop | Type | Default | Required | Note | -| ------------------------- | ----------------------- | ----------- | -------- | -------------------------------------------------------------------------------- | -| options | array | null | true | Items array to render. Each item has a label and a value and optionals icons | -| options[].label | string | null | true | Label from each item | -| options[].value | string | null | true | Value from each item | -| options[].customIcon | Jsx element ou Function | null | false | Optional custom icon from each item | -| options[].imageIcon | string | null | false | Source from a image icon form each item. Has the same color then label in render | -| options[].activeColor | string | null | false | Color from each item when is selected | -| initial | number | 0 | true | Item selected in initial render | -| value | number | undefined | false | The switch value (will call onPress) | -| onPress | function | console.log | true | Callback function called after change value. | -| disableValueChangeOnPress | bool | false | false | Disables the onPress call when the value is manually changed | -| fontSize | number | null | false | Font size from labels. If null default fontSize of the app is used. | -| selectedColor | string | '#fff' | false | Color text of the item selected | -| buttonColor | string | '#BCD635' | false | Color bg of the item selected | -| textColor | string | '#000' | false | Color text of the not selecteds items | -| backgroundColor | string | '#ffffff' | false | Color bg of the component | -| borderColor | string | '#c9c9c9' | false | Border Color of the component | -| borderRadius | number | 50 | false | Border Radius of the component | -| hasPadding | bool | false | false | Indicate if item has padding | -| animationDuration | number | 250 | false | Duration of the animation | -| valuePadding | number | 1 | false | Size of padding | -| height | number | 40 | false | Height of component | -| bold | bool | false | false | Indicate if text has fontWeight bold | -| textStyle | object | {} | false | Text style | -| selectedTextStyle | object | {} | false | Selected text style | -| imageStyle | object | {} | false | Image style | -| style | object | {} | false | Container style | -| returnObject | bool | false | false | Indicate if onPress function return an option instead of option.value | -| disabled | bool | false | false | Disables the switch | +| ------------------------- | ----------------------- | ----------- | -------- | -------------------------------------------------------------------------------- | +| options | array | null | true | Items array to render. Each item has a label and a value and optionals icons | +| options[].label | string | null | true | Label from each item | +| options[].value | string | null | true | Value from each item | +| options[].customIcon | Jsx element ou Function | null | false | Optional custom icon from each item | +| options[].imageIcon | string | null | false | Source from a image icon form each item. Has the same color then label in render | +| options[].activeColor | string | null | false | Color from each item when is selected | +| initial | number | 0 | true | Item selected in initial render | +| value | number | undefined | false | The switch value (will call onPress) | +| onPress | function | console.log | true | Callback function called after change value. | +| disableValueChangeOnPress | bool | false | false | Disables the onPress call when the value is manually changed | +| fontSize | number | null | false | Font size from labels. If null default fontSize of the app is used. | +| selectedColor | string | '#fff' | false | Color text of the item selected | +| buttonColor | string | '#BCD635' | false | Color bg of the item selected | +| textColor | string | '#000' | false | Color text of the not selecteds items | +| backgroundColor | string | '#ffffff' | false | Color bg of the component | +| borderColor | string | '#c9c9c9' | false | Border Color of the component | +| borderRadius | number | 50 | false | Border Radius of the component | +| hasPadding | bool | false | false | Indicate if item has padding | +| animationDuration | number | 250 | false | Duration of the animation | +| valuePadding | number | 1 | false | Size of padding | +| height | number | 40 | false | Height of component | +| bold | bool | false | false | Indicate if text has fontWeight bold | +| textStyle | object | {} | false | Text style | +| selectedTextStyle | object | {} | false | Selected text style | +| textContainerStyle | object | {} | false | Style for text (and icon) container (TouchableOpacity) | +| selectedTextContainerStyle | object | {} | false | Style for selected text (and icon) container (TouchableOpacity) | +| imageStyle | object | {} | false | Image style | +| style | object | {} | false | Container style | +| returnObject | bool | false | false | Indicate if onPress function return an option instead of option.value | +| disabled | bool | false | false | Disables the switch | ### Authors diff --git a/index.d.ts b/index.d.ts index 19223ce..bda4e16 100644 --- a/index.d.ts +++ b/index.d.ts @@ -34,6 +34,8 @@ declare module "react-native-switch-selector" { bold?: boolean; textStyle?: TextStyle | RegisteredStyle; selectedTextStyle?: TextStyle | RegisteredStyle; + textCStyle?: TextStyle | RegisteredStyle; + selectedTextContainerStyle?: TextStyle | RegisteredStyle; imageStyle?: ImageStyle | RegisteredStyle; style?: ViewStyle | RegisteredStyle; returnObject?: boolean; diff --git a/index.js b/index.js index 2375db0..27221da 100644 --- a/index.js +++ b/index.js @@ -127,6 +127,8 @@ export default class SwitchSelector extends Component { style, textStyle, selectedTextStyle, + textContainerStyle, + selectedTextContainerStyle, imageStyle, textColor, selectedColor, @@ -141,46 +143,50 @@ export default class SwitchSelector extends Component { disabled } = this.props; - const options = this.props.options.map((element, index) => ( - this.toggleItem(index)} - > - {typeof element.customIcon === "function" - ? element.customIcon(this.state.selected == index) - : element.customIcon} - {element.imageIcon && ( - { + const is_selected = this.state.selected == index; + + return ( + this.toggleItem(index)} + > + {typeof element.customIcon === "function" + ? element.customIcon(is_selected) + : element.customIcon} + {element.imageIcon && ( + + )} + - )} - - {element.label} - - - )); + > + {element.label} + + + ) + }); return ( @@ -248,6 +254,8 @@ SwitchSelector.defaultProps = { style: {}, textStyle: {}, selectedTextStyle: {}, + textContainerStyle: {}, + selectedTextContainerStyle: {}, imageStyle: {}, textColor: "#000000", selectedColor: "#FFFFFF", diff --git a/package.json b/package.json index 90b37e4..3021fb0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-switch-selector", - "version": "1.1.14", + "version": "1.1.15", "description": "Switch Selector to React Native.", "main": "index.js", "scripts": {