mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:ant-design/ant-design

Browse Source
This commit is contained in:
afc163 2016-06-20 16:38:02 +08:00
commit 82e90d2bd4
9 changed files with 2 additions and 346 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -78,6 +78,7 @@
"babel-jest": "^12.0.2",
"babel-plugin-antd": "^0.4.0",
"bisheng": "^0.7.1",
"bisheng-plugin-antd": "0.1.0",
"bisheng-plugin-description": "^0.1.1",
"bisheng-plugin-react": "^0.1.0",
"bisheng-plugin-toc": "0.2.0",

121
site/bisheng-plugin-antd/lib/ImagePreview.jsx
View File

@ -1,121 +0,0 @@
import React from 'react';
import classNames from 'classnames';
import { Modal, Carousel } from 'antd';
function isGood(className) {
return /\bgood\b/i.test(className);
}
function isBad(className) {
return /\bbad\b/i.test(className);
}
function PreviewImageBox({ cover, coverMeta, imgs, style, previewVisible,
comparable, onClick, onCancel }) {
const onlyOneImg = comparable || imgs.length === 1;
return (
<div className="preview-image-box"
style={style}
>
<div onClick={onClick} className={`preview-image-wrapper ${coverMeta.isGood && 'good'} ${coverMeta.isBad && 'bad'}`}>
<img className={coverMeta.className} src={coverMeta.src} alt={coverMeta.alt} />
</div>
<div className="preview-image-title">{coverMeta.alt}</div>
<div className="preview-image-description"
dangerouslySetInnerHTML={{ __html: coverMeta.description }}
/>
<Modal className="image-modal" width={960} visible={previewVisible} title={null} footer={null}
onCancel={onCancel}
>
<Carousel className={`${onlyOneImg ? 'image-modal-single' : ''}`} draggable={!onlyOneImg} adaptiveHeight>
{comparable ? cover : imgs}
</Carousel>
<div className="preview-image-title">{coverMeta.alt}</div>
</Modal>
</div>
);
}
export default class ImagePreview extends React.Component {
constructor(props) {
super(props);
this.state = {
leftVisible: false,
rightVisible: false,
};
this.handleLeftClick = this.handleClick.bind(this, 'left');
this.handleRightClick = this.handleClick.bind(this, 'right');
}
handleClick(side) {
this.setState({ [`${side}Visible`]: true });
}
handleCancel = () => {
this.setState({
leftVisible: false,
rightVisible: false,
});
}
render() {
const { imgs } = this.props;
const imgsMeta = imgs.map((img) => {
const { alt, description, src } = img;
const imgClassName = img.class;
return {
className: imgClassName,
alt, description, src,
isGood: isGood(imgClassName),
isBad: isBad(imgClassName),
};
});
const imagesList = imgsMeta.map((meta, index) => {
return (
<div key={index}>
<div className="image-modal-container">
<img {...meta} alt={meta.alt} />
</div>
</div>
);
});
const comparable = imgs.length === 2 &&
(imgsMeta[0].isGood || imgsMeta[0].isBad) &&
(imgsMeta[1].isGood || imgsMeta[1].isBad);
const style = comparable ? { width: '50%' } : null;
const hasCarousel = imgs.length > 1 && !comparable;
const previewClassName = classNames({
'preview-image-boxes': true,
clearfix: true,
'preview-image-boxes-with-carousel': hasCarousel,
});
return (
<div className={previewClassName}>
<PreviewImageBox style={style}
comparable={comparable}
previewVisible={this.state.leftVisible}
cover={imagesList[0]}
coverMeta={imgsMeta[0]}
imgs={imagesList}
onClick={this.handleLeftClick}
onCancel={this.handleCancel}
/>
{
comparable ?
<PreviewImageBox style={style}
comparable
previewVisible={this.state.rightVisible}
cover={imagesList[1]}
coverMeta={imgsMeta[1]}
imgs={imagesList}
onClick={this.handleRightClick}
onCancel={this.handleCancel}
/> : null
}
</div>
);
}
}

19
site/bisheng-plugin-antd/lib/VideoPlayer.jsx
View File

@ -1,19 +0,0 @@
import React from 'react';
import SublimeVideo from 'react-sublime-video';
export default function VideoPlayer({ video }) {
const { alt, description, src } = video;
const videoClassName = video.class;
return (
<div className={`preview-image-box ${videoClassName}`}>
<div className={'preview-image-wrapper'}>
<SublimeVideo src={src} type="video/mp4" />
</div>
<div className="preview-image-title">{alt}</div>
<div className="preview-image-description"
dangerouslySetInnerHTML={{ __html: description }}
/>
</div>
);
}

50
site/bisheng-plugin-antd/lib/browser.js
View File

@ -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),
}, [
<span key="title">{children.map((child) => toReactComponent(child))}</span>,
<a href={`#${children}`} className="anchor" key="anchor">#</a>,
]);
}],
[(node) => JsonML.isElement(node) && JsonML.getTagName(node) === 'video', (node, index) =>
<VideoPlayer video={JsonML.getAttributes(node)} key={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 <Link to={JsonML.getAttributes(node).href} key={index}>{toReactComponent(JsonML.getChildren(node)[0])}</Link>;
}],
[(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 <ImagePreview imgs={imgs} key={index} />;
}],
],
};
};

11
site/bisheng-plugin-antd/lib/node.js
View File

@ -1,11 +0,0 @@
const path = require('path');
const processDoc = require('./process-doc');
const processDemo = require('./process-demo');
module.exports = (markdownData) => {
const isDemo = /\/demo$/i.test(path.dirname(markdownData.meta.filename));
if (isDemo) {
return processDemo(markdownData);
}
return processDoc(markdownData);
};

92
site/bisheng-plugin-antd/lib/process-demo.js
View File

@ -1,92 +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.filter((node) => {
return isStyleTag(node) ||
(JsonML.getTagName(node) === 'pre' && JsonML.getAttributes(node).lang === 'css');
})[0];
if (isStyleTag(styleNode)) {
markdownData.style = JsonML.getChildren(styleNode)[0];
} else if (styleNode) {
const styleTag = contentChildren.filter(isStyleTag)[0];
markdownData.style = getCode(styleNode) + (styleTag ? JsonML.getChildren(styleTag)[0] : '');
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;
};

19
site/bisheng-plugin-antd/lib/process-doc.js
View File

@ -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;
};

33
site/bisheng-plugin-antd/lib/template.html
View File

@ -1,33 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="../index.css" />
<style>
html, body {
height: 100%;
margin: 0;
background: none;
}
{{ style }}
</style>
</head>
<body>
<div id="{{ id }}" class="code-box-demo"></div>
<script>
function require(module) {
if (module === 'react-router') {
return window.ReactRouter;
}
return window.parent[module];
}
var mountNode = document.getElementById('{{ id }}');
</script>
<script src="https://npmcdn.com/react/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom/dist/react-dom.js"></script>
<script src="https://npmcdn.com/react-router/umd/ReactRouter.js"></script>
<script>
{{ script }}
</script>
</body>
</html>

2
site/bisheng.config.js
View File

@ -14,7 +14,7 @@ module.exports = {
'bisheng-plugin-description',
'bisheng-plugin-toc?maxDepth=2',
'bisheng-plugin-react?lang=__react',
'./site/bisheng-plugin-antd',
'bisheng-plugin-antd',
],
doraConfig: {
verbose: true,