diff --git a/.gitignore b/.gitignore index 2540e09903..f22afe06b9 100644 --- a/.gitignore +++ b/.gitignore @@ -23,6 +23,6 @@ nohup.out _site _data dist -/lib +lib elasticsearch-* config/base.yaml diff --git a/404.html b/404.html new file mode 100644 index 0000000000..9f70f7e6a0 --- /dev/null +++ b/404.html @@ -0,0 +1,9 @@ + diff --git a/components/icon/index.md b/components/icon/index.md index 033b12f90e..2dc7a75b52 100644 --- a/components/icon/index.md +++ b/components/icon/index.md @@ -40,7 +40,7 @@ english: Icon ### 一. 方向性图标 ```__react -import IconSet from 'site/theme/template/IconSet'; +import IconSet from '../../site/component/IconSet'; const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrow-salt', 'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'caret-circle-right', 'caret-circle-left', 'caret-circle-o-right', 'caret-circle-o-left', 'circle-right', 'circle-left', 'circle-o-right', 'circle-o-left', 'double-right', 'double-left', 'verticle-right', 'verticle-left', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-right', 'arrow-up', 'arrow-down', 'arrow-left', 'play-circle', 'play-circle-o', 'circle-up', 'circle-down', 'circle-o-up', 'circle-o-down', 'caret-circle-o-up', 'caret-circle-o-down', 'caret-circle-up', 'caret-circle-down']; ReactDOM.render(, mountNode); diff --git a/components/input-number/demo/digit.md b/components/input-number/demo/digit.md index e3cdc4b978..01a9dad752 100644 --- a/components/input-number/demo/digit.md +++ b/components/input-number/demo/digit.md @@ -1,6 +1,6 @@ --- -order: 3 -title: 小数 +- order: 3 +- title: 小数 --- 和原生的数字输入框一样，value 的精度由 step 的小数位数决定。 diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md index 22bb973090..4253a82107 100644 --- a/components/locale-provider/demo/all.md +++ b/components/locale-provider/demo/all.md @@ -9,6 +9,7 @@ title: 所有组件 import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar, Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd'; import enUS from 'antd/lib/locale-provider/en_US'; +import ruRU from 'antd/lib/locale-provider/ru_RU'; const Option = Select.Option; const RangePicker = DatePicker.RangePicker; @@ -109,6 +110,7 @@ const App = React.createClass({ Change locale of components: English + русский язык 中文 diff --git a/docs/spec/colors.md b/docs/spec/colors.md index 03d74f5d36..9a9e0f84ab 100644 --- a/docs/spec/colors.md +++ b/docs/spec/colors.md @@ -157,7 +157,6 @@ ReactDOM.render(, mountNode); `````__react const Values = require('values.js'); const CopyToClipboard = require('react-copy-to-clipboard'); -const antd = require('antd'); const Button = antd.Button; const InputNumber = antd.InputNumber; const Slider = antd.Slider; diff --git a/docs/spec/layout/demo/aside-collapse.md b/docs/spec/layout/demo/aside-collapse.md index d61761200e..c5ac3500be 100644 --- a/docs/spec/layout/demo/aside-collapse.md +++ b/docs/spec/layout/demo/aside-collapse.md @@ -7,7 +7,7 @@ title: 可收起展开的侧边导航 ````jsx import { Menu, Breadcrumb, Icon } from 'antd'; -import BrowserDemo from 'site/theme/template/BrowserDemo'; +import BrowserDemo from 'site/component/BrowserDemo'; const SubMenu = Menu.SubMenu; const AsideCollapse = React.createClass({ diff --git a/docs/spec/layout/demo/aside.md b/docs/spec/layout/demo/aside.md index f1d00763b7..f6ad090b5b 100644 --- a/docs/spec/layout/demo/aside.md +++ b/docs/spec/layout/demo/aside.md @@ -9,7 +9,7 @@ title: 侧边导航 ````jsx import { Menu, Breadcrumb, Icon } from 'antd'; -import BrowserDemo from 'site/theme/template/BrowserDemo'; +import BrowserDemo from 'site/component/BrowserDemo'; const SubMenu = Menu.SubMenu; ReactDOM.render( diff --git a/docs/spec/layout/demo/ceiling.md b/docs/spec/layout/demo/ceiling.md index 2b15ce835c..97822900dd 100644 --- a/docs/spec/layout/demo/ceiling.md +++ b/docs/spec/layout/demo/ceiling.md @@ -9,7 +9,7 @@ title: 吊顶规范 ````jsx import { Menu, Breadcrumb } from 'antd'; -import BrowserDemo from 'site/theme/template/BrowserDemo'; +import BrowserDemo from 'site/component/BrowserDemo'; ReactDOM.render( diff --git a/docs/spec/layout/demo/top-aside.md b/docs/spec/layout/demo/top-aside.md index 4295dbaead..6fe494f1c3 100644 --- a/docs/spec/layout/demo/top-aside.md +++ b/docs/spec/layout/demo/top-aside.md @@ -7,7 +7,7 @@ title: 顶部导航 + 侧边栏 ````jsx import { Menu, Breadcrumb, Icon } from 'antd'; -import BrowserDemo from 'site/theme/template/BrowserDemo'; +import BrowserDemo from 'site/component/BrowserDemo'; const SubMenu = Menu.SubMenu; ReactDOM.render( diff --git a/docs/spec/layout/demo/top.md b/docs/spec/layout/demo/top.md index c9d942c012..f7e3ead9fd 100644 --- a/docs/spec/layout/demo/top.md +++ b/docs/spec/layout/demo/top.md @@ -11,7 +11,7 @@ title: 顶部导航 ````jsx import { Menu, Breadcrumb } from 'antd'; -import BrowserDemo from 'site/theme/template/BrowserDemo'; +import BrowserDemo from 'site/component/BrowserDemo'; ReactDOM.render( diff --git a/docs/spec/motion.md b/docs/spec/motion.md index 82690ac8d7..84abb47606 100644 --- a/docs/spec/motion.md +++ b/docs/spec/motion.md @@ -11,7 +11,6 @@ english: Motion `````__react const cssAnimation = require('css-animation'); -const antd = require('antd'); const Select = antd.Select; const Option = Select.Option; const OptGroup = Select.OptGroup; diff --git a/site/theme/static/template.html b/index.html similarity index 89% rename from site/theme/static/template.html rename to index.html index 72bd7fa482..ae27b48d6c 100644 --- a/site/theme/static/template.html +++ b/index.html @@ -6,7 +6,7 @@ Ant Design - 一个 UI 设计语言 - + @@ -30,7 +30,6 @@ return '' + letter + ''; }).join(''); - - + diff --git a/package.json b/package.json index d1c3a805ef..43e4e47890 100644 --- a/package.json +++ b/package.json @@ -76,10 +76,6 @@ "babel-eslint": "^6.0.2", "babel-jest": "^12.0.2", "babel-plugin-antd": "^0.4.0", - "bisheng": "^0.5.0", - "bisheng-plugin-description": "^0.1.1", - "bisheng-plugin-react": "^0.1.0", - "bisheng-plugin-toc": "0.2.0", "dom-scroll-into-view": "^1.1.0", "enquire.js": "^2.1.1", "es6-shim": "^0.35.0", @@ -108,7 +104,6 @@ "react": "^15.0.0", "react-addons-test-utils": "^15.0.0", "react-copy-to-clipboard": "^4.0.1", - "react-document-title": "^2.0.1", "react-dom": "^15.0.0", "react-github-button": "^0.1.1", "react-intl": "^2.0.1", @@ -123,7 +118,7 @@ "dist": "antd-tools run dist", "compile": "antd-tools run compile", "clean": "antd-tools run clean", - "start": "bisheng start -c ./site/bisheng.config.js", + "start": "antd-tools run start", "site": "antd-tools run site", "pre-deploy": "cp CNAME _site && rsync -R components/*/demo/*.json _site", "deploy": "antd-tools run update-self && antd-tools run deploy", diff --git a/site/bisheng-plugin-antd/lib/browser.js b/site/bisheng-plugin-antd/lib/browser.js deleted file mode 100644 index 13236dd597..0000000000 --- a/site/bisheng-plugin-antd/lib/browser.js +++ /dev/null @@ -1,50 +0,0 @@ -const React = require('react'); -const Link = require('react-router').Link; -const toReactComponent = require('jsonml-to-react-component'); -const JsonML = require('jsonml.js/lib/utils'); -const VideoPlayer = require('./VideoPlayer'); -const ImagePreview = require('./ImagePreview'); - -function isHeading(node) { - return /h[1-6]/i.test(JsonML.getTagName(node)); -} - -module.exports = () => { - return { - converters: [ - [(node) => JsonML.isElement(node) && isHeading(node), (node, index) => { - const children = JsonML.getChildren(node); - return React.createElement(JsonML.getTagName(node), { - key: index, - id: children, - ...JsonML.getAttributes(node), - }, [ - {children.map((child) => toReactComponent(child))}, - #, - ]); - }], - [(node) => JsonML.isElement(node) && JsonML.getTagName(node) === 'video', (node, index) => - , - ], - [(node) => JsonML.isElement(node) && JsonML.getTagName(node) === 'a' && !( - JsonML.getAttributes(node).class || - (JsonML.getAttributes(node).href && - JsonML.getAttributes(node).href.indexOf('http') === 0) || - /^#/.test(JsonML.getAttributes(node).href) - ), (node, index) => { - return {toReactComponent(JsonML.getChildren(node)[0])}; - }], - [(node) => { - return JsonML.isElement(node) && - JsonML.getTagName(node) === 'p' && - JsonML.getTagName(JsonML.getChildren(node)[0]) === 'img' && - /preview-img/gi.test(JsonML.getAttributes(JsonML.getChildren(node)[0]).class); - }, (node, index) => { - const imgs = JsonML.getChildren(node) - .filter((img) => JsonML.isElement(img) && Object.keys(JsonML.getAttributes(img)).length > 0) - .map((img) => JsonML.getAttributes(img)); - return ; - }], - ], - }; -}; diff --git a/site/bisheng-plugin-antd/lib/node.js b/site/bisheng-plugin-antd/lib/node.js deleted file mode 100644 index 4b11bf253c..0000000000 --- a/site/bisheng-plugin-antd/lib/node.js +++ /dev/null @@ -1,11 +0,0 @@ -const path = require('path'); -const processDoc = require('./process-doc'); -const processDemo = require('./process-demo'); - -module.exports = (markdownData) => { - const isDemo = path.dirname(markdownData.meta.filename).endsWith('/demo'); - if (isDemo) { - return processDemo(markdownData); - } - return processDoc(markdownData); -}; diff --git a/site/bisheng-plugin-antd/lib/process-demo.js b/site/bisheng-plugin-antd/lib/process-demo.js deleted file mode 100644 index 4a6c4e14c2..0000000000 --- a/site/bisheng-plugin-antd/lib/process-demo.js +++ /dev/null @@ -1,90 +0,0 @@ -const fs = require('fs'); -const path = require('path'); -const JsonML = require('jsonml.js/lib/utils'); -const pkgPath = path.join(process.cwd(), 'package.json'); -const pkgName = require(pkgPath).name; - -const nunjucks = require('nunjucks'); -nunjucks.configure({ autoescape: false }); - -const babel = require('babel-core'); -const babelrc = { - presets: ['es2015', 'react'].map((m) => { - return require.resolve(`babel-preset-${m}`); - }), -}; - -const tmpl = fs.readFileSync(path.join(__dirname, 'template.html')).toString(); - -function isStyleTag(node) { - return node && JsonML.getTagName(node) === 'style'; -} - -function getCode(node) { - return JsonML.getChildren( - JsonML.getChildren(node)[0] - )[0]; -} - -module.exports = (markdownData) => { - const meta = markdownData.meta; - meta.id = meta.filename.replace(/\.md$/, '').replace(/\//g, '-'); - - const contentChildren = JsonML.getChildren(markdownData.content); - const chineseIntroStart = contentChildren.findIndex((node) => { - return JsonML.getTagName(node) === 'h2' && - JsonML.getChildren(node)[0] === 'zh-CN'; - }); - const englishIntroStart = contentChildren.findIndex((node) => { - return JsonML.getTagName(node) === 'h2' && - JsonML.getChildren(node)[0] === 'en-US'; - }); - const codeIndex = contentChildren.findIndex((node) => { - return JsonML.getTagName(node) === 'pre' && - JsonML.getAttributes(node).lang === 'jsx'; - }); - if (chineseIntroStart > -1 /* equal to englishIntroStart > -1 */) { - markdownData.content = { - 'zh-CN': contentChildren.slice(chineseIntroStart + 1, englishIntroStart), - 'en-US': contentChildren.slice(englishIntroStart + 1, codeIndex), - }; - } else { - markdownData.content = contentChildren.slice(0, codeIndex); - } - - markdownData.highlightedCode = contentChildren[codeIndex].slice(0, 2); - const preview = [ - 'pre', { lang: '__react' }, - ]; - const componentsPath = path.join(process.cwd(), 'components'); - preview.push([ - 'code', - getCode(contentChildren[codeIndex]) - .replace(`${pkgName}/lib`, componentsPath), - ]); - markdownData.preview = preview; - - const styleNode = contentChildren.find((node) => { - return isStyleTag(node) || - (JsonML.getTagName(node) === 'pre' && JsonML.getAttributes(node).lang === 'css'); - }); - if (isStyleTag(styleNode)) { - markdownData.style = JsonML.getChildren(styleNode)[0]; - } else if (styleNode) { - markdownData.style = getCode(styleNode); - markdownData.highlightedStyle = JsonML.getAttributes(styleNode).highlighted; - } - - if (meta.iframe) { - const html = nunjucks.renderString(tmpl, { - id: meta.id, - style: markdownData.style, - script: babel.transform(getCode(markdownData.preview), babelrc).code, - }); - const fileName = `demo-${Math.random()}.html`; - fs.writeFile(path.join(process.cwd(), '_site', fileName), html); - markdownData.src = path.join('/', fileName); - } - - return markdownData; -}; diff --git a/site/bisheng-plugin-antd/lib/process-doc.js b/site/bisheng-plugin-antd/lib/process-doc.js deleted file mode 100644 index a4358c1e42..0000000000 --- a/site/bisheng-plugin-antd/lib/process-doc.js +++ /dev/null @@ -1,19 +0,0 @@ -const JsonML = require('jsonml.js/lib/utils'); - -module.exports = (markdownData) => { - const contentChildren = JsonML.getChildren(markdownData.content); - const apiStartIndex = contentChildren.findIndex((node) => { - return JsonML.getTagName(node) === 'h2' && - JsonML.getChildren(node)[0] === 'API'; - }); - - if (apiStartIndex > -1) { - const content = contentChildren.slice(0, apiStartIndex); - markdownData.content = ['section'].concat(content); - - const api = contentChildren.slice(apiStartIndex); - markdownData.api = ['section'].concat(api); - } - - return markdownData; -}; diff --git a/site/bisheng-plugin-antd/lib/template.html b/site/bisheng-plugin-antd/lib/template.html deleted file mode 100644 index 10ffe57299..0000000000 --- a/site/bisheng-plugin-antd/lib/template.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - Demo - - - - -
- - - - - diff --git a/site/bisheng.config.js b/site/bisheng.config.js deleted file mode 100644 index 37b41a589a..0000000000 --- a/site/bisheng.config.js +++ /dev/null @@ -1,34 +0,0 @@ -const path = require('path'); - -module.exports = { - source: [ - './components', - './docs', - 'CHANGELOG.md', // TODO: fix it in bisheng - ], - theme: './site/theme', - htmlTemplate: './site/theme/static/template.html', - plugins: [ - 'bisheng-plugin-description', - 'bisheng-plugin-toc?maxDepth=2', - 'bisheng-plugin-react?lang=__react', - './site/bisheng-plugin-antd', - ], - webpackConfig(config) { - config.resolve.alias = { - antd: process.cwd(), - site: path.join(process.cwd(), 'site'), - }; - - config.babel.plugins.push([ - require.resolve('babel-plugin-antd'), - { - style: true, - libraryName: 'antd', - libDir: 'components', - }, - ]); - - return config; - }, -}; diff --git a/site/common/lib.js b/site/common/lib.js new file mode 100644 index 0000000000..a2d09a1faa --- /dev/null +++ b/site/common/lib.js @@ -0,0 +1,18 @@ +import './styles/highlight.less'; +import './styles/common.less'; +import './styles/markdown.less'; +import './styles/toc.less'; +import './styles/font.less'; +import './styles/resource.less'; +import './styles/clearfix.less'; +import './styles/demo.less'; +import './styles/page-nav.less'; +import './styles/footer.less'; +import './styles/preview-img.less'; +import './styles/mock-browser.less'; +import './styles/colors.less'; +import './styles/motion.less'; +import './styles/responsive.less'; +import './styles/new-version-info-modal.less'; + +import 'es6-shim'; diff --git a/site/common/styles/clearfix.less b/site/common/styles/clearfix.less new file mode 100644 index 0000000000..d044d0a4c3 --- /dev/null +++ b/site/common/styles/clearfix.less @@ -0,0 +1,14 @@ +.clearfix { + zoom: 1; + &:before, + &:after { + content: " "; + display: table; + } + &:after { + clear: both; + visibility: hidden; + font-size: 0; + height: 0; + } +} \ No newline at end of file diff --git a/site/theme/static/colors.less b/site/common/styles/colors.less similarity index 100% rename from site/theme/static/colors.less rename to site/common/styles/colors.less diff --git a/site/theme/static/common.less b/site/common/styles/common.less similarity index 99% rename from site/theme/static/common.less rename to site/common/styles/common.less index f190ba7885..cadd93bcc6 100644 --- a/site/theme/static/common.less +++ b/site/common/styles/common.less @@ -34,7 +34,7 @@ a { position: relative; } -div.main-container { +.main-container { padding: 0 6% 120px 4%; margin-left: -1px; background: #fff; diff --git a/site/theme/static/demo.less b/site/common/styles/demo.less similarity index 99% rename from site/theme/static/demo.less rename to site/common/styles/demo.less index 5701252bfb..83324681a5 100644 --- a/site/theme/static/demo.less +++ b/site/common/styles/demo.less @@ -39,7 +39,7 @@ background: #fff; } -.code-box:target { +.code-box.code-box-target { border: 1px solid rgba(45, 183, 245, 0.7); box-shadow: 0 0 4px rgba(45, 183, 245, 0.5); } @@ -80,7 +80,7 @@ } .code-box-meta h4, -section.code-box-meta p { +.code-box-meta p { margin: 0; width: 93%; } @@ -172,10 +172,8 @@ section.code-box-meta p { } .code-box .highlight { - pre { - margin: 0; - padding: 0; - } + padding: 5px; + &:not(:first-child) { border-top: 1px dashed #e9e9e9; } diff --git a/site/theme/static/font.less b/site/common/styles/font.less similarity index 100% rename from site/theme/static/font.less rename to site/common/styles/font.less diff --git a/site/theme/static/footer.less b/site/common/styles/footer.less similarity index 100% rename from site/theme/static/footer.less rename to site/common/styles/footer.less diff --git a/site/theme/static/highlight.less b/site/common/styles/highlight.less similarity index 100% rename from site/theme/static/highlight.less rename to site/common/styles/highlight.less diff --git a/site/theme/static/markdown.less b/site/common/styles/markdown.less similarity index 99% rename from site/theme/static/markdown.less rename to site/common/styles/markdown.less index 2209bc32a9..7d59a03458 100644 --- a/site/theme/static/markdown.less +++ b/site/common/styles/markdown.less @@ -99,6 +99,7 @@ .markdown pre code { border: none; + padding: 1em 2em; background: #f7f7f7; margin: 0; font-size: 13px; diff --git a/site/theme/static/mock-browser.less b/site/common/styles/mock-browser.less similarity index 100% rename from site/theme/static/mock-browser.less rename to site/common/styles/mock-browser.less diff --git a/site/theme/static/motion.less b/site/common/styles/motion.less similarity index 100% rename from site/theme/static/motion.less rename to site/common/styles/motion.less diff --git a/site/theme/static/new-version-info-modal.less b/site/common/styles/new-version-info-modal.less similarity index 100% rename from site/theme/static/new-version-info-modal.less rename to site/common/styles/new-version-info-modal.less diff --git a/site/theme/static/page-nav.less b/site/common/styles/page-nav.less similarity index 100% rename from site/theme/static/page-nav.less rename to site/common/styles/page-nav.less diff --git a/site/theme/static/preview-img.less b/site/common/styles/preview-img.less similarity index 100% rename from site/theme/static/preview-img.less rename to site/common/styles/preview-img.less diff --git a/site/theme/static/resource.less b/site/common/styles/resource.less similarity index 100% rename from site/theme/static/resource.less rename to site/common/styles/resource.less diff --git a/site/theme/static/responsive.less b/site/common/styles/responsive.less similarity index 100% rename from site/theme/static/responsive.less rename to site/common/styles/responsive.less diff --git a/site/theme/static/toc.less b/site/common/styles/toc.less similarity index 100% rename from site/theme/static/toc.less rename to site/common/styles/toc.less diff --git a/site/component/App.jsx b/site/component/App.jsx new file mode 100644 index 0000000000..f78a4b96d8 --- /dev/null +++ b/site/component/App.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import Header from './Header'; +import Footer from './Footer'; + +export default function App(props) { + return ( +
+
+ {props.children} +
+
+ ); +} diff --git a/site/component/Article/index.jsx b/site/component/Article/index.jsx new file mode 100644 index 0000000000..ff07921b0e --- /dev/null +++ b/site/component/Article/index.jsx @@ -0,0 +1,90 @@ +import React, { Children, cloneElement } from 'react'; +import { Link } from 'react-router'; +import * as utils from '../utils'; +import { getTagName, getChildren } from 'jsonml.js/lib/utils'; +import { Timeline } from 'antd'; + +export default class Article extends React.Component { + componentDidMount() { + this.componentDidUpdate(); + } + componentDidUpdate() { + const { title, chinese, english } = this.props.content.meta; + utils.setTitle(`${title || chinese || english} - Ant Design`); + const links = Array.apply(null, document.querySelectorAll('.outside-link.internal')); + if (links.length === 0) { + return; + } + const checkImgUrl = 'http://alipay-rmsdeploy-dev-image.oss-cn-hangzhou-zmf.aliyuncs.com/rmsportal/JdVaTbZzPxEldUi.png'; + utils.ping(checkImgUrl, status => { + if (status === 'responded') { + links.forEach(link => (link.style.display = 'block')); + } + }); + } + getArticle(article) { + const { content } = this.props; + const { meta } = content; + if (!meta.timeline) { + return article; + } + const timelineItems = []; + let temp = []; + Children.forEach(article.props.children, (child, i) => { + if (child.type === 'h2' && temp.length > 0) { + timelineItems.push({temp}); + temp = []; + } + temp.push(child); + }); + return cloneElement(article, { + children: {timelineItems}, + }); + } + render() { + const { content, location } = this.props; + const jumper = content.description.filter((node) => { + return getTagName(node) === 'h2'; + }).map((node) => { + return ( +
  • + + {utils.jsonmlToComponent(location.pathname, getChildren(node)[0])} + +
    • + ); + }); + + const { meta, intro, description } = content; + + return ( +
    +

    + {meta.title || meta.english} {meta.subtitle || meta.chinese} + { + !meta.subtitle ? null : + {meta.subtitle} + } +

    + { + !intro ? null : + utils.jsonmlToComponent( + location.pathname, + ['section', { className: 'markdown' }].concat(intro) + ) + } + { + (jumper.length > 0 && meta.toc !== false) ? +
      {jumper}
    : + null + } + { + this.getArticle(utils.jsonmlToComponent( + location.pathname, + ['section', { className: 'markdown' }].concat(description) + )) + } +
    + ); + } +} diff --git a/site/theme/template/BrowserDemo.jsx b/site/component/BrowserDemo/index.jsx similarity index 100% rename from site/theme/template/BrowserDemo.jsx rename to site/component/BrowserDemo/index.jsx diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx new file mode 100644 index 0000000000..683ce2d895 --- /dev/null +++ b/site/component/ComponentDoc/index.jsx @@ -0,0 +1,131 @@ +import React from 'react'; +import { Link } from 'react-router'; +import classNames from 'classnames'; +import { Row, Col, Icon, Affix } from 'antd'; +import Demo from '../Demo'; +import * as utils from '../utils'; +import demosList from '../../../_data/demos-list'; + +export default class ComponentDoc extends React.Component { + static contextTypes = { + intl: React.PropTypes.object, + } + + constructor(props) { + super(props); + + this.state = { + expandAll: false, + }; + } + + componentDidMount() { + this.componentDidUpdate(); + } + componentDidUpdate() { + const { title, subtitle, chinese, english } = this.props.doc.meta; + utils.setTitle(`${subtitle || chinese || ''} ${title || english} - Ant Design`); + } + + handleExpandToggle = () => { + this.setState({ + expandAll: !this.state.expandAll, + }); + } + + render() { + const { doc, location } = this.props; + const scrollTo = location.query.scrollTo; + const { description, meta } = doc; + const locale = this.context.intl.locale; + const demos = (demosList[meta.fileName.replace(`.${locale}`, '')] || []) + .filter((demoData) => !demoData.meta.hidden); + const expand = this.state.expandAll; + + const isSingleCol = meta.cols === 1; + const leftChildren = []; + const rightChildren = []; + demos.sort((a, b) => { + return parseInt(a.meta.order, 10) - parseInt(b.meta.order, 10); + }).forEach((demoData, index) => { + if (index % 2 === 0 || isSingleCol) { + leftChildren.push( + + ); + } else { + rightChildren.push( + + ); + } + }); + const expandTriggerClass = classNames({ + 'code-box-expand-trigger': true, + 'code-box-expand-trigger-active': expand, + }); + + const jumper = demos.map((demo) => { + const title = demo.meta.title; + const localizeTitle = typeof title === 'object' ? + title[locale] : title; + return ( +
  • + + {localizeTitle} + +
    • + ); + }); + + return ( +
    + +
      + {jumper} +
    +     +
    +

    {meta.title || meta.english} {meta.subtitle || meta.chinese}

    + { + utils.jsonmlToComponent( + location.pathname, + ['section', { className: 'markdown' }] + .concat(description) + ) + } +

    + 代码演示 + +

    +
    + + + {leftChildren} + + { + isSingleCol ? null : + {rightChildren} + } + + { + utils.jsonmlToComponent( + location.pathname, + ['section', { + className: 'markdown api-container', + }].concat(doc.api || []) + ) + } +
    + ); + } +} diff --git a/site/theme/template/Content/Demo.jsx b/site/component/Demo/index.jsx similarity index 63% rename from site/theme/template/Content/Demo.jsx rename to site/component/Demo/index.jsx index a5cd27c925..f4d2402665 100644 --- a/site/theme/template/Content/Demo.jsx +++ b/site/component/Demo/index.jsx @@ -1,6 +1,9 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +import { Link } from 'react-router'; import classNames from 'classnames'; +import * as utils from '../utils'; + +const isLocal = location.port; export default class Demo extends React.Component { static contextTypes = { @@ -28,40 +31,27 @@ export default class Demo extends React.Component { } render() { - const props = this.props; - const { - meta, - src, - content, - preview, - highlightedCode, - style, - highlightedStyle, - } = props; - + const { id, className, meta, intro, preview, style, src, + highlightedCode, highlightedStyle, pathname } = this.props; const codeExpand = this.state.codeExpand; const codeBoxClass = classNames({ 'code-box': true, + [className]: className, expand: codeExpand, }); const locale = this.context.intl.locale; - const localizedTitle = meta.title[locale] || meta.title; - const localizeIntro = content[locale] || content; - const introChildren = props.utils - .toReactComponent(['div'].concat(localizeIntro)); - - const highlightClass = classNames({ - 'highlight-wrapper': true, - 'highlight-wrapper-expand': codeExpand, - }); + const localizeIntro = intro[locale] || intro; + const introChildren = utils.jsonmlToComponent(pathname, ['div'].concat(localizeIntro)); + const localizedTitle = typeof meta.title === 'object' ? + meta.title[locale] : meta.title; return ( -
    +
    { meta.iframe ? -