-
-
Notifications
You must be signed in to change notification settings - Fork 834
/
Component.ts
86 lines (64 loc) · 1.95 KB
/
Component.ts
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
84
85
86
import Mithril from 'mithril';
export type ComponentProps = {
children?: Mithril.Children;
className?: string;
[key: string]: any;
};
export default class Component<T extends ComponentProps = any> {
element: HTMLElement;
props: T;
constructor(props: T = <T>{}) {
this.props = props;
}
view(vnode) {
throw new Error('Component#view must be implemented by subclass');
}
oninit(vnode) {
this.setProps(vnode.attrs);
}
oncreate(vnode) {
this.setProps(vnode.attrs);
this.element = vnode.dom;
}
onbeforeupdate(vnode) {
this.setProps(vnode.attrs);
}
onupdate(vnode) {
this.setProps(vnode.attrs);
}
onbeforeremove(vnode) {
this.setProps(vnode.attrs);
}
onremove(vnode) {
this.setProps(vnode.attrs);
}
/**
* Returns a jQuery object for this component's element. If you pass in a
* selector string, this method will return a jQuery object, using the current
* element as its buffer.
*
* For example, calling `component.$('li')` will return a jQuery object
* containing all of the `li` elements inside the DOM element of this
* component.
*
* @param selector a jQuery-compatible selector string
* @final
*/
$(selector?: string): ZeptoCollection {
const $element = $(this.element);
return selector ? $element.find(selector) : $element;
}
render() {
return m(this, this.props);
}
static component(props: ComponentProps | any = {}, children?: Mithril.Children) {
const componentProps: ComponentProps = Object.assign({}, props);
if (children) componentProps.children = children;
return m(this, componentProps);
}
static initProps(props: ComponentProps = {}) {}
private setProps(props: T) {
(this.constructor as typeof Component).initProps(props);
this.props = props;
}
}