NativewindMultiplatform/components/ThemedText.tsx at main · react-native-tvos/NativewindMultiplatform · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import { Text, TextProps } from 'react-native';

import '@/global.css';
import {
  useScreenDimensions,
  ScreenOrientationType,
} from '@/hooks/useScreenDimensions';

export enum ThemedTextType {
  title = 'title',
  link = 'link',
  text = 'text',
  small = 'small',
  tiny = 'tiny',
}

const themedTextClassNames: {
  [key in ScreenOrientationType]: { [key in ThemedTextType]: string };
} = {
  portrait: {
    title: 'text-[5vw] leading-[6vw] text-[--color-text]',
    link: 'text-[5vw] leading-[6vw] text-[--color-tint]',
    text: 'text-[5vw] leading-[6vw] text-[--color-text]',
    small: 'text-[4vw] leading-[5vw] text-[--color-text]',
    tiny: 'text-[3vw] leading-[4vw] text-[--color-text]',
  },
  landscape: {
    title: 'text-[4vh] leading-[6vh] text-[--color-text]',
    link: 'text-[4vh] leading-[6vh] text-[--color-tint]',
    text: 'text-[4vh] leading-[6vh] text-[--color-text]',
    small: 'text-[3vh] leading-[5vh] text-[--color-text]',
    tiny: 'text-[2vh] leading-[4vh] text-[--color-text]',
  },
};

export function ThemedText(
  props: TextProps & {
    type?: ThemedTextType | undefined;
    children: string;
    className?: string;
    style?: any;
  },
) {
  const { orientation } = useScreenDimensions();
  const type = props?.type ?? 'text';
  const style = props?.style;
  const baseClassName =
    themedTextClassNames[orientation as ScreenOrientationType][type];
  const className = `${baseClassName} ${props?.className ?? ''}`;
  return (
    <Text
      style={style}
      className={className}
      accessible
      accessibilityLabel={props?.children}
      accessibilityRole="text"
    >
      {props?.children}
    </Text>
  );
}