Page MenuHomePhabricator
Files F3376775

D5383.id17663.diff
No OneTemporary
Actions

D5383.id17663.diff
View Options

diff --git a/native/components/spoiler.react.js b/native/components/spoiler.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/spoiler.react.js
@@ -0,0 +1,45 @@
+// @flow
+
+import * as React from 'react';
+import { Text } from 'react-native';
+
+import type { ReactElement } from 'lib/shared/markdown';
+
+import { useStyles } from '../themes/colors';
+
+type SpoilerProps = {
+ +text: ReactElement,
+ +children?: React.Node,
+};
+
+function Spoiler(props: SpoilerProps): React.Node {
+ const [isRevealed, setIsRevealed] = React.useState(false);
+ const styles = useStyles(unboundStyles);
+ const { text } = props;
+
+ const onSpoilerClick = React.useCallback(() => {
+ setIsRevealed(true);
+ }, []);
+
+ const memoizedSpoiler = React.useMemo(() => {
+ return (
+ <Text
+ onPress={onSpoilerClick}
+ style={!isRevealed ? styles.spoilerHidden : null}
+ >
+ {text}
+ </Text>
+ );
+ }, [onSpoilerClick, isRevealed, styles.spoilerHidden, text]);
+
+ return memoizedSpoiler;
+}
+
+const unboundStyles = {
+ spoilerHidden: {
+ color: 'spoiler',
+ backgroundColor: 'spoiler',
+ },
+};
+
+export default Spoiler;
diff --git a/native/markdown/rules.react.js b/native/markdown/rules.react.js
--- a/native/markdown/rules.react.js
+++ b/native/markdown/rules.react.js
@@ -9,6 +9,7 @@
import { relativeMemberInfoSelectorForMembersOfThread } from 'lib/selectors/user-selectors';
import * as SharedMarkdown from 'lib/shared/markdown';
import type { RelativeMemberInfo } from 'lib/types/thread-types';
+import Spoiler from 'native/components/spoiler.react';
import { useSelector } from '../redux/redux-utils';
import MarkdownLink from './markdown-link.react';
@@ -198,11 +199,7 @@
node: SharedMarkdown.SingleASTNode,
output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
state: SharedMarkdown.State,
- ) => (
- <Text key={state.key} style={styles.spoiler}>
- {output(node.content, state)}
- </Text>
- ),
+ ) => <Spoiler key={state.key} text={output(node.content, state)} />,
},
inlineCode: {
...SimpleMarkdown.defaultRules.inlineCode,

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 28, 2:06 AM (20 h, 8 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2592410
Default Alt Text
D5383.id17663.diff (2 KB)

Event Timeline