🌐 Added locale to Message

docs/components.json

@@ -4049,6 +4049,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
+        }
+      },
       "separator": {
         "type": {
           "name": "node"

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}
           />
         </p>
         {
@@ -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 = {

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';
@@ -76,6 +77,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),
     /** Show a separator above the message */
     separator: PropTypes.node,
     color: PropTypes.string.isRequired
@@ -101,6 +108,7 @@ class Message extends Component {
     expandIcon: null,
     collapsedText: 'This image has been collapsed, click the button to expand it.',
     edited: null,
+    locale: en,
     separator: null
   }
 
@@ -184,6 +192,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,
       separator,
       ...custom

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 }) => (
   <span style={getStyles.root(myMessage, type, edited, style)}>
     {edited ? <span style={styles.edited}>{edited}</span> : null}
-    <span>{format(createdAt, timeFormat)}</span>
+    <span>{format(createdAt, timeFormat, { locale })}</span>
   </span>
 );
 
@@ -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 = {

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}
         />
       </div>
     </div>
@@ -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 = {

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 (`<a href="http://${url}" target="_blank">${url}</a>`);
+        return (`<a style="${style}" href="http://${url}" target="_blank">${url}</a>`);
       }
-      return (`<a href="${url}" target="_blank">${url}</a>`);
+      return (`<a style="${style}" href="${url}" target="_blank">${url}</a>`);
     });
   }
 
@@ -44,7 +46,8 @@ function TextMessage({
   timeFormat,
   emoji,
   enableLinks,
-  edited
+  edited,
+  locale
 }) {
   return (
     <div style={getStyles.root(color, myMessage, avatar, compact, style)}>
@@ -69,6 +72,7 @@ function TextMessage({
           createdAt={message.createdAt}
           timeFormat={timeFormat}
           edited={edited}
+          locale={locale}
         />
       </p>
     </div>
@@ -97,7 +101,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 = {