-
Notifications
You must be signed in to change notification settings - Fork 57
Expand file tree
/
Copy pathRenderableComponent.njs
More file actions
83 lines (74 loc) · 2.31 KB
/
RenderableComponent.njs
File metadata and controls
83 lines (74 loc) · 2.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import Nullstack from 'nullstack'
class RenderableComponent extends Nullstack {
renderNestedInnerComponent() {
return <div data-nested />
}
renderInnerComponent({ children, reference: Reference }) {
return (
<div class="InnerComponent">
<p> Inner Component </p>
<NestedInnerComponent />
<Reference prop />
{children}
</div>
)
}
renderInnerReference({ prop }) {
return <div data-reference={prop} />
}
renderFalsy() {
return false
}
renderRepeated({ number }) {
return <div data-repeated={number} />
}
render({ params }) {
const list = params.shortList ? [1, 2, 3] : [1, 2, 3, 4, 5, 6]
const html = '<a href="/"> Nullstack </a>'
const props = { disabled: true, 'aria-label': 'props' }
return (
<div class="RenderableComponent">
<Falsy />
<div data-object={{ a: 1 }} />
<div data-function={this.renderRenderableComponent} />
<div> this is a normal tag </div>
<label for="input"> label </label>
<button disabled> disabled button </button>
<button class="conditionally-disabled" disabled={!!params.condition}>
conditionally disabled button
</button>
<element class="element" tag={params.condition ? 'div' : 'span'}>
element tag
</element>
<InnerComponent reference={this.renderInnerReference}>
<span class="children"> children </span>
</InnerComponent>
<ul>
{list.map((item) => (
<li> {item} </li>
))}
</ul>
<div html={html} />
<head>
<link rel="preload" href="https://nullstack.app" as="fetch" crossorigin />
</head>
{!!params.condition && <div class="condition"> conditionally rendered div </div>}
<a params={{ shortList: true }} class="short-list">
long list
</a>
<a params={{ condition: true }} class="true-condition">
long list
</a>
<div data-condition={!!params.condition} />
<div data-short-list={!!params.shortList} />
<div data-name={this.name} />
<button {...props} onclick={() => { }}>
props
</button>
<Repeated number={1} />
<Repeated number={2} />
</div>
)
}
}
export default RenderableComponent