I am attempting to create a contact view using the list component from Material-UI. My code is written in typescript, but I am struggling with setting up react and material-ui correctly. Any guidance would be greatly appreciated.
export interface IContact {
contactName: wx.IObservableProperty<string>;
}
export abstract class Contact implements IContact {
contactName: wx.IObservableProperty<string>;
constructor() {
this.contactName = wx.property<string>();
}
}
/// <reference path="icontact.ts" />
import {IContact, Contact} from '../models/icontact.ts'
export interface IPersonContact extends IContact {
}
export class PersonContact extends Contact implements IPersonContact {
constructor() {
super();
}
}
/// <reference path="../../../typings/tsd.d.ts" />
/// <reference path="../models/icontact.ts" />
/// <reference path="../models/personcontact.ts" />
'use strict';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as Mui from 'material-ui';
import {IContact} from '../models/icontact.ts'
import * as MuiStyles from 'material-ui/lib/styles';
import {IPersonContact, PersonContact} from '../models/personcontact.ts'
interface ContactViewPros {
}
interface ContactViewState {
}
class ContactView extends React.Component<ContactViewPros, any>{
itemAddedSubscriber: Rx.IDisposable;
itemRemovedSubscriber: Rx.IDisposable;
dataSource: wx.IObservableList<IContact>;
items: Array<Mui.ListItem>;
constructor() {
super();
this.state = { muiThem: MuiStyles.ThemeManager.getMuiTheme(MuiStyles.LightRawTheme) };
this.dataSource = wx.list<IContact>();
this.itemAddedSubscriber = this.dataSource.itemsAdded.subscribe(changedInfos => this.onContactsAdded(changedInfos));
this.itemRemovedSubscriber = this.dataSource.itemsRemoved.subscribe(changedInfos => this.onContactRemoved(changedInfos));
let contact = new PersonContact();
contact.contactName('adam');
this.dataSource.add(contact);
}
onContactsAdded(changedInfos: wx.IListChangeInfo<IContact>): void {
changedInfos.items.forEach(contact => {
console.log("Contact-list changed");
});
}
onContactRemoved(changedInfos: wx.IListChangeInfo<IContact>): void {
}
getInitialState() {
return this.state;
}
componentWillUnmount() {
this.itemAddedSubscriber.dispose();
this.itemRemovedSubscriber.dispose();
}
renderContactList() {
this.items = this.dataSource.map<Mui.ListItem>(contact=> {
var listItem = new Mui.ListItem();
listItem.props = {
initiallyOpen: true
};
return listItem;
});
}
render() {
var items = this.renderContactList();
return <Mui.List>{items}</Mui.List>;
}
}
export default ContactView;