-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Split out util hooks for accessibility, OSfunctions, and storybook utils
- Loading branch information
Showing
10 changed files
with
129 additions
and
110 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
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 |
|---|---|---|
| @@ -1,31 +1,2 @@ | ||
| import { AccessibilityInfo } from 'react-native' | ||
| import { useEffect, useState } from 'react' | ||
|
|
||
| /** | ||
| * Hook to monitor screen reader status | ||
| * @returns True when the screen reader is on, else false | ||
| */ | ||
| export function useIsScreenReaderEnabled(): boolean { | ||
| const [screenReaderEnabled, setScreenReaderEnabled] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| // Function to update state based on the screen reader status | ||
| const updateScreenReaderStatus = (isEnabled: boolean) => { | ||
| setScreenReaderEnabled(isEnabled) | ||
| } | ||
|
|
||
| // Initiate with current screen reader status | ||
| AccessibilityInfo.isScreenReaderEnabled().then(updateScreenReaderStatus) | ||
|
|
||
| // Subscribe to screen reader status changes | ||
| const subscription = AccessibilityInfo.addEventListener( | ||
| 'screenReaderChanged', | ||
| updateScreenReaderStatus, | ||
| ) | ||
|
|
||
| // Cleanup subscription on component unmount | ||
| return () => subscription.remove() | ||
| }, [screenReaderEnabled]) | ||
|
|
||
| return screenReaderEnabled | ||
| } | ||
| // Export related hooks | ||
| export { useIsScreenReaderEnabled } from './hooks/useIsScreenReaderEnabled' |
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,55 @@ | ||
| import { Alert, Linking } from 'react-native' | ||
| import { useTranslation } from 'react-i18next' | ||
|
|
||
| import { LinkAnalytics } from '../../components/Link/Link' | ||
| import { leaveAppPromptText } from '../OSfunctions' | ||
|
|
||
| /** | ||
| * Hook to handle a link that leaves the app; conditionally displays alert prior to leaving | ||
| */ | ||
| export function useExternalLink(): ( | ||
| url: string, | ||
| analytics?: LinkAnalytics, | ||
| text?: leaveAppPromptText, | ||
| ) => void { | ||
| const { t } = useTranslation() | ||
|
|
||
| return ( | ||
| url: string, | ||
| analytics?: LinkAnalytics, | ||
| text?: leaveAppPromptText, | ||
| ) => { | ||
| if (analytics?.onPress) analytics.onPress() | ||
|
|
||
| const onCancelPress = () => { | ||
| if (analytics?.onCancel) analytics.onCancel() | ||
| } | ||
|
|
||
| const onOKPress = () => { | ||
| if (analytics?.onConfirm) analytics.onConfirm() | ||
| return Linking.openURL(url) | ||
| } | ||
|
|
||
| const body = text?.body ? text.body : t('leaveAppAlert.body') | ||
| const cancel = text?.cancel ? text.cancel : t('goBack') | ||
| const confirm = text?.confirm ? text.confirm : t('leave') | ||
| const title = text?.title ? text.title : t('leaveAppAlert.title') | ||
|
|
||
| if (url.startsWith('http')) { | ||
| Alert.alert(title, body, [ | ||
| { | ||
| text: cancel, | ||
| style: 'cancel', | ||
| onPress: onCancelPress, | ||
| }, | ||
| { | ||
| text: confirm, | ||
| onPress: (): Promise<void> => onOKPress(), | ||
| style: 'default', | ||
| }, | ||
| ]) | ||
| } else { | ||
| Linking.openURL(url) | ||
| } | ||
| } | ||
| } |
31 changes: 31 additions & 0 deletions
31
packages/components/src/utils/hooks/useIsScreenReaderEnabled.ts
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,31 @@ | ||
| import { AccessibilityInfo } from 'react-native' | ||
| import { useEffect, useState } from 'react' | ||
|
|
||
| /** | ||
| * Hook to monitor screen reader status | ||
| * @returns True when the screen reader is on, else false | ||
| */ | ||
| export function useIsScreenReaderEnabled(): boolean { | ||
| const [screenReaderEnabled, setScreenReaderEnabled] = useState(false) | ||
|
|
||
| useEffect(() => { | ||
| // Function to update state based on the screen reader status | ||
| const updateScreenReaderStatus = (isEnabled: boolean) => { | ||
| setScreenReaderEnabled(isEnabled) | ||
| } | ||
|
|
||
| // Initiate with current screen reader status | ||
| AccessibilityInfo.isScreenReaderEnabled().then(updateScreenReaderStatus) | ||
|
|
||
| // Subscribe to screen reader status changes | ||
| const subscription = AccessibilityInfo.addEventListener( | ||
| 'screenReaderChanged', | ||
| updateScreenReaderStatus, | ||
| ) | ||
|
|
||
| // Cleanup subscription on component unmount | ||
| return () => subscription.remove() | ||
| }, [screenReaderEnabled]) | ||
|
|
||
| return screenReaderEnabled | ||
| } |
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
21 changes: 21 additions & 0 deletions
21
packages/components/src/utils/hooks/useWebStorybookColorScheme.ts
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,21 @@ | ||
| import { ColorSchemeName } from 'react-native' | ||
| import { useSyncExternalStore } from 'react' | ||
|
|
||
| /** Function to initialize listening to light/dark mode toggle in Web Storybook to set color scheme */ | ||
| export const useWebStorybookColorScheme = () => { | ||
| // Mimics RN useColorScheme hook, but listens to the parent body's class ('light'/'dark' from storybook-dark-mode) | ||
| return useSyncExternalStore( | ||
| (callback: () => void) => { | ||
| window.parent.addEventListener('click', callback) | ||
| return () => window.parent.removeEventListener('click', callback) | ||
| }, | ||
| (): ColorSchemeName => { | ||
| const colorScheme = window.parent.document.body.className | ||
| if (colorScheme !== 'light' && colorScheme !== 'dark') { | ||
| return null | ||
| } | ||
|
|
||
| return colorScheme | ||
| }, | ||
| ) | ||
| } |
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