From a6b6055fe8e262c8be9e29223da02c881591ebb8 Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Thu, 22 Sep 2016 08:10:00 +0300
Subject: [PATCH] Initial implementation for bitmap text component. Only
 dimensions support for now

---
 package.json                       |  1 +
 src/components/text/BitmapText.jsx | 37 ++++++++++++++++++++++++++++++
 src/components/text/index.js       |  1 +
 src/devTools/DevApp.jsx            |  2 +-
 src/emails/register/Register.jsx   | 13 +++--------
 5 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 src/components/text/BitmapText.jsx
 create mode 100644 src/components/text/index.js

diff --git a/package.json b/package.json
index 9c8995e..6fca359 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/text/BitmapText.jsx b/src/components/text/BitmapText.jsx
new file mode 100644
index 0000000..b982e40
--- /dev/null
+++ b/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
+};
diff --git a/src/components/text/index.js b/src/components/text/index.js
new file mode 100644
index 0000000..0a8572b
--- /dev/null
+++ b/src/components/text/index.js
@@ -0,0 +1 @@
+export BitmapText from './BitmapText';
diff --git a/src/devTools/DevApp.jsx b/src/devTools/DevApp.jsx
index 2f63e64..166a89c 100644
--- a/src/devTools/DevApp.jsx
+++ b/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 */}
     }
 
diff --git a/src/emails/register/Register.jsx b/src/emails/register/Register.jsx
index 8054a8a..8135ddc 100644
--- a/src/emails/register/Register.jsx
+++ b/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>