ElyBy-Mirror/emails-renderer
1
0
Fork 0
mirror of https://github.com/elyby/emails-renderer.git synced 2024-12-22 13:19:45 +05:30
Code Issues Packages Projects Releases Wiki Activity

Refactor for better support of Html tag rendering for emails

Browse Source
This commit is contained in:
SleepWalker 2016-09-11 11:12:46 +03:00
parent 0b35d908e8
commit c48620c36a
12 changed files with 48 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.jsx
View File

@ -14,6 +14,8 @@ addLocaleData(ukLocaleData);
import { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE } from './constants';
import BaseLayout from 'components/BaseLayout';
export default function App({type, payload = {}}) {
let {locale} = payload;
@ -26,7 +28,9 @@ export default function App({type, payload = {}}) {
return (
<IntlProvider locale={locale} messages={messages}>
<Email {...payload} />
<BaseLayout>
<Email {...payload} />
</BaseLayout>
</IntlProvider>
);
}

21
src/components/BaseLayout.jsx Normal file
View File

@ -0,0 +1,21 @@
import styles from './styles';
import { Table } from 'components/table';
export default function BaseLayout(props) {
return (
<Table style={styles.body}>
<tr>
<td>
&nbsp;
</td>
<td style={styles.container}>
{props.children}
</td>
<td>
&nbsp;
</td>
</tr>
</Table>
);
}

18
src/components/Html.jsx
View File

@ -1,7 +1,3 @@
import styles from './styles';
import { Table } from './';
export default function Html(props) {
return (
<html>
@ -12,19 +8,7 @@ export default function Html(props) {
<body style={{
margin: 0
}}>
<Table style={styles.body}>
<tr>
<td>
&nbsp;
</td>
<td style={styles.container}>
{props.children}
</td>
<td>
&nbsp;
</td>
</tr>
</Table>
{props.children}
</body>
</html>
);

2
src/components/index.js
View File

@ -1,9 +1,7 @@
import Html from './Html';
import Table from './table/Table';
import Userbar from './userbar/Userbar';
export {
Html,
Table,
Userbar
};

2
src/components/styles.jsx → src/components/styles.js
View File

@ -6,4 +6,4 @@ export default {
container: {
width: '600px'
}
}
};

1
src/components/table/index.js Normal file
View File

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

6
src/components/table/styles.js
View File

@ -1,8 +1,8 @@
export default {
table: {
borderCollapse: 'collapse',
msoTableLspace: '0pt', // TODO: эта штука не отображается
msoTableRspace: '0pt', // TODO: эта штука не отображается
msoTableLspace: '0pt',
msoTableRspace: '0pt',
width: '100%'
}
}
};

5
src/components/userbar/Userbar.jsx
View File

@ -1,4 +1,4 @@
import { Table } from './../';
import { Table } from 'components/table';
import styles from './styles';
@ -8,8 +8,7 @@ export default function Userbar() {
return (
<Table style={styles.userbar}>
<tr>
<td style={styles.marginColumn}>
</td>
<td style={styles.marginColumn} />
<td style={styles.logoColumn}>
<div style={styles.logo}>
{/* TODO: здесь нужно динамически сформировать название, т.к. может быть Ёly.by */}

2
src/components/userbar/styles.js
View File

@ -12,4 +12,4 @@ export default {
verticalAlign: 'middle',
padding: '0 13px'
}
}
};

6
src/emails/register/Register.jsx
View File

@ -2,17 +2,17 @@ import { PropTypes } from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { Html, Userbar } from './../../components';
import { Userbar } from 'components';
import styles from './styles';
import messages from './messages.intl.json';
export default function Register({username}) {
return (
<Html>
<div>
<Userbar />
<Message {...messages.you_registered_as} values={{username}} />
</Html>
</div>
);
}

7
src/index.ejs
View File

@ -3,14 +3,13 @@
<head>
<meta charset="utf-8">
<title>Ely.by - Email Renderer</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width" />
<% if (htmlWebpackPlugin.files.favicon) { %>
<link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.favicon %>">
<% } %>
</head>
<body>
<body style="margin: 0">
<div id="app" class="app"></div>

8
src/index.js
View File

@ -1,5 +1,7 @@
import 'babel-polyfill';
import { Html } from 'components';
// NOTE: we are requiring with require(), to enable dynamic dependencies
// depending on ENV, where App is running in.
// This allows us better support of hmr and reduces bundle size
@ -20,7 +22,11 @@ if (process.env.NODE_ENV !== 'production') {
module.exports = {
default(props) {
return ReactDOMServer.renderToStaticMarkup(<App {...props} />);
return ReactDOMServer.renderToStaticMarkup(
<Html>
<App {...props} />
</Html>
);
}
};
}