Initial implementation for bitmap text component. Only dimensions support for now

package.json

@@ -47,6 +47,7 @@
     "extract-text-webpack-plugin": "^1.0.0",
     "file-loader": "^0.9.0",
     "html-webpack-plugin": "^2.0.0",
+    "image-size-loader": "^0.7.0",
     "json-loader": "^0.5.4",
     "scripts": "file:scripts",
     "url-loader": "^0.5.7",

src/components/text/BitmapText.jsx

@@ -0,0 +1,37 @@
+import { PropTypes } from 'react';
+
+import { FormattedMessage as Message } from 'react-intl';
+
+export default function BitmapText(props) {
+    const src = require(`emails/register/images/ru/welcome.png`);
+    // TODO: we can improve this loader in future by adding an option to disable file emitting
+    // because this thing is handled by url-loader
+    const size = require(`image-size!emails/register/images/ru/welcome.png`);
+
+    const width = props.retina ? size.width / 2 : size.width;
+    const height = props.retina ? size.height / 2 : size.height;
+
+    return (
+        <Message {...props.message}>{(message) =>
+            <img src={src} alt={message} style={{
+                width: `${width}px`,
+                height: `${height}px`,
+                verticalAlign: 'middle'
+            }}/>
+        }</Message>
+    );
+}
+
+BitmapText.propTypes = {
+    message: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+            id: PropTypes.string
+        })
+    ]).isRequired,
+    retina: PropTypes.bool
+};
+
+BitmapText.defaultProps = {
+    retina: true
+};

src/components/text/index.js

@@ -0,0 +1 @@
+export BitmapText from './BitmapText';

src/devTools/DevApp.jsx

@@ -19,7 +19,7 @@ export default class DevApp extends Component {
     componentWillMount() {
         try {
             const lastState = JSON.parse(localStorage.getItem('emailRendererState'));
-            this.setState(lastState);
+            lastState && this.setState(lastState);
         } catch (err) {/* no state was saved */}
     }
 

src/emails/register/Register.jsx

@@ -6,6 +6,7 @@ import { Userbar } from 'components/userbar';
 import { Table } from 'components/table';
 import { Button } from 'components/button';
 import { Input } from 'components/input';
+import { BitmapText } from 'components/text';
 
 import styles from './styles';
 import messages from './messages.intl.json';
@@ -14,7 +15,6 @@ import violetManImage from './images/violetMan.png';
 import orangeManImage from './images/orangeMan.png';
 import darkBlueManImage from './images/darkBlueMan.png';
 
-import welcomeImage from './images/ru/welcome.png';
 import confirmEmailImage from './images/ru/confirmEmail.png';
 import whatsNextImage from './images/ru/whatsNext.png';
 import chooseYouSkin from './images/ru/chooseYouSkin.png';
@@ -32,15 +32,8 @@ export default function Register({username, link, code}) {
                         <div style={styles.welcomeUsername}>
                             <Message {...messages.hello_username} values={{username}} />
                         </div>
-                        {/* TODO: картинка и её alt */}
-                        <Message {...messages.welcome_image}>{(message) =>
-                            <img src={welcomeImage} alt={message} style={{
-                                width: '374px',
-                                // width: '231px',
-                                // width: '407px',
-                                verticalAlign: 'middle'
-                            }}/>
-                        }</Message>
+
+                        <BitmapText message={messages.welcome_image} />
                     </td>
                 </tr>
             </Table>