react-native-enriched-html/apps/example-web/src/testScreens/TestEnrichedText.tsx at 63e9ad8caa83e183ff931af73326ce149ba801a4 · software-mansion/react-native-enriched-html · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { useState, type ChangeEvent } from 'react';
import {
  EnrichedText,
  type OnImagePressEvent,
  type OnLinkPressEvent,
  type OnMentionPressEvent,
} from 'react-native-enriched-html';
import type { TextStyle } from 'react-native';
import { WEB_DEFAULT_HTML_STYLE } from '../defaultHtmlStyle';

const INITIAL_VALUE = '<html><p></p></html>';

export function TestEnrichedText() {
  const [htmlInput, setHtmlInput] = useState(INITIAL_VALUE);
  const [value, setValue] = useState(INITIAL_VALUE);
  const [lastImagePress, setLastImagePress] =
    useState<OnImagePressEvent | null>(null);
  const [lastLinkPress, setLastLinkPress] = useState<OnLinkPressEvent | null>(
    null
  );
  const [lastMentionPress, setLastMentionPress] =
    useState<OnMentionPressEvent | null>(null);
  const [isWide, setIsWide] = useState(false);

  return (
    <div data-testid="test-enriched-text-root">
      <div
        data-testid="test-enriched-text-display"
        style={enrichedTextContainerStyle}
      >
        <EnrichedText
          style={isWide ? enrichedTextWideStyle : enrichedTextStyle}
          htmlStyle={WEB_DEFAULT_HTML_STYLE}
          onLinkPress={setLastLinkPress}
          onMentionPress={setLastMentionPress}
          onImagePress={setLastImagePress}
        >
          {value}
        </EnrichedText>
      </div>

      <button
        type="button"
        data-testid="test-enriched-text-toggle-width-button"
        onClick={() => {
          setIsWide((prev) => !prev);
        }}
      >
        Toggle width
      </button>

      <textarea
        data-testid="test-enriched-text-html-input"
        value={htmlInput}
        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
          setHtmlInput(e.target.value);
        }}
        rows={4}
      />
      <button
        type="button"
        data-testid="test-enriched-text-set-value-button"
        onClick={() => {
          setValue(htmlInput);
        }}
      >
        Set value
      </button>

      <pre data-testid="test-enriched-text-value-output">{value}</pre>

      <pre data-testid="test-enriched-text-image-press-output">
        {JSON.stringify(lastImagePress)}
      </pre>
      <pre data-testid="test-enriched-text-link-press-output">
        {JSON.stringify(lastLinkPress)}
      </pre>
      <pre data-testid="test-enriched-text-mention-press-output">
        {JSON.stringify(lastMentionPress)}
      </pre>
    </div>
  );
}

const enrichedTextStyle: TextStyle = {
  width: '100%',
  maxWidth: 360,
  paddingVertical: 8,
  paddingHorizontal: 8,
  backgroundColor: 'gainsboro',
  fontSize: 16,
};

const enrichedTextWideStyle: TextStyle = {
  ...enrichedTextStyle,
  minWidth: 360,
  maxWidth: 720,
};

const enrichedTextContainerStyle = {
  width: 'fit-content',
};