Versions Compared

Old Version 10

changes.mady.by.user Kurt Junghanns

Saved on

compared with

New Version 11

changes.mady.by.user Soledad Valero

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

#As IsTo Be
1


Code Block
languagexml
themeEmacs
titlePlain text line
<h2 className="ui center aligned grey header">
	SlideWiki revolutionises ...
</h2>



Code Block
languagexml
themeEmacs
titlePlain text line
<h2 className="ui center aligned grey header">
	<FormattedMessage 
		id='home.slogan'
		defaultMessage='SlideWiki revolutionises...'
	/>
</h2>

OR:

Code Block
languagexml
themeEmacs
titlePlain text line (optional)
class Home extends React.Component {
    render() {
		...
		const messages = defineMessages({
            slogan:{
                id: 'home.slogan',
                defaultMessage: 'SlideWiki revolutionises...'
            }
        });
	
		return (
			...
			<FormattedMessage {...messages.slogan} />
			...
		)
	}
}

Note: the first way is recommended

2


Code Block
languagexml
themeEmacs
titleA fragment with links
<p>
	If ... follow us on 
	<a target="_blank" href="https://twitter.com/SlideWiki">Twitter</a> 
	or visit the 
	<a href="https://slidewiki.eu">SlideWiki project website</a>.
</p>



Code Block
languagexml
themeEmacs
titleA fragment with links
<p>
	<FormattedMessage 
		id='home.welcome12'
		values={{
			link_1: <a target="_blank" href="https://twitter.com/SlideWiki">Twitter</a>,
			link_2: <a href="https://slidewiki.eu">
                        <FormattedMessage
                             id="home.welcome12.1"
                             defaultMessage="SlideWiki project website"/>
                    </a>
		}}
		defaultMessage={'If ... follow us on {link_1} or visit the {link_2}.'}
	/>
</p>

Note: The text inside the first link ('Twitter') will not be translated, while the text inside the second link ('SlideWiki project website') will be translated

3


Code Block
languagexml
themeEmacs
titleText from component/tag property
<img 
	className="ui centered image" 
	src="/assets/images/logo_full.png"
	alt="SlideWiki beta logo"
/>



Code Block
languagexml
themeEmacs
titleText from component/tag property: Using a function
<FormattedMessage id="home.logo_alt" defaultMessage='SlideWiki beta logo'>
	{
		(alt) => <img 
					className="ui centered image" 
					src="/assets/images/logo_full.png" 
					alt={alt} 
			  	 />
	}
</FormattedMessage>

OR (as we probably will have this situation a lot):

Code Block
languagejs
themeEmacs
titleText from component/tag property: Using a lower-level intl API
class Home extends React.Component {
    render() {
		...
		const messages = defineMessages({
    		logo_alt: {
            	id: 'home.logo_alt',
            	defaultMessage: 'SlideWiki beta logo',
        	}
    	});
	
		return (
			...
			<img 
				className="ui centered image"
				src="/assets/images/logo_full.png"
				alt={this.context.intl.formatMessage(messages.logo_alt)} 
			/>
			...
		)
	}
}

Home.contextTypes = {
    intl: React.PropTypes.object.isRequired
};


export default Home;

Note: The second way is recommended, however if there is only 1-2 cases in your component, the first way is better.

4


Code Block
languagexml
firstline1
titleKurts Input
linenumberstrue
        swal({
            title: 'blub',
            text: 'see '+provider,
            type: 'error',
            confirmButtonText: 'Confirm',
            confirmButtonClass: 'negative ui button',
            buttonsStyling: false
        }).then().catch();


Unresolved

Code Block
languagexml
themeEmacs
titleMy output here =)
         swal({
            title: 'blub',
            text: <FormattedMessage
                id='home.welcome12'
                values={{
                    x: 'provider',
                }}
                defaultMessage={'see {provider}'}
            />, //<- returns object and no string
            type: 'error',
            confirmButtonText: 'Confirm',
            confirmButtonClass: 'negative ui button',
            buttonsStyling: false
        }).then().catch();

The problem here is that I need a string not an object which is text+value+text

You can try with:

Code Block
languagexml
themeEmacs
titleMy output here =)
constructor(){
	super(props);
	this.messages = defineMessages({
            swal_text:{
                id: 'componentName.swal_text',
                defaultMessage:'see '+ provider
            },
}         


swal({
            title: 'blub',
            text: this.context.intl.formatMessage(
                  this.messages.swal_text),
            type: 'error',
            confirmButtonText: 'Confirm',
            confirmButtonClass: 'negative ui button',
            buttonsStyling: false
        }).then().catch();


ComponentName.contextTypes = {
    intl: React.PropTypes.object.isRequired
};


5


Code Block
languagexml
themeEmacs
titleYour input here


 Code Block
languagexml
themeEmacs
titleMy output here =)
Note: or if you've solved your issue on your own, share it with others!
...