From 984c09980692d982f08676952589dac38d54e73d Mon Sep 17 00:00:00 2001 From: Konstantin Koulechov Date: Fri, 26 Jul 2019 13:46:00 +0200 Subject: [PATCH 1/2] Style props for text (and icon) container --- README.md | 60 ++++++++++++++++++++------------------- index.js | 80 +++++++++++++++++++++++++++++----------------------- package.json | 2 +- 3 files changed, 76 insertions(+), 66 deletions(-) diff --git a/README.md b/README.md index 057dfe4..7c2ccc3 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 | +| textContainerStyle | object | {} | false | Style for text (and icon) container (TouchableOpacity) | +| selectedTextStyle | object | {} | false | Selected text style | +| 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.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": { From f874e3451f1362617bb5d4c77687a1e9ad5a8551 Mon Sep 17 00:00:00 2001 From: Konstantin Koulechov Date: Fri, 26 Jul 2019 13:50:08 +0200 Subject: [PATCH 2/2] Updated index.d.ts --- README.md | 2 +- index.d.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7c2ccc3..8286f14 100644 --- a/README.md +++ b/README.md @@ -92,8 +92,8 @@ const options = [ | height | number | 40 | false | Height of component | | bold | bool | false | false | Indicate if text has fontWeight bold | | textStyle | object | {} | false | Text style | -| textContainerStyle | object | {} | false | Style for text (and icon) container (TouchableOpacity) | | 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 | 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;