feat: support demo with ReactRouter

9 years ago · c4b2981e53
7 changed files with 199 additions and 19 deletions
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@ -1,6 +1,7 @@
 # 路由

 - order: 2
+- iframe: true

 和 `react-router@2.x` 进行结合使用。

@ -62,7 +63,11 @@ ReactDOM.render(
 , mountNode);
 ````

-<style>
+
+````css
+#components-breadcrumb-demo-router iframe {
+  height: 165px;
+}
 .demo-nav {
  height: 30px;
  line-height: 30px;
@ -76,4 +81,4 @@ ReactDOM.render(
 .app-list {
  margin-top: 15px;
 }
-</style>
+````
--- a/components/queue-anim/demo/router.md
+++ b/components/queue-anim/demo/router.md
@ -1,6 +1,7 @@
 # Router 默认进出场

 - order: 7
+- iframe: true

 router 组合的进场与出场动画。

@ -131,6 +132,9 @@ ReactDOM.render((
 ````

 ````css
+#components-queue-anim-demo-router iframe {
+  height: 260px;
+}
 #components-queue-anim-demo-router .demo-router-wrap {
  position: relative;
  width: 100%;
--- a/package.json
+++ b/package.json
@ -71,7 +71,7 @@
    "warning": "~2.1.0"
  },
  "devDependencies": {
-    "antd-md-loader": "0.1.0-beta.5",
+    "antd-md-loader": "0.1.0-beta.7",
    "atool-build": "^0.5.0",
    "babel-cli": "^6.2.0",
    "babel-core": "^6.2.1",
--- a/site/common/styles/demo.less
+++ b/site/common/styles/demo.less
@ -64,6 +64,11 @@
  padding: 42px 20px 50px;
 }

+.code-box iframe {
+  width: 100%;
+  border: 0;
+}
+
 .code-box-meta {
  position: relative;
  border-radius: 0 0 6px 6px;
@ -164,4 +169,158 @@
 .code-box pre code {
  border: none;
  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: "";
 }
--- a/site/component/ComponentDoc/index.jsx
+++ b/site/component/ComponentDoc/index.jsx
@ -1,8 +1,10 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { Link } from 'react-router';
 import classNames from 'classnames';
-import { Row, Col, Icon } from '../../../';
+import antd, { Row, Col, Icon } from '../../../';
 import Demo from '../Demo';
+import BrowserDemo from '../BrowserDemo';
 import * as utils from '../utils';
 import demosList from '../../../_site/data/demos-list';

@ -27,22 +29,23 @@ export default class ComponentDoc extends React.Component {
    const demos = demosList[meta.fileName] || [];
    const expand = this.state.expandAll;

-    const parentId = meta.fileName.split('/').slice(0, 2).join('-');
    const isSingleCol = meta.cols === '1';
    const leftChildren = [];
    const rightChildren = [];
    demos.sort((a, b) => {
-      return a.order - b.order;
+      return parseInt(a.meta.order, 10) - parseInt(b.meta.order, 10);
    }).forEach((demoData, index) => {
      if (index % 2 === 0 || isSingleCol) {
        leftChildren.push(
            <Demo {...demoData} key={index}
-              expand={expand} parentId={parentId} pathname={location.pathname} />
+              preview={demoData.preview(React, ReactDOM, antd, BrowserDemo)}
+              expand={expand} pathname={location.pathname} />
        );
      } else {
        rightChildren.push(
            <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) => {
      return (
        <li key={demo.id}>
-          <Link to={{ pathname: location.pathname, query: { scrollTo: `${parentId}-${demo.id}` } }}>
-            { demo.title }
+          <Link to={{ pathname: location.pathname, query: { scrollTo: `${demo.id}` } }}>
+            { demo.meta.chinese || demo.meta.english }
          </Link>
        </li>
      );
--- a/site/component/Demo/index.jsx
+++ b/site/component/Demo/index.jsx
@ -1,8 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Link } from 'react-router';
-import antd, { Collapse } from '../../../';
-import BrowserDemo from '../BrowserDemo';
+import { Collapse } from '../../../';
 import * as utils from '../utils';
 import hljs from 'highlight.js';

@ -23,16 +21,19 @@ export default class Demo extends React.Component {
  }

  render() {
-    const { id, parentId, preview, title,
-            intro, code, style, expand, pathname } = this.props;
-    const demoId = `${parentId}-${id}`;
+    const { id, meta, intro, code, preview, style, src,
+            expand, pathname } = this.props;
    const introChildren = intro.map(utils.objectToComponent.bind(null, pathname));
    const highlightedCode = hljs.highlight('javascript', code).value;

    return (
-      <section className="code-box" id={demoId}>
+      <section className="code-box" id={id}>
        <section className="code-box-demo">
-        { preview(React, ReactDOM, antd, BrowserDemo) }
+          {
+            meta.iframe === 'true' ?
+              <iframe src={src} /> :
+              preview
+          }
          {
            !!style ?
              <style dangerouslySetInnerHTML={{ __html: style }} /> :
@ -41,7 +42,9 @@ export default class Demo extends React.Component {
        </section>
        <section className="code-box-meta markdown">
          <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>
          <Collapse activeKey={expand ? 'code' : this.state.activeKey}
            onChange={this.handleChange.bind(this)}>
--- a/site/entry/index.jsx
+++ b/site/entry/index.jsx
@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route, IndexRoute, hashHistory } from 'react-router';
+import antd from '../../';
 import * as utils from './utils';
 import '../common/lib';
 import App from '../component/App';
@ -11,6 +12,11 @@ import reactComponents from '../../_site/data/react-components';
 import spec from '../../_site/data/spec';
 import resource from '../../_site/data/resource';

+// Expose React, ReactDOM
+window.react = React;
+window['react-dom'] = ReactDOM;
+window.antd = antd;
+
 function addFileNameToMeta(data) {
  Object.keys(data).forEach((key) => {
    data[key].meta.fileName = key;