From 9b543107de994aa10eb1bd5dedd7820cf31078c5 Mon Sep 17 00:00:00 2001
From: Yauhen <e.penkin@akveo.com>
Date: Mon, 29 Apr 2019 09:57:37 +0300
Subject: [PATCH] refactor(ui): button-group layout refactor

---
 .../ui/buttonGroup/buttonGroup.component.tsx  | 56 ++++++------
 .../ui/buttonGroup/buttonGroup.spec.tsx       |  2 +-
 src/framework/ui/buttonGroup/type.ts          | 51 -----------
 src/framework/ui/common/mapping.json          | 26 +++++-
 .../src/ui/screen/buttonGroup.component.tsx   | 90 +++++++++++++++----
 5 files changed, 124 insertions(+), 101 deletions(-)
 delete mode 100644 src/framework/ui/buttonGroup/type.ts

diff --git a/src/framework/ui/buttonGroup/buttonGroup.component.tsx b/src/framework/ui/buttonGroup/buttonGroup.component.tsx
index 2c7ddf063..fa2f11879 100644
--- a/src/framework/ui/buttonGroup/buttonGroup.component.tsx
+++ b/src/framework/ui/buttonGroup/buttonGroup.component.tsx
@@ -3,16 +3,13 @@ import {
   StyleSheet,
   View,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
 import {
   StyledComponentProps,
   StyleType,
 } from '@kitten/theme';
 import { Props as ButtonProps } from '../button/button.component';
-import {
-  ButtonStyleProvider,
-  ButtonStyleProviders,
-} from './type';
 
 type ButtonElement = React.ReactElement<ButtonProps>;
 
@@ -27,54 +24,46 @@ export class ButtonGroup extends React.Component<Props> {
 
   static styledComponentName: string = 'ButtonGroup';
 
-  private styleProvider: ButtonStyleProvider = ButtonStyleProviders.DEFAULT;
-
   private getComponentStyle = (style: StyleType): StyleType => {
     const {
-      buttonBorderRadius,
+      buttonBorderRightColor,
+      buttonBorderRightWidth,
       ...containerParameters
     } = style;
 
     return {
-      container: containerParameters,
+      container: {
+        ...containerParameters,
+        ...styles.container,
+      },
       button: {
-        borderRadius: buttonBorderRadius,
+        borderRightColor: buttonBorderRightColor,
+        borderRightWidth: buttonBorderRightWidth,
+        ...styles.button,
       },
     };
   };
 
-  private getChildComponentStyle = (index: number, source: StyleType): StyleType => {
+  private isLastElement = (index: number): boolean => {
     const { children } = this.props;
 
-    switch (index) {
-      case 0:
-        return this.styleProvider.start(source);
-      case React.Children.count(children) - 1:
-        return this.styleProvider.end(source);
-      default:
-        return this.styleProvider.center(source);
-    }
+    return index === React.Children.count(children) - 1;
   };
 
   private renderComponentChild = (element: ButtonElement, index: number, style: StyleType): ButtonElement => {
-    const { appearance, size, children } = this.props;
-    const { style: elementStyle, ...derivedProps } = element.props;
+    const { appearance, size } = this.props;
 
-    const isSingle: boolean = React.Children.count(children) === 1;
-    const positionedStyle: StyleType = isSingle ? style : this.getChildComponentStyle(index, style);
+    const additionalStyle: ViewStyle = this.isLastElement(index) ? styles.lastButton : style;
 
     return React.cloneElement(element, {
-      ...derivedProps,
-      style: [elementStyle, positionedStyle],
       key: index,
+      style: [element.props.style, additionalStyle],
       appearance: appearance,
       size: size,
     });
   };
 
-  private renderComponentChildren = (source: ButtonElement | ButtonElement[],
-                                     style: StyleType): ButtonElement[] => {
-
+  private renderComponentChildren = (source: ButtonElement | ButtonElement[], style: StyleType): ButtonElement[] => {
     return React.Children.map(source, (element: ButtonElement, index: number): ButtonElement => {
       return this.renderComponentChild(element, index, style);
     });
@@ -89,7 +78,7 @@ export class ButtonGroup extends React.Component<Props> {
     return (
       <View
         {...derivedProps}
-        style={[container, style, styles.container]}>
+        style={[container, style]}>
         {componentChildren}
       </View>
     );
@@ -99,5 +88,16 @@ export class ButtonGroup extends React.Component<Props> {
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
+    overflow: 'hidden',
+  },
+  button: {
+    borderRadius: 0,
+    borderLeftWidth: 0,
+    borderTopWidth: 0,
+    borderBottomWidth: 0,
+  },
+  lastButton: {
+    borderWidth: 0,
+    borderRadius: 0,
   },
 });
diff --git a/src/framework/ui/buttonGroup/buttonGroup.spec.tsx b/src/framework/ui/buttonGroup/buttonGroup.spec.tsx
index 7e1968056..d35f4fde0 100644
--- a/src/framework/ui/buttonGroup/buttonGroup.spec.tsx
+++ b/src/framework/ui/buttonGroup/buttonGroup.spec.tsx
@@ -42,7 +42,7 @@ describe('@button-group: component checks', () => {
       <Mock appearance={groupAppearance}>
         <Button appearance='default'/>
         <Button/>
-        <Button size='outline'/>
+        <Button appearance='outline'/>
       </Mock>,
     );
 
diff --git a/src/framework/ui/buttonGroup/type.ts b/src/framework/ui/buttonGroup/type.ts
deleted file mode 100644
index 27a9f157a..000000000
--- a/src/framework/ui/buttonGroup/type.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { StyleType } from '@kitten/theme';
-
-export interface ButtonStyleProvider {
-  start(source: StyleType): StyleType;
-
-  center(source: StyleType): StyleType;
-
-  end(source: StyleType): StyleType;
-}
-
-export class ButtonStyleProviders {
-  static DEFAULT: ButtonStyleProvider = new class implements ButtonStyleProvider {
-
-    defaults(source: StyleType): StyleType {
-      return {
-        borderRadius: 0,
-      };
-    }
-
-    start(source: StyleType): StyleType {
-      const { borderRadius, margin } = source;
-
-      return {
-        ...this.defaults(source),
-        borderTopStartRadius: borderRadius,
-        borderBottomStartRadius: borderRadius,
-        marginRight: margin / 2,
-      };
-    }
-
-    center(source: StyleType): StyleType {
-      const { margin } = source;
-
-      return {
-        ...this.defaults(source),
-        marginHorizontal: margin / 2,
-      };
-    }
-
-    end(source: StyleType): StyleType {
-      const { borderRadius, margin } = source;
-
-      return {
-        ...this.defaults(source),
-        borderTopEndRadius: borderRadius,
-        borderBottomEndRadius: borderRadius,
-        marginLeft: margin / 2,
-      };
-    }
-  };
-}
diff --git a/src/framework/ui/common/mapping.json b/src/framework/ui/common/mapping.json
index 6e204c3ce..fbb566e63 100644
--- a/src/framework/ui/common/mapping.json
+++ b/src/framework/ui/common/mapping.json
@@ -649,8 +649,20 @@
       "meta": {
         "scope": "all",
         "parameters": {
-          "buttonBorderRadius": {
+          "borderRadius": {
             "type": "number"
+          },
+          "borderWidth": {
+            "type": "number"
+          },
+          "borderColor": {
+            "type": "string"
+          },
+          "buttonBorderRightColor": {
+            "type": "string"
+          },
+          "buttonBorderRightWidth": {
+            "type": "string"
           }
         },
         "appearances": {
@@ -685,7 +697,10 @@
       "appearances": {
         "filled": {
           "mapping": {
-            "buttonBorderRadius": 8
+            "borderRadius": 8,
+            "borderColor": "opacity-transparent",
+            "buttonBorderRightColor": "color-primary-600",
+            "buttonBorderRightWidth": 1
           },
           "variantGroups": {
             "size": {
@@ -698,7 +713,12 @@
           }
         },
         "outline": {
-          "mapping": {}
+          "mapping": {
+            "borderWidth": 2,
+            "borderColor": "color-primary-500",
+            "buttonBorderRightColor": "color-primary-500",
+            "buttonBorderRightWidth": 2
+          }
         },
         "ghost": {
           "mapping": {}
diff --git a/src/playground/src/ui/screen/buttonGroup.component.tsx b/src/playground/src/ui/screen/buttonGroup.component.tsx
index 1a944b6ae..4d1342d9d 100644
--- a/src/playground/src/ui/screen/buttonGroup.component.tsx
+++ b/src/playground/src/ui/screen/buttonGroup.component.tsx
@@ -4,6 +4,7 @@ import {
   Text,
   View,
   Image,
+  ScrollView,
 } from 'react-native';
 import { NavigationScreenProps } from 'react-navigation';
 import {
@@ -20,6 +21,7 @@ import {
 type Props = & ThemedComponentProps & NavigationScreenProps;
 
 const APPEARANCE: string = 'filled';
+const APPEARANCE_OUTLINE: string = 'outline';
 const ICON: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' };
 
 interface State {
@@ -36,13 +38,17 @@ class ButtonGroupScreen extends React.Component<Props, State> {
   };
 
   public render(): React.ReactNode {
+    const { themedStyle } = this.props;
+
     return (
-      <View style={this.props.themedStyle.container}>
-        <View style={this.props.themedStyle.containerSection}>
-          <Text style={this.props.themedStyle.textDescription}>Icon</Text>
-          <View style={this.props.themedStyle.containerPreview}>
+      <ScrollView
+        style={themedStyle.container}
+        contentContainerStyle={themedStyle.content}>
+        <View style={themedStyle.containerSection}>
+          <Text style={themedStyle.textDescription}>Icon</Text>
+          <View style={themedStyle.containerPreview}>
             <ButtonGroup
-              style={this.props.themedStyle.component}
+              style={themedStyle.component}
               appearance={APPEARANCE}
               size='giant'>
               <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}/>
@@ -50,7 +56,7 @@ class ButtonGroupScreen extends React.Component<Props, State> {
               <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}/>
             </ButtonGroup>
             <ButtonGroup
-              style={this.props.themedStyle.component}
+              style={themedStyle.component}
               appearance={APPEARANCE}
               size='large'>
               <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}/>
@@ -58,7 +64,7 @@ class ButtonGroupScreen extends React.Component<Props, State> {
               <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}/>
             </ButtonGroup>
             <ButtonGroup
-              style={this.props.themedStyle.component}
+              style={themedStyle.component}
               appearance={APPEARANCE}
               size='medium'>
               <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}/>
@@ -66,7 +72,7 @@ class ButtonGroupScreen extends React.Component<Props, State> {
               <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}/>
             </ButtonGroup>
             <ButtonGroup
-              style={this.props.themedStyle.component}
+              style={themedStyle.component}
               appearance={APPEARANCE}
               size='small'>
               <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}/>
@@ -74,7 +80,7 @@ class ButtonGroupScreen extends React.Component<Props, State> {
               <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}/>
             </ButtonGroup>
             <ButtonGroup
-              style={this.props.themedStyle.component}
+              style={themedStyle.component}
               appearance={APPEARANCE}
               size='tiny'>
               <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}/>
@@ -83,11 +89,11 @@ class ButtonGroupScreen extends React.Component<Props, State> {
             </ButtonGroup>
           </View>
         </View>
-        <View style={this.props.themedStyle.containerSection}>
-          <Text style={this.props.themedStyle.textDescription}>Text</Text>
-          <View style={this.props.themedStyle.containerPreview}>
+        <View style={themedStyle.containerSection}>
+          <Text style={themedStyle.textDescription}>Text</Text>
+          <View style={themedStyle.containerPreview}>
             <ButtonGroup
-              style={this.props.themedStyle.component}
+              style={themedStyle.component}
               appearance={APPEARANCE}
               size='giant'>
               <Button>L</Button>
@@ -95,7 +101,7 @@ class ButtonGroupScreen extends React.Component<Props, State> {
               <Button>R</Button>
             </ButtonGroup>
             <ButtonGroup
-              style={this.props.themedStyle.component}
+              style={themedStyle.component}
               appearance={APPEARANCE}
               size='large'>
               <Button>L</Button>
@@ -103,7 +109,7 @@ class ButtonGroupScreen extends React.Component<Props, State> {
               <Button>R</Button>
             </ButtonGroup>
             <ButtonGroup
-              style={this.props.themedStyle.component}
+              style={themedStyle.component}
               appearance={APPEARANCE}
               size='medium'>
               <Button>L</Button>
@@ -111,7 +117,7 @@ class ButtonGroupScreen extends React.Component<Props, State> {
               <Button>R</Button>
             </ButtonGroup>
             <ButtonGroup
-              style={this.props.themedStyle.component}
+              style={themedStyle.component}
               appearance={APPEARANCE}
               size='small'>
               <Button>L</Button>
@@ -119,7 +125,7 @@ class ButtonGroupScreen extends React.Component<Props, State> {
               <Button>R</Button>
             </ButtonGroup>
             <ButtonGroup
-              style={this.props.themedStyle.component}
+              style={themedStyle.component}
               appearance={APPEARANCE}
               size='tiny'>
               <Button>L</Button>
@@ -128,13 +134,61 @@ class ButtonGroupScreen extends React.Component<Props, State> {
             </ButtonGroup>
           </View>
         </View>
-      </View>
+        <View style={themedStyle.containerSection}>
+          <Text style={themedStyle.textDescription}>Outline Icon + Text</Text>
+          <View style={themedStyle.containerPreview}>
+            <ButtonGroup
+              style={themedStyle.component}
+              appearance={APPEARANCE_OUTLINE}
+              size='giant'>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>L</Button>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>M</Button>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>R</Button>
+            </ButtonGroup>
+            <ButtonGroup
+              style={themedStyle.component}
+              appearance={APPEARANCE_OUTLINE}
+              size='large'>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>L</Button>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>M</Button>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>R</Button>
+            </ButtonGroup>
+            <ButtonGroup
+              style={themedStyle.component}
+              appearance={APPEARANCE_OUTLINE}
+              size='medium'>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>L</Button>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>M</Button>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>R</Button>
+            </ButtonGroup>
+            <ButtonGroup
+              style={themedStyle.component}
+              appearance={APPEARANCE_OUTLINE}
+              size='small'>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>L</Button>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>M</Button>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>R</Button>
+            </ButtonGroup>
+            <ButtonGroup
+              style={themedStyle.component}
+              appearance={APPEARANCE_OUTLINE}
+              size='tiny'>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>L</Button>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>M</Button>
+              <Button icon={(style: StyleType) => <Image source={ICON} style={style}/>}>R</Button>
+            </ButtonGroup>
+          </View>
+        </View>
+      </ScrollView>
     );
   }
 }
 
 export default withStyles(ButtonGroupScreen, (theme: ThemeType) => ({
   container: {
+    flex: 1,
+  },
+  content: {
     paddingVertical: 8,
     paddingHorizontal: 16,
   },