Skip to content

[ListItem] New property open to toggle nested list #4850

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oliviertassinari merged 4 commits into from
Aug 8, 2016
Merged

[ListItem] New property open to toggle nested list #4850

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
482c9d4
Toggle open state of nested list dynamically after component did moun…
davincho Jul 29, 2016
d5fe353
Fix eslint errors.
davincho Jul 29, 2016
30287d5
adding tests, consider open prop when mounting
davincho Jul 31, 2016
6052ee3
remove unneeded className attribute
davincho Jul 31, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 71 additions & 32 deletions docs/src/app/components/pages/components/List/ExampleNested.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,76 @@ import ContentInbox from 'material-ui/svg-icons/content/inbox';
import ContentDrafts from 'material-ui/svg-icons/content/drafts';
import ContentSend from 'material-ui/svg-icons/content/send';
import Subheader from 'material-ui/Subheader';
import Toggle from 'material-ui/Toggle';
Copy link
Copy Markdown
Member

@oliviertassinari oliviertassinari Jul 31, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't we add a new example instead of modifying this one? Like ExampleNestedControlled?

Copy link
Copy Markdown
Author

@davincho davincho Aug 1, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I will create a new example

Copy link
Copy Markdown
Member

@oliviertassinari oliviertassinari Aug 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have justed checked out the PR on my local env. I think that we can keep the example like this 👍 .
We already have a lot of them.


const ListExampleNested = () => (
<MobileTearSheet>
<List>
<Subheader>Nested List Items</Subheader>
<ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
<ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
<ListItem
primaryText="Inbox"
leftIcon={<ContentInbox />}
initiallyOpen={true}
primaryTogglesNestedList={true}
nestedItems={[
<ListItem
key={1}
primaryText="Starred"
leftIcon={<ActionGrade />}
/>,
<ListItem
key={2}
primaryText="Sent Mail"
leftIcon={<ContentSend />}
disabled={true}
nestedItems={[
<ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
]}
/>,
]}
/>
</List>
</MobileTearSheet>
);
export default class ListExampleNested extends React.Component {

export default ListExampleNested;
state = {
open: false,
};

handleToggle = () => {
this.setState({
open: !this.state.open,
});
};

handleNestedListToggle = (item) => {
this.setState({
open: item.state.open,
});
};

render() {
return (
<div>
<Toggle
toggled={this.state.open}
onToggle={this.handleToggle}
labelPosition="right"
label="This toggle controls the expanded state of the submenu item."
/>
<br />
<MobileTearSheet>
<List>
<Subheader>Nested List Items</Subheader>
<ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
<ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
<ListItem
primaryText="Inbox"
leftIcon={<ContentInbox />}
initiallyOpen={true}
primaryTogglesNestedList={true}
nestedItems={[
<ListItem
key={1}
primaryText="Starred"
leftIcon={<ActionGrade />}
/>,
<ListItem
key={2}
primaryText="Sent Mail"
leftIcon={<ContentSend />}
disabled={true}
nestedItems={[
<ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
]}
/>,
<ListItem
key={3}
primaryText="Inbox"
leftIcon={<ContentInbox />}
open={this.state.open}
onNestedListToggle={this.handleNestedListToggle}
nestedItems={[
<ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
]}
/>,
]}
/>
</List>
</MobileTearSheet>
</div>
);
}
}
17 changes: 14 additions & 3 deletions src/List/ListItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,10 @@ class ListItem extends Component {
onTouchStart: PropTypes.func,
/** @ignore */
onTouchTap: PropTypes.func,
/**
* Control toggle state of nested list.
*/
open: PropTypes.bool,
/**
* This is the block element that contains the primary text.
* If a string is passed in, a div tag will be rendered.
Expand Down Expand Up @@ -282,6 +286,7 @@ class ListItem extends Component {
onMouseLeave: () => {},
onNestedListToggle: () => {},
onTouchStart: () => {},
open: null,
primaryTogglesNestedList: false,
secondaryTextLines: 1,
};
Expand All @@ -300,9 +305,15 @@ class ListItem extends Component {
};

componentWillMount() {
if (this.props.initiallyOpen) {
this.setState({open: true});
}
this.setState({
open: this.props.open === null ? this.props.initiallyOpen === true : this.props.open,
});
}

componentWillReceiveProps(nextProps) {
// update the state when the component is controlled.
if (nextProps.open !== null)
this.setState({open: nextProps.open});
}

shouldComponentUpdate(nextProps, nextState, nextContext) {
Expand Down
39 changes: 39 additions & 0 deletions src/List/ListItem.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,43 @@ describe('<ListItem />', () => {
assert.ok(wrapper.find('.test-checkbox').length);
assert.strictEqual(wrapper.find(`.${testClass}`).length, 1, 'should have a div with the test class');
});

it('should initially open nested list', () => {
const testClass = 'test-class';
const wrapper = shallowWithContext(
<ListItem
className={testClass}
initiallyOpen={true}
nestedItems={[
<ListItem
key={1}
/>,
]}
/>
);

assert.ok(wrapper.find('NestedList').length);
assert.ok(wrapper.find('.test-class').parent().children().nodes[1].props.open === true);
});

it('should toggle nested list', () => {
const testClass = 'test-class';
const wrapper = shallowWithContext(
<ListItem
className={testClass}
open={false}
nestedItems={[
<ListItem
key={1}
/>,
]}
/>
);

assert.ok(wrapper.find('.test-class').parent().children().nodes[1].props.open === false);
wrapper.setProps({
open: true,
});
assert.ok(wrapper.find('.test-class').parent().children().nodes[1].props.open === true);
});
});
⚡