[List/ListItem] Introduce selected property #1581 #1976
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| const React = require('react'); | ||
| const ThemeManager = require('../styles/theme-manager'); | ||
| const StylePropable = require('../mixins/style-propable'); | ||
| const ColorManipulator = require('../utils/color-manipulator'); | ||
| const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme'); | ||
|
|
||
| export const SelectableContainerEnhance = (Component) => { | ||
| let composed = React.createClass({ | ||
|
|
||
| mixins: [StylePropable], | ||
|
|
||
| contextTypes: { | ||
| muiTheme: React.PropTypes.object, | ||
| }, | ||
|
|
||
| displayName: `Selectable${Component.displayName}`, | ||
|
|
||
| propTypes: { | ||
| valueLink: React.PropTypes.shape({ | ||
| value: React.PropTypes.number, | ||
| requestChange: React.PropTypes.func, | ||
| }).isRequired, | ||
| selectedItemStyle: React.PropTypes.object, | ||
| }, | ||
|
|
||
| childContextTypes: { | ||
| muiTheme: React.PropTypes.object, | ||
| }, | ||
|
|
||
| getChildContext () { | ||
| return { | ||
| muiTheme: this.state.muiTheme, | ||
| }; | ||
| }, | ||
|
|
||
| componentWillReceiveProps (nextProps, nextContext) { | ||
| let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; | ||
| this.setState({muiTheme: newMuiTheme}); | ||
| }, | ||
|
|
||
| getInitialState() { | ||
| return { | ||
| muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), | ||
| }; | ||
| }, | ||
|
|
||
| getValueLink: function(props) { | ||
| return props.valueLink || { | ||
| value: props.value, | ||
| requestChange: props.onChange, | ||
| }; | ||
| }, | ||
|
|
||
| render(){ | ||
| const { children, selectedItemStyle } = this.props | ||
| let listItems; | ||
| let keyIndex = 0; | ||
| let styles = {}; | ||
|
|
||
| if (! selectedItemStyle) { | ||
| let textColor = this.state.muiTheme.rawTheme.palette.textColor; | ||
| let selectedColor = ColorManipulator.fade(textColor, 0.2); | ||
| styles = { | ||
| backgroundColor: selectedColor, | ||
| }; | ||
| } | ||
|
|
||
| listItems = React.Children.map(children, (child) => { | ||
| if (child.type.displayName === "ListItem") { | ||
| let selected = this._isChildSelected(child, this.props); | ||
| let selectedChildrenStyles = {}; | ||
| if (selected) { | ||
| selectedChildrenStyles = this.mergeStyles(styles, selectedItemStyle); | ||
| } | ||
|
|
||
| let mergedChildrenStyles = this.mergeStyles( | ||
| child.props.style || {}, | ||
| selectedChildrenStyles | ||
| ); | ||
|
|
||
| keyIndex += 1; | ||
|
|
||
| return React.cloneElement(child, { | ||
| onTouchTap: (e) => { | ||
| this._handleItemTouchTap(e, child); | ||
| if (child.props.onTouchTap) { child.props.onTouchTap(e) }; | ||
| }, | ||
| key: keyIndex, | ||
|
There was a problem hiding this comment.
From the React doc. Shouldn't we remove this? There was a problem hiding this comment. @oliviertassinari Is there any benefit for the user of the component to let him set the key which I do not see? Otherwise I would like to mitigate the "boilerplate" and source of error/warnings here. There was a problem hiding this comment. You are right. There was a problem hiding this comment. @oliviertassinari Quite frankly, I didn't know. There was a problem hiding this comment. @frankf-cgn Let's keep the key then. Can you have a look at my comment on the import? I think that we can merge then 👍. |
||
| style: mergedChildrenStyles, | ||
| }); | ||
| } | ||
| else { | ||
| return child; | ||
| } | ||
| }); | ||
| let newChildren = listItems; | ||
|
|
||
| return ( | ||
| <Component {...this.props} {...this.state}> | ||
| {newChildren} | ||
| </Component> | ||
| ); | ||
| }, | ||
|
|
||
| _isChildSelected(child, props) { | ||
| let itemValue = this.getValueLink(props).value; | ||
| let childValue = child.props.value; | ||
|
|
||
| return (itemValue && itemValue === childValue); | ||
| }, | ||
|
|
||
| _handleItemTouchTap(e, item) { | ||
| let valueLink = this.getValueLink(this.props); | ||
| let itemValue = item.props.value; | ||
| let menuValue = valueLink.value | ||
| if ( itemValue !== menuValue) { | ||
| valueLink.requestChange(e, itemValue); | ||
| } | ||
| }, | ||
|
|
||
| }); | ||
| return( composed ); | ||
| }; | ||
|
|
||
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.
Is there any way we could avoid having this helper function to wrap
SelectableList? And do it straight using props in the render method ofListsPage? I think it would be a good idea to keep the docs code as straightforward as possible..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.
Yeah, it is avoidable, but it makes the
<ListsPage>really slow. There is a noticable lag if you click on an item of the<SelectableList>. See the performance-Section of my previous comment.