Use List/ListItem components from mui #20
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,8 +4,19 @@ import React from 'react'; | |
| import ListItem from './ListItem'; | ||
| import ReactCSSTransitionGroup from './TimeoutTransitionGroup'; | ||
| import { mergeAndPrefix } from '../utils/stylePropable'; | ||
| import { List } from 'material-ui'; | ||
|
|
||
| export default class extends React.Component { | ||
| static propTypes = { | ||
|
There was a problem hiding this comment. As much as I like the Classes will be getting replaced with stamps soon enough. :) There was a problem hiding this comment. Do you mean like this? constructor(props) {
super(props);
this.propTypes = {
itemData: React.PropTypes.array,
onClick: React.PropTypes.func,
style: React.PropTypes.object,
};
this.defaultProps = {
style: {},
};
}Console output: Well I think we should stick with https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#es7-property-initializers Even if it's highly experimental nop? I mean, if it is working and the code is more readable. What could be better? There was a problem hiding this comment. No, that is not applying the statics to the constructor, that is applying statics to the component instance. Take a look at the other components in this project and read FB's React blog post about how to use ES6 classes.
If we were sticking with ES6 classes I would agree. But as soon as this PR gets accepted I will be making the components stamps. Take a look at PR #19. There was a problem hiding this comment. Yep but the problem with this solution is that the component name e.g. That's why I am using static in this component and not on the other one There was a problem hiding this comment. Just name the class something different then. The component itself can still be named |
||
| itemData: React.PropTypes.array, | ||
| onClick: React.PropTypes.func, | ||
| style: React.PropTypes.object, | ||
| }; | ||
|
|
||
| static defaultProps = { | ||
| style: {}, | ||
| }; | ||
|
|
||
| _getStyles() { | ||
| return { | ||
| root: { | ||
|
|
@@ -40,7 +51,7 @@ class List extends React.Component { | |
| let styles = this._getStyles(); | ||
|
|
||
| return ( | ||
| <List style={mergeAndPrefix(styles.root, this.props.style)}> | ||
| <ReactCSSTransitionGroup | ||
| enterTimeout={1000} | ||
| leaveTimeout={0} | ||
|
|
@@ -53,24 +64,12 @@ class List extends React.Component { | |
| icon={obj.user.profile_picture} | ||
| key={obj.id} | ||
| onClick={this.props.onClick ? this.props.onClick.bind(null, obj) : undefined} | ||
| primaryText={obj.user.full_name.trim() || '-'} | ||
| /> | ||
| ); | ||
| })} | ||
| </ReactCSSTransitionGroup> | ||
| </List> | ||
| ); | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,141 +1,85 @@ | ||
| 'use strict'; | ||
|
|
||
| import React from 'react'; | ||
| import typography from 'material-ui/lib/styles/typography'; | ||
| import { | ||
| ListDivider, | ||
| ListItem, | ||
| } from 'material-ui'; | ||
|
There was a problem hiding this comment. import { ListDivider, ListItem } from 'material-ui/lib/lists'; |
||
| import ListItemAvatar from './ListItemAvatar'; | ||
| import { mergeAndPrefix } from '../utils/stylePropable'; | ||
|
|
||
| export default class extends React.Component { | ||
| static contextTypes = { | ||
|
|
||
| muiTheme: React.PropTypes.object, | ||
| }; | ||
|
|
||
| static propTypes = { | ||
| description: React.PropTypes.string, | ||
| icon: React.PropTypes.string, | ||
| onClick: React.PropTypes.func, | ||
| primaryText: React.PropTypes.string, | ||
| }; | ||
|
|
||
| static defaultProps = { | ||
| description: '', | ||
| primaryText: '', | ||
| }; | ||
|
|
||
| _getStyles() { | ||
| const theme = this.context.muiTheme.component.listItem; | ||
|
|
||
| return { | ||
| primaryText: { | ||
| fontSize: '0.8em', | ||
| fontWeight: typography.fontWeightMedium, | ||
| color: theme.color, | ||
| }, | ||
| description: { | ||
| marginTop: '-4px', | ||
| fontSize: '0.75em', | ||
| color: theme.color, | ||
| }, | ||
| divider: { | ||
| backgroundColor: theme.borderColor, | ||
| paddingTop: '0.1px', | ||
| }, | ||
| overflow: { | ||
| textOverflow: 'ellipsis', | ||
| overflow: 'hidden', | ||
| width: '190px', | ||
| display: 'inline-block', | ||
| whiteSpace: 'nowrap', | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| const styles = this._getStyles(); | ||
| /* eslint-disable */ | ||
| const { | ||
| description, | ||
| icon, | ||
| primaryText, | ||
| onClick, | ||
| ...other | ||
| } = this.props; | ||
| /* eslint-enable */ | ||
|
|
||
| return ( | ||
| <div onClick={onClick}> | ||
| <ListItem | ||
| {...other} | ||
| leftAvatar={<ListItemAvatar className='icon' src={icon} />} | ||
| primaryText={ | ||
| <div dangerouslySetInnerHTML={{__html: primaryText}} style={mergeAndPrefix(styles.overflow, styles.primaryText)}></div> | ||
| } | ||
| secondaryText={ | ||
| <div className='content' dangerouslySetInnerHTML={{__html: description}} style={mergeAndPrefix(styles.overflow, styles.description)} ></div> | ||
| } | ||
| /> | ||
| <ListDivider className='border-bottom' inset={true} style={styles.divider} /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| 'use strict'; | ||
|
|
||
| import React from 'react'; | ||
| import { Avatar } from 'material-ui'; | ||
|
|
||
| class ListItemAvatar extends React.Component { | ||
| _getStyles() { | ||
| return { | ||
| border: 'none', | ||
| position: 'absolute', | ||
| top: '16px', | ||
| left: '16px', | ||
| width: '38px', | ||
| height: '38px', | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| const style = this._getStyles(); | ||
|
|
||
| return ( | ||
| <Avatar | ||
| {...this.props} | ||
| style={style} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| ListItemAvatar.contextTypes = { | ||
| muiTheme: React.PropTypes.object, | ||
| }; | ||
|
|
||
| ListItemAvatar.propTypes = { | ||
| src: React.PropTypes.string, | ||
| }; | ||
|
|
||
| export default ListItemAvatar; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.