Skip to content

Commit

Permalink
[Doc Enhancement] Introduce MarkdownElement #2224
Browse files Browse the repository at this point in the history
  • Loading branch information
Frank Fischer committed Dec 3, 2015
1 parent 03cdf02 commit a8d45b3
Show file tree
Hide file tree
Showing 9 changed files with 877 additions and 118 deletions.
6 changes: 5 additions & 1 deletion docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,17 @@
},
"dependencies": {
"codemirror": "^5.5.0",
"css-loader": "^0.23.0",
"highlight.js": "^8.9.1",
"history": "^1.11.1",
"intl": "^1.0.1",
"marked": "^0.3.5",
"react-addons-perf": "^0.14.0",
"react-dom": "^0.14.0",
"react-motion": "^0.3.1",
"react-router": "^1.0.0-rc1",
"react-swipeable-views": "^0.3.0"
"react-swipeable-views": "^0.3.0",
"style-loader": "0.13.0"
},
"devDependencies": {
"raw-loader": "^0.5.1",
Expand Down
48 changes: 48 additions & 0 deletions docs/src/app/components/markdown-element.jsx
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;
11 changes: 11 additions & 0 deletions docs/src/app/components/markdown/lists/intro.md
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.
55 changes: 55 additions & 0 deletions docs/src/app/components/markdown/lists/main.md
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>&lt;List&gt;</code> component with the higher order component "SelectableEnhance" enables
the clicked <code>&lt;ListItem&gt;</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>&lt;List&gt;</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.
68 changes: 68 additions & 0 deletions docs/src/app/components/markdown/lists/props.md
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>
Loading

0 comments on commit a8d45b3

Please sign in to comment.