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} + + ); + }, [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, state: SharedMarkdown.State, - ) => ( - - {output(node.content, state)} - - ), + ) => , }, inlineCode: { ...SimpleMarkdown.defaultRules.inlineCode,