From aa5402387d0aaed27fa9175804fc5f473b057340 Mon Sep 17 00:00:00 2001 From: Sanjay Sargam Date: Thu, 28 Dec 2023 12:30:50 +0530 Subject: [PATCH] reusable switch --- app/containers/Switch.tsx | 37 +++++++++++++++++++ .../containers/OmnichannelHeader/index.tsx | 3 +- app/views/CreateDiscussionView/index.tsx | 3 +- app/views/DirectoryView/Options.tsx | 3 +- app/views/DisplayPrefsView.tsx | 2 +- .../NotificationPreferencesView/index.tsx | 3 +- .../RoomInfoEditView/SwitchContainer.tsx | 3 +- app/views/ScreenLockConfigView.tsx | 2 +- app/views/SecurityPrivacyView.tsx | 2 +- app/views/UserPreferencesView/index.tsx | 2 +- 10 files changed, 51 insertions(+), 9 deletions(-) create mode 100644 app/containers/Switch.tsx diff --git a/app/containers/Switch.tsx b/app/containers/Switch.tsx new file mode 100644 index 000000000..007901b28 --- /dev/null +++ b/app/containers/Switch.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { Switch as SwitchRN } from 'react-native'; + +import { useTheme } from '../theme'; + +export const SWITCH_TRACK_COLOR = { + false: '#767577', + true: '#81b0ff' +}; + + +interface ISwitch { + value: boolean; + onValueChange: (value: boolean) => void; + testID?: string; + disabled?: boolean; + style?: object; + trackColor?: typeof SWITCH_TRACK_COLOR; +} + +const Switch = ({ value, onValueChange, testID, disabled, style, trackColor }: ISwitch) => { + const { colors } = useTheme(); + + return ( + + ); +}; + +export default Switch; diff --git a/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx b/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx index 51a9cfc4d..d4d17266a 100644 --- a/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx +++ b/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx @@ -1,6 +1,7 @@ import React, { memo, useEffect, useState } from 'react'; -import { Switch, View } from 'react-native'; +import { View } from 'react-native'; +import Switch from '../../../../containers/Switch'; import * as List from '../../../../containers/List'; import styles from './styles'; import { SWITCH_TRACK_COLOR, themes } from '../../../../lib/constants'; diff --git a/app/views/CreateDiscussionView/index.tsx b/app/views/CreateDiscussionView/index.tsx index 9ce8e1fbe..fdcc69b9c 100644 --- a/app/views/CreateDiscussionView/index.tsx +++ b/app/views/CreateDiscussionView/index.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { connect } from 'react-redux'; -import { ScrollView, Switch, Text } from 'react-native'; +import { ScrollView, Text } from 'react-native'; import { StackNavigationOptions } from '@react-navigation/stack'; +import Switch from '../../containers/Switch'; import { sendLoadingEvent } from '../../containers/Loading'; import KeyboardView from '../../containers/KeyboardView'; import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps'; diff --git a/app/views/DirectoryView/Options.tsx b/app/views/DirectoryView/Options.tsx index 43c84fc09..aa48aeeac 100644 --- a/app/views/DirectoryView/Options.tsx +++ b/app/views/DirectoryView/Options.tsx @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react'; -import { Animated, Easing, Switch, Text, TouchableWithoutFeedback, View } from 'react-native'; +import { Animated, Easing, Text, TouchableWithoutFeedback, View } from 'react-native'; +import Switch from '../../containers/Switch'; import Touch from '../../containers/Touch'; import { CustomIcon, TIconsName } from '../../containers/CustomIcon'; import Check from '../../containers/Check'; diff --git a/app/views/DisplayPrefsView.tsx b/app/views/DisplayPrefsView.tsx index f07bcc97a..a4cdf010a 100644 --- a/app/views/DisplayPrefsView.tsx +++ b/app/views/DisplayPrefsView.tsx @@ -1,10 +1,10 @@ import React, { useEffect } from 'react'; import { StackNavigationProp } from '@react-navigation/stack'; import { useNavigation } from '@react-navigation/native'; -import { Switch } from 'react-native'; import { RadioButton } from 'react-native-ui-lib'; import { useDispatch } from 'react-redux'; +import Switch from '../containers/Switch'; import { setPreference } from '../actions/sortPreferences'; import { DisplayMode, SortBy } from '../lib/constants'; import * as HeaderButton from '../containers/HeaderButton'; diff --git a/app/views/NotificationPreferencesView/index.tsx b/app/views/NotificationPreferencesView/index.tsx index 176b81c1e..097296fd4 100644 --- a/app/views/NotificationPreferencesView/index.tsx +++ b/app/views/NotificationPreferencesView/index.tsx @@ -1,7 +1,8 @@ import { RouteProp, useNavigation, useRoute } from '@react-navigation/core'; import React, { useEffect, useState } from 'react'; -import { Switch, Text } from 'react-native'; +import { Text } from 'react-native'; +import Switch from '../../containers/Switch'; import { TActionSheetOptionsItem, useActionSheet } from '../../containers/ActionSheet'; import { CustomIcon } from '../../containers/CustomIcon'; import * as List from '../../containers/List'; diff --git a/app/views/RoomInfoEditView/SwitchContainer.tsx b/app/views/RoomInfoEditView/SwitchContainer.tsx index 690a95019..758e6e016 100644 --- a/app/views/RoomInfoEditView/SwitchContainer.tsx +++ b/app/views/RoomInfoEditView/SwitchContainer.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { Switch, Text, TextStyle, View, ViewStyle } from 'react-native'; +import { Text, TextStyle, View, ViewStyle } from 'react-native'; +import Switch from '../../containers/Switch'; import { TSupportedThemes } from '../../theme'; import { SWITCH_TRACK_COLOR, themes } from '../../lib/constants'; import styles from './styles'; diff --git a/app/views/ScreenLockConfigView.tsx b/app/views/ScreenLockConfigView.tsx index 08ce03a45..7c9832c73 100644 --- a/app/views/ScreenLockConfigView.tsx +++ b/app/views/ScreenLockConfigView.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { Switch } from 'react-native'; import { connect } from 'react-redux'; import { StackNavigationOptions } from '@react-navigation/stack'; import { Subscription } from 'rxjs'; +import Switch from '../containers/Switch'; import I18n from '../i18n'; import { TSupportedThemes, withTheme } from '../theme'; import StatusBar from '../containers/StatusBar'; diff --git a/app/views/SecurityPrivacyView.tsx b/app/views/SecurityPrivacyView.tsx index 4ec34b66c..94020c756 100644 --- a/app/views/SecurityPrivacyView.tsx +++ b/app/views/SecurityPrivacyView.tsx @@ -1,8 +1,8 @@ import AsyncStorage from '@react-native-async-storage/async-storage'; import { StackNavigationProp } from '@react-navigation/stack'; import React, { useEffect, useState } from 'react'; -import { Switch } from 'react-native'; +import Switch from '../containers/Switch'; import * as List from '../containers/List'; import SafeAreaView from '../containers/SafeAreaView'; import StatusBar from '../containers/StatusBar'; diff --git a/app/views/UserPreferencesView/index.tsx b/app/views/UserPreferencesView/index.tsx index 748e38d21..e105468d7 100644 --- a/app/views/UserPreferencesView/index.tsx +++ b/app/views/UserPreferencesView/index.tsx @@ -1,8 +1,8 @@ import { StackNavigationProp } from '@react-navigation/stack'; import React, { useEffect } from 'react'; -import { Switch } from 'react-native'; import { useDispatch } from 'react-redux'; +import Switch from '../../containers/Switch'; import { setUser } from '../../actions/login'; import I18n from '../../i18n'; import log, { logEvent, events } from '../../lib/methods/helpers/log';