diff --git a/src/components/MessageSimple/MessageContent.js b/src/components/MessageSimple/MessageContent.js index 1bccfdc500..6c38c6d46c 100644 --- a/src/components/MessageSimple/MessageContent.js +++ b/src/components/MessageSimple/MessageContent.js @@ -33,14 +33,16 @@ const Container = styled.TouchableOpacity` : theme.colors.transparent}; border-bottom-left-radius: ${({ alignment, theme }) => alignment === 'left' - ? theme.message.text.borderRadiusS - : theme.message.text.borderRadiusL}; + ? theme.message.content.container.borderRadiusS + : theme.message.content.container.borderRadiusL}; border-bottom-right-radius: ${({ alignment, theme }) => alignment === 'left' - ? theme.message.text.borderRadiusL - : theme.message.text.borderRadiusS}; - border-top-left-radius: ${({ theme }) => theme.message.text.borderRadiusL}; - border-top-right-radius: ${({ theme }) => theme.message.text.borderRadiusL}; + ? theme.message.content.container.borderRadiusL + : theme.message.content.container.borderRadiusS}; + border-top-left-radius: ${({ theme }) => + theme.message.content.container.borderRadiusL}; + border-top-right-radius: ${({ theme }) => + theme.message.content.container.borderRadiusL}; ${({ theme }) => theme.message.content.container.css}; `; diff --git a/src/components/MessageSimple/MessageTextContainer.js b/src/components/MessageSimple/MessageTextContainer.js index 80e1242475..3c9dd89af6 100644 --- a/src/components/MessageSimple/MessageTextContainer.js +++ b/src/components/MessageSimple/MessageTextContainer.js @@ -1,25 +1,25 @@ import React from 'react'; -import styled from '@stream-io/styled-components'; +import styled, { withTheme } from '@stream-io/styled-components'; import { renderText, capitalize } from '../../utils'; const TextContainer = styled.View` border-bottom-left-radius: ${({ theme, groupStyle }) => groupStyle.indexOf('left') !== -1 - ? theme.message.text.borderRadiusS - : theme.message.text.borderRadiusL}; + ? theme.message.content.textContainer.borderRadiusS + : theme.message.content.textContainer.borderRadiusL}; border-bottom-right-radius: ${({ theme, groupStyle }) => groupStyle.indexOf('right') !== -1 - ? theme.message.text.borderRadiusS - : theme.message.text.borderRadiusL}; + ? theme.message.content.textContainer.borderRadiusS + : theme.message.content.textContainer.borderRadiusL}; border-top-left-radius: ${({ theme, groupStyle }) => groupStyle === 'leftBottom' || groupStyle === 'leftMiddle' - ? theme.message.text.borderRadiusS - : theme.message.text.borderRadiusL}; + ? theme.message.content.textContainer.borderRadiusS + : theme.message.content.textContainer.borderRadiusL}; border-top-right-radius: ${({ theme, groupStyle }) => groupStyle === 'rightBottom' || groupStyle === 'rightMiddle' - ? theme.message.text.borderRadiusS - : theme.message.text.borderRadiusL}; + ? theme.message.content.textContainer.borderRadiusS + : theme.message.content.textContainer.borderRadiusL}; margin-top: 2; padding: 5px; padding-left: 8; @@ -28,20 +28,20 @@ const TextContainer = styled.View` alignment === 'left' ? 'flex-start' : 'flex-end'}; border-width: ${({ theme, alignment }) => alignment === 'left' - ? theme.message.text.leftBorderWidth - : theme.message.text.rightBorderWidth}; + ? theme.message.content.textContainer.leftBorderWidth + : theme.message.content.textContainer.rightBorderWidth}; border-color: ${({ theme, alignment }) => alignment === 'left' - ? theme.message.text.leftBorderColor - : theme.message.text.rightBorderColor}; + ? theme.message.content.textContainer.leftBorderColor + : theme.message.content.textContainer.rightBorderColor}; background-color: ${({ theme, alignment, type, status }) => alignment === 'left' || type === 'error' || status === 'failed' ? theme.colors.transparent : theme.colors.light}; - ${({ theme }) => theme.message.text.css} + ${({ theme }) => theme.message.content.textContainer.css} `; -export const MessageTextContainer = (props) => { +export const MessageTextContainer = withTheme((props) => { const { message, groupStyles = ['bottom'], @@ -56,7 +56,9 @@ export const MessageTextContainer = (props) => { capitalize(hasAttachment ? 'bottom' : groupStyles[0]); if (!message.text) return false; - + const markdownStyles = props.theme + ? props.theme.message.content.markdown + : {}; return ( { type={message.type} > {!MessageText ? ( - renderText(message) + renderText(message, markdownStyles) ) : ( )} ); -}; +}); diff --git a/src/components/docs/MessageSimple.md b/src/components/docs/MessageSimple.md index e9e8618d5d..93393fb2d2 100644 --- a/src/components/docs/MessageSimple.md +++ b/src/components/docs/MessageSimple.md @@ -53,3 +53,31 @@ const data = require('./data'); {...data.channelContext} />; ``` + +We use [markdown](https://github.com/CharlesMangwa/react-native-simple-markdown) to render the text in message. + +You can customize the styles of message text by providing custom styles in theme object: + +Available options for customization are: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1 + +```json +const theme = { + message: { + content: { + markdown: { + text: { + fontFamily: 'AppleSDGothicNeo-Bold' + }, + link: { + color: 'pink' + } + } + } + } +} + +... + + ... + +``` diff --git a/src/styles/theme.js b/src/styles/theme.js index 2e7eac38fb..929671ab06 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -58,7 +58,10 @@ export const defaultTheme = { message: { container: {}, content: { - container: {}, + container: { + borderRadiusL: 16, + borderRadiusS: 2, + }, containerInner: {}, metaContainer: {}, metaText: {}, @@ -67,6 +70,16 @@ export const defaultTheme = { }, deletedContainer: {}, deletedText: {}, + textContainer: { + borderRadiusL: 16, + borderRadiusS: 2, + leftBorderWidth: 0.5, + leftBorderColor: 'rgba(0,0,0,0.08)', + rightBorderWidth: 0, + rightBorderColor: 'transparent', + }, + // Available options for styling text: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1 + markdown: {}, }, status: { spacer: {}, @@ -87,14 +100,6 @@ export const defaultTheme = { messageRepliesText: {}, image: {}, }, - text: { - borderRadiusL: 16, - borderRadiusS: 2, - leftBorderWidth: 0.5, - leftBorderColor: 'rgba(0,0,0,0.08)', - rightBorderWidth: 0, - rightBorderColor: 'transparent', - }, file: { container: {}, details: {}, diff --git a/src/utils.js b/src/utils.js index 98c40b2369..a82356fc1a 100644 --- a/src/utils.js +++ b/src/utils.js @@ -6,7 +6,7 @@ import { CommandsItem } from './components/CommandsItem'; import Markdown from '@stream-io/react-native-simple-markdown'; -export const renderText = (message) => { +export const renderText = (message, styles) => { // take the @ mentions and turn them into markdown? // translate links let { text } = message; @@ -38,11 +38,15 @@ export const renderText = (message) => { } newText = newText.replace(/[<&"'>]/g, '\\$&'); + const markdownStyles = { + ...defaultMarkdownStyles, + ...styles, + }; return {newText}; }; -const markdownStyles = { +const defaultMarkdownStyles = { link: { color: 'blue', textDecorationLine: 'underline',