-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Doc Enhancement] Introduce MarkdownElement #2224
- Loading branch information
Frank Fischer
committed
Dec 3, 2015
1 parent
03cdf02
commit a8d45b3
Showing
9 changed files
with
877 additions
and
118 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
const React = require('react'); | ||
let {Paper} = require('material-ui'); | ||
require('./mui-github-markdown.css'); | ||
import marked from 'marked'; | ||
|
||
const MarkdownElement = React.createClass({ | ||
propTypes: { | ||
text: React.PropTypes.string.isRequired, | ||
}, | ||
getDefaultProps() { | ||
return { | ||
text: '', | ||
}; | ||
}, | ||
|
||
|
||
componentWillMount() { | ||
marked.setOptions({ | ||
gfm: true, | ||
tables: true, | ||
breaks: false, | ||
pedantic: false, | ||
sanitize: false, | ||
smartLists: true, | ||
smartypants: false, | ||
highlight: function(code, lang) { | ||
return require('highlight.js').highlight(lang, code).value; | ||
}, | ||
}); | ||
}, | ||
|
||
render() { | ||
const {text} = this.props; | ||
const html = marked(text || ''); | ||
|
||
/* eslint-disable */ | ||
return ( | ||
<Paper style={{marginBottom: '22px', padding: '0 24px 24px 24px'}}> | ||
<div className="markdown-body"> | ||
<div dangerouslySetInnerHTML={{__html: html}} /> | ||
</div> | ||
</Paper> | ||
); | ||
/* eslint-enable */ | ||
}, | ||
}); | ||
|
||
module.exports = MarkdownElement; |
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,11 @@ | ||
## Lists | ||
|
||
**Import statements** | ||
|
||
```javascript | ||
import List from 'material-ui/lib/lists/list'; | ||
import ListDivider from 'material-ui/lib/lists/list-divider'; | ||
import ListItem from 'material-ui/lib/lists/list-item'; | ||
``` | ||
|
||
Have a look at `material-ui/lib/index.js` for further import statements. |
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,55 @@ | ||
## Selectable Lists | ||
|
||
Basically three steps are needed: | ||
* enhance `<List>` with HOC | ||
* decide where to put state | ||
* implement and set valueLink | ||
|
||
### Enhance List | ||
|
||
Wrapping the <code><List></code> component with the higher order component "SelectableEnhance" enables | ||
the clicked <code><ListItem></code> to be highlighted. | ||
|
||
```javascript | ||
import { SelectableContainerEnhance } from 'material-ui/lib/hoc/selectable-enhance'; | ||
. | ||
. | ||
. | ||
var SelectableList = SelectableContainerEnhance(List); | ||
``` | ||
|
||
### Where to put state | ||
|
||
If this component is used in conjunction with flux or redux this is a no-brainer. The callback-handler | ||
just has to update the store. Otherwise the state can be held within e.g the parent, but it is to be to | ||
considered that each time a `<ListItem>` is clicked, the state will update and the parent - including it's | ||
children - will rerender. | ||
|
||
A possible solution for this is to use another hoc. An example can be found in the sourcecode | ||
of `docs/src/app/components/pages/components/lists.jsx`. | ||
|
||
### The valueLink | ||
|
||
The prop 'valueLink' of <code><List></code> has to be set, to make the highlighting controllable: | ||
|
||
```xml | ||
<List valueLink={{ | ||
value: this.state.selectedIndex, | ||
requestChange: this.handleUpdateSelectedIndex}} /> | ||
``` | ||
|
||
A sample implementation might look like this. | ||
|
||
```javascript | ||
getInitialState() { | ||
return { selectedIndex: 1 }; | ||
}, | ||
handleUpdateSelectedIndex(e,index) { | ||
this.setState({ | ||
selectedIndex: index, | ||
}); | ||
``` | ||
### Adjust the `<ListItem>` | ||
The prop "value" on each ListItem has to be set. This makes the item addressable for the callback. |
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,68 @@ | ||
## List Props | ||
|
||
### insetSubheader | ||
|
||
Type: `bool` | ||
Default: `false` | ||
|
||
If true, the subheader will be indented by 72px. | ||
|
||
### selectedItemStyle | ||
Type: `object` | ||
`optional` | ||
|
||
Override the choosen inline-styles to indicate a <ListItem> is highlighted. You can set e.g. the background color here like this way: {{backgroundColor: #da4e49}}. | ||
|
||
|
||
## List Props | ||
|
||
<dl> | ||
<dt>insetSubheader</dt> | ||
<dd><b>type: bool</b> <i>default: false</i></dd> | ||
<dd>If true, the subheader will be indented by 72px.</dd> | ||
|
||
<dt> | ||
insetSubheader | ||
<span style="font-style: normal; font-weight: normal; padding-left:20px; color:rgba(0, 0, 0, 0.54)"> | ||
bool | ||
</span> | ||
<span style="padding-left: 20px; font-weight: normal"> | ||
default: false | ||
</span> | ||
</dt> | ||
<dd>If true, the subheader will be indented by 72px.</dd> | ||
|
||
<dt>selectedItemStyle</dt> | ||
<dd><b>type: object</b> <i>optional</i></dd> | ||
<dd> | ||
Override the choosen inline-styles to indicate a <ListItem> is | ||
highlighted. You can set e.g. the background color here like | ||
this way: `{{backgroundColor: #da4e49}}`. | ||
</dd> | ||
|
||
<dt>style</dt> | ||
<dd><b>type: object</b> <i>optional</i></dd> | ||
<dd> | ||
Override the inline-styles of the list's root element. | ||
</dd> | ||
|
||
<dt>subheader</dt> | ||
<dd><b>type: node</b> <i>optional</i></dd> | ||
<dd> | ||
The subheader string that will be displayed at the top of the list. | ||
</dd> | ||
|
||
<dt>subheaderStyle</dt> | ||
<dd><b>type: object</b> <i>optional</i></dd> | ||
<dd> | ||
The style object to override subheader styles. | ||
</dd> | ||
|
||
<dt>valueLink</dt> | ||
<dd><b>type: valueLink</b> <i>optional</i> (only available if HOC SelectableContainerEnhance is used)</dd> | ||
<dd> | ||
Makes List controllable. Highlights the ListItem whose index prop | ||
matches this `valueLink.value`. `valueLink.requestChange` represents | ||
a callback function to change that value (e.g. in state). | ||
</dd> | ||
</dl> |
Oops, something went wrong.