test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 03:29:39 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
afc163 2016-09-26 12:28:28 +08:00
commit 4edab23c8c
27 changed files with 128 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
components/back-top/style/index.js → components/back-top/style/index.tsx
View File

8
components/transfer/index.tsx
View File

@ -121,7 +121,13 @@ export default class Transfer extends React.Component<TransferProps, any> {
}
const leftDataSource = dataSource.filter(({ key }) => targetKeys.indexOf(key) === -1);
const rightDataSource = dataSource.filter(({ key }) => targetKeys.indexOf(key) >= 0);
const rightDataSource = [];
targetKeys.forEach((targetKey) => {
const targetItem = dataSource.filter(record => record.key === targetKey)[0];
if (targetItem) {
rightDataSource.push(targetItem);
}
});
this.splitedDataSource = {
leftDataSource,

2
docs/react/practical-projects.en-US.md
View File

@ -58,7 +58,7 @@ $ npm install antd babel-plugin-import --save
Edit `webpack.config.js` to integrate `babel-plugin-import`.
```diff
+ webpackConfig.babel.plugins.push(['antd', {
+ webpackConfig.babel.plugins.push(['import', {
+ libraryName: 'antd',
+ style: 'css',
+ }]);

2
docs/react/practical-projects.zh-CN.md
View File

@ -58,7 +58,7 @@ $ npm install antd babel-plugin-import --save
编辑 `webpack.config.js`，使 `babel-plugin-import` 插件生效。
```diff
+ webpackConfig.babel.plugins.push(['antd', {
+ webpackConfig.babel.plugins.push(['import', {
+ libraryName: 'antd',
+ style: 'css',
+ }]);

2
docs/spec/alignment.en-US.md
View File

@ -1,5 +1,5 @@
---
category: 十大原则
category: Principles
order: 2
title: Alignment
---

4
docs/spec/colors.md
View File

@ -1,5 +1,7 @@
---
category: 设计基础
category:
zh-CN: 设计基础
en-US: Design Fundamental
order: 2
title:
zh-CN: 色彩

2
docs/spec/contrast.en-US.md
View File

@ -1,5 +1,5 @@
---
category: 十大原则
category: Principles
order: 3
title: Contrast
---

4
docs/spec/direct.md
View File

@ -1,5 +1,7 @@
---
category: 十大原则
category:
zh-CN: 十大原则
en-US: Principles
order: 5
title:
zh-CN: 直截了当

4
docs/spec/font.md
View File

@ -1,5 +1,7 @@
---
category: 设计基础
category:
zh-CN: 设计基础
en-US: Design Fundamental
order: 0
title:
zh-CN: 字体

2
docs/spec/invitation.en-US.md
View File

@ -1,5 +1,5 @@
---
category: 十大原则
category: Principles
order: 8
title: Provide an Invitation
---

4
docs/spec/layout/index.md
View File

@ -1,6 +1,8 @@
---
template: component
category: 设计基础
category:
zh-CN: 设计基础
en-US: Design Fundamental
order: 4
cols: 1
title:

2
docs/spec/lightweight.en-US.md
View File

@ -1,5 +1,5 @@
---
category: 十大原则
category: Principles
order: 6
title: Keep it Lightweight
---

4
docs/spec/motion.md
View File

@ -1,5 +1,7 @@
---
category: 设计基础
category:
zh-CN: 设计基础
en-US: Design Fundamental
order: 5
title:
zh-CN: 组件动画

2
docs/spec/principle.en-US.md
View File

@ -1,5 +1,5 @@
---
category: 十大原则
category: Principles
order: 0
title: Introduction
---

2
docs/spec/proximity.en-US.md
View File

@ -1,5 +1,5 @@
---
category: 十大原则
category: Principles
order: 1
title: Proximity
---

2
docs/spec/reaction.en-US.md
View File

@ -1,5 +1,5 @@
---
category: 十大原则
category: Principles
order: 10
title: React Immediately
---

2
docs/spec/repetition.en-US.md
View File

@ -1,5 +1,5 @@
---
category: 十大原则
category: Principles
order: 4
title: Repetition
---

2
docs/spec/stay.en-US.md
View File

@ -1,5 +1,5 @@
---
category: 十大原则
category: Principles
order: 6
title: Stay on the Page
---

2
docs/spec/transition.en-US.md
View File

@ -1,5 +1,5 @@
---
category: 十大原则
category: Principles
order: 9
title: Use Transition
---

4
docs/spec/typography.md
View File

@ -1,5 +1,7 @@
---
category: 设计基础
category:
zh-CN: 设计基础
en-US: Design Fundamental
order: 1
title:
zh-CN: 排版

2
index.js
View File

@ -29,6 +29,6 @@ req.keys().forEach((mod) => {
if (process.env.NODE_ENV !== 'production') {
if (typeof console !== 'undefined' && console.warn) {
console.warn(`You are using prebuilt antd,
please use https://github.com/ant-design/babel-plugin-import to reduce app bundle size.`);
please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.`);
}
}

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "2.0.0-beta.11",
"version": "2.0.0-beta.12",
"title": "Ant Design",
"description": "An enterprise-class UI design language and React-based implementation",
"homepage": "http://ant.design/",

4
site/theme/index.js
View File

@ -2,10 +2,10 @@ const contentTmpl = './template/Content/index';
module.exports = {
categoryOrder: {
组件: 0,
十大原则: 0,
Principles: 0,
设计基础: 1,
动画: 2,
'Design Fundamental': 1,
},
typeOrder: {
Basic: 0,

58
site/theme/static/responsive.less
View File

@ -1,3 +1,14 @@
.nav-phone-icon {
display: none;
position: absolute;
right: 30px;
top: 32px;
z-index: 1;
width: 16px;
height: 50px;
cursor: pointer;
}
@media only screen and (min-width: 320px) and (max-width: 1200px) {
#search-box {
display: none;
@ -42,34 +53,23 @@
text-align: center;
}
.nav {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
background: #fff;
line-height: 60px;
margin-right: 0;
width: 50%;
height: 100%;
box-shadow: 10px 0 12px rgba(0,0,0,0.1);
transform: translateX(-100%);
overflow-x: hidden;
overflow-y: auto;
opacity: 0;
transition: transform .3s, opacity .3s;
text-align: center;
#lang {
margin: 0;
float: none;
color: #666;
}
#nav, #lang {
float: none;
}
button#lang {
display: block;
margin: 29px auto 16px;
color: #666;
border-color: #666;
}
.nav.nav-show {
transform: translateX(0);
opacity: 1;
.nav {
.ant-popover-inner-content {
padding: 0;
}
.ant-menu-item-selected {
border-right: 1px solid #e9e9e9;
}
}
ul#nav,
@ -93,12 +93,6 @@
.nav-phone-icon {
display: block;
width: 16px;
height: 50px;
position: absolute;
left: 30px;
top: 32px;
cursor: pointer;
}
.nav-phone-icon:before {

8
site/theme/template/Content/MainContent.jsx
View File

@ -31,7 +31,9 @@ export default class MainContent extends React.Component {
}
if (prevModule !== this.currentModule) {
const moduleData = this.getModuleData(nextProps);
const shouldOpenKeys = Object.keys(utils.getMenuItems(moduleData));
const shouldOpenKeys = Object.keys(utils.getMenuItems(
moduleData, this.context.intl.locale
));
this.setState({ openKeys: shouldOpenKeys });
}
}
@ -128,7 +130,9 @@ export default class MainContent extends React.Component {
getMenuItems() {
const moduleData = this.getModuleData(this.props);
const menuItems = utils.getMenuItems(moduleData);
const menuItems = utils.getMenuItems(
moduleData, this.context.intl.locale
);
const topLevel = this.generateSubMenuItems(menuItems.topLevel);
const subMenu = Object.keys(menuItems).filter(this.isNotTopLevel)
.sort((a, b) => config.categoryOrder[a] - config.categoryOrder[b])

120
site/theme/template/Layout/Header.jsx
View File

@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
import enquire from 'enquire.js';
import debounce from 'lodash.debounce';
import classNames from 'classnames';
import { Select, Menu, Row, Col, Icon, Button } from 'antd';
import { Select, Menu, Row, Col, Icon, Button, Popover } from 'antd';
const Option = Select.Option;
@ -27,17 +27,7 @@ export default class Header extends React.Component {
}
}, 100);
this.onDocumentClick = (e) => {
if (document.querySelector('#header .nav').contains(e.target)) {
return;
}
this.setState({
menuVisible: false,
});
};
this.state = {
menuVisible: false,
menuMode: 'horizontal',
isFirstFrame: true,
};
@ -46,9 +36,6 @@ export default class Header extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.onScroll);
document.addEventListener('click', this.onDocumentClick);
document.addEventListener('touchstart', this.onDocumentClick);
enquire.register('only screen and (min-width: 320px) and (max-width: 940px)', {
match: () => {
this.setState({ menuMode: 'inline' });
@ -61,16 +48,6 @@ export default class Header extends React.Component {
componentWillUnmount() {
window.removeEventListener('scroll', this.onScroll);
document.removeEventListener('click', this.onDocumentClick);
document.removeEventListener('touchstart', this.onDocumentClick);
}
handleMenuIconClick = (e) => {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
this.setState({
menuVisible: true,
});
}
handleSearch = (value) => {
@ -121,24 +98,67 @@ export default class Header extends React.Component {
'home-nav-white': !this.state.isFirstFrame,
});
const menuMode = this.state.menuMode;
const menu = [
<Button id="lang" type="ghost" size="small" onClick={this.handleLangChange} key="lang">
<FormattedMessage id="app.header.lang" />
</Button>,
<Menu mode={menuMode} selectedKeys={[activeMenuItem]} id="nav" key="nav">
<Menu.Item key="home">
<Link to="/">
<FormattedMessage id="app.header.menu.home" />
</Link>
</Menu.Item>
<Menu.Item key="docs/practice">
<Link to="/docs/practice/cases">
<FormattedMessage id="app.header.menu.practice" />
</Link>
</Menu.Item>
<Menu.Item key="docs/pattern">
<Link to="/docs/pattern/navigation">
<FormattedMessage id="app.header.menu.pattern" />
</Link>
</Menu.Item>
<Menu.Item key="docs/react">
<Link to="/docs/react/introduce">
<FormattedMessage id="app.header.menu.components" />
</Link>
</Menu.Item>
<Menu.Item key="docs/spec">
<Link to="/docs/spec/introduce">
<FormattedMessage id="app.header.menu.spec" />
</Link>
</Menu.Item>
<Menu.Item key="docs/resource">
<Link to="/docs/resource/download">
<FormattedMessage id="app.header.menu.resource" />
</Link>
</Menu.Item>
</Menu>,
];
const searchPlaceholder = locale === 'zh-CN' ? '搜索组件...' : 'Search...';
return (
<header id="header" className={headerClassName}>
<Popover
overlayClassName="nav"
placement="bottomRight"
content={menuMode === 'inline' ? menu : null}
trigger="click"
>
<Icon
className="nav-phone-icon"
type="menu"
/>
</Popover>
<Row>
<Col lg={4} md={6} sm={7} xs={24}>
<Icon
className="nav-phone-icon"
onClick={this.handleMenuIconClick}
type="menu"
/>
<Link to="/" id="logo">
<img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>Ant Design</span>
</Link>
</Col>
<Col className={`nav ${this.state.menuVisible ? 'nav-show' : ''}`}
lg={20} md={18} sm={17} xs={0} style={{ display: 'block' }}
>
<Col lg={20} md={18} sm={17} xs={0} style={{ display: 'block' }}>
<div id="search-box">
<Select combobox
dropdownClassName="component-select"
@ -152,41 +172,7 @@ export default class Header extends React.Component {
{options}
</Select>
</div>
<Button id="lang" type="ghost" size="small" onClick={this.handleLangChange}>
<FormattedMessage id="app.header.lang" />
</Button>
<Menu mode={this.state.menuMode} selectedKeys={[activeMenuItem]} id="nav">
<Menu.Item key="home">
<Link to="/">
<FormattedMessage id="app.header.menu.home" />
</Link>
</Menu.Item>
<Menu.Item key="docs/practice">
<Link to="/docs/practice/cases">
<FormattedMessage id="app.header.menu.practice" />
</Link>
</Menu.Item>
<Menu.Item key="docs/pattern">
<Link to="/docs/pattern/navigation">
<FormattedMessage id="app.header.menu.pattern" />
</Link>
</Menu.Item>
<Menu.Item key="docs/react">
<Link to="/docs/react/introduce">
<FormattedMessage id="app.header.menu.components" />
</Link>
</Menu.Item>
<Menu.Item key="docs/spec">
<Link to="/docs/spec/introduce">
<FormattedMessage id="app.header.menu.spec" />
</Link>
</Menu.Item>
<Menu.Item key="docs/resource">
<Link to="/docs/resource/download">
<FormattedMessage id="app.header.menu.resource" />
</Link>
</Menu.Item>
</Menu>
{menuMode === 'horizontal' ? menu : null}
</Col>
</Row>
</header>

4
site/theme/template/utils.jsx
View File

@ -1,10 +1,10 @@
export function getMenuItems(moduleData) {
export function getMenuItems(moduleData, locale) {
const menuMeta = moduleData.map(item => item.meta);
const menuItems = {};
menuMeta.sort(
(a, b) => (a.order || 0) - (b.order || 0)
).forEach((meta) => {
const category = meta.category || 'topLevel';
const category = (meta.category && meta.category[locale]) || meta.category || 'topLevel';
if (!menuItems[category]) {
menuItems[category] = {};
}