feat(button-group): Adds selectMultiple feature (react-native-element…

…s#858) Closes react-native-elements#713
flyingcircle · Jan 28, 2018 · 52e7117 · 52e7117
1 parent 961dbf3
commit 52e7117
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 15 deletions.
diff --git a/docs/API/button_group.md b/docs/API/button_group.md
@@ -72,6 +72,8 @@ render () {
 | prop | default | type | description |
 | ---- | ---- | ----| ---- |
 | selectedIndex | none | number | current selected index of array of buttons (required) |
+| selectMultiple | false | boolean | allows the user to select multiple buttons |
+| selectedIndexes | [] | array (number) | current selected indexes from the array of buttons |
 | onPress | none | function | method to update Button Group Index (required) |
 | buttons | none | array | array of buttons for component (required), if returning a component, must be an object with { element: componentName } |
 | component | TouchableHighlight | React Native Component | Choose other button component such as TouchableOpacity (optional) |

diff --git a/src/buttons/ButtonGroup.js b/src/buttons/ButtonGroup.js
@@ -18,6 +18,8 @@ const ButtonGroup = props => {
     buttons,
     onPress,
     selectedIndex,
+    selectedIndexes,
+    selectMultiple,
     containerStyle,
     innerBorderStyle,
     lastBorderStyle,
@@ -36,24 +38,34 @@ const ButtonGroup = props => {
   } = props;
 
   const Component = component || TouchableHighlight;
+
   return (
     <View
       {...attributes}
       style={[styles.container, containerStyle && containerStyle]}
     >
       {buttons.map((button, i) => {
-        const containerRadius = !isNaN(containerBorderRadius)
-          ? containerBorderRadius
-          : 3;
+        const isSelected = selectedIndex === i || selectedIndexes.includes(i);
+
         return (
           <Component
             activeOpacity={activeOpacity}
             setOpacityTo={setOpacityTo}
             onHideUnderlay={onHideUnderlay}
             onShowUnderlay={onShowUnderlay}
             underlayColor={underlayColor || colors.primary}
-            disabled={disableSelected && i === selectedIndex ? true : false}
-            onPress={onPress ? () => onPress(i) : () => {}}
+            disabled={disableSelected && isSelected ? true : false}
+            onPress={() => {
+              if (selectMultiple) {
+                if (selectedIndexes.includes(i)) {
+                  onPress(selectedIndexes.filter(index => index !== i));
+                } else {
+                  onPress([...selectedIndexes, i]);
+                }
+              } else {
+                onPress(i);
+              }
+            }}
             key={i}
             style={[
               styles.button,
@@ -75,14 +87,14 @@ const ButtonGroup = props => {
               },
               i === buttons.length - 1 && {
                 ...lastBorderStyle,
-                borderTopRightRadius: containerRadius,
-                borderBottomRightRadius: containerRadius,
+                borderTopRightRadius: containerBorderRadius,
+                borderBottomRightRadius: containerBorderRadius,
               },
               i === 0 && {
-                borderTopLeftRadius: containerRadius,
-                borderBottomLeftRadius: containerRadius,
+                borderTopLeftRadius: containerBorderRadius,
+                borderBottomLeftRadius: containerBorderRadius,
               },
-              selectedIndex === i && {
+              isSelected && {
                 backgroundColor: colors.primary,
               },
             ]}
@@ -91,9 +103,7 @@ const ButtonGroup = props => {
               style={[
                 styles.textContainer,
                 buttonStyle && buttonStyle,
-                selectedIndex === i &&
-                  selectedButtonStyle &&
-                  selectedButtonStyle,
+                isSelected && selectedButtonStyle && selectedButtonStyle,
               ]}
             >
               {button.element ? (
@@ -103,8 +113,8 @@ const ButtonGroup = props => {
                   style={[
                     styles.buttonText,
                     textStyle && textStyle,
-                    selectedIndex === i && { color: '#fff' },
-                    selectedIndex === i && selectedTextStyle,
+                    isSelected && { color: '#fff' },
+                    isSelected && selectedTextStyle,
                   ]}
                 >
                   {button}
@@ -162,6 +172,7 @@ ButtonGroup.propTypes = {
   selectedButtonStyle: ViewPropTypes.style,
   underlayColor: PropTypes.string,
   selectedIndex: PropTypes.number,
+  selectedIndexes: PropTypes.arrayOf(PropTypes.number),
   activeOpacity: PropTypes.number,
   onHideUnderlay: PropTypes.func,
   onShowUnderlay: PropTypes.func,
@@ -177,6 +188,14 @@ ButtonGroup.propTypes = {
   buttonStyle: ViewPropTypes.style,
   containerBorderRadius: PropTypes.number,
   disableSelected: PropTypes.bool,
+  selectMultiple: PropTypes.bool,
+};
+
+ButtonGroup.defaultProps = {
+  selectedIndexes: [],
+  selectMultiple: false,
+  containerBorderRadius: 3,
+  onPress: () => {},
 };
 
 export default ButtonGroup;
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -544,11 +544,25 @@ export interface InnerBorderStyleProperty {
 }
 
 export interface ButtonGroupProps {
+  /**
+   * Allows the user to select multiple items
+   * 
+   * @default false 
+   */
+  selectMultiple?: boolean;
+
   /**
      * Current selected index of array of buttons
      */
   selectedIndex: number;
 
+  /**
+   * The indexes that are selected. Used with 'selectMultiple'
+   * 
+   * @default []
+   */
+  selectedIndexes: number[];
+
   /**
      * Method to update Button Group Index
      */