Browse Source

feat: support demo with ReactRouter

pull/1093/head
Benjy Cui 9 years ago
parent
commit
c4b2981e53
  1. 9
      components/breadcrumb/demo/router.md
  2. 4
      components/queue-anim/demo/router.md
  3. 2
      package.json
  4. 159
      site/common/styles/demo.less
  5. 17
      site/component/ComponentDoc/index.jsx
  6. 21
      site/component/Demo/index.jsx
  7. 6
      site/entry/index.jsx

9
components/breadcrumb/demo/router.md

@ -1,6 +1,7 @@
# 路由 # 路由
- order: 2 - order: 2
- iframe: true
`react-router@2.x` 进行结合使用。 `react-router@2.x` 进行结合使用。
@ -62,7 +63,11 @@ ReactDOM.render(
, mountNode); , mountNode);
```` ````
<style>
````css
#components-breadcrumb-demo-router iframe {
height: 165px;
}
.demo-nav { .demo-nav {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
@ -76,4 +81,4 @@ ReactDOM.render(
.app-list { .app-list {
margin-top: 15px; margin-top: 15px;
} }
</style> ````

4
components/queue-anim/demo/router.md

@ -1,6 +1,7 @@
# Router 默认进出场 # Router 默认进出场
- order: 7 - order: 7
- iframe: true
router 组合的进场与出场动画。 router 组合的进场与出场动画。
@ -131,6 +132,9 @@ ReactDOM.render((
```` ````
````css ````css
#components-queue-anim-demo-router iframe {
height: 260px;
}
#components-queue-anim-demo-router .demo-router-wrap { #components-queue-anim-demo-router .demo-router-wrap {
position: relative; position: relative;
width: 100%; width: 100%;

2
package.json

@ -71,7 +71,7 @@
"warning": "~2.1.0" "warning": "~2.1.0"
}, },
"devDependencies": { "devDependencies": {
"antd-md-loader": "0.1.0-beta.5", "antd-md-loader": "0.1.0-beta.7",
"atool-build": "^0.5.0", "atool-build": "^0.5.0",
"babel-cli": "^6.2.0", "babel-cli": "^6.2.0",
"babel-core": "^6.2.1", "babel-core": "^6.2.1",

159
site/common/styles/demo.less

@ -64,6 +64,11 @@
padding: 42px 20px 50px; padding: 42px 20px 50px;
} }
.code-box iframe {
width: 100%;
border: 0;
}
.code-box-meta { .code-box-meta {
position: relative; position: relative;
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
@ -164,4 +169,158 @@
.code-box pre code { .code-box pre code {
border: none; border: none;
background: #fff; background: #fff;
}
.code-box-demo .demo-header {
width: 100%;
background: #ebedee;
height: 30px;
}
.code-box-demo .demo-header ul {
float: right;
margin-right: 5px;
}
.code-box-demo .demo-header ul li {
width: 50px;
height: 30px;
float: left;
background: #e4e4e4;
margin-left: 5px;
}
.code-box-demo .demo-header ul li:before {
margin: 10px auto;
width: 20px;
height: 10px;
background: #ebeded;
}
.code-box-demo .demo-header .logo {
float: left;
margin: 0px auto 0 10px;
line-height: 32px;
}
.code-box-demo .demo-header .logo img{
margin:auto
}
.code-box-demo .demo-header .logo span {
display: block;
float: right;
}
.code-box-demo .demo-content {
width: 80%;
margin: 10px auto;
}
.code-box-demo .demo-content .demo-title {
text-align:left;
background: #a4a4a4;
width: 40%;
height: 20px;
line-height: 20px;
color: #ebeded;
text-indent:10px
}
.code-box-demo .demo-content .demo-listBox {
margin-top: 10px;
}
.code-box-demo .demo-content .demo-listBox .demo-list .title {
height: 30px;
background: #cacaca;
overflow: hidden;
}
.code-box-demo .demo-content .demo-listBox .demo-list .title:before,.code-box-demo .demo-content .demo-listBox .demo-list .title:after{
width: 30%;
height: 5px;
background: #ebeded;
float:left;
margin:12px 35px 0;
}
.code-box-demo .demo-content .demo-listBox .demo-list .title:after{
width:15%;
float:right;
margin:12px 10px 0;
}
.code-box-demo .demo-content .demo-listBox .demo-list ul li {
height: 25px;
background: #ebeded;
border-bottom: 1px solid #cacaca;
overflow: hidden;
padding: 5px 15px;
}
.code-box-demo .demo-content .demo-listBox .demo-list ul li:before {
width: 10px;
height: 5px;
background: #cacaca;
float: left;
margin-top:4px
}
.code-box-demo .demo-content .demo-listBox .demo-list ul li:after {
width: 50%;
height: 5px;
background: #cacaca;
float: left;
margin-left: 10px;
margin-top: 4px;
}
.code-box-demo .demo-content .demo-kp {
margin: 10px auto;
}
.code-box-demo .demo-content .demo-kp ul li {
display: inline-block;
width: 32%;
height: 40px;
background: #cacaca;
color: #ebeded;
text-align: left;
padding: 10px;
margin-right: calc(2%);
}
.code-box-demo .demo-content .demo-kp ul li:last-child {
margin-right: 0%;
}
.code-box-demo .demo-content .demo-kp ul li:after {
width: 60%;
height: 5px;
background: #ebeded;
float: left;
margin-top: 7px;
}
.code-box-demo .demo-content .demo-kp ul li:before {
background: #ebeded;
float: left;
width: 15px;
height: 15px;
margin:2px 10% 0 0;
}
.code-box-demo .demo-footer {
margin-top: 10px;
background: #cacaca;
height: 40px;
float: left;
width: 100%;
display: table;
}
.code-box-demo .demo-footer:before {
width: 60%;
height: 5px;
background: #ededed;
margin: 10px auto 0;
}
.code-box-demo .demo-footer:after {
width: 30%;
height: 5px;
background: #ededed;
margin: 5px auto;
}
.code-box-demo .demo-header ul li:before,
.code-box-demo .demo-content .demo-kp ul li:before,
.code-box-demo .demo-content .demo-kp ul li:after,
.code-box-demo .demo-content .demo-listBox .demo-list .title:before,
.code-box-demo .demo-content .demo-listBox .demo-list .title:after,
.code-box-demo .demo-content .demo-listBox .demo-list ul li:before,
.code-box-demo .demo-content .demo-listBox .demo-list ul li:after,
.code-box-demo .demo-footer:before,
.code-box-demo .demo-footer:after {
display: block;
content: "";
} }

17
site/component/ComponentDoc/index.jsx

@ -1,8 +1,10 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router'; import { Link } from 'react-router';
import classNames from 'classnames'; import classNames from 'classnames';
import { Row, Col, Icon } from '../../../'; import antd, { Row, Col, Icon } from '../../../';
import Demo from '../Demo'; import Demo from '../Demo';
import BrowserDemo from '../BrowserDemo';
import * as utils from '../utils'; import * as utils from '../utils';
import demosList from '../../../_site/data/demos-list'; import demosList from '../../../_site/data/demos-list';
@ -27,22 +29,23 @@ export default class ComponentDoc extends React.Component {
const demos = demosList[meta.fileName] || []; const demos = demosList[meta.fileName] || [];
const expand = this.state.expandAll; const expand = this.state.expandAll;
const parentId = meta.fileName.split('/').slice(0, 2).join('-');
const isSingleCol = meta.cols === '1'; const isSingleCol = meta.cols === '1';
const leftChildren = []; const leftChildren = [];
const rightChildren = []; const rightChildren = [];
demos.sort((a, b) => { demos.sort((a, b) => {
return a.order - b.order; return parseInt(a.meta.order, 10) - parseInt(b.meta.order, 10);
}).forEach((demoData, index) => { }).forEach((demoData, index) => {
if (index % 2 === 0 || isSingleCol) { if (index % 2 === 0 || isSingleCol) {
leftChildren.push( leftChildren.push(
<Demo {...demoData} key={index} <Demo {...demoData} key={index}
expand={expand} parentId={parentId} pathname={location.pathname} /> preview={demoData.preview(React, ReactDOM, antd, BrowserDemo)}
expand={expand} pathname={location.pathname} />
); );
} else { } else {
rightChildren.push( rightChildren.push(
<Demo {...demoData} key={index} <Demo {...demoData} key={index}
expand={expand} parentId={parentId} pathname={location.pathname} /> preview={demoData.preview(React, ReactDOM, antd, BrowserDemo)}
expand={expand} pathname={location.pathname} />
); );
} }
}); });
@ -54,8 +57,8 @@ export default class ComponentDoc extends React.Component {
const jumper = demos.map((demo) => { const jumper = demos.map((demo) => {
return ( return (
<li key={demo.id}> <li key={demo.id}>
<Link to={{ pathname: location.pathname, query: { scrollTo: `${parentId}-${demo.id}` } }}> <Link to={{ pathname: location.pathname, query: { scrollTo: `${demo.id}` } }}>
{ demo.title } { demo.meta.chinese || demo.meta.english }
</Link> </Link>
</li> </li>
); );

21
site/component/Demo/index.jsx

@ -1,8 +1,6 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router'; import { Link } from 'react-router';
import antd, { Collapse } from '../../../'; import { Collapse } from '../../../';
import BrowserDemo from '../BrowserDemo';
import * as utils from '../utils'; import * as utils from '../utils';
import hljs from 'highlight.js'; import hljs from 'highlight.js';
@ -23,16 +21,19 @@ export default class Demo extends React.Component {
} }
render() { render() {
const { id, parentId, preview, title, const { id, meta, intro, code, preview, style, src,
intro, code, style, expand, pathname } = this.props; expand, pathname } = this.props;
const demoId = `${parentId}-${id}`;
const introChildren = intro.map(utils.objectToComponent.bind(null, pathname)); const introChildren = intro.map(utils.objectToComponent.bind(null, pathname));
const highlightedCode = hljs.highlight('javascript', code).value; const highlightedCode = hljs.highlight('javascript', code).value;
return ( return (
<section className="code-box" id={demoId}> <section className="code-box" id={id}>
<section className="code-box-demo"> <section className="code-box-demo">
{ preview(React, ReactDOM, antd, BrowserDemo) } {
meta.iframe === 'true' ?
<iframe src={src} /> :
preview
}
{ {
!!style ? !!style ?
<style dangerouslySetInnerHTML={{ __html: style }} /> : <style dangerouslySetInnerHTML={{ __html: style }} /> :
@ -41,7 +42,9 @@ export default class Demo extends React.Component {
</section> </section>
<section className="code-box-meta markdown"> <section className="code-box-meta markdown">
<div className="code-box-title"> <div className="code-box-title">
<Link to={{ pathname, query: { scrollTo: demoId } }}>{ title }</Link> <Link to={{ pathname, query: { scrollTo: id } }}>
{ meta.chinese || meta.english }
</Link>
</div> </div>
<Collapse activeKey={expand ? 'code' : this.state.activeKey} <Collapse activeKey={expand ? 'code' : this.state.activeKey}
onChange={this.handleChange.bind(this)}> onChange={this.handleChange.bind(this)}>

6
site/entry/index.jsx

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router'; import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import antd from '../../';
import * as utils from './utils'; import * as utils from './utils';
import '../common/lib'; import '../common/lib';
import App from '../component/App'; import App from '../component/App';
@ -11,6 +12,11 @@ import reactComponents from '../../_site/data/react-components';
import spec from '../../_site/data/spec'; import spec from '../../_site/data/spec';
import resource from '../../_site/data/resource'; import resource from '../../_site/data/resource';
// Expose React, ReactDOM
window.react = React;
window['react-dom'] = ReactDOM;
window.antd = antd;
function addFileNameToMeta(data) { function addFileNameToMeta(data) {
Object.keys(data).forEach((key) => { Object.keys(data).forEach((key) => {
data[key].meta.fileName = key; data[key].meta.fileName = key;

Loading…
Cancel
Save