Merge pull request #12 from richardvclam/feature/disable-segment

feat: add disabled prop

Author: richardvclam

README.md

@@ -63,6 +63,22 @@ Color of the active content.
 | ------ | -------- | --------- |
 | string | No       | `#000000` |
 
+### `disabled`
+
+Disable the segmented control.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | false   |
+
+### `disabledStyle`
+
+Style of the disabled segmented control. Uses the same styles as a `View` component.
+
+| Type      | Required | Default            |
+| --------- | -------- | ------------------ |
+| ViewStyle | No       | `{ opacity: 0.5 }` |
+
 ### `inactiveTintColor`
 
 Color of the inactive content.
@@ -117,6 +133,22 @@ Element for the segment.
 | ------- | -------- |
 | Element | Yes      |
 
+### `disabled`
+
+Disable the segment.
+
+| Type    | Required | Default |
+| ------- | -------- | ------- |
+| boolean | No       | false   |
+
+### `disabledStyle`
+
+Style of the disabled segment. Uses the same styles as a `View` component.
+
+| Type      | Required | Default            |
+| --------- | -------- | ------------------ |
+| ViewStyle | No       | `{ opacity: 0.5 }` |
+
 ### `name`
 
 Unique name used to identify each segment.

__tests__/__snapshots__/SegmentedControl.test.tsx.snap

@@ -23,6 +23,8 @@ exports[`SegmentedControl should render 1`] = `
           "position": "relative",
         },
         undefined,
+        false,
+        false,
       ]
     }
   >
@@ -35,11 +37,14 @@ exports[`SegmentedControl should render 1`] = `
             "zIndex": 2,
           },
           undefined,
+          false,
+          false,
         ]
       }
     >
       <TouchableOpacity
         activeOpacity={0.2}
+        disabled={false}
         testID="Segment_Button"
       >
         <View

src/Segment/Segment.tsx

@@ -6,14 +6,17 @@ import { SegmentedContext } from '../SegmentedContext';
 import styles from './SegmentStyles';
 
 export interface SegmentContentProps {
+  active: boolean;
   activeTintColor: string;
+  disabled: boolean;
   inactiveTintColor: string;
-  active: boolean;
 }
 
 export interface SegmentProps {
   activeTintColor?: string;
   content: React.ReactNode;
+  disabled?: boolean;
+  disabledStyle?: ViewStyle;
   inactiveTintColor?: string;
   name: string;
   style?: StyleProp<ViewStyle>;
@@ -22,6 +25,8 @@ export interface SegmentProps {
 export const Segment: FC<SegmentProps> = ({
   activeTintColor,
   content,
+  disabled,
+  disabledStyle,
   inactiveTintColor,
   name,
   style,
@@ -63,15 +68,26 @@ export const Segment: FC<SegmentProps> = ({
     }
 
     if (typeof content === 'function') {
-      return content({ activeTintColor, inactiveTintColor, active });
+      return content({ activeTintColor, inactiveTintColor, active, disabled });
     }
 
     return content;
   };
 
   return (
-    <View style={[styles.container, style as ViewStyle]}>
-      <TouchableOpacity onPress={handlePress} testID={`Segment_Button`}>
+    <View
+      style={[
+        styles.container,
+        style as ViewStyle,
+        disabled && styles.disabled,
+        disabled && disabledStyle,
+      ]}
+    >
+      <TouchableOpacity
+        disabled={disabled}
+        onPress={handlePress}
+        testID={`Segment_Button`}
+      >
         <View style={styles.segment}>{renderContent()}</View>
       </TouchableOpacity>
     </View>

src/Segment/SegmentStyles.ts

@@ -6,6 +6,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     zIndex: 2,
   },
+  disabled: {
+    opacity: 0.5,
+  },
   segment: {
     flex: 1,
     flexDirection: 'row',

src/SegmentedControl/SegmentedControl.tsx

@@ -1,6 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { LayoutChangeEvent, View, ViewStyle } from 'react-native';
-import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+import {
+  PanGestureHandler,
+  PanGestureHandlerGestureEvent
+} from 'react-native-gesture-handler';
 import Animated, { Easing } from 'react-native-reanimated';
 import { timing } from 'react-native-redash';
 
@@ -11,11 +14,13 @@ import styles from './SegmentedControlStyles';
 
 export interface SegmentedControlProps {
   activeTintColor?: string;
-  inactiveTintColor?: string;
-  initialSelectedName?: string;
   children:
     | React.ReactElement<SegmentProps>
     | React.ReactElement<SegmentProps>[];
+  disabled?: boolean;
+  disabledStyle?: ViewStyle;
+  inactiveTintColor?: string;
+  initialSelectedName?: string;
   onChangeValue?: (name: string) => void;
   sliderStyle?: ViewStyle;
   style?: ViewStyle;
@@ -24,6 +29,8 @@ export interface SegmentedControlProps {
 export const SegmentedControl = ({
   activeTintColor = '#000000',
   children,
+  disabled = false,
+  disabledStyle,
   inactiveTintColor = '#000000',
   initialSelectedName,
   onChangeValue,
@@ -115,6 +122,8 @@ export const SegmentedControl = ({
   };
 
   const handleGestureEvent = (event: PanGestureHandlerGestureEvent): void => {
+    if (disabled) return;
+
     const { x } = event.nativeEvent;
 
     const calculatedIndex = Math.floor((x / _width) * values.length);
@@ -126,10 +135,21 @@ export const SegmentedControl = ({
 
   return (
     <SegmentedContext.Provider
-      value={{ selectedName: _activeName, onChange: handleChangeValue }}
+      value={{
+        selectedName: _activeName,
+        onChange: handleChangeValue,
+      }}
     >
       <PanGestureHandler onGestureEvent={handleGestureEvent}>
-        <View onLayout={handleLayout} style={[styles.container, style]}>
+        <View
+          onLayout={handleLayout}
+          style={[
+            styles.container,
+            style,
+            disabled && styles.disabledContainer,
+            disabled && disabledStyle,
+          ]}
+        >
           {typeof _activeName !== 'undefined' && (
             <Animated.View
               testID="SegmentedControl_Slider"
@@ -159,9 +179,10 @@ export const SegmentedControl = ({
               {{
                 ...child,
                 props: {
-                  ...child.props,
+                  disabled,
                   inactiveTintColor,
                   activeTintColor,
+                  ...child.props,
                 },
               }}
             </React.Fragment>

src/SegmentedControl/SegmentedControlStyles.ts

@@ -9,6 +9,9 @@ const styles = StyleSheet.create({
     height: 28,
     position: 'relative',
   },
+  disabledContainer: {
+    opacity: 0.5,
+  },
   slider: {
     position: 'absolute',
     top: 0,