Merge branch 'master' into new-design-language

components/badge/ScrollNumber.jsx

@@ -76,6 +76,7 @@ class AntScrollNumber extends React.Component {
       className: `${this.props.prefixCls}-only`,
       style: {
         transition: removeTransition && 'none',
+        WebkitTransform: `translate3d(0, ${-position * height}px, 0)`,
         transform: `translate3d(0, ${-position * height}px, 0)`,
         height,
       },

components/date-picker/index.jsx

@@ -115,7 +115,7 @@ function createPicker(TheCalendar, defaultFormat) {
         pickerClass += ' ant-calendar-picker-open';
       }
       return (
-        <span className={pickerClass}>
+        <span className={pickerClass} style={this.props.style}>
           <DatePicker
             transitionName={this.props.transitionName}
             disabled={this.props.disabled}
@@ -138,7 +138,6 @@ function createPicker(TheCalendar, defaultFormat) {
                       onChange={this.handleInputChange}
                       value={value && this.getFormatter().format(value)}
                       placeholder={placeholder}
-                      style={this.props.style}
                       className={`ant-calendar-picker-input ant-input${sizeClass}`} />
                     <span className="ant-calendar-picker-icon" />
                   </span>

components/dropdown/dropdown.jsx

@@ -6,6 +6,8 @@ export default React.createClass({
     return {
       transitionName: 'slide-up',
       prefixCls: 'ant-dropdown',
+      mouseEnterDelay: 0.15,
+      mouseLeaveDelay: 0.1,
     };
   },
   render() {

components/menu/index.md

@@ -17,9 +17,9 @@
 
 ```html
 <Menu>
-  <MenuItem>菜单项</MenuItem>
+  <Menu.Item>菜单项</Menu.Item>
   <SubMenu title="子菜单">
-    <MenuItem>子菜单项</MenuItem>
+    <Menu.Item>子菜单项</Menu.Item>
   </SubMenu>
 </Menu>
 ```

components/popconfirm/index.jsx

@@ -2,7 +2,9 @@ import React from 'react';
 import Tooltip from 'rc-tooltip';
 import Icon from '../icon';
 import Button from '../button';
+import getPlacements from '../popover/placements';
 
+const placements = getPlacements();
 const prefixCls = 'ant-popover';
 const noop = function () {};
 const transitionNames = {
@@ -66,10 +68,10 @@ export default React.createClass({
     const overlay = (
       <div>
         <div className={`${prefixCls}-content`}>
-          <p className={`${prefixCls}-message`}>
+          <div className={`${prefixCls}-message`}>
             <Icon type="exclamation-circle" />
-            {title}
+            <div className={`${prefixCls}-message-title`}>{title}</div>
-          </p>
+          </div>
           <div className={`${prefixCls}-buttons`}>
             <Button onClick={this.cancel} type="ghost" size="small">{cancelText}</Button>
             <Button onClick={this.confirm} type="primary" size="small">{okText}</Button>
@@ -81,7 +83,9 @@ export default React.createClass({
     const transitionName = transitionNames[placement];
 
     return (
-      <Tooltip {...restProps} placement={placement}
+      <Tooltip {...restProps}
+        placement={placement}
+        builtinPlacements={placements}
         overlayStyle={overlayStyle}
         prefixCls={prefixCls}
         onVisibleChange={this.onVisibleChange}

components/popover/index.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import Tooltip from 'rc-tooltip';
+import getPlacements from './placements';
 
+const placements = getPlacements();
 const prefixCls = 'ant-popover';
 
 const Popover = React.createClass({
@@ -33,6 +35,7 @@ const Popover = React.createClass({
 
     return (
       <Tooltip transitionName={transitionName}
+        builtinPlacements={placements}
         ref="tooltip"
         {...this.props}
         overlay={this.getOverlay()}>

components/popover/placements.js

@@ -0,0 +1,84 @@
+const autoAdjustOverflow = {
+  adjustX: 1,
+  adjustY: 1,
+};
+
+const targetOffset = [0, 0];
+
+export default function getPlacements(config = {}) {
+  const { arrowWidth = 5, horizontalArrowShift = 16, verticalArrowShift = 12 } = config;
+  return {
+    left: {
+      points: ['cr', 'cl'],
+      overflow: autoAdjustOverflow,
+      offset: [-4, 0],
+      targetOffset,
+    },
+    right: {
+      points: ['cl', 'cr'],
+      overflow: autoAdjustOverflow,
+      offset: [4, 0],
+      targetOffset,
+    },
+    top: {
+      points: ['bc', 'tc'],
+      overflow: autoAdjustOverflow,
+      offset: [0, -4],
+      targetOffset,
+    },
+    bottom: {
+      points: ['tc', 'bc'],
+      overflow: autoAdjustOverflow,
+      offset: [0, 4],
+      targetOffset,
+    },
+    topLeft: {
+      points: ['bl', 'tc'],
+      overflow: autoAdjustOverflow,
+      offset: [-(horizontalArrowShift + arrowWidth), -4],
+      targetOffset,
+    },
+    leftTop: {
+      points: ['tr', 'cl'],
+      overflow: autoAdjustOverflow,
+      offset: [-4, -(verticalArrowShift + arrowWidth)],
+      targetOffset,
+    },
+    topRight: {
+      points: ['br', 'tc'],
+      overflow: autoAdjustOverflow,
+      offset: [horizontalArrowShift + arrowWidth, -4],
+      targetOffset,
+    },
+    rightTop: {
+      points: ['tl', 'cr'],
+      overflow: autoAdjustOverflow,
+      offset: [4, -(verticalArrowShift + arrowWidth)],
+      targetOffset,
+    },
+    bottomRight: {
+      points: ['tr', 'bc'],
+      overflow: autoAdjustOverflow,
+      offset: [horizontalArrowShift + arrowWidth, 4],
+      targetOffset,
+    },
+    rightBottom: {
+      points: ['bl', 'cr'],
+      overflow: autoAdjustOverflow,
+      offset: [4, verticalArrowShift + arrowWidth],
+      targetOffset,
+    },
+    bottomLeft: {
+      points: ['tl', 'bc'],
+      overflow: autoAdjustOverflow,
+      offset: [-(horizontalArrowShift + arrowWidth), 4],
+      targetOffset,
+    },
+    leftBottom: {
+      points: ['br', 'cl'],
+      overflow: autoAdjustOverflow,
+      offset: [-4, verticalArrowShift + arrowWidth],
+      targetOffset,
+    },
+  };
+}

components/table/demo/row-selection-and-operation.md

@@ -33,7 +33,7 @@ for (let i = 0; i < 46; i++) {
 const App = React.createClass({
   getInitialState() {
     return {
-      selectedRowKeys: [],
+      selectedRowKeys: [],  // 这里配置默认勾选列
       loading: false,
     };
   },

components/table/demo/row-selection-props.md

@@ -12,9 +12,7 @@ import { Table } from 'antd';
 const columns = [{
   title: '姓名',
   dataIndex: 'name',
-  render(text) {
+  render: text => <a href="#">{text}</a>,
-    return <a href="#">{text}</a>;
-  }
 }, {
   title: '年龄',
   dataIndex: 'age'
@@ -43,19 +41,9 @@ const data = [{
 const rowSelection = {
   getCheckboxProps(record) {
     return {
-      defaultChecked: record.name === '李大嘴', // 配置默认勾选的列
       disabled: record.name === '胡彦祖'    // 配置无法勾选的列
     };
   },
-  onChange(selectedRowKeys) {
-    console.log(`selectedRowKeys changed: ${selectedRowKeys}`);
-  },
-  onSelect(record, selected, selectedRows) {
-    console.log(record, selected, selectedRows);
-  },
-  onSelectAll(selected, selectedRows) {
-    console.log(selected, selectedRows);
-  },
 };
 
 ReactDOM.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />

components/table/index.jsx

@@ -86,7 +86,7 @@ let AntTable = React.createClass({
   componentWillReceiveProps(nextProps) {
     if (('pagination' in nextProps) && nextProps.pagination !== false) {
       this.setState({
-        pagination: objectAssign({}, this.state.pagination, nextProps.pagination)
+        pagination: objectAssign({}, defaultPagination, this.state.pagination, nextProps.pagination)
       });
     }
     // dataSource 的变化会清空选中项

components/tooltip/index.jsx

@@ -1,5 +1,10 @@
 import React from 'react';
 import Tooltip from 'rc-tooltip';
+import getPlacements from '../popover/placements';
+
+const placements = getPlacements({
+  verticalArrowShift: 8,
+});
 
 export default React.createClass({
   getDefaultProps() {
@@ -42,6 +47,7 @@ export default React.createClass({
 
     return (
       <Tooltip transitionName={transitionName}
+        builtinPlacements={placements}
         overlay={this.props.title}
         visible={visible}
         onVisibleChange={this.onVisibleChange}

components/upload/index.jsx

@@ -142,7 +142,7 @@ const AntUpload = React.createClass({
     targetItem.percent = e.percent;
     this.onChange({
       event: e,
-      file,
+      file: targetItem,
       fileList: this.state.fileList
     });
   },

docs/react/getting-started.md

@@ -119,7 +119,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
     <!-- 引入样式 -->
     <link rel="stylesheet" href="/index.css">
     <!-- Polyfills -->
-    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
+    <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"></script>
   </head>
   <body>
   </body>

package.json

@@ -72,6 +72,7 @@
     "warning": "~2.1.0"
   },
   "devDependencies": {
+    "autoprefixer": "^6.3.3",
     "babel-cli": "^6.2.0",
     "babel-core": "^6.2.1",
     "babel-jest": "^6.0.1",

scripts/demo.js

@@ -394,7 +394,7 @@ InstantClickChangeFns.push(function() {
     navMenu.removeClass('nav-hide').addClass('nav-show');
   });
 
-  $('body').on('click', function (e) {
+  $('body').on('click touchstart', function (e) {
     if (e.target !== $('.nav-phone-icon')[0] &&
         !navMenu[0].contains(e.target) &&
         navMenu.hasClass('nav-show')) {

site/templates/layout.html

@@ -13,7 +13,7 @@
     <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">
-    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/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 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() {
       window.ANT_COMPONENTS = [];

style/components/badge.less

@@ -5,6 +5,7 @@
   position: relative;
   display: inline-block;
   line-height: 1;
+  vertical-align: middle;
 
   &-count {
     position: absolute;

style/components/button.less

@@ -101,22 +101,24 @@
   &-clicked:before {
   	content: '';
   	position: absolute;
-  	top: -6px;
+  	top: 0;
-  	left: -6px;
+  	left: 0;
-  	bottom: -6px;
+  	bottom: 0;
-  	right: -6px;
+  	right: 0;
   	border-radius: inherit;
-  	z-index: -1;
+    border: 0 solid @primary-color;
-    background: inherit;
+  	opacity: 0.4;
-  	opacity: 1;
+    animation: buttonEffect 0.36s ease forwards;
-  	transform: scale3d(0.5, 0.5, 1);
-    animation: buttonEffect 0.48s ease forwards;
   }
 }
 
 @keyframes buttonEffect {
 	to {
 		opacity: 0;
-		transform: scale3d(1, 1, 1);
+    top: -5px;
+  	left: -5px;
+  	bottom: -5px;
+  	right: -5px;
+    border-width: 5px;
 	}
 }

style/components/form.less

@@ -242,6 +242,12 @@ form {
   .@{css-prefix}form-item {
     display: inline-block;
     margin-right: 10px;
+    margin-bottom: 0;
+
+    &-with-help {
+      margin-bottom: 24px;
+    }
+
     > div {
       display: inline-block;
     }

style/components/popover.less

@@ -102,9 +102,13 @@
     padding: 8px 0 16px;
     font-size: 12px;
     color: @text-color;
-    .anticon {
+    > .anticon {
-      margin-right: 8px;
       color: @error-color;
+      line-height: 17px;
+      position: absolute;
+    }
+    &-title {
+      padding-left: 20px;
     }
   }
 

style/mixins/button.less

@@ -200,10 +200,10 @@
     position: absolute;
     top: 0;
     left: 0;
+    right: 0;
+    bottom: 0;
     display: inline-block;
     .opacity(0);
-    width: 100%;
-    height: 100%;
     border-radius: 50% 50%;
     content: " ";
     .scale(0, 0);

webpack.config.js

@@ -2,6 +2,7 @@ var webpack = require('webpack');
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
 var path = require('path');
 var pkg = require('./package');
+var autoprefixer = require('autoprefixer');
 
 var entry = {};
 entry['demo'] = ['./scripts/demo.js', 'webpack-hot-middleware/client'];
@@ -26,10 +27,6 @@ module.exports = {
 
   module: {
     loaders: [{
-      test: /\.jsx?$/,
-      exclude: /node_modules/,
-      loader: 'es3ify',
-    }, {
       test: /\.jsx?$/,
       exclude: /node_modules/,
       loader: 'babel',
@@ -57,6 +54,8 @@ module.exports = {
     }]
   },
 
+  postcss: [autoprefixer],
+
   plugins: [
     new ExtractTextPlugin('[name].css'),
     new webpack.optimize.OccurenceOrderPlugin(),