-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into cursor-styling-for-disabled-components
- Loading branch information
Showing
1,017 changed files
with
1,798 additions
and
124 deletions.
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
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
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
61 changes: 61 additions & 0 deletions
61
docs/src/app/components/pages/components/Chip/ExampleArray.js
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,61 @@ | ||
| import React from 'react'; | ||
| import Chip from 'material-ui/Chip'; | ||
|
|
||
| /** | ||
| * An example of rendering multiple Chips from an array of values. Deleting a chip removes it from the array. | ||
| * Note that since no `onTouchTap` property is defined, the Chip can be focused, but does not gain depth | ||
| * while clicked or touched. | ||
| */ | ||
| export default class ChipExampleArray extends React.Component { | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| this.state = {chipData: [ | ||
| {key: 0, label: 'Angular'}, | ||
| {key: 1, label: 'JQuery'}, | ||
| {key: 2, label: 'Polymer'}, | ||
| {key: 3, label: 'ReactJS'}, | ||
| ]}; | ||
| this.styles = { | ||
| chip: { | ||
| margin: 4, | ||
| }, | ||
| wrapper: { | ||
| display: 'flex', | ||
| flexWrap: 'wrap', | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| handleRequestDelete = (key) => { | ||
| if (key === 3) { | ||
| alert('Why would you want to delete React?! :)'); | ||
| return; | ||
| } | ||
|
|
||
| this.chipData = this.state.chipData; | ||
| const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key); | ||
| this.chipData.splice(chipToDelete, 1); | ||
| this.setState({chipData: this.chipData}); | ||
| }; | ||
|
|
||
| renderChip(data) { | ||
| return ( | ||
| <Chip | ||
| key={data.key} | ||
| onRequestDelete={() => this.handleRequestDelete(data.key)} | ||
| style={this.styles.chip} | ||
| > | ||
| {data.label} | ||
| </Chip> | ||
| ); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div style={this.styles.wrapper}> | ||
| {this.state.chipData.map(this.renderChip, this)} | ||
| </div> | ||
| ); | ||
| } | ||
| } |
105 changes: 105 additions & 0 deletions
105
docs/src/app/components/pages/components/Chip/ExampleSimple.js
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,105 @@ | ||
| import React from 'react'; | ||
| import Avatar from 'material-ui/Avatar'; | ||
| import Chip from 'material-ui/Chip'; | ||
| import FontIcon from 'material-ui/FontIcon'; | ||
| import SvgIconFace from 'material-ui/svg-icons/action/face'; | ||
| import {blue300, indigo900} from 'material-ui/styles/colors'; | ||
|
|
||
| const styles = { | ||
| chip: { | ||
| margin: 4, | ||
| }, | ||
| wrapper: { | ||
| display: 'flex', | ||
| flexWrap: 'wrap', | ||
| }, | ||
| }; | ||
|
|
||
| function handleRequestDelete() { | ||
| alert('You clicked the delete button.'); | ||
| } | ||
|
|
||
| function handleTouchTap() { | ||
| alert('You clicked the Chip.'); | ||
| } | ||
|
|
||
| /** | ||
| * Examples of Chips, using an image [Avatar](/#/components/font-icon), [Font Icon](/#/components/font-icon) Avatar, | ||
| * [SVG Icon](/#/components/svg-icon) Avatar, "Letter" (string) Avatar, and with custom colors. | ||
| * | ||
| * Chips with the `onRequestDelete` property defined will display a delete icon. | ||
| */ | ||
| export default class ChipExampleSimple extends React.Component { | ||
|
|
||
| render() { | ||
| return ( | ||
| <div style={styles.wrapper}> | ||
|
|
||
| <Chip | ||
| style={styles.chip} | ||
| > | ||
| Text Chip | ||
| </Chip> | ||
|
|
||
| <Chip | ||
| onRequestDelete={handleRequestDelete} | ||
| onTouchTap={handleTouchTap} | ||
| style={styles.chip} | ||
| > | ||
| Deletable Text Chip | ||
| </Chip> | ||
|
|
||
| <Chip | ||
| onTouchTap={handleTouchTap} | ||
| style={styles.chip} | ||
| > | ||
| <Avatar src="images/uxceo-128.jpg" /> | ||
| Image Avatar Chip | ||
| </Chip> | ||
|
|
||
| <Chip | ||
| onRequestDelete={handleRequestDelete} | ||
| onTouchTap={handleTouchTap} | ||
| style={styles.chip} | ||
| > | ||
| <Avatar src="images/ok-128.jpg" /> | ||
| Deletable Avatar Chip | ||
| </Chip> | ||
|
|
||
| <Chip | ||
| onTouchTap={handleTouchTap} | ||
| style={styles.chip} | ||
| > | ||
| <Avatar icon={<FontIcon className="material-icons">perm_identity</FontIcon>} /> | ||
| FontIcon Avatar Chip | ||
| </Chip> | ||
|
|
||
| <Chip | ||
| onRequestDelete={handleRequestDelete} | ||
| onTouchTap={handleTouchTap} | ||
| style={styles.chip} | ||
| > | ||
| <Avatar color="#444" icon={<SvgIconFace />} /> | ||
| SvgIcon Avatar Chip | ||
| </Chip> | ||
|
|
||
| <Chip onTouchTap={handleTouchTap} style={styles.chip}> | ||
| <Avatar size={32}>A</Avatar> | ||
| Text Avatar Chip | ||
| </Chip> | ||
|
|
||
| <Chip | ||
| backgroundColor={blue300} | ||
| onRequestDelete={handleRequestDelete} | ||
| onTouchTap={handleTouchTap} | ||
| style={styles.chip} | ||
| > | ||
| <Avatar size={32} color={blue300} backgroundColor={indigo900}> | ||
| MB | ||
| </Avatar> | ||
| Colored Chip | ||
| </Chip> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
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,35 @@ | ||
| import React from 'react'; | ||
| import Title from 'react-title-component'; | ||
|
|
||
| import CodeExample from '../../../CodeExample'; | ||
| import PropTypeDescription from '../../../PropTypeDescription'; | ||
| import MarkdownElement from '../../../MarkdownElement'; | ||
|
|
||
| import chipReadmeText from './README'; | ||
| import ChipExampleSimple from './ExampleSimple'; | ||
| import chipExampleSimpleCode from '!raw!./ExampleSimple'; | ||
| import ChipExampleArray from './ExampleArray'; | ||
| import chipExampleArrayCode from '!raw!./ExampleArray'; | ||
| import chipCode from '!raw!material-ui/Chip/Chip'; | ||
|
|
||
| const ChipPage = () => ( | ||
| <div> | ||
| <Title render={(previousTitle) => `Chip - ${previousTitle}`} /> | ||
| <MarkdownElement text={chipReadmeText} /> | ||
| <CodeExample | ||
| code={chipExampleSimpleCode} | ||
| title="Example Chips" | ||
| > | ||
| <ChipExampleSimple /> | ||
| </CodeExample> | ||
| <CodeExample | ||
| code={chipExampleArrayCode} | ||
| title="Example array" | ||
| > | ||
| <ChipExampleArray /> | ||
| </CodeExample> | ||
| <PropTypeDescription code={chipCode} /> | ||
| </div> | ||
| ); | ||
|
|
||
| export default ChipPage; |
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,10 @@ | ||
| ## Chip | ||
|
|
||
| [Chips](https://www.google.com/design/spec/components/chips.html) | ||
| represent complex entities in small blocks, such as a contact. | ||
|
|
||
| While included here as a standalone component, the most common use will | ||
| be in some form of input, so some of the behaviour demonstrated is not | ||
| shown in context. | ||
|
|
||
| ### Examples |
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
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
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
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
Oops, something went wrong.