mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

Merge 1.x-stable

Browse Source
This commit is contained in:
afc163 2016-06-23 23:11:14 +08:00
commit cc4cab5b1e
17 changed files with 125 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README-zh_CN.md
View File

@ -61,7 +61,8 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
- [网站和组件开发说明](https://github.com/ant-design/ant-design/wiki/%E7%BD%91%E7%AB%99%E5%92%8C%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91%E8%AF%B4%E6%98%8E)
- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [版本发布手册](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
## 如何贡献

10
README.md
View File

@ -14,8 +14,8 @@ We are now working on translate components document to English, and we need some
## Features
- An enterprise-class design language and high quality UI style.
- Rich library of UI components base on [React Component](http://react-component.github.io/badgeboard/).
- An enterprise-class design language and high quality UI.
- Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/).
- A npm + webpack + babel + dora [workflow](http://ant-tool.github.io/index.html).
## Install
@ -54,9 +54,9 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
```jsx
// import js and css modularly, parsed by babel-plugin-antd
import { DatePicker } from 'antd';
import { DatePicker } from 'antd';
```
- Manually import
```jsx
@ -94,7 +94,7 @@ tsconfig.json
- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
- [CodePen boilerplate](http://codepen.io/anon/pen/wGOWGW?editors=001) for bug reports

23
components/checkbox/style/mixin.less
View File

@ -151,6 +151,11 @@
.@{checkbox-inner-prefix-cls}-input {
cursor: default;
}
& + span {
color: #ccc;
cursor: @cursor-disabled;
}
}
.@{checkbox-prefix-cls}-wrapper {
@ -177,4 +182,22 @@
display: inline-block;
}
}
@ie8: \0screen;
// IE8 hack for https://github.com/ant-design/ant-design/issues/2148
@media @ie8 {
.@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:before,
.@{checkbox-prefix-cls}-checked .@{checkbox-prefix-cls}-inner:after {
font-family: 'anticon';
content: '\E62E';
font-weight: bold;
font-size: 8px;
border: 0;
color: #fff;
left: 2px;
top: 3px;
position: absolute;
}
}
}

20
components/date-picker/createPicker.tsx
View File

@ -4,6 +4,7 @@ import RcDatePicker from 'rc-calendar/lib/Picker';
import GregorianCalendar from 'gregorian-calendar';
import classNames from 'classnames';
import assign from 'object-assign';
import Icon from '../icon';
export default function createPicker(TheCalendar) {
// use class typescript error
@ -23,7 +24,14 @@ export default function createPicker(TheCalendar) {
}
},
handleChange(value) {
clearSelection = (e) => {
e.preventDefault();
e.stopPropagation();
this.setState({ value: null });
this.handleChange(null);
},
handleChange = (value) => {
const props = this.props;
if (!('value' in props)) {
this.setState({value});
@ -71,6 +79,11 @@ export default function createPicker(TheCalendar) {
pickerStyle.width = 180;
}
const clearIcon = (!props.disabled && this.state.value) ?
<Icon type="cross-circle"
className="ant-calendar-picker-clear"
onClick={this.clearSelection}
/> : null;
return (
<span className={props.pickerClass} style={assign({}, pickerStyle, props.style)}>
<RcDatePicker
@ -98,7 +111,8 @@ export default function createPicker(TheCalendar) {
placeholder={placeholder}
className={props.pickerInputClass}
/>
<span className="ant-calendar-picker-icon"/>
{clearIcon}
<span className="ant-calendar-picker-icon" />
</span>
);
}
@ -108,6 +122,6 @@ export default function createPicker(TheCalendar) {
);
},
});
return CalenderWrapper;
}

1
components/date-picker/style/Calendar.less
View File

@ -246,6 +246,7 @@
}
.@{calendar-prefix-cls}-clear-btn {
display: none;
position: absolute;
right: 5px;
text-indent: -76px;

22
components/date-picker/style/Picker.less
View File

@ -37,7 +37,29 @@
> input {
outline: none;
}
&-clear {
opacity: 0;
position: absolute;
right: 8px;
z-index: 1;
background: #fff;
top: 50%;
font-size: 12px;
color: #ccc;
width: 14px;
height: 14px;
margin-top: -7px;
line-height: 14px;
cursor: pointer;
transition: color 0.3s ease, opacity 0.15s ease;
&:hover {
color: #999;
}
}
&:hover &-clear {
opacity: 1;
}
&-icon {
position: absolute;
user-select: none;

8
components/date-picker/style/RangePicker.less
View File

@ -57,11 +57,19 @@
margin-left: -29px;
}
.@{calendar-prefix-cls}-time-picker-wrap {
left: 115px;
}
&-right .@{calendar-prefix-cls}-time-picker-wrap {
left: 100px;
}
&.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
margin-left: -15px;
}
.@{calendar-prefix-cls}-input-wrap {
position: relative;
height: @input-box-height;
}
.@{calendar-prefix-cls}-input {

18
components/date-picker/style/TimePicker.less
View File

@ -11,14 +11,17 @@
.@{calendar-prefix-cls}-clear-btn {
direction: ltr;
}
.@{calendar-prefix-cls}-time-picker-wrap {
position: absolute;
right: 0;
}
}
.@{calendar-prefix-cls}-input,
.@{timepicker-prefix-cls}-input {
.input;
border-radius: @border-radius-sm;
height: @input-height-sm;
width: 96px;
margin-right: 6px;
// .input;
}
.@{timepicker-prefix-cls}-input {
display: none;
}
.@{calendar-prefix-cls}-input {
padding-right: 21px;
@ -27,6 +30,9 @@
min-width: 168px;
}
.@{timepicker-prefix-cls}-icon {
display: none;
font-family: "anticon" !important;
position: relative;
content: "\E643";
display: inline;
}
}

6
components/form/index.md
View File

@ -76,9 +76,9 @@ CustomizedForm = Form.create({})(CustomizedForm);
| resetFields | 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) |
| getFieldProps | 用于和表单进行双向绑定，详见下方描述 | |
#### this.props.form.getFieldProps(id, options)
### this.props.form.getFieldProps(id, options)
##### 特别注意
#### 特别注意
`getFieldProps` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534
@ -86,6 +86,8 @@ CustomizedForm = Form.create({})(CustomizedForm);
> 在表单中 `defaultValue` 也不应该被设置，请使用下面的 `initialValue`。
#### getFieldProps options
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-----|--------|
| options.id | 必填输入控件唯一标志 | string | |

1
components/pagination/style/index.less
View File

@ -127,6 +127,7 @@
&-prev,
&-next {
border: 1px solid @border-color-base;
background-color: #fff;
a {
color: #666;

5
components/radio/style/index.less
View File

@ -106,6 +106,11 @@
.@{radio-inner-prefix-cls}-input {
cursor: default;
}
.@{radio-prefix-cls}-disabled + span {
color: #ccc;
cursor: @cursor-disabled;
}
}
span.@{radio-prefix-cls} + * {

4
components/table/Table.tsx
View File

@ -14,7 +14,9 @@ function noop() {
import splitObject from '../_util/splitObject';
function stopPropagation(e) {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
if (e.nativeEvent.stopImmediatePropagation) {
e.nativeEvent.stopImmediatePropagation();
}
}
const defaultLocale = {

8
docs/react/getting-started.md
View File

@ -30,6 +30,14 @@ $ npm install antd-init -g
更多功能请参考 [脚手架工具](https://github.com/ant-design/antd-init/) 和 [开发工具文档](http://ant-tool.github.io/)。
> 除了官方提供的脚手架，您也可以使用社区提供的脚手架和范例：
>
> - [react-redux-antd](https://github.com/okoala/react-redux-antd)
> - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
> - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
> - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
> - [更多](https://github.com/ant-design/ant-design/issues/129)
### 2. 创建一个项目
使用命令行进行初始化。

1
docs/react/introduce.md
View File

@ -74,6 +74,7 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
- [设计规范速查手册](https://os.alipayobjects.com/rmsportal/HTXUgPGkyyxEivE.png)
- [社区贡献脚手架和范例](https://github.com/ant-design/ant-design/issues/129)
## 谁在使用

2
site/theme/static/common.less
View File

@ -92,7 +92,7 @@ div.main-container {
display: block;
width: 64px;
margin: 0 auto 10px;
animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
animation: loadTween 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
}
#react-content:empty + .ant-site-loading {

2
site/theme/static/template.html
View File

@ -13,7 +13,7 @@
</head>
<body>
<div id="react-content"></div>
<div class="ant-site-loading">
<div class="ant-site-loading" id="ant-site-loading">
<img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' />
<div id="loading-text">A Design Language</div>
</div>

11
site/theme/template/Layout/index.jsx
View File

@ -55,6 +55,17 @@ export default class Layout extends React.Component {
});
gaListenerSetted = true;
}
const loadingNode = document.getElementById('ant-site-loading');
if (!loadingNode) {
return;
}
this.timer = setTimeout(() => {
loadingNode.parentNode.removeChild(loadingNode);
}, 450);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
render() {