css-multiplatform-demo/apps/nativewind-multiplatform-app/components/themed-text.tsx at main · react-native-tvos/css-multiplatform-demo · 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import { Text } from '@/components/css-wrapped-components';
import { TextProps } from 'react-native';

import '@/global.css';
import {
  useScreenDimensions,
  ScreenOrientationType,
} from '@/hooks/use-screen-dimensions';
import { ThemedColorNames } from '@/hooks/use-theme-colors';

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

const colorStyles: { [key in ThemedColorNames | 'none']: string } = {
  text: 'text-(--color-text)!',
  background: 'text-(--color-background)!',
  tint: 'text-(--color-tint)!',
  green: 'text-(--color-green)!',
  red: 'text-(--color-red)!',
  special: 'text-(--color-special)!',
  tabBarBackground: 'text-(--color-tab-bar-background)!',
  tabBarDefault: 'text-(--color-tab-bar-default)!',
  tabBarSelected: 'text-(--color-tab-bar-selected)!',
  none: '',
};

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

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