From 422b57bcf26509d48192723490c732d8d6ff56fc Mon Sep 17 00:00:00 2001 From: Sjaak Luthart Date: Mon, 19 Jun 2017 14:58:49 +0200 Subject: [PATCH 1/2] :globe_with_meridians: Added locale to Message --- docs/components.json | 12 ++++++++++++ src/message/image-message/index.jsx | 7 +++++-- src/message/index.jsx | 11 ++++++++++- src/message/message-time/index.jsx | 7 ++++--- src/message/sticker-message/index.jsx | 7 +++++-- src/message/text-message/index.jsx | 7 +++++-- 6 files changed, 41 insertions(+), 10 deletions(-) diff --git a/docs/components.json b/docs/components.json index 8725496f..ce918c87 100644 --- a/docs/components.json +++ b/docs/components.json @@ -3963,6 +3963,18 @@ "computed": false } }, + "locale": { + "type": { + "name": "instanceOf", + "value": "Object" + }, + "required": false, + "description": "Internationalization, defaults to English\n\nhttps://date-fns.org/docs/I18n", + "defaultValue": { + "value": "en", + "computed": true + } + }, "color": { "type": { "name": "string" diff --git a/src/message/image-message/index.jsx b/src/message/image-message/index.jsx index 6df11062..dc961849 100644 --- a/src/message/image-message/index.jsx +++ b/src/message/image-message/index.jsx @@ -43,7 +43,8 @@ class ImageMessage extends Component { timeFormat, enableLightbox, collapsed, - collapsedText + collapsedText, + locale } = this.props; const { lightbox } = this.state; @@ -87,6 +88,7 @@ class ImageMessage extends Component { style={messageTimeStyle} createdAt={message.createdAt} timeFormat={timeFormat} + locale={locale} />

{ @@ -126,7 +128,8 @@ ImageMessage.propTypes = { compact: PropTypes.bool, color: PropTypes.string, collapsed: PropTypes.bool, - collapsedText: PropTypes.node + collapsedText: PropTypes.node, + locale: PropTypes.instanceOf(Object).isRequired }; ImageMessage.defaultProps = { diff --git a/src/message/index.jsx b/src/message/index.jsx index dab774c2..74d30b1c 100644 --- a/src/message/index.jsx +++ b/src/message/index.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import pure from 'recompose/pure'; import Radium from 'radium'; import compose from 'recompose/compose'; +import en from 'date-fns/locale/en'; import IconMenu from '../icon-menu'; import IconChevronDown from '../icons/icon-chevron-down'; import getStyles from './get-styles'; @@ -70,6 +71,12 @@ class Message extends Component { expandIcon: PropTypes.node, /** Text to display for edited banner */ edited: PropTypes.node, + /** + * Internationalization, defaults to English + * + * https://date-fns.org/docs/I18n + */ + locale: PropTypes.instanceOf(Object), color: PropTypes.string.isRequired } @@ -92,7 +99,8 @@ class Message extends Component { expandText: 'Expand image', expandIcon: null, collapsedText: 'This image has been collapsed, click the button to expand it.', - edited: null + edited: null, + locale: en } constructor() { @@ -175,6 +183,7 @@ class Message extends Component { expandIcon, // eslint-disable-line no-unused-vars collapsedText, // eslint-disable-line no-unused-vars edited, // eslint-disable-line no-unused-vars + locale, // eslint-disable-line no-unused-vars color, ...custom } = this.props; diff --git a/src/message/message-time/index.jsx b/src/message/message-time/index.jsx index a9723ed4..5593c16d 100644 --- a/src/message/message-time/index.jsx +++ b/src/message/message-time/index.jsx @@ -4,10 +4,10 @@ import format from 'date-fns/format'; import getStyles from './get-styles'; import styles from './styles'; -const MessageTime = ({ myMessage, type, style, createdAt, timeFormat, edited }) => ( +const MessageTime = ({ myMessage, type, style, createdAt, timeFormat, edited, locale }) => ( {edited ? {edited} : null} - {format(createdAt, timeFormat)} + {format(createdAt, timeFormat, { locale })} ); @@ -20,7 +20,8 @@ MessageTime.propTypes = { PropTypes.string, PropTypes.instanceOf(Date) ]).isRequired, - edited: PropTypes.node + edited: PropTypes.node, + locale: PropTypes.instanceOf(Object).isRequired }; MessageTime.defaultProps = { diff --git a/src/message/sticker-message/index.jsx b/src/message/sticker-message/index.jsx index fa56d2bc..0267e160 100644 --- a/src/message/sticker-message/index.jsx +++ b/src/message/sticker-message/index.jsx @@ -17,7 +17,8 @@ const StickerMessage = ({ message, messageBodyStyle, messageTimeStyle, - timeFormat + timeFormat, + locale }) => { const headerStyle = combineStyles(messageHeaderStyle, { marginBottom: 0 }); @@ -40,6 +41,7 @@ const StickerMessage = ({ style={messageTimeStyle} createdAt={message.createdAt} timeFormat={timeFormat} + locale={locale} /> @@ -65,7 +67,8 @@ StickerMessage.propTypes = { fontSize: PropTypes.oneOf(['small', 'medium', 'large']), myMessage: PropTypes.bool, compact: PropTypes.bool, - color: PropTypes.string + color: PropTypes.string, + locale: PropTypes.instanceOf(Object).isRequired }; StickerMessage.defaultProps = { diff --git a/src/message/text-message/index.jsx b/src/message/text-message/index.jsx index 104b39f7..0a1a22a7 100644 --- a/src/message/text-message/index.jsx +++ b/src/message/text-message/index.jsx @@ -44,7 +44,8 @@ function TextMessage({ timeFormat, emoji, enableLinks, - edited + edited, + locale }) { return (
@@ -69,6 +70,7 @@ function TextMessage({ createdAt={message.createdAt} timeFormat={timeFormat} edited={edited} + locale={locale} />

@@ -97,7 +99,8 @@ TextMessage.propTypes = { enableLinks: PropTypes.bool, compact: PropTypes.bool, edited: PropTypes.node, - color: PropTypes.string + color: PropTypes.string, + locale: PropTypes.instanceOf(Object).isRequired }; TextMessage.defaultProps = { From da18153d30d9b7006e2a32d020ee17218008e956 Mon Sep 17 00:00:00 2001 From: Sjaak Luthart Date: Mon, 19 Jun 2017 15:11:27 +0200 Subject: [PATCH 2/2] :lipstick: Fixed link styles --- src/message/text-message/index.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/message/text-message/index.jsx b/src/message/text-message/index.jsx index 0a1a22a7..39cac24d 100644 --- a/src/message/text-message/index.jsx +++ b/src/message/text-message/index.jsx @@ -16,12 +16,14 @@ function createMarkup(text, enableLinks) { if (enableLinks) { const urlSchemeRegex = /^(?:https?:\/\/)/; + const style = 'color: inherit; font-size: inherit; font-weight: inherit; text-decoration: underline;'; + parsedText = escapedText.replace(urlRegex, (url) => { if (!urlSchemeRegex.test(url)) { // Add default http:// scheme for urls like example.com - return (`${url}`); + return (`${url}`); } - return (`${url}`); + return (`${url}`); }); }