Fixed a bug relating to custom-elements's first vnode where render(){ return <div class="example" /> } would set the example-class on the custom-element itself.
Added support for className and style similar to react Cleaned up some comments Reworked how tests are built in order to add a new test "pdf" which was a small side-project where previous mentioned bug showed up, it's an example using HTML to create a PDF for printing
This commit is contained in:
88
tests/pdf/index.jsx
Normal file
88
tests/pdf/index.jsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import kaartStyle from "./index.pcss";
|
||||
import {render, defineElement, CustomElement, Host, State, Prop, ShadowDOM} from "../../packages/csx";
|
||||
|
||||
// Style
|
||||
document.head.appendChild(render(<style>{kaartStyle}</style>));
|
||||
|
||||
// Kaart
|
||||
@defineElement("pasta-buffet-kaart")
|
||||
class PastaBuffetKaart extends CustomElement{
|
||||
|
||||
@Prop() eigenExemplaar;
|
||||
|
||||
render(){
|
||||
return <div className="kaart">
|
||||
<div className="header">
|
||||
<img src="assets/logo.svg" alt={"logo"} className="logo"/>
|
||||
<div className="header-info">
|
||||
<div className="title">Pastabuffet</div>
|
||||
<div className="sub-title">Zondag 02/02/2020 vanaf 17u</div>
|
||||
<div className="sub-title">O.C De Link, Linkhoutstraat 194</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content">
|
||||
<h3>Bestelling</h3>
|
||||
<table className="order">
|
||||
<tr>
|
||||
<td className="product-name">Volwassenen</td>
|
||||
<td className="product-amount"><input type="text"/></td>
|
||||
<td className="product-multiplier">x</td>
|
||||
<td className="product-price">14,00€ =</td>
|
||||
<td className="product-total"><input type="text"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="product-name">Kinderen</td>
|
||||
<td className="product-amount"><input type="text"/></td>
|
||||
<td className="product-multiplier">x</td>
|
||||
<td className="product-price">8,00€ =</td>
|
||||
<td className="product-total"><input type="text"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={3}/>
|
||||
<td className="total-label">Totaal =</td>
|
||||
<td className="order-total"><input type="text"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table className="account">
|
||||
<tr>
|
||||
<td className="product-name">Naam</td>
|
||||
<td className="product-input"><input type="text"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div className="payment-options">
|
||||
<div className="option">
|
||||
Cash betaald
|
||||
<input type="checkbox"/>
|
||||
</div>
|
||||
<div className="option">
|
||||
Overschrijving
|
||||
<input type="checkbox"/>
|
||||
BE50 9731 5197 8018
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer">
|
||||
{this.eigenExemplaar ? ([
|
||||
<div className="form-for">Eigen exemplaar</div>,
|
||||
<div className="contact">Contactpersoon: Peter Aerts 0499 26 54 99</div>
|
||||
]) : ([
|
||||
<div className="form-for">Exemplaar voor Groen Lummen</div>
|
||||
])}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
// Kaarten
|
||||
document.body.appendChild(render(<div className="kaarten-print">
|
||||
<div className="kaarten-pair">
|
||||
<PastaBuffetKaart eigenExemplaar={true}/>
|
||||
<PastaBuffetKaart/>
|
||||
</div>
|
||||
<div className="kaarten-pair">
|
||||
<PastaBuffetKaart eigenExemplaar={true}/>
|
||||
<PastaBuffetKaart/>
|
||||
</div>
|
||||
</div>));
|
||||
Reference in New Issue
Block a user