[List] Add documentation for highlight selected

mui · Nov 7, 2015 · 4e1d559 · 4e1d559
1 parent 9695cc7
commit 4e1d559
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 1 deletion.
diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx
@@ -39,6 +39,13 @@ export default class ListsPage extends React.Component {
 
   constructor(props) {
     super(props);
+    this.state = { selectedIndex: 1 }
+  }
+
+  handleUpdateSelectedIndex = (index) => {
+    this.setState({
+      selectedIndex: index,
+    });
   }
 
   render() {
@@ -65,6 +72,13 @@ export default class ListsPage extends React.Component {
             header: 'optional',
             desc: 'The style object to override subheader styles.',
           },
+          {
+            name: 'selectedLink',
+            type: 'valueLink',
+            header: 'optional',
+            desc: 'Makes List controllable. Highlights the ListItem whose index prop matches this "selectedLink.value". ' +
+              '"selectedLink.requestChange" represents a callback function to change that value (e.g. in state).',
+          },
         ],
       },
       {
@@ -88,6 +102,13 @@ export default class ListsPage extends React.Component {
             header: 'default: false',
             desc: 'If true, the children will be indented by 72px. Only needed if there is no left avatar or left icon.',
           },
+          {
+            name: 'index',
+            type: 'number',
+            header: 'optional',
+            desc: 'If selectedLink prop is passed to List component, this index prop is also required. It assigns a number ' +
+              'to the tab so that it can be hightlighted by the List.',
+          },
           {
             name: 'leftAvatar',
             type: 'element',
@@ -642,6 +663,28 @@ export default class ListsPage extends React.Component {
                 secondaryTextLines={2} />
             </List>
           </MobileTearSheet>
+          <MobileTearSheet>
+            <List
+              selectedLink={{value: this.state.selectedIndex, requestChange: this.handleUpdateSelectedIndex}}
+              subheader="Contacts">
+              <ListItem
+                index={1}
+                primaryText="Brendan Lim"
+                leftAvatar={<Avatar src="images/ok-128.jpg" />} />
+              <ListItem index={2}
+                primaryText="Grace Ng"
+                leftAvatar={<Avatar src="images/uxceo-128.jpg" />} />
+              <ListItem index={3}
+                primaryText="Kerem Suer"
+                leftAvatar={<Avatar src="images/kerem-128.jpg" />} />
+              <ListItem index={4}
+                primaryText="Eric Hoffman"
+                leftAvatar={<Avatar src="images/kolage-128.jpg" />} />
+              <ListItem index={5}
+                primaryText="Raquel Parrado"
+                leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />} />
+            </List>
+          </MobileTearSheet>
         </CodeExample>
       </ComponentDoc>
     );

diff --git a/docs/src/app/components/raw-code/lists-code.txt b/docs/src/app/components/raw-code/lists-code.txt
@@ -97,3 +97,12 @@
     ]}
   />
 </List>
+
+// List with selected indicator
+<List
+  selectedLink={{value: this.state.selectedIndex, requestChange: this.handleUpdateSelectedIndex}}
+  subheader="Contacts">
+  <ListItem index={1} primaryText="Brendan Lim" />
+  <ListItem index={2} primaryText="Grace Ng" />
+  <ListItem index={3} primaryText="Kerem Suer" />
+</List>
diff --git a/src/lists/list-item.jsx b/src/lists/list-item.jsx
@@ -26,6 +26,7 @@ const ListItem = React.createClass({
     autoGenerateNestedIndicator: React.PropTypes.bool,
     disabled: React.PropTypes.bool,
     disableKeyboardFocus: React.PropTypes.bool,
+    index: React.PropTypes.number,
     initiallyOpen: React.PropTypes.bool,
     innerDivStyle: React.PropTypes.object,
     insetChildren: React.PropTypes.bool,
@@ -103,6 +104,7 @@ const ListItem = React.createClass({
       children,
       disabled,
       disableKeyboardFocus,
+      index,
       innerDivStyle,
       insetChildren,
       leftAvatar,
@@ -512,7 +514,7 @@ const ListItem = React.createClass({
   },
 
   _handleTouchTap(e) {
-    this.props.updateSelected(this.props.index);
+    if (this.props.updateSelected) { this.props.updateSelected(this.props.index) };
     if (this.props.onTouchTap) { this.props.onTouchTap(e) };
   },