|
// allows to group content inside mjml-column |
|
// this component is a simplified version of mjml-column |
|
|
|
const {BodyComponent} = require('mjml-core'); |
|
|
|
const tableAttrs = { |
|
border: '0', |
|
cellpadding: '0', |
|
cellspacing: '0', |
|
role: 'presentation', |
|
style: 'table', |
|
width: '100%', |
|
}; |
|
|
|
const allowedAttributes = { |
|
'background-color': 'color', |
|
border: 'string', |
|
'border-bottom': 'string', |
|
'border-left': 'string', |
|
'border-radius': 'unit(px,%)', |
|
'border-right': 'string', |
|
'border-top': 'string', |
|
direction: 'enum(ltr,rtl)', |
|
'padding-bottom': 'unit(px,%)', |
|
'padding-left': 'unit(px,%)', |
|
'padding-right': 'unit(px,%)', |
|
'padding-top': 'unit(px,%)', |
|
padding: 'unit(px,%){1,4}', |
|
'vertical-align': 'enum(top,bottom,middle)', |
|
width: 'unit(px,%)', |
|
}; |
|
|
|
const defaultAttributes = { |
|
direction: 'ltr', |
|
'vertical-align': 'top', |
|
}; |
|
|
|
class MjBlock extends BodyComponent { |
|
getStyles() { |
|
return { |
|
div: { |
|
'font-size': '13px', |
|
'text-align': 'left', |
|
direction: this.getAttribute('direction'), |
|
display: 'inline-block', |
|
'vertical-align': this.getAttribute('vertical-align'), |
|
width: '100%', |
|
}, |
|
table: { |
|
'background-color': this.getAttribute('background-color'), |
|
border: this.getAttribute('border'), |
|
'border-bottom': this.getAttribute('border-bottom'), |
|
'border-left': this.getAttribute('border-left'), |
|
'border-radius': this.getAttribute('border-radius'), |
|
'border-right': this.getAttribute('border-right'), |
|
'border-top': this.getAttribute('border-top'), |
|
'vertical-align': this.getAttribute('vertical-align'), |
|
} |
|
}; |
|
} |
|
|
|
renderColumn() { |
|
const {children} = this.props; |
|
|
|
return ` |
|
<table ${this.htmlAttributes(tableAttrs)}> |
|
${this.renderChildren(children, { |
|
renderer: (component) => |
|
component.constructor.isRawElement() |
|
? component.render() |
|
: ` |
|
<tr> |
|
<td |
|
${component.htmlAttributes({ |
|
align: component.getAttribute('align'), |
|
'vertical-align': component.getAttribute('vertical-align'), |
|
class: component.getAttribute('css-class'), |
|
style: { |
|
background: component.getAttribute( |
|
'container-background-color', |
|
), |
|
'font-size': '0px', |
|
padding: component.getAttribute('padding'), |
|
'padding-top': component.getAttribute('padding-top'), |
|
'padding-right': component.getAttribute('padding-right'), |
|
'padding-bottom': component.getAttribute('padding-bottom'), |
|
'padding-left': component.getAttribute('padding-left'), |
|
'word-break': 'break-word', |
|
}, |
|
})} |
|
> |
|
${component.render()} |
|
</td> |
|
</tr> |
|
`, |
|
})} |
|
</table> |
|
`; |
|
} |
|
|
|
render() { |
|
let classesName = `mj-block ${this.getAttribute('css-class')} outlook-group-fix`; |
|
|
|
return ` |
|
<div ${this.htmlAttributes({class: classesName, style: 'div'})}> |
|
${this.renderColumn()} |
|
</div> |
|
`; |
|
} |
|
} |
|
|
|
MjBlock.defaultAttributes = defaultAttributes; |
|
MjBlock.allowedAttributes = allowedAttributes; |
|
MjBlock.tagName = 'mj-block'; |
|
module.exports = MjBlock; |