mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
deps: upgrade dependencies (#3017)
* deps: upgrade dependencies * fix: backward compatibility * fix: replace cross with close
This commit is contained in:
Benjy Cui
GitHub
parent
354759cb17
commit
672ebecf47
@ -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',
|
||||
};
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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}`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
padding: 8px 20px;
|
||||
transition: color 0.3s @ease-in-out;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: tint(@primary-color, 20%);
|
||||
}
|
||||
&:hover {
|
||||
color: tint(@primary-color, 20%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: shade(@primary-color, 5%);
|
||||
}
|
||||
|
||||
.@{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;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&:not(&-vertical) {
|
||||
.@{tab-prefix-cls}-content-animated {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
will-change: transform;
|
||||
transition: transform 0.3s @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-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;
|
||||
}
|
||||
|
||||
&-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;
|
||||
}
|
||||
|
||||
&-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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';
|
||||
|
||||
24
package.json
24
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"
|
||||
},
|
||||
|
||||
8
typings/custom-typings.d.ts
vendored
8
typings/custom-typings.d.ts
vendored
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user