resolve conflict.

2025-08-06 16:06:28 +08:00 · 2018-08-02 18:02:31 +08:00 · 2018-08-02 18:02:31 +08:00 · cc180e2605
commit cc180e2605
parent 35e56a41cd f01d436dd5
29 changed files with 483 additions and 85 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -124,7 +124,7 @@ jobs:
      - checkout
      - *attach_workspace
      - run:
-          command: npm test -- -w 2
+          command: npm test -- -w 1
          environment:
            LIB_DIR: dist

@ -135,7 +135,7 @@ jobs:
      - checkout
      - *attach_workspace
      - run:
-          command: npm test -- -w 2
+          command: npm test -- -w 1
          environment:
            LIB_DIR: lib

@ -146,7 +146,7 @@ jobs:
      - checkout
      - *attach_workspace
      - run:
-          command: npm test -- -w 2
+          command: npm test -- -w 1
          environment:
            LIB_DIR: es

@ -156,7 +156,7 @@ jobs:
    steps:
      - checkout
      - *attach_workspace
-      - run: npm test -- -w 2 --coverage
+      - run: npm test -- -w 1 --coverage
      - run: bash <(curl -s https://codecov.io/bash)

  test_node:
@ -165,7 +165,7 @@ jobs:
    steps:
      - checkout
      - *attach_workspace
-      - run: npm run test-node -- -w 2
+      - run: npm run test-node -- -w 1

  test_dist_15:
    <<: *container_config
@ -175,7 +175,7 @@ jobs:
      - *attach_workspace
      - *install_react
      - run:
-          command: npm test -- -w 2 -u
+          command: npm test -- -w 1 -u
          environment:
            LIB_DIR: dist

@ -187,7 +187,7 @@ jobs:
      - *attach_workspace
      - *install_react
      - run:
-          command: npm test -- -w 2 -u
+          command: npm test -- -w 1 -u
          environment:
            LIB_DIR: lib

@ -199,7 +199,7 @@ jobs:
      - *attach_workspace
      - *install_react
      - run:
-          command: npm test -- -w 2 -u
+          command: npm test -- -w 1 -u
          environment:
            LIB_DIR: es

@ -210,7 +210,7 @@ jobs:
      - checkout
      - *attach_workspace
      - *install_react
-      - run: npm test -- -w 2 -u
+      - run: npm test -- -w 1 -u

  test_node_15:
    <<: *container_config
@ -219,7 +219,7 @@ jobs:
      - checkout
      - *attach_workspace
      - *install_react
-      - run: npm run test-node -- -w 2 -u
+      - run: npm run test-node -- -w 1 -u

 workflows:
  version: 2
--- a/components/button/tests/snapshots/demo.test.js.snap
+++ b/components/button/tests/snapshots/demo.test.js.snap
@ -37,6 +37,43 @@ exports[`renders ./components/button/demo/basic.md correctly 1`] = `
 </div>
 `;

+exports[`renders ./components/button/demo/block.md correctly 1`] = `
+<div>
+  <button
+    class="ant-btn ant-btn-primary ant-btn-block"
+    type="button"
+  >
+    <span>
+      Primary
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-block"
+    type="button"
+  >
+    <span>
+      Default
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-dashed ant-btn-block"
+    type="button"
+  >
+    <span>
+      Dashed
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-danger ant-btn-block"
+    type="button"
+  >
+    <span>
+      danger
+    </span>
+  </button>
+</div>
+`;
+
 exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
 <div>
  <h4>
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@ -47,6 +47,7 @@ export interface BaseButtonProps {
  prefixCls?: string;
  className?: string;
  ghost?: boolean;
+  block?: boolean;
 }

 export type AnchorButtonProps = {
@ -70,6 +71,7 @@ export default class Button extends React.Component<ButtonProps, any> {
    prefixCls: 'ant-btn',
    loading: false,
    ghost: false,
+    block: false,
  };

  static propTypes = {
@ -81,6 +83,7 @@ export default class Button extends React.Component<ButtonProps, any> {
    loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
    className: PropTypes.string,
    icon: PropTypes.string,
+    block: PropTypes.bool,
  };

  timeout: number;
@ -163,7 +166,7 @@ export default class Button extends React.Component<ButtonProps, any> {

  render() {
    const {
-      type, shape, size, className, children, icon, prefixCls, ghost, loading: _loadingProp, ...rest
+      type, shape, size, className, children, icon, prefixCls, ghost, loading: _loadingProp, block, ...rest
    } = this.props;

    const { loading, clicked, hasTwoCNChar } = this.state;
@ -190,6 +193,7 @@ export default class Button extends React.Component<ButtonProps, any> {
      [`${prefixCls}-clicked`]: clicked,
      [`${prefixCls}-background-ghost`]: ghost,
      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar,
+      [`${prefixCls}-block`]: block,
    });

    const iconType = loading ? 'loading' : icon;
--- a/components/button/demo/block.md
+++ b/components/button/demo/block.md
@ -0,0 +1,27 @@
+---
+order: 9
+title:
+  zh-CN: block 按钮
+  en-US: block Button
+---
+
+## zh-CN
+
+`block`属性将使按钮适合其父宽度。
+
+## en-US
+
+`block` property will make the button fit to its parent width.
+
+````jsx
+import { Button } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Button type="primary" block>Primary</Button>
+    <Button block>Default</Button>
+    <Button type="dashed" block>Dashed</Button>
+    <Button type="danger" block>danger</Button>
+  </div>,
+  mountNode);
+````
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@ -27,6 +27,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
 | target | same as target attribute of a, works when href is specified | string | - |
 | type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` |
 | onClick | set the handler to handle `click` event | function | - |
+| block | option to fit button width to its parent width | boolean | `false` |

 `<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.

--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@ -30,6 +30,7 @@ subtitle: 按钮
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |
 | type | 设置按钮类型，可选值为 `primary` `dashed` `danger`(版本 2.7 中增加) 或者不设 | string | - |
 | onClick | `click` 事件的 handler | function | - |
+| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |

 `<Button>Hello world!</Button>` 最终会被渲染为 `<button><span>Hello world!</span></button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`。

--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@ -171,6 +171,10 @@
    letter-spacing: .34em;
    margin-right: -.34em;
  }
+
+  &-block {
+    width: 100%;
+  }
 }

@keyframes buttonEffect {
--- a/components/date-picker/RangePicker.tsx
+++ b/components/date-picker/RangePicker.tsx
@ -68,6 +68,7 @@ function fixLocale(value: RangePickerValue | undefined, localeCode: string) {
 class RangePicker extends React.Component<any, RangePickerState> {
  static defaultProps = {
    prefixCls: 'ant-calendar',
+    tagPrefixCls: 'ant-tag',
    allowClear: true,
    showToday: false,
  };
@ -209,7 +210,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
  }

  renderFooter = (...args: any[]) => {
-    const { prefixCls, ranges, renderExtraFooter } = this.props;
+    const { prefixCls, ranges, renderExtraFooter, tagPrefixCls } = this.props;
    if (!ranges && !renderExtraFooter) {
      return null;
    }
@ -223,6 +224,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
      return (
        <Tag
          key={range}
+          prefixCls={tagPrefixCls}
          color="blue"
          onClick={() => this.handleRangeClick(value)}
          onMouseEnter={() => this.setState({ hoverValue: value })}
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@ -4,7 +4,7 @@ import classNames from 'classnames';
 export interface DividerProps {
  prefixCls?: string;
  type?: 'horizontal' | 'vertical';
-  orientation?: 'left' | 'right';
+  orientation?: 'left' | 'right' | '';
  className?: string;
  children?: React.ReactNode;
  dashed?: boolean;
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@ -40,7 +40,7 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {

 export type ValidationRule = {
  /** validation error message */
-  message?: string;
+  message?: React.ReactNode;
  /** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */
  type?: string;
  /** indicates whether field is required */
--- a/components/input/Group.tsx
+++ b/components/input/Group.tsx
@ -6,6 +6,10 @@ export interface GroupProps {
  size?: 'large' | 'small' | 'default';
  children?: any;
  style?: React.CSSProperties;
+  onMouseEnter?: React.MouseEventHandler<HTMLSpanElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>;
+  onFocus?: React.FocusEventHandler<HTMLSpanElement>;
+  onBlur?: React.FocusEventHandler<HTMLSpanElement>;
  prefixCls?: string;
  compact?: boolean;
 }
@ -18,7 +22,14 @@ const Group: React.StatelessComponent<GroupProps> = (props) => {
    [`${prefixCls}-compact`]: props.compact,
  }, className);
  return (
-    <span className={cls} style={props.style}>
+    <span
+      className={cls}
+      style={props.style}
+      onMouseEnter={props.onMouseEnter}
+      onMouseLeave={props.onMouseLeave}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+    >
      {props.children}
    </span>
  );
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@ -128,25 +128,16 @@ export default class Input extends React.Component<InputProps, any> {

    // Need another wrapper for changing display:table to display:inline-block
    // and put style prop in wrapper
-    if (addonBefore || addonAfter) {
-      return (
-        <span
-          className={groupClassName}
-          style={props.style}
-        >
-          <span className={className}>
-            {addonBefore}
-            {React.cloneElement(children, { style: null })}
-            {addonAfter}
-          </span>
-        </span>
-      );
-    }
    return (
-      <span className={className}>
-        {addonBefore}
-        {children}
-        {addonAfter}
+      <span
+        className={groupClassName}
+        style={props.style}
+      >
+        <span className={className}>
+          {addonBefore}
+          {React.cloneElement(children, { style: null })}
+          {addonAfter}
+        </span>
      </span>
    );
  }
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@ -1,17 +1,18 @@
 import * as React from 'react';
 import Dialog from 'rc-dialog';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Button from '../button';
 import { ButtonType, NativeButtonProps } from '../button/button';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { getConfirmLocale } from './locale';
-import Icon from '../icon';

 let mousePosition: { x: number, y: number } | null;
 let mousePositionEventBinded: boolean;

 export interface ModalProps {
+  prefixCls?: string;
  /** 对话框是否可见*/
  visible?: boolean;
  /** 确定按钮 loading*/
@ -25,6 +26,8 @@ export interface ModalProps {
  /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调*/
  onCancel?: (e: React.MouseEvent<any>) => void;
  afterClose?: () => void;
+  /** 居中 */
+  centered?: boolean;
  /** 宽度*/
  width?: string | number;
  /** 底部内容*/
@ -52,7 +55,6 @@ export interface ModalProps {
  mask?: boolean;
  keyboard?: boolean;
  wrapProps?: any;
-  prefixCls?: string;
 }

 export interface ModalFuncProps {
@ -63,6 +65,7 @@ export interface ModalFuncProps {
  content?: React.ReactNode;
  onOk?: (...args: any[]) => any | PromiseLike<any>;
  onCancel?: (...args: any[]) => any | PromiseLike<any>;
+  centered?: boolean;
  width?: string | number;
  iconClassName?: string;
  okText?: string;
@ -113,6 +116,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
    onCancel: PropTypes.func,
    okText: PropTypes.node,
    cancelText: PropTypes.node,
+    centered: PropTypes.bool,
    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    confirmLoading: PropTypes.bool,
    visible: PropTypes.bool,
@ -177,7 +181,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
  }

  render() {
-    const { footer, visible, prefixCls } = this.props;
+    const { footer, visible, wrapClassName, centered, prefixCls, ...restProps } = this.props;

    const defaultFooter = (
      <LocaleReceiver
@ -188,20 +192,15 @@ export default class Modal extends React.Component<ModalProps, {}> {
      </LocaleReceiver>
    );

-    const closeIcon = (
-      <span className={`${prefixCls}-close-x`}>
-        <Icon className={`${prefixCls}-close-icon`} type={'close'}/>
-      </span>
-    );
-
    return (
      <Dialog
-        {...this.props}
+        {...restProps}
+        prefixCls={prefixCls}
+        wrapClassName={classNames({ [`${prefixCls}-centered`]: !!centered }, wrapClassName)}
        footer={footer === undefined ? defaultFooter : footer}
        visible={visible}
        mousePosition={mousePosition}
        onClose={this.handleCancel}
-        closeIcon={closeIcon}
      />
    );
  }
--- a/components/modal/confirm.tsx
+++ b/components/modal/confirm.tsx
@ -44,6 +44,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
  return (
    <Dialog
      className={classString}
+      wrapClassName={classNames({ [`${prefixCls}-centered`]: !!props.centered })}
      onCancel={close.bind(this, { triggerCancel: true })}
      visible={visible}
      title=""
--- a/components/modal/demo/position.md
+++ b/components/modal/demo/position.md
@ -7,11 +7,11 @@ title:

 ## zh-CN

-`1.0` 之后，Modal 的 `align` 属性被移除，您可以直接使用 `style.top` 或配合其他样式来设置对话框位置。
+`1.0` 之后，Modal 的 `align` 属性被移除，您可以直接使用 `centered` 或类似 `style.top` 等样式来设置对话框位置。

 ## en-US

-After release `1.0`, Modal's `align` prop was removed. You can use `style.top` or other styles to
+After release `1.0`, Modal's `align` prop was removed. You can use `centered`、`style.top` or other styles to
 set position of modal dialog.

 ````jsx
@ -50,7 +50,7 @@ class App extends React.Component {
        <Button type="primary" onClick={() => this.setModal2Visible(true)}>Vertically centered modal dialog</Button>
        <Modal
          title="Vertically centered modal dialog"
-          wrapClassName="vertical-center-modal"
+          centered
          visible={this.state.modal2Visible}
          onOk={() => this.setModal2Visible(false)}
          onCancel={() => this.setModal2Visible(false)}
@ -66,39 +66,3 @@ class App extends React.Component {

 ReactDOM.render(<App />, mountNode);
 ````
-
-````css
-/* use css to set position of modal */
-.vertical-center-modal {
-  text-align: center;
-  white-space: nowrap;
-}
-
-.vertical-center-modal:before {
-  content: '';
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-  width: 0;
-}
-
-.vertical-center-modal .ant-modal {
-  display: inline-block;
-  vertical-align: middle;
-  top: 0;
-  text-align: left;
-}
-
-/*
-// Use flex which not working in IE
-.vertical-center-modal {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vertical-center-modal .ant-modal {
-  top: 0;
-}
-*/
-````
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@ -21,6 +21,7 @@ and so on.
 | afterClose | Specify a function that will be called when modal is closed completely. | function | - |
 | bodyStyle | Body style for modal body element. Such as height, padding etc. | object | {} |
 | cancelText | Text of the Cancel button | string | `Cancel` |
+| centered | Centered Modal | Boolean | `false` |
 | closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true |
 | confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |
 | destroyOnClose | Whether to unmount child compenents on onClose | boolean | false |
@ -62,6 +63,7 @@ The properties of the object are follows:
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | cancelText | Text of the Cancel button | string | `Cancel` |
+| centered | Centered Modal | Boolean | `false` |
 | className | className of container | string | - |
 | content | Content | string\|ReactNode | - |
 | iconType | Icon `type` of the Icon component | string | `question-circle` |
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@ -20,6 +20,7 @@ title: Modal
 | afterClose | Modal 完全关闭后的回调 | function | 无 |
 | bodyStyle | Modal body 样式 | object | {} |
 | cancelText | 取消按钮文字 | string | 取消 |
+| centered | 垂直居中展示 Modal | Boolean | `false` |
 | closable | 是否显示右上角的关闭按钮 | boolean | true |
 | confirmLoading | 确定按钮 loading | boolean | 无 |
 | destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |
--- a/components/modal/style/modal.less
+++ b/components/modal/style/modal.less
@ -1,4 +1,5 @@
@dialog-prefix-cls: ~"@{ant-prefix}-modal";
+@table-prefix-cls: ~"@{ant-prefix}-table";

 .@{dialog-prefix-cls} {
  .reset-component;
@ -127,12 +128,35 @@
  }
 }

+.@{dialog-prefix-cls}-centered {
+  text-align: center;
+  &:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+    width: 0;
+  }
+  .@{dialog-prefix-cls} {
+    display: inline-block;
+    vertical-align: middle;
+    top: 0;
+    text-align: left;
+  }
+  .@{table-prefix-cls} {
+    &-body {
+      white-space: nowrap;
+      overflow-x: auto;
+    }
+  }
+}
+
@media (max-width: @screen-sm-max) {
  .@{dialog-prefix-cls} {
    width: auto !important;
    margin: 10px;
  }
-  .vertical-center-modal {
+  .@{dialog-prefix-cls}-centered {
    .@{dialog-prefix-cls} {
      flex: 1;
    }
--- a/components/style/core/iconfont.less
+++ b/components/style/core/iconfont.less
@ -4,6 +4,7 @@
 // font-face
@font-face {
  font-family: 'anticon';
+  font-display: fallback;
  src: url('@{icon-url}.eot'); /* IE9*/
  src:
  /* chrome、firefox */
--- a/components/timeline/Timeline.tsx
+++ b/components/timeline/Timeline.tsx
@ -11,6 +11,7 @@ export interface TimelineProps {
  pendingDot?: React.ReactNode;
  style?: React.CSSProperties;
  reverse?: boolean;
+  mode?: 'left' | 'alternate' | 'right';
 }

 export default class Timeline extends React.Component<TimelineProps, any> {
@ -18,6 +19,7 @@ export default class Timeline extends React.Component<TimelineProps, any> {
  static defaultProps = {
    prefixCls: 'ant-timeline',
    reverse: false,
+    mode: '',
  };

  render() {
@ -25,12 +27,14 @@ export default class Timeline extends React.Component<TimelineProps, any> {
      prefixCls,
      pending = null, pendingDot,
      children, className, reverse,
+      mode,
      ...restProps
    } = this.props;
    const pendingNode = typeof pending === 'boolean' ? null : pending;
    const classString = classNames(prefixCls, {
      [`${prefixCls}-pending`]: !!pending,
      [`${prefixCls}-reverse`]: !!reverse,
+      [`${prefixCls}-${mode}`]: !!mode,
    }, className);

    const pendingItem = !!pending ? (
@ -57,6 +61,9 @@ export default class Timeline extends React.Component<TimelineProps, any> {
          (!reverse && !!pending)
            ? (idx === itemsCount - 2) ? lastCls : ''
            : (idx === itemsCount - 1) ? lastCls : '',
+          (mode === 'alternate')
+            ? (idx % 2 === 0) ? `${prefixCls}-item-left` : `${prefixCls}-item-right`
+            : (mode === 'right') ? `${prefixCls}-item-right` : '',
        ]),
      }),
    );
--- a/components/timeline/tests/snapshots/demo.test.js.snap
+++ b/components/timeline/tests/snapshots/demo.test.js.snap
@ -1,5 +1,112 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`renders ./components/timeline/demo/alternate.md correctly 1`] = `
+<ul
+  class="ant-timeline ant-timeline-alternate"
+>
+  <li
+    class="ant-timeline-item ant-timeline-item-left"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Create a services site 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-green"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Solve initial network problems 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-left"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"
+    >
+      <i
+        class="anticon anticon-clock-circle-o"
+        style="font-size:16px"
+      />
+    </div>
+    <div
+      class="ant-timeline-item-content"
+    >
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-red"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Network problems being solved 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-left"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Create a services site 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"
+    >
+      <i
+        class="anticon anticon-clock-circle-o"
+        style="font-size:16px"
+      />
+    </div>
+    <div
+      class="ant-timeline-item-content"
+    >
+      Technical testing 2015-09-01
+    </div>
+  </li>
+</ul>
+`;
+
 exports[`renders ./components/timeline/demo/basic.md correctly 1`] = `
 <ul
  class="ant-timeline"
@ -302,3 +409,75 @@ exports[`renders ./components/timeline/demo/pending.md correctly 1`] = `
  </button>
 </div>
 `;
+
+exports[`renders ./components/timeline/demo/right.md correctly 1`] = `
+<ul
+  class="ant-timeline ant-timeline-right"
+>
+  <li
+    class="ant-timeline-item ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Create a services site 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Solve initial network problems 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-red"
+    >
+      <i
+        class="anticon anticon-clock-circle-o"
+        style="font-size:16px"
+      />
+    </div>
+    <div
+      class="ant-timeline-item-content"
+    >
+      Technical testing 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last ant-timeline-item-right"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Network problems being solved 2015-09-01
+    </div>
+  </li>
+</ul>
+`;
--- a/components/timeline/demo/alternate.md
+++ b/components/timeline/demo/alternate.md
@ -0,0 +1,29 @@
+---
+order: 3
+title:
+  zh-CN: 交替展现
+  en-US: Alternate
+---
+
+## zh-CN
+
+内容在时间轴两侧轮流出现。
+
+## en-US
+
+Alternate timeline.
+
+````jsx
+import { Timeline, Icon } from 'antd';
+
+ReactDOM.render(
+  <Timeline mode="alternate">
+    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+    <Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
+    <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</Timeline.Item>
+    <Timeline.Item color="red">Network problems being solved 2015-09-01</Timeline.Item>
+    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+    <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>Technical testing 2015-09-01</Timeline.Item>
+  </Timeline>,
+  mountNode);
+````
--- a/components/timeline/demo/right.md
+++ b/components/timeline/demo/right.md
@ -0,0 +1,27 @@
+---
+order: 4
+title:
+  zh-CN: 右侧时间轴点
+  en-US: Right alternate
+---
+
+## zh-CN
+
+时间轴点可以在内容的右边。
+
+## en-US
+
+Right alternate timeline.
+
+````jsx
+import { Timeline, Icon } from 'antd';
+
+ReactDOM.render(
+  <Timeline mode="right">
+    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
+    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
+    <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} color="red">Technical testing 2015-09-01</Timeline.Item>
+    <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
+  </Timeline>,
+  mountNode);
+````
--- a/components/timeline/index.en-US.md
+++ b/components/timeline/index.en-US.md
@ -31,6 +31,7 @@ Timeline
 | pending | Set the last ghost node's existence or its content | boolean\|string\|ReactNode | `false` |
 | pendingDot | Set the dot of the last ghost node when pending is true | \|string\|ReactNode | `<Icon type="loading" />` |
 | reverse | reverse nodes or not | boolean | false |
+| mode | By sending `alternate` the timeline will distribute the nodes to the left and right. | `left` \| `alternate` \| `right` | `left` |

 ### Timeline.Item

--- a/components/timeline/index.zh-CN.md
+++ b/components/timeline/index.zh-CN.md
@ -32,6 +32,7 @@ title: Timeline
 | pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|ReactNode | false |
 | pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | \|string\|ReactNode | `<Icon type="loading" />` |
 | reverse | 节点排序 | boolean | false |
+| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置  | `left` \| `alternate` \| `right` |

 ### Timeline.Item

--- a/components/timeline/style/index.less
+++ b/components/timeline/style/index.less
@ -86,6 +86,58 @@
    }
  }

+  &.@{timeline-prefix-cls}-alternate,
+  &.@{timeline-prefix-cls}-right {
+    .@{timeline-prefix-cls}-item {
+
+      &-tail,
+      &-head,
+      &-head-custom {
+        left: 50%;
+      }
+
+      &-head {
+        margin-left: -4px;
+        &-custom {
+          margin-left: 1px;
+        }
+      }
+
+      &-left {
+        .@{timeline-prefix-cls}-item-content {
+          text-align: left;
+          left: 50%;
+          width: 50%;
+        }
+      }
+
+      &-right {
+        .@{timeline-prefix-cls}-item-content {
+          text-align: right;
+          right: 50%;
+          margin-right: 18px;
+          width: 50%;
+          left: -30px;
+        }
+      }
+    }
+  }
+
+  &.@{timeline-prefix-cls}-right {
+    .@{timeline-prefix-cls}-item-right {
+      .@{timeline-prefix-cls}-item-tail,
+      .@{timeline-prefix-cls}-item-head,
+      .@{timeline-prefix-cls}-item-head-custom {
+        left: 100%;
+      }
+      .@{timeline-prefix-cls}-item-content {
+        right: 0;
+        width: 100%;
+        left: -30px;
+      }
+    }
+  }
+
  &&-pending &-item-last &-item-tail {
    border-left: 2px dotted @timeline-color;
    display: block;
--- a/components/tooltip/tests/tooltip.test.js
+++ b/components/tooltip/tests/tooltip.test.js
@ -3,6 +3,8 @@ import { mount } from 'enzyme';
 import Tooltip from '..';
 import Button from '../../button';
 import DatePicker from '../../date-picker';
+import Input from '../../input';
+import Group from '../../input/Group';

 const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));

@ -202,4 +204,32 @@ describe('Tooltip', () => {
    expect(onVisibleChange).toBeCalledWith(false);
    expect(wrapper.instance().tooltip.props.visible).toBe(false);
  });
+
+  it('should works for input group', async () => {
+    const onVisibleChange = jest.fn();
+
+    const wrapper = mount(
+      <Tooltip
+        title="hello"
+        onVisibleChange={onVisibleChange}
+      >
+        <Group>
+          <Input style={{ width: '50%' }} />
+          <Input style={{ width: '50%' }} />
+        </Group>
+      </Tooltip>
+    );
+
+    expect(wrapper.find('Group')).toHaveLength(1);
+    const picker = wrapper.find('Group').at(0);
+    picker.simulate('mouseenter');
+    await delay(100);
+    expect(onVisibleChange).toBeCalledWith(true);
+    expect(wrapper.instance().tooltip.props.visible).toBe(true);
+
+    picker.simulate('mouseleave');
+    await delay(100);
+    expect(onVisibleChange).toBeCalledWith(false);
+    expect(wrapper.instance().tooltip.props.visible).toBe(false);
+  });
 });
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@ -8,6 +8,7 @@ export interface HttpRequestHeader {

 export interface RcFile extends File {
  uid: number;
+  lastModifiedDate?: Date;
 }

 export interface UploadFile {
--- a/package.json
+++ b/package.json
@ -92,6 +92,7 @@
  },
  "devDependencies": {
    "@babel/types": "7.0.0-beta.44",
+    "@types/classnames": "^2.2.6",
    "@types/react": "^16.0.0",
    "@types/react-dom": "^16.0.0",
    "@yesmeck/offline-plugin": "^5.0.5",
@ -173,7 +174,7 @@
    "scrollama": "^1.4.1",
    "stylelint": "9.4.0",
    "stylelint-config-standard": "^18.0.0",
-    "typescript": "~2.9.1",
+    "typescript": "~3.0.1",
    "unified": "^7.0.0",
    "values.js": "^1.0.3",
    "xhr-mock": "^2.4.0",