-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* Issue #35: Add SMS text field to display for each hotline * Issue #35: Refactor data structure of text contact info so that texting can be interactive in the future * Issue #35: Add IconGroup component to display icons for each method of contacting hotlines and link icons to SMS and website URLS * No linked issue: replace en dash with hyphen in phone number hotline constants Co-authored-by: jaqarrick <[email protected]>
- Loading branch information
1 parent
aa34d7d
commit 8e4adc2
Showing
7 changed files
with
163 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import * as Linking from 'expo-linking'; | ||
| import * as React from 'react'; | ||
| import { StyleSheet, TouchableOpacity } from 'react-native'; | ||
|
|
||
| import { View } from './Themed'; | ||
| import { Styles } from '../constants'; | ||
| import { Phone, TextMessage, WebLink } from '../svgs'; | ||
|
|
||
| interface IconGroupProps { | ||
| crisis?: boolean; | ||
| tel?: string; | ||
| text?: { content?: string; number: string; } | ||
| website?: string; | ||
| } | ||
|
|
||
| export const IconGroup:React.FC<IconGroupProps> = ({crisis, tel, text, website}) => { | ||
|
|
||
| const LETTER_TO_TELEPHONE_NUMBER: { [key: string]: string } = { | ||
| 'ABC': '2', | ||
| 'DEF': '3', | ||
| 'GHI': '4', | ||
| 'JKL': '5', | ||
| 'MNO': '6', | ||
| 'PQRS': '7', | ||
| 'TUV': '8', | ||
| 'WXYZ': '9' | ||
| }; | ||
|
|
||
| const formatTextNumber = (textNumber: string) => { | ||
| const letterExp = /[A-Za-z]/g; | ||
| const digitExp = /\d/g; | ||
| let textNumberWithoutLetters: string = ''; | ||
|
|
||
| for (let i = 0; i < textNumber.length; i++) { | ||
| const character = textNumber[i]; | ||
| if (character.match(letterExp)) { | ||
| // Replace the letter with corresponding number | ||
| const [ matchingTelephoneLetters ] = | ||
| Object.keys(LETTER_TO_TELEPHONE_NUMBER) | ||
| .filter(letterGroups => letterGroups.includes(character.toUpperCase())) | ||
| textNumberWithoutLetters += LETTER_TO_TELEPHONE_NUMBER[matchingTelephoneLetters]; | ||
| } else if (character.match(digitExp)) { | ||
| // If not a letter, don't replace with a number | ||
| textNumberWithoutLetters += character; | ||
| } | ||
| } | ||
|
|
||
| return textNumberWithoutLetters; | ||
| } | ||
|
|
||
| return ( | ||
| <View | ||
| darkColor={Styles.black} | ||
| lightColor={Styles.white} | ||
| style={styles.iconGroup} | ||
| > | ||
| {tel && <TouchableOpacity | ||
| style={[ | ||
| styles.phoneWrap, | ||
| crisis && {backgroundColor: Styles.orange}, | ||
| ]} | ||
| onPress={() => Linking.openURL(`tel://${tel}`) }> | ||
| <Phone color={Styles.white} /> | ||
| </TouchableOpacity>} | ||
| {text && <TouchableOpacity | ||
| style={[ | ||
| styles.phoneWrap, | ||
| crisis && {backgroundColor: Styles.orange}, | ||
| ]} | ||
| onPress={() => Linking.openURL(`sms:${formatTextNumber(text.number)}?&body=${encodeURI(text.content || "")}`) }> | ||
| <TextMessage color={Styles.white} /> | ||
| </TouchableOpacity>} | ||
| {website && <TouchableOpacity | ||
| style={[ | ||
| styles.phoneWrap, | ||
| crisis && {backgroundColor: Styles.orange}, | ||
| ]} | ||
| onPress={() => Linking.openURL(website) }> | ||
| <WebLink color={Styles.white} /> | ||
| </TouchableOpacity>} | ||
| </View> | ||
| ) | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| iconGroup: { | ||
| display:'flex', | ||
| flexDirection: 'row', | ||
| justifyContent: 'center' | ||
| }, | ||
| phoneWrap: { | ||
| alignItems: 'center', | ||
| alignSelf: 'center', | ||
| backgroundColor: Styles.blue, | ||
| borderRadius: 1000, | ||
| flex: 1, | ||
| flexGrow: 0, | ||
| flexBasis: 70, | ||
| height: 70, | ||
| justifyContent: 'center', | ||
| marginLeft: 5, | ||
| marginRight: 5, | ||
| padding: 20, | ||
| width: 70 | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| export { AddToHomeScreen } from './AddToHomeScreen'; | ||
| export { IconGroup } from './IconGroup'; | ||
| export { RowLink } from './RowLink'; | ||
| export { Text, View } from './Themed'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import React, { memo } from 'react'; | ||
| import Svg, { Path } from 'react-native-svg'; | ||
|
|
||
| export const TextMessage = memo((props: React.SVGProps<SVGSVGElement>) => ( | ||
| // @ts-ignore | ||
| <Svg width={32} height={31} viewBox="0 0 16 16" fill={props.color} {...props}> | ||
| <Path fillRule="evenodd" d="M2 1h12a1 1 0 0 1 1 1v11.586l-2-2A2 2 0 0 0 11.586 11H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/> | ||
| <Path fillRule="evenodd" d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/> | ||
| </Svg> | ||
| )); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React, { memo } from 'react'; | ||
| import Svg, { Path } from 'react-native-svg'; | ||
|
|
||
| export const WebLink = memo((props: React.SVGProps<SVGSVGElement>) => ( | ||
| // @ts-ignore | ||
| <Svg width={32} height={31} viewBox="0 0 16 16" fill={props.color} {...props}> | ||
| <Path d="M4.715 6.542L3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.001 1.001 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/> | ||
| <Path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 0 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 0 0-4.243-4.243L6.586 4.672z"/> | ||
| </Svg> | ||
| )); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters