refactor: simplfy components tree

Author: michalfedyna

src/components/SegmentedButtons/SegmentedButtonContent.tsx

@@ -64,15 +64,15 @@ const SegmentedButtonContent = ({
 
   return (
     <View style={styles.content}>
-      {showCheckIcon ? (
+      {showCheckIcon && (
         <AnimatedCheckIcon
           color={iconColor}
           opacity={iconOpacity}
           scale={checkmarkScale}
           testID={testID && `${testID}-check-icon`}
         />
-      ) : null}
-      {optionIcon ? (
+      )}
+      {optionIcon && (
         <AnimatedOptionIcon
           animated={Boolean(label && showSelectedCheck)}
           color={iconColor}
@@ -81,8 +81,8 @@ const SegmentedButtonContent = ({
           source={optionIcon}
           testID={testID && `${testID}-icon`}
         />
-      ) : null}
-      {label ? (
+      )}
+      {label && (
         <Text
           variant={SegmentedButtonTokens.labelTextType}
           style={[
@@ -98,7 +98,7 @@ const SegmentedButtonContent = ({
         >
           {label}
         </Text>
-      ) : null}
+      )}
     </View>
   );
 };

src/components/SegmentedButtons/SegmentedButtonItem.tsx

@@ -137,18 +137,17 @@ const SegmentedButtonItem = ({
   });
 
   const borderRadius = getSegmentedButtonBorderRadius(segment);
-  const { outline, divider } = getSegmentedButtonBorderStyles(segment);
+  const borderStyles = getSegmentedButtonBorderStyles(segment, colors);
 
-  const containerHeight = SegmentedButtonTokens.containerHeight[density];
+  const height = SegmentedButtonTokens.containerHeight[density];
 
   return (
     <View
       testID={testID && `${testID}-wrapper`}
       style={[
         styles.wrapper,
         borderRadius,
-        { backgroundColor: colors.container },
-        showFocusRing && styles.focusedWrapper,
+        { backgroundColor: colors.wrapper },
         style,
       ]}
     >
@@ -165,60 +164,34 @@ const SegmentedButtonItem = ({
         background={background}
         hitSlop={hitSlop}
         theme={theme}
-        style={[borderRadius, Platform.select({ web: { outline: 'none' } })]}
+        style={[
+          styles.touchable,
+          borderRadius,
+          borderStyles,
+          Platform.select({ web: { outline: 'none' } }),
+          { height },
+        ]}
         onFocus={(event) => {
           if (!disabled && isKeyboardFocusEvent(event)) {
             setFocused(true);
           }
         }}
         onBlur={() => setFocused(false)}
       >
-        <View
-          testID={testID && `${testID}-container`}
-          style={[styles.container, { height: containerHeight }]}
-        >
-          <SegmentedButtonContent
-            checked={checked}
-            iconColor={colors.content.iconColor}
-            iconOpacity={colors.content.iconOpacity}
-            icon={icon}
-            label={label}
-            labelColor={colors.content.labelColor}
-            labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-            labelOpacity={colors.content.labelOpacity}
-            labelStyle={labelStyle}
-            showSelectedCheck={showSelectedCheck}
-            testID={testID}
-            theme={theme}
-          />
-          <View
-            pointerEvents="none"
-            testID={testID && `${testID}-outline`}
-            style={[
-              styles.outline,
-              borderRadius,
-              {
-                borderColor: colors.outline.color,
-                opacity: colors.outline.opacity,
-              },
-              outline,
-            ]}
-          />
-          {divider ? (
-            <View
-              pointerEvents="none"
-              testID={testID && `${testID}-divider`}
-              style={[
-                styles.outline,
-                {
-                  borderColor: colors.divider.color,
-                  opacity: colors.divider.opacity,
-                },
-                divider,
-              ]}
-            />
-          ) : null}
-        </View>
+        <SegmentedButtonContent
+          checked={checked}
+          iconColor={colors.content.iconColor}
+          iconOpacity={colors.content.iconOpacity}
+          icon={icon}
+          label={label}
+          labelColor={colors.content.labelColor}
+          labelMaxFontSizeMultiplier={labelMaxFontSizeMultiplier}
+          labelOpacity={colors.content.labelOpacity}
+          labelStyle={labelStyle}
+          showSelectedCheck={showSelectedCheck}
+          testID={testID}
+          theme={theme}
+        />
       </TouchableRipple>
       {showFocusRing ? (
         <View
@@ -227,9 +200,7 @@ const SegmentedButtonItem = ({
           style={[
             styles.focusRing,
             borderRadius,
-            {
-              borderColor: colors.focusIndicator,
-            },
+            { borderColor: colors.focusIndicator },
           ]}
         />
       ) : null}
@@ -241,21 +212,10 @@ const styles = StyleSheet.create({
   wrapper: {
     flex: 1,
   },
-  focusedWrapper: {
-    zIndex: 1,
-  },
-  container: {
+  touchable: {
     width: '100%',
     justifyContent: 'center',
   },
-  outline: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    pointerEvents: 'none',
-  },
   focusRing: {
     position: 'absolute',
     top: -FOCUS_RING_OUTSET,

src/components/SegmentedButtons/utils.ts

@@ -1,4 +1,6 @@
-import type { ViewStyle } from 'react-native';
+import type { ColorValue, ViewStyle } from 'react-native';
+
+import color from 'color';
 
 import { SegmentedButtonTokens } from './tokens';
 import type { InternalTheme } from '../../types';
@@ -41,28 +43,25 @@ export const getSegmentedButtonBorderRadius = (
   };
 };
 
-type SegmentedButtonBorderStyles = {
-  outline: ViewStyle;
-  divider?: ViewStyle;
+type SegmentedButtonBorderColors = {
+  outline: ColorValue;
+  divider: ColorValue;
 };
 
 export const getSegmentedButtonBorderStyles = (
-  segment: SegmentedButtonPosition
-): SegmentedButtonBorderStyles => {
+  segment: SegmentedButtonPosition,
+  { outline, divider }: SegmentedButtonBorderColors
+): ViewStyle => {
   const outlineWidth = SegmentedButtonTokens.outlineWidth;
-  const outline = {
+
+  return {
+    borderColor: outline,
+    borderStartColor: segment === 'first' ? outline : divider,
     borderTopWidth: outlineWidth,
     borderBottomWidth: outlineWidth,
+    borderStartWidth: outlineWidth,
     borderEndWidth: segment === 'last' ? outlineWidth : 0,
   };
-
-  if (segment === 'first') {
-    return {
-      outline: { ...outline, borderStartWidth: outlineWidth },
-    };
-  }
-
-  return { outline, divider: { borderStartWidth: outlineWidth } };
 };
 
 const resolveContentColors = (
@@ -94,15 +93,24 @@ const resolveContentColors = (
   };
 };
 
-const resolveOutlineColors = (theme: InternalTheme, disabled: boolean) => {
+const applyOpacity = (value: ColorValue, opacity: number): ColorValue => {
+  if (opacity === 1 || typeof value !== 'string') {
+    return value;
+  }
+
+  return color(value)
+    .fade(1 - opacity)
+    .rgb()
+    .string();
+};
+
+const resolveOutlineColor = (theme: InternalTheme, disabled: boolean) => {
   const colorToken = disabled
     ? SegmentedButtonTokens.disabledOutlineColor
     : SegmentedButtonTokens.outlineColor;
+  const opacity = disabled ? SegmentedButtonTokens.disabledOutlineOpacity : 1;
 
-  return {
-    color: theme.colors[colorToken],
-    opacity: disabled ? SegmentedButtonTokens.disabledOutlineOpacity : 1,
-  };
+  return applyOpacity(theme.colors[colorToken], opacity);
 };
 
 export const resolveColors = (
@@ -112,12 +120,12 @@ export const resolveColors = (
   const { checked, disabled, contentColor, dividerDisabled } = options;
 
   return {
-    container: checked
+    wrapper: checked
       ? theme.colors[SegmentedButtonTokens.selectedContainerColor]
       : 'transparent',
     content: resolveContentColors(theme, options, contentColor),
-    outline: resolveOutlineColors(theme, disabled),
-    divider: resolveOutlineColors(theme, dividerDisabled),
+    outline: resolveOutlineColor(theme, disabled),
+    divider: resolveOutlineColor(theme, dividerDisabled),
     focusIndicator: theme.colors[SegmentedButtonTokens.focusIndicatorColor],
   };
 };