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

This commit is contained in:
偏右 2016-03-28 13:47:30 +08:00
commit 5675faf621
33 changed files with 163 additions and 110 deletions

1
.gitignore vendored
View File

@ -21,6 +21,7 @@ node_modules/
npm-debug.log
nohup.out
_site
_data
dist
lib
elasticsearch-*

View File

@ -4,6 +4,14 @@
---
## 0.12.12
`2016-03-18`
- [设计资源](http://ant.design/docs/resource/download)文件更新。
- 修复 Popover 和 Popconfirm 箭头消失的问题。
- 修复一个 Table 切换分页长度时的页码溢出的问题。
## 0.12.11
`2016-03-16`
@ -283,6 +291,7 @@
- 移除 `animation` 属性,并在 `tabPosition="top|bottom"` 时默认启用切换动画。
- Timepicker
- **重命名为 TimePicker。**
- 国际化属性 `locale` 结构发生了 [变化](https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384)。
- 新增 `value` 属性。
- 新增属性 `disabledHours` `disabledMinutes` `disabledSeconds`。[演示](http://ant.design/components/time-picker/#picker-demo-disable-options)
- 移除 `hourOptions` `minuteOptions` `secondOptions`,新增 `hideDisabled` 属性用于替代。

View File

@ -52,14 +52,6 @@ const Breadcrumb = React.createClass({
if (routes && routes.length > 0) {
const paths = [];
crumbs = routes.map((route, i) => {
if (!route.breadcrumbName) {
return null;
}
const name = route.breadcrumbName.replace(/\:(.*)/g, (replacement, key) => {
return params[key] || replacement;
});
let link;
let path = route.path.replace(/^\//, '');
Object.keys(params).forEach(key => {
path = path.replace(`:${key}`, params[key]);
@ -68,6 +60,14 @@ const Breadcrumb = React.createClass({
paths.push(path);
}
if (!route.breadcrumbName) {
return null;
}
const name = route.breadcrumbName.replace(/\:(.*)/g, (replacement, key) => {
return params[key] || replacement;
});
let link;
if (i === routes.length - 1) {
link = <span>{name}</span>;
} else {

View File

@ -14,6 +14,6 @@ function onChange(value) {
}
ReactDOM.render(
<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" onChange={onChange} style={{ width: 160 }} />
<DatePicker showTime format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" onChange={onChange} />
, mountNode);
````

View File

@ -114,8 +114,15 @@ function createPicker(TheCalendar, defaultFormat) {
if (this.state.open) {
pickerClass += ' ant-calendar-picker-open';
}
// default width for showTime
const pickerStyle = {};
if (this.props.showTime) {
pickerStyle.width = 180;
}
return (
<span className={pickerClass} style={this.props.style}>
<span className={pickerClass} style={{ ...pickerStyle, ...this.props.style }}>
<DatePicker
transitionName={this.props.transitionName}
disabled={this.props.disabled}

View File

@ -83,7 +83,7 @@ ReactDOM.render(
label="Radio 单选框:"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }} >
<RadioGroup value="b">
<RadioGroup>
<Radio value="a">A</Radio>
<Radio value="b">B</Radio>
<Radio value="c">C</Radio>

View File

@ -16,7 +16,7 @@ const SearchInput = React.createClass({
getInitialState() {
return {
value: '',
focus: false
focus: false,
};
},
handleInputChange(e) {
@ -48,7 +48,7 @@ const SearchInput = React.createClass({
<Input {...this.props} value={this.state.value} onChange={this.handleInputChange}
onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} />
<div className="ant-input-group-wrap">
<Button className={btnCls} onClick={this.handleSearch}>
<Button className={btnCls} size={this.props.size} onClick={this.handleSearch}>
<Icon type="search" />
</Button>
</div>

View File

@ -81,7 +81,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
| getFieldError | 获取某个输入控件的 Error | Function(name) | | |
| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) | | |
| resetFields | 重置一组输入控件的值与状态,如不传入参数,则重置所有组件 | Function([names: string[]]) | | |
| getFieldProps 详见下面描述 | | | | |
| getFieldProps | 用于和表单进行双向绑定,详见下方描述 | | | |
#### this.props.form.getFieldProps(id, options)
@ -130,8 +130,9 @@ CustomizedForm = Form.create({})(CustomizedForm);
#### Input.Group
```html
<Input.Group className={string}> // 样式类名前缀,默认是 ant-input-group通常您不需要设置。
{children}
<Input.Group className={string}>
<Input />
<Input />
</Input.Group>
```

View File

@ -20,9 +20,9 @@
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|---------------|--------|
| placement | 气泡框位置,可选 `top/left/right/bottom` `topLeft/topRight/bottomLeft/bottomRight` `leftTop/leftBottom/rightTop/rightBottom` | string | top |
| title | 确认框的描述 | string | 无 |
| title | 确认框的描述 | React.Element | 无 |
| onConfirm | 点击确认的回调 | function | 无 |
| onCancel | 卡片内容 | function | 无 |
| onCancel | 点击取消的回调 | function | 无 |
| onVisibleChange | 显示隐藏的回调 | function(visible) | 无 |
| okText | 确认按钮文字 | String | 确定 |
| cancelText| 取消按钮文字 | String | 取消 |

View File

@ -2,7 +2,7 @@
- order: 0
最简单的用法。
最简单的用法,浮层的大小由内容区域决定
---

View File

@ -54,43 +54,44 @@ const columns = [{
### Table
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------------|--------------------------|-----------------|---------------------|---------|
| rowSelection | 列表项是否可选择 | Object | [配置项](#rowSelection) | null |
| pagination | 分页器 | Object | 配置项参考 [pagination](/components/pagination),设为 false 时不显示分页 | |
| size | 正常或迷你类型 | String | `default` or `small`| default |
| dataSource | 数据数组 | Array | | |
| columns | 表格列的配置描述,具体项见下表 | Array | | 无 |
| rowKey | 表格行 key 的取值 | Function(record, index):string | | record.key |
| expandedRowRender | 额外的展开行 | Function | | - |
| defaultExpandedRowKeys | 默认展开的行 | Array | | - |
| onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) | | |
| loading | 页面是否加载中 | Boolean | | false |
| locale | 默认文案设置,目前包括排序、过滤、空数据文案 | Object | | `{ filterConfirm: '确定', filterReset: '重置', emptyText: '暂无数据' }` [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
| indentSize | 展示树形数据时,每层缩进的宽度,以 px 为单位 | Number | | 15 |
| onRowClick | 处理行点击事件 | Function(record, index) | | 无 |
| useFixedHeader | 是否固定表头 | Boolean | | false |
| bordered | 是否展示外边框和列边框 | Boolean | | false |
| showHeader | 是否显示表头 | Boolean | | true |
| footer | 表格底部自定义渲染函数 | Function(currentPageData) | | |
| 参数 | 说明 | 类型 | 默认值 |
|---------------|--------------------------|-----------------|---------|
| rowSelection | 列表项是否可选择,[配置项](#rowSelection) | Object | null |
| pagination | 分页器,配置项参考 [pagination](/components/pagination),设为 false 时不显示分页 | Object | |
| size | 正常或迷你类型,`default` or `small` | String | default |
| dataSource | 数据数组 | Array | |
| columns | 表格列的配置描述,具体项见下表 | Array | - |
| rowKey | 表格行 key 的取值 | Function(record, index):string | record.key |
| rowClassName | 表格行的类名 | Function(record, index):string | - |
| expandedRowRender | 额外的展开行 | Function | - |
| defaultExpandedRowKeys | 默认展开的行 | Array | - |
| onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) | |
| loading | 页面是否加载中 | Boolean | false |
| locale | 默认文案设置,目前包括排序、过滤、空数据文案 | Object | filterConfirm: '确定' <br> filterReset: '重置' <br> emptyText: '暂无数据' <br> [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
| indentSize | 展示树形数据时,每层缩进的宽度,以 px 为单位 | Number | 15 |
| onRowClick | 处理行点击事件 | Function(record, index) | - |
| useFixedHeader | 是否固定表头 | Boolean | false |
| bordered | 是否展示外边框和列边框 | Boolean | false |
| showHeader | 是否显示表头 | Boolean | true |
| footer | 表格底部自定义渲染函数 | Function(currentPageData) | |
### Column
列描述数据对象,是 columns 中的一项。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------------------|-----------------|---------------------|---------|
| title | 列头显示文字 | String or React.Element | | |
| key | React 需要的 key建议设置 | String | | |
| dataIndex | 列数据在数据项中对应的 key | String | | |
| render | 生成复杂数据的渲染函数,参数分别为当前列的值,当前列数据,列索引,@return里面可以设置表格[行/列合并](#demo-colspan-rowspan) | Function(text, record, index) {} | | |
| filters | 表头的筛选菜单项 | Array | | |
| onFilter | 本地模式下,确定筛选的运行函数 | Function | | |
| filterMultiple | 是否多选 | Boolean | | true |
| sorter | 排序函数,本地排序使用一个函数,需要服务端排序可设为 true | Function or Boolean | | 无 |
| colSpan | 表头列合并,设置为 0 时,不渲染 | Number | | |
| width | 列宽度 | String or Number | | 无 |
| className | 列的 className | String | | 无 |
| title | 列头显示文字 | String or React.Element | |
| key | React 需要的 key建议设置 | String | |
| dataIndex | 列数据在数据项中对应的 key | String | |
| render | 生成复杂数据的渲染函数,参数分别为当前列的值,当前列数据,列索引,@return里面可以设置表格[行/列合并](#demo-colspan-rowspan) | Function(text, record, index) {} | |
| filters | 表头的筛选菜单项 | Array | |
| onFilter | 本地模式下,确定筛选的运行函数 | Function | |
| filterMultiple | 是否多选 | Boolean | true |
| sorter | 排序函数,本地排序使用一个函数,需要服务端排序可设为 true | Function or Boolean | - |
| colSpan | 表头列合并,设置为 0 时,不渲染 | Number | |
| width | 列宽度 | String or Number | - |
| className | 列的 className | String | - |
### rowSelection

View File

@ -86,7 +86,7 @@ const AntTimePicker = React.createClass({
}
let className = classNames({
[props.className]: !!props.className,
[`${props.prefixCls}-${props.size}`]: true,
[`${props.prefixCls}-${props.size}`]: !!props.size,
});
if (props.format.indexOf('ss') < 0) {
props.showSecond = false;

View File

@ -34,6 +34,6 @@ API
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 |
| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 |
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
| locale | 国际化配置 | Object | [默认配置](https://github.com/ant-design/ant-design/issues/424) |
| locale | 国际化配置 | Object | [默认配置](https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384) |
<style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>

View File

@ -112,16 +112,11 @@ const AntUpload = React.createClass({
onSuccess(response, file) {
this.clearProgressTimer();
// json
//
try {
if (typeof response === 'string') {
JSON.parse(response);
}
} catch (e) {
this.onError(new Error('No response'), response, file);
return;
response = JSON.parse(response);
}
} catch (e) {/* do nothing */}
let fileList = this.state.fileList;
let targetItem = getFileItem(file, fileList);
//

View File

@ -31,8 +31,8 @@
</tr>
<tr>
<th>总结</th>
<td>一般适用在浏览性强、门户性质的网站,以及一些比较前台化的应用。</td>
<td>适用在操作性强、中后台管理性质的应用。</td>
<td>一般适用在浏览性强、门户性质的网站,以及一些比较前台化的应用。</td>
</tr>
</Table>

View File

@ -102,12 +102,13 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
<style>
.code-line-highlight {
box-shadow: 0px 184px 0px rgba(255, 207, 0, 0.16);
box-shadow: 0px 184px 0px rgba(255, 207, 0, 0.1);
height: 42px;
margin-top: -42px;
position: relative;
z-index: 1;
width: 80%;
pointer-events: none;
}
</style>
@ -130,12 +131,18 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
</html>
```
另外,由于 `babel@6.x` 对 IE8 的支持不佳,你可能会遇到类似 [#28](https://github.com/ant-tool/atool-build/issues/28) 和 [#858](https://github.com/ant-design/ant-design/issues/858) 的 default 报错的问题。
[antd-init](http://github.com/ant-design/antd-init) 脚手架已经解决了这个问题,你也可以参照这个 [webpack 配置](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8)。
> 更多 IE8 下使用 React 的相关问题可以参考https://github.com/xcatliu/react-ie8
## 自行构建
如果想自己维护工作流,我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试。理论上你可以利用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#boilerplates) 进行开发,如果遇到问题可参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) 进行 [定制](http://ant-tool.github.io/webpack-config.htm)。
目前社区也有很多基于 antd 定制的 [脚手架](https://github.com/ant-design/ant-design/issues/129),欢迎进行试用和贡献。
### 改变主色系
- [配置代码示例](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme)

View File

@ -5,7 +5,7 @@
---
这里只列出升级中的不兼容改动,其他改动见 [Changelog](/changelog)。
此处着重列出升级中的不兼容变化和推荐改动。所有变动请见 [Changelog](/changelog)。
## 0.11 => 0.12
@ -77,6 +77,10 @@ import 'antd/style/index.less';
如果无法理解受控组件,只须在发现在选中日期后 `Datepicker` 显示的值不变的情况后,把其 `value` 属性改为 `defaultValue` 即可。
### TimePicker locale 结构改变
属性 `locale` 结构发生了 [变化](https://github.com/ant-design/ant-design/commit/fd1312803fd49586ded9af39d923457540c515cc#diff-fe4bfc98d91fc3dab8f391e3258622d4L1),需要将原有的属性改为现有的[结构](https://github.com/ant-design/ant-design/issues/1270#issuecomment-201181384)。
### 其他
- Alert 组件默认不展示样式,可以用 `showIcon` 属性添加图标。

View File

@ -29,7 +29,8 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的
- [Ant Design of React](/docs/react/introduce)(官方实现)
- [vue-antd](https://github.com/okoala/vue-antd)
- [antd-ember](https://github.com/idcos/antd-ember)
## 如何贡献
我们欢迎任何形式的贡献,有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls),或者给我们[提问](https://github.com/ant-design/ant-design/issues)。
我们欢迎任何形式的贡献,有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls),或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。

View File

@ -93,6 +93,7 @@ exports.middlewares = [
name: 'webpackDevMiddleware',
filter: /\.(js|css|json)(\.map)?(\?.*)?$/,
handle: function(req, res, next) {
req.path = req.path || req.url;
handler = handler || webpackMiddleware(webpackCompiler, {
publicPath: webpackConfig.output.publicPath,
lazy: false,

View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "0.12.11",
"version": "0.12.12",
"title": "Ant Design",
"description": "一个 UI 设计语言",
"homepage": "http://ant.design/",

View File

@ -59,6 +59,7 @@ a:hover {
background: #2db7f5;
color: #fff;
}
::-moz-selection {
background: #2db7f5;
color: #fff;
@ -667,6 +668,11 @@ footer ul li > a {
margin-left: 0.5em;
}
.api-container table {
font-family: consolas;
font-size: 13px;
}
.prev-next-nav {
position: absolute;
bottom: 0;

View File

@ -12,7 +12,7 @@
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
{% block styles %}{% endblock %}
<link rel="stylesheet" href="{{static_url('../dist/demo.css')}}?20160114">
<link rel="stylesheet" href="{{static_url('../dist/demo.css')}}">
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js,jquery/1.11.3/jquery.min.js,bluebird/3.1.1/bluebird.min.js"></script>
<script>
(function() {
@ -44,7 +44,7 @@
latest: '{{config.package.version}}'
};
</script>
<script src="{{static_url('../dist/demo.js')}}?20160114"></script>
<script src="{{static_url('../dist/demo.js')}}"></script>
{% block scripts %}{% endblock %}
</head>
<body {% block bodyAttribute %}{% endblock %}>

View File

@ -65,14 +65,12 @@
}
&-menus {
font-size: 12px;
overflow: hidden;
background: #fff;
position: absolute;
border: 1px solid @border-color-base;
border-radius: @border-radius-base;
box-shadow: @box-shadow-base;
white-space: nowrap;
height: 180px;
&-empty,
&-hidden {
display: none;

View File

@ -38,11 +38,6 @@
outline: none;
}
&-open > span:first-child {
transition: opacity 0.3s ease;
opacity: 0;
}
&-icon {
position: absolute;
user-select: none;

View File

@ -204,7 +204,8 @@ form {
.ant-search-btn {
.btn-default;
border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
margin-left: -30px;
margin-left: -100%;
left: -1px;
position: relative;
border-width: 0 0 0 1px;
z-index: 2;
@ -391,6 +392,10 @@ form {
}
}
.@{select-prefix-cls}-combobox .@{select-prefix-cls}-search__field:focus {
box-shadow: none;
}
// ant-datepicker
.@{calendar-prefix-cls}-picker-icon:after {
color: @error-color;

View File

@ -35,6 +35,10 @@
transition: all 0.3s ease;
}
&-submenu &-sub {
cursor: initial;
}
&-item > a {
display: block;
color: @text-color;

View File

@ -1,7 +1,7 @@
@radio-group-prefix-cls: ant-radio-group;
@radio-prefix-cls: ant-radio;
@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
@radio-duration: .3s;
@radio-duration: .2s;
.@{radio-group-prefix-cls} {
display: inline-block;
@ -38,7 +38,8 @@
content: ' ';
background-color: @primary-color;
opacity: 0;
transition: transform @radio-duration @ease-in-out-circ, opacity @radio-duration @ease-in-out-circ, background-color @radio-duration @ease-in-out-circ;
transform: scale(0);
transition: all @radio-duration @ease-in-out-circ;
}
position: relative;
@ -52,7 +53,7 @@
border-radius: 14px;
border-color: @border-color-base;
background-color: #fff;
transition: border-color @radio-duration @ease-in-out-circ, background-color @radio-duration @ease-in-out-circ;
transition: all @radio-duration @ease-in-out-circ;
}
&-input {
@ -74,7 +75,7 @@
&:after {
transform: scale(1);
opacity: 1;
transition: transform @radio-duration @ease-out-back, opacity @radio-duration @ease-in-out-circ, background-color @radio-duration @ease-in-out-circ;
transition: all @radio-duration @ease-in-out-circ;
}
}
}

View File

@ -7,6 +7,8 @@
.@{table-prefix-cls} {
font-size: @font-size-base;
color: @text-color;
border-radius: @border-radius-base @border-radius-base 0 0;
overflow: hidden;
&-body {
transition: opacity 0.3s ease;
@ -17,15 +19,13 @@
max-width: 100%;
border-collapse: separate;
text-align: left;
border-radius: @border-radius-base;
overflow: hidden;
}
th {
background: @table-head-background-color;
font-weight: bold;
transition: background .3s ease;
position: relative;
text-align: left;
.anticon-filter {
margin-left: 4px;
@ -351,6 +351,9 @@
&-column-hidden {
display: none;
}
th&-column-has-prev {
position: relative;
}
th&-column-has-prev,
td&-column-has-prev {
padding-left: 24px;

View File

@ -1,7 +1,5 @@
@tab-prefix-cls: ant-tabs;
@effect-duration: .3s;
.@{tab-prefix-cls} {
box-sizing: border-box;
position: relative;
@ -223,6 +221,7 @@
animation-play-state: paused;
animation-timing-function: @ease-in-out-quint;
opacity: 0;
animation-duration: 0.4s;
}
&-slide-horizontal-backward-enter&-slide-horizontal-backward-enter-active {
@ -240,6 +239,7 @@
.motion-common();
animation-play-state: paused;
animation-timing-function: @ease-in-out-quint;
animation-duration: 0.4s;
}
&-slide-horizontal-backward-leave&-slide-horizontal-backward-leave-active {
@ -253,6 +253,7 @@
animation-play-state: paused;
animation-timing-function: @ease-in-out-quint;
opacity: 0;
animation-duration: 0.4s;
}
&-slide-horizontal-forward-enter&-slide-horizontal-forward-enter-active {
@ -268,6 +269,7 @@
left: 0;
bottom: 0;
.motion-common();
animation-duration: 0.4s;
animation-play-state: paused;
animation-timing-function: @ease-in-out-quint;
}

View File

@ -46,14 +46,19 @@ input::-ms-clear, input::-ms-reveal {
display: none;
}
::selection {
background: @primary-color;
color: #fff;
}
// Links
// -- TODO --
a {
color: @link-color;
background: transparent;
text-decoration: none;
outline: none;
cursor: pointer;
transition: color .3s ease;
&:hover {
color: @link-hover-color;

View File

@ -27,6 +27,10 @@ module.exports = {
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'es3ify'
}, {
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
@ -63,5 +67,5 @@ module.exports = {
new webpack.NoErrorsPlugin()
],
devtool: 'source-map'
devtool: 'cheap-module-source-map'
};

View File

@ -8,6 +8,9 @@ config.plugins = [config.plugins[0], new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
output: {
ascii_only: true
},
compress: {
warnings: false
}
})];