From 672ebecf470e10bbfd3d52fd7df7db6cff1ede6b Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Sun, 18 Sep 2016 10:12:21 +0800 Subject: [PATCH] deps: upgrade dependencies (#3017) * deps: upgrade dependencies * fix: backward compatibility * fix: replace cross with close --- components/slider/index.tsx | 1 + components/slider/style/index.less | 46 --------- components/style/index.tsx | 16 +++ components/tabs/demo/card-top.md | 7 +- components/tabs/index.tsx | 39 +++++-- components/tabs/style/index.less | 158 +++++++++-------------------- components/tag/index.tsx | 4 +- package.json | 24 ++--- typings/custom-typings.d.ts | 8 ++ 9 files changed, 122 insertions(+), 181 deletions(-) diff --git a/components/slider/index.tsx b/components/slider/index.tsx index b44227b22b..4f96b6e3a3 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -30,6 +30,7 @@ export interface SliderProps { export default class Slider extends React.Component { static defaultProps = { prefixCls: 'ant-slider', + tooltipPrefixCls: 'ant-tooltip', tipTransitionName: 'zoom-down', }; diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 002edb1851..55770379bc 100644 --- a/components/slider/style/index.less +++ b/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; - } - } } diff --git a/components/style/index.tsx b/components/style/index.tsx index d74e52ee9f..9dbe3759a0 100644 --- a/components/style/index.tsx +++ b/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}`; + } +} diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md index 981225531d..66d53ccbf5 100644 --- a/components/tabs/demo/card-top.md +++ b/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; } diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index 59bc2880e6..d64edf5561 100644 --- a/components/tabs/index.tsx +++ b/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 { } 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 { 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, index) => { - childrenWithCross.push(cloneElement(child, { + childrenWithClose.push(cloneElement(child, { tab: (
{child.props.tab} - this.removeTab(child.key, e)} /> + this.removeTab(child.key, e)} />
), key: child.key || index, @@ -107,11 +118,17 @@ export default class Tabs extends React.Component { return ( ( + + )} + renderTabContent={() => } onChange={this.handleChange} - animation={animation} > - {childrenWithCross || children} + {childrenWithClose || children} ); } diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index dd4feeca86..1f2286f1e6 100644 --- a/components/tabs/style/index.less +++ b/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; + } + } +} diff --git a/components/tag/index.tsx b/components/tag/index.tsx index 2afe61ecdc..4088481901 100644 --- a/components/tag/index.tsx +++ b/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'; diff --git a/package.json b/package.json index e11f0e7ef1..556c1c1bc1 100644 --- a/package.json +++ b/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" }, diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts index 7d0d9c765f..e10793b81d 100644 --- a/typings/custom-typings.d.ts +++ b/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;