-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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.
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
[Docs] Update Documentation for Lists #2782
Merged
Merged
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
45 changes: 45 additions & 0 deletions
45
docs/src/app/components/pages/components/List/ExampleChat.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React from 'react'; | ||
| import MobileTearSheet from '../../../MobileTearSheet'; | ||
| import Avatar from 'material-ui/lib/avatar'; | ||
| import List from 'material-ui/lib/lists/list'; | ||
| import ListItem from 'material-ui/lib/lists/list-item'; | ||
| import Divider from 'material-ui/lib/divider'; | ||
| import CommunicationChatBubble from 'material-ui/lib/svg-icons/communication/chat-bubble'; | ||
|
|
||
| const ListExampleChat = () => ( | ||
| <MobileTearSheet> | ||
| <List subheader="Recent chats"> | ||
| <ListItem | ||
| primaryText="Brendan Lim" | ||
| leftAvatar={<Avatar src="images/ok-128.jpg" />} | ||
| rightIcon={<CommunicationChatBubble />} /> | ||
| <ListItem | ||
| primaryText="Eric Hoffman" | ||
| leftAvatar={<Avatar src="images/kolage-128.jpg" />} | ||
| rightIcon={<CommunicationChatBubble />} /> | ||
| <ListItem | ||
| primaryText="Grace Ng" | ||
| leftAvatar={<Avatar src="images/uxceo-128.jpg" />} | ||
| rightIcon={<CommunicationChatBubble />} /> | ||
| <ListItem | ||
| primaryText="Kerem Suer" | ||
| leftAvatar={<Avatar src="images/kerem-128.jpg" />} | ||
| rightIcon={<CommunicationChatBubble />} /> | ||
| <ListItem | ||
| primaryText="Raquel Parrado" | ||
| leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />} | ||
| rightIcon={<CommunicationChatBubble />} /> | ||
| </List> | ||
| <Divider /> | ||
| <List subheader="Previous chats"> | ||
| <ListItem | ||
| primaryText="Chelsea Otakan" | ||
| leftAvatar={<Avatar src="images/chexee-128.jpg" />} /> | ||
| <ListItem | ||
| primaryText="James Anderson" | ||
| leftAvatar={<Avatar src="images/jsa-128.jpg" />} /> | ||
| </List> | ||
| </MobileTearSheet> | ||
| ); | ||
|
|
||
| export default ListExampleChat; | ||
53 changes: 53 additions & 0 deletions
53
docs/src/app/components/pages/components/List/ExampleContacts.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import React from 'react'; | ||
| import MobileTearSheet from '../../../MobileTearSheet'; | ||
| import List from 'material-ui/lib/lists/list'; | ||
| import ListItem from 'material-ui/lib/lists/list-item'; | ||
| import ActionGrade from 'material-ui/lib/svg-icons/action/grade'; | ||
| import Divider from 'material-ui/lib/divider'; | ||
| import Avatar from 'material-ui/lib/avatar'; | ||
| import Colors from 'material-ui/lib/styles/colors'; | ||
|
|
||
| const ListExampleContacts = () => ( | ||
| <MobileTearSheet> | ||
| <List> | ||
| <ListItem | ||
| primaryText="Chelsea Otakan" | ||
| leftIcon={<ActionGrade color={Colors.pinkA200} />} | ||
| rightAvatar={<Avatar src="images/chexee-128.jpg" />} /> | ||
| <ListItem | ||
| primaryText="Eric Hoffman" | ||
| insetChildren={true} | ||
| rightAvatar={<Avatar src="images/kolage-128.jpg" />} /> | ||
| <ListItem | ||
| primaryText="James Anderson" | ||
| insetChildren={true} | ||
| rightAvatar={<Avatar src="images/jsa-128.jpg" />} /> | ||
| <ListItem | ||
| primaryText="Kerem Suer" | ||
| insetChildren={true} | ||
| rightAvatar={<Avatar src="images/kerem-128.jpg" />} /> | ||
| </List> | ||
| <Divider inset={true} /> | ||
| <List> | ||
| <ListItem | ||
| primaryText="Adelle Charles" | ||
| leftAvatar={<Avatar color={Colors.pinkA200} backgroundColor={Colors.transparent} | ||
| style={{left: 8}}>A</Avatar>} | ||
| rightAvatar={<Avatar src="images/adellecharles-128.jpg" />} /> | ||
| <ListItem | ||
| primaryText="Adham Dannaway" | ||
| insetChildren={true} | ||
| rightAvatar={<Avatar src="images/adhamdannaway-128.jpg" />} /> | ||
| <ListItem | ||
| primaryText="Allison Grayce" | ||
| insetChildren={true} | ||
| rightAvatar={<Avatar src="images/allisongrayce-128.jpg" />} /> | ||
| <ListItem | ||
| primaryText="Angel Ceballos" | ||
| insetChildren={true} | ||
| rightAvatar={<Avatar src="images/angelceballos-128.jpg" />} /> | ||
| </List> | ||
| </MobileTearSheet> | ||
| ); | ||
|
|
||
| export default ListExampleContacts; |
48 changes: 48 additions & 0 deletions
48
docs/src/app/components/pages/components/List/ExampleFolders.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from 'react'; | ||
| import MobileTearSheet from '../../../MobileTearSheet'; | ||
| import List from 'material-ui/lib/lists/list'; | ||
| import ListItem from 'material-ui/lib/lists/list-item'; | ||
| import ActionInfo from 'material-ui/lib/svg-icons/action/info'; | ||
| import Divider from 'material-ui/lib/divider'; | ||
| import Avatar from 'material-ui/lib/avatar'; | ||
| import FileFolder from 'material-ui/lib/svg-icons/file/folder'; | ||
| import ActionAssignment from 'material-ui/lib/svg-icons/action/assignment'; | ||
| import Colors from 'material-ui/lib/styles/colors'; | ||
| import EditorInsertChart from 'material-ui/lib/svg-icons/editor/insert-chart'; | ||
|
|
||
| const ListExampleFolder = () => ( | ||
| <MobileTearSheet> | ||
| <List subheader="Folders" insetSubheader={true}> | ||
| <ListItem | ||
| leftAvatar={<Avatar icon={<FileFolder />} />} | ||
| rightIcon={<ActionInfo />} | ||
| primaryText="Photos" | ||
| secondaryText="Jan 9, 2014" /> | ||
| <ListItem | ||
| leftAvatar={<Avatar icon={<FileFolder />} />} | ||
| rightIcon={<ActionInfo />} | ||
| primaryText="Recipes" | ||
| secondaryText="Jan 17, 2014" /> | ||
| <ListItem | ||
| leftAvatar={<Avatar icon={<FileFolder />} />} | ||
| rightIcon={<ActionInfo />} | ||
| primaryText="Work" | ||
| secondaryText="Jan 28, 2014" /> | ||
| </List> | ||
| <Divider inset={true} /> | ||
| <List subheader="Files" insetSubheader={true}> | ||
| <ListItem | ||
| leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={Colors.blue500} />} | ||
| rightIcon={<ActionInfo />} | ||
| primaryText="Vacation itinerary" | ||
| secondaryText="Jan 20, 2014" /> | ||
| <ListItem | ||
| leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={Colors.yellow600} />} | ||
| rightIcon={<ActionInfo />} | ||
| primaryText="Kitchen remodel" | ||
| secondaryText="Jan 10, 2014" /> | ||
| </List> | ||
| </MobileTearSheet> | ||
| ); | ||
|
|
||
| export default ListExampleFolder; |
159 changes: 159 additions & 0 deletions
159
docs/src/app/components/pages/components/List/ExampleMessages.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| import React from 'react'; | ||
| import MobileTearSheet from '../../../MobileTearSheet'; | ||
| import List from 'material-ui/lib/lists/list'; | ||
| import ListItem from 'material-ui/lib/lists/list-item'; | ||
| import Divider from 'material-ui/lib/divider'; | ||
| import Avatar from 'material-ui/lib/avatar'; | ||
| import Colors from 'material-ui/lib/styles/colors'; | ||
| import IconButton from 'material-ui/lib/icon-button'; | ||
| import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert'; | ||
| import IconMenu from 'material-ui/lib/menus/icon-menu'; | ||
| import MenuItem from 'material-ui/lib/menus/menu-item'; | ||
|
|
||
| const iconButtonElement = ( | ||
| <IconButton | ||
| touch={true} | ||
| tooltip="more" | ||
| tooltipPosition="bottom-left"> | ||
| <MoreVertIcon color={Colors.grey400} /> | ||
| </IconButton> | ||
| ); | ||
|
|
||
| const rightIconMenu = ( | ||
| <IconMenu iconButtonElement={iconButtonElement}> | ||
| <MenuItem>Reply</MenuItem> | ||
| <MenuItem>Forward</MenuItem> | ||
| <MenuItem>Delete</MenuItem> | ||
| </IconMenu> | ||
| ); | ||
|
|
||
| const ListExampleMessages = () => ( | ||
| <div> | ||
| <MobileTearSheet> | ||
| <List subheader="Today"> | ||
| <ListItem | ||
| leftAvatar={<Avatar src="images/ok-128.jpg" />} | ||
| primaryText="Brunch this weekend?" | ||
| secondaryText={ | ||
| <p> | ||
| <span style={{color: Colors.darkBlack}}>Brendan Lim</span> -- | ||
| I'll be in your neighborhood doing errands this weekend. Do you want to grab brunch? | ||
| </p> | ||
| } | ||
| secondaryTextLines={2} /> | ||
| <Divider inset={true} /> | ||
| <ListItem | ||
| leftAvatar={<Avatar src="images/kolage-128.jpg" />} | ||
| primaryText={ | ||
| <p>Summer BBQ <span style={{color: Colors.lightBlack}}>4</span></p> | ||
| } | ||
| secondaryText={ | ||
| <p> | ||
| <span style={{color: Colors.darkBlack}}>to me, Scott, Jennifer</span> -- | ||
| Wish I could come, but I'm out of town this weekend. | ||
| </p> | ||
| } | ||
| secondaryTextLines={2} /> | ||
| <Divider inset={true} /> | ||
| <ListItem | ||
| leftAvatar={<Avatar src="images/uxceo-128.jpg" />} | ||
| primaryText="Oui oui" | ||
| secondaryText={ | ||
| <p> | ||
| <span style={{color: Colors.darkBlack}}>Grace Ng</span> -- | ||
| Do you have Paris recommendations? Have you ever been? | ||
| </p> | ||
| } | ||
| secondaryTextLines={2} /> | ||
| <Divider inset={true} /> | ||
| <ListItem | ||
| leftAvatar={<Avatar src="images/kerem-128.jpg" />} | ||
| primaryText="Birdthday gift" | ||
| secondaryText={ | ||
| <p> | ||
| <span style={{color: Colors.darkBlack}}>Kerem Suer</span> -- | ||
| Do you have any ideas what we can get Heidi for her birthday? How about a pony? | ||
| </p> | ||
| } | ||
| secondaryTextLines={2} /> | ||
| <Divider inset={true} /> | ||
| <ListItem | ||
| leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />} | ||
| primaryText="Recipe to try" | ||
| secondaryText={ | ||
| <p> | ||
| <span style={{color: Colors.darkBlack}}>Raquel Parrado</span> -- | ||
| We should eat this: grated squash. Corn and tomatillo tacos. | ||
| </p> | ||
| } | ||
| secondaryTextLines={2} /> | ||
| </List> | ||
| </MobileTearSheet> | ||
|
|
||
| <MobileTearSheet> | ||
| <List subheader="Today"> | ||
| <ListItem | ||
| leftAvatar={<Avatar src="images/ok-128.jpg" />} | ||
| rightIconButton={rightIconMenu} | ||
| primaryText="Brendan Lim" | ||
| secondaryText={ | ||
| <p> | ||
| <span style={{color: Colors.darkBlack}}>Brunch this weekend?</span><br/> | ||
| I'll be in your neighborhood doing errands this weekend. Do you want to grab brunch? | ||
| </p> | ||
| } | ||
| secondaryTextLines={2} /> | ||
| <Divider inset={true} /> | ||
| <ListItem | ||
| leftAvatar={<Avatar src="images/kolage-128.jpg" />} | ||
| rightIconButton={rightIconMenu} | ||
| primaryText="me, Scott, Jennifer" | ||
| secondaryText={ | ||
| <p> | ||
| <span style={{color: Colors.darkBlack}}>Summer BBQ</span><br/> | ||
| Wish I could come, but I'm out of town this weekend. | ||
| </p> | ||
| } | ||
| secondaryTextLines={2} /> | ||
| <Divider inset={true} /> | ||
| <ListItem | ||
| leftAvatar={<Avatar src="images/uxceo-128.jpg" />} | ||
| rightIconButton={rightIconMenu} | ||
| primaryText="Grace Ng" | ||
| secondaryText={ | ||
| <p> | ||
| <span style={{color: Colors.darkBlack}}>Oui oui</span><br/> | ||
| Do you have any Paris recs? Have you ever been? | ||
| </p> | ||
| } | ||
| secondaryTextLines={2} /> | ||
| <Divider inset={true} /> | ||
| <ListItem | ||
| leftAvatar={<Avatar src="images/kerem-128.jpg" />} | ||
| rightIconButton={rightIconMenu} | ||
| primaryText="Kerem Suer" | ||
| secondaryText={ | ||
| <p> | ||
| <span style={{color: Colors.darkBlack}}>Birthday gift</span><br/> | ||
| Do you have any ideas what we can get Heidi for her birthday? How about a pony? | ||
| </p> | ||
| } | ||
| secondaryTextLines={2} /> | ||
| <Divider inset={true} /> | ||
| <ListItem | ||
| leftAvatar={<Avatar src="images/raquelromanp-128.jpg" />} | ||
| rightIconButton={rightIconMenu} | ||
| primaryText="Raquel Parrado" | ||
| secondaryText={ | ||
| <p> | ||
| <span style={{color: Colors.darkBlack}}>Recipe to try</span><br/> | ||
| We should eat this: grated squash. Corn and tomatillo tacos. | ||
| </p> | ||
| } | ||
| secondaryTextLines={2} /> | ||
| </List> | ||
| </MobileTearSheet> | ||
| </div> | ||
| ); | ||
|
|
||
| export default ListExampleMessages; |
40 changes: 40 additions & 0 deletions
40
docs/src/app/components/pages/components/List/ExampleNested.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import React from 'react'; | ||
| import MobileTearSheet from '../../../MobileTearSheet'; | ||
| import List from 'material-ui/lib/lists/list'; | ||
| import ListItem from 'material-ui/lib/lists/list-item'; | ||
| import ActionGrade from 'material-ui/lib/svg-icons/action/grade'; | ||
| import ContentInbox from 'material-ui/lib/svg-icons/content/inbox'; | ||
| import ContentDrafts from 'material-ui/lib/svg-icons/content/drafts'; | ||
| import ContentSend from 'material-ui/lib/svg-icons/content/send'; | ||
|
|
||
| const ListExampleNested = () => ( | ||
| <MobileTearSheet> | ||
| <List subheader="Nested List Items"> | ||
| <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 ListExampleNested; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
<CommunicationChatBubble />is repeated 6 times. The page is quite slow, can we create aoutside of the render method?
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.
Edit, http://babeljs.io/docs/plugins/transform-react-constant-elements/ should do it for us, that's not needed 😄.