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 { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE } from './constants';
import BaseLayout from 'components/BaseLayout';
export default function App({type, payload = {}}) { export default function App({type, payload = {}}) {
let {locale} = payload; let {locale} = payload;
@ -26,7 +28,9 @@ export default function App({type, payload = {}}) {
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages}>
<Email {...payload} /> <BaseLayout>
<Email {...payload} />
</BaseLayout>
</IntlProvider> </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) { export default function Html(props) {
return ( return (
<html> <html>
@ -12,19 +8,7 @@ export default function Html(props) {
<body style={{ <body style={{
margin: 0 margin: 0
}}> }}>
<Table style={styles.body}> {props.children}
<tr>
<td>
&nbsp;
</td>
<td style={styles.container}>
{props.children}
</td>
<td>
&nbsp;
</td>
</tr>
</Table>
</body> </body>
</html> </html>
); );

2
src/components/index.js
View File

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

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

@ -6,4 +6,4 @@ export default {
container: { container: {
width: '600px' 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 { export default {
table: { table: {
borderCollapse: 'collapse', borderCollapse: 'collapse',
msoTableLspace: '0pt', // TODO: эта штука не отображается msoTableLspace: '0pt',
msoTableRspace: '0pt', // TODO: эта штука не отображается msoTableRspace: '0pt',
width: '100%' 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'; import styles from './styles';
@ -8,8 +8,7 @@ export default function Userbar() {
return ( return (
<Table style={styles.userbar}> <Table style={styles.userbar}>
<tr> <tr>
<td style={styles.marginColumn}> <td style={styles.marginColumn} />
</td>
<td style={styles.logoColumn}> <td style={styles.logoColumn}>
<div style={styles.logo}> <div style={styles.logo}>
{/* TODO: здесь нужно динамически сформировать название, т.к. может быть Ёly.by */} {/* TODO: здесь нужно динамически сформировать название, т.к. может быть Ёly.by */}

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

@ -12,4 +12,4 @@ export default {
verticalAlign: 'middle', verticalAlign: 'middle',
padding: '0 13px' 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 { FormattedMessage as Message } from 'react-intl';
import { Html, Userbar } from './../../components'; import { Userbar } from 'components';
import styles from './styles'; import styles from './styles';
import messages from './messages.intl.json'; import messages from './messages.intl.json';
export default function Register({username}) { export default function Register({username}) {
return ( return (
<Html> <div>
<Userbar /> <Userbar />
<Message {...messages.you_registered_as} values={{username}} /> <Message {...messages.you_registered_as} values={{username}} />
</Html> </div>
); );
} }

7
src/index.ejs
View File

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

8
src/index.js
View File

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