deps: upgrade dependencies (#3017)

* deps: upgrade dependencies

* fix: backward compatibility

* fix: replace cross with close

components/slider/index.tsx

@@ -30,6 +30,7 @@ export interface SliderProps {
 export default class Slider extends React.Component<SliderProps, any> {
   static defaultProps = {
     prefixCls: 'ant-slider',
+    tooltipPrefixCls: 'ant-tooltip',
     tipTransitionName: 'zoom-down',
   };
 

components/slider/style/index.less

@@ -136,50 +136,4 @@
       cursor: not-allowed!important;
     }
   }
-
-  // slider tooltip style
-  &-tooltip {
-    position: absolute;
-    left: -9999px;
-    top: -9999px;
-    z-index: 4;
-    visibility: visible;
-
-    &-hidden {
-      display: none;
-    }
-
-    &-placement-points-bc-tc {
-      padding: @slider-tooltip-arrow-width 0 @slider-tooltip-distance 0;
-    }
-
-    &-inner {
-      padding: 6px;
-      min-width: 24px;
-      height: 24px;
-      font-size: @font-size-base;
-      line-height: 1;
-      color: @slider-tooltip-color;
-      text-align: center;
-      text-decoration: none;
-      background-color: @slider-tooltip-bg;
-      border-radius: @border-radius-base;
-    }
-
-    &-arrow {
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-    }
-
-    &-placement-points-bc-tc &-arrow {
-      bottom: @slider-tooltip-distance - @slider-tooltip-arrow-width;
-      left: 50%;
-      margin-left: -@slider-tooltip-arrow-width;
-      border-width: @slider-tooltip-arrow-width @slider-tooltip-arrow-width 0;
-      border-top-color: @slider-tooltip-arrow-color;
-    }
-  }
 }

components/style/index.tsx

@@ -1 +1,17 @@
 import './index.less';
+
+function isFlexSupported(style) {
+  return 'flex' in style ||
+    'webkitFlex' in style ||
+    'MozFlex' in style;
+}
+
+if (typeof window !== undefined && window.document && window.document.documentElement) {
+  const { documentElement } = window.document;
+  const NO_FLEX = 'no-flex';
+
+  if (!isFlexSupported(documentElement.style) &&
+      documentElement.className.indexOf(NO_FLEX) === -1) {
+    documentElement.className += ` ${NO_FLEX}`;
+  }
+}

components/tabs/demo/card-top.md

@@ -36,12 +36,15 @@ ReactDOM.render(
 }
 
 .card-container > .ant-tabs-card > .ant-tabs-content {
-  background: #fff;
-  padding: 16px;
   height: 120px;
   margin-top: -16px;
 }
 
+.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
+  background: #fff;
+  padding: 16px;
+}
+
 .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
   border-color: transparent;
 }

components/tabs/index.tsx

@@ -1,6 +1,8 @@
-import RcTabs, { TabPane } from 'rc-tabs';
-import * as React from 'react';
+import React from 'react';
 import { cloneElement } from 'react';
+import RcTabs, { TabPane } from 'rc-tabs';
+import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
+import TabContent from 'rc-tabs/lib/TabContent';
 import classNames from 'classnames';
 import Icon from '../icon';
 
@@ -60,8 +62,17 @@ export default class Tabs extends React.Component<TabsProps, any> {
   }
 
   render() {
-    let { prefixCls, size, tabPosition, animation, type,
-      children, tabBarExtraContent, hideAdd } = this.props;
+    let {
+      prefixCls,
+      size,
+      type,
+      tabPosition,
+      animation,
+      children,
+      tabBarExtraContent,
+      hideAdd,
+      onTabClick,
+    } = this.props;
     let className = classNames({
       [this.props.className]: !!this.props.className,
       [`${prefixCls}-mini`]: size === 'small' || size === 'mini',
@@ -73,15 +84,15 @@ export default class Tabs extends React.Component<TabsProps, any> {
       animation = null;
     }
     // only card type tabs can be added and closed
-    let childrenWithCross;
+    let childrenWithClose;
     if (type === 'editable-card') {
-      childrenWithCross = [];
+      childrenWithClose = [];
       React.Children.forEach(children, (child: React.ReactElement<any>, index) => {
-        childrenWithCross.push(cloneElement(child, {
+        childrenWithClose.push(cloneElement(child, {
           tab: (
             <div>
               {child.props.tab}
-              <Icon type="cross" onClick={(e) => this.removeTab(child.key, e)} />
+              <Icon type="close" onClick={(e) => this.removeTab(child.key, e)} />
             </div>
           ),
           key: child.key || index,
@@ -107,11 +118,17 @@ export default class Tabs extends React.Component<TabsProps, any> {
     return (
       <RcTabs {...this.props}
         className={className}
-        tabBarExtraContent={tabBarExtraContent}
+        tabBarPosition={tabPosition}
+        renderTabBar={() => (
+          <ScrollableInkTabBar
+            extraContent={tabBarExtraContent}
+            onTabClick={onTabClick}
+          />
+        )}
+        renderTabContent={() => <TabContent />}
         onChange={this.handleChange}
-        animation={animation}
       >
-        {childrenWithCross || children}
+        {childrenWithClose || children}
       </RcTabs>
     );
   }

components/tabs/style/index.less

@@ -146,10 +146,7 @@
     .@{tab-prefix-cls}-tab-disabled {
       pointer-events: none;
       cursor: default;
-
-      .@{tab-prefix-cls}-tab-inner {
-        color: #ccc;
-      }
+      color: #ccc;
     }
 
     .@{tab-prefix-cls}-tab {
@@ -159,30 +156,26 @@
       box-sizing: border-box;
       position: relative;
 
-      &-inner {
-        padding: 8px 20px;
-        transition: color 0.3s @ease-in-out;
-        display: block;
-        cursor: pointer;
-        text-decoration: none;
-
-        &:hover {
-          color: tint(@primary-color, 20%);
-        }
+      padding: 8px 20px;
+      transition: color 0.3s @ease-in-out;
+      cursor: pointer;
+      text-decoration: none;
 
-        &:active {
-          color: shade(@primary-color, 5%);
-        }
+      &:hover {
+        color: tint(@primary-color, 20%);
+      }
 
-        .@{iconfont-css-prefix} {
-          width: 14px;
-          height: 14px;
-          margin-right: 8px;
-        }
+      &:active {
+        color: shade(@primary-color, 5%);
+      }
+      .@{iconfont-css-prefix} {
+        width: 14px;
+        height: 14px;
+        margin-right: 8px;
       }
     }
 
-    .@{tab-prefix-cls}-tab-active .@{tab-prefix-cls}-tab-inner {
+    .@{tab-prefix-cls}-tab-active {
       color: @primary-color;
     }
   }
@@ -193,82 +186,21 @@
 
   &-mini &-tab {
     margin-right: 0;
-    .@{tab-prefix-cls}-tab-inner {
-      padding: 8px 16px;
-    }
-  }
-
-  &-tabpane-hidden {
-    display: none;
-  }
-
-  &-content {
-    position: relative;
-    width: 100%;
-  }
-
-  &-slide-horizontal-backward-enter {
-    .motion-common();
-    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 {
-    animation-name: antMoveLeftIn;
-    transform: translateZ(0);
-    animation-play-state: running;
-  }
-
-  &-slide-horizontal-backward-leave {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    .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 {
-    animation-name: antMoveRightOut;
-    transform: translateZ(0);
-    animation-play-state: running;
+    padding: 8px 16px;
   }
 
-  &-slide-horizontal-forward-enter {
-    .motion-common();
-    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 {
-    animation-name: antMoveRightIn;
-    animation-play-state: running;
-    transform: translateZ(0);
-  }
-
-  &-slide-horizontal-forward-leave {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    .motion-common();
-    animation-duration: 0.4s;
-    animation-play-state: paused;
-    animation-timing-function: @ease-in-out-quint;
-  }
+  &:not(&-vertical) {
+    .@{tab-prefix-cls}-content-animated {
+      display: flex;
+      flex-direction: row;
+      will-change: transform;
+      transition: transform 0.3s @ease-in-out;
+    }
 
-  &-slide-horizontal-forward-leave&-slide-horizontal-forward-leave-active {
-    transform: translateZ(0);
-    animation-name: antMoveLeftOut;
-    animation-play-state: running;
+    .@{tab-prefix-cls}-tabpane {
+      flex-shrink: 0;
+      width: 100%;
+    }
   }
 
   &-vertical {
@@ -280,12 +212,11 @@
         margin-right: 0;
         margin-bottom: 16px;
         display: block;
+        padding: 8px 24px;
+
         &:last-child {
           margin-bottom: 0;
         }
-        .@{tab-prefix-cls}-tab-inner {
-          padding: 8px 24px;
-        }
       }
 
       .@{tab-prefix-cls}-nav-scroll {
@@ -321,9 +252,7 @@
       margin-right: -1px;
       margin-bottom: 0;
       .@{tab-prefix-cls}-tab {
-        .@{tab-prefix-cls}-tab-inner {
-          text-align: right;
-        }
+        text-align: right;
       }
       .@{tab-prefix-cls}-nav-container {
         margin-right: -1px;
@@ -384,7 +313,7 @@
     background: #f9f9f9;
     margin-right: 2px;
   }
-  &&-card > &-bar &-tab-inner {
+  &&-card > &-bar &-tab {
     padding: 7px 16px 6px;
     transition: all 0.3s @ease-in-out;
   }
@@ -394,14 +323,14 @@
     border-color: @border-color-base;
     color: @primary-color;
   }
-  &&-card > &-bar &-tab-active &-tab-inner {
+  &&-card > &-bar &-tab-active {
     padding-bottom: 7px;
     transform: translateZ(0);
   }
   &&-card > &-bar &-nav-wrap {
     margin-bottom: 0;
   }
-  &&-card > &-bar &-tab-inner .@{iconfont-css-prefix}-cross {
+  &&-card > &-bar &-tab .@{iconfont-css-prefix}-close {
     margin-right: 0;
     color: #999;
     transition: all 0.3s @ease-in-out;
@@ -417,13 +346,13 @@
     }
   }
 
-  &&-editable-card > &-bar &-tab:not(&-tab-active):hover &-tab-inner {
+  &&-editable-card > &-bar &-tab:not(&-tab-active):hover {
     padding-left: 8px;
     padding-right: 8px;
   }
 
-  &&-card > &-bar &-tab-active .@{iconfont-css-prefix}-cross,
-  &&-card > &-bar &-tab:hover .@{iconfont-css-prefix}-cross {
+  &&-card > &-bar &-tab-active .@{iconfont-css-prefix}-close,
+  &&-card > &-bar &-tab:hover .@{iconfont-css-prefix}-close {
     width: 16px;
     transform: translateZ(0);
   }
@@ -450,3 +379,16 @@
     }
   }
 }
+
+.no-flex,
+.@{tab-prefix-cls}-vertical {
+  .@{tab-prefix-cls}-content {
+    &-animated {
+      transform: none!important;
+    }
+
+    > .@{tab-prefix-cls}-tabpane-inactive {
+      display: none;
+    }
+  }
+}

components/tag/index.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import Icon from '../icon';
 import classNames from 'classnames';

package.json

@@ -42,36 +42,36 @@
     "object-assign": "~4.1.0",
     "omit.js": "^0.1.0",
     "rc-animate": "~2.3.0",
-    "rc-calendar": "^7.0.3",
+    "rc-calendar": "~7.0.3",
     "rc-cascader": "~0.10.1",
     "rc-checkbox": "~1.4.0",
     "rc-collapse": "~1.6.4",
-    "rc-dialog": "~6.2.1",
+    "rc-dialog": "~6.3.0",
     "rc-dropdown": "~1.4.8",
-    "rc-editor-mention": "^0.2.2",
+    "rc-editor-mention": "~0.2.2",
     "rc-form": "~1.0.0",
-    "rc-input-number": "~2.6.3",
-    "rc-menu": "^5.0.0",
+    "rc-input-number": "~2.7.0",
+    "rc-menu": "~5.0.0",
     "rc-notification": "~1.3.4",
     "rc-pagination": "~1.5.3",
-    "rc-progress": "~1.0.4",
+    "rc-progress": "~2.0.1",
     "rc-queue-anim": "~0.12.4",
     "rc-radio": "~2.0.0",
     "rc-rate": "~1.1.2",
-    "rc-select": "^6.5.1",
-    "rc-slider": "~4.0.0",
+    "rc-select": "~6.5.1",
+    "rc-slider": "~5.1.0",
     "rc-steps": "~2.1.5",
     "rc-switch": "~1.4.2",
     "rc-table": "~5.0.0",
-    "rc-tabs": "~5.9.2",
-    "rc-time-picker": "^2.0.0",
+    "rc-tabs": "~7.0.5",
+    "rc-time-picker": "~2.0.0",
     "rc-tooltip": "~3.4.2",
     "rc-tree": "~1.3.6",
     "rc-tree-select": "~1.8.0",
     "rc-upload": "~2.0.3",
-    "rc-util": "~3.3.0",
+    "rc-util": "^3.3.0",
     "react-addons-pure-render-mixin": "^15.0.0",
-    "react-slick": "~0.13.3",
+    "react-slick": "~0.14.2",
     "shallowequal": "^0.2.2",
     "warning": "~3.0.0"
   },

typings/custom-typings.d.ts

@@ -150,6 +150,14 @@ declare module 'rc-tabs' {
   export default function(): any;
 }
 
+declare module 'rc-tabs/lib/ScrollableInkTabBar' {
+  export default function(): any;
+}
+
+declare module 'rc-tabs/lib/TabContent' {
+  export default function(): any;
+}
+
 declare module 'rc-tree' {
   export const TreeNode: any;
   export default function(): any;