diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx deleted file mode 100644 index f77fb16034..0000000000 --- a/src/view/com/util/Html.tsx +++ /dev/null @@ -1,207 +0,0 @@ -import * as React from 'react' -import {StyleSheet, View} from 'react-native' -import { - H1 as ExpoH1, - H2 as ExpoH2, - H3 as ExpoH3, - H4 as ExpoH4, -} from '@expo/html-elements' - -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {useTheme} from '#/lib/ThemeContext' -import {TextLink} from './Link' -import {Text} from './text/Text' - -/** - * These utilities are used to define long documents in an html-like - * DSL. See for instance /locale/en/privacy-policy.tsx - */ - -interface IsChildProps { - isChild?: boolean -} - -// type ReactNodeWithIsChildProp = -// | React.ReactElement -// | React.ReactElement[] -// | React.ReactNode - -export function H1({children}: React.PropsWithChildren<{}>) { - const styles = useStyles() - const pal = usePalette('default') - const typography = useTheme().typography['title-xl'] - // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf - return {children} -} - -export function H2({children}: React.PropsWithChildren<{}>) { - const styles = useStyles() - const pal = usePalette('default') - const typography = useTheme().typography['title-lg'] - // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf - return {children} -} - -export function H3({children}: React.PropsWithChildren<{}>) { - const styles = useStyles() - const pal = usePalette('default') - const typography = useTheme().typography.title - // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf - return {children} -} - -export function H4({children}: React.PropsWithChildren<{}>) { - const styles = useStyles() - const pal = usePalette('default') - const typography = useTheme().typography['title-sm'] - // @ts-ignore Expo's TextStyle definition seems to have gotten away from RN's -prf - return {children} -} - -export function P({children}: React.PropsWithChildren<{}>) { - const styles = useStyles() - const pal = usePalette('default') - return ( - - {children} - - ) -} - -export function UL({children, isChild}: React.PropsWithChildren) { - const styles = useStyles() - return ( - - {markChildProps(children)} - - ) -} - -export function OL({children, isChild}: React.PropsWithChildren) { - const styles = useStyles() - return ( - - {markChildProps(children)} - - ) -} - -export function LI({ - children, - value, -}: React.PropsWithChildren<{value?: string}>) { - const styles = useStyles() - const pal = usePalette('default') - return ( - - {value || <>•} - - {markChildProps(children)} - - - ) -} - -export function A({children, href}: React.PropsWithChildren<{href: string}>) { - const styles = useStyles() - const pal = usePalette('default') - return ( - - ) -} - -export function STRONG({children}: React.PropsWithChildren<{}>) { - const pal = usePalette('default') - return ( - - {children} - - ) -} - -export function EM({children}: React.PropsWithChildren<{}>) { - const styles = useStyles() - const pal = usePalette('default') - return ( - - {children} - - ) -} - -function markChildProps(children: React.ReactNode) { - return React.Children.map(children, child => { - if (React.isValidElement(child)) { - return React.cloneElement( - child as React.ReactElement, - {isChild: true}, - ) - } - return child - }) -} - -const useStyles = () => { - const {isDesktop} = useWebMediaQueries() - return StyleSheet.create({ - h1: { - marginTop: 20, - marginBottom: 10, - letterSpacing: 0.8, - }, - h2: { - marginTop: 20, - marginBottom: 10, - letterSpacing: 0.8, - }, - h3: { - marginTop: 0, - marginBottom: 10, - }, - h4: { - marginTop: 0, - marginBottom: 10, - fontWeight: '600', - }, - p: { - marginBottom: 10, - }, - ul: { - marginBottom: 10, - paddingLeft: isDesktop ? 18 : 4, - }, - ulChild: { - paddingTop: 10, - marginBottom: 0, - }, - ol: { - marginBottom: 10, - paddingLeft: isDesktop ? 18 : 4, - }, - olChild: { - paddingTop: 10, - marginBottom: 0, - }, - li: { - flexDirection: 'row', - paddingRight: 20, - marginBottom: 10, - }, - liBullet: { - paddingRight: 10, - }, - liText: {}, - a: { - marginBottom: 10, - }, - em: { - fontStyle: 'italic', - }, - }) -}