From f39423800ab7e160e8730c05c0cd8f5d278c5033 Mon Sep 17 00:00:00 2001 From: Richard Lam Date: Tue, 14 Jul 2020 11:33:04 -0700 Subject: [PATCH 1/2] feat: add disabled prop --- README.md | 32 ++++++++++++++++++ src/Segment/Segment.tsx | 24 +++++++++++--- src/Segment/SegmentStyles.ts | 3 ++ src/SegmentedControl/SegmentedControl.tsx | 33 +++++++++++++++---- .../SegmentedControlStyles.ts | 3 ++ 5 files changed, 85 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index fef7db6..14c0073 100644 --- a/README.md +++ b/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. diff --git a/src/Segment/Segment.tsx b/src/Segment/Segment.tsx index 433c5ac..68b7f18 100644 --- a/src/Segment/Segment.tsx +++ b/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; @@ -22,6 +25,8 @@ export interface SegmentProps { export const Segment: FC = ({ activeTintColor, content, + disabled, + disabledStyle, inactiveTintColor, name, style, @@ -63,15 +68,26 @@ export const Segment: FC = ({ } if (typeof content === 'function') { - return content({ activeTintColor, inactiveTintColor, active }); + return content({ activeTintColor, inactiveTintColor, active, disabled }); } return content; }; return ( - - + + {renderContent()} diff --git a/src/Segment/SegmentStyles.ts b/src/Segment/SegmentStyles.ts index 21e8d07..28aa903 100644 --- a/src/Segment/SegmentStyles.ts +++ b/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', diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx index 29a938c..8f362f5 100644 --- a/src/SegmentedControl/SegmentedControl.tsx +++ b/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 | React.ReactElement[]; + 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 ( - + {typeof _activeName !== 'undefined' && ( diff --git a/src/SegmentedControl/SegmentedControlStyles.ts b/src/SegmentedControl/SegmentedControlStyles.ts index ec3a4bb..a6ad12d 100644 --- a/src/SegmentedControl/SegmentedControlStyles.ts +++ b/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, From f83780a2466558393983133da8949c42132b8802 Mon Sep 17 00:00:00 2001 From: Richard Lam Date: Tue, 14 Jul 2020 11:36:17 -0700 Subject: [PATCH 2/2] test: update snaps and fix typecheck --- __tests__/__snapshots__/SegmentedControl.test.tsx.snap | 5 +++++ src/SegmentedControl/SegmentedControl.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/__tests__/__snapshots__/SegmentedControl.test.tsx.snap b/__tests__/__snapshots__/SegmentedControl.test.tsx.snap index 8220092..d0fe348 100644 --- a/__tests__/__snapshots__/SegmentedControl.test.tsx.snap +++ b/__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, ] } > | React.ReactElement[]; disabled?: boolean; - disabledStyle: ViewStyle; + disabledStyle?: ViewStyle; inactiveTintColor?: string; initialSelectedName?: string; onChangeValue?: (name: string) => void;