Feat/segmented control new style (#1327)

* add fullWidth mode

* fullWidth generatedTypes

* update style

* remove fullWidth prop

* remove trailing comma

* set dynamic height

* fix style

Author: lidord-wix

demo/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -14,7 +14,9 @@ const segments = {
     },
     {label: 'Short'}
   ],
-  forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Colors'}]
+  forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Colors'}],
+  fifth: [{label: 'Full'}, {label: 'Width'}],
+  sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}]
 };
 
 const SegmentedControlScreen = () => {
@@ -23,30 +25,42 @@ const SegmentedControlScreen = () => {
   };
 
   return (
-    <View flex bottom padding-20>
-      <View flex center>
-        <SegmentedControl onChangeIndex={(index: number) => onChangeIndex('first', index)} segments={segments.first}/>
+    <View flex bottom padding-page>
+      <View flex centerV>
+        <View center>
+          <SegmentedControl onChangeIndex={(index: number) => onChangeIndex('first', index)} segments={segments.first}/>
+          <SegmentedControl
+            onChangeIndex={(index: number) => onChangeIndex('second', index)}
+            containerStyle={styles.container}
+            segments={segments.second}
+            initialIndex={2}
+          />
+          <SegmentedControl
+            onChangeIndex={(index: number) => onChangeIndex('third', index)}
+            containerStyle={styles.container}
+            activeColor={Colors.red30}
+            segments={segments.third}
+          />
+          <SegmentedControl
+            onChangeIndex={(index: number) => onChangeIndex('forth', index)}
+            containerStyle={styles.container}
+            segments={segments.forth}
+            activeColor={Colors.grey10}
+            borderRadius={BorderRadiuses.br20}
+            backgroundColor={Colors.grey10}
+            activeBackgroundColor={Colors.grey40}
+            inactiveColor={Colors.grey70}
+          />
+        </View>
         <SegmentedControl
-          onChangeIndex={(index: number) => onChangeIndex('second', index)}
-          containerStyle={styles.container}
-          segments={segments.second}
-          initialIndex={2}
-        />
-        <SegmentedControl
-          onChangeIndex={(index: number) => onChangeIndex('third', index)}
           containerStyle={styles.container}
-          activeColor={Colors.red30}
-          segments={segments.third}
+          onChangeIndex={(index: number) => onChangeIndex('second', index)}
+          segments={segments.fifth}
         />
         <SegmentedControl
-          onChangeIndex={(index: number) => onChangeIndex('forth', index)}
           containerStyle={styles.container}
-          segments={segments.forth}
-          activeColor={Colors.grey10}
-          borderRadius={BorderRadiuses.br20}
-          backgroundColor={Colors.grey10}
-          activeBackgroundColor={Colors.grey40}
-          inactiveColor={Colors.grey70}
+          onChangeIndex={(index: number) => onChangeIndex('second', index)}
+          segments={segments.sixth}
         />
       </View>
       <Text text40 dark10>

generatedTypes/components/segmentedControl/index.d.ts

@@ -51,6 +51,7 @@ export declare type SegmentedControlProps = {
      * Additional spacing styles for the container
      */
     containerStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
     testID?: string;
 };
 declare const _default: React.ComponentClass<SegmentedControlProps & {

src/components/segmentedControl/index.tsx

@@ -11,6 +11,7 @@ const {interpolate: _interpolate, interpolateNode} = Reanimated;
 const interpolate = interpolateNode || _interpolate;
 const Easing = EasingNode || _Easing;
 const BORDER_WIDTH = 1;
+const HORIZONTAL_PADDING = Spacings.s2;
 
 export type SegmentedControlItemProps = SegmentProps;
 export type SegmentedControlProps = {
@@ -62,6 +63,7 @@ export type SegmentedControlProps = {
    * Additional spacing styles for the container
    */
   containerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
   testID?: string;
 };
 
@@ -74,6 +76,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
     onChangeIndex,
     initialIndex = 0,
     containerStyle,
+    style,
     segments,
     activeColor = Colors.primary,
     borderRadius = BorderRadiuses.br100,
@@ -86,6 +89,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
   const [selectedSegment, setSelectedSegment] = useState(-1);
 
   const segmentsStyle = useRef([] as {x: number; width: number}[]);
+  const segmentedControlHeight = useRef(0);
   const segmentsCounter = useRef(0);
   const animatedValue = useRef(new Reanimated.Value(initialIndex));
 
@@ -108,8 +112,9 @@ const SegmentedControl = (props: SegmentedControlProps) => {
   [onChangeIndex, selectedSegment, updateSelectedSegment]);
 
   const onLayout = useCallback((index: number, event: LayoutChangeEvent) => {
-    const {x, width} = event.nativeEvent.layout;
+    const {x, width, height} = event.nativeEvent.layout;
     segmentsStyle.current[index] = {x, width};
+    segmentedControlHeight.current = height + (2 * (HORIZONTAL_PADDING - BORDER_WIDTH));
     segmentsCounter.current++;
 
     return segmentsCounter.current === segments?.length && setSelectedSegment(initialIndex);
@@ -150,29 +155,30 @@ const SegmentedControl = (props: SegmentedControlProps) => {
     });
 
   return (
-    <View row center style={[styles.container, containerStyle, {borderRadius, backgroundColor}]}>
-      <Reanimated.View
-        style={[
-          styles.selectedSegment,
-          animatedStyle,
-          {borderColor: outlineColor, borderRadius, backgroundColor: activeBackgroundColor, borderWidth: outlineWidth}
-        ]}
-      />
-      {renderSegments()}
+    <View style={containerStyle}>
+      <View row center style={[styles.container, style, {borderRadius, backgroundColor}]}>
+        <Reanimated.View
+          style={[
+            styles.selectedSegment,
+            animatedStyle,
+            {borderColor: outlineColor, borderRadius, backgroundColor: activeBackgroundColor, borderWidth: outlineWidth, height: segmentedControlHeight.current}
+          ]}
+        />
+        {renderSegments()}
+      </View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     backgroundColor: Colors.grey80,
-    height: Spacings.s7,
-    borderColor: Colors.grey60
+    borderColor: Colors.grey60,
+    paddingVertical: HORIZONTAL_PADDING,
+    borderWidth: BORDER_WIDTH
   },
   selectedSegment: {
-    height: Spacings.s7 - 2 * BORDER_WIDTH,
-    position: 'absolute',
-    backgroundColor: Colors.white
+    position: 'absolute'
   },
   segment: {
     paddingHorizontal: Spacings.s3

src/components/segmentedControl/segment.tsx

@@ -88,7 +88,7 @@ const Segment = React.memo((props: SegmentProps) => {
   [onLayout, index]);
 
   return (
-    <TouchableOpacity onLayout={segmentOnLayout} style={segmentStyle} onPress={onSegmentPress} row>
+    <TouchableOpacity onLayout={segmentOnLayout} style={segmentStyle} onPress={onSegmentPress} row flexG center>
       {!iconOnRight && renderIcon()}
       {label && (
         <Text text90 numberOfLines={1} color={segmentedColor}>