replace -> replaceAll; support inner HTML inside FormattedMessage

This commit is contained in:
SachaG 2018-02-21 10:48:22 +09:00
parent ecf5c4c49e
commit 8ff55deb54
2 changed files with 15 additions and 4 deletions

View file

@ -1,15 +1,22 @@
import React, { Component } from 'react';
import { getSetting, Strings } from 'meteor/vulcan:lib';
const FormattedMessage = ({ id, values, defaultMessage }) => {
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.replace(new RegExp(search, 'g'), replacement);
};
const FormattedMessage = ({ id, values, defaultMessage, html = false }) => {
const messages = Strings[getSetting('locale', 'en')] || {};
let message = messages[id] || defaultMessage;
if (values) {
_.forEach(values, (value, key) => {
message = message.replace(`{${key}}`, value);
message = message.replaceAll(`{${key}}`, value);
});
}
return <span className="i18n-message">{message}</span>
return html ?
<span className="i18n-message" dangerouslySetInnerHTML={{__html: message}}/> :
<span className="i18n-message">{message}</span>
}
export default FormattedMessage;

View file

@ -2,6 +2,10 @@ import React, { Component } from 'react';
import { getSetting, Strings } from 'meteor/vulcan:lib';
import { intlShape } from './shape.js';
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.replace(new RegExp(search, 'g'), replacement);
};
export default class IntlProvider extends Component{
@ -15,7 +19,7 @@ export default class IntlProvider extends Component{
let message = messages[id] || defaultMessage;
if (values) {
_.forEach(values, (value, key) => {
message = message.replace(`{${key}}`, value);
message = message.replaceAll(`{${key}}`, value);
});
}
return message;