diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx
index 766a1286ecf0f1..85ac7889f916d8 100644
--- 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} />
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
);
diff --git a/docs/src/app/components/raw-code/lists-code.txt b/docs/src/app/components/raw-code/lists-code.txt
index ef8c91e46c219d..1935c3ad50fbf0 100644
--- 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 with selected indicator
+
+
+
+
+
diff --git a/src/lists/list-item.jsx b/src/lists/list-item.jsx
index bf164c2e5238ff..0994d19d68c87e 100644
--- 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) };
},