about summary refs log tree commit diff
path: root/src/view/com/util/text/Text.tsx
blob: 785cef09ad987bcd367faa3eb9c3c0fd0789cc4a (plain) (blame)
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React from 'react'
import {StyleSheet, TextProps} from 'react-native'
import {UITextView} from 'react-native-uitextview'

import {lh, s} from '#/lib/styles'
import {TypographyVariant, useTheme} from '#/lib/ThemeContext'
import {logger} from '#/logger'
import {isIOS, isWeb} from '#/platform/detection'
import {applyFonts, useAlf} from '#/alf'
import {
  childHasEmoji,
  renderChildrenWithEmoji,
  StringChild,
} from '#/alf/typography'

export type CustomTextProps = Omit<TextProps, 'children'> & {
  type?: TypographyVariant
  lineHeight?: number
  title?: string
  dataSet?: Record<string, string | number>
  selectable?: boolean
} & (
    | {
        emoji: true
        children: StringChild
      }
    | {
        emoji?: false
        children: TextProps['children']
      }
  )

export {Text_DEPRECATED as Text}
/**
 * @deprecated use Text from Typography instead.
 */
function Text_DEPRECATED({
  type = 'md',
  children,
  emoji,
  lineHeight,
  style,
  title,
  dataSet,
  selectable,
  ...props
}: React.PropsWithChildren<CustomTextProps>) {
  const theme = useTheme()
  const {fonts} = useAlf()

  if (__DEV__) {
    if (!emoji && childHasEmoji(children)) {
      logger.warn(
        `Text: emoji detected but emoji not enabled: "${children}"\n\nPlease add <Text emoji />'`,
      )
    }
  }

  const textProps = React.useMemo(() => {
    const typography = theme.typography[type]
    const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined

    const flattened = StyleSheet.flatten([
      s.black,
      typography,
      lineHeightStyle,
      style,
    ])

    applyFonts(flattened, fonts.family)

    // should always be defined on `typography`
    // @ts-ignore
    if (flattened.fontSize) {
      // @ts-ignore
      flattened.fontSize = Math.round(
        // @ts-ignore
        flattened.fontSize * fonts.scaleMultiplier,
      )
    }

    return {
      uiTextView: selectable && isIOS,
      selectable,
      style: flattened,
      dataSet: isWeb
        ? Object.assign({tooltip: title}, dataSet || {})
        : undefined,
      ...props,
    }
  }, [
    dataSet,
    fonts.family,
    fonts.scaleMultiplier,
    lineHeight,
    props,
    selectable,
    style,
    theme,
    title,
    type,
  ])

  return (
    <UITextView {...textProps}>
      {renderChildrenWithEmoji(children, textProps, emoji ?? false)}
    </UITextView>
  )
}