2015-10-28 03:49:22 +03:00
|
|
|
import React from 'react';
|
2015-10-31 01:03:00 +03:00
|
|
|
import ReactDOM from 'react-dom';
|
2015-10-30 22:30:56 +03:00
|
|
|
import { Button } from 'react-toolbox';
|
|
|
|
import Appbar from '../../../components/appbar';
|
|
|
|
import Markdown from '../../../components/markdown';
|
|
|
|
import Playground from './components/playground';
|
|
|
|
import MainNavigation from './components/navigation';
|
|
|
|
import BaseDocs from './modules/components.md';
|
|
|
|
import components from './modules/components.js';
|
2015-10-28 03:49:22 +03:00
|
|
|
import style from './style';
|
|
|
|
|
2015-10-31 01:03:00 +03:00
|
|
|
const LoadExampleButton = (props) => {
|
|
|
|
return (
|
|
|
|
<Button
|
2015-11-17 23:49:27 +03:00
|
|
|
raised
|
2015-10-31 01:03:00 +03:00
|
|
|
accent
|
|
|
|
icon='code'
|
|
|
|
label='Load in playground'
|
|
|
|
onClick={props.onClick}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2015-10-30 10:35:09 +03:00
|
|
|
class Main extends React.Component {
|
2015-11-01 23:38:32 +03:00
|
|
|
LOAD_EXAMPLE_CLASS = 'js-load-in-playground playground-button';
|
2015-10-31 01:03:00 +03:00
|
|
|
|
2015-10-30 10:35:09 +03:00
|
|
|
state = {
|
|
|
|
playground: false
|
|
|
|
};
|
|
|
|
|
2015-10-31 01:03:00 +03:00
|
|
|
componentDidMount () {
|
|
|
|
this.renderExampleLoaders();
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate () {
|
|
|
|
this.renderExampleLoaders();
|
|
|
|
}
|
|
|
|
|
|
|
|
handlePlayGroundClick = () => {
|
|
|
|
this.setState({ playground: !this.state.playground});
|
|
|
|
};
|
|
|
|
|
|
|
|
handlePlaygroundLoad = (code) => {
|
|
|
|
this.refs.playground.loadCode(code);
|
2015-10-31 04:09:11 +03:00
|
|
|
this.setState({playground: true});
|
2015-10-31 01:03:00 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
renderExampleLoaders () {
|
|
|
|
const examples = document.getElementsByClassName(this.LOAD_EXAMPLE_CLASS);
|
|
|
|
Array.prototype.forEach.call(examples, (exampleNode, idx) => {
|
|
|
|
const exampleCode = components[this.props.params.component].examples[idx];
|
|
|
|
ReactDOM.render(
|
|
|
|
<LoadExampleButton onClick={this.handlePlaygroundLoad.bind(this, exampleCode)} />,
|
|
|
|
exampleNode
|
|
|
|
);
|
|
|
|
});
|
2015-10-30 22:30:56 +03:00
|
|
|
}
|
|
|
|
|
2015-10-31 01:03:00 +03:00
|
|
|
resolveMarkdown () {
|
|
|
|
const PLACEHOLDER = /<!-- example -->/g;
|
|
|
|
const NODE = `<span class='${style['load-button']} ${this.LOAD_EXAMPLE_CLASS}'></span>`;
|
2015-10-30 22:30:56 +03:00
|
|
|
if (this.props.params.component) {
|
2015-10-31 01:03:00 +03:00
|
|
|
return components[this.props.params.component].docs.replace(PLACEHOLDER, NODE);
|
2015-10-30 22:30:56 +03:00
|
|
|
} else {
|
|
|
|
return BaseDocs;
|
|
|
|
}
|
2015-10-30 10:35:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2015-10-30 22:30:56 +03:00
|
|
|
let className = style.root;
|
2015-10-31 01:03:00 +03:00
|
|
|
const docs = this.resolveMarkdown();
|
|
|
|
if (this.state.playground) className += ` ${style['with-playground']}`;
|
2015-10-30 22:30:56 +03:00
|
|
|
|
2015-10-30 10:35:09 +03:00
|
|
|
return (
|
2015-10-30 22:30:56 +03:00
|
|
|
<div className={className}>
|
|
|
|
<Appbar className={style.appbar}/>
|
2015-10-30 10:35:09 +03:00
|
|
|
<Button
|
|
|
|
accent
|
2015-11-17 23:49:27 +03:00
|
|
|
floating
|
2015-10-30 22:30:56 +03:00
|
|
|
className={style['playground-button']}
|
2015-10-30 10:35:09 +03:00
|
|
|
icon={this.state.playground ? 'close' : 'code'}
|
2015-10-31 01:03:00 +03:00
|
|
|
onClick={this.handlePlayGroundClick}
|
2015-10-30 10:35:09 +03:00
|
|
|
/>
|
2015-10-30 22:30:56 +03:00
|
|
|
<MainNavigation className={style.navigation} />
|
|
|
|
<Markdown className={style.documentation} markdown={docs}/>
|
2015-10-31 01:03:00 +03:00
|
|
|
<Playground ref='playground' className={style.playground} />
|
2015-10-30 10:35:09 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2015-10-28 03:49:22 +03:00
|
|
|
export default Main;
|