diff --git a/app/constants/snack_bar.ts b/app/constants/snack_bar.ts index f36053ab0..a20a59dda 100644 --- a/app/constants/snack_bar.ts +++ b/app/constants/snack_bar.ts @@ -6,6 +6,7 @@ import keyMirror from '@utils/key_mirror'; export const SNACK_BAR_TYPE = keyMirror({ ADD_CHANNEL_MEMBERS: null, + CODE_COPIED: null, FAVORITE_CHANNEL: null, FOLLOW_THREAD: null, INFO_COPIED: null, @@ -41,6 +42,12 @@ export const SNACK_BAR_CONFIG: Record = { iconName: 'check', canUndo: false, }, + CODE_COPIED: { + id: t('snack.bar.code.copied'), + defaultMessage: 'Code copied to clipboard', + iconName: 'content-copy', + canUndo: false, + }, FAVORITE_CHANNEL: { id: t('snack.bar.favorited.channel'), defaultMessage: 'This channel was favorited', diff --git a/app/screens/code/index.tsx b/app/screens/code/index.tsx index 6c4826b71..e8d6df8bc 100644 --- a/app/screens/code/index.tsx +++ b/app/screens/code/index.tsx @@ -2,13 +2,19 @@ // See LICENSE.txt for license information. import {useManagedConfig} from '@mattermost/react-native-emm'; -import React from 'react'; +import Clipboard from '@react-native-clipboard/clipboard'; +import React, {useCallback, useEffect} from 'react'; import {StyleSheet, type TextStyle} from 'react-native'; import {SafeAreaView, type Edge} from 'react-native-safe-area-context'; +import CompassIcon from '@app/components/compass_icon'; +import {SNACK_BAR_TYPE} from '@app/constants/snack_bar'; +import {useTheme} from '@app/context/theme'; +import useNavButtonPressed from '@app/hooks/navigation_button_pressed'; +import {showSnackBar} from '@app/utils/snack_bar'; import SyntaxHiglight from '@components/syntax_highlight'; import useAndroidHardwareBackHandler from '@hooks/android_back_handler'; -import {popTopScreen} from '@screens/navigation'; +import {popTopScreen, setButtons} from '@screens/navigation'; import type {AvailableScreens} from '@typings/screens/navigation'; @@ -19,6 +25,8 @@ type Props = { textStyle: TextStyle; } +const COPY_CODE_BUTTON = 'copy-code'; + const edges: Edge[] = ['left', 'right']; const styles = StyleSheet.create({ @@ -26,9 +34,32 @@ const styles = StyleSheet.create({ }); const Code = ({code, componentId, language, textStyle}: Props) => { + const theme = useTheme(); const managedConfig = useManagedConfig(); useAndroidHardwareBackHandler(componentId, popTopScreen); + const copyToClipboard = useCallback(() => { + if (!code) { + return; + } + + Clipboard.setString(code); + showSnackBar({barType: SNACK_BAR_TYPE.CODE_COPIED, sourceScreen: componentId}); + }, [code, componentId]); + + useNavButtonPressed(COPY_CODE_BUTTON, componentId, copyToClipboard, [componentId, copyToClipboard]); + + useEffect(() => { + setButtons(componentId, { + rightButtons: [ + { + id: COPY_CODE_BUTTON, + icon: CompassIcon.getImageSourceSync('content-copy', 24, theme.centerChannelColor), + }, + ], + }); + }, [theme.centerChannelColor, componentId]); + return (